Skip to content

Commit 21c8b62

Browse files
HyperLife1119HyperLife1119
authored
feat(module:statistic): support for loading state (#8537)
1 parent 92c586b commit 21c8b62

File tree

6 files changed

+55
-23
lines changed

6 files changed

+55
-23
lines changed

‎components/statistic/demo/basic.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ import { Component } from '@angular/core';
99
</nz-col>
1010
<nz-col [nzSpan]="12">
1111
<nz-statistic [nzValue]="(2019.111 | number: '1.0-2')!" [nzTitle]="'Account Balance (CNY)'"></nz-statistic>
12+
<button nz-button nzType="primary" [style.margin-top.px]="16">Recharge</button>
13+
</nz-col>
14+
<nz-col [nzSpan]="12">
15+
<nz-statistic [nzValue]="(112893 | number: '1.0-2')!" nzTitle="Active Users" nzLoading></nz-statistic>
1216
</nz-col>
1317
</nz-row>
1418
`

‎components/statistic/demo/module‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { NzStatisticModule } from 'ng-zorro-antd/statistic';
1+
import { NzButtonModule } from 'ng-zorro-antd/button';
22
import { NzCardModule } from 'ng-zorro-antd/card';
33
import { NzIconModule } from 'ng-zorro-antd/icon';
4+
import { NzStatisticModule } from 'ng-zorro-antd/statistic';
45

5-
export const moduleList = [ NzStatisticModule, NzCardModule, NzIconModule ];
6+
export const moduleList = [NzStatisticModule, NzCardModule, NzIconModule, NzButtonModule];

‎components/statistic/doc/index.en-US.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic';
2828
| `[nzValue]` | Value | `string \| number` | - |
2929
| `[nzValueStyle]` | Value CSS style | `Object` | - |
3030
| `[nzValueTemplate]` | Custom template to render a number | `TemplateRef<{ $implicit: string \| number }>` | - |
31+
| `[nzLoading]` | Loading status of Statistic | `boolean` | `false` |
3132

3233
### nz-countdown:standalone
3334

‎components/statistic/doc/index.zh-CN.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@ import { NzStatisticModule } from 'ng-zorro-antd/statistic';
2121

2222
### nz-statistic:standalone
2323

24-
| 参数 | 说明 | 类型 | 默认值 |
25-
| ------------------- | -------------- | ---------------------------------------------- | ------ |
26-
| `[nzPrefix]` | 设置数值的前缀 | `string \| TemplateRef<void>` | - |
27-
| `[nzSuffix]` | 设置数值的后缀 | `string \| TemplateRef<void>` | - |
28-
| `[nzTitle]` | 数值的标题 | `string \| TemplateRef<void>` | - |
29-
| `[nzValue]` | 数值内容 | `string \| number` | - |
30-
| `[nzValueStyle]` | 设置数值的样式 | `Object` | - |
31-
| `[nzValueTemplate]` | 自定义数值展示 | `TemplateRef<{ $implicit: string \| number }>` | - |
24+
| 参数 | 说明 | 类型 | 默认值 |
25+
| ------------------- | -------------- | ---------------------------------------------- | ------- |
26+
| `[nzPrefix]` | 设置数值的前缀 | `string \| TemplateRef<void>` | - |
27+
| `[nzSuffix]` | 设置数值的后缀 | `string \| TemplateRef<void>` | - |
28+
| `[nzTitle]` | 数值的标题 | `string \| TemplateRef<void>` | - |
29+
| `[nzValue]` | 数值内容 | `string \| number` | - |
30+
| `[nzValueStyle]` | 设置数值的样式 | `Object` | - |
31+
| `[nzValueTemplate]` | 自定义数值展示 | `TemplateRef<{ $implicit: string \| number }>` | - |
32+
| `[nzLoading]` | 数值是否加载中 | `boolean` | `false` |
3233

3334
### nz-countdown:standalone
3435

‎components/statistic/statistic.component.ts‎

Lines changed: 23 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*/
55

66
import { Direction, Directionality } from '@angular/cdk/bidi';
7-
import { NgIf, NgStyle } from '@angular/common';
7+
import { NgStyle } from '@angular/common';
88
import {
99
ChangeDetectionStrategy,
1010
ChangeDetectorRef,
@@ -14,13 +14,15 @@ import {
1414
OnInit,
1515
Optional,
1616
TemplateRef,
17-
ViewEncapsulation
17+
ViewEncapsulation,
18+
booleanAttribute
1819
} from '@angular/core';
1920
import { Subject } from 'rxjs';
2021
import { takeUntil } from 'rxjs/operators';
2122

2223
import { NzOutletModule } from 'ng-zorro-antd/core/outlet';
2324
import { NgStyleInterface } from 'ng-zorro-antd/core/types';
25+
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
2426

2527
import { NzStatisticNumberComponent } from './statistic-number.component';
2628
import { NzStatisticValueType } from './typings';
@@ -34,21 +36,29 @@ import { NzStatisticValueType } from './typings';
3436
<div class="ant-statistic-title">
3537
<ng-container *nzStringTemplateOutlet="nzTitle">{{ nzTitle }}</ng-container>
3638
</div>
37-
<div class="ant-statistic-content" [ngStyle]="nzValueStyle">
38-
<span *ngIf="nzPrefix" class="ant-statistic-content-prefix">
39-
<ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
40-
</span>
41-
<nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
42-
<span *ngIf="nzSuffix" class="ant-statistic-content-suffix">
43-
<ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
44-
</span>
45-
</div>
39+
@if (nzLoading) {
40+
<nz-skeleton class="ant-statistic-skeleton" [nzParagraph]="false" />
41+
} @else {
42+
<div class="ant-statistic-content" [ngStyle]="nzValueStyle">
43+
@if (nzPrefix) {
44+
<span class="ant-statistic-content-prefix">
45+
<ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
46+
</span>
47+
}
48+
<nz-statistic-number [nzValue]="nzValue" [nzValueTemplate]="nzValueTemplate"></nz-statistic-number>
49+
@if (nzSuffix) {
50+
<span class="ant-statistic-content-suffix">
51+
<ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
52+
</span>
53+
}
54+
</div>
55+
}
4656
`,
4757
host: {
4858
class: 'ant-statistic',
4959
'[class.ant-statistic-rtl]': `dir === 'rtl'`
5060
},
51-
imports: [NzStatisticNumberComponent, NgIf, NzOutletModule, NgStyle],
61+
imports: [NzSkeletonModule, NzStatisticNumberComponent, NzOutletModule, NgStyle],
5262
standalone: true
5363
})
5464
export class NzStatisticComponent implements OnDestroy, OnInit {
@@ -58,6 +68,7 @@ export class NzStatisticComponent implements OnDestroy, OnInit {
5868
@Input() nzValue?: NzStatisticValueType;
5969
@Input() nzValueStyle: NgStyleInterface = {};
6070
@Input() nzValueTemplate?: TemplateRef<{ $implicit: NzStatisticValueType }>;
71+
@Input({ transform: booleanAttribute }) nzLoading: boolean = false;
6172
dir: Direction = 'ltr';
6273

6374
private destroy$ = new Subject<void>();

‎components/statistic/statistic.spec.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,13 @@ describe('nz-statistic', () => {
3535
expect(statisticEl.nativeElement.querySelector('.ant-statistic-content-prefix').innerText).toBe('prefix');
3636
expect(statisticEl.nativeElement.querySelector('.ant-statistic-content-suffix').innerText).toBe('suffix');
3737
});
38+
39+
it('should render skeleton', () => {
40+
expect(statisticEl.nativeElement.querySelector('.ant-statistic-skeleton')).toBeFalsy();
41+
testComponent.loading = true;
42+
fixture.detectChanges();
43+
expect(statisticEl.nativeElement.querySelector('.ant-statistic-skeleton')).toBeTruthy();
44+
});
3845
});
3946

4047
describe('RTL', () => {
@@ -62,13 +69,20 @@ describe('nz-statistic', () => {
6269

6370
@Component({
6471
template: `
65-
<nz-statistic [nzValue]="123.45" [nzTitle]="title" [nzSuffix]="suffix" [nzPrefix]="prefix"></nz-statistic>
72+
<nz-statistic
73+
[nzValue]="123.45"
74+
[nzTitle]="title"
75+
[nzSuffix]="suffix"
76+
[nzPrefix]="prefix"
77+
[nzLoading]="loading"
78+
></nz-statistic>
6679
`
6780
})
6881
export class NzTestStatisticComponent {
6982
title = 'title';
7083
prefix = '';
7184
suffix = '';
85+
loading = false;
7286
}
7387

7488
@Component({

0 commit comments

Comments
 (0)