CHANGELOG.fr.md

@@ -4,6 +4,7 @@
 
 ### Ajouté
 - **Rapport Cartes** : info-bulle d'aide sur le KPI taux d'épargne expliquant la formule — `(revenus − dépenses) ÷ revenus × 100`, calculée sur le mois de référence (#101)
+- **Rapport Tendances — Par catégorie** (`/reports/trends`) : nouveau toggle segmenté pour basculer le graphique d'évolution par catégorie entre les barres empilées (par défaut, inchangé) et une vue surface empilée Recharts (`<AreaChart stackId="1">`) qui montre la composition totale dans le temps. Les deux modes partagent la même palette de catégories et les mêmes patterns SVG en niveaux de gris. Le type choisi est mémorisé dans `localStorage` (`reports-trends-category-charttype`) (#105)
 
 ### Modifié
 - **Rapport Zoom catégorie** (`/reports/category`) : le sélecteur de catégorie est désormais un combobox saisissable et filtrable avec recherche insensible aux accents, navigation clavier (↑/↓/Entrée/Échap) et indentation hiérarchique, en remplacement du `<select>` natif (#103)

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Added
 - **Cartes report**: help tooltip on the savings-rate KPI explaining the formula — `(income − expenses) ÷ income × 100`, computed on the reference month (#101)
+- **Trends report — by category** (`/reports/trends`): new segmented toggle to switch the category-evolution chart between stacked bars (default, unchanged) and a Recharts stacked-area view (`<AreaChart stackId="1">`) that shows total composition over time. Both modes share the same category palette and SVG grayscale patterns. The chosen type is persisted in `localStorage` (`reports-trends-category-charttype`) (#105)
 
 ### Changed
 - **Category zoom report** (`/reports/category`): the category picker is now a typeable, searchable combobox with accent-insensitive matching, keyboard navigation (↑/↓/Enter/Esc) and hierarchy indentation, replacing the native `<select>` (#103)

src/components/reports/CategoryOverTimeChart.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 import {
   BarChart,
   Bar,
+  AreaChart,
+  Area,
   XAxis,
   YAxis,
   Tooltip,
@@ -25,6 +27,8 @@ function formatMonth(month: string): string {
   return date.toLocaleDateString("default", { month: "short", year: "2-digit" });
 }
 
+export type CategoryOverTimeChartType = "line" | "area";
+
 interface CategoryOverTimeChartProps {
   data: CategoryOverTimeData;
   hiddenCategories: Set<string>;
@@ -32,6 +36,13 @@ interface CategoryOverTimeChartProps {
   onShowAll: () => void;
   onViewDetails: (item: CategoryBreakdownItem) => void;
   showAmounts?: boolean;
+  /**
+   * Visual rendering mode. `line` (default) keeps the legacy stacked bars —
+   * preserved for backward compatibility. `area` stacks Recharts <Area> layers
+   * (stackId="1") showing total composition over time. Both modes share the
+   * same palette and SVG grayscale patterns (existing signature visual).
+   */
+  chartType?: CategoryOverTimeChartType;
 }
 
 export default function CategoryOverTimeChart({
@@ -41,6 +52,7 @@ export default function CategoryOverTimeChart({
   onShowAll,
   onViewDetails,
   showAmounts,
+  chartType = "line",
 }: CategoryOverTimeChartProps) {
   const { t } = useTranslation();
   const hoveredRef = useRef<string | null>(null);
@@ -68,37 +80,16 @@ export default function CategoryOverTimeChart({
     );
   }
 
-  return (
+  // Shared chart configuration used by both Bar and Area variants.
-    <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
+  const patternPrefix = "cat-time";
-      {hiddenCategories.size > 0 && (
+  const patternDefs = (
-        <div className="flex flex-wrap items-center gap-2 mb-4">
-          <span className="text-xs text-[var(--muted-foreground)]">{t("charts.hiddenCategories")}:</span>
-          {Array.from(hiddenCategories).map((name) => (
-            <button
-              key={name}
-              onClick={() => onToggleHidden(name)}
-              className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)] transition-colors"
-            >
-              <Eye size={12} />
-              {name}
-            </button>
-          ))}
-          <button
-            onClick={onShowAll}
-            className="text-xs text-[var(--primary)] hover:underline"
-          >
-            {t("charts.showAll")}
-          </button>
-        </div>
-      )}
-
-      <div onContextMenu={handleContextMenu}>
-        <ResponsiveContainer width="100%" height={400}>
-          <BarChart data={data.data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
     <ChartPatternDefs
-              prefix="cat-time"
+      prefix={patternPrefix}
       categories={categoryEntries.map((c) => ({ color: c.color, index: c.index }))}
     />
+  );
+  const commonAxes = (
+    <>
       <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
       <XAxis
         dataKey="month"
@@ -138,12 +129,64 @@ export default function CategoryOverTimeChart({
         wrapperStyle={{ cursor: "pointer" }}
         formatter={(value) => <span style={{ color: "var(--foreground)" }}>{value}</span>}
       />
+    </>
+  );
+
+  return (
+    <div className="bg-[var(--card)] rounded-xl p-6 border border-[var(--border)]">
+      {hiddenCategories.size > 0 && (
+        <div className="flex flex-wrap items-center gap-2 mb-4">
+          <span className="text-xs text-[var(--muted-foreground)]">{t("charts.hiddenCategories")}:</span>
+          {Array.from(hiddenCategories).map((name) => (
+            <button
+              key={name}
+              onClick={() => onToggleHidden(name)}
+              className="inline-flex items-center gap-1 px-2 py-0.5 text-xs rounded-full bg-[var(--muted)] text-[var(--muted-foreground)] hover:bg-[var(--border)] transition-colors"
+            >
+              <Eye size={12} />
+              {name}
+            </button>
+          ))}
+          <button
+            onClick={onShowAll}
+            className="text-xs text-[var(--primary)] hover:underline"
+          >
+            {t("charts.showAll")}
+          </button>
+        </div>
+      )}
+
+      <div onContextMenu={handleContextMenu}>
+        <ResponsiveContainer width="100%" height={400}>
+          {chartType === "area" ? (
+            <AreaChart data={data.data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
+              {patternDefs}
+              {commonAxes}
+              {categoryEntries.map((c) => (
+                <Area
+                  key={c.name}
+                  type="monotone"
+                  dataKey={c.name}
+                  stackId="1"
+                  stroke={c.color}
+                  fill={getPatternFill(patternPrefix, c.index, c.color)}
+                  fillOpacity={hoveredCategory === null || hoveredCategory === c.name ? 1 : 0.2}
+                  onMouseEnter={() => { hoveredRef.current = c.name; setHoveredCategory(c.name); }}
+                  onMouseLeave={() => { hoveredRef.current = null; setHoveredCategory(null); }}
+                  style={{ transition: "fill-opacity 150ms", cursor: "context-menu" }}
+                />
+              ))}
+            </AreaChart>
+          ) : (
+            <BarChart data={data.data} margin={{ top: 10, right: 10, left: 10, bottom: 0 }}>
+              {patternDefs}
+              {commonAxes}
               {categoryEntries.map((c) => (
                 <Bar
                   key={c.name}
                   dataKey={c.name}
                   stackId="stack"
-                fill={getPatternFill("cat-time", c.index, c.color)}
+                  fill={getPatternFill(patternPrefix, c.index, c.color)}
                   fillOpacity={hoveredCategory === null || hoveredCategory === c.name ? 1 : 0.2}
                   onMouseEnter={() => { hoveredRef.current = c.name; setHoveredCategory(c.name); }}
                   onMouseLeave={() => { hoveredRef.current = null; setHoveredCategory(null); }}
@@ -161,6 +204,7 @@ export default function CategoryOverTimeChart({
                 </Bar>
               ))}
             </BarChart>
+          )}
         </ResponsiveContainer>
       </div>
 

src/components/reports/TrendsChartTypeToggle.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { readTrendsChartType, TRENDS_CHART_TYPE_STORAGE_KEY } from "./TrendsChartTypeToggle";
+
+describe("readTrendsChartType", () => {
+  const store = new Map<string, string>();
+  const mockLocalStorage = {
+    getItem: vi.fn((key: string) => store.get(key) ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store.set(key, value);
+    }),
+    removeItem: vi.fn((key: string) => {
+      store.delete(key);
+    }),
+    clear: vi.fn(() => store.clear()),
+    key: vi.fn(),
+    length: 0,
+  };
+
+  beforeEach(() => {
+    store.clear();
+    vi.stubGlobal("localStorage", mockLocalStorage);
+  });
+
+  it("returns 'line' fallback when key is missing", () => {
+    expect(readTrendsChartType()).toBe("line");
+  });
+
+  it("returns 'line' when stored value is 'line'", () => {
+    store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "line");
+    expect(readTrendsChartType()).toBe("line");
+  });
+
+  it("returns 'area' when stored value is 'area'", () => {
+    store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "area");
+    expect(readTrendsChartType()).toBe("area");
+  });
+
+  it("ignores invalid stored values and returns fallback", () => {
+    store.set(TRENDS_CHART_TYPE_STORAGE_KEY, "bogus");
+    expect(readTrendsChartType(TRENDS_CHART_TYPE_STORAGE_KEY, "area")).toBe("area");
+  });
+
+  it("respects custom fallback when provided", () => {
+    expect(readTrendsChartType(TRENDS_CHART_TYPE_STORAGE_KEY, "area")).toBe("area");
+  });
+
+  it("uses the expected storage key", () => {
+    expect(TRENDS_CHART_TYPE_STORAGE_KEY).toBe("reports-trends-category-charttype");
+  });
+});

src/components/reports/TrendsChartTypeToggle.tsx

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { LineChart as LineIcon, AreaChart as AreaIcon } from "lucide-react";
+import type { CategoryOverTimeChartType } from "./CategoryOverTimeChart";
+
+export const TRENDS_CHART_TYPE_STORAGE_KEY = "reports-trends-category-charttype";
+
+export interface TrendsChartTypeToggleProps {
+  value: CategoryOverTimeChartType;
+  onChange: (value: CategoryOverTimeChartType) => void;
+  /** localStorage key used to persist the preference. */
+  storageKey?: string;
+}
+
+export function readTrendsChartType(
+  storageKey: string = TRENDS_CHART_TYPE_STORAGE_KEY,
+  fallback: CategoryOverTimeChartType = "line",
+): CategoryOverTimeChartType {
+  if (typeof localStorage === "undefined") return fallback;
+  const saved = localStorage.getItem(storageKey);
+  return saved === "line" || saved === "area" ? saved : fallback;
+}
+
+export default function TrendsChartTypeToggle({
+  value,
+  onChange,
+  storageKey = TRENDS_CHART_TYPE_STORAGE_KEY,
+}: TrendsChartTypeToggleProps) {
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (storageKey) localStorage.setItem(storageKey, value);
+  }, [value, storageKey]);
+
+  const options: { type: CategoryOverTimeChartType; icon: React.ReactNode; label: string }[] = [
+    { type: "line", icon: <LineIcon size={14} />, label: t("reports.trends.chartLine") },
+    { type: "area", icon: <AreaIcon size={14} />, label: t("reports.trends.chartArea") },
+  ];
+
+  return (
+    <div className="inline-flex gap-1" role="group" aria-label={t("reports.trends.chartTypeAria")}>
+      {options.map(({ type, icon, label }) => (
+        <button
+          key={type}
+          type="button"
+          onClick={() => onChange(type)}
+          aria-pressed={value === type}
+          className={`inline-flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+            value === type
+              ? "bg-[var(--primary)] text-white"
+              : "bg-[var(--card)] border border-[var(--border)] text-[var(--foreground)] hover:bg-[var(--muted)]"
+          }`}
+        >
+          {icon}
+          {label}
+        </button>
+      ))}
+    </div>
+  );
+}

src/i18n/locales/en.json

@@ -360,7 +360,10 @@
     "overTime": "Category Over Time",
     "trends": {
       "subviewGlobal": "Global flow",
-      "subviewByCategory": "By category"
+      "subviewByCategory": "By category",
+      "chartLine": "Lines",
+      "chartArea": "Stacked area",
+      "chartTypeAria": "Chart type"
     },
     "budgetVsActual": "Budget vs Actual",
     "subtotalsOnTop": "Subtotals on top",

src/i18n/locales/fr.json

@@ -360,7 +360,10 @@
     "overTime": "Catégories dans le temps",
     "trends": {
       "subviewGlobal": "Flux global",
-      "subviewByCategory": "Par catégorie"
+      "subviewByCategory": "Par catégorie",
+      "chartLine": "Lignes",
+      "chartArea": "Surface empilée",
+      "chartTypeAria": "Type de graphique"
     },
     "budgetVsActual": "Budget vs Réel",
     "subtotalsOnTop": "Sous-totaux en haut",

src/pages/ReportsTrendsPage.tsx

@@ -6,8 +6,13 @@ import PeriodSelector from "../components/dashboard/PeriodSelector";
 import MonthlyTrendsChart from "../components/reports/MonthlyTrendsChart";
 import MonthlyTrendsTable from "../components/reports/MonthlyTrendsTable";
 import CategoryOverTimeChart from "../components/reports/CategoryOverTimeChart";
+import type { CategoryOverTimeChartType } from "../components/reports/CategoryOverTimeChart";
 import CategoryOverTimeTable from "../components/reports/CategoryOverTimeTable";
 import ViewModeToggle, { readViewMode, type ViewMode } from "../components/reports/ViewModeToggle";
+import TrendsChartTypeToggle, {
+  readTrendsChartType,
+  TRENDS_CHART_TYPE_STORAGE_KEY,
+} from "../components/reports/TrendsChartTypeToggle";
 import { useTrends } from "../hooks/useTrends";
 import { useReportsPeriod } from "../hooks/useReportsPeriod";
 import type { CategoryBreakdownItem } from "../shared/types";
@@ -19,6 +24,7 @@ export default function ReportsTrendsPage() {
   const { period, setPeriod, from, to, setCustomDates } = useReportsPeriod();
   const { subView, setSubView, monthlyTrends, categoryOverTime, isLoading, error } = useTrends();
   const [viewMode, setViewMode] = useState<ViewMode>(() => readViewMode(STORAGE_KEY));
+  const [chartType, setChartType] = useState<CategoryOverTimeChartType>(() => readTrendsChartType());
   const [hiddenCategories, setHiddenCategories] = useState<Set<string>>(new Set());
 
   const preserveSearch = typeof window !== "undefined" ? window.location.search : "";
@@ -84,6 +90,13 @@ export default function ReportsTrendsPage() {
               {t("reports.trends.subviewByCategory")}
             </button>
           </div>
+          {subView === "byCategory" && viewMode === "chart" && (
+            <TrendsChartTypeToggle
+              value={chartType}
+              onChange={setChartType}
+              storageKey={TRENDS_CHART_TYPE_STORAGE_KEY}
+            />
+          )}
           <ViewModeToggle value={viewMode} onChange={setViewMode} storageKey={STORAGE_KEY} />
         </div>
       </div>
@@ -107,6 +120,7 @@ export default function ReportsTrendsPage() {
           onToggleHidden={toggleHidden}
           onShowAll={showAll}
           onViewDetails={noOpDetails}
+          chartType={chartType}
         />
       ) : (
         <CategoryOverTimeTable data={categoryOverTime} hiddenCategories={hiddenCategories} />