37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { memo, useMemo } from 'react';
|
|
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
|
|
import { Card } from '@/components/ui/card';
|
|
import { getCreditScoreTrend } from '@/lib/mockData';
|
|
|
|
interface CreditScoreTrendChartProps {
|
|
creditScore: number;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export const CreditScoreTrendChart = memo(({ creditScore, compact = false }: CreditScoreTrendChartProps) => {
|
|
const creditTrend = useMemo(() => getCreditScoreTrend(creditScore), [creditScore]);
|
|
|
|
return (
|
|
<Card className={`p-4 ${compact ? '' : 'h-[280px]'}`}>
|
|
<h3 className="text-lg font-semibold mb-2 text-foreground">Credit Score Trend (6M)</h3>
|
|
<ResponsiveContainer width="100%" height={200}>
|
|
<LineChart data={creditTrend}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
|
|
<XAxis dataKey="month" stroke="#6b7280" style={{ fontSize: '12px' }} />
|
|
<YAxis stroke="#6b7280" style={{ fontSize: '12px' }} domain={[600, 850]} />
|
|
<Tooltip />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="score"
|
|
stroke="#16A34A"
|
|
strokeWidth={2}
|
|
dot={{ fill: '#16A34A', r: 4 }}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</Card>
|
|
);
|
|
});
|
|
|
|
CreditScoreTrendChart.displayName = 'CreditScoreTrendChart';
|