Composant · Données

TraceWaterfallChart

Stable

Spans distribués imbriqués (trace waterfall, façon Grafana Tempo / Jaeger). Chaque span est une barre sur l'axe temps (start → start + duration) ; les spans sont ordonnés par parcours en profondeur depuis les racines (parentSpanId == null), indentés par profondeur, une ligne par span (libellé = service). Couleur stable par service. Axe temps gradué comme le GanttChart.

Exemples

Une requête traversant cinq services : la passerelle englobe tout, et la requête base de données est imbriquée sous le service de commandes.

Trace distribuée

gateway
auth
orders
db
render

gateway: 0 → 120
·auth: 8 → 30
·orders: 34 → 98
··db: 42 → 80
·render: 100 → 118

Voir le code (Svelte)

<TraceWaterfallChart
  label="Trace distribuée"
  width={560}
  height={240}
  data={{"spans":[{"spanId":"a","parentSpanId":null,"service":"gateway","start":0,"duration":120},{"spanId":"b","parentSpanId":"a","service":"auth","start":8,"duration":22},{"spanId":"c","parentSpanId":"a","service":"orders","start":34,"duration":64},{"spanId":"d","parentSpanId":"c","service":"db","start":42,"duration":38},{"spanId":"e","parentSpanId":"a","service":"render","start":100,"duration":18}]}}
/>

API du composant

Prop	Type	Défaut	Description
`data`	`{ spans: TraceSpan[] }`	–	Spans de la trace (hiérarchie parent→enfant).
`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.

TraceSpan = { spanId: string; parentSpanId?: string | null; service: string; start: number; duration: number }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Couleurs des barres (par service).
`--st-semantic-text-secondary`	Étiquettes de service + graduations de l'axe.
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.