Statistic

Display statistic number.

When To Use#

  • When want to highlight some data.
  • When want to display statistic data with description.

Import this Component Individually#

You can get more detail here.

import { NzStatisticModule } from 'ng-zorro-antd/statistic';

Examples

Active Users
1,949,101
Account Balance (CNY)
2,019.11

Simplest Usage.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-basic',
  template: `
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="1949101 | number" [nzTitle]="'Active Users'"></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="2019.111 | number: '1.0-2'" [nzTitle]="'Account Balance (CNY)'"></nz-statistic>
      </nz-col>
    </nz-row>
  `
})
export class NzDemoStatisticBasicComponent {}
Active
11.28%
Idle
9.3%

Display statistic data in Card.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-card',
  template: `
    <div style="background: #ECECEC; padding: 30px;">
      <nz-row [nzGutter]="16">
        <nz-col [nzSpan]="12">
          <nz-card>
            <nz-statistic
              [nzValue]="11.28 | number: '1.0-2'"
              [nzTitle]="'Active'"
              [nzPrefix]="prefixTplOne"
              [nzSuffix]="'%'"
              [nzValueStyle]="{ color: '#3F8600' }"
            >
            </nz-statistic>
            <ng-template #prefixTplOne><i nz-icon nzType="arrow-up"></i></ng-template>
          </nz-card>
        </nz-col>
        <nz-col [nzSpan]="12">
          <nz-card>
            <nz-statistic
              [nzValue]="9.3 | number: '1.0-2'"
              [nzTitle]="'Idle'"
              [nzPrefix]="prefixTplTwo"
              [nzSuffix]="'%'"
              [nzValueStyle]="{ color: '#CF1322' }"
            >
            </nz-statistic>
            <ng-template #prefixTplTwo><i nz-icon nzType="arrow-down"></i></ng-template>
          </nz-card>
        </nz-col>
      </nz-row>
    </div>
  `
})
export class NzDemoStatisticCardComponent {}
Feedback
1,128
Unmerged
93/ 100

Add unit through nzPrefix and nzSuffix.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-unit',
  template: `
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="1128 | number" [nzTitle]="'Feedback'" [nzPrefix]="prefixTpl"></nz-statistic>
        <ng-template #prefixTpl><i nz-icon nzType="like"></i></ng-template>
      </nz-col>
      <nz-col [nzSpan]="12">
        <nz-statistic [nzValue]="93" [nzTitle]="'Unmerged'" [nzSuffix]="'/ 100'"></nz-statistic>
      </nz-col>
    </nz-row>
  `
})
export class NzDemoStatisticUnitComponent {}
Countdown
00:00:00
Million Seconds
00:00:00:000
Day Level
0 天 0 时 0 分 0 秒

Countdown component.

expand codeexpand code
import { Component } from '@angular/core';

@Component({
  selector: 'nz-demo-statistic-countdown',
  template: `
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="12">
        <nz-countdown [nzValue]="deadline" [nzTitle]="'Countdown'"></nz-countdown>
      </nz-col>
      <nz-col [nzSpan]="12">
        <nz-countdown [nzValue]="deadline" [nzTitle]="'Million Seconds'" [nzFormat]="'HH:mm:ss:SSS'"></nz-countdown>
      </nz-col>
      <nz-col [nzSpan]="24" style="margin-top: 32px;">
        <nz-countdown [nzValue]="deadline" [nzTitle]="'Day Level'" [nzFormat]="'D 天 H 时 m 分 s 秒'"></nz-countdown>
      </nz-col>
    </nz-row>
  `
})
export class NzDemoStatisticCountdownComponent {
  deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30;
}

API#

nz-statistic#

PropertyDescriptionTypeDefault
[nzPrefix]Prefix of Valuestring | TemplateRef<void>-
[nzSuffix]Suffix of Valuestring | TemplateRef<void>-
[nzTitle]Titlestring | TemplateRef<void>-
[nzValue]Valuestring | number-
[nzValueStyle]Value CSS styleObject-
[nzValueTemplate]Custom template to render a numberTemplateRef<{ $implicit: string | number }>-

nz-countdown#

PropertyDescriptionTypeDefault
[nzFormat]Format stringstring"HH:mm:ss"
[nzPrefix]Prefix of Valuestring | TemplateRef<void>-
[nzSuffix]Suffix of Valuestring | TemplateRef<void>-
[nzTitle]Titlestring | TemplateRef<void>-
[nzValue]Target time in timestamp formstring | number-
[nzValueTemplate]Custom template to render a timeTemplateRef<{ $implicit: number }>-

nzFormat#

TokenDescription
YYear
MMonth
DDate
HHour
mMinute
sSecond
SMillisecond