feat(reports/trends): add stacked-area chart option for category trends #105

New issue

Closed

opened 2026-04-19 00:27:02 +00:00 by maximus · 0 comments

maximus commented

2026-04-19 00:27:02 +00:00

Owner

Contexte

Sur /reports/trends dans la sous-vue "Par catégorie" (CategoryOverTimeChart), l'évolution mensuelle est rendue en courbes (une ligne par catégorie). Quand plusieurs catégories sont sélectionnées, il est difficile de voir la composition totale.

Proposition

Ajouter un toggle de type de graphique dans la sous-vue "Par catégorie" de ReportsTrendsPage :

Lignes (actuel, par défaut) — bon pour voir les tendances individuelles.
Surface empilée (nouveau) — <AreaChart stackId="1"> Recharts : permet de voir la composition totale et comment chaque catégorie y contribue dans le temps.

Les deux options partagent la même palette (couleurs de catégorie) et les mêmes patterns SVG.

Fichiers concernés

src/components/reports/CategoryOverTimeChart.tsx — ajouter un prop chartType: 'line' | 'area'.
src/pages/ReportsTrendsPage.tsx — ajouter un toggle segmenté, mémorisé dans localStorage (reports-trends-category-charttype).
i18n : reports.trends.chartLine / reports.trends.chartArea.

Critères d'acceptation

Sur /reports/trends sous-vue "Par catégorie", un toggle permet de basculer entre lignes et surface empilée.
Le type de graphique choisi est mémorisé entre navigations.
Les patterns SVG (signature visuelle) sont conservés dans les deux modes.
Traductions FR/EN des libellés du toggle.
CHANGELOG mis à jour.

## Contexte Sur `/reports/trends` dans la sous-vue "Par catégorie" (`CategoryOverTimeChart`), l'évolution mensuelle est rendue en courbes (une ligne par catégorie). Quand plusieurs catégories sont sélectionnées, il est difficile de voir la composition totale. ## Proposition Ajouter un **toggle de type de graphique** dans la sous-vue "Par catégorie" de `ReportsTrendsPage` : - **Lignes** (actuel, par défaut) — bon pour voir les tendances individuelles. - **Surface empilée** (nouveau) — `<AreaChart stackId="1">` Recharts : permet de voir la composition totale et comment chaque catégorie y contribue dans le temps. Les deux options partagent la même palette (couleurs de catégorie) et les mêmes patterns SVG. ## Fichiers concernés - `src/components/reports/CategoryOverTimeChart.tsx` — ajouter un prop `chartType: 'line' | 'area'`. - `src/pages/ReportsTrendsPage.tsx` — ajouter un toggle segmenté, mémorisé dans `localStorage` (`reports-trends-category-charttype`). - i18n : `reports.trends.chartLine` / `reports.trends.chartArea`. ## Critères d'acceptation - [ ] Sur `/reports/trends` sous-vue "Par catégorie", un toggle permet de basculer entre lignes et surface empilée. - [ ] Le type de graphique choisi est mémorisé entre navigations. - [ ] Les patterns SVG (signature visuelle) sont conservés dans les deux modes. - [ ] Traductions FR/EN des libellés du toggle. - [ ] CHANGELOG mis à jour.