Chiffre clé
رقم رئيسيKey figure
Stable
src/dsm/components/key-figure.tsxLe chiffre clé met en avant une statistique isolée — taux, montant, volume — avec sa légende et, en option, une tendance. Regroupé dans un `KeyFigureGrid`, il compose un tableau de bord synthétique séparé par des filets.
Import
import { KeyFigure } from "@/dsm/components/key-figure";Exemples
Par défaut
Un chiffre clé isolé, avec tendance.
LTR
4,2 M
Démarches réalisées en ligne en 2025
+18 % sur un anSource : Agence de Développement du Digital
Tons
Tons `default`, `primary` et `inverse` sur fond sombre.
LTR
577 827
Habitants à Rabat
RGPH 2024
93 %
Taux de satisfaction usagers
+3 pts
24/7
Disponibilité du portail national
Le Maroc en chiffres
Cas réel : grille de 4 statistiques du HCP.
LTR
Le Maroc en chiffres — HCP, RGPH 2024
37,8 M
Population totale
+0,85 % / an
65,4 %
Taux d'urbanisation
+1,1 pt
12
Régions administratives
Depuis le découpage de 2015
1 538
Communes
dont 256 communes urbaines
Usage
Quand l'utiliser
- Utilisez un chiffre clé pour une statistique officielle vérifiable (HCP, ministère, opérateur public).
- Ajoutez `trend` uniquement lorsque la comparaison temporelle est pertinente et sourcée.
- Regroupez 2 à 4 chiffres clés dans un `KeyFigureGrid` plutôt que de les isoler séparément sur la page.
Quand ne pas l'utiliser
- N'inventez jamais un chiffre approximatif présenté comme officiel : indiquez la source en `description` si besoin de contexte.
- N'utilisez pas le chiffre clé pour une valeur qui change en temps réel sans indication de fraîcheur des données.
Accessibilité & langues
Accessibilité
- Le nombre est en `tabular-nums` pour un alignement régulier, sans incidence sur sa lecture par synthèse vocale.
- La tendance combine toujours une icône et un texte (`+4,2 %`) : la couleur seule (vert/rouge) n'est jamais le seul signal.
RTL & multilingue
- Les filets de séparation du `KeyFigureGrid` utilisent `border-s`, donc toujours du côté du début de lecture.
Propriétés
KeyFigure
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| value* | string | — | Valeur affichée en grand, ex. « 37,8 M ». |
| label* | ReactNode | — | Légende sous la valeur. |
| description | ReactNode | — | Précision ou source, affichée en petit. |
| trend | { value: string; direction: "up" | "down" | "flat" } | — | Variation affichée avec icône et couleur sémantique. |
| tone | "default" | "primary" | "inverse" | default | Couleur du chiffre — `inverse` pour un fond sombre. |
KeyFigureGrid
| Propriété | Type | Défaut | Description |
|---|---|---|---|
| columns | 2 | 3 | 4 | 3 | Nombre de colonnes à partir du point de rupture `sm`. |