From c15b9c20830ca8ff7492001cbad95a411dca81fd Mon Sep 17 00:00:00 2001
From: ai-qing-hai <65594180+ai-qing-hai@users.noreply.github.com>
Date: Thu, 30 Jun 2022 09:50:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(progress):=20=E8=BF=B7=E4=BD=A0=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E6=9D=A1=E9=87=8D=E6=96=B0=E4=BF=AE=E6=94=B9=20(#3268?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: ai-qing-hai <wb-xcf804241@antgroup.com>
---
 __tests__/unit/plots/progress/index-spec.ts   | 24 ++++++++--------
 __tests__/unit/plots/progress/utils-spec.ts   | 28 +++++++++----------
 .../unit/plots/ring-progress/index-spec.ts    | 26 ++++++++---------
 src/plots/progress/adaptor.ts                 |  3 +-
 src/plots/progress/utils.ts                   |  5 +++-
 5 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/__tests__/unit/plots/progress/index-spec.ts b/__tests__/unit/plots/progress/index-spec.ts
index 7c18000d57..ae94ddc339 100644
--- a/__tests__/unit/plots/progress/index-spec.ts
+++ b/__tests__/unit/plots/progress/index-spec.ts
@@ -16,7 +16,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
     expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
     expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
 
     progress.update({
@@ -27,7 +27,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
     expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
     expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
+    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
 
     progress.destroy();
@@ -47,7 +47,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
     expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
     expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
 
     progress.update({
@@ -58,7 +58,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
     expect(progress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
     expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');
 
     progress.destroy();
@@ -85,13 +85,13 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
     expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
     expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
     expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
 
-    const progressStyle = ({ percent, type }) => {
+    const progressStyle = ({ current, percent, type }) => {
       if (type === 'current') {
         return percent > 0.5
           ? {
@@ -105,7 +105,7 @@ describe('progress', () => {
               lineDash: [4, 4],
             };
       } else if (type === 'target') {
-        return percent >= 0.5
+        return percent - current >= 0.5
           ? {
               stroke: '#654321',
               lineWidth: 4,
@@ -130,7 +130,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
     expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
     expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
     expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
@@ -148,7 +148,7 @@ describe('progress', () => {
     expect(progress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
     expect(progress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
     expect(progress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
+    expect(progress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(progress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
     expect(progress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
     expect(progress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
@@ -222,14 +222,14 @@ describe('progress', () => {
 
     progress.render();
 
-    expect(progress.chart.getData()).toEqual([
+    expect(progress.chart.getData()).toMatchObject([
       {
         type: 'current',
         percent: 1,
       },
       {
         type: 'target',
-        percent: 0,
+        percent: 1,
       },
     ]);
 
@@ -238,7 +238,7 @@ describe('progress', () => {
       percent: -1.65,
     });
 
-    expect(progress.chart.getData()).toEqual([
+    expect(progress.chart.getData()).toMatchObject([
       {
         type: 'current',
         percent: 0,
diff --git a/__tests__/unit/plots/progress/utils-spec.ts b/__tests__/unit/plots/progress/utils-spec.ts
index 35b9285b80..35639114a3 100644
--- a/__tests__/unit/plots/progress/utils-spec.ts
+++ b/__tests__/unit/plots/progress/utils-spec.ts
@@ -3,38 +3,38 @@ import { getProgressData } from '../../../../src/plots/progress/utils';
 describe('getProgressData', () => {
   it('getProgressData', () => {
     expect(getProgressData(0)).toEqual([
-      { type: 'current', percent: 0 },
-      { type: 'target', percent: 1 },
+      { current: '0', type: 'current', percent: 0 },
+      { current: '0', type: 'target', percent: 1 },
     ]);
 
     expect(getProgressData(1)).toEqual([
-      { type: 'current', percent: 1 },
-      { type: 'target', percent: 0 },
+      { current: '1', type: 'current', percent: 1 },
+      { current: '1', type: 'target', percent: 1 },
     ]);
 
     expect(getProgressData(0.4)).toEqual([
-      { type: 'current', percent: 0.4 },
-      { type: 'target', percent: 0.6 },
+      { current: '0.4', type: 'current', percent: 0.4 },
+      { current: '0.4', type: 'target', percent: 1 },
     ]);
 
     expect(getProgressData(-1)).toEqual([
-      { type: 'current', percent: 0 },
-      { type: 'target', percent: 1 },
+      { current: '0', type: 'current', percent: 0 },
+      { current: '0', type: 'target', percent: 1 },
     ]);
 
     expect(getProgressData(2)).toEqual([
-      { type: 'current', percent: 1 },
-      { type: 'target', percent: 0 },
+      { current: '1', type: 'current', percent: 1 },
+      { current: '1', type: 'target', percent: 1 },
     ]);
 
     expect(getProgressData(NaN)).toEqual([
-      { type: 'current', percent: 0 },
-      { type: 'target', percent: 1 },
+      { current: '0', type: 'current', percent: 0 },
+      { current: '0', type: 'target', percent: 1 },
     ]);
 
     expect(getProgressData(null)).toEqual([
-      { type: 'current', percent: 0 },
-      { type: 'target', percent: 1 },
+      { current: '0', type: 'current', percent: 0 },
+      { current: '0', type: 'target', percent: 1 },
     ]);
   });
 });
diff --git a/__tests__/unit/plots/ring-progress/index-spec.ts b/__tests__/unit/plots/ring-progress/index-spec.ts
index 23c8adb629..c758672359 100644
--- a/__tests__/unit/plots/ring-progress/index-spec.ts
+++ b/__tests__/unit/plots/ring-progress/index-spec.ts
@@ -23,7 +23,7 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
 
     ringProgress.update({
@@ -39,7 +39,7 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.5);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.5);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
 
     ringProgress.destroy();
@@ -61,7 +61,7 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#123456');
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#654321');
 
     ringProgress.update({
@@ -72,7 +72,7 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#654321');
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#123456');
 
     ringProgress.destroy();
@@ -101,13 +101,13 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(2);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([2, 2]);
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(2);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineDash')).toEqual([2, 2]);
 
-    const progressStyle = ({ percent, type }) => {
+    const progressStyle = ({ current, percent, type }) => {
       if (type === 'current') {
         return percent > 0.5
           ? {
@@ -121,7 +121,7 @@ describe('ring-progress', () => {
               lineDash: [4, 4],
             };
       } else if (type === 'target') {
-        return percent >= 0.5
+        return percent - current >= 0.5
           ? {
               stroke: '#654321',
               lineWidth: 4,
@@ -146,7 +146,7 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#123456');
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
@@ -164,7 +164,7 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineWidth')).toBe(4);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('lineDash')).toEqual([4, 4]);
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.6);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('stroke')).toBe('#654321');
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('lineWidth')).toBe(4);
@@ -189,7 +189,7 @@ describe('ring-progress', () => {
     expect(ringProgress.chart.geometries[0].elements[0].getData().percent).toBe(0.6);
     expect(ringProgress.chart.geometries[0].elements[0].shape.attr('fill')).toBe('#FAAD14');
     expect(ringProgress.chart.geometries[0].elements[1].getData().type).toBe('target');
-    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(0.4);
+    expect(ringProgress.chart.geometries[0].elements[1].getData().percent).toBe(1);
     expect(ringProgress.chart.geometries[0].elements[1].shape.attr('fill')).toBe('#E8EDF3');
 
     ringProgress.destroy();
@@ -246,14 +246,14 @@ describe('ring-progress', () => {
 
     ring.render();
 
-    expect(ring.chart.getData()).toEqual([
+    expect(ring.chart.getData()).toMatchObject([
       {
         type: 'current',
         percent: 1,
       },
       {
         type: 'target',
-        percent: 0,
+        percent: 1,
       },
     ]);
 
@@ -262,7 +262,7 @@ describe('ring-progress', () => {
       percent: -1.65,
     });
 
-    expect(ring.chart.getData()).toEqual([
+    expect(ring.chart.getData()).toMatchObject([
       {
         type: 'current',
         percent: 0,
diff --git a/src/plots/progress/adaptor.ts b/src/plots/progress/adaptor.ts
index 2f86ba7b67..0246689316 100644
--- a/src/plots/progress/adaptor.ts
+++ b/src/plots/progress/adaptor.ts
@@ -19,10 +19,9 @@ export function geometry(params: Params<ProgressOptions>): Params<ProgressOption
 
   const p = deepAssign({}, params, {
     options: {
-      xField: '1',
+      xField: 'current',
       yField: 'percent',
       seriesField: 'type',
-      isStack: true,
       widthRatio: barWidthRatio,
       interval: {
         style: progressStyle,
diff --git a/src/plots/progress/utils.ts b/src/plots/progress/utils.ts
index 7cd6011d0e..d7cbcca50c 100644
--- a/src/plots/progress/utils.ts
+++ b/src/plots/progress/utils.ts
@@ -8,12 +8,15 @@ export function getProgressData(percent: number) {
   const clampPercent = clamp(isRealNumber(percent) ? percent : 0, 0, 1);
   return [
     {
+      // 用于 progressStyle 的回调方法
+      current: `${clampPercent}`,
       type: 'current',
       percent: clampPercent,
     },
     {
+      current: `${clampPercent}`,
       type: 'target',
-      percent: 1 - clampPercent,
+      percent: 1,
     },
   ];
 }