Statistic

import { Component } from '@angular/core';
import { WrStatistic, WrStatisticCountdown, WrStatisticGroup } from 'ngwr/statistic';

@Component({ imports: [WrStatistic, WrStatisticCountdown, WrStatisticGroup] })
export class MyComponent {}

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

<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" [precision]="1" suffix="%" [delta]="-0.4" />
  <wr-statistic label="Sessions" [value]="48210" />
</wr-statistic-group>

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

protected readonly revenue = signal(9512.4);
protected readonly sessions = signal(48210);
protected readonly delta = signal(12.4);

constructor() {
  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));
}

<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);