Composant · Données

WaterfallChart

Stable

Graphique en cascade (waterfall) pour visualiser les contributions positives et négatives à un total cumulatif. Les barres flottantes représentent des augmentations (increase), des diminutions (decrease) ou des totaux ancrés en bas (total). Des connecteurs optionnels relient les barres.

Exemples

Résultat d'exploitation T3 : solde initial, revenus positifs (abonnements + services) et charges négatives (infra, salaires, marketing) conduisant au résultat net final.

Résultat d'exploitation T3

Début: 50k
Revenus abonnements: 32k
Revenus services: 14.5k
Coûts infra: -18k
Salaires: -22k
Marketing: -8.5k
Résultat net: 48k

Voir le code (Svelte)

<div class="chart-wrapper">
  <WaterfallChart
    label="Résultat d'exploitation T3"
    data={[{"label":"Début","value":50000,"type":"total"},{"label":"Revenus abonnements","value":32000,"type":"increase"},{"label":"Revenus services","value":14500,"type":"increase"},{"label":"Coûts infra","value":-18000,"type":"decrease"},{"label":"Salaires","value":-22000,"type":"decrease"},{"label":"Marketing","value":-8500,"type":"decrease"},{"label":"Résultat net","value":48000,"type":"total"}]}
    width={520}
    height={280}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`WaterfallChartDatum[]`	requis	Tableau des éléments de la cascade.
`label`	`string`	requis	Label aria-label du graphique (a11y).
`connectors`	`boolean`	`true`	Affiche les lignes pointillées de connexion entre barres.
`format`	`(value: number) => string`	–	Fonction de formatage personnalisée des valeurs.
`width`	`number`	`480`	Largeur du viewBox SVG.
`height`	`number`	`240`	Hauteur du viewBox SVG.

WaterfallChartDatum = { label: string; value: number; type?: 'increase' | 'decrease' | 'total' } : type déduit du signe si absent

Tokens CSS

Variable CSS	Description
`--st-component-waterfallChart-increaseColor`	Couleur des barres d'augmentation (défaut : feedback-success).
`--st-component-waterfallChart-decreaseColor`	Couleur des barres de diminution (défaut : feedback-error).
`--st-component-waterfallChart-totalColor`	Couleur des barres de total (défaut : data-category1).
`--st-component-waterfallChart-connectorStroke`	Couleur des connecteurs pointillés.
`--st-component-waterfallChart-gridStroke`	Couleur des lignes de grille.
`--st-component-waterfallChart-labelColor`	Couleur des étiquettes d'axe.