134 lines
4.1 KiB
TypeScript
134 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { CategoryIcon } from "@/components/ui/category-icon";
|
|
import {
|
|
PieChart,
|
|
Pie,
|
|
Cell,
|
|
Tooltip,
|
|
ResponsiveContainer,
|
|
Legend,
|
|
} from "recharts";
|
|
|
|
export interface CategoryChartData {
|
|
name: string;
|
|
value: number;
|
|
color: string;
|
|
icon: string;
|
|
[key: string]: string | number;
|
|
}
|
|
|
|
interface CategoryPieChartProps {
|
|
data: CategoryChartData[];
|
|
formatCurrency: (amount: number) => string;
|
|
title?: string;
|
|
height?: number;
|
|
innerRadius?: number;
|
|
outerRadius?: number;
|
|
emptyMessage?: string;
|
|
}
|
|
|
|
export function CategoryPieChart({
|
|
data,
|
|
formatCurrency,
|
|
title = "Répartition par catégorie",
|
|
height = 300,
|
|
innerRadius = 60,
|
|
outerRadius = 100,
|
|
emptyMessage = "Pas de données pour cette période",
|
|
}: CategoryPieChartProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{data.length > 0 ? (
|
|
<div style={{ height }}>
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<PieChart>
|
|
<Pie
|
|
data={data}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={innerRadius}
|
|
outerRadius={outerRadius}
|
|
paddingAngle={2}
|
|
dataKey="value"
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${index}`} fill={entry.color} />
|
|
))}
|
|
</Pie>
|
|
<Tooltip
|
|
content={({ active, payload }) => {
|
|
if (!active || !payload?.length) return null;
|
|
const item = payload[0].payload as CategoryChartData;
|
|
return (
|
|
<div
|
|
className="px-3 py-2 rounded-lg shadow-lg"
|
|
style={{
|
|
backgroundColor: "var(--card)",
|
|
border: "1px solid var(--border)",
|
|
}}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<CategoryIcon
|
|
icon={item.icon}
|
|
color={item.color}
|
|
size={16}
|
|
/>
|
|
<span
|
|
className="font-medium"
|
|
style={{ color: item.color }}
|
|
>
|
|
{item.name}
|
|
</span>
|
|
</div>
|
|
<div className="text-foreground font-semibold mt-1">
|
|
{formatCurrency(item.value)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
<Legend
|
|
content={({ payload }) => (
|
|
<div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
|
|
{payload?.map((entry, index) => {
|
|
const item = data.find((d) => d.name === entry.value);
|
|
return (
|
|
<div
|
|
key={`legend-${index}`}
|
|
className="flex items-center gap-1.5 text-sm"
|
|
>
|
|
<CategoryIcon
|
|
icon={item?.icon || "HelpCircle"}
|
|
color={item?.color || "#94a3b8"}
|
|
size={14}
|
|
/>
|
|
<span className="text-foreground">{entry.value}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
/>
|
|
</PieChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
) : (
|
|
<div
|
|
style={{ height }}
|
|
className="flex items-center justify-center text-muted-foreground"
|
|
>
|
|
{emptyMessage}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|