Stat
À quoi il sert
Stat affiche un indicateur chiffré, sa variation écrite en clair et une icône de tendance.
Quand l’utiliser
- Afficher un indicateur clé avec sa variation, sur un tableau de bord.
- Montrer un chiffre unique accompagné d’un libellé et d’une tendance.
Quand ne pas l’utiliser
- Pour comparer plusieurs valeurs sur plusieurs lignes : utiliser Table.
- Pour une progression vers un objectif : utiliser Progress, qui porte une valeur maximale.
Exemples
- Visites
- 1 204
- +3 depuis la semaine dernière
- Erreurs
- 0
- Stable depuis hier
- Temps de réponse
- 420 ms
- −40 ms depuis la semaine dernière
<Stat label="Visites" value="1 204" delta="+3 depuis la semaine dernière" trend="up" />
<Stat label="Erreurs" value="0" delta="Stable depuis hier" trend="flat" />
<Stat label="Temps de réponse" value="420 ms" delta="−40 ms depuis la semaine dernière" trend="down" />Accessibilité
Clavier
- Le composant est statique : il ne reçoit pas le focus.
- Aucune touche n’est gérée par le composant.
Lecteur d’écran
- Le libellé et la valeur sont du texte ordinaire, dans une liste de description (dl, dt, dd).
- L’icône de tendance est masquée (aria-hidden="true") : le sens passe par le texte du delta.
Garanti par le composant
- La tendance est écrite en clair dans le delta, sans couleur porteuse de sens.
- Chaque tendance a une forme d’icône distincte : flèche haut, flèche bas, tiret.
- Le composant ne calcule ni ne formate aucune valeur : il affiche ce qu’on lui donne.
À la charge de l’intégrateur
- Fournir un delta dès que trend est donné : le composant refuse sinon.
- Formater la valeur avant l’affichage, par exemple « 1 204 » ou « 420 ms ».
- Annoncer une mise à jour dynamique avec une région live côté intégrateur.
Propriétés
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| label (obligatoire) | string | — | Nom de l'indicateur, par exemple « Visites ». |
| value (obligatoire) | string | — | Valeur affichée, déjà formatée (par exemple « 1 204 »). |
| delta | string | — | Texte de variation, par exemple « +3 depuis la semaine dernière ». Obligatoire si `trend` est donné. |
| trend | "up" | "down" | "flat" | — | Sens de la variation : `up`, `down` ou `flat`. Défaut : `flat`. |
| class | string | — | Réservé au placement du composant dans son parent. |
Jetons utilisés
--pp-color-fg--pp-color-muted--pp-font-line-height-heading--pp-font-size--1--pp-font-size-2--pp-font-weight-semibold--pp-space-3xs
Preuves et décisions
- WCAG 1.1.1 Contenu non textuel
- WCAG 1.3.1 Information et relations
- WCAG 1.4.1 Utilisation de la couleur
- WCAG 4.1.3 Messages d’état
- Tests : packages/astro/test/Stat.test.ts