feat: enhance statistics page with new charts and data visualizations including savings trend, category trends, and year-over-year comparisons
This commit is contained in:
Julien Froidefond
118
components/statistics/category-bar-chart.tsx
Normal file
118
components/statistics/category-bar-chart.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { CategoryIcon } from "@/components/ui/category-icon";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Cell,
|
||||
} from "recharts";
|
||||
import type { CategoryChartData } from "./category-pie-chart";
|
||||
|
||||
interface CategoryBarChartProps {
|
||||
data: CategoryChartData[];
|
||||
formatCurrency: (amount: number) => string;
|
||||
title?: string;
|
||||
maxItems?: number;
|
||||
}
|
||||
|
||||
export function CategoryBarChart({
|
||||
data,
|
||||
formatCurrency,
|
||||
title = "Top catégories de dépenses",
|
||||
maxItems = 10,
|
||||
}: CategoryBarChartProps) {
|
||||
const displayData = data.slice(0, maxItems).reverse(); // Reverse pour avoir le plus grand en haut
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{title}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{displayData.length > 0 ? (
|
||||
<div className="h-[400px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={displayData}
|
||||
layout="vertical"
|
||||
margin={{ left: 100, right: 20, top: 20, bottom: 20 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
type="number"
|
||||
className="text-xs"
|
||||
tickFormatter={(v) => {
|
||||
if (Math.abs(v) >= 1000) {
|
||||
return `${(v / 1000).toFixed(1)}k€`;
|
||||
}
|
||||
return `${Math.round(v)}€`;
|
||||
}}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<YAxis
|
||||
type="category"
|
||||
dataKey="name"
|
||||
className="text-xs"
|
||||
width={90}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
tickFormatter={(value) => {
|
||||
const item = displayData.find((d) => d.name === value);
|
||||
return item ? value : "";
|
||||
}}
|
||||
/>
|
||||
<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 mb-1">
|
||||
<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">
|
||||
{formatCurrency(item.value)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Bar dataKey="value" radius={[4, 0, 0, 4]}>
|
||||
{displayData.map((entry, index) => (
|
||||
<Cell key={`cell-${index}`} fill={entry.color} />
|
||||
))}
|
||||
</Bar>
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[400px] flex items-center justify-center text-muted-foreground">
|
||||
Pas de données pour cette période
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
268
components/statistics/category-trend-chart.tsx
Normal file
268
components/statistics/category-trend-chart.tsx
Normal file
@@ -0,0 +1,268 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CategoryIcon } from "@/components/ui/category-icon";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Legend,
|
||||
} from "recharts";
|
||||
import { ChevronDown, ChevronUp, Layers, List } from "lucide-react";
|
||||
import type { Category } from "@/lib/types";
|
||||
|
||||
interface CategoryTrendDataPoint {
|
||||
month: string;
|
||||
[categoryId: string]: string | number;
|
||||
}
|
||||
|
||||
interface CategoryTrendChartProps {
|
||||
data: CategoryTrendDataPoint[];
|
||||
dataByParent: CategoryTrendDataPoint[];
|
||||
categories: Category[];
|
||||
formatCurrency: (amount: number) => string;
|
||||
maxCategories?: number;
|
||||
}
|
||||
|
||||
const CATEGORY_COLORS = [
|
||||
"#ef4444", // red
|
||||
"#f59e0b", // amber
|
||||
"#eab308", // yellow
|
||||
"#22c55e", // green
|
||||
"#06b6d4", // cyan
|
||||
"#3b82f6", // blue
|
||||
"#6366f1", // indigo
|
||||
"#8b5cf6", // violet
|
||||
"#ec4899", // pink
|
||||
"#f97316", // orange
|
||||
];
|
||||
|
||||
export function CategoryTrendChart({
|
||||
data,
|
||||
dataByParent,
|
||||
categories,
|
||||
formatCurrency,
|
||||
maxCategories = 5,
|
||||
}: CategoryTrendChartProps) {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
|
||||
const [groupByParent, setGroupByParent] = useState(true);
|
||||
|
||||
// Use the appropriate dataset based on groupByParent
|
||||
const currentData = groupByParent ? dataByParent : data;
|
||||
|
||||
// Get top categories by total amount
|
||||
const categoryTotals = new Map<string, number>();
|
||||
currentData.forEach((point) => {
|
||||
Object.keys(point).forEach((key) => {
|
||||
if (key !== "month" && typeof point[key] === "number") {
|
||||
const current = categoryTotals.get(key) || 0;
|
||||
categoryTotals.set(key, current + (point[key] as number));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const topCategories = Array.from(categoryTotals.entries())
|
||||
.sort((a, b) => b[1] - a[1])
|
||||
.slice(0, maxCategories)
|
||||
.map(([id]) => id);
|
||||
|
||||
const displayCategories = isExpanded
|
||||
? Array.from(categoryTotals.keys())
|
||||
: topCategories;
|
||||
|
||||
const categoriesToShow =
|
||||
selectedCategories.length > 0 ? selectedCategories : displayCategories;
|
||||
|
||||
// Helper function to get category name
|
||||
// When groupByParent is true, the categoryId in dataByParent is already the parent ID
|
||||
const getCategoryName = (categoryId: string): string => {
|
||||
if (categoryId === "uncategorized") return "Non catégorisé";
|
||||
const category = categories.find((c) => c.id === categoryId);
|
||||
return category?.name || "Inconnu";
|
||||
};
|
||||
|
||||
// Helper function to get category info (for color, icon)
|
||||
// When groupByParent is true, the categoryId in dataByParent is already the parent ID
|
||||
const getCategoryInfo = (categoryId: string): Category | null => {
|
||||
if (categoryId === "uncategorized") return null;
|
||||
return categories.find((c) => c.id === categoryId) || null;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle>Évolution des dépenses par catégorie</CardTitle>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={groupByParent ? "default" : "ghost"}
|
||||
size="sm"
|
||||
onClick={() => setGroupByParent(!groupByParent)}
|
||||
title={groupByParent ? "Afficher toutes les catégories" : "Regrouper par catégories parentes"}
|
||||
>
|
||||
{groupByParent ? (
|
||||
<>
|
||||
<List className="w-4 h-4 mr-1" />
|
||||
Par catégorie
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Layers className="w-4 h-4 mr-1" />
|
||||
Par parent
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{categoryTotals.size > maxCategories && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
>
|
||||
{isExpanded ? (
|
||||
<>
|
||||
<ChevronUp className="w-4 h-4 mr-1" />
|
||||
Réduire
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<ChevronDown className="w-4 h-4 mr-1" />
|
||||
Voir tout ({categoryTotals.size})
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{currentData.length > 0 && categoriesToShow.length > 0 ? (
|
||||
<div className="h-[350px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<LineChart data={currentData}>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
className="text-xs"
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
width={80}
|
||||
tickFormatter={(v) => {
|
||||
if (Math.abs(v) >= 1000) {
|
||||
return `${(v / 1000).toFixed(1)}k€`;
|
||||
}
|
||||
return `${Math.round(v)}€`;
|
||||
}}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Legend
|
||||
content={() => {
|
||||
// Get all category IDs from data
|
||||
const allCategoryIds = Array.from(categoryTotals.keys());
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap justify-center gap-x-4 gap-y-1 mt-2">
|
||||
{allCategoryIds.map((categoryId) => {
|
||||
const categoryInfo = getCategoryInfo(categoryId);
|
||||
const categoryName = getCategoryName(categoryId);
|
||||
if (!categoryInfo && categoryId !== "uncategorized") return null;
|
||||
|
||||
const isInDisplayCategories = displayCategories.includes(categoryId);
|
||||
const isSelected =
|
||||
selectedCategories.length === 0
|
||||
? isInDisplayCategories
|
||||
: selectedCategories.includes(categoryId);
|
||||
return (
|
||||
<button
|
||||
key={`legend-${categoryId}`}
|
||||
className={`flex items-center gap-1.5 text-sm cursor-pointer transition-opacity px-2 py-1 rounded ${
|
||||
isSelected
|
||||
? "opacity-100"
|
||||
: "opacity-30 hover:opacity-60"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (selectedCategories.includes(categoryId)) {
|
||||
setSelectedCategories(
|
||||
selectedCategories.filter(
|
||||
(id) => id !== categoryId
|
||||
)
|
||||
);
|
||||
} else {
|
||||
setSelectedCategories([
|
||||
...selectedCategories,
|
||||
categoryId,
|
||||
]);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{categoryInfo ? (
|
||||
<CategoryIcon
|
||||
icon={categoryInfo.icon}
|
||||
color={categoryInfo.color}
|
||||
size={14}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
className="w-3.5 h-3.5 rounded-full"
|
||||
style={{ backgroundColor: "#94a3b8" }}
|
||||
/>
|
||||
)}
|
||||
<span className="text-foreground">
|
||||
{categoryName}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
{categoriesToShow.map((categoryId, index) => {
|
||||
const categoryInfo = getCategoryInfo(categoryId);
|
||||
const categoryName = getCategoryName(categoryId);
|
||||
if (!categoryInfo && categoryId !== "uncategorized") return null;
|
||||
|
||||
const isSelected =
|
||||
selectedCategories.length === 0 ||
|
||||
selectedCategories.includes(categoryId);
|
||||
return (
|
||||
<Line
|
||||
key={categoryId}
|
||||
type="monotone"
|
||||
dataKey={categoryId}
|
||||
name={categoryName}
|
||||
stroke={categoryInfo?.color || CATEGORY_COLORS[index % CATEGORY_COLORS.length]}
|
||||
strokeWidth={isSelected ? 2 : 1}
|
||||
strokeOpacity={isSelected ? 1 : 0.3}
|
||||
dot={false}
|
||||
hide={!isSelected && selectedCategories.length > 0}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[350px] flex items-center justify-center text-muted-foreground">
|
||||
Pas de données pour cette période
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
94
components/statistics/income-expense-trend-chart.tsx
Normal file
94
components/statistics/income-expense-trend-chart.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Legend,
|
||||
} from "recharts";
|
||||
|
||||
interface IncomeExpenseTrendDataPoint {
|
||||
month: string;
|
||||
revenus: number;
|
||||
depenses: number;
|
||||
}
|
||||
|
||||
interface IncomeExpenseTrendChartProps {
|
||||
data: IncomeExpenseTrendDataPoint[];
|
||||
formatCurrency: (amount: number) => string;
|
||||
}
|
||||
|
||||
export function IncomeExpenseTrendChart({
|
||||
data,
|
||||
formatCurrency,
|
||||
}: IncomeExpenseTrendChartProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Tendances revenus et dépenses</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{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"
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
width={80}
|
||||
tickFormatter={(v) => {
|
||||
if (Math.abs(v) >= 1000) {
|
||||
return `${(v / 1000).toFixed(1)}k€`;
|
||||
}
|
||||
return `${Math.round(v)}€`;
|
||||
}}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="revenus"
|
||||
name="Revenus"
|
||||
stroke="#22c55e"
|
||||
strokeWidth={2}
|
||||
dot={false}
|
||||
/>
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="depenses"
|
||||
name="Dépenses"
|
||||
stroke="#ef4444"
|
||||
strokeWidth={2}
|
||||
dot={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>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,4 +3,9 @@ export { MonthlyChart } from "./monthly-chart";
|
||||
export { CategoryPieChart } from "./category-pie-chart";
|
||||
export { BalanceLineChart } from "./balance-line-chart";
|
||||
export { TopExpensesList } from "./top-expenses-list";
|
||||
export { CategoryBarChart } from "./category-bar-chart";
|
||||
export { CategoryTrendChart } from "./category-trend-chart";
|
||||
export { SavingsTrendChart } from "./savings-trend-chart";
|
||||
export { IncomeExpenseTrendChart } from "./income-expense-trend-chart";
|
||||
export { YearOverYearChart } from "./year-over-year-chart";
|
||||
|
||||
|
||||
116
components/statistics/savings-trend-chart.tsx
Normal file
116
components/statistics/savings-trend-chart.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { TrendingUp, TrendingDown } from "lucide-react";
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
} from "recharts";
|
||||
|
||||
interface SavingsTrendDataPoint {
|
||||
month: string;
|
||||
savings: number;
|
||||
cumulative: number;
|
||||
}
|
||||
|
||||
interface SavingsTrendChartProps {
|
||||
data: SavingsTrendDataPoint[];
|
||||
formatCurrency: (amount: number) => string;
|
||||
}
|
||||
|
||||
export function SavingsTrendChart({
|
||||
data,
|
||||
formatCurrency,
|
||||
}: SavingsTrendChartProps) {
|
||||
const latestSavings = data.length > 0 ? data[data.length - 1].savings : 0;
|
||||
const isPositive = latestSavings >= 0;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle>Évolution des économies</CardTitle>
|
||||
<div className="flex items-center gap-2">
|
||||
{isPositive ? (
|
||||
<TrendingUp className="w-4 h-4 text-emerald-600" />
|
||||
) : (
|
||||
<TrendingDown className="w-4 h-4 text-red-600" />
|
||||
)}
|
||||
<span
|
||||
className={`text-sm font-semibold ${
|
||||
isPositive ? "text-emerald-600" : "text-red-600"
|
||||
}`}
|
||||
>
|
||||
{formatCurrency(latestSavings)}
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{data.length > 0 ? (
|
||||
<div className="h-[250px]">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<AreaChart data={data}>
|
||||
<defs>
|
||||
<linearGradient id="savingsGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop
|
||||
offset="5%"
|
||||
stopColor={isPositive ? "#22c55e" : "#ef4444"}
|
||||
stopOpacity={0.3}
|
||||
/>
|
||||
<stop
|
||||
offset="95%"
|
||||
stopColor={isPositive ? "#22c55e" : "#ef4444"}
|
||||
stopOpacity={0}
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
|
||||
<XAxis
|
||||
dataKey="month"
|
||||
className="text-xs"
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
className="text-xs"
|
||||
width={80}
|
||||
tickFormatter={(v) => {
|
||||
if (Math.abs(v) >= 1000) {
|
||||
return `${(v / 1000).toFixed(1)}k€`;
|
||||
}
|
||||
return `${Math.round(v)}€`;
|
||||
}}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Area
|
||||
type="monotone"
|
||||
dataKey="savings"
|
||||
name="Économies mensuelles"
|
||||
stroke={isPositive ? "#22c55e" : "#ef4444"}
|
||||
strokeWidth={2}
|
||||
fill="url(#savingsGradient)"
|
||||
/>
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-[250px] flex items-center justify-center text-muted-foreground">
|
||||
Pas de données pour cette période
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
91
components/statistics/year-over-year-chart.tsx
Normal file
91
components/statistics/year-over-year-chart.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
ResponsiveContainer,
|
||||
Legend,
|
||||
} from "recharts";
|
||||
|
||||
interface YearOverYearDataPoint {
|
||||
month: string;
|
||||
current: number;
|
||||
previous: number;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface YearOverYearChartProps {
|
||||
data: YearOverYearDataPoint[];
|
||||
formatCurrency: (amount: number) => string;
|
||||
currentYearLabel?: string;
|
||||
previousYearLabel?: string;
|
||||
}
|
||||
|
||||
export function YearOverYearChart({
|
||||
data,
|
||||
formatCurrency,
|
||||
currentYearLabel = "Cette année",
|
||||
previousYearLabel = "Année précédente",
|
||||
}: YearOverYearChartProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Comparaison année sur année</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"
|
||||
width={80}
|
||||
tickFormatter={(v) => {
|
||||
if (Math.abs(v) >= 1000) {
|
||||
return `${(v / 1000).toFixed(1)}k€`;
|
||||
}
|
||||
return `${Math.round(v)}€`;
|
||||
}}
|
||||
tick={{ fill: "var(--muted-foreground)" }}
|
||||
/>
|
||||
<Tooltip
|
||||
formatter={(value: number) => formatCurrency(value)}
|
||||
contentStyle={{
|
||||
backgroundColor: "var(--card)",
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
/>
|
||||
<Legend />
|
||||
<Bar
|
||||
dataKey="current"
|
||||
name={currentYearLabel}
|
||||
fill="#6366f1"
|
||||
radius={[4, 4, 0, 0]}
|
||||
/>
|
||||
<Bar
|
||||
dataKey="previous"
|
||||
name={previousYearLabel}
|
||||
fill="#94a3b8"
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user