@kit-ng-ui/statistic

Large numeric readouts for Kit UI dashboards. Mirrors ant-design's <Statistic>.

Install

pnpm add @kit-ng-ui/statistic @kit-ng-ui/core

Styles

@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/statistic/styles' as statistic;

Use

import { KitStatisticComponent, KitCountdownComponent } from '@kit-ng-ui/statistic';

@Component({
  standalone: true,
  imports: [KitStatisticComponent, KitCountdownComponent],
  template: `
    <kit-statistic title="Active users" [value]="112893" />
    <kit-statistic title="Revenue" prefix="$" suffix="M" [value]="3.482" [precision]="2" />

    <!-- countdown to a date -->
    <kit-countdown
      title="Live in"
      [value]="releaseDate"
      format="HH:mm:ss"
      (finish)="onLive()"
    />
  `,
})
export class Demo {
  releaseDate = Date.now() + 60 * 60 * 1000;
}

API — <kit-statistic>

| Input | Type | Default | Description | | ------------------ | ----------------- | ------- | -------------------------------------------------------- | | value | number \| string| 0 | Number (auto-formatted) or pre-formatted string (passthrough). | | title | string | '' | Caption above the value. | | prefix | string | '' | Inline decoration before the value. | | suffix | string | '' | Inline decoration after the value. | | precision | number | — | Decimal places. | | groupSeparator | string | ',' | Thousands separator. | | decimalSeparator | string | '.' | Decimal separator. | | valueStyle | string \| null | null | Inline CSS applied to the content row. |

Project content into [stat-prefix] / [stat-suffix] for icons or richer decorations.

API — <kit-countdown>

| Input | Type | Default | Description | | -------- | ------------------------------- | ------------- | ------------------------------------------ | | value | string \| number \| Date | 0 | Target time. Number is treated as epoch ms.| | format | string | 'HH:mm:ss' | Template (tokens: D, HH, mm, ss, SSS). | | title | string | '' | Caption. | | prefix | string | '' | | | suffix | string | '' | |

| Output | Type | Description | | -------- | ------- | -------------------------------------------- | | finish | void | Fires once when the countdown reaches zero. |