AreaChart

À quoi il sert

AreaChart montre l’évolution d’un total, ou sa décomposition en deux à six couches empilées, en SVG statique.

Quand l’utiliser

• Montrer un volume qui évolue dans le temps : trafic, consommation, effectifs.
• Décomposer un total en deux à quatre sources : l’empilement donne le total et la part de chaque couche.
• Garder le zéro comme base : l’aire est proportionnelle à la valeur, ce que la courbe seule ne garantit pas.

Quand ne pas l’utiliser

• Au-delà de trois ou quatre couches : l’empilement devient difficile à lire. À six couches de 500 points, mieux vaut des courbes séparées (LineChart) ou une petite série par graphique.
• Pour comparer précisément des couches du milieu : seule la première repose sur la base zéro, les autres flottent. Utiliser BarChart ou LineChart.
• Avec des valeurs négatives : l’empilement refuse le jeu et le build échoue avec le code stack.negative-value.
• Pour une interaction (survol, infobulle) : le rendu est statique, sans JavaScript.

Exemples

---
import AreaChart from '@paulperigault/astro/AreaChart.astro';
import type { Dataset } from '@paulperigault/dataviz';

const sources: Dataset = {
  schema: 1,
  x: { kind: 'time', label: 'Mois', values: ['2025-01-01', '2025-02-01', '2025-03-01'] },
  series: [
    { id: 'recherche', label: 'Recherche', unit: 'visites', values: [410, 400, 450] },
    { id: 'direct', label: 'Direct', unit: 'visites', values: [260, 250, 270] },
  ],
};
---

<AreaChart id="visites-source" title="Visites par source" dataset={sources} />

Variantes

Accessibilité

Clavier

• Le SVG n’est pas interactif et ne reçoit pas le focus.
• Le tableau lié se déplie au clavier (élément details natif) et défile au clavier.

Lecteur d’écran

• Le SVG porte role="img", nommé par un title et décrit par un desc.
• Le desc donne le total, les extrêmes et les données manquantes ; il dit si les couches sont empilées.
• Le tableau de toutes les données est lié sous le graphique, dans un details fermé.

Garanti par le composant

• Chaque couche a un contour de trait, un motif de remplissage et une légende, en plus de sa couleur (WCAG 1.4.1).
• Jetons --pp-chart-1..6 en clair et en sombre ; aucun attribut style.
• Une valeur manquante rompt la couche au lieu de la rabattre à zéro, et se dit dans le tableau lié.
• Zéro JavaScript et aucune animation : rien à retirer sous prefers-reduced-motion: reduce.
• Impression : motifs et tableau conservés, sans dépendre de la couleur.

À la charge de l’intégrateur

• Donner un id unique par page (lettres, chiffres, tirets) : il relie titre, résumé et motifs.
• Fournir un jeu de données valide, sans valeur négative : sinon le build échoue avec son code d’erreur.
• Pour un empilement, ordonner les séries de la plus stable (en bas) à la plus variable (en haut).

Propriétés

Jetons utilisés

• --pp-chart-1
• --pp-chart-2
• --pp-chart-3
• --pp-chart-4
• --pp-chart-5
• --pp-chart-6
• --pp-color-bg
• --pp-color-fg
• --pp-color-line
• --pp-color-muted
• --pp-font-family-sans
• --pp-font-size--1
• --pp-font-size-0
• --pp-font-weight-semibold
• --pp-size-measure
• --pp-size-rule
• --pp-size-target-min
• --pp-space-2xs
• --pp-space-3xs
• --pp-space-s
• --pp-space-xs

Preuves et décisions

• WCAG 1.1.1 Contenu non textuel
• WCAG 1.4.1 Utilisation de la couleur
• ADR-0007 : visualisation de données
• Tests : packages/astro/test/AreaChart.test.ts