dsfr-data-kpi - Composants

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

Attributs

Attribut	Type	Description
`source`	String	ID du `<dsfr-data-source>` (requis)
`valeur`	String	Expression de calcul : `"champ"`, `"avg:champ"`, `"count:champ:valeur"`
`label`	String	Libelle affiche sous la valeur
`format`	String	Format d'affichage (defaut : `nombre`)
`icone`	String	Classe d'icone Remix Icon (ex: `ri-global-line`)
`couleur`	String	Couleur forcee : `vert`, `orange`, `rouge`, `bleu`
`seuil-vert`	Number	Seuil au-dessus duquel la couleur est verte
`seuil-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>`

dsfr-data-kpi-group - Attributs

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

Expressions de calcul

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

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"
  valeur="total"
  label="Sites suivis"
  icone="ri-global-line"
  format="nombre">
</dsfr-data-kpi>

2. KPI avec moyenne et seuils

<dsfr-data-kpi
  source="sites"
  valeur="avg:score_rgaa"
  label="Score RGAA moyen"
  format="pourcentage"
  seuil-vert="80"
  seuil-orange="50">
</dsfr-data-kpi>

3. KPI avec comptage conditionnel

<dsfr-data-kpi
  source="sites"
  valeur="count:statut:actif"
  label="Sites actifs"
  icone="ri-checkbox-circle-line"
  couleur="vert">
</dsfr-data-kpi>

4. KPI avec min/max

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

5. Tableau de bord complet (CSS manuel)

Grouper des KPIs avec dsfr-data-kpi-group

6. Colonnes egales (cols="4")

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

7. Largeurs personnalisees (col)

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

8. Espacement large (gap="lg")

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