Composant · Données

DonutChart

Documenté

Graphique en anneau : parts d'un total, palette data-vis catégorielle du thème (category1…8), tooltip au survol (valeur + %), total affiché au centre. Le graphique porte role="img" avec un label parlant et expose les parts dans une liste accessible hors SVG.

Exemple

Répartition des éléments du DS

Composants: 62 (55%)
Tokens: 28 (25%)
Thèmes: 14 (12%)
Contrats: 9 (8.0%)

Voir le code (Svelte)

<div class="docs-donut-box">
  <DonutChart
    data={[{"label":"Composants","value":62},{"label":"Tokens","value":28},{"label":"Thèmes","value":14},{"label":"Contrats","value":9}]}
    label="Répartition des éléments du DS"
    centerLabel="113"
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`DonutChartDatum[]`	requis
`label`	`string`	requis (a11y)
`size`	`number`	`220`
`thickness`	`number`	`34`
`centerLabel`	`string \| null`	total (`null` pour masquer)

DonutChartDatum = { label, value, tone? } ; tone ∈ category1…8 (sinon assigné cycliquement).

Piloté par store

La version adaptateur (@sentropic/dataviz-svelte, -react, -vue, -angular) dérive les parts d’un DashboardStore partagé : category et measure désignent les canaux, le reste du contrat est inchangé.

Revenu par produit (store)

Voir le code (Svelte)

<div class="chart-wrapper">
  <DonutChart
    store={store}
    viewId="store"
    category="product"
    measure="revenue"
    label="Revenu par produit (store)"
  />
</div>

Prop	Type	Par défaut
`store`	`DashboardStore`	requis
`viewId`	`string`	requis
`category`	`string`	requis
`measure`	`string`	requis
`sort`	`PartWholeSort`	non défini
`size` / `thickness` / `centerLabel`	`number / number / string \| null`	natif
`label`	`string`	requis (a11y)
`dataLabels`	`DataLabelsProp`	non défini

Props du natif non reprises par la version store : data (dérivé du store via category / measure).