Composant · Données

TreemapChart

Stable

Carte proportionnelle hiérarchique (algorithme squarified de Bruls, Huizing et van Wijk) prenant en charge 1 ou 2 niveaux. Les rectangles sont dimensionnés proportionnellement à leur valeur, colorés par la palette catégorielle du thème. Labels dans les rectangles suffisamment grands, tooltip au survol et liste de valeurs accessible.

Exemples

Budget à 2 niveaux : 3 départements (Ingénierie, Produit, Marketing) subdivisés en équipes. La couleur de ton par département facilite la lecture de la hiérarchie.

Répartition du budget par département

Ingénierie, Backend: 58000
Ingénierie, Frontend: 42000
Ingénierie, Infra: 31000
Produit, Design: 27000
Produit, PM: 22000
Marketing, Growth: 18000
Marketing, Contenu: 12000

Voir le code (Svelte)

<div class="chart-wrapper">
  <TreemapChart
    label="Répartition du budget par département"
    data={[{"label":"Ingénierie","value":0,"tone":"category1","children":[{"label":"Frontend","value":42000},{"label":"Backend","value":58000},{"label":"Infra","value":31000}]},{"label":"Produit","value":0,"tone":"category2","children":[{"label":"Design","value":27000},{"label":"PM","value":22000}]},{"label":"Marketing","value":0,"tone":"category3","children":[{"label":"Growth","value":18000},{"label":"Contenu","value":12000}]}]}
    showLabels
    width={520}
    height={320}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`TreemapChartDatum[]`	requis	Données hiérarchiques (1 ou 2 niveaux).
`label`	`string`	requis	Label aria-label du graphique (a11y).
`tiling`	`"squarified"`	`"squarified"`	Algorithme de pavage (squarified uniquement).
`showLabels`	`boolean`	`true`	Affiche les labels dans les rectangles suffisamment grands.
`legend`	`boolean`	`false`	Affiche une légende sous le graphique.
`width`	`number`	`480`	Largeur du viewBox SVG.
`height`	`number`	`300`	Hauteur du viewBox SVG.

TreemapChartDatum = { label: string; value: number; tone?: TreemapChartTone; children?: TreemapChartDatum[] }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Palette catégorielle pour les rectangles.
`--st-component-treemapChart-labelColor`	Couleur de repli des labels (remplacée par contraste calculé).
`--st-component-treemapChart-tooltipBackground`	Fond du tooltip de survol.
`--st-component-treemapChart-tooltipText`	Texte du tooltip.

Piloté par store

La version adaptateur (@sentropic/dataviz-svelte, -react, -vue, -angular) dérive les rectangles d’un DashboardStore partagé : hierarchy et measure désignent les canaux.

Revenu par région (store)

Voir le code (Svelte)

<div class="chart-wrapper">
  <TreemapChart
    store={store}
    viewId="store"
    hierarchy={["region","product"]}
    measure="revenue"
    label="Revenu par région (store)"
  />
</div>

Prop	Type	Par défaut
`store`	`DashboardStore`	requis
`viewId`	`string`	requis
`hierarchy`	`string[]`	requis
`measure`	`string`	requis
`showLabels`	`boolean`	natif
`legend`	`boolean`	natif
`width` / `height`	`number`	natif
`label`	`string`	requis (a11y)

Props du natif non reprises par la version store : data (dérivé du store via hierarchy / measure) et tiling (non exposé : le défaut du natif s’applique).