Composant · Données

WaffleChart

Stable

Grille N×M de cellules (façon « waffle ») : la proportion de cellules colorées encode la part de chaque catégorie. Chaque catégorie occupe round(value / total × totalCells) cellules consécutives, teintée par tone (ou category1…8 par index). Les cellules restantes forment une piste neutre. Légende des catégories sous le graphe.

Exemples

Deux grilles 10×10 : parts de marché (tons dérivés) et statut des tâches teinté par ton sémantique.

Grilles de proportion

Chrome · 65%
Safari · 20%
Firefox · 15%

Chrome: 65 (65%)
Safari: 20 (20%)
Firefox: 15 (15%)

Réussi · 78%
En cours · 14%
Échoué · 8%

Réussi: 78 (78%)
En cours: 14 (14%)
Échoué: 8 (8%)

Voir le code (Svelte)

<div class="waffle-demo-row">
  <WaffleChart
    label="Parts de marché"
    size={200}
    data={[{"label":"Chrome","value":65},{"label":"Safari","value":20},{"label":"Firefox","value":15}]}
  />
  <WaffleChart
    label="Statut des tâches"
    size={200}
    data={[{"label":"Réussi","value":78,"tone":"success"},{"label":"En cours","value":14,"tone":"warning"},{"label":"Échoué","value":8,"tone":"error"}]}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`WaffleChartDatum[]`	`[]`	Catégories : { label, value, tone? }.
`totalCells`	`number`	`100`	Nombre total de cellules de la grille.
`columns`	`number`	`10`	Nombre de colonnes de la grille.
`label`	`string`	–	Libellé accessible du graphe.
`size`	`number`	`240`	Côté du SVG en pixels.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

WaffleChartDatum = { label: string; value: number; tone?: WaffleTone } : tone ∈ neutral | info | success | warning | error | category1…8

Tokens CSS

Variable CSS	Description
`--st-semantic-surface-subtle`	Couleur de la piste neutre (cellules restantes).
`--st-semantic-feedback-success` / `warning` / `error`	Couleurs des cellules à ton sémantique.
`--st-semantic-data-category1…8`	Couleurs des catégories dérivées (sans tone).