Composant · Données

StateTimelineChart

Stable

Bandes d'états discrets dans le temps (façon « state timeline »). Chaque ligne (series) est une séquence de segments contigus qui pavent l'axe temporel ; la couleur encode l'état. Les segments fournissent un tone explicite, sinon une teinte stable est dérivée par état (cycle sur category1…8). Légende des états sous le graphe.

Exemples

Disponibilité de trois services sur 24 heures : segments OK / dégradé / panne colorés par ton sémantique.

Chronologie d'états

OK
Dégradé
Panne

API: OK [0 → 6], Dégradé [6 → 9], OK [9 → 24]
Base de données: OK [0 → 14], Panne [14 → 17], OK [17 → 24]
CDN: OK [0 → 24]

Voir le code (Svelte)

<StateTimelineChart
  label="Disponibilité des services"
  width={640}
  height={220}
  data={[{"series":"API","segments":[{"start":0,"end":6,"state":"OK","tone":"success"},{"start":6,"end":9,"state":"Dégradé","tone":"warning"},{"start":9,"end":24,"state":"OK","tone":"success"}]},{"series":"Base de données","segments":[{"start":0,"end":14,"state":"OK","tone":"success"},{"start":14,"end":17,"state":"Panne","tone":"error"},{"start":17,"end":24,"state":"OK","tone":"success"}]},{"series":"CDN","segments":[{"start":0,"end":24,"state":"OK","tone":"success"}]}]}
/>

API du composant

Prop	Type	Défaut	Description
`data`	`StateTimelineSeries[]`	`[]`	Lignes : { series, segments[] }.
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`320`	Hauteur du viewBox SVG.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

StateTimelineSegment = { start: number; end: number; state: string | number; tone?: StateTimelineTone } : tone ∈ neutral | info | success | warning | error | category1…8

Tokens CSS

Variable CSS	Description
`--st-semantic-border-subtle`	Couleur des axes et de la grille.
`--st-semantic-feedback-success` / `warning` / `error`	Couleurs des segments à ton sémantique.
`--st-semantic-data-category1…8`	Couleurs des états dérivés (sans tone).
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.