41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
// Line Chart Component (Recharts wrapper)
|
|
import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
|
|
|
|
interface LineChartProps {
|
|
data: Array<Record<string, any>>;
|
|
dataKey: string;
|
|
lines: Array<{
|
|
key: string;
|
|
name: string;
|
|
color: string;
|
|
}>;
|
|
height?: number;
|
|
xAxisKey?: string;
|
|
}
|
|
|
|
export default function LineChart({ data, dataKey, lines, height = 300, xAxisKey = 'date' }: LineChartProps) {
|
|
return (
|
|
<ResponsiveContainer width="100%" height={height}>
|
|
<RechartsLineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" />
|
|
<XAxis dataKey={xAxisKey} />
|
|
<YAxis />
|
|
<Tooltip />
|
|
<Legend />
|
|
{lines.map((line) => (
|
|
<Line
|
|
key={line.key}
|
|
type="monotone"
|
|
dataKey={line.key}
|
|
name={line.name}
|
|
stroke={line.color}
|
|
strokeWidth={2}
|
|
dot={{ r: 4 }}
|
|
/>
|
|
))}
|
|
</RechartsLineChart>
|
|
</ResponsiveContainer>
|
|
);
|
|
}
|
|
|