Composant · Données

ItemChart

Documenté

ItemChart (graphe « parlement » / hémicycle) répartit la somme des sièges en plusieurs rangées concentriques formant un demi-anneau. Chaque groupe occupe un bloc de pastilles CONTIGUËS coloré par ton catégoriel : on lit sa part à la longueur de l'arc occupé, comme une répartition de sièges.

Exemples

Composition d'une assemblée

Une pastille par siège ; chaque groupe forme un bloc contigu coloré par ton.

Composition d'une assemblée

Gauche: 40
Centre: 22
Droite: 80
Indép.: 12

Voir le code (Svelte)

<div class="chart-wrapper">
  <ItemChart
    label="Sièges par groupe"
    data={[{"label":"Gauche","value":40},{"label":"Centre","value":22,"tone":"category5"},{"label":"Droite","value":80},{"label":"Indép.","value":12}]}
  />
</div>

Quelques grands groupes

Les sièges se répartissent sur 3 à 5 rangées, les rangées extérieures portant plus de pastilles pour garder un espacement régulier.

Quelques grands groupes

A: 65
B: 48
C: 30

Voir le code (Svelte)

<div class="chart-wrapper">
  <ItemChart
    label="Répartition des membres"
    data={[{"label":"A","value":65},{"label":"B","value":48},{"label":"C","value":30}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`ItemChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`280`
`class`	`string`	optionnel

ItemChartDatum = { label: string; value: number; tone?: ItemChartTone } · ItemChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique (role=img). Une légende (label + nombre de sièges) accompagne le visuel, et les libellés/valeurs sont aussi rendus dans une liste accessible hors SVG pour les lecteurs d'écran.

Notes d'usage

Idéal pour des compositions discrètes (sièges, membres, allocations par catégorie). `value` est arrondie à l'entier le plus proche ; les valeurs négatives ou non finies valent zéro siège.

Tokens

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