HeatmapChart

Exemples

Matrice catégorielle

Canaux en colonnes, trimestres en lignes, avec une cellule mise en évidence par ton.

<div class="chart-wrapper">
  <HeatmapChart
    label="Charge par canal et trimestre"
    data={[{"x":"Web","y":"Q1","value":12},{"x":"Web","y":"Q2","value":30,"tone":"category5"},{"x":"Sales","y":"Q1","value":18},{"x":"Sales","y":"Q2","value":24},{"x":"Support","y":"Q1","value":10},{"x":"Support","y":"Q2","value":16}]}
  />
</div>

Rampe séquentielle

`scale="sequential"` transforme la matrice en rampe d'intensité mono-teinte pilotée par les variables `--st-heatmapChart-ramp-*`.

<div class="chart-wrapper">
  <HeatmapChart
    label="Risque par système"
    data={[{"x":"API","y":"Low","value":8},{"x":"API","y":"Medium","value":19,"tone":"category3"},{"x":"API","y":"High","value":4,"tone":"category8"},{"x":"Workers","y":"Low","value":14},{"x":"Workers","y":"Medium","value":11},{"x":"Workers","y":"High","value":7,"tone":"category6"}]}
    scale="sequential"
    legend
  />
</div>

API du composant

HeatmapChartDatum = { x: string; y: string; value: number; tone?: HeatmapChartTone } · HeatmapChartTone = "category1" | ... | "category8" (utilisé en mode catégoriel).

Accessibilité

`label` alimente le conteneur `role="img"`. Les valeurs sont aussi exposées dans une liste accessible hors SVG, dans l'ordre ligne puis colonne.

Notes d'usage

Gardez des libellés courts sur les axes. Pour des matrices larges, filtrez les dimensions en amont plutôt que de réduire la typographie.

Tokens

• --st-semantic-data-category1 ... --st-semantic-data-category8
• --st-heatmapChart-ramp-1 ... --st-heatmapChart-ramp-8
• --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 cellules d’un DashboardStore partagé : x, y et measure désignent les canaux.

<div class="chart-wrapper">
  <HeatmapChart
    store={store}
    viewId="store"
    x="col"
    y="row"
    measure="value"
    label="Matrice (store)"
  />
</div>

Props du natif non reprises par la version store : data (dérivé du store via x / y / measure) et scale (non exposée : le défaut du natif s’applique).