dsfr-data-kpi - Composants

Affiche une valeur clé (KPI) avec formatage, couleurs conditionnelles basees sur des seuils, et icones optionnelles.

Attributs

Attribut	Type	Description
`source`	String	ID du `<dsfr-data-source>` (requis)
`value`	String	Expression de calcul : `"champ"`, `"champ:avg"`, `"count:champ:valeur"`
`heading`	String	Titre affiche AU-DESSUS de la valeur (surtitre, majuscules grises)
`label`	String	Libelle affiche sous la valeur (et sous les `lines`)
`description`	String	Description détaillée pour l'accessibilité
`trend`	String	Raccourci herite : expression `champ:fn` (ex. `evolution:avg`) rendue avec une fleche en %. Preferez `lines`
`lines`	String (JSON)	Lignes secondaires entre la valeur et le label. Items : `value` (expression) ou `text` (statique), + `sign`, `suffix`, `color` (`auto` / token DSFR / couleur CSS), `na`
`format`	String	Format d'affichage (défaut : `nombre`)
`icon`	String	Classe d'icone Remix Icon (ex: `ri-global-line`)
`color-token`	String	Couleur forcee (token semantique DSFR) : `vert`, `orange`, `rouge`, `bleu`. Alias deprecie : `color`
`threshold-green`	Number	Seuil au-dessus duquel la couleur est verte
`threshold-orange`	Number	Seuil au-dessus duquel la couleur est orange
`col`	Number	Largeur en colonnes (1-12), actif uniquement dans un `<dsfr-data-kpi-group>`

Les anciens noms francais (valeur, icone, couleur, seuil-vert, seuil-orange, tendance) restent lus en alias deprecies (#300).

dsfr-data-kpi-group - Attributs

Attribut	Type	Description
`cols`	Number	Nombre de colonnes par défaut (1-12, défaut: 3)
`gap`	String	Espacement : `sm` (0.5rem), `md` (1rem, défaut), `lg` (1.5rem)
`aria-label`	String	Label accessible du groupe

Expressions de calcul

champ : Valeur directe d'un champ (pour objet unique)
champ:avg : Moyenne des valeurs du champ
champ:sum : Somme des valeurs
champ:min / champ:max : Min/max
count : Compte tous les enregistrements
count:champ:valeur : Compte les occurrences ou champ = valeur

Grammaire commune du pipeline champ:fn (#303) — l'ancienne forme inversee fn:champ reste lue mais est depreciee.

Formats d'affichage

Format	Exemple (valeur : 32073247.5)	Description
`nombre`	32 073 248	Entier avec separateurs de milliers (arrondi)
`euro`	32 073 248 €	Montant en euros avec separateurs de milliers
`pourcentage`	75,5 %	Pourcentage (divise par 100, 1 decimale max)
`decimal`	32 073 247,50	Nombre decimal (1 a 2 decimales)

Tous les formats utilisent la locale francaise (separateur de milliers = espace, decimales = virgule).

Exemples

1. KPI simple avec valeur directe

<dsfr-data-kpi
  source="meta"
  value="total"
  label="Sites suivis"
  icon="ri-global-line"
  format="nombre">
</dsfr-data-kpi>

2. KPI avec moyenne et seuils

<dsfr-data-kpi
  source="sites"
  value="score_rgaa:avg"
  label="Score RGAA moyen"
  format="pourcentage"
  threshold-green="80"
  threshold-orange="50">
</dsfr-data-kpi>

3. KPI avec comptage conditionnel

<dsfr-data-kpi
  source="sites"
  value="count:statut:actif"
  label="Sites actifs"
  icon="ri-checkbox-circle-line"
  color-token="vert">
</dsfr-data-kpi>

4. KPI avec min/max

<dsfr-data-kpi source="sites" value="score_rgaa:max" label="Meilleur score" format="pourcentage" color-token="vert"></dsfr-data-kpi>
<dsfr-data-kpi source="sites" value="score_rgaa:min" label="Plus bas score" format="pourcentage" color-token="rouge"></dsfr-data-kpi>

5. Carte baromètre — titre (heading) + ligne d'évolution (lines)

heading = surtitre au-dessus de la valeur ; lines = ligne secondaire data-driven (signe +, suffixe, couleur « auto » verte si hausse) ; label = légende en bas. Source mono-objet (un seul enregistrement courant) supportée.

<dsfr-data-source id="baro" data='[{"immat_ve":37849,"immat_ve_evol":92.5}]'></dsfr-data-source>

<dsfr-data-kpi source="baro"
  heading="Immat. VE — véhicules particuliers"
  value="immat_ve"
  format="nombre"
  lines='[{"value":"immat_ve_evol","sign":true,"suffix":"vs mai 2025","color":"auto"}]'
  label="Donnée mai 2026">
</dsfr-data-kpi>

6. Tableau de bord complet (CSS manuel)

Grouper des KPIs avec dsfr-data-kpi-group

7. Colonnes egales (cols="4")

<dsfr-data-kpi-group cols="4">
  <dsfr-data-kpi source="meta" value="total" label="Sites suivis"></dsfr-data-kpi>
  <dsfr-data-kpi source="sites" value="score_rgaa:avg" label="RGAA moyen"></dsfr-data-kpi>
  <dsfr-data-kpi source="sites" value="score_dsfr:avg" label="DSFR moyen"></dsfr-data-kpi>
  <dsfr-data-kpi source="sites" value="count:certificat_valide:false" label="Expires"></dsfr-data-kpi>
</dsfr-data-kpi-group>

8. Largeurs personnalisees (col)

<dsfr-data-kpi-group>
  <dsfr-data-kpi source="meta" value="total" label="Sites suivis" col="6"></dsfr-data-kpi>
  <dsfr-data-kpi source="sites" value="score_rgaa:avg" label="RGAA moyen" col="3"></dsfr-data-kpi>
  <dsfr-data-kpi source="sites" value="score_rgaa:max" label="Meilleur RGAA" col="3"></dsfr-data-kpi>
</dsfr-data-kpi-group>

9. Espacement large (gap="lg")

<dsfr-data-kpi-group cols="2" gap="lg">
  <dsfr-data-kpi source="sites" value="score_rgaa:min" label="Plus bas RGAA" color-token="rouge"></dsfr-data-kpi>
  <dsfr-data-kpi source="sites" value="score_rgaa:max" label="Meilleur RGAA" color-token="vert"></dsfr-data-kpi>
</dsfr-data-kpi-group>