|
|
"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; |
|
|
} |
|
|
|
|
|
|
|
|
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> |
|
|
); |
|
|
} |
|
|
|
