Composant · Données

VariablePieChart

Documenté

VariablePieChart (camembert à rayon variable) encode DEUX métriques par part : l'ANGLE est proportionnel à la première valeur (les angles somment à 360°, comme un camembert classique) et le RAYON est proportionnel à une seconde métrique z, mappée entre un rayon minimum et un rayon maximum.

Exemples

Deux métriques par part

L'angle reflète la part de marché (value) ; le rayon reflète la croissance (z) : une part large mais courte vend beaucoup sans croître.

Deux métriques par part

Cloud: 40
Mobile: 25
Bureau: 20
IoT: 15

Voir le code (Svelte)

<div class="chart-wrapper">
  <VariablePieChart
    label="Part de marché et croissance"
    data={[{"label":"Cloud","value":40,"z":12},{"label":"Mobile","value":25,"z":30},{"label":"Bureau","value":20,"z":6},{"label":"IoT","value":15,"z":48}]}
  />
</div>

Rayon proportionnel à z

À angle égal, la part dont z est le plus grand pousse jusqu'au rayon maximum ; la plus petite reste au rayon minimum.

Rayon proportionnel à z

A: 33
B: 33
C: 34

Voir le code (Svelte)

<div class="chart-wrapper">
  <VariablePieChart
    label="Rayon piloté par z"
    data={[{"label":"A","value":33,"z":10},{"label":"B","value":33,"z":50},{"label":"C","value":34,"z":100}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`VariablePieChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`360`
`height`	`number`	`360`
`class`	`string`	optionnel

VariablePieChartDatum = { label: string; value: number; z: number; tone?: VariablePieChartTone } · VariablePieChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique (role=img). Les libellés et valeurs sont rendus dans une liste accessible hors SVG. Le texte sur part prend une couleur contrastée calculée par ton.

Notes d'usage

Idéal quand chaque catégorie porte deux dimensions corrélées (part + intensité, volume + marge). Les parts dont value est non finie ou ≤ 0 sont ignorées ; un z non fini est ramené à 0.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-surface-default
--st-semantic-text-secondary
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm