BudgetSankey
Diagramme Sankey représentant les flux budgétaires mensuels : revenus → enveloppes → dépenses réelles. Permet de voir d'un coup d'œil où va l'argent et quelles enveloppes dépassent.
Source : src/components/ui/budget-sankey.tsx
Props
Source : src/components/ui/budget-sankey.tsx
| Prop | Type | Requis | Défaut | Description |
|---|---|---|---|---|
incomeSources | IncomeItem[] | ✓ | — | — |
investAllocations | AllocItem[] | ✓ | — | — |
fixedAllocations | AllocItem[] | ✓ | — | — |
variableAllocations | AllocItem[] | ✓ | — | — |
restAVivre | number | ✓ | — | — |
Quand l'utiliser
- Page Budget : visualiser la répartition d'un plan mensuel
- Pas pertinent pour du détail (préférer une liste ou un pie chart pour < 5 catégories)
Règles
- Épaisseur des flux proportionnelle au montant (
Decimalcôté serveur,.toNumber()juste avant rendu) - Couleur par enveloppe — palette limitée (≤ 8 couleurs distinctes) pour rester lisible
- Tooltip au hover : montant exact formaté
À ne pas faire
- Sankey avec > 12 nœuds (illisible — segmenter par sous-période ou catégorie)
- Mélanger revenus et dépenses sur le même axe sans distinction visuelle claire