Composant · Données

FlamegraphChart

Stable

Pile d'appels (call stacks façon Grafana flamegraph / Brendan Gregg). La LARGEUR d'un nœud est ∝ value : la racine occupe toute la largeur, chaque enfant occupe value / Σ frères de la largeur de son parent, et la profondeur fixe le niveau vertical. Idéal pour visualiser où le temps (ou toute mesure cumulative) se concentre dans une hiérarchie récursive.

Exemples

Le profil d'une requête : la requête SQL domine, et l'exécution de l'index est le point chaud le plus profond.

Profil CPU de la requête

requête: 100
·authentifier: 28
··verifyToken: 18
·requête SQL: 46
··parse: 14
··execute: 26
···scanIndex: 17
·rendu: 22

Voir le code (Svelte)

<FlamegraphChart
  label="Profil CPU de la requête"
  width={560}
  height={280}
  data={{"name":"requête","value":100,"children":[{"name":"authentifier","value":28,"children":[{"name":"verifyToken","value":18}]},{"name":"requête SQL","value":46,"children":[{"name":"parse","value":14},{"name":"execute","value":26,"children":[{"name":"scanIndex","value":17}]}]},{"name":"rendu","value":22}]}}
/>

API du composant

Prop	Type	Défaut	Description
`data`	`FlamegraphNode`	–	Nœud racine récursif : { name, value, children? }.
`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.

FlamegraphNode = { name: string; value: number; children?: FlamegraphNode[] }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Couleurs des nœuds (par profondeur).
`--st-semantic-surface-default`	Trait de séparation des rectangles.
`--st-semantic-text-primary`	Étiquettes des nœuds.