65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import {
|
|
BarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from "recharts";
|
|
|
|
interface MonthlyChartData {
|
|
month: string;
|
|
revenus: number;
|
|
depenses: number;
|
|
solde: number;
|
|
}
|
|
|
|
interface MonthlyChartProps {
|
|
data: MonthlyChartData[];
|
|
formatCurrency: (amount: number) => string;
|
|
}
|
|
|
|
export function MonthlyChart({ data, formatCurrency }: MonthlyChartProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Revenus vs Dépenses par mois</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{data.length > 0 ? (
|
|
<div className="h-[300px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="month" className="text-xs" />
|
|
<YAxis className="text-xs" tickFormatter={(v) => `${v}€`} />
|
|
<Tooltip
|
|
formatter={(value: number) => formatCurrency(value)}
|
|
contentStyle={{
|
|
backgroundColor: "hsl(var(--card))",
|
|
border: "1px solid hsl(var(--border))",
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
<Legend />
|
|
<Bar dataKey="revenus" fill="#22c55e" radius={[4, 4, 0, 0]} />
|
|
<Bar dataKey="depenses" fill="#ef4444" radius={[4, 4, 0, 0]} />
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
) : (
|
|
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
|
|
Pas de données pour cette période
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|