# Statistic

> KPI card — label + big number + optional prefix / suffix + delta.

Source: https://ngwr.dev/reference/components/statistic

## Basic

```angular-html
<wr-statistic label="Active users" [value]="12345" />
<wr-statistic label="Revenue" [value]="9512" prefix="$" [delta]="12.4" />
```

## Dashboard grid

`<wr-statistic-group>` lays cards out in a grid that reflows on its OWN width — a container query, not a viewport breakpoint — so it adapts inside any column, card, or split pane. Drag the handle at the bottom-right to watch the columns step down. `min` sets the narrowest column; `columns` caps how many sit in a row.

```angular-html
<wr-statistic-group [columns]="4" min="11rem">
  <wr-statistic label="Active users" [value]="12345" />
  <wr-statistic label="Revenue" [value]="9512" prefix="$" [delta]="12.4" />
  <wr-statistic label="Churn" [value]="1.8" suffix="%" [delta]="-0.4" />
  <wr-statistic label="Sessions" [value]="48210" />
</wr-statistic-group>
```

## Count up

A live dashboard — values randomize on a timer (~2s) and tween from their previous value to the new one (~700ms ease-out). The delta swings positive/negative so the up/down indicator flips green/red. Honours `precision`, opts out via `[animate]='false'`, and respects `prefers-reduced-motion`.

```angular-ts
<wr-statistic label="Revenue" prefix="$" [value]="revenue()" [precision]="2" [delta]="delta()" />
<wr-statistic label="Sessions" [value]="sessions()" />

// numeric values count up from their previous value on every change.
protected readonly revenue = signal(9512.4);
protected readonly sessions = signal(48210);
protected readonly delta = signal(12.4);

constructor() {
  // Live dashboard — randomize on a timer so the values keep counting.
  const id = setInterval(() => {
    this.revenue.set(Math.round(Math.random() * 5_000_00) / 100);
    this.sessions.set(Math.floor(Math.random() * 90_000));
    this.delta.set(Math.round((Math.random() * 40 - 20) * 10) / 10);
  }, 2000);
  inject(DestroyRef).onDestroy(() => clearInterval(id));
}
```

## Countdown

`<wr-statistic-countdown>` ticks down to a target date. Format tokens: `D/H/m/s` (doubled for zero-padded width 2), plus `SSS` for milliseconds.

```angular-ts
<wr-statistic-countdown
  label="Launch in"
  [target]="launchDate"
  format="D days HH:mm:ss"
  (countdownEnd)="onLive()"
/>

protected readonly launchDate = new Date(Date.now() + 1000 * 60 * 60 * 36);
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `<wr-statistic>` | KPI card. | `component` | `—` |
| `label` | Label above the value. | `string` | `''` |
| `value` | Main number or string shown. | `number \| string \| null` | `null` |
| `prefix` | Leading glyph or symbol. | `string` | `''` |
| `suffix` | Trailing glyph or unit. | `string` | `''` |
| `precision` | Fixed decimals for numeric values. | `number` | `0` |
| `animate` | Count up to a new numeric value (off for strings / reduced motion). | `boolean` | `true` |
| `duration` | Count-up duration in ms. | `number` | `700` |
| `delta` | Change vs previous period. | `number \| null` | `null` |
| `deltaSuffix` | Unit appended to the delta. Falls back to the `statistic.deltaSuffix` catalog key. | `string \| null` | `null` |
| `<wr-statistic-group>` | Responsive dashboard grid — reflows on its own width, not the viewport. | `component` | `—` |
| `min` | Minimum column width before the grid reflows to fewer columns. | `string` | `'12rem'` |
| `columns` | Cap on columns for a wide container (0 = uncapped). | `number` | `0` |
| `<wr-statistic-countdown>` | Live countdown variant. | `component` | `—` |
| `target`required | Date or timestamp to count down to. | `Date \| string \| number` | — |
| `label` | Label above the value. | `string` | `''` |
| `format` | Format string for the remaining time. | `string` | `'HH:mm:ss'` |
| `endText` | Text shown once it reaches zero. | `string \| null` | `null` |
| `tickMs` | Tick interval in milliseconds. | `number` | `1000` |
| `(countdownEnd)` | Emits once when the target time is reached. | `void` | `—` |

## CSS variables

Custom properties `ngwr/statistic` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-statistic-group-gap` | `1.5rem` | `.wr-statistic-group` +1 variant override |