fix(indicator): when indicator > 1 or < 0 in gauge, progress, ring (#1673)

* fix(indicator): when indicator > 1 or < 0 in gauge, progress, ring

* chore: remove unused console.log

Author: hustcc

__tests__/unit/plots/gauge/index-spec.ts

@@ -113,4 +113,32 @@ describe('gauge', () => {
 
     expect(gauge.options.range.ticks).toEqual([0, 0.65, 1]);
   });
+
+  it('> 1, < 0', () => {
+    const gauge = new Gauge(createDiv(), {
+      width: 600,
+      height: 300,
+      autoFit: false,
+      percent: 1.65,
+      range: {
+        color: ['l(0) 0:#5d7cef 1:#e35767'],
+      },
+    });
+
+    gauge.render();
+    // @ts-ignore
+    window.gauge = gauge;
+
+    expect(gauge.chart.views[0].getData()).toEqual([{ percent: 1 }]);
+
+    gauge.update({
+      ...gauge.options,
+      percent: -1.65,
+    });
+
+    expect(gauge.chart.views[0].getData()).toEqual([{ percent: 0 }]);
+
+    // 多 view 的时候，防止 update 的时候 view 泄露
+    expect(gauge.chart.views.length).toBe(2);
+  });
 });

__tests__/unit/plots/progress/index-spec.ts

@@ -198,4 +198,42 @@ describe('progress', () => {
 
     expect(progress.chart.geometries[0].getAttribute('color').values).toEqual(['green', '#E8EDF3']);
   });
+
+  it('> 1, < 0', () => {
+    const progress = new Progress(createDiv(), {
+      width: 600,
+      height: 300,
+      autoFit: false,
+      percent: 1.65,
+    });
+
+    progress.render();
+
+    expect(progress.chart.getData()).toEqual([
+      {
+        type: 'current',
+        percent: 1,
+      },
+      {
+        type: 'target',
+        percent: 0,
+      },
+    ]);
+
+    progress.update({
+      ...progress.options,
+      percent: -1.65,
+    });
+
+    expect(progress.chart.getData()).toEqual([
+      {
+        type: 'current',
+        percent: 0,
+      },
+      {
+        type: 'target',
+        percent: 1,
+      },
+    ]);
+  });
 });

__tests__/unit/plots/ring-progress/index-spec.ts

@@ -221,4 +221,42 @@ describe('ring-progress', () => {
 
     expect(ring.chart.geometries[0].getAttribute('color').values).toEqual(['green', '#E8EDF3']);
   });
+
+  it('> 1, < 0', () => {
+    const ring = new RingProgress(createDiv(), {
+      width: 600,
+      height: 300,
+      autoFit: false,
+      percent: 1.65,
+    });
+
+    ring.render();
+
+    expect(ring.chart.getData()).toEqual([
+      {
+        type: 'current',
+        percent: 1,
+      },
+      {
+        type: 'target',
+        percent: 0,
+      },
+    ]);
+
+    ring.update({
+      ...ring.options,
+      percent: -1.65,
+    });
+
+    expect(ring.chart.getData()).toEqual([
+      {
+        type: 'current',
+        percent: 0,
+      },
+      {
+        type: 'target',
+        percent: 1,
+      },
+    ]);
+  });
 });

src/core/plot.ts

@@ -140,6 +140,7 @@ export abstract class Plot<O extends PickOptions> extends EE {
   public render() {
     // 暴力处理，先清空再渲染，需要 G2 层自行做好更新渲染
     this.chart.clear();
+    this.chart.views = []; // 删除已有的 views
     // 执行 adaptor
     this.execAdaptor();
     // 渲染

src/plots/gauge/adaptor.ts

@@ -1,4 +1,4 @@
-import { isString, isArray, isFunction } from '@antv/util';
+import { isString, isArray, isFunction, clamp } from '@antv/util';
 import { interaction, animation, theme, scale } from '../../adaptor/common';
 import { Params } from '../../core/adaptor';
 import { Data } from '../../types';
@@ -17,7 +17,8 @@ function geometry(params: Params<GaugeOptions>): Params<GaugeOptions> {
   const { ticks, color } = range;
 
   // 指标 & 指针
-  const indicatorData = [{ [PERCENT]: percent }];
+  const indicatorData = [{ [PERCENT]: clamp(percent, 0, 1) }];
+
   const v1 = chart.createView();
   v1.data(indicatorData);
 

src/plots/gauge/index.ts

@@ -1,3 +1,4 @@
+import { clamp } from '@antv/util';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { GaugeOptions } from './types';
@@ -20,7 +21,7 @@ export class Gauge extends Plot<GaugeOptions> {
     return {
       percent: 0, // 当前指标值
       range: {
-        ticks: [0, percent, 1],
+        ticks: [0, clamp(percent, 0, 1), 1],
       }, // 默认的刻度
       innerRadius: 0.9,
       radius: 0.95,

src/plots/progress/adaptor.ts

@@ -1,4 +1,4 @@
-import { deepMix, isString } from '@antv/util';
+import { deepMix, isString, clamp } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { flow } from '../../utils';
 import { scale, animation, theme, annotation } from '../../adaptor/common';
@@ -14,14 +14,15 @@ export function geometry(params: Params<ProgressOptions>): Params<ProgressOption
   const { chart, options } = params;
   const { percent, progressStyle, color, barWidthRatio } = options;
 
+  const clampPercent = clamp(percent, 0, 1);
   const data = [
     {
       type: 'current',
-      percent: percent,
+      percent: clampPercent,
     },
     {
       type: 'target',
-      percent: 1 - percent,
+      percent: 1 - clampPercent,
     },
   ];