feat: 玫瑰图修改 changeData && 添加单测

__tests__/unit/plots/rose/change-data-spec.ts

@@ -0,0 +1,129 @@
+import { salesByArea, subSalesByArea } from '../../../data/sales';
+import { Rose } from '../../../../src';
+import { createDiv } from '../../../utils/dom';
+
+describe('rose-changeData', () => {
+  it('basic rose: change Data', () => {
+    const rosePlot = new Rose(createDiv(), {
+      width: 400,
+      height: 300,
+      data: salesByArea,
+      xField: 'area',
+      yField: 'sales',
+    });
+
+    rosePlot.render();
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(salesByArea.length);
+
+    const newData = salesByArea.slice(0, 3);
+    rosePlot.changeData(newData);
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(newData.length);
+    expect(rosePlot.options.data).toEqual(newData);
+
+    rosePlot.destroy();
+  });
+
+  it('basic rose: from empty to have data', () => {
+    const rosePlot = new Rose(createDiv(), {
+      width: 400,
+      height: 300,
+      data: [],
+      xField: 'area',
+      yField: 'sales',
+    });
+
+    rosePlot.render();
+
+    rosePlot.changeData(salesByArea);
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(salesByArea.length);
+    expect(rosePlot.options.data).toEqual(salesByArea);
+
+    rosePlot.destroy();
+  });
+
+  it('group rose: change data', () => {
+    const rosePlot = new Rose(createDiv(), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      isGroup: true,
+      seriesField: 'series',
+    });
+
+    rosePlot.render();
+
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length);
+
+    const newData = subSalesByArea.filter((item) => item.area !== '东北' || item.series !== '消费者');
+    rosePlot.changeData(newData);
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(newData.length);
+    expect(rosePlot.options.data).toEqual(newData);
+
+    rosePlot.destroy();
+  });
+
+  it('group rose: from empty to have data', () => {
+    const rosePlot = new Rose(createDiv(), {
+      width: 400,
+      height: 300,
+      data: [],
+      xField: 'area',
+      yField: 'sales',
+      isGroup: true,
+      seriesField: 'series',
+    });
+
+    rosePlot.render();
+
+    rosePlot.changeData(subSalesByArea);
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length);
+    expect(rosePlot.options.data).toEqual(subSalesByArea);
+
+    rosePlot.destroy();
+  });
+
+  it('stacked rose: change data', () => {
+    const rosePlot = new Rose(createDiv(), {
+      width: 400,
+      height: 300,
+      data: subSalesByArea,
+      xField: 'area',
+      yField: 'sales',
+      isStack: true,
+      seriesField: 'series',
+    });
+
+    rosePlot.render();
+
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length);
+
+    const newData = subSalesByArea.filter((item) => item.area !== '东北' || item.series !== '消费者');
+    rosePlot.changeData(newData);
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(newData.length);
+    expect(rosePlot.options.data).toEqual(newData);
+
+    rosePlot.destroy();
+  });
+
+  it('stack rose: from empty to have data', () => {
+    const rosePlot = new Rose(createDiv(), {
+      width: 400,
+      height: 300,
+      data: [],
+      xField: 'area',
+      yField: 'sales',
+      isStack: true,
+      seriesField: 'series',
+    });
+
+    rosePlot.render();
+
+    rosePlot.changeData(subSalesByArea);
+    expect(rosePlot.chart.geometries[0].elements.length).toEqual(subSalesByArea.length);
+    expect(rosePlot.options.data).toEqual(subSalesByArea);
+
+    rosePlot.destroy();
+  });
+});

src/plots/rose/index.ts

@@ -10,6 +10,15 @@ export class Rose extends Plot<RoseOptions> {
   /** 玫瑰图 */
   public type: string = 'rose';
 
+  /**
+   * @override
+   * @param data
+   */
+  public changeData(data) {
+    this.updateOption({ data });
+    this.chart.changeData(data);
+  }
+
   /**
    * 获取默认的 options 配置项
    */