Composant · Données

OrganizationChart

Stable

Organigramme hiérarchique : une boîte rectangulaire par nœud, disposée par niveau (la profondeur fixe la ligne verticale) avec les enfants centrés sous leur parent. Les connecteurs orthogonaux relient chaque parent à ses enfants. 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

Organigramme à 3 niveaux : une direction, trois départements (Ingénierie, Ventes, Opérations) et leurs équipes. Chaque boîte adopte une couleur de la palette catégorielle du thème.

Organigramme de l'entreprise

Direction (ceo)
Ingénierie (eng) → Direction
Ventes (sales) → Direction
Opérations (ops) → Direction
Frontend (fe) → Ingénierie
Backend (be) → Ingénierie
Amériques (amer) → Ventes
EMEA (emea) → Ventes

Voir le code (Svelte)

<div class="chart-wrapper">
  <OrganizationChart
    label="Organigramme de l'entreprise"
    data={[{"id":"ceo","label":"Direction"},{"id":"eng","parentId":"ceo","label":"Ingénierie"},{"id":"sales","parentId":"ceo","label":"Ventes"},{"id":"ops","parentId":"ceo","label":"Opérations"},{"id":"fe","parentId":"eng","label":"Frontend"},{"id":"be","parentId":"eng","label":"Backend"},{"id":"amer","parentId":"sales","label":"Amériques"},{"id":"emea","parentId":"sales","label":"EMEA"}]}
    width={640}
    height={320}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`OrganizationChartNode[]`	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`	`320`	Hauteur du viewBox SVG.

OrganizationChartNode = { id: string; parentId?: string | null; label: string; tone?: OrganizationChartTone }

Tokens CSS

Variable CSS	Description
`--st-semantic-data-category1…8`	Palette catégorielle pour le fond des boîtes.
`--st-semantic-border-default`	Couleur des connecteurs parent → enfant.
`--st-semantic-text-inverse`	Couleur du label dans les boîtes.