Aller au contenu
Design system @paulperigault

Composants

Mise en page

KpiCard

À quoi il sert

KpiCard écrit un indicateur : sa valeur et son unité en grand, sa variation dite en mots, une sparkline en option.

Quand l’utiliser

Quand ne pas l’utiliser

Exemples

Visites du mois

1 190 visites

Baisse de 4,03 % (−50 visites) par rapport au mois précédent

Visites par mois en 2025
Visites par mois en 2025Sparkline « Visites par mois en 2025 » : Série « Visites » : de 820 visites (1 janvier 2025) à 1 190 visites (1 décembre 2025), hausse de 45,1 % ; minimum 790 visites (1 février 2025) ; maximum 1 240 visites (1 novembre 2025). Le tableau des données suit le graphique.
Données du graphique
Visites par mois en 2025 : Données du graphique
MoisVisites (visites)
1 janvier 2025820
1 février 2025790
1 mars 2025880
1 avril 2025940
1 mai 20251 010
1 juin 2025980
1 juillet 2025870
1 août 2025810
1 septembre 20251 050
1 octobre 20251 180
1 novembre 20251 240
1 décembre 20251 190

Durée médiane d’une visite

94 s

Baisse de 12,96 % (−14 s) par rapport au mois précédent

Taux de rebond

41 %

Stable par rapport au mois précédent

Téléchargements de la brochure

36

Hausse de 36 par rapport au mois précédent

Abonnés à l’infolettre

1 280

Visites du mois

Aucune donnée à afficher.

---
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 }}
/>

Variantes

Recommandation d’usage

Une carte porte une mesure, sa variation et au plus une tendance. Les cartes se rangent en grille et s’empilent sur un écran étroit.

Budgets de poids

  • Carte avec sparkline de 500 points : sous 10 ko et 400 nœuds, tableau lié exclu.

Limites connues

  • La couleur ne distingue pas hausse et baisse : choix assumé, voir D-051.
  • 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.

Jetons catégoriels figés et dérivation à une autre teinte
RangFigé, teinte 270.7, clairDérivé, teinte 150, clairDérivé, teinte 150, sombre
--pp-chart-1oklch(47% 0.19 270.7)oklch(47% 0.1294 150)oklch(78% 0.1 150)
--pp-chart-2oklch(64% 0.1491 60.7)oklch(68% 0.31 330)oklch(56% 0.24 315)
--pp-chart-3oklch(20% 0.0787 30.7)oklch(20% 0.0986 315)oklch(88% 0.086 315)
--pp-chart-4oklch(64% 0.1091 195.7)oklch(48% 0.095 345)oklch(52% 0.1235 120)
--pp-chart-5oklch(44% 0.1781 0.7)oklch(24% 0.0661 150)oklch(56% 0.1 180)
--pp-chart-6oklch(64% 0.2026 285.7)oklch(64% 0.1346 165)oklch(92% 0.2184 120)

Accessibilité

Clavier

Lecteur d’écran

Garanti par le composant

À la charge de l’intégrateur

Propriétés

Propriétés de KpiCard
PropriétéTypeDéfautDescription
value (obligatoire)number | null—Valeur mesurée ; `null` : état vide.
unitstring''Unité écrite avec la valeur (`€`, `%`, `ms`).
referencenumber | nullnullValeur de comparaison (période précédente, objectif) ; absente : pas de variation.
referenceLabelstring''Ce à quoi se compare la variation, écrit après elle (« par rapport à septembre »).
trend{ title: string; dataset: unknown; }—Tendance : un jeu à une série ; son titre nomme la période (« Visites par mois »).
labelsPartial<KpiLabels>{}Textes de l'interface (défaut : français).
id (obligatoire)string—Préfixe unique des ids du titre et de la description : lettres, chiffres et tirets.
title (obligatoire)string—Titre du graphique, premier élément de son nom accessible.
localestring'fr'Locale des nombres et des dates. Défaut : `fr`.
classstring—Réservé au placement du composant dans son parent.

Jetons utilisés

Preuves et décisions