Legend
À quoi il sert
Legend associe à chaque série un échantillon à forme propre et son libellé : la couleur ne porte jamais seule le sens.
Quand l’utiliser
- Nommer les séries d’un graphique dessiné ailleurs : un échantillon par rang, un libellé écrit.
- Reprendre le langage des graphiques : trait à motif et marqueur de forme pour une courbe, motif de remplissage pour une barre.
- Donner une légende à une page de tableau de bord qui assemble plusieurs graphiques de mêmes séries.
Quand ne pas l’utiliser
- À l’intérieur d’un LineChart, BarChart ou AreaChart : leur légende est déjà incluse.
- Avec plus de six entrées : le build échoue avec chart.too-many-series ; regrouper en amont.
- Avec un libellé vide : le build échoue avec dataset.bad-shape.
- Pour filtrer des séries : voir DataTable.
Exemples
- Recherche
- Direct
- Référents
- Guides
- Références
- Journal
- Visites mensuelles
---
import Legend from '@paulperigault/astro/Legend.astro';
---
<Legend id="sources" items={['Recherche', 'Direct', 'Référents']} />Variantes
Limites connues
- Les couleurs --pp-chart-1..6 restent figées sur l’accent par défaut tant que l’issue #121 n’est pas faite.
Teinte d’accent
--pp-accent-hue règle la teinte OKLCH en degrés ; clarté et chroma restent ceux du système. Le branchement dans le build de tokens n’est pas fait (#121) : les graphiques ci-dessus utilisent les jetons figés sur la teinte 270.7. Le tableau montre ce que la dérivation donnerait pour la teinte 150, calculée à la construction de la page.
| Rang | Figé, teinte 270.7, clair | Dérivé, teinte 150, clair | Dérivé, teinte 150, sombre |
|---|---|---|---|
| --pp-chart-1 | oklch(47% 0.19 270.7) | oklch(47% 0.1294 150) | oklch(78% 0.1 150) |
| --pp-chart-2 | oklch(64% 0.1491 60.7) | oklch(68% 0.31 330) | oklch(56% 0.24 315) |
| --pp-chart-3 | oklch(20% 0.0787 30.7) | oklch(20% 0.0986 315) | oklch(88% 0.086 315) |
| --pp-chart-4 | oklch(64% 0.1091 195.7) | oklch(48% 0.095 345) | oklch(52% 0.1235 120) |
| --pp-chart-5 | oklch(44% 0.1781 0.7) | oklch(24% 0.0661 150) | oklch(56% 0.1 180) |
| --pp-chart-6 | oklch(64% 0.2026 285.7) | oklch(64% 0.1346 165) | oklch(92% 0.2184 120) |
Accessibilité
Clavier
- La légende n’est pas interactive et ne reçoit pas le focus.
Lecteur d’écran
- Une liste nommée (aria-label) ; chaque entrée est son libellé, l’échantillon est masqué (aria-hidden).
- Le sens est dans le libellé écrit, pas dans l’échantillon.
Garanti par le composant
- Trois indices par rang, jamais la couleur seule (WCAG 1.4.1) : couleur --pp-chart-N, motif (trait ou remplissage) et forme du marqueur.
- Zéro JavaScript, aucune animation, aucun attribut style ; en contraste forcé, tracés en CanvasText.
À la charge de l’intégrateur
- Donner un id unique par page (lettres, chiffres, tirets) : il nomme les motifs de remplissage.
- Ordonner les libellés comme les séries du graphique : le rang fixe couleur, motif et marqueur.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| id (obligatoire) | string | — | Préfixe unique des ids des motifs : lettres, chiffres et tirets. |
| items (obligatoire) | string[] | — | Libellés dans l'ordre des séries (6 au plus) ; le rang fixe couleur, motif et marqueur. |
| kind | "line" | "bar" | 'line' | `line` (trait et marqueur, défaut) ou `bar` (carré de motif). |
| label | string | 'Légende' | Nom accessible de la liste. |
| class | string | — | Réservé au placement du composant dans son parent. |
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-font-size-0--pp-size-rule--pp-space-2xs--pp-space-3xs--pp-space-s
Preuves et décisions
- WCAG 1.4.1 Utilisation de la couleur
- ADR-0007 : visualisation de données, décision 7 (V3b)
- Tests : packages/astro/test/Legend.test.ts