---
name: project-donut-interactif
description: "Fonctionnalités interactives du donut Dashboard — tooltip, clic, mémoire, légende cliquable, labels nets/bruts"
metadata: 
  node_type: memory
  type: project
  originSessionId: 75df8125-7b0d-44b0-a3e5-9e68fb07b541
---

Évolutions sur `InteretsDonutChart.jsx`, `InteretsMensuelsChart.jsx` et `InteretsChartContext.jsx`.

**Tooltip au survol (donut)** : chaque segment SVG a `onMouseEnter`/`onMouseLeave`. Le tooltip HTML est positionné via `position: absolute` sur un wrapper `position: relative` autour du SVG (maxWidth 260). Coordonnées calculées depuis le midpoint de l'arc en % du viewBox 240×240.

**Clic → filtrage du bar chart** :
- Mode multi-types : clic sur un segment isole ce type (`setInclureCapital/Cashback/Interets`)
- Mode type unique (Reçu/Projeté) : clic appelle `selectActualOnly()` ou `selectProjectedOnly()`
- `handleArcClick` compare `item.label === 'Intérêts nets' || item.label === 'Intérêts bruts'` (pas 'Intérêts' seul — label dynamique)

**Mémoire / retour arrière** : avant chaque clic, l'état complet est sauvegardé dans `prevStateRef` (useRef) + `hasPrev` (useState). Cliquer sur le centre du donut restaure l'état via `setActualProjected(actual, projected)`. Indicateur visuel : ↩ SVG au-dessus du label central, fond bleu au hover.

**Contexte — exports ajoutés** : `selectActualOnly`, `selectProjectedOnly`, `setActualProjected`.

**Légende donut** :
- Ordre fixe : Intérêts → Capital → Cashback (dans `donutData`, donc aussi dans le SVG)
- Chaque ligne est cliquable (même comportement que le quartier)
- Format compact une ligne : label (muted) + montant (bold) + détail inline `dont X reçus · Y projetés` (11px muted)
- La fonction `makeItem(label, color, opacity, actualAmt, projectedAmt)` centralise la construction
- `getLegendDetail` vérifie `label === 'Intérêts nets' || 'Intérêts bruts'` (pas 'Intérêts' seul)

**Labels nets/bruts** :
- Donut : le label Intérêts devient `netMode ? 'Intérêts nets' : 'Intérêts bruts'` dans `makeItem` (mode multi-types). `netMode` est destructuré depuis `useInteretsChart()`.
- Bar chart légende : `activeTypes` utilise `label: netMode?'Intérêts nets':'Intérêts bruts'`
- Bar chart tooltip bas : dernière ligne affiche toujours "Total" (pas "Projeté" pour les futurs)

**En-tête bar chart** : remplacé le texte plat par des badges colorés inline — un par type actif, fond teinté `hexToRgba(color, 0.12)`, point coloré 7px, label 13px dans la couleur du type, suivi de `· année` en muted. La variable `headerLabel` a été supprimée.

**Why:** Améliorer la lisibilité et la cohérence du dashboard.
**How to apply:** Toujours vérifier les deux variantes du label Intérêts (`'Intérêts nets'` et `'Intérêts bruts'`) dans toute logique qui compare `arc.label` ou `d.label`.
