fix(progress): 迷你进度条重新修改 (#3268)

Co-authored-by: ai-qing-hai <wb-xcf804241@antgroup.com>
antvis · Jun 30, 2022 · c15b9c2 · c15b9c2
1 parent 4bf3add
commit c15b9c2
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 42 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,
     },
   ];
 }