# Cartes d'indicateurs

Une carte d'indicateur énonce un nombre. Elle agrège les enregistrements que lie sa `dataSource` et met le résultat en forme.

| Propriété      | Description                                                                                                                        |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `label`        | Le nom de la mesure.                                                                                                               |
| `icon`         | Icône dessinée à côté de la valeur.                                                                                                |
| `dataSource`   | Les enregistrements agrégés. Voir [Liaison de données](/fr/docs/pages-data-binding).                                               |
| `kpiAggregate` | `{ function, field }`. `function` est requise ; `field` est omis pour `count`.                                                     |
| `kpiFormat`    | `{ type, options }`, où `type` vaut `number`, `currency`, `percentage`, `compact` ou `bytes`.                                      |
| `trend`        | La comparaison avec une période précédente.                                                                                        |
| `thresholds`   | Entrées `{ value, color }` qui recolorent la carte une fois une valeur franchie, parmi `red`, `green`, `yellow`, `blue` et `gray`. |
| `sparkline`    | La courbe miniature tracée sous la valeur.                                                                                         |

```yaml
tables:
  - name: orders
    fields:
      - { name: total, type: currency, currency: EUR }
      - { name: created_at, type: created-at }
pages:
  - name: Revenue
    path: /revenue
    components:
      - type: kpi
        label: Revenue this month
        icon: banknote
        dataSource: { table: orders }
        kpiAggregate: { function: sum, field: total }
        kpiFormat: { type: currency, options: { currency: EUR } }
        trend: { comparisonPeriod: previousMonth, direction: up, changePercent: 12.4, color: green }
        sparkline: { field: total, groupBy: created_at, interval: day, days: 30 }
```

## `trend`

`comparisonPeriod`, `direction` et `changePercent` sont tous trois requis dès que `trend` est présent. `comparisonPeriod` vaut `previousDay`, `previousWeek`, `previousMonth`, `previousQuarter` ou `previousYear` ; `direction` vaut `up`, `down` ou `flat` ; `changePercent` est la variation exprimée en nombre ; et `color` vaut `green`, `red`, `yellow` ou `gray`.

**`direction` et `color` sont indépendants à dessein.** Un chiffre d'affaires en hausse est vert ; une attrition en hausse est rouge. Sovrium ne devinera pas lesquelles de vos mesures s'améliorent en montant : énoncez la couleur que vous voulez dire.

## `sparkline`

Les quatre propriétés sont requises dès que `sparkline` est présent : `field` est tracé le long de la ligne, `groupBy` regroupe les points, `interval` vaut `day`, `week` ou `month`, et `days` dit jusqu'où la ligne remonte.

## Pages connexes

- [Liaison de données](/fr/docs/pages-data-binding) — la `dataSource` que la carte agrège.
- [Graphiques](/fr/docs/data-components-charts) — la même mesure, tracée dans le temps.