44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
|
import { ChartData } from '../../types';
|
|
|
|
interface LineChartProps {
|
|
data: ChartData[];
|
|
title?: string;
|
|
color?: string;
|
|
}
|
|
|
|
export const LineChart = ({ data, title, color = '#10b981' }: LineChartProps) => {
|
|
return (
|
|
<div className="card p-6">
|
|
{title && (
|
|
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
|
{title}
|
|
</h3>
|
|
)}
|
|
<ResponsiveContainer width="100%" height={300}>
|
|
<RechartsLineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-gray-300 dark:stroke-gray-600" />
|
|
<XAxis
|
|
dataKey="name"
|
|
className="text-gray-600 dark:text-gray-400"
|
|
tick={{ fontSize: 12 }}
|
|
/>
|
|
<YAxis
|
|
className="text-gray-600 dark:text-gray-400"
|
|
tick={{ fontSize: 12 }}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'var(--tooltip-bg)',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
}}
|
|
labelStyle={{ color: 'var(--tooltip-text)' }}
|
|
/>
|
|
<Line type="monotone" dataKey="value" stroke={color} strokeWidth={3} dot={{ r: 6 }} />
|
|
</RechartsLineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
);
|
|
};
|