fix(module:progress): fix circle gradient not sorted (#4178)

* fix(module:progress): fix circle gradient not sorted

components/progress/demo/gradient.ts

@@ -12,7 +12,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
     <nz-progress
       nzType="circle"
       [nzPercent]="90"
-      [nzStrokeColor]="{ '0%': '#108ee9', '100%': '#87d068' }"
+      [nzStrokeColor]="{ '0%': '#108ee9', '50%': '#2db7f5', '100%': '#87d068' }"
     ></nz-progress>
     <nz-progress
       nzType="dashboard"

components/progress/nz-progress-utils.spec.ts

@@ -1,16 +1,18 @@
-import { handleLinearGradient, sortGradient } from './nz-progress-utils';
+import { handleCircleGradient, handleLinearGradient } from './nz-progress-utils';
 
 // https://github.com/ant-design/ant-design/blob/330a952a988a4ae18c201b464c51d5faeb714f7c/components/progress/__tests__/index.test.js#L74-L88.
-describe('util functions', () => {
+describe('progress util functions', () => {
   it('get correct line-gradient', () => {
     expect(handleLinearGradient({ from: 'test', to: 'test' })).toBe('linear-gradient(to right, test, test)');
     expect(handleLinearGradient({})).toBe('linear-gradient(to right, #1890ff, #1890ff)');
     expect(handleLinearGradient({ from: 'test', to: 'test', '0%': 'test' })).toBe('linear-gradient(to right, test 0%)');
   });
 
-  it('sort gradients correctly', () => {
-    expect(sortGradient({ '10%': 'test10', '30%': 'test30', '20%': 'test20' })).toBe(
-      'test10 10%, test20 20%, test30 30%'
-    );
+  it('get correct circle gradient', () => {
+    const gradientOne = handleCircleGradient({ '10%': 'test10', '30%': 'test30', '20%': 'test20' });
+    expect(gradientOne[0].color).toBe('test10');
+    expect(gradientOne[0].offset).toBe('10%');
+    expect(gradientOne[1].color).toBe('test20');
+    expect(gradientOne[1].offset).toBe('20%');
   });
 });

components/progress/nz-progress-utils.ts

@@ -8,34 +8,41 @@
 
 import { NzProgressColorGradient, NzProgressGradientProgress } from './nz-progress.definitions';
 
+function stripPercentToNumber(percent: string): number {
+  return +percent.replace('%', '');
+}
+
 export const sortGradient = (gradients: NzProgressGradientProgress) => {
   let tempArr: Array<{ key: number; value: string }> = [];
-  const keys = Object.keys(gradients);
-
-  for (const key of keys) {
-    if (!gradients.hasOwnProperty(key)) {
-      return;
-    }
 
+  Object.keys(gradients).forEach(key => {
     const value = gradients[key];
-    const formatKey = parseFloat(key.replace(/%/g, ''));
+    const formatKey = stripPercentToNumber(key);
     if (isNaN(formatKey)) {
       return {};
     }
     tempArr.push({
       key: formatKey,
       value
     });
-  }
+  });
 
   tempArr = tempArr.sort((a, b) => a.key - b.key);
-  return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ');
+  return tempArr;
+};
+
+export const handleCircleGradient = (
+  strokeColor: NzProgressGradientProgress
+): Array<{ offset: string; color: string }> => {
+  return sortGradient(strokeColor).map(({ key, value }) => ({ offset: `${key}%`, color: value }));
 };
 
 export const handleLinearGradient = (strokeColor: NzProgressColorGradient) => {
   const { from = '#1890ff', to = '#1890ff', direction = 'to right', ...rest } = strokeColor;
   if (Object.keys(rest).length !== 0) {
-    const sortedGradients = sortGradient(rest as NzProgressGradientProgress);
+    const sortedGradients = sortGradient(rest as NzProgressGradientProgress)
+      .map(({ key, value }) => `${value} ${key}%`)
+      .join(', ');
     return `linear-gradient(${direction}, ${sortedGradients})`;
   }
   return `linear-gradient(${direction}, ${from}, ${to})`;

components/progress/nz-progress.component.html

@@ -51,9 +51,9 @@
                         y1="0%"
                         x2="0%"
                         y2="0%">
-          <stop *ngFor="let i of nzStrokeColor | keyvalue;"
-                [attr.offset]="i.key"
-                [attr.stop-color]="i.value"></stop>
+          <stop *ngFor="let i of circleGradient;"
+                [attr.offset]="i.offset"
+                [attr.stop-color]="i.color"></stop>
         </linearGradient>
       </defs>
       <path class="ant-progress-circle-trail"

components/progress/nz-progress.component.ts

@@ -28,12 +28,13 @@ import {
 
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { handleLinearGradient } from './nz-progress-utils';
+import { handleCircleGradient, handleLinearGradient } from './nz-progress-utils';
 import {
   NzProgressCirclePath,
   NzProgressColorGradient,
   NzProgressFormatter,
   NzProgressGapPositionType,
+  NzProgressGradientProgress,
   NzProgressStatusType,
   NzProgressStrokeColorType,
   NzProgressStrokeLinecapType,
@@ -43,16 +44,9 @@ import {
 let gradientIdSeed = 0;
 
 const statusIconNameMap = new Map([['success', 'check'], ['exception', 'close']]);
-
 const statusColorMap = new Map([['normal', '#108ee9'], ['exception', '#ff5500'], ['success', '#87d068']]);
-
 const defaultFormatter: NzProgressFormatter = (p: number): string => `${p}%`;
 
-export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right';
-export type NzProgressStatusType = 'success' | 'exception' | 'active' | 'normal';
-export type NzProgressTypeType = 'line' | 'circle' | 'dashboard';
-export type NzProgressStrokeLinecapType = 'round' | 'square';
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -91,6 +85,8 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
   /** Paths to rendered in the template. */
   progressCirclePath: NzProgressCirclePath[] = [];
 
+  circleGradient: Array<{ offset: string; color: string }>;
+
   trailPathStyle: NgStyleInterface;
 
   pathString: string;
@@ -260,8 +256,11 @@ export class NzProgressComponent implements OnChanges, OnInit, OnDestroy {
     const isGradient = (this.isGradient = !!color && typeof color !== 'string');
     if (isGradient && !this.isCircleStyle) {
       this.lineGradient = handleLinearGradient(color as NzProgressColorGradient);
+    } else if (isGradient && this.isCircleStyle) {
+      this.circleGradient = handleCircleGradient(this.nzStrokeColor as NzProgressGradientProgress);
     } else {
       this.lineGradient = null;
+      this.circleGradient = [];
     }
   }
 }

components/progress/nz-progress.definitions.ts

@@ -8,20 +8,14 @@
 
 import { NgStyleInterface } from 'ng-zorro-antd/core';
 
-/**
- * @license
- * Copyright Alibaba.com All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
- */
-
 export type NzProgressGapPositionType = 'top' | 'bottom' | 'left' | 'right';
 
 export type NzProgressStatusType = 'success' | 'exception' | 'active' | 'normal';
 
 export type NzProgressTypeType = 'line' | 'circle' | 'dashboard';
 
+export type NzProgressStrokeLinecapType = 'round' | 'square';
+
 export interface NzProgressGradientProgress {
   [percent: string]: string;
 }
@@ -35,8 +29,6 @@ export type NzProgressColorGradient = { direction?: string } & (NzProgressGradie
 
 export type NzProgressStrokeColorType = string | NzProgressColorGradient;
 
-export type NzProgressStrokeLinecapType = 'round' | 'square';
-
 export type NzProgressFormatter = (percent: number) => string;
 
 export interface NzProgressCirclePath {

components/progress/public-api.ts

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-progress.module';
+export { NzProgressModule } from './nz-progress.module';
 export { NzProgressComponent } from './nz-progress.component';
 export * from './nz-progress.definitions';