Composant · Données

RoseChart

Documenté

RoseChart (rose de Nightingale / polar area) répartit les catégories en secteurs d'angle ÉGAL et fait varier le RAYON selon la valeur : c'est le rayon qui porte l'information, pas l'angle, ce qui le distingue d'un camembert.

Exemples

Rose mensuelle

Une catégorie par secteur ; le rayon (et donc l'aire) reflète la valeur.

Rose mensuelle

Jan: 40
Fév: 22
Mar: 80
Avr: 55

Voir le code (Svelte)

<div class="chart-wrapper">
  <RoseChart
    label="Activité par mois"
    data={[{"label":"Jan","value":40},{"label":"Fév","value":22,"tone":"category5"},{"label":"Mar","value":80},{"label":"Avr","value":55}]}
  />
</div>

Échelle de l'aire

Le rayon vaut sqrt(value / maxValue) × R, donc l'AIRE du secteur est proportionnelle à la valeur : une lecture honnête perceptuellement.

Échelle de l'aire

A: 25
B: 50
C: 100

Voir le code (Svelte)

<div class="chart-wrapper">
  <RoseChart
    label="Aire proportionnelle"
    data={[{"label":"A","value":25},{"label":"B","value":50},{"label":"C","value":100}]}
  />
</div>

API du composant

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

RoseChartDatum = { label: string; value: number; tone?: RoseChartTone } · RoseChartTone = "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 secteur prend une couleur contrastée calculée par ton.

Notes d'usage

Idéal pour des données cycliques (mois, heures) à magnitude variable. Les valeurs non finies ou négatives sont ignorées (aucun secteur dessiné).

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