Composant · Données

CalendarHeatmapChart

Documenté

CalendarHeatmapChart présente une grille semaine × jour-de-semaine (style GitHub) colorée selon l'intensité d'une valeur quotidienne. Idéal pour visualiser l'activité ou la densité d'événements dans le temps.

Exemples

Activité de contribution

Chaque cellule représente un jour ; l'intensité de couleur reflète la valeur. Les jours sans donnée sont grisés.

Activité de contribution

2025-01-06: 3
2025-01-07: 8
2025-01-08: 5
2025-01-09: 12
2025-01-10: 2
2025-01-13: 7
2025-01-14: 15
2025-01-15: 9
2025-01-16: 4
2025-01-17: 11
2025-01-20: 6
2025-01-21: 14
2025-01-22: 1
2025-01-23: 10
2025-01-24: 8

Voir le code (Svelte)

<div class="chart-wrapper">
  <CalendarHeatmapChart
    label="Activité de contribution"
    data={[{"date":"2025-01-06","value":3},{"date":"2025-01-07","value":8},{"date":"2025-01-08","value":5},{"date":"2025-01-09","value":12},{"date":"2025-01-10","value":2},{"date":"2025-01-13","value":7},{"date":"2025-01-14","value":15},{"date":"2025-01-15","value":9},{"date":"2025-01-16","value":4},{"date":"2025-01-17","value":11},{"date":"2025-01-20","value":6},{"date":"2025-01-21","value":14},{"date":"2025-01-22","value":1},{"date":"2025-01-23","value":10},{"date":"2025-01-24","value":8}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`CalendarHeatmapChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`140`
`class`	`string`	optionnel

CalendarHeatmapChartDatum = { date: string; value: number } · date au format "YYYY-MM-DD"

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque date et sa valeur sont listées dans une région accessible hors SVG.

Notes d'usage

Les dates doivent être au format `"YYYY-MM-DD"`. La grille s'étend du dimanche de la première semaine au samedi de la dernière. Les dates invalides sont ignorées silencieusement.

Tokens

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