From 270931537d65c8531fa8c118d17d8e07002aacae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=A5=E6=98=95?= Date: Mon, 15 Nov 2021 10:32:04 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20plot=20=E6=9B=B4=E6=96=B0=E5=88=A4?= =?UTF-8?q?=E6=96=AD=E5=B1=9E=E6=80=A7=E6=98=AF=E5=90=A6=E6=9C=89=E5=8F=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/core.ts | 2 +- src/createPlot.tsx | 32 ++-- .../__snapshots__/FunnelChart-spec.tsx.snap | 180 ------------------ unittest/plots/_update-option-spec.tsx | 47 +++++ 5 files changed, 64 insertions(+), 199 deletions(-) create mode 100644 unittest/plots/_update-option-spec.tsx diff --git a/package.json b/package.json index 548bd02b..8fa3bede 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "bizcharts", - "version": "4.1.14", + "version": "4.1.15-beta.1", "description": "bizcharts", "keywords": [ "bizcharts", diff --git a/src/core.ts b/src/core.ts index 8501ace2..34424abf 100644 --- a/src/core.ts +++ b/src/core.ts @@ -17,7 +17,7 @@ registerEngine('svg', SVGEngine); // @ts-ignore export * from '@antv/g2/lib/core'; -export const VERSION = '4.1.14'; +export const VERSION = '4.1.15-beta.1'; diff --git a/src/createPlot.tsx b/src/createPlot.tsx index 4850742b..66620150 100644 --- a/src/createPlot.tsx +++ b/src/createPlot.tsx @@ -20,7 +20,7 @@ import { polyfillTitleEvent, polyfillDescriptionEvent, } from './plots/core/polyfill'; -import { debounce, isArray, isFunction, isNil } from '@antv/util'; +import { debounce, isArray, isFunction, isNil, isEqual } from '@antv/util'; import warn from 'warning'; // 国际化处理 @@ -133,33 +133,31 @@ class BasePlot extends React.Component { } protected checkInstanceReady() { + // 缓存配置 + const currentConfig = pickWithout(this.props, [ + ...REACT_PIVATE_PROPS, + 'container', + 'PlotClass', + 'onGetG2Instance', + 'data', + ]); if (!this.g2Instance) { this.initInstance(); this.g2Instance.render(); } else if (this.shouldReCreate()) { - // 只有数据更新就不重绘，其他全部直接重新创建实例。 + // forceupdate this.g2Instance.destroy(); this.initInstance(); this.g2Instance.render(); } else if (this.diffConfig()) { - const options = pickWithout(this.props, [ - 'container', - 'PlotClass', - 'onGetG2Instance', - 'children', - ]); - this.g2Instance.update(options); + // 对比options是否更新 + if (!isEqual(currentConfig, this.preConfig)) { + this.g2Instance.update(currentConfig); + } } else if (this.diffData()) { this.g2Instance.changeData(this.props.data); } - // 缓存配置 - const currentConfig = pickWithout(this.props, [ - ...REACT_PIVATE_PROPS, - 'container', - 'PlotClass', - 'onGetG2Instance', - 'data', - ]); + this.preConfig = cloneDeep(currentConfig); this.g2Instance.data = this.props.data; } diff --git a/unittest/plots/__snapshots__/FunnelChart-spec.tsx.snap b/unittest/plots/__snapshots__/FunnelChart-spec.tsx.snap index 5936b8a9..c2a748da 100644 --- a/unittest/plots/__snapshots__/FunnelChart-spec.tsx.snap +++ b/unittest/plots/__snapshots__/FunnelChart-spec.tsx.snap @@ -20,111 +20,51 @@ Object { }, "data": Array [ Object { - "$$conversion$$": Array [ - undefined, - 50000, - ], - "$$mappingValue$$": 0.625, - "$$percentage$$": 0.625, "action": "浏览网站", "pv": 50000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 50000, - 35000, - ], - "$$mappingValue$$": 0.4375, - "$$percentage$$": 0.4375, "action": "放入购物车", "pv": 35000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 35000, - 25000, - ], - "$$mappingValue$$": 0.3125, - "$$percentage$$": 0.3125, "action": "生成订单", "pv": 25000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 25000, - 15000, - ], - "$$mappingValue$$": 0.1875, - "$$percentage$$": 0.1875, "action": "支付订单", "pv": 15000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 15000, - 11500, - ], - "$$mappingValue$$": 0.14375, - "$$percentage$$": 0.14375, "action": "完成交易", "pv": 11500, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - undefined, - 80000, - ], - "$$mappingValue$$": 1, - "$$percentage$$": 1, "action": "浏览网站", "pv": 80000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 80000, - 63000, - ], - "$$mappingValue$$": 0.7875, - "$$percentage$$": 0.7875, "action": "放入购物车", "pv": 63000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 63000, - 47000, - ], - "$$mappingValue$$": 0.5875, - "$$percentage$$": 0.5875, "action": "生成订单", "pv": 47000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 47000, - 24000, - ], - "$$mappingValue$$": 0.3, - "$$percentage$$": 0.3, "action": "支付订单", "pv": 24000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 24000, - 17500, - ], - "$$mappingValue$$": 0.21875, - "$$percentage$$": 0.21875, "action": "完成交易", "pv": 17500, "quarter": "2020Q2", @@ -175,111 +115,51 @@ Object { }, "data": Array [ Object { - "$$conversion$$": Array [ - undefined, - 50000, - ], - "$$mappingValue$$": 0.625, - "$$percentage$$": 0.625, "action": "浏览网站", "pv": 50000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 50000, - 35000, - ], - "$$mappingValue$$": 0.4375, - "$$percentage$$": 0.4375, "action": "放入购物车", "pv": 35000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 35000, - 25000, - ], - "$$mappingValue$$": 0.3125, - "$$percentage$$": 0.3125, "action": "生成订单", "pv": 25000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 25000, - 15000, - ], - "$$mappingValue$$": 0.1875, - "$$percentage$$": 0.1875, "action": "支付订单", "pv": 15000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 15000, - 11500, - ], - "$$mappingValue$$": 0.14375, - "$$percentage$$": 0.14375, "action": "完成交易", "pv": 11500, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - undefined, - 80000, - ], - "$$mappingValue$$": 1, - "$$percentage$$": 1, "action": "浏览网站", "pv": 80000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 80000, - 63000, - ], - "$$mappingValue$$": 0.7875, - "$$percentage$$": 0.7875, "action": "放入购物车", "pv": 63000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 63000, - 47000, - ], - "$$mappingValue$$": 0.5875, - "$$percentage$$": 0.5875, "action": "生成订单", "pv": 47000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 47000, - 24000, - ], - "$$mappingValue$$": 0.3, - "$$percentage$$": 0.3, "action": "支付订单", "pv": 24000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 24000, - 17500, - ], - "$$mappingValue$$": 0.21875, - "$$percentage$$": 0.21875, "action": "完成交易", "pv": 17500, "quarter": "2020Q2", @@ -332,111 +212,51 @@ Object { }, "data": Array [ Object { - "$$conversion$$": Array [ - undefined, - 50000, - ], - "$$mappingValue$$": 0.625, - "$$percentage$$": 0.625, "action": "浏览网站", "pv": 50000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 50000, - 35000, - ], - "$$mappingValue$$": 0.4375, - "$$percentage$$": 0.4375, "action": "放入购物车", "pv": 35000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 35000, - 25000, - ], - "$$mappingValue$$": 0.3125, - "$$percentage$$": 0.3125, "action": "生成订单", "pv": 25000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 25000, - 15000, - ], - "$$mappingValue$$": 0.1875, - "$$percentage$$": 0.1875, "action": "支付订单", "pv": 15000, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - 15000, - 11500, - ], - "$$mappingValue$$": 0.14375, - "$$percentage$$": 0.14375, "action": "完成交易", "pv": 11500, "quarter": "2020Q1", }, Object { - "$$conversion$$": Array [ - undefined, - 80000, - ], - "$$mappingValue$$": 1, - "$$percentage$$": 1, "action": "浏览网站", "pv": 80000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 80000, - 63000, - ], - "$$mappingValue$$": 0.7875, - "$$percentage$$": 0.7875, "action": "放入购物车", "pv": 63000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 63000, - 47000, - ], - "$$mappingValue$$": 0.5875, - "$$percentage$$": 0.5875, "action": "生成订单", "pv": 47000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 47000, - 24000, - ], - "$$mappingValue$$": 0.3, - "$$percentage$$": 0.3, "action": "支付订单", "pv": 24000, "quarter": "2020Q2", }, Object { - "$$conversion$$": Array [ - 24000, - 17500, - ], - "$$mappingValue$$": 0.21875, - "$$percentage$$": 0.21875, "action": "完成交易", "pv": 17500, "quarter": "2020Q2", diff --git a/unittest/plots/_update-option-spec.tsx b/unittest/plots/_update-option-spec.tsx new file mode 100644 index 00000000..26993006 --- /dev/null +++ b/unittest/plots/_update-option-spec.tsx @@ -0,0 +1,47 @@ +import React, { useState } from 'react'; +import BarChart from '../../src/plots/BarChart'; +import { render, cleanup } from '@testing-library/react'; + +const MOCK_DATA = [ + { type: '家具家电', sales: 38 }, + { type: '粮油副食', sales: 52 }, + { type: '生鲜水果', sales: 61 }, + { type: '美容洗护', sales: 145 }, + { type: '母婴用品', sales: 48 }, + { type: '进口食品', sales: 38 }, + { type: '食品饮料', sales: 38 }, + { type: '家庭清洁', sales: 38 }, +]; + +const opt = { + data: MOCK_DATA, + yField: "type", + xField: "sales", + seriesField: "type", +}; + +const Demo = () => { + const [option, setState] = useState(opt); + return <> +
{ + setState({...opt}); + console.log('change') + }}>click me change option seriesField
+
{ + setState({...opt, seriesField: undefined }); + console.log('change') + }}>click me change option seriesField
+ + + +}; + +describe('Plots-basic', () => { + test('update options', () => { + let chart = null; + render() + // cleanup(); + }); +})