278 lines
9.9 KiB
TypeScript
278 lines
9.9 KiB
TypeScript
"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>
|
|
);
|
|
}
|