72 lines
3.1 KiB
TypeScript
72 lines
3.1 KiB
TypeScript
import { LineChart as RechartsLineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
|
import { CardTitle } from '../ui/Typography';
|
|
import { englishToPersian, formatWithThousands } from '@/utils/numberUtils';
|
|
|
|
const formatNumber = (value: number | string) => {
|
|
const formatted = formatWithThousands(value);
|
|
return englishToPersian(formatted);
|
|
};
|
|
|
|
|
|
interface LineChartProps {
|
|
data: any[];
|
|
title?: string;
|
|
color?: string;
|
|
}
|
|
|
|
export const LineChart = ({ data, title, color = '#10b981' }: LineChartProps) => {
|
|
return (
|
|
<div className="card p-3 sm:p-4 lg:p-6">
|
|
{title && (
|
|
<CardTitle className="mb-3 sm:mb-4">
|
|
{title}
|
|
</CardTitle>
|
|
)}
|
|
<div className="w-full">
|
|
<ResponsiveContainer width="100%" height={250} minHeight={200}>
|
|
<RechartsLineChart data={data} margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
|
|
<CartesianGrid strokeDasharray="4 4" className="stroke-gray-200 dark:stroke-gray-700" />
|
|
<XAxis
|
|
dataKey="name"
|
|
className="text-gray-600 dark:text-gray-400"
|
|
tick={{ fontSize: 11, fontFamily: 'inherit' }}
|
|
tickFormatter={(value) => englishToPersian(value)}
|
|
interval="preserveStartEnd"
|
|
height={40}
|
|
/>
|
|
<YAxis
|
|
className="text-gray-600 dark:text-gray-400"
|
|
tick={{ fontSize: 11, fontFamily: 'inherit' }}
|
|
tickFormatter={(value) => formatNumber(value)}
|
|
width={72}
|
|
tickMargin={8}
|
|
tickCount={4}
|
|
allowDecimals={false}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'var(--toast-bg)',
|
|
color: 'var(--toast-color)',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
|
|
fontSize: '12px',
|
|
fontFamily: 'inherit',
|
|
}}
|
|
formatter={(value: any) => formatNumber(value)}
|
|
labelFormatter={(label: any) => englishToPersian(label)}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="value"
|
|
stroke={color}
|
|
strokeWidth={3}
|
|
dot={false}
|
|
activeDot={{ r: 5 }}
|
|
/>
|
|
</RechartsLineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|