Composant · Données

TreegraphChart

Stable

Arbre / dendrogramme : une orientation horizontale (gauche → droite) où la profondeur fixe la colonne, les feuilles sont réparties verticalement et chaque parent est centré sur ses enfants. Chaque nœud est un cercle coloré et les liens parent → enfant sont des courbes de Bézier cubiques. Plusieurs racines sont acceptées, les parentId invalides (inconnus ou cycliques) sont traités comme des racines. Liste de valeurs accessible décrivant la hiérarchie.

Exemples

Arborescence de fichiers à 3 niveaux : un dossier racine, ses sous-dossiers et leurs feuilles. Chaque nœud adopte une couleur de la palette catégorielle du thème ; les liens courbes relient chaque parent à ses enfants de gauche à droite.

Arborescence des fichiers du projet

src (src)
composants (comp) → src
lib (lib) → src
routes (routes) → src
Button (button) → composants
Card (card) → composants
utils (utils) → lib
home (home) → routes

Voir le code (Svelte)

<div class="chart-wrapper">
  <TreegraphChart
    label="Arborescence des fichiers du projet"
    data={[{"id":"src","label":"src"},{"id":"comp","parentId":"src","label":"composants"},{"id":"lib","parentId":"src","label":"lib"},{"id":"routes","parentId":"src","label":"routes"},{"id":"button","parentId":"comp","label":"Button"},{"id":"card","parentId":"comp","label":"Card"},{"id":"utils","parentId":"lib","label":"utils"},{"id":"home","parentId":"routes","label":"home"}]}
    width={640}
    height={360}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`TreegraphChartNode[]`	requis	Nœuds plats ; parentId null/absent = racine.
`label`	`string`	requis	Label aria-label du graphique (a11y).
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`360`	Hauteur du viewBox SVG.

TreegraphChartNode = { id: string; parentId?: string | null; label: string; tone?: TreegraphChartTone }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Palette catégorielle pour le remplissage des cercles.
`--st-semantic-border-default`	Couleur des liens parent → enfant.
`--st-semantic-text-primary`	Couleur des libellés de nœuds.