fix: gague,pie,ring-progress,liquid 等 changedata 触发钩子事件 (#2319)

__tests__/bugs/issue-2260-spec.ts

@@ -0,0 +1,25 @@
+import { Gauge } from '../../src';
+import { createDiv } from '../utils/dom';
+import { delay } from '../utils/delay';
+
+describe('#2260', () => {
+  it('gauge changedata to trigger changedata events', async () => {
+    const gauge = new Gauge(createDiv(), {
+      percent: 0.75,
+      startAngle: Math.PI,
+      endAngle: 2 * Math.PI,
+    });
+
+    gauge.render();
+
+    let signal1;
+    let signal2;
+    gauge.on('beforechangedata', () => (signal1 = 'before'));
+    gauge.on('afterchangedata', () => (signal2 = 'after'));
+
+    gauge.changeData(0.3);
+    await delay(500);
+    expect(signal1).toBe('before');
+    expect(signal2).toBe('after');
+  });
+});

src/plots/gauge/index.ts

@@ -1,3 +1,4 @@
+import { VIEW_LIFE_CIRCLE, Event } from '@antv/g2';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { GaugeOptions } from './types';
@@ -31,8 +32,12 @@ export class Gauge extends Plot<GaugeOptions> {
    * @param percent
    */
   public changeData(percent: number) {
-    this.updateOption({ percent });
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA, null)
+    );
 
+    this.updateOption({ percent });
     const indicatorView = this.chart.views.find((v) => v.id === INDICATEOR_VIEW_ID);
     if (indicatorView) {
       indicatorView.data(getIndicatorData(percent));
@@ -44,6 +49,11 @@ export class Gauge extends Plot<GaugeOptions> {
     }
     // todo 后续让 G2 层在 afterrender 之后，来重绘 annotations
     statistic({ chart: this.chart, options: this.options }, true);
+
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA, null)
+    );
   }
 
   /**

src/plots/liquid/index.ts

@@ -1,3 +1,4 @@
+import { VIEW_LIFE_CIRCLE, Event } from '@antv/g2';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { LiquidOptions } from './types';
@@ -47,10 +48,19 @@ export class Liquid extends Plot<LiquidOptions> {
    * @param percent
    */
   public changeData(percent: number) {
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA, null)
+    );
     this.updateOption({ percent });
 
     this.chart.data(getLiquidData(percent));
     statistic({ chart: this.chart, options: this.options }, true);
+
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA, null)
+    );
   }
 
   /**

src/plots/pie/index.ts

@@ -1,3 +1,4 @@
+import { VIEW_LIFE_CIRCLE, Event } from '@antv/g2';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { adaptor, pieAnnotation } from './adaptor';
@@ -25,6 +26,10 @@ export class Pie extends Plot<PieOptions> {
    * @param data
    */
   public changeData(data: PieOptions['data']) {
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA, null)
+    );
     const prevOptions = this.options;
     const { angleField } = this.options;
     const prevData = processIllegalData(prevOptions.data, angleField);
@@ -39,6 +44,11 @@ export class Pie extends Plot<PieOptions> {
       pieAnnotation({ chart: this.chart, options: this.options });
       this.chart.render(true);
     }
+
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA, null)
+    );
   }
 
   /**

src/plots/ring-progress/index.ts

@@ -1,3 +1,4 @@
+import { VIEW_LIFE_CIRCLE, Event } from '@antv/g2';
 import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { getProgressData } from '../progress/utils';
@@ -24,11 +25,20 @@ export class RingProgress extends Plot<RingProgressOptions> {
    * @param percent
    */
   public changeData(percent: number) {
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.BEFORE_CHANGE_DATA, null)
+    );
     this.updateOption({ percent });
 
     this.chart.data(getProgressData(percent));
     // todo 后续让 G2 层在 afterrender 之后，来重绘 annotations
     statistic({ chart: this.chart, options: this.options }, true);
+
+    this.chart.emit(
+      VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA,
+      Event.fromData(this.chart, VIEW_LIFE_CIRCLE.AFTER_CHANGE_DATA, null)
+    );
   }
 
   protected getDefaultOptions() {