feat: changedata (#2142)

* docs(line-demo): 优化基础折线图 demo * feat(core): plot core 提供 updateOptions 方法 & 提供 changedata 复写 * feat(line): 折线图支持动态更新数据 - overrider changedata - provide demo * feat(gauge): 仪表盘支持动态更新数据 - 抽取获取 view data 的工具方法 - override changeData * feat(gauge): 优化仪表盘的 changedata, 每一次 changedata 只做一次 paint 绘制 - [x] 单测 * fix(gauge): 修改文档 & demo * feat(🔨): 增加测试用例 * feat(gauge): 添加仪表盘 utils 测试用例 * fix: 修改 cr 建议 * docs: 更新网站 demo 截图
antvis · Dec 28, 2020 · ac17235 · ac17235
1 parent 5de3aca
commit ac17235
Show file tree

Hide file tree

Showing 19 changed files with 421 additions and 42 deletions.
diff --git a/__tests__/unit/core/index-spec.ts b/__tests__/unit/core/index-spec.ts
@@ -40,6 +40,40 @@ describe('core', () => {
     line.destroy();
   });
 
+  it('updateOption without render', () => {
+    const options = {
+      width: 400,
+      height: 300,
+      data: [
+        { date: '12-01', value: 1, type: 'bb' },
+        { date: '12-02', value: 12, type: 'bb' },
+      ],
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+    };
+    const line = new Line(createDiv(), options);
+
+    line.render();
+
+    // @ts-ignore
+    line.updateOption({
+      data: [...line.options.data, { date: '12-01', value: 4, type: 'cc' }, { date: '12-02', value: 19, type: 'cc' }],
+    });
+
+    expect(line.chart.geometries[0].elements.length).toBe(1);
+
+    line.render();
+    expect(line.chart.geometries[0].elements.length).toBe(2);
+
+    line.update({
+      data: [...line.options.data, { date: '12-01', value: 4, type: 'dd' }, { date: '12-02', value: 19, type: 'dd' }],
+    });
+    expect(line.chart.geometries[0].elements.length).toBe(3);
+
+    line.destroy();
+  });
+
   it('update mix with default options', () => {
     const options = {
       width: 400,
@@ -53,9 +87,7 @@ describe('core', () => {
     line.render();
     const curOptions = clone(line.options);
 
-    line.update({ ...options, width: 500 });
-
-    line.render();
+    line.update({ width: 500 });
 
     expect(isEqual(line.options, deepMix(curOptions, { ...options, width: 500 }))).toBeTruthy();
 

diff --git a/__tests__/unit/plots/gauge/index-spec.ts b/__tests__/unit/plots/gauge/index-spec.ts
@@ -1,4 +1,5 @@
 import { Gauge } from '../../../../src';
+import { INDICATEOR_VIEW_ID, RANGE_VIEW_ID } from '../../../../src/plots/gauge/constant';
 import { pick } from '../../../../src/utils';
 import { createDiv } from '../../../utils/dom';
 
@@ -114,6 +115,8 @@ describe('gauge', () => {
     });
 
     gauge.render();
+    expect(gauge.chart.views[0].id).toEqual(INDICATEOR_VIEW_ID);
+    expect(gauge.chart.views[1].id).toEqual(RANGE_VIEW_ID);
     // @ts-ignore
     expect(gauge.chart.views[1].getYScales()[0].ticks).toEqual([0, 0.25, 0.5, 0.75, 1]);
     expect(gauge.chart.views.length).toBe(2);
@@ -141,6 +144,7 @@ describe('gauge', () => {
 
     gauge.render();
 
+    expect(gauge.chart.views[0].id).toEqual(RANGE_VIEW_ID);
     expect(gauge.chart.views.length).toBe(1);
     expect(gauge.chart.views[0].geometries[0].type).toBe('interval');
 

diff --git a/__tests__/unit/plots/gauge/statistic-spec.ts b/__tests__/unit/plots/gauge/statistic-spec.ts
@@ -44,6 +44,23 @@ describe('gauge statistic', () => {
     expect((annotations[0] as HTMLElement).innerText).toBe('测试');
   });
 
+  it('change data', () => {
+    gauge.changeData(0.35);
+    const annotations = document.body.querySelectorAll('.g2-html-annotation');
+    expect(annotations.length).toBe(2);
+    expect((annotations[1] as HTMLElement).innerText).toBe('35.0%');
+
+    gauge.changeData(0.15);
+    expect((document.body.querySelectorAll('.g2-html-annotation')[1] as HTMLElement).innerText).toBe('15.0%');
+
+    gauge.update({ statistic: { content: {}, title: false } });
+    expect(document.body.querySelectorAll('.g2-html-annotation').length).toBe(1);
+    expect((document.body.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('15.0%');
+
+    gauge.changeData(0.05);
+    expect((document.body.querySelectorAll('.g2-html-annotation')[0] as HTMLElement).innerText).toBe('5.0%');
+  });
+
   afterAll(() => {
     gauge.destroy();
   });

diff --git a/__tests__/unit/plots/gauge/utils-spec.ts b/__tests__/unit/plots/gauge/utils-spec.ts
@@ -0,0 +1,28 @@
+import { PERCENT, RANGE_TYPE, RANGE_VALUE } from '../../../../src/plots/gauge/constant';
+import { getIndicatorData, getRangeData } from '../../../../src/plots/gauge/utils';
+
+describe('gauge utils to getData', () => {
+  it('get indicatorData', () => {
+    expect(getIndicatorData(0.1)).toEqual([{ [PERCENT]: 0.1 }]);
+    expect(getIndicatorData(1.4)).toEqual([{ [PERCENT]: 1 }]);
+    expect(getIndicatorData(-0.4)).toEqual([{ [PERCENT]: 0 }]);
+  });
+
+  it('get rangeData', () => {
+    expect(getRangeData(0.5, { ticks: [0, 0.3, 1] })).toEqual([
+      { [RANGE_VALUE]: 0.3, [RANGE_TYPE]: '1' },
+      { [RANGE_VALUE]: 0.7, [RANGE_TYPE]: '2' },
+    ]);
+
+    expect(getRangeData(0.5)).toEqual([
+      { [RANGE_VALUE]: 0.5, [RANGE_TYPE]: '1' },
+      { [RANGE_VALUE]: 0.5, [RANGE_TYPE]: '2' },
+    ]);
+
+    expect(getRangeData(-0.5)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '2' }]);
+    expect(getRangeData(1.5)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '1' }]);
+
+    expect(getRangeData(0)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '2' }]);
+    expect(getRangeData(1)).toEqual([{ [RANGE_VALUE]: 1, [RANGE_TYPE]: '1' }]);
+  });
+});
diff --git a/__tests__/unit/plots/line/change-data-spec.ts b/__tests__/unit/plots/line/change-data-spec.ts
@@ -0,0 +1,51 @@
+import { Line } from '../../../../src';
+import { partySupport } from '../../../data/party-support';
+import { createDiv } from '../../../utils/dom';
+
+describe('line', () => {
+  it('change data', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: partySupport.filter((o) => ['FF'].includes(o.type)),
+      xField: 'date',
+      yField: 'value',
+      seriesField: 'type',
+      color: ['blue', 'red'],
+      appendPadding: 10,
+      connectNulls: true,
+    });
+
+    line.render();
+
+    expect(line.chart.geometries[0].elements.length).toBe(1);
+
+    line.changeData(partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)));
+    expect(line.chart.geometries[0].elements.length).toBe(2);
+    expect(line.options.data).toEqual(partySupport.filter((o) => ['FF', 'Lab'].includes(o.type)));
+
+    line.destroy();
+  });
+
+  it('add point', () => {
+    const line = new Line(createDiv(), {
+      width: 400,
+      height: 300,
+      data: [
+        { type: '1', value: 10 },
+        { type: '2', value: 3 },
+      ],
+      xField: 'type',
+      yField: 'value',
+      point: {},
+    });
+
+    line.render();
+    expect(line.chart.geometries[1].elements.length).toBe(2);
+
+    line.changeData([...line.options.data, { type: '3', value: 10 }]);
+    expect(line.chart.geometries[1].elements.length).toBe(3);
+
+    line.destroy();
+  });
+});
diff --git a/docs/api/plots/gauge.zh.md b/docs/api/plots/gauge.zh.md
@@ -49,8 +49,10 @@ order: 22
 
 | 配置项 | 类型     | 描述                                 |
 | ------ | -------- | ------------------------------------ |
-| ticks  | number[] | 辅助圆弧显示数字数组                 |
-| color  | string[] | 辅助圆弧的颜色色板，按照色板顺序取值 |
+| ticks  | _number[]_ | 辅助圆弧显示数字数组                 |
+| color  | _string/|string[]_ | 辅助圆弧的颜色色板，按照色板顺序取值; 当设置 ticks 时，color 无法使用回调的方式 |
+
+<playground rid="gauge" path="progress-plots/gauge/demo/basic.ts"></playground>
 
 #### axis
 

diff --git a/examples/line/basic/demo/dynamic-line.ts b/examples/line/basic/demo/dynamic-line.ts
@@ -0,0 +1,29 @@
+import { Line } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const line = new Line('container', {
+      data,
+      padding: 'auto',
+      xField: 'Date',
+      yField: 'scales',
+      xAxis: {
+        type: 'timeCat',
+        tickCount: 5,
+      },
+    });
+
+    line.render();
+
+    let year = 2017;
+    let month = 2;
+    const interval = setInterval(() => {
+      if (year > 2211) {
+        clearInterval(interval);
+      }
+      month = (month + 1) % 12;
+      year += Math.ceil(month / 12);
+      line.changeData([...line.options.data, { Date: `${year}-${month}`, scales: 1300 * Math.random() + 500 }]);
+    }, 500);
+  });
diff --git a/examples/line/basic/demo/line-with-data-marker.ts b/examples/line/basic/demo/line-with-data-marker.ts
@@ -0,0 +1,118 @@
+import { G2, Line } from '@antv/g2plot';
+
+G2.registerShape('point', 'breath-point', {
+  draw(cfg, container) {
+    const data = cfg.data;
+    const point = { x: cfg.x, y: cfg.y };
+    const group = container.addGroup();
+    if (data.time === '14.20' && data.date === 'today') {
+      const decorator1 = group.addShape('circle', {
+        attrs: {
+          x: point.x,
+          y: point.y,
+          r: 10,
+          fill: cfg.color,
+          opacity: 0.5,
+        },
+      });
+      const decorator2 = group.addShape('circle', {
+        attrs: {
+          x: point.x,
+          y: point.y,
+          r: 10,
+          fill: cfg.color,
+          opacity: 0.5,
+        },
+      });
+      const decorator3 = group.addShape('circle', {
+        attrs: {
+          x: point.x,
+          y: point.y,
+          r: 10,
+          fill: cfg.color,
+          opacity: 0.5,
+        },
+      });
+      decorator1.animate(
+        {
+          r: 20,
+          opacity: 0,
+        },
+        {
+          duration: 1800,
+          easing: 'easeLinear',
+          repeat: true,
+        }
+      );
+      decorator2.animate(
+        {
+          r: 20,
+          opacity: 0,
+        },
+        {
+          duration: 1800,
+          easing: 'easeLinear',
+          repeat: true,
+          delay: 600,
+        }
+      );
+      decorator3.animate(
+        {
+          r: 20,
+          opacity: 0,
+        },
+        {
+          duration: 1800,
+          easing: 'easeLinear',
+          repeat: true,
+          delay: 1200,
+        }
+      );
+      group.addShape('circle', {
+        attrs: {
+          x: point.x,
+          y: point.y,
+          r: 6,
+          fill: cfg.color,
+          opacity: 0.7,
+        },
+      });
+      group.addShape('circle', {
+        attrs: {
+          x: point.x,
+          y: point.y,
+          r: 1.5,
+          fill: cfg.color,
+        },
+      });
+    }
+
+    return group;
+  },
+});
+
+fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/cpu-data.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const plot = new Line('container', {
+      autoFit: true,
+      height: 500,
+      data,
+      meta: {
+        cpu: {
+          time: { type: 'cat' },
+          max: 100,
+          min: 0,
+        },
+      },
+      xField: 'time',
+      yField: 'cpu',
+      seriesField: 'date',
+      tooltip: { showMarkers: false },
+      point: {
+        shape: 'breath-point',
+      },
+    });
+
+    plot.render();
+  });
diff --git a/examples/line/basic/demo/line.ts b/examples/line/basic/demo/line.ts
@@ -15,15 +15,4 @@ fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38cc
     });
 
     line.render();
-    let cnt = 0;
-    let smooth = false;
-    const interval = setInterval(() => {
-      if (cnt < 5) {
-        smooth = !smooth;
-        cnt += 1;
-        line.update({ smooth });
-      } else {
-        clearInterval(interval);
-      }
-    }, 3000);
   });