fix: stock股票图重写changeData方法 (#2170)

* fix: stock股票图重写changeData方法 * fix: 股票图处理数据方法抽离为公共方法 * fix: 添加股票图获取数据方法的单测 * fix: 完善股票图changeData单测 * fix: 完善股票图data的单测 Co-authored-by: 沈建斌 <wb-sjb709429@antfin.com>
antvis · Jan 5, 2021 · ed08107 · ed08107
1 parent 79dc60b
commit ed08107
Show file tree

Hide file tree

Showing 5 changed files with 163 additions and 13 deletions.
diff --git a/__tests__/unit/plots/stock/change-data-spec.ts b/__tests__/unit/plots/stock/change-data-spec.ts
@@ -0,0 +1,37 @@
+import { pick } from '@antv/util';
+import { Stock } from '../../../../src';
+import { kdata, SH000001 } from '../../../data/stock';
+import { createDiv } from '../../../utils/dom';
+
+describe('stock', () => {
+  it('change data', () => {
+    const stock = new Stock(createDiv(), {
+      width: 400,
+      height: 300,
+      data: kdata,
+      xField: 'date',
+      yField: ['start', 'end', 'max', 'min'],
+      meta: {
+        date: {
+          mask: 'YYYY',
+        },
+      },
+    });
+
+    stock.render();
+
+    expect(stock.chart.geometries[0].elements.length).toEqual(kdata.length);
+
+    const newData = [
+      ...kdata,
+      { date: '2015-10-25', start: 8, max: 8.54, min: 4.99, end: 4.99, volumn: 2769.31, money: 19337.44 },
+    ];
+    stock.changeData(newData);
+    expect(stock.chart.geometries[0].elements.length).toEqual(kdata.length + 1);
+    // 添加的数据
+    const addData = stock.chart.geometries[0].elements[kdata.length].getData();
+    expect(addData.date).toEqual('2015-10-25');
+    expect(stock.options.data).toEqual(newData);
+    stock.destroy();
+  });
+});
diff --git a/__tests__/unit/plots/stock/data-spec.ts b/__tests__/unit/plots/stock/data-spec.ts
@@ -0,0 +1,93 @@
+import { kdata } from '../../../data/stock';
+import { getStockData } from '../../../../src/plots/stock/utils';
+import { TREND_FIELD, TREND_UP, TREND_DOWN, Y_FIELD } from '../../../../src/plots/stock/constant';
+
+describe('stock data', () => {
+  it('stock data', () => {
+    const yField = ['start', 'end', 'max', 'min'];
+    const originalData = [
+      { date: '2015-11-19', start: 8.18, max: 8.33, min: 7.98, end: 8.32, volumn: 1810, money: 14723.56 },
+      { date: '2015-11-18', start: 8.37, max: 8.6, min: 8.03, end: 8.09, volumn: 2790.37, money: 23309.19 },
+      { date: '2015-11-17', start: 8.7, max: 8.78, min: 8.32, end: 8.37, volumn: 3729.04, money: 31709.71 },
+    ];
+    const data = getStockData(originalData, yField);
+    expect(data.length).toEqual(originalData.length);
+    expect(data).toEqual([
+      {
+        date: '2015-11-19',
+        start: 8.18,
+        max: 8.33,
+        min: 7.98,
+        end: 8.32,
+        volumn: 1810,
+        money: 14723.56,
+        [TREND_FIELD]: TREND_UP,
+        [Y_FIELD]: [8.18, 8.32, 8.33, 7.98],
+      },
+      {
+        date: '2015-11-18',
+        start: 8.37,
+        max: 8.6,
+        min: 8.03,
+        end: 8.09,
+        volumn: 2790.37,
+        money: 23309.19,
+        [TREND_FIELD]: TREND_DOWN,
+        [Y_FIELD]: [8.37, 8.09, 8.6, 8.03],
+      },
+      {
+        date: '2015-11-17',
+        start: 8.7,
+        max: 8.78,
+        min: 8.32,
+        end: 8.37,
+        volumn: 3729.04,
+        money: 31709.71,
+        [TREND_FIELD]: TREND_DOWN,
+        [Y_FIELD]: [8.7, 8.37, 8.78, 8.32],
+      },
+    ]);
+  });
+
+  it('start = end', () => {
+    const yField = ['start', 'end', 'max', 'min'];
+    const originalData = [
+      { date: '2015-11-19', start: 8.18, max: 8.33, min: 7.98, end: 8.18, volumn: 1810, money: 14723.56 },
+    ];
+    const data = getStockData(originalData, yField);
+    expect(data).toEqual([
+      {
+        date: '2015-11-19',
+        start: 8.18,
+        max: 8.33,
+        min: 7.98,
+        end: 8.18,
+        volumn: 1810,
+        money: 14723.56,
+        [TREND_FIELD]: TREND_UP,
+        [Y_FIELD]: [8.18, 8.18, 8.33, 7.98],
+      },
+    ]);
+  });
+
+  it('contain invalid value', () => {
+    const yField = ['start', 'end', 'max', 'min'];
+    const originalData = [
+      { date: '2015-11-19', start: undefined, max: 8.33, min: 7.98, end: null, volumn: 1810, money: 14723.56 },
+    ];
+    const data = getStockData(originalData, yField);
+    expect(data).toEqual([
+      {
+        date: '2015-11-19',
+        start: undefined,
+        max: 8.33,
+        min: 7.98,
+        end: null,
+        volumn: 1810,
+        money: 14723.56,
+        [TREND_FIELD]: TREND_DOWN,
+        [Y_FIELD]: [undefined, null, 8.33, 7.98],
+      },
+    ]);
+  });
+});
diff --git a/src/plots/stock/adaptor.ts b/src/plots/stock/adaptor.ts
@@ -1,11 +1,12 @@
-import { isArray, isObject, map } from '@antv/util';
+import { isObject } from '@antv/util';
 import { Params } from '../../core/adaptor';
 import { interaction, animation, theme } from '../../adaptor/common';
 import { findGeometry, flow, pick, deepAssign } from '../../utils';
 import { AXIS_META_CONFIG_KEYS } from '../../constant';
 
 import { StockOptions } from './types';
 import { Y_FIELD, TREND_FIELD, TREND_UP, TREND_DOWN, TREND_COLOR } from './constant';
+import { getStockData } from './utils';
 
 /**
  * 图表配置处理
@@ -15,19 +16,9 @@ function field(params: Params<StockOptions>): Params<StockOptions> {
   const { chart, options } = params;
   const { xField, yField } = options;
 
-  let data = options.data;
+  const data = options.data;
 
-  // 加工处理源数据
-  data = map(data, (obj) => {
-    if (isArray(yField)) {
-      const [open, close, high, low] = yField;
-      obj[TREND_FIELD] = obj[open] <= obj[close] ? TREND_UP : TREND_DOWN;
-      obj[Y_FIELD] = [obj[open], obj[close], obj[high], obj[low]];
-    }
-    return obj;
-  });
-
-  chart.data(data);
+  chart.data(getStockData(data, yField));
 
   const geometry = chart.schema().position(`${xField}*${Y_FIELD}`).shape('candle');
 

diff --git a/src/plots/stock/index.ts b/src/plots/stock/index.ts
@@ -3,6 +3,7 @@ import { Plot } from '../../core/plot';
 import { Adaptor } from '../../core/adaptor';
 import { StockOptions } from './types';
 import { adaptor } from './adaptor';
+import { getStockData } from './utils';
 
 import { DEFAULT_TOOLTIP_OPTIONS } from './constant';
 
@@ -33,4 +34,14 @@ export class Stock extends Plot<StockOptions> {
   protected getSchemaAdaptor(): Adaptor<StockOptions> {
     return adaptor;
   }
+
+  /**
+   * @override
+   * @param data
+   */
+  public changeData(data: StockOptions['data']) {
+    this.updateOption({ data });
+    const { yField } = this.options;
+    this.chart.changeData(getStockData(data, yField));
+  }
 }
diff --git a/src/plots/stock/utils.ts b/src/plots/stock/utils.ts
@@ -0,0 +1,18 @@
+import { isArray, map } from '@antv/util';
+import { TREND_FIELD, TREND_DOWN, TREND_UP, Y_FIELD } from './constant';
+
+/**
+ * @desc 股票图数据处理
+ * @param data
+ * @param yField
+ */
+export function getStockData(data, yField) {
+  return map(data, (obj) => {
+    if (isArray(yField)) {
+      const [open, close, high, low] = yField;
+      obj[TREND_FIELD] = obj[open] <= obj[close] ? TREND_UP : TREND_DOWN;
+      obj[Y_FIELD] = [obj[open], obj[close], obj[high], obj[low]];
+    }
+    return obj;
+  });
+}