Composant · Données

AnomalySwimLaneChart

Stable

Heatmap temps × job (façon Kibana ML « anomaly swim lane »). Une ligne = un job ; une colonne = un bucket temporel (trié par at). La couleur encode un score CONTINU — pas un statut discret — via un gradient d'intensité : le score normalisé 0…max mappe l'échelle continue category1…8. Légende d'échelle Low → High sous le graphe.

Exemples

Trois jobs sur cinq buckets : l'intensité de chaque cellule suit le score d'anomalie, de faible (froid) à élevé (chaud).

Scores d'anomalie

Connexions: 0 = 8, 1 = 22, 2 = 71, 3 = 94, 4 = 35
Paiements: 0 = 4, 1 = 12, 2 = 18, 3 = 48, 4 = 88
API: 0 = 2, 1 = 6, 2 = 9, 3 = 14, 4 = 20

Voir le code (Svelte)

<AnomalySwimLaneChart
  label="Scores d'anomalie"
  width={600}
  height={240}
  max={100}
  data={[{"job":"Connexions","buckets":[{"at":0,"score":8},{"at":1,"score":22},{"at":2,"score":71},{"at":3,"score":94},{"at":4,"score":35}]},{"job":"Paiements","buckets":[{"at":0,"score":4},{"at":1,"score":12},{"at":2,"score":18},{"at":3,"score":48},{"at":4,"score":88}]},{"job":"API","buckets":[{"at":0,"score":2},{"at":1,"score":6},{"at":2,"score":9},{"at":3,"score":14},{"at":4,"score":20}]}]}
/>

API du composant

Prop	Type	Défaut	Description
`data`	`AnomalySwimLaneSeries[]`	`[]`	Lignes : { job, buckets[] }.
`max`	`number`	dérivé	Score max de l'échelle (défaut : max des données).
`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.

AnomalySwimLaneBucket = { at: number; score: number } ; score normalisé 0…max → category1…8

Tokens CSS

Variable CSS	Description
`--st-semantic-border-subtle`	Couleur des axes.
`--st-semantic-data-category1…8`	Échelle continue d'intensité du score.
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.