diff --git a/__tests__/bugs/issue-1245-spec.ts b/__tests__/bugs/issue-1245-spec.ts new file mode 100644 index 0000000000..0dac914cb9 --- /dev/null +++ b/__tests__/bugs/issue-1245-spec.ts @@ -0,0 +1,101 @@ +import { Pie } from '../../src'; +import { createDiv } from '.././utils/dom'; +import { delay } from '.././utils/delay'; + +describe('donut plot', () => { + test('angleField & colorField 配置交换, 不会触发 out-of-memory, 但是坐标为 NaN', () => { + const data = [ + { + type: '分类一', + value: 27, + }, + { + type: '分类二', + value: 25, + }, + { + type: '分类三', + value: 18, + }, + { + type: '分类四', + value: 15, + }, + { + type: '分类五', + value: 10, + }, + { + type: '其它', + value: 5, + }, + ]; + + const donutPlot = new Pie(createDiv(), { + width: 640, + height: 400, + radius: 0.8, + innerRadius: 0.64, + padding: 'auto', + data, + angleField: 'type', + colorField: 'value', + }); + + donutPlot.render(); + + expect(donutPlot).toBeDefined(); + expect(donutPlot.chart.geometries[0].elements.length).toBe(0); + }); + + test('value 数据出现字母或其他不合法情况,不会触发 out-of-memory', () => { + const data = [ + { + type: '分类一', + value: 27, + }, + { + type: '分类二', + value: 25, + }, + { + type: '分类三', + value: 18, + }, + { + type: '分类四', + value: 15, + }, + { + type: '分类五', + value: 10, + }, + { + type: '其它', + value: '11a', + }, + ]; + + const piePlot = new Pie(createDiv(), { + width: 640, + height: 400, + radius: 0.8, + padding: 'auto', + data, + angleField: 'value', + colorField: 'type', + }); + + piePlot.render(); + expect(piePlot).toBeDefined(); + expect(piePlot.chart.geometries[0].elements.length).toBe(data.length - 1); + + delay(3000).then(() => { + piePlot.update({ + ...piePlot.options, + data: data.map((d, idx) => (idx !== 0 ? { ...d, value: null } : d)), + }); + expect(piePlot.chart.geometries[0].elements.length).toBe(data.length); + }); + }); +}); diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts index f8a3a149c8..50576a0b33 100644 --- a/src/plots/pie/adaptor.ts +++ b/src/plots/pie/adaptor.ts @@ -1,4 +1,4 @@ -import { deepMix, each, get, isFunction } from '@antv/util'; +import { deepMix, each, filter, get, isFunction, isNil } from '@antv/util'; import { Params } from '../../core/adaptor'; import { tooltip, interaction, animation, theme } from '../../common/adaptor'; import { flow } from '../../utils'; @@ -14,7 +14,14 @@ function field(params: Params): Params { const { chart, options } = params; const { data, angleField, colorField, color } = options; - chart.data(data); + // 处理不合法的数据 + const progressData = filter(data, (d) => typeof d[angleField] === 'number' || isNil(d[angleField])); + if (progressData.length !== data.length) { + // 先打印出来,后面统一界面提示 + console.error('数据源存在不合适的数据,请检查'); + } + + chart.data(progressData); const geometry = chart.interval().position(`1*${angleField}`).adjust({ type: 'stack' }); if (colorField) {