| import { | |
| ResponsiveContainer, | |
| LineChart, | |
| Line, | |
| BarChart, | |
| Bar, | |
| PieChart, | |
| Pie, | |
| Cell, | |
| XAxis, | |
| YAxis, | |
| CartesianGrid, | |
| Tooltip, | |
| Legend, | |
| } from "recharts"; | |
| interface PlotComponentProps { | |
| type?: "line" | "bar" | "pie"; | |
| data?: any[]; | |
| xKey?: string; | |
| yKey?: string; | |
| title?: string; | |
| } | |
| const DEFAULT_DATA = [ | |
| { month: "Jan", value: 40 }, | |
| { month: "Feb", value: 55 }, | |
| { month: "Mar", value: 70 }, | |
| { month: "Apr", value: 85 }, | |
| ]; | |
| export function PlotComponent({ type = "line", data = DEFAULT_DATA, xKey = "month", yKey = "value", title = "Chart" }: PlotComponentProps) { | |
| const COLORS = ["#0d9488", "#2563eb", "#7c3aed", "#db2777", "#ea580c"]; | |
| return ( | |
| <div className="bg-white dark:bg-gray-800 rounded-xl p-4"> | |
| <h3 className="text-sm font-semibold mb-3">{title}</h3> | |
| <ResponsiveContainer width="100%" height={300}> | |
| {type === "line" ? ( | |
| <LineChart data={data}> | |
| <CartesianGrid strokeDasharray="3 3" /> | |
| <XAxis dataKey={xKey} /> | |
| <YAxis /> | |
| <Tooltip /> | |
| <Legend /> | |
| <Line type="monotone" dataKey={yKey} stroke="#0d9488" /> | |
| </LineChart> | |
| ) : type === "bar" ? ( | |
| <BarChart data={data}> | |
| <CartesianGrid strokeDasharray="3 3" /> | |
| <XAxis dataKey={xKey} /> | |
| <YAxis /> | |
| <Tooltip /> | |
| <Legend /> | |
| <Bar dataKey={yKey} fill="#0d9488" /> | |
| </BarChart> | |
| ) : ( | |
| <PieChart> | |
| <Pie data={data} dataKey={yKey} nameKey={xKey} cx="50%" cy="50%" outerRadius={80} label> | |
| {data.map((entry, index) => <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />)} | |
| </Pie> | |
| <Tooltip /> | |
| <Legend /> | |
| </PieChart> | |
| )} | |
| </ResponsiveContainer> | |
| </div> | |
| ); | |
| } |
Xet Storage Details
- Size:
- 1.87 kB
- Xet hash:
- 8cc374f1758725c81aa7072237d09d88876d66083f8369d9eb386ae7d33df980
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.