Composant · Données

StatusHistoryChart

Stable

Grille temps × entité (façon « status history »). Chaque ligne (series) aligne ses buckets temporels en cellules, et la couleur encode un value de statut DISCRET — pas un dégradé continu. Les buckets fournissent un tone explicite, sinon une teinte stable est dérivée par statut (cycle sur category1…8). Légende des statuts sous le graphe.

Exemples

Historique de trois services sur quatre buckets : cellules de statut OK / dégradé / panne colorées par ton sémantique.

Historique des statuts

OK
Dégradé
Panne

API: 0 = OK, 1 = OK, 2 = Dégradé, 3 = OK
Base de données: 0 = OK, 1 = Panne, 2 = OK, 3 = OK
CDN: 0 = OK, 1 = OK, 2 = OK, 3 = OK

Voir le code (Svelte)

<StatusHistoryChart
  label="Historique des statuts"
  width={640}
  height={220}
  data={[{"series":"API","buckets":[{"at":0,"value":"OK","tone":"success"},{"at":1,"value":"OK","tone":"success"},{"at":2,"value":"Dégradé","tone":"warning"},{"at":3,"value":"OK","tone":"success"}]},{"series":"Base de données","buckets":[{"at":0,"value":"OK","tone":"success"},{"at":1,"value":"Panne","tone":"error"},{"at":2,"value":"OK","tone":"success"},{"at":3,"value":"OK","tone":"success"}]},{"series":"CDN","buckets":[{"at":0,"value":"OK","tone":"success"},{"at":1,"value":"OK","tone":"success"},{"at":2,"value":"OK","tone":"success"},{"at":3,"value":"OK","tone":"success"}]}]}
/>

API du composant

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

StatusHistoryBucket = { at: number; value: string | number; tone?: StatusHistoryTone } : tone ∈ neutral | info | success | warning | error | category1…8

Tokens CSS

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