Composant · Visualisation

AreaChart

Stable

Graphique d'aire interactif pour visualiser des séries de données temporelles ou numériques avec lissage optionnel et différentes tonalités.

Exemples

Quelques configurations typiques de l'AreaChart : séries ordinales, lissage Bézier et axe X numérique. Ces exemples basculent dans le framework actif (Svelte / React / Vue).

Série ordinale

Activité serveur hebdomadaire, axe X par libellés.

Activité serveur (hebdomadaire)

Lun: 42
Mar: 65
Mer: 30
Jeu: 85
Ven: 55
Sam: 20
Dim: 15

Voir le code (Svelte)

<div class="chart-wrapper">
  <AreaChart
    data={[{"x":"Lun","y":42},{"x":"Mar","y":65},{"x":"Mer","y":30},{"x":"Jeu","y":85},{"x":"Ven","y":55},{"x":"Sam","y":20},{"x":"Dim","y":15}]}
    tone="category1"
    width={520}
    height={260}
    label="Activité serveur (hebdomadaire)"
  />
</div>

Lissage Bézier

`smooth` active la courbe Bézier cubique.

Ventes mensuelles (k$)

Jan: 120
Fév: 150
Mar: 220
Avr: 180
Mai: 270
Jui: 340

Voir le code (Svelte)

<div class="chart-wrapper">
  <AreaChart
    data={[{"x":"Jan","y":120},{"x":"Fév","y":150},{"x":"Mar","y":220},{"x":"Avr","y":180},{"x":"Mai","y":270},{"x":"Jui","y":340}]}
    tone="category3"
    smooth
    width={520}
    height={260}
    label="Ventes mensuelles (k$)"
  />
</div>

Axe X numérique

Quand tous les `x` sont numériques, l'axe utilise une échelle linéaire.

Axe X numérique (échelle linéaire)

0: 10
5: 25
10: 15
15: 45
20: 30
25: 60

Voir le code (Svelte)

<div class="chart-wrapper">
  <AreaChart
    data={[{"x":0,"y":10},{"x":5,"y":25},{"x":10,"y":15},{"x":15,"y":45},{"x":20,"y":30},{"x":25,"y":60}]}
    tone="category5"
    width={520}
    height={260}
    label="Axe X numérique (échelle linéaire)"
  />
</div>

API

Prop	Type	Default	Description
`data`	`(number \| AreaChartDatum)[]`	`[]`	Tableau de données. Peut contenir des objets `{ x: string \| number, y: number }` ou des nombres purs (normalisés avec index X).
`width`	`number`	`480`	Largeur brute du graphique en pixels (utilisée pour le viewBox SVG réactif).
`height`	`number`	`240`	Hauteur brute du graphique en pixels (utilisée pour le viewBox SVG réactif).
`tone`	`AreaChartTone`	`"category1"`	Gamme de couleur sémantique du graphique (`category1` à `category8`).
`smooth`	`boolean`	`false`	Active la courbe de lissage Bézier cubique au lieu d'une ligne brisée linéaire.
`label`	`string`	required	Libellé obligatoire décrivant le graphique pour les lecteurs d'écran (`aria-label`).
`class`	`string`	optionnel	Classe CSS personnalisée passée au conteneur principal.

Contrat Marque Blanche et CSS Custom Properties

Le composant respecte les principes de modularité et n'utilise pas de couleurs codées en dur. Il hérite de l'écurie de variables CSS sémantiques et expose des tokens spécifiques pour ajuster précisément le style.

Variable CSS / Token	Description
`--st-semantic-data-category1` à `...8`	Couleurs sémantiques par défaut de la palette de données (catégorie 1 à 8).
`--st-component-areaChart-gridStroke`	Couleur des lignes pointillées de la grille d'arrière-plan (défaut : `--st-semantic-border-subtle`).
`--st-component-areaChart-axisStroke`	Couleur des axes principaux X et Y (défaut : `--st-semantic-border-subtle`).
`--st-component-areaChart-labelColor`	Couleur de police des étiquettes des axes (défaut : `--st-semantic-text-secondary`).
`--st-component-areaChart-tooltipBackground`	Couleur d'arrière-plan de l'infobulle flottante au survol (défaut : `--st-semantic-surface-inverse`).
`--st-component-areaChart-tooltipText`	Couleur du texte de l'infobulle flottante (défaut : `--st-semantic-text-inverse`).

Accessibilité & Interactions

Le composant a été conçu avec soin pour garantir une accessibilité optimale :

Lecteurs d'écran : Le rendu visuel possède un rôle img avec le libellé label fourni. Les valeurs détaillées sont exposées dans une liste accessible hors SVG (ex. "Lun: 42") pour offrir une description alternative précise de chaque point.
Navigation au clavier : Le graphique évite les arrêts de tabulation par point. Les lecteurs d'écran parcourent la liste de valeurs, tandis que l'infobulle reste réservée au survol visuel.
Animations respectueuses : Les transitions et l'agrandissement des points respectent la préférence utilisateur prefers-reduced-motion pour éviter les effets d'inconfort visuel.

Piloté par store

La version adaptateur (@sentropic/dataviz-svelte, -react, -vue, -angular) dérive la série d’un DashboardStore partagé : category et measure désignent les canaux, le reste du contrat est inchangé.

Revenu mensuel (store)

Voir le code (Svelte)

<div class="chart-wrapper">
  <AreaChart
    store={store}
    viewId="store"
    category="month"
    measure="revenue"
    label="Revenu mensuel (store)"
  />
</div>

Prop	Type	Default	Description
`store`	`DashboardStore`	`required`	Store partagé.
`viewId`	`string`	`required`	Identifiant de vue.
`category` / `measure`	`string`	`required`	Canaux catégorie et mesure.
`tone` / `smooth`	`AreaChartTone / boolean`	natif	Repris du natif.
`width` / `height`	`number`	natif	Repris du natif.
`annotations` / `dataLabels`	`ChartAnnotation[] / DataLabelsProp`	natif	Repris du natif.
`hoverKey` / `onHoverKeyChange` / `onSelectKey`	`string \| null / callbacks`	natif	Repris du natif.
`label`	`string`	`required`	Label a11y.

Props du natif non reprises par la version store : data (dérivé du store via category / measure) et keyboardNav (navigation clavier propre au natif).