Dataviz · piloté par store

ScoreCard

Documenté

Carte d’indicateur dérivée d’un DashboardStore : la mesure est agrégée sur les lignes filtrées, avec objectif, étincelle et delta optionnels. Ce n’est pas le ScoreCard natif (carte de notation) : l’adaptateur compose KpiCard.

Disponibilité par framework

Framework	Forme
`Svelte`	Composant ScoreCard (démo live ci-dessous).
`React`	Composant ScoreCard (démo live ci-dessous, className au lieu de class).
`Vue`	Composant ScoreCard (démo live ci-dessous).
`Angular`	Composant st-dataviz-score-card (démo live ci-dessous).

Exemples

Trois mois de revenu agrégés en une carte. Pour la carte de notation (étoiles, score sur cinq), voir la page native.

Revenu trimestriel

Voir le code (Svelte)

<div class="chart-wrapper">
  <ScoreCard
    store={store}
    viewId="sc"
    measure="revenue"
    label="Revenu trimestriel"
  />
</div>

ScoreCard natif (notation) · KpiCard (rendu sous-jacent)

Amorce du store

import { createDashboardStore } from "@sentropic/dataviz-core";
import { ScoreCard } from "@sentropic/dataviz-svelte";

const store = createDashboardStore({
  model: {
    dimensions: [{ id: "month", label: "Month", type: "discrete" }],
    measures: [{ id: "revenue", label: "Revenue", aggregation: "sum" }]
  },
  data: [
    { month: "Jan", revenue: 120 },
    { month: "Feb", revenue: 150 },
    { month: "Mar", revenue: 210 }
  ]
});

API du composant

Prop	Type	Défaut	Description
`store`	`DashboardStore`	requis	Store partagé (filtres croisés appliqués pour viewId).
`measure`	`string`	requis	Mesure agrégée en valeur principale.
`viewId`	`string`	non défini	Identifiant de vue (cross-filter).
`label`	`string`	libellé de la mesure	Libellé affiché de la carte.
`goal`	`number`	non défini	Objectif : active l’affichage de progression quand défini.
`sparklineDimension`	`string`	non défini	Dimension alimentant l’étincelle inline (ex. month).
`comparisonData`	`Row[]`	non défini	Lignes de période précédente pour le calcul du delta.
`format` / `deltaFormat`	`KpiCardFormat / KpiCardDeltaFormat`	`"percent"` pour deltaFormat	Formats de valeur et de delta (KpiCard).
`unit` / `currency` / `locale`	`string`	non défini	Habillage de la valeur (KpiCard).
`size` / `tone`	`KpiCardSize / KpiCardTone`	non défini	Taille et tonalité (KpiCard).
`class`	`string`	non défini	Classe transmise à KpiCard (className côté React).

Faux ami assumé : l’homonyme natif ScoreCard (title, score, stars, max, unit, type) est une carte de notation sans store ; cette page documente l’adaptateur dataviz, qui rend KpiCard. Tokens : ceux de KpiCard.