63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
CategoryPieChart,
|
|
type CategoryChartData,
|
|
} from "@/components/statistics/category-pie-chart";
|
|
import type { BankingData } from "@/lib/types";
|
|
|
|
interface CategoryBreakdownProps {
|
|
data: BankingData;
|
|
}
|
|
|
|
export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
|
|
// Get current month expenses by category
|
|
const thisMonth = new Date();
|
|
thisMonth.setDate(1);
|
|
const thisMonthStr = thisMonth.toISOString().slice(0, 7);
|
|
|
|
const monthExpenses = data.transactions.filter(
|
|
(t) => t.date.startsWith(thisMonthStr) && t.amount < 0,
|
|
);
|
|
|
|
const categoryTotals = new Map<string, number>();
|
|
|
|
monthExpenses.forEach((t) => {
|
|
const catId = t.categoryId || "uncategorized";
|
|
const current = categoryTotals.get(catId) || 0;
|
|
categoryTotals.set(catId, current + Math.abs(t.amount));
|
|
});
|
|
|
|
const chartData: CategoryChartData[] = Array.from(categoryTotals.entries())
|
|
.map(([categoryId, total]) => {
|
|
const category = data.categories.find((c) => c.id === categoryId);
|
|
return {
|
|
name: category?.name || "Non catégorisé",
|
|
value: total,
|
|
color: category?.color || "#94a3b8",
|
|
icon: category?.icon || "HelpCircle",
|
|
};
|
|
})
|
|
.sort((a, b) => b.value - a.value)
|
|
.slice(0, 6);
|
|
|
|
const formatCurrency = (value: number) => {
|
|
return new Intl.NumberFormat("fr-FR", {
|
|
style: "currency",
|
|
currency: "EUR",
|
|
}).format(value);
|
|
};
|
|
|
|
return (
|
|
<CategoryPieChart
|
|
data={chartData}
|
|
formatCurrency={formatCurrency}
|
|
title="Dépenses par catégorie"
|
|
height={250}
|
|
innerRadius={50}
|
|
outerRadius={80}
|
|
emptyMessage="Pas de données ce mois-ci"
|
|
/>
|
|
);
|
|
}
|