Skip to content

Commit d7a4b5f

Browse files
sawkasawka
committed
add recharts documentation for prompt
1 parent c416026 commit d7a4b5f

2 files changed

Lines changed: 480 additions & 137 deletions

File tree

‎tsunami/demo/recharts/app.go‎

Lines changed: 155 additions & 137 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,157 @@ func generateNewDataPoint(currentData []DataPoint) DataPoint {
5151
}
5252
}
5353

54+
var InfoSection = app.DefineComponent("InfoSection",
55+
func(ctx context.Context, _ struct{}) any {
56+
return vdom.H("div", map[string]any{
57+
"className": "bg-blue-50 border border-blue-200 rounded-lg p-4",
58+
},
59+
vdom.H("h3", map[string]any{
60+
"className": "text-lg font-semibold text-blue-900 mb-2",
61+
}, "Recharts Integration Features"),
62+
vdom.H("ul", map[string]any{
63+
"className": "space-y-2 text-blue-800",
64+
},
65+
vdom.H("li", map[string]any{
66+
"className": "flex items-start gap-2",
67+
},
68+
vdom.H("span", map[string]any{
69+
"className": "text-blue-500 mt-1",
70+
}, "•"),
71+
"Support for all major Recharts components (LineChart, AreaChart, BarChart, etc.)",
72+
),
73+
vdom.H("li", map[string]any{
74+
"className": "flex items-start gap-2",
75+
},
76+
vdom.H("span", map[string]any{
77+
"className": "text-blue-500 mt-1",
78+
}, "•"),
79+
"Live data updates with animation support",
80+
),
81+
vdom.H("li", map[string]any{
82+
"className": "flex items-start gap-2",
83+
},
84+
vdom.H("span", map[string]any{
85+
"className": "text-blue-500 mt-1",
86+
}, "•"),
87+
"Responsive containers that resize with the window",
88+
),
89+
vdom.H("li", map[string]any{
90+
"className": "flex items-start gap-2",
91+
},
92+
vdom.H("span", map[string]any{
93+
"className": "text-blue-500 mt-1",
94+
}, "•"),
95+
"Full prop support for customization and styling",
96+
),
97+
vdom.H("li", map[string]any{
98+
"className": "flex items-start gap-2",
99+
},
100+
vdom.H("span", map[string]any{
101+
"className": "text-blue-500 mt-1",
102+
}, "•"),
103+
"Uses recharts: namespace to dispatch to the recharts handler",
104+
),
105+
),
106+
)
107+
},
108+
)
109+
110+
type MiniChartsProps struct {
111+
ChartData []DataPoint `json:"chartData"`
112+
}
113+
114+
var MiniCharts = app.DefineComponent("MiniCharts",
115+
func(ctx context.Context, props MiniChartsProps) any {
116+
return vdom.H("div", map[string]any{
117+
"className": "grid grid-cols-1 md:grid-cols-3 gap-6 mb-6",
118+
},
119+
// CPU Mini Chart
120+
vdom.H("div", map[string]any{
121+
"className": "bg-white rounded-lg shadow-sm border p-4",
122+
},
123+
vdom.H("h3", map[string]any{
124+
"className": "text-lg font-medium text-gray-900 mb-3",
125+
}, "CPU Usage"),
126+
vdom.H("div", map[string]any{
127+
"className": "h-32",
128+
},
129+
vdom.H("recharts:ResponsiveContainer", map[string]any{
130+
"width": "100%",
131+
"height": "100%",
132+
},
133+
vdom.H("recharts:LineChart", map[string]any{
134+
"data": props.ChartData,
135+
},
136+
vdom.H("recharts:Line", map[string]any{
137+
"type": "monotone",
138+
"dataKey": "cpu",
139+
"stroke": "#8884d8",
140+
"strokeWidth": 2,
141+
"dot": false,
142+
}),
143+
),
144+
),
145+
),
146+
),
147+
148+
// Memory Mini Chart
149+
vdom.H("div", map[string]any{
150+
"className": "bg-white rounded-lg shadow-sm border p-4",
151+
},
152+
vdom.H("h3", map[string]any{
153+
"className": "text-lg font-medium text-gray-900 mb-3",
154+
}, "Memory Usage"),
155+
vdom.H("div", map[string]any{
156+
"className": "h-32",
157+
},
158+
vdom.H("recharts:ResponsiveContainer", map[string]any{
159+
"width": "100%",
160+
"height": "100%",
161+
},
162+
vdom.H("recharts:AreaChart", map[string]any{
163+
"data": props.ChartData,
164+
},
165+
vdom.H("recharts:Area", map[string]any{
166+
"type": "monotone",
167+
"dataKey": "mem",
168+
"stroke": "#82ca9d",
169+
"fill": "#82ca9d",
170+
}),
171+
),
172+
),
173+
),
174+
),
175+
176+
// Disk Mini Chart
177+
vdom.H("div", map[string]any{
178+
"className": "bg-white rounded-lg shadow-sm border p-4",
179+
},
180+
vdom.H("h3", map[string]any{
181+
"className": "text-lg font-medium text-gray-900 mb-3",
182+
}, "Disk Usage"),
183+
vdom.H("div", map[string]any{
184+
"className": "h-32",
185+
},
186+
vdom.H("recharts:ResponsiveContainer", map[string]any{
187+
"width": "100%",
188+
"height": "100%",
189+
},
190+
vdom.H("recharts:BarChart", map[string]any{
191+
"data": props.ChartData,
192+
},
193+
vdom.H("recharts:Bar", map[string]any{
194+
"dataKey": "disk",
195+
"fill": "#ffc658",
196+
}),
197+
),
198+
),
199+
),
200+
),
201+
)
202+
},
203+
)
204+
54205
var App = app.DefineComponent("App",
55206
func(ctx context.Context, _ struct{}) any {
56207
vdom.UseSetAppTitle(ctx, "Recharts Demo")
@@ -324,145 +475,12 @@ var App = app.DefineComponent("App",
324475
),
325476

326477
// Mini charts row
327-
vdom.H("div", map[string]any{
328-
"className": "grid grid-cols-1 md:grid-cols-3 gap-6 mb-6",
329-
},
330-
// CPU Mini Chart
331-
vdom.H("div", map[string]any{
332-
"className": "bg-white rounded-lg shadow-sm border p-4",
333-
},
334-
vdom.H("h3", map[string]any{
335-
"className": "text-lg font-medium text-gray-900 mb-3",
336-
}, "CPU Usage"),
337-
vdom.H("div", map[string]any{
338-
"className": "h-32",
339-
},
340-
vdom.H("recharts:ResponsiveContainer", map[string]any{
341-
"width": "100%",
342-
"height": "100%",
343-
},
344-
vdom.H("recharts:LineChart", map[string]any{
345-
"data": chartData,
346-
},
347-
vdom.H("recharts:Line", map[string]any{
348-
"type": "monotone",
349-
"dataKey": "cpu",
350-
"stroke": "#8884d8",
351-
"strokeWidth": 2,
352-
"dot": false,
353-
}),
354-
),
355-
),
356-
),
357-
),
358-
359-
// Memory Mini Chart
360-
vdom.H("div", map[string]any{
361-
"className": "bg-white rounded-lg shadow-sm border p-4",
362-
},
363-
vdom.H("h3", map[string]any{
364-
"className": "text-lg font-medium text-gray-900 mb-3",
365-
}, "Memory Usage"),
366-
vdom.H("div", map[string]any{
367-
"className": "h-32",
368-
},
369-
vdom.H("recharts:ResponsiveContainer", map[string]any{
370-
"width": "100%",
371-
"height": "100%",
372-
},
373-
vdom.H("recharts:AreaChart", map[string]any{
374-
"data": chartData,
375-
},
376-
vdom.H("recharts:Area", map[string]any{
377-
"type": "monotone",
378-
"dataKey": "mem",
379-
"stroke": "#82ca9d",
380-
"fill": "#82ca9d",
381-
}),
382-
),
383-
),
384-
),
385-
),
386-
387-
// Disk Mini Chart
388-
vdom.H("div", map[string]any{
389-
"className": "bg-white rounded-lg shadow-sm border p-4",
390-
},
391-
vdom.H("h3", map[string]any{
392-
"className": "text-lg font-medium text-gray-900 mb-3",
393-
}, "Disk Usage"),
394-
vdom.H("div", map[string]any{
395-
"className": "h-32",
396-
},
397-
vdom.H("recharts:ResponsiveContainer", map[string]any{
398-
"width": "100%",
399-
"height": "100%",
400-
},
401-
vdom.H("recharts:BarChart", map[string]any{
402-
"data": chartData,
403-
},
404-
vdom.H("recharts:Bar", map[string]any{
405-
"dataKey": "disk",
406-
"fill": "#ffc658",
407-
}),
408-
),
409-
),
410-
),
411-
),
412-
),
478+
MiniCharts(MiniChartsProps{
479+
ChartData: chartData,
480+
}),
413481

414482
// Info section
415-
vdom.H("div", map[string]any{
416-
"className": "bg-blue-50 border border-blue-200 rounded-lg p-4",
417-
},
418-
vdom.H("h3", map[string]any{
419-
"className": "text-lg font-semibold text-blue-900 mb-2",
420-
}, "Recharts Integration Features"),
421-
vdom.H("ul", map[string]any{
422-
"className": "space-y-2 text-blue-800",
423-
},
424-
vdom.H("li", map[string]any{
425-
"className": "flex items-start gap-2",
426-
},
427-
vdom.H("span", map[string]any{
428-
"className": "text-blue-500 mt-1",
429-
}, "•"),
430-
"Support for all major Recharts components (LineChart, AreaChart, BarChart, etc.)",
431-
),
432-
vdom.H("li", map[string]any{
433-
"className": "flex items-start gap-2",
434-
},
435-
vdom.H("span", map[string]any{
436-
"className": "text-blue-500 mt-1",
437-
}, "•"),
438-
"Live data updates with animation support",
439-
),
440-
vdom.H("li", map[string]any{
441-
"className": "flex items-start gap-2",
442-
},
443-
vdom.H("span", map[string]any{
444-
"className": "text-blue-500 mt-1",
445-
}, "•"),
446-
"Responsive containers that resize with the window",
447-
),
448-
vdom.H("li", map[string]any{
449-
"className": "flex items-start gap-2",
450-
},
451-
vdom.H("span", map[string]any{
452-
"className": "text-blue-500 mt-1",
453-
}, "•"),
454-
"Full prop support for customization and styling",
455-
),
456-
vdom.H("li", map[string]any{
457-
"className": "flex items-start gap-2",
458-
},
459-
vdom.H("span", map[string]any{
460-
"className": "text-blue-500 mt-1",
461-
}, "•"),
462-
"Uses recharts: namespace to dispatch to the recharts handler",
463-
),
464-
),
465-
),
483+
InfoSection(struct{}{}),
466484
),
467485
)
468486
},

0 commit comments

Comments
 (0)