Composant · Données

RibbonChart

Stable

Rang empilé à rubans dans le temps (façon Power BI « ribbon chart »). Par période, les catégories sont empilées (hauteur = value) et TRIÉES par valeur (la plus grande au pied) ; des RUBANS lissés relient la même category d'une période à la suivante, matérialisant le flux de rang. Couleur stable par catégorie (tone explicite, sinon category1…8). Légende des catégories sous le graphe.

Exemples

Trois moyens de paiement sur trois trimestres : l'empilement reclasse à chaque période et les rubans suivent la montée du portefeuille.

Rang des produits

Carte
Virement
Portefeuille

Carte: T1 = 42, T2 = 35, T3 = 28
Virement: T1 = 30, T2 = 41, T3 = 33
Portefeuille: T1 = 18, T2 = 24, T3 = 45

Voir le code (Svelte)

<RibbonChart
  label="Rang des produits"
  width={560}
  height={280}
  data={[{"category":"Carte","period":"T1","value":42},{"category":"Virement","period":"T1","value":30},{"category":"Portefeuille","period":"T1","value":18},{"category":"Carte","period":"T2","value":35},{"category":"Virement","period":"T2","value":41},{"category":"Portefeuille","period":"T2","value":24},{"category":"Carte","period":"T3","value":28},{"category":"Virement","period":"T3","value":33},{"category":"Portefeuille","period":"T3","value":45}]}
/>

API du composant

Prop	Type	Défaut	Description
`data`	`RibbonChartDatum[]`	`[]`	Points : { category, period, value, tone? }.
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`520`	Largeur du viewBox SVG.
`height`	`number`	`300`	Hauteur du viewBox SVG.
`size`	`number`	–	Alias de width (largeur du viewBox).
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

RibbonChartDatum = { category: string; period: string | number; value: number; tone?: RibbonChartTone } : tone ∈ category1…8

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Couleurs des catégories (segments + rubans).
`--st-semantic-surface-default`	Trait de séparation des segments empilés.
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.