Composant · Données

ArcDiagramChart

Documenté

ArcDiagramChart aligne des nœuds sur un axe horizontal et relie chaque paire par un arc en demi-cercle tracé au-dessus de la ligne. L'épaisseur de l'arc croît avec le poids du lien et reprend la couleur du nœud source ; la taille du marqueur de chaque nœud croît avec son degré pondéré.

Exemples

Réseau de modules

Liens pondérés entre modules ; les marqueurs sont dimensionnés par le degré pondéré du nœud.

Réseau 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--arc">
  <ArcDiagramChart
    label="Réseau 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--arc">
  <ArcDiagramChart
    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`	`ArcDiagramChartLink[]`	requis
`label`	`string`	requis
`labels`	`Record<string, string>`	optionnel
`width`	`number`	`480`
`height`	`number`	`240`
`class`	`string`	optionnel

ArcDiagramChartLink = { 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. Les nœuds sont placés dans leur ordre d'apparition (union from/to) ; ordonnez vos données pour rapprocher les nœuds fortement liés et raccourcir les arcs.

Tokens

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