147 lines
4.1 KiB
TypeScript
147 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { ChevronDown, ChevronUp } from "lucide-react";
|
|
import {
|
|
LineChart,
|
|
Line,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from "recharts";
|
|
import {
|
|
Collapsible,
|
|
CollapsibleContent,
|
|
CollapsibleTrigger,
|
|
} from "@/components/ui/collapsible";
|
|
|
|
interface MonthlyChartData {
|
|
month: string;
|
|
revenus: number;
|
|
depenses: number;
|
|
solde: number;
|
|
}
|
|
|
|
interface MonthlyChartProps {
|
|
data: MonthlyChartData[];
|
|
formatCurrency: (amount: number) => string;
|
|
collapsible?: boolean;
|
|
defaultExpanded?: boolean;
|
|
showDots?: boolean;
|
|
}
|
|
|
|
export function MonthlyChart({
|
|
data,
|
|
formatCurrency,
|
|
collapsible = false,
|
|
defaultExpanded = true,
|
|
showDots = true,
|
|
}: MonthlyChartProps) {
|
|
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
|
|
|
|
const chartContent = (
|
|
<>
|
|
{data.length > 0 ? (
|
|
<div className="h-[300px]">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<LineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
|
<XAxis dataKey="month" className="text-xs" />
|
|
<YAxis
|
|
className="text-xs"
|
|
width={80}
|
|
tickFormatter={(v) => {
|
|
// Format compact pour les grandes valeurs
|
|
if (Math.abs(v) >= 1000) {
|
|
return `${(v / 1000).toFixed(1)}k€`;
|
|
}
|
|
return `${v.toFixed(0)}€`;
|
|
}}
|
|
tick={{ fill: "var(--muted-foreground)" }}
|
|
/>
|
|
<Tooltip
|
|
formatter={(value: number) => formatCurrency(value)}
|
|
labelFormatter={(label) => label}
|
|
contentStyle={{
|
|
backgroundColor: "var(--card)",
|
|
border: "1px solid var(--border)",
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
<Legend />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="revenus"
|
|
name="Revenus"
|
|
stroke="#22c55e"
|
|
strokeWidth={2}
|
|
dot={showDots ? { fill: "#22c55e", r: 4 } : false}
|
|
activeDot={showDots ? { r: 6 } : false}
|
|
/>
|
|
<Line
|
|
type="monotone"
|
|
dataKey="depenses"
|
|
name="Dépenses"
|
|
stroke="#ef4444"
|
|
strokeWidth={2}
|
|
dot={showDots ? { fill: "#ef4444", r: 4 } : false}
|
|
activeDot={showDots ? { r: 6 } : false}
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
) : (
|
|
<div className="h-[300px] flex items-center justify-center text-muted-foreground">
|
|
Pas de données pour cette période
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
if (!collapsible) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Revenus vs Dépenses par mois</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>{chartContent}</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<Collapsible open={isExpanded} onOpenChange={setIsExpanded}>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 py-3 px-6">
|
|
<CardTitle className="text-base font-semibold">
|
|
Revenus vs Dépenses par mois
|
|
</CardTitle>
|
|
<CollapsibleTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="h-8">
|
|
{isExpanded ? (
|
|
<>
|
|
<ChevronUp className="w-4 h-4 mr-1" />
|
|
Réduire
|
|
</>
|
|
) : (
|
|
<>
|
|
<ChevronDown className="w-4 h-4 mr-1" />
|
|
Afficher
|
|
</>
|
|
)}
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
</CardHeader>
|
|
<CollapsibleContent>
|
|
<CardContent className="pt-0">{chartContent}</CardContent>
|
|
</CollapsibleContent>
|
|
</Collapsible>
|
|
</Card>
|
|
);
|
|
}
|