Visualisation de données

Huit composants Astro dessinent des graphiques en SVG statique, au build, sans JavaScript. Chacun écrit son résumé, lie son tableau de valeurs et ne s’appuie jamais sur la couleur seule.

Les exemples utilisent des jeux fictifs, lus dansapps/docs/src/components/examples/chart-data.json. Le cadre de décision est l’ADR-0007.

Les huit composants

import LineChart from '@paulperigault/astro/LineChart.astro';

<LineChart id="visites-mensuelles" title="Visites mensuelles en 2025" dataset={visites} />

import BarChart from '@paulperigault/astro/BarChart.astro';

<BarChart id="visites-rubrique" title="Visites par rubrique" dataset={rubriques} showValues />

import AreaChart from '@paulperigault/astro/AreaChart.astro';

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

import GaugeChart from '@paulperigault/astro/GaugeChart.astro';

<GaugeChart
  id="remplissage"
  title="Taux de remplissage de la salle"
  value={72}
  unit="%"
  label="Taux de remplissage"
  zones={[
    { label: 'Critique', to: 40, tone: 'bad' },
    { label: 'Vigilance', to: 80, tone: 'warning' },
    { label: 'Nominal', tone: 'good' },
  ]}
/>

import KpiCard from '@paulperigault/astro/KpiCard.astro';

<KpiCard
  id="visites-mois"
  title="Visites du mois"
  value={1190}
  unit="visites"
  reference={1240}
  referenceLabel="par rapport au mois précédent"
  trend={{ title: 'Visites par mois en 2025', dataset: visites }}
/>

import Sparkline from '@paulperigault/astro/Sparkline.astro';

<Sparkline id="visites-trait" title="Visites mensuelles en 2025" dataset={visites} />

import DataTable from '@paulperigault/astro/DataTable.astro';

<DataTable id="visites-tableau" title="Visites par source en 2025" dataset={sources} />

import Legend from '@paulperigault/astro/Legend.astro';

<Legend id="sources" items={['Recherche', 'Direct', 'Référents']} />

Contrat de données

Tous les composants lisent le même Dataset, défini par l’ADR-0007 (décision 1). Il est validé à la frontière : un jeu invalide fait échouer le build avec un code d’erreur, il n’est jamais dessiné de travers.

import type { Dataset } from '@paulperigault/dataviz';

const visites: Dataset = {
  schema: 1,
  x: { kind: 'time', label: 'Mois', values: ['2025-01-01', '2025-02-01', '2025-03-01'] },
  series: [{ id: 'visites', label: 'Visites', unit: 'visites', values: [820, 790, null] }],
};

• Format : colonnaire et versionné (schema: 1). Un axex de genre category, time ou number, et des séries avec id, label, unit et values.
• Valeur manquante : null, jamais 0 niNaN. La courbe se rompt, les barres laissent un vide, le tableau écrit « donnée manquante ».
• Unité : une par série, séparée de la valeur. Deux unités différentes sur un même axe sont refusées (dataset.unit-mismatch).
• Dates : ISO 8601, lues en UTC, sans fuseau implicite.
• Locale : fr par défaut, par Intl : virgule décimale, espace fine insécable entre les milliers (convention typographique).
• Plafonds : six séries au plus, 40 catégories de barres, 500 points par courbe (sous-échantillonnage LTTB au build), 400 nœuds SVG et 10 ko par graphique. Ce sont des conventions de l’ADR-0007, mesurées par les tests du dépôt.

Accessibilité

La cible est WCAG 2.2 AA. Les garanties ci-dessous viennent de l’ADR-0007 (décision 3) et sont testées dans packages/astro/test/.

• Alternative textuelle : chaque graphique est une figure avec unfigcaption. Le SVG porte role="img", un title et undesc qui résume la donnée : début, fin, tendance chiffrée, extrêmes, valeurs manquantes.
• Tableau lié : toutes les valeurs sont dans un tableau sous le graphique, avec desth scope, dans un details fermé que le clavier déplie.
• Pas de couleur seule (WCAG 1.4.1) : chaque rang de série a un motif de trait ou de remplissage et un marqueur de forme propre, repris par Legend. Une variation deKpiCard s’écrit en mots avec son signe.
• Contraste : tracés et barres à 3:1 au moins contre le fond (WCAG 1.4.11), texte à 4,5:1 au moins (1.4.3), jamais en couleur de série. Les six jetons--pp-chart-1..6 ont été mesurés le 2026-10-29 à 3,07:1 au minimum, en clair et en sombre (.claude/skills/encre-design/SKILL.md).
• Mouvement, contraste forcé, impression : aucune animation, tracés enCanvasText sous forced-colors, motifs et tableau conservés à l’impression.
• Mesure : axe sans violation sur LineChart (2 thèmes, 2 fenêtres,apps/docs/e2e/line-chart.spec.ts) et sur cette page :apps/docs/e2e/donnees.spec.ts.

Teinte d’accent

Un projet fournit une teinte OKLCH en degrés ; le système fixe la clarté et le chroma. Les six couleurs de graphique sont dérivées de cette teinte et contrôlées en daltonisme : écart CIEDE2000 d’au moins 10 entre deux couleurs de la catégorielle (seuil de convention, ADR-0007, décision 4). Les motifs et les marqueurs restent exigés en plus.

npm create @paulperigault mon-site -- --accent-hue 150

Ce site garde la teinte par défaut (270,7). Le tableau des jetons pour une autre teinte est dans la section « Teinte d’accent » de la fiche LineChart. La commande complète et ses refus sont décrits sur la page Utiliser.