feat: 散点图支持动态更新数据 & 添加单测 (#2225)

* docs(scatter): 散点图的 demo 走查 & 新增伪 3D 气泡图预览地址: https://gw.alipayobjects.com/zos/antfincdn/%26Gzzn7RM81/83252692-ca94-40eb-be60-5f9bb591683a.png * feat(scatter): 散点图支持changedata 动态更新 & 测试 * fix(scatter): 修复 build 问题
antvis · Jan 17, 2021 · ee48895 · ee48895
1 parent 4eb7805
commit ee48895
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 17 deletions.
diff --git a/__tests__/unit/plots/scatter/data-spec.ts b/__tests__/unit/plots/scatter/data-spec.ts
@@ -35,7 +35,10 @@ describe('scatter', () => {
     expect(yScale.nice).toBe(false);
     expect(yScale.min).toBe(0);
     expect(yScale.max).toBe(data[0].height * 2);
+
+    scatter.destroy();
   });
+
   it('transformOptions & axis min max', () => {
     const scatter = new Scatter(createDiv(), {
       width: 400,
@@ -65,6 +68,7 @@ describe('scatter', () => {
     expect(yScale.max).toBe(100);
     scatter.destroy();
   });
+
   it('transformOptions & meta min max', () => {
     const scatter = new Scatter(createDiv(), {
       width: 400,
@@ -227,4 +231,74 @@ describe('scatter', () => {
 
     scatter.destroy();
   });
+
+  it('changedata: normal', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: [],
+      xField: 'weight',
+      yField: 'height',
+    });
+
+    scatter.render();
+
+    scatter.changeData([
+      { gender: 'female', height: 161.2, weight: 51.6 },
+      { gender: 'female', height: 61.2, weight: 151.6 },
+    ]);
+    const xScale = scatter.chart.getScaleByField('weight');
+    const yScale = scatter.chart.getScaleByField('height');
+    expect(xScale.min).toBe(40);
+    expect(xScale.max).toBe(160);
+    expect(yScale.min).toBe(50);
+    expect(yScale.max).toBe(175);
+
+    scatter.changeData([]);
+    expect(scatter.options.data).toEqual([]);
+    expect(scatter.chart.getOptions().data).toEqual([]);
+
+    scatter.destroy();
+  });
+
+  it('changedata, from one data to empty or to more', () => {
+    const scatter = new Scatter(createDiv(), {
+      width: 400,
+      height: 300,
+      appendPadding: 10,
+      data: [{ gender: 'female', height: 161.2, weight: 51.6 }],
+      xField: 'weight',
+      yField: 'height',
+      xAxis: {
+        nice: false,
+      },
+      yAxis: {
+        nice: false,
+      },
+    });
+
+    scatter.render();
+    let xScale = scatter.chart.getScaleByField('weight');
+    let yScale = scatter.chart.getScaleByField('height');
+    expect(xScale.min).toBe(0);
+    expect(xScale.max).toBe(51.6 * 2);
+    expect(yScale.min).toBe(0);
+    expect(yScale.max).toBe(161.2 * 2);
+
+    scatter.changeData([]);
+    expect(scatter.options.data).toEqual([]);
+    expect(scatter.chart.getOptions().data).toEqual([]);
+
+    scatter.changeData([{ gender: 'female', height: 61.2, weight: 351.6 }]);
+    expect(scatter.options.data).toEqual([{ gender: 'female', height: 61.2, weight: 351.6 }]);
+    xScale = scatter.chart.getScaleByField('weight');
+    yScale = scatter.chart.getScaleByField('height');
+    expect(xScale.min).toBe(0);
+    expect(xScale.max).toBe(351.6 * 2);
+    expect(yScale.min).toBe(0);
+    expect(yScale.max).toBe(61.2 * 2);
+
+    scatter.destroy();
+  });
 });
diff --git a/examples/scatter/bubble/demo/bubble-3d.ts b/examples/scatter/bubble/demo/bubble-3d.ts
@@ -0,0 +1,43 @@
+import { Scatter } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/t81X1wXdoj/scatter-data.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const scatterPlot = new Scatter('container', {
+      appendPadding: 30,
+      data,
+      xField: 'x',
+      yField: 'y',
+      colorField: 'genre',
+      color: [
+        'r(0.4, 0.3, 0.7) 0:rgba(255,255,255,0.5) 1:#5B8FF9',
+        'r(0.4, 0.4, 0.7) 0:rgba(255,255,255,0.5) 1:#61DDAA',
+      ],
+      sizeField: 'size',
+      size: [5, 20],
+      shape: 'circle',
+      yAxis: {
+        nice: true,
+        line: {
+          style: {
+            stroke: '#eee',
+          },
+        },
+      },
+      xAxis: {
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+        line: {
+          style: {
+            stroke: '#eee',
+          },
+        },
+      },
+    });
+    scatterPlot.render();
+  });
diff --git a/examples/scatter/bubble/demo/meta.json b/examples/scatter/bubble/demo/meta.json
@@ -20,6 +20,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0luHTJODdMUAAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "bubble-3d.ts",
+      "title": {
+        "zh": "伪 3D 气泡图",
+        "en": "Bubble plot of fake 3D"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/%26Gzzn7RM81/83252692-ca94-40eb-be60-5f9bb591683a.png"
+    },
     {
       "filename": "quadrant-tooltip.ts",
       "title": {

diff --git a/examples/scatter/bubble/index.en.md b/examples/scatter/bubble/index.en.md
@@ -1,4 +1,4 @@
 ---
 title: Bubble
-order: 0
+order: 1
 ---
diff --git a/examples/scatter/bubble/index.zh.md b/examples/scatter/bubble/index.zh.md
@@ -1,4 +1,4 @@
 ---
 title: 气泡图
-order: 0
+order: 1
 ---
diff --git a/examples/scatter/scatter/demo/label.ts b/examples/scatter/scatter/demo/label.ts
@@ -9,7 +9,6 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/3e4db10a-9da1-4b44-80d8-c128f427
       xField: 'xG conceded',
       yField: 'Shot conceded',
       colorField: 'Result',
-      color: ['#c71e1d', '#ffca76', '#09bb9f'],
       size: 5,
       shape: 'circle',
       pointStyle: {

diff --git a/examples/scatter/scatter/demo/meta.json b/examples/scatter/scatter/demo/meta.json
@@ -18,7 +18,7 @@
         "zh": "散点图图形标签",
         "en": "Scatter plot label"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*XlOeS4YAHbYAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vDr7LQjxjj/88d79b63-933c-4d98-a47a-17977ad7c3e9.png"
     },
     {
       "filename": "line.ts",

diff --git a/src/plots/scatter/adaptor.ts b/src/plots/scatter/adaptor.ts
@@ -12,19 +12,15 @@ import { ScatterOptions } from './types';
  * @param params
  * @returns params
  */
-export function transformOptions(params: Params<ScatterOptions>): Params<ScatterOptions> {
-  const { options } = params;
+export function transformOptions(options: ScatterOptions): ScatterOptions {
   const { data = [] } = options;
   // 仅对 data.length === 1 的情况进行处理
   if (data.length === 1) {
-    return deepAssign({}, params, {
-      options: {
-        ...options,
-        meta: getMeta(options),
-      },
+    return deepAssign({}, options, {
+      meta: getMeta(options),
     });
   }
-  return params;
+  return options;
 }
 
 /**
@@ -76,16 +72,22 @@ function geometry(params: Params<ScatterOptions>): Params<ScatterOptions> {
  * meta 配置
  * @param params
  */
-function meta(params: Params<ScatterOptions>): Params<ScatterOptions> {
+export function meta(params: Params<ScatterOptions>): Params<ScatterOptions> {
   const { options } = params;
-  const { xAxis, yAxis, xField, yField } = options;
+  const { data, xAxis, yAxis, xField, yField } = options;
+
+  let newOptions = options;
+  // 仅对 data.length === 1 的情况进行处理
+  if (data.length === 1) {
+    newOptions = transformOptions(deepAssign({}, options, { meta: getMeta(options) }));
+  }
 
   return flow(
     scale({
       [xField]: xAxis,
       [yField]: yAxis,
     })
-  )(params);
+  )(deepAssign({}, params, { options: newOptions }));
 }
 
 /**
@@ -264,7 +266,6 @@ export function tooltip(params: Params<ScatterOptions>): Params<ScatterOptions>
 export function adaptor(params: Params<ScatterOptions>) {
   // flow 的方式处理所有的配置到 G2 API
   return flow(
-    transformOptions,
     geometry,
     meta,
     axis,

diff --git a/src/plots/scatter/index.ts b/src/plots/scatter/index.ts
@@ -2,7 +2,7 @@ import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { deepAssign } from '../../utils';
 import { ScatterOptions } from './types';
-import { adaptor } from './adaptor';
+import { adaptor, transformOptions, meta } from './adaptor';
 import './interaction';
 
 export { ScatterOptions };
@@ -11,6 +11,17 @@ export class Scatter extends Plot<ScatterOptions> {
   /** 图表类型 */
   public type: string = 'point';
 
+  /**
+   * @override
+   * @param data
+   */
+  public changeData(data: ScatterOptions['data']) {
+    this.updateOption(transformOptions(deepAssign({}, this.options, { data })));
+    const { options, chart } = this;
+    meta({ chart, options });
+    this.chart.changeData(data);
+  }
+
   /**
    * 获取散点图的适配器
    */