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

Merged

maximus merged 2 commits from issue-105-trends-stacked-area into main

2026-04-19 12:22:04 +00:00

maximus commented

2026-04-19 11:24:06 +00:00

Owner

Summary

Adds a segmented toggle on /reports/trends "Par catégorie" to switch the category-evolution chart between the current stacked bars (default, unchanged) and a new Recharts <AreaChart stackId="1"> that shows total composition over time.
Both modes share the exact same palette and SVG grayscale patterns (ChartPatternDefs / getPatternFill) so the visual signature is preserved.
The chosen type is persisted in localStorage under reports-trends-category-charttype. The toggle only renders when the sub-view is "Par catégorie" AND the view mode is "chart".
CategoryOverTimeChart gains a chartType: 'line' | 'area' prop (default 'line'), keeping the dashboard usage untouched.
i18n keys reports.trends.chartLine / chartArea / chartTypeAria added in FR + EN. CHANGELOG entries added in both languages.

Closes #105

Test plan

npm test -- --run — 109 tests pass (includes 6 new tests for readTrendsChartType)
npm run build — clean tsc + vite build
Manual: open /reports/trends → "Par catégorie" → toggle "Lignes" ↔ "Surface empilée", confirm same palette + patterns, confirm preference survives a reload
Manual: toggle hides when switching to "Flux global" or when view mode = "Tableau"
Manual: dashboard page still renders category-over-time as stacked bars (backward compat)

🤖 Generated with Claude Code

## Summary - Adds a segmented toggle on `/reports/trends` "Par catégorie" to switch the category-evolution chart between the current stacked bars (default, unchanged) and a new Recharts `<AreaChart stackId="1">` that shows total composition over time. - Both modes share the exact same palette and SVG grayscale patterns (`ChartPatternDefs` / `getPatternFill`) so the visual signature is preserved. - The chosen type is persisted in `localStorage` under `reports-trends-category-charttype`. The toggle only renders when the sub-view is "Par catégorie" AND the view mode is "chart". - `CategoryOverTimeChart` gains a `chartType: 'line' | 'area'` prop (default `'line'`), keeping the dashboard usage untouched. - i18n keys `reports.trends.chartLine` / `chartArea` / `chartTypeAria` added in FR + EN. CHANGELOG entries added in both languages. Closes #105 ## Test plan - [x] `npm test -- --run` — 109 tests pass (includes 6 new tests for `readTrendsChartType`) - [x] `npm run build` — clean tsc + vite build - [ ] Manual: open `/reports/trends` → "Par catégorie" → toggle "Lignes" ↔ "Surface empilée", confirm same palette + patterns, confirm preference survives a reload - [ ] Manual: toggle hides when switching to "Flux global" or when view mode = "Tableau" - [ ] Manual: dashboard page still renders category-over-time as stacked bars (backward compat) 🤖 Generated with [Claude Code](https://claude.com/claude-code)

maximus added 1 commit 2026-04-19 11:24:07 +00:00

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

PR Check / rust (push) Has been cancelled

Details

PR Check / frontend (push) Has been cancelled

Details

PR Check / rust (pull_request) Successful in 21m22s

Details

PR Check / frontend (pull_request) Successful in 2m15s

Details

02efc75542

Adds a segmented chart-type toggle to the /reports/trends "By category"
sub-view that switches between the existing stacked bars (default,
unchanged) and a new Recharts AreaChart with stackId="1" showing total
composition over time. Both modes share the same category palette and
SVG grayscale patterns so the visual signature is preserved.

- CategoryOverTimeChart gains a chartType: 'line' | 'area' prop
  (default 'line' for backward compatibility with the dashboard usage).
- New TrendsChartTypeToggle component, persisted in localStorage under
  "reports-trends-category-charttype".
- Toggle only renders in the "By category" sub-view with chart view
  mode selected; hidden otherwise.
- i18n keys reports.trends.chartLine / chartArea / chartTypeAria in
  FR and EN.
- CHANGELOG entries in both languages.

maximus added 1 commit 2026-04-19 11:26:27 +00:00

refactor(reports/trends): rename chart type from 'line' to 'bar' to match actual rendering

PR Check / rust (push) Successful in 21m44s

Details

PR Check / frontend (push) Successful in 2m18s

Details

PR Check / rust (pull_request) Successful in 21m27s

Details

PR Check / frontend (pull_request) Successful in 2m11s

Details

94104c4223

The legacy chart was a stacked BarChart, not a LineChart — the initial 'line'
naming was misleading. Rename internal type, i18n key (chartLine -> chartBar,
Lignes -> Barres, Lines -> Bars) and icon. Legacy 'line' in localStorage is
migrated to 'bar' on read.

maximus commented

2026-04-19 11:26:46 +00:00

Author

Owner

Revue — APPROVE ✅

Verdict

Implementation propre. J'ai ajouté un commit de suivi pour corriger un nommage trompeur découvert pendant la revue.

Points validés

Toggle TrendsChartTypeToggle avec persistance localStorage (reports-trends-category-charttype).
<AreaChart stackId="1"> correctement stackée, partage palette + patterns SVG grayscale avec le BarChart existant.
Toggle visible uniquement quand subView === 'byCategory' && viewMode === 'chart' — pas de pollution UI.
Dashboard usage de CategoryOverTimeChart inchangé (pas de prop → défaut).
6 nouveaux tests unitaires pour readTrendsChartType.

Fix de suivi (commit `94104c4` — rename)

L'issue parlait de "Lignes (actuel)" mais le graphique actuel est en réalité un BarChart empilé, pas un LineChart. L'Agent a fidèlement préservé le code mais le label FR/EN "Lignes/Lines" aurait trompé l'utilisateur. J'ai renommé :

Type interne 'line' → 'bar'
Icône LineChart → BarChart3 (lucide)
Clé i18n chartLine → chartBar
Label FR "Lignes" → "Barres"
Label EN "Lines" → "Bars"
Migration back-compat : readTrendsChartType() convertit un 'line' en localStorage vers 'bar'
Test mis à jour, nouveau test pour la migration

Vérifications locales

npm test -- --run : 110/110 verts (7 nouveaux tests total dans TrendsChartTypeToggle.test.ts)
npm run build : ✅

Rien ne bloque le merge.

## Revue — APPROVE ✅ ### Verdict Implementation propre. J'ai ajouté un commit de suivi pour corriger un nommage trompeur découvert pendant la revue. ### Points validés - Toggle `TrendsChartTypeToggle` avec persistance localStorage (`reports-trends-category-charttype`). - `<AreaChart stackId="1">` correctement stackée, partage palette + patterns SVG grayscale avec le BarChart existant. - Toggle visible uniquement quand `subView === 'byCategory' && viewMode === 'chart'` — pas de pollution UI. - Dashboard usage de `CategoryOverTimeChart` inchangé (pas de prop → défaut). - 6 nouveaux tests unitaires pour `readTrendsChartType`. ### Fix de suivi (commit 94104c4 — rename) L'issue parlait de "Lignes (actuel)" mais le graphique actuel est en réalité un **BarChart empilé**, pas un LineChart. L'Agent a fidèlement préservé le code mais le label FR/EN "Lignes/Lines" aurait trompé l'utilisateur. J'ai renommé : - Type interne `'line'` → `'bar'` - Icône `LineChart` → `BarChart3` (lucide) - Clé i18n `chartLine` → `chartBar` - Label FR "Lignes" → "Barres" - Label EN "Lines" → "Bars" - Migration back-compat : `readTrendsChartType()` convertit un `'line'` en localStorage vers `'bar'` - Test mis à jour, nouveau test pour la migration ### Vérifications locales - `npm test -- --run` : 110/110 verts (7 nouveaux tests total dans `TrendsChartTypeToggle.test.ts`) - `npm run build` : ✅ Rien ne bloque le merge.