SankeyChart

Exemples

Flux d'acquisition

Un flux simple avec deux liens pondérés et un nœud accentué.

<div class="chart-wrapper">
  <SankeyChart
    label="Flux d'acquisition"
    nodes={[{"id":"visit","label":"Visites"},{"id":"trial","label":"Essais","tone":"category4"},{"id":"paid","label":"Payants"}]}
    links={[{"source":"visit","target":"trial","value":120},{"source":"trial","target":"paid","value":48}]}
  />
</div>

Allocation de budget

Plusieurs destinations partagent une même source.

<div class="chart-wrapper">
  <SankeyChart
    label="Allocation de budget"
    nodes={[{"id":"platform","label":"Plateforme","tone":"category2"},{"id":"compute","label":"Calcul"},{"id":"data","label":"Données"},{"id":"security","label":"Sécurité","tone":"category8"}]}
    links={[{"source":"platform","target":"compute","value":64},{"source":"platform","target":"data","value":42},{"source":"platform","target":"security","value":18}]}
  />
</div>

API du composant

SankeyChartNode = { id: string; label: string; tone?: SankeyChartTone } · SankeyChartLink = { source: string; target: string; value: number; tone?: SankeyChartTone }.

Accessibilité

`label` nomme le diagramme. Les liens sont exposés dans une liste accessible sous la forme source, cible, valeur.

Notes d'usage

Gardez les graphes petits et agrégés. Pour des réseaux denses, ForceGraph ou une table de flux filtrable seront plus adaptés.

Tokens

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

Piloté par store

La version adaptateur (@sentropic/dataviz-svelte, -react, -vue, -angular) dérive les flux d’un DashboardStore partagé : source, target et measure désignent les canaux.

<div class="chart-wrapper">
  <SankeyChart
    store={store}
    viewId="store"
    source="from"
    target="to"
    measure="flow"
    label="Flux (store)"
  />
</div>

Props du natif non reprises par la version store : nodes et links (reconstruits depuis le store via source / target / measure).