Composant · Données

DependencyWheelChart

Documenté

DependencyWheelChart répartit des nœuds sur un cercle et relie chaque dépendance par un ruban dont l'épaisseur croît avec le poids. Chaque nœud occupe un arc proportionnel à la somme des poids de ses liens, et le ruban prend la couleur du nœud source.

Exemples

Dépendances de modules

Imports pondérés entre modules ; les arcs sont dimensionnés par le poids cumulé du nœud.

Dépendances de modules

ui
core
api
utils

ui -> core: 8
api -> core: 5
core -> utils: 3
api -> utils: 2

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--wheel">
  <DependencyWheelChart
    label="Dépendances de modules"
    data={[{"from":"ui","to":"core","weight":8},{"from":"api","to":"core","weight":5},{"from":"core","to":"utils","weight":3},{"from":"api","to":"utils","weight":2}]}
  />
</div>

Libellés personnalisés

Les identifiants techniques restent stables tandis que `labels` fournit l'affichage.

Libellés personnalisés

Interface
Noyau
API
Utilitaires

Interface -> Noyau: 8
API -> Noyau: 5
Noyau -> Utilitaires: 3

Voir le code (Svelte)

<div class="chart-wrapper chart-wrapper--wheel">
  <DependencyWheelChart
    label="Libellés personnalisés"
    data={[{"from":"ui","to":"core","weight":8},{"from":"api","to":"core","weight":5},{"from":"core","to":"utils","weight":3}]}
    labels={{"ui":"Interface","core":"Noyau","utils":"Utilitaires","api":"API"}}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`DependencyWheelChartLink[]`	requis
`label`	`string`	requis
`labels`	`Record<string, string>`	optionnel
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

DependencyWheelChartLink = { from: string; to: string; weight: number }. Un nœud est créé pour chaque identifiant from/to cité.

Accessibilité

`label` nomme le graphique (role=img). Chaque lien est exposé dans une liste accessible au format « source -> cible : poids ».

Notes d'usage

Les liens dont le poids n'est pas fini ou est négatif/nul sont ignorés. Limitez le nombre de nœuds pour préserver la lisibilité des rubans.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm