Composant · Données

DecompositionTreeChart

Stable

Arbre de décomposition hiérarchique (façon Power BI decomposition tree). Une mesure measure totale se décompose en niveaux successifs : chaque niveau est une colonne de nœuds dont la barre horizontale a une largeur ∝ value (relative au max du niveau), reliée à son parent du niveau précédent par un lien lissé. Idéal pour expliquer comment un total se ventile dimension après dimension.

Exemples

Le revenu se décompose d'abord par région, puis par canal : le Web du Nord est le plus gros contributeur.

Décomposition du revenu

Revenu: 100
·Nord: 62
·Sud: 38
··Web: 40
··Magasin: 22
··Web: 25
··Magasin: 13

Voir le code (Svelte)

<DecompositionTreeChart
  label="Décomposition du revenu"
  width={600}
  height={280}
  data={{"measure":"Revenu","levels":[{"dimension":"Région","nodes":[{"label":"Nord","value":62},{"label":"Sud","value":38}]},{"dimension":"Canal","nodes":[{"label":"Web","value":40,"parent":"Nord"},{"label":"Magasin","value":22,"parent":"Nord"},{"label":"Web","value":25,"parent":"Sud"},{"label":"Magasin","value":13,"parent":"Sud"}]}]}}
/>

API du composant

Prop	Type	Défaut	Description
`data`	`DecompositionTreeData`	–	{ measure, levels[] } : mesure totale + niveaux de nœuds.
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`320`	Hauteur du viewBox SVG.
`size`	`number`	–	Alias de width (largeur du viewBox).
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

DecompositionTreeData = { measure: string; levels: { dimension: string; nodes: { label: string; value: number; parent?: string }[] }[] }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Couleurs des barres (par niveau).
`--st-semantic-border-subtle`	Liens lissés parent→enfant.
`--st-semantic-surface-default`	Trait de séparation des barres.
`--st-semantic-text-inverse`	Étiquettes des nœuds.