Sparkline

À quoi il sert

Sparkline montre la tendance d’une série en un trait, sans axes, avec le point final, le plus haut et le plus bas écrits, en SVG statique.

Quand l’utiliser

• Donner la forme d’une série (hausse, creux, pic) à côté d’une valeur déjà écrite : indicateur, ligne de tableau.
• Montrer que des mesures manquent : le trait se rompt, rien n’est inventé et le tableau lié le dit.
• Garder un poids minime : un seul chemin, au plus 120 points tracés, sous 10 ko et 400 nœuds.

Quand ne pas l’utiliser

• Pour lire des valeurs sur une échelle : pas d’axes, utiliser LineChart.
• Pour comparer plusieurs séries : une série par sparkline, au-delà le build échoue avec chart.too-many-series.
• Avec des abscisses qui ne croissent pas : le build échoue avec geometry.bad-input.
• Avec une série entièrement manquante : état vide, sans tracé.

Exemples

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

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

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).

Lecteur d’écran

• Le SVG porte role="img", nommé par un title et décrit par un desc.
• Le desc donne le début, la fin, la tendance chiffrée, les extrêmes et les données manquantes.
• Le tableau de toutes les valeurs est lié sous le graphique, dans un details fermé.

Garanti par le composant

• Le point final, le plus haut et le plus bas ont une forme distincte (cercle, triangle haut, triangle bas) et sont écrits dans la légende avec leur valeur : la couleur ne porte jamais seule le sens (WCAG 1.4.1).
• La valeur finale est écrite en texte, de la taille du texte courant.
• Une série qui finit sur un trou le dit : le dernier point marqué est le dernier présent.
• Zéro JavaScript, aucune animation, aucun attribut style ; jeton --pp-chart-1 en clair et en sombre.

À la charge de l’intégrateur

• Donner un id unique par page (lettres, chiffres, tirets).
• Titrer par un fait (« Visites mensuelles en 2025 »), pas par « Aperçu ».
• Des dates irrégulières sont placées à leur écart réel ; des catégories, à intervalles égaux.

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.4.1 Utilisation de la couleur
• WCAG 1.1.1 Contenu non textuel
• Tufte, Beautiful Evidence, Graphics Press, 2006 : origine du nom « sparkline »
• ADR-0007 : visualisation de données
• Tests : packages/astro/test/Sparkline.test.ts