Composant · Données

KpiCard

Stable

Carte indicateur clé (KPI) : affiche une valeur principale, un delta de tendance (hausse / baisse / stable) avec flèche colorée, une unité optionnelle et un mini-graphique sparkline. La couleur de la bordure gauche suit la palette catégorielle du thème.

Exemples

Trois variantes : revenu avec sparkline et delta positif, taux en pourcentage avec delta négatif, et compteur de transactions avec sparkline.

Indicateurs de performance

Revenu mensuel

48,200

Taux de conversion

7.2%

Transactions

1,240

Voir le code (Svelte)

<div class="kpi-demo-row">
  <KpiCard
    label="Revenu mensuel"
    value={48200}
    delta={0.083}
    deltaFormat="percent"
    tone="category1"
    sparkline={[32000,35000,38000,42000,45000,48200]}
  />
  <KpiCard
    label="Taux de conversion"
    value={0.072}
    format="percent"
    delta={-0.005}
    deltaFormat="percent"
    tone="category3"
  />
  <KpiCard
    label="Transactions"
    value={1240}
    delta={94}
    deltaFormat="absolute"
    tone="category5"
    sparkline={[900,980,1050,1100,1180,1240]}
  />
</div>

Mise en forme conditionnelle

La prop decoration ({ intent, icon }) teinte la carte avec un token feedback accessible (mêmes que Badge / Alert) et rend une icône lucide. L'intention est aussi exposée dans l'aria-label : la couleur n'est jamais la seule indication. Le moteur de seuils vit côté dataviz-core ; le DS ne fait que rendre la sortie.

Cartes décorées

Marge brute

41.2%

Taux d'erreur

3.8%

Latence p95

480 ms

Voir le code (Svelte)

<div class="kpi-demo-row">
  <KpiCard
    label="Marge brute"
    value={0.412}
    format="percent"
    delta={0.031}
    decoration={{"intent":"positive","icon":"trending-up"}}
  />
  <KpiCard
    label="Taux d'erreur"
    value={0.038}
    format="percent"
    delta={0.012}
    decoration={{"intent":"negative","icon":"trending-down"}}
  />
  <KpiCard
    label="Latence p95"
    value={480}
    unit="ms"
    decoration={{"intent":"warning","icon":"triangle-alert"}}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`value`	`number \| string`	requis	Valeur principale affichée en grand.
`label`	`string`	requis	Étiquette de l'indicateur.
`delta`	`number`	–	Variation par rapport à la période précédente.
`deltaFormat`	`"percent" \| "absolute"`	`"percent"`	Format d'affichage du delta.
`trend`	`"up" \| "down" \| "flat"`	–	Tendance explicite (déduite du signe delta si absente).
`format`	`"number" \| "currency" \| "percent"`	`"number"`	Format de la valeur principale (Intl.NumberFormat).
`unit`	`string`	–	Suffixe d'unité (ex. ms, €/mois).
`currency`	`string`	`"EUR"`	Code devise ISO 4217 pour format currency.
`sparkline`	`number[]`	–	Série de valeurs pour le mini-graphique.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Taille de la carte.
`tone`	`KpiCardTone`	–	Couleur catégorielle pour l'accent de bordure gauche (category1…8).
`decoration`	`CellDecoration`	–	Mise en forme conditionnelle : { intent, icon } → fond teinté accessible (token feedback) + icône lucide. Intent exposé dans l'aria-label.

Tokens CSS

Variable CSS	Description
`--st-component-card-background`	Fond de la carte (défaut : surface-raised).
`--st-component-card-border`	Couleur de la bordure (défaut : border-subtle).
`--st-component-card-shadow`	Ombre portée de la carte.
`--st-semantic-data-category1…8`	Palette catégorielle pour l'accent de bordure.
`--st-semantic-feedback-success`	Couleur du delta positif (tendance up).
`--st-semantic-feedback-error`	Couleur du delta négatif (tendance down).