feat(module:statistic): add statistic and countdown component (#2760)

* feat(module:statistic): add statistic and countdown component

* fix: time range handle undefined value

components/components.less

@@ -38,6 +38,7 @@
 @import "./skeleton/style/index.less";
 @import "./slider/style/index.less";
 @import "./spin/style/index.less";
+@import "./statistic/style/index.less";
 @import "./steps/style/index.less";
 @import "./switch/style/index.less";
 @import "./table/style/index.less";

components/core/util/public-api.ts

@@ -2,5 +2,7 @@ export * from './check';
 export * from './convert';
 export * from './getMentions';
 export * from './nz-global-monitor';
+export * from './string';
 export * from './textarea-caret-position';
 export * from './throttleByAnimationFrame';
+export * from './time';

components/core/util/string.ts

@@ -0,0 +1,20 @@
+/**
+ * Much like lodash.
+ */
+export function padStart(toPad: string, length: number, element: string): string {
+  if (toPad.length > length) {
+    return toPad;
+  }
+
+  const joined = `${getRepeatedElement(length, element)}${toPad}`;
+  return joined.slice(joined.length - length, joined.length);
+}
+
+export function padEnd(toPad: string, length: number, element: string): string {
+  const joined = `${toPad}${getRepeatedElement(length, element)}`;
+  return joined.slice(0, length);
+}
+
+export function getRepeatedElement(length: number, element: string): string {
+  return Array(length).fill(element).join('');
+}

components/core/util/time.ts

@@ -0,0 +1,9 @@
+export const timeUnits: Array<[ string, number ]> = [
+  [ 'Y', 1000 * 60 * 60 * 24 * 365 ], // years
+  [ 'M', 1000 * 60 * 60 * 24 * 30 ], // months
+  [ 'D', 1000 * 60 * 60 * 24 ], // days
+  [ 'H', 1000 * 60 * 60 ], // hours
+  [ 'm', 1000 * 60 ], // minutes
+  [ 's', 1000 ], // seconds
+  [ 'S', 1 ] // million seconds
+];

components/icon/nz-icon.service.ts

@@ -45,11 +45,8 @@ export interface NzIconfontOption {
 }
 
 export const NZ_ICONS = new InjectionToken('nz_icons');
-
 export const NZ_ICON_DEFAULT_TWOTONE_COLOR = new InjectionToken('nz_icon_default_twotone_color');
-
 export const DEFAULT_TWOTONE_COLOR = '#1890ff';
-
 export const NZ_ICONS_USED_BY_ZORRO: IconDefinition[] = [
   BarsOutline,
   CalendarOutline,

components/ng-zorro-antd.module.ts

@@ -45,6 +45,7 @@ import { NzSelectModule } from './select/nz-select.module';
 import { NzSkeletonModule } from './skeleton/nz-skeleton.module';
 import { NzSliderModule } from './slider/nz-slider.module';
 import { NzSpinModule } from './spin/nz-spin.module';
+import { NzStatisticModule } from './statistic/nz-statistic.module';
 import { NzStepsModule } from './steps/nz-steps.module';
 import { NzSwitchModule } from './switch/nz-switch.module';
 import { NzTableModule } from './table/nz-table.module';
@@ -94,6 +95,7 @@ export * from './radio';
 export * from './rate';
 export * from './select';
 export * from './spin';
+export * from './statistic';
 export * from './steps';
 export * from './switch';
 export * from './table';
@@ -178,6 +180,7 @@ export * from './core/util';
     NzTimePickerModule,
     NzWaveModule,
     NzSkeletonModule,
+    NzStatisticModule,
     NzEmptyModule
   ]
 })

components/spin/demo/basic.md

@@ -2,7 +2,7 @@
 order: 0
 title: 
   zh-CN: 基本用法
-  en-US: basic Usage
+  en-US: Basic Usage
 ---
 
 ## zh-CN

components/statistic/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title: 
+  zh-CN: 基本用法
+  en-US: Basic Usage
+---
+
+## zh-CN
+
+简单的展示。
+
+## en-US
+
+Simplest Usage.

components/statistic/demo/basic.ts

@@ -0,0 +1,17 @@
+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 {
+}

components/statistic/demo/card.md

@@ -0,0 +1,14 @@
+---
+order: 2
+title: 
+  zh-CN: 在卡片中使用
+  en-US: In Card
+---
+
+## zh-CN
+
+在卡片中展示统计数值。
+
+## en-US
+
+Display statistic data in Card.

components/statistic/demo/card.ts

@@ -0,0 +1,37 @@
+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 type="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 type="arrow-down"></i></ng-template>
+          </nz-card>
+        </nz-col>
+      </nz-row>
+    </div>
+  `
+})
+export class NzDemoStatisticCardComponent {
+}

components/statistic/demo/countdown.md

@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 倒计时
+  en-US: Countdown
+---
+
+## zh-CN
+
+倒计时组件。
+
+## en-US
+
+Countdown component.

components/statistic/demo/countdown.ts

@@ -0,0 +1,21 @@
+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;
+}

components/statistic/demo/unit.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title: 
+  zh-CN: 单位
+  en-US: Unit
+---
+
+## zh-CN
+
+通过前缀和后缀添加单位。
+
+## en-US
+
+Add unit through `nzPrefix` and `nzSuffix`.

components/statistic/demo/unit.ts

@@ -0,0 +1,18 @@
+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 type="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 {
+}

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

@@ -0,0 +1,48 @@
+---
+category: Components
+type: Data Display
+title: Statistic
+---
+
+Display statistic number.
+
+## When To Use
+
+- When want to highlight some data.
+- When want to display statistic data with description.
+
+## API
+
+### nz-statistic
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `[nzPrefix]` | Prefix of Value | `string｜TemplateRef<void>` | - |
+| `[nzSuffix]` | Suffix of Value | `string｜TemplateRef<void>` | - |
+| `[nzTitle]` | Title | `string｜TemplateRef<void>` | - |
+| `[nzValue]` | Value | `string｜number` | - |
+| `[nzValueStyle]` | Value CSS style | `Object` | - |
+| `[nzValueTemplate]` | Custom template to render a number | `TemplateRef<{ $implicit: string｜number }>` | - |
+
+### nz-countdown
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `[nzFormat]` | Format string  | `string` | `"HH:mm:ss"` |
+| `[nzPrefix]` | Prefix of Value | `string｜TemplateRef<void>` | - |
+| `[nzSuffix]` | Suffix of Value | `string｜TemplateRef<void>` | - |
+| `[nzTitle]` | Title | `string｜TemplateRef<void>` | - |
+| `[nzValue]` | Target time in timestamp form | `string｜number` | - |
+| `[nzValueTemplate]` | Custom template to render a time | `TemplateRef<{ $implicit: number }>` | - |
+
+### nzFormat
+
+| Token | Description |
+| -------- | ----------- |
+| `Y` | Year |
+| `M` | Month |
+| `D` | Date |
+| `H` | Hour |
+| `m` | Minute |
+| `s` | Second |
+| `S` | Millisecond |

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

@@ -0,0 +1,49 @@
+---
+category: Components
+title: Statistic
+subtitle: 统计
+type: Data Display
+---
+
+展示统计数字。
+
+## 何时使用
+
+- 当需要突出某个或某组数字时。
+- 当需要展示带描述的统计类数据时使用。
+
+## API
+
+### nz-statistic
+
+| 参数 | 说明 | 类型 | 默认值 |
+| -------- | ----------- | ---- | ------- |
+| `[nzPrefix]` | 设置数值的前缀 | `string｜TemplateRef<void>` | - |
+| `[nzSuffix]` | 设置数值的后缀 | `string｜TemplateRef<void>` | - |
+| `[nzTitle]` | 数值的标题 | `string｜TemplateRef<void>` | - |
+| `[nzValue]` | 数值内容 | `string｜number` | - |
+| `[nzValueStyle]` | 设置数值的样式 | `Object` | - |
+| `[nzValueTemplate]` | 自定义数值展示 | `TemplateRef<{ $implicit: string｜number }>` | - |
+
+### nz-countdown
+
+| 参数 | 说明 | 类型 | 默认值 |
+| -------- | ----------- | ---- | ------- |
+| `[nzFormat]` | 格式化倒计时展示 | `string` | `"HH:mm:ss"` |
+| `[nzPrefix]` | 设置数值的前缀 | `string｜TemplateRef<void>` | - |
+| `[nzSuffix]` | 设置数值的后缀 | `string｜TemplateRef<void>` | - |
+| `[nzTitle]` | 数值的标题 | `string｜TemplateRef<void>` | - |
+| `[nzValue]` | 时间戳格式的目标时间 | `string｜number` | - |
+| `[nzValueTemplate]` | 自定义时间展示 | `TemplateRef<{ $implicit: number }>` | - |
+
+### nzFormat
+
+| 占位符 | 描述 |
+| -------- | ----------- |
+| `Y` | 年 |
+| `M` | 月 |
+| `D` | 日 |
+| `H` | 时 |
+| `m` | 分 |
+| `s` | 秒 |
+| `S` | 毫秒 |

components/statistic/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

components/statistic/nz-countdown.component.html

@@ -0,0 +1,10 @@
+<nz-statistic
+  [nzValue]="diff"
+  [nzValueStyle]="nzValueStyle"
+  [nzValueTemplate]="nzValueTemplate || countDownTpl"
+  [nzTitle]="nzTitle"
+  [nzPrefix]="nzPrefix"
+  [nzSuffix]="nzSuffix">
+</nz-statistic>
+
+<ng-template #countDownTpl>{{ diff | nzTimeRange: nzFormat }}</ng-template>