File size: 2,540 Bytes
4851501 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
"use client";
import {
LineChart as RechartsLineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer
} from 'recharts';
interface LineChartProps {
data: Array<{ [key: string]: any }>;
title?: string;
xKey?: string;
lines: Array<{ key: string; color?: string; name?: string }>;
height?: number;
}
// Default colors for lines
const COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
export default function LineChart({
data,
title,
xKey = 'name',
lines,
height = 300
}: LineChartProps) {
return (
<div className="w-full bg-white rounded-xl border border-slate-100 p-4 shadow-sm">
{title && (
<h3 className="text-sm font-semibold text-slate-700 mb-4">{title}</h3>
)}
<ResponsiveContainer width="100%" height={height}>
<RechartsLineChart
data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
>
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
<XAxis
dataKey={xKey}
tick={{ fill: '#64748b', fontSize: 12 }}
/>
<YAxis tick={{ fill: '#64748b', fontSize: 12 }} />
<Tooltip
contentStyle={{
background: 'white',
border: '1px solid #e2e8f0',
borderRadius: '8px',
boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)'
}}
labelStyle={{ color: '#334155', fontWeight: 600 }}
/>
<Legend wrapperStyle={{ fontSize: '12px' }} />
{lines.map((line, index) => (
<Line
key={line.key}
type="monotone"
dataKey={line.key}
name={line.name || line.key}
stroke={line.color || COLORS[index % COLORS.length]}
strokeWidth={2}
dot={{ fill: line.color || COLORS[index % COLORS.length], strokeWidth: 2 }}
activeDot={{ r: 6 }}
/>
))}
</RechartsLineChart>
</ResponsiveContainer>
</div>
);
}
|