From ed081070acf4b83330288946c9750062497fc9df Mon Sep 17 00:00:00 2001 From: banli <691525671@qq.com> Date: Tue, 5 Jan 2021 11:50:02 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20stock=E8=82=A1=E7=A5=A8=E5=9B=BE?= =?UTF-8?q?=E9=87=8D=E5=86=99changeData=E6=96=B9=E6=B3=95=20(#2170)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: stock股票图重写changeData方法 * fix: 股票图处理数据方法抽离为公共方法 * fix: 添加股票图获取数据方法的单测 * fix: 完善股票图changeData单测 * fix: 完善股票图data的单测 Co-authored-by: 沈建斌 --- .../unit/plots/stock/change-data-spec.ts | 37 ++++++++ __tests__/unit/plots/stock/data-spec.ts | 93 +++++++++++++++++++ src/plots/stock/adaptor.ts | 17 +--- src/plots/stock/index.ts | 11 +++ src/plots/stock/utils.ts | 18 ++++ 5 files changed, 163 insertions(+), 13 deletions(-) create mode 100644 __tests__/unit/plots/stock/change-data-spec.ts create mode 100644 __tests__/unit/plots/stock/data-spec.ts create mode 100644 src/plots/stock/utils.ts diff --git a/__tests__/unit/plots/stock/change-data-spec.ts b/__tests__/unit/plots/stock/change-data-spec.ts new file mode 100644 index 0000000000..d5003030e7 --- /dev/null +++ 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 new file mode 100644 index 0000000000..e6562e0f2a --- /dev/null +++ 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 index d2d6ae1f37..9cc4d8ace8 100644 --- a/src/plots/stock/adaptor.ts +++ b/src/plots/stock/adaptor.ts @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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): Params { 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 index b88144123c..a4f3735622 100644 --- 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 { protected getSchemaAdaptor(): Adaptor { 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 new file mode 100644 index 0000000000..cb4822812e --- /dev/null +++ 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; + }); +}