julienfroidefond/fintrack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance category breakdown and pie chart components with icon support and improved tooltip formatting

Browse Source
This commit is contained in:
Julien Froidefond
2025-11-28 13:56:58 +01:00
parent 0e0db122b9
commit fc483d0573
5 changed files with 92 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/statistics/page.tsx
View File

@@ -97,6 +97,7 @@ export default function StatisticsPage() {
name: category?.name || "Non catégorisé", name: category?.name || "Non catégorisé",
value: Math.round(total), value: Math.round(total),
color: category?.color || "#94a3b8", color: category?.color || "#94a3b8",
icon: category?.icon || "HelpCircle",
}; };
}) })
.sort((a, b) => b.value - a.value) .sort((a, b) => b.value - a.value)

73
components/dashboard/category-breakdown.tsx
View File

@@ -1,15 +1,10 @@
"use client"; "use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { BankingData } from "@/lib/types";
import { import {
PieChart, CategoryPieChart,
Pie, type CategoryChartData,
Cell, } from "@/components/statistics/category-pie-chart";
ResponsiveContainer, import type { BankingData } from "@/lib/types";
Legend,
Tooltip,
} from "recharts";
interface CategoryBreakdownProps { interface CategoryBreakdownProps {
data: BankingData; data: BankingData;
@@ -22,7 +17,7 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
const thisMonthStr = thisMonth.toISOString().slice(0, 7); const thisMonthStr = thisMonth.toISOString().slice(0, 7);
const monthExpenses = data.transactions.filter( const monthExpenses = data.transactions.filter(
(t) => t.date.startsWith(thisMonthStr) && t.amount < 0, (t) => t.date.startsWith(thisMonthStr) && t.amount < 0
); );
const categoryTotals = new Map<string, number>(); const categoryTotals = new Map<string, number>();
@@ -33,13 +28,14 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
categoryTotals.set(catId, current + Math.abs(t.amount)); categoryTotals.set(catId, current + Math.abs(t.amount));
}); });
const chartData = Array.from(categoryTotals.entries()) const chartData: CategoryChartData[] = Array.from(categoryTotals.entries())
.map(([categoryId, total]) => { .map(([categoryId, total]) => {
const category = data.categories.find((c) => c.id === categoryId); const category = data.categories.find((c) => c.id === categoryId);
return { return {
name: category?.name || "Non catégorisé", name: category?.name || "Non catégorisé",
value: total, value: total,
color: category?.color || "#94a3b8", color: category?.color || "#94a3b8",
icon: category?.icon || "HelpCircle",
}; };
}) })
.sort((a, b) => b.value - a.value) .sort((a, b) => b.value - a.value)
@@ -52,60 +48,15 @@ export function CategoryBreakdown({ data }: CategoryBreakdownProps) {
}).format(value); }).format(value);
}; };
if (chartData.length === 0) {
return ( return (
<Card> <CategoryPieChart
<CardHeader>
<CardTitle>Dépenses par catégorie</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center justify-center py-8 text-center">
<p className="text-muted-foreground">Pas de données ce mois-ci</p>
</div>
</CardContent>
</Card>
);
}
return (
<Card>
<CardHeader>
<CardTitle>Dépenses par catégorie</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[250px]">
<ResponsiveContainer width="100%" height="100%">
<PieChart>
<Pie
data={chartData} data={chartData}
cx="50%" formatCurrency={formatCurrency}
cy="50%" title="Dépenses par catégorie"
height={250}
innerRadius={50} innerRadius={50}
outerRadius={80} outerRadius={80}
paddingAngle={2} emptyMessage="Pas de données ce mois-ci"
dataKey="value"
>
{chartData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
))}
</Pie>
<Tooltip
formatter={(value: number) => formatCurrency(value)}
contentStyle={{
backgroundColor: "hsl(var(--card))",
border: "1px solid hsl(var(--border))",
borderRadius: "8px",
}}
/> />
<Legend
formatter={(value) => (
<span className="text-sm text-foreground">{value}</span>
)}
/>
</PieChart>
</ResponsiveContainer>
</div>
</CardContent>
</Card>
); );
} }

4
components/statistics/balance-line-chart.tsx
View File

@@ -45,8 +45,8 @@ export function BalanceLineChart({
<Tooltip <Tooltip
formatter={(value: number) => formatCurrency(value)} formatter={(value: number) => formatCurrency(value)}
contentStyle={{ contentStyle={{
backgroundColor: "hsl(var(--card))", backgroundColor: "var(--card)",
border: "1px solid hsl(var(--border))", border: "1px solid var(--border)",
borderRadius: "8px", borderRadius: "8px",
}} }}
/> />

85
components/statistics/category-pie-chart.tsx
View File

@@ -1,6 +1,7 @@
"use client"; "use client";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { CategoryIcon } from "@/components/ui/category-icon";
import { import {
PieChart, PieChart,
Pie, Pie,
@@ -10,37 +11,49 @@ import {
Legend, Legend,
} from "recharts"; } from "recharts";
interface CategoryChartData { export interface CategoryChartData {
name: string; name: string;
value: number; value: number;
color: string; color: string;
icon: string;
[key: string]: string | number;
} }
interface CategoryPieChartProps { interface CategoryPieChartProps {
data: CategoryChartData[]; data: CategoryChartData[];
formatCurrency: (amount: number) => string; formatCurrency: (amount: number) => string;
title?: string;
height?: number;
innerRadius?: number;
outerRadius?: number;
emptyMessage?: string;
} }
export function CategoryPieChart({ export function CategoryPieChart({
data, data,
formatCurrency, formatCurrency,
title = "Répartition par catégorie",
height = 300,
innerRadius = 60,
outerRadius = 100,
emptyMessage = "Pas de données pour cette période",
}: CategoryPieChartProps) { }: CategoryPieChartProps) {
return ( return (
<Card> <Card>
<CardHeader> <CardHeader>
<CardTitle>Répartition par catégorie</CardTitle> <CardTitle>{title}</CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{data.length > 0 ? ( {data.length > 0 ? (
<div className="h-[300px]"> <div style={{ height }}>
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<PieChart> <PieChart>
<Pie <Pie
data={data} data={data}
cx="50%" cx="50%"
cy="50%" cy="50%"
innerRadius={60} innerRadius={innerRadius}
outerRadius={100} outerRadius={outerRadius}
paddingAngle={2} paddingAngle={2}
dataKey="value" dataKey="value"
> >
@@ -49,24 +62,68 @@ export function CategoryPieChart({
))} ))}
</Pie> </Pie>
<Tooltip <Tooltip
formatter={(value: number) => formatCurrency(value)} content={({ active, payload }) => {
contentStyle={{ if (!active || !payload?.length) return null;
backgroundColor: "hsl(var(--card))", const item = payload[0].payload as CategoryChartData;
border: "1px solid hsl(var(--border))", return (
borderRadius: "8px", <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 <Legend
formatter={(value) => ( content={({ payload }) => (
<span className="text-sm text-foreground">{value}</span> <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> </PieChart>
</ResponsiveContainer> </ResponsiveContainer>
</div> </div>
) : ( ) : (
<div className="h-[300px] flex items-center justify-center text-muted-foreground"> <div
Pas de données pour cette période style={{ height }}
className="flex items-center justify-center text-muted-foreground"
>
{emptyMessage}
</div> </div>
)} )}
</CardContent> </CardContent>

4
components/statistics/monthly-chart.tsx
View File

@@ -41,8 +41,8 @@ export function MonthlyChart({ data, formatCurrency }: MonthlyChartProps) {
<Tooltip <Tooltip
formatter={(value: number) => formatCurrency(value)} formatter={(value: number) => formatCurrency(value)}
contentStyle={{ contentStyle={{
backgroundColor: "hsl(var(--card))", backgroundColor: "var(--card)",
border: "1px solid hsl(var(--border))", border: "1px solid var(--border)",
borderRadius: "8px", borderRadius: "8px",
}} }}
/> />