122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { TrendingUp, TrendingDown } from "lucide-react";
|
|
import {
|
|
AreaChart,
|
|
Area,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
} from "recharts";
|
|
|
|
interface SavingsTrendDataPoint {
|
|
month: string;
|
|
savings: number;
|
|
cumulative: number;
|
|
}
|
|
|
|
interface SavingsTrendChartProps {
|
|
data: SavingsTrendDataPoint[];
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
export function SavingsTrendChart({
|
|
data,
|
|
formatCurrency,
|
|
}: SavingsTrendChartProps) {
|
|
const latestSavings = data.length > 0 ? data[data.length - 1].savings : 0;
|
|
const isPositive = latestSavings >= 0;
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle>Évolution des économies</CardTitle>
|
|
<div className="flex items-center gap-2">
|
|
{isPositive ? (
|
|
<TrendingUp className="w-4 h-4 text-emerald-600" />
|
|
) : (
|
|
<TrendingDown className="w-4 h-4 text-red-600" />
|
|
)}
|
|
<span
|
|
className={`text-sm font-semibold ${
|
|
isPositive ? "text-emerald-600" : "text-red-600"
|
|
}`}
|
|
>
|
|
{formatCurrency(latestSavings)}
|
|
</span>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{data.length > 0 ? (
|
|
<div className="h-[250px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={data}>
|
|
<defs>
|
|
<linearGradient
|
|
id="savingsGradient"
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="1"
|
|
>
|
|
<stop
|
|
offset="5%"
|
|
stopColor={isPositive ? "#22c55e" : "#ef4444"}
|
|
stopOpacity={0.3}
|
|
/>
|
|
<stop
|
|
offset="95%"
|
|
stopColor={isPositive ? "#22c55e" : "#ef4444"}
|
|
stopOpacity={0}
|
|
/>
|
|
</linearGradient>
|
|
</defs>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis
|
|
dataKey="month"
|
|
className="text-xs"
|
|
interval="preserveStartEnd"
|
|
/>
|
|
<YAxis
|
|
className="text-xs"
|
|
width={80}
|
|
tickFormatter={(v) => {
|
|
if (Math.abs(v) >= 1000) {
|
|
return `${(v / 1000).toFixed(1)}k€`;
|
|
}
|
|
return `${Math.round(v)}€`;
|
|
}}
|
|
tick={{ fill: "var(--muted-foreground)" }}
|
|
/>
|
|
<Tooltip
|
|
formatter={(value: number) => formatCurrency(value)}
|
|
contentStyle={{
|
|
backgroundColor: "var(--card)",
|
|
border: "1px solid var(--border)",
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
<Area
|
|
type="monotone"
|
|
dataKey="savings"
|
|
name="Économies mensuelles"
|
|
stroke={isPositive ? "#22c55e" : "#ef4444"}
|
|
strokeWidth={2}
|
|
fill="url(#savingsGradient)"
|
|
/>
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
) : (
|
|
<div className="h-[250px] flex items-center justify-center text-muted-foreground">
|
|
Pas de données pour cette période
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|