From aa2c5ad894532a9704f123fcb50d9a34c93dc5f8 Mon Sep 17 00:00:00 2001 From: liuhang <1016817543@qq.com> Date: Tue, 23 Mar 2021 08:48:29 +0800 Subject: [PATCH 1/2] fix(radial-bar): filter illegal data (#2394) --- __tests__/bugs/issue-2394-spec.ts | 38 +++++++++++++++++++++++++++++++ src/plots/radial-bar/adaptor.ts | 34 +++++++++++++++++++++++---- 2 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 __tests__/bugs/issue-2394-spec.ts diff --git a/__tests__/bugs/issue-2394-spec.ts b/__tests__/bugs/issue-2394-spec.ts new file mode 100644 index 0000000000..3acdf0196c --- /dev/null +++ b/__tests__/bugs/issue-2394-spec.ts @@ -0,0 +1,38 @@ +import { RadialBar } from '../../src'; +import { createDiv } from '../utils/dom'; + +describe('#2394', () => { + it('filter illegal data', () => { + const data = [ + { name: 'X6', star: '297a' }, + { name: 'G', star: 506 }, + { name: 'AVA', star: 805 }, + { name: 'G2Plot', star: 1478 }, + { name: 'L7', star: 2029 }, + { name: 'G6', star: 7100 }, + { name: 'F2', star: 7346 }, + { name: 'G2', star: 10178 }, + ]; + + const radialBar = new RadialBar(createDiv(), { + data, + xField: 'name', + yField: 'star', + // maxAngle: 90, //最大旋转角度, + radius: 0.8, + innerRadius: 0.2, + tooltip: { + formatter: (datum) => { + return { name: 'star数', value: datum.star }; + }, + }, + }); + + radialBar.render(); + + expect(radialBar.chart.geometries[0].elements.length).toBe(7); + expect(radialBar.chart.geometries[0].data.length).toBe(7); + + radialBar.destroy(); + }); +}); diff --git a/src/plots/radial-bar/adaptor.ts b/src/plots/radial-bar/adaptor.ts index 3f77491645..5731eb7ec6 100644 --- a/src/plots/radial-bar/adaptor.ts +++ b/src/plots/radial-bar/adaptor.ts @@ -1,9 +1,30 @@ +import { filter } from '@antv/util'; import { interaction, animation, theme, scale, tooltip, legend, annotation } from '../../adaptor/common'; import { Params } from '../../core/adaptor'; -import { flow, deepAssign, findGeometry, transformLabel } from '../../utils'; +import { flow, deepAssign, findGeometry, transformLabel, log, LEVEL } from '../../utils'; import { interval, point } from '../../adaptor/geometries'; import { RadialBarOptions } from './types'; import { getScaleMax } from './utils'; +/** + * data 处理，过滤非法数据 + * @param params + */ +function data(params: Params): Params { + const { chart, options } = params; + const { data } = options; + const { yField } = options; + const processData = filter(data, (d) => { + const v = d[yField]; + return typeof v === 'number' && !isNaN(v); + }); + + // 打印异常数据情况 + log(LEVEL.WARN, processData.length === data.length, 'illegal data existed in chart data.'); + + chart.data(processData); + + return params; +} /** * geometry 处理 @@ -11,8 +32,7 @@ import { getScaleMax } from './utils'; */ function geometry(params: Params): Params { const { chart, options } = params; - const { data, barStyle: style, color, tooltip, colorField, type, xField, yField } = options; - chart.data(data); + const { barStyle: style, color, tooltip, colorField, type, xField, yField } = options; const p = deepAssign({}, params, { options: { tooltip, @@ -43,8 +63,11 @@ function geometry(params: Params): Params { * @param params */ export function meta(params: Params): Params { - const { options } = params; - const { yField, data, maxAngle } = options; + const { options, chart } = params; + const { yField, maxAngle } = options; + + // data使用chart.data()之后的，因为原始data中可能存在非法数据 + const { data } = chart.getOptions(); return flow( scale({ [yField]: { @@ -123,6 +146,7 @@ function label(params: Params): Params { */ export function adaptor(params: Params) { return flow( + data, geometry, meta, axis, From 115800cba1fa83adb4d19581acb3b25996e3d6b0 Mon Sep 17 00:00:00 2001 From: liuhang <1016817543@qq.com> Date: Tue, 23 Mar 2021 09:36:54 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(radial-bar):=20=E8=BF=87=E6=BB=A4?= =?UTF-8?q?=E4=B8=8D=E5=90=88=E6=B3=95=E6=95=B0=E6=8D=AE=E4=B8=8D=E5=8C=85?= =?UTF-8?q?=E5=90=ABnull=EF=BC=8C=E5=8D=95=E6=B5=8B=E5=A2=9E=E5=8A=A0?= =?UTF-8?q?=E6=96=AD=E8=A8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- __tests__/bugs/issue-2394-spec.ts | 19 ++++++++++++------- src/plots/radial-bar/adaptor.ts | 3 ++- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/__tests__/bugs/issue-2394-spec.ts b/__tests__/bugs/issue-2394-spec.ts index 3acdf0196c..4040677321 100644 --- a/__tests__/bugs/issue-2394-spec.ts +++ b/__tests__/bugs/issue-2394-spec.ts @@ -5,11 +5,11 @@ describe('#2394', () => { it('filter illegal data', () => { const data = [ { name: 'X6', star: '297a' }, - { name: 'G', star: 506 }, - { name: 'AVA', star: 805 }, - { name: 'G2Plot', star: 1478 }, - { name: 'L7', star: 2029 }, - { name: 'G6', star: 7100 }, + { name: 'G', star: NaN }, + { name: 'G2Plot', star: undefined }, + { name: 'L7', star: '0' }, + { name: 'AVA', star: null }, + { name: 'G6', star: 0 }, { name: 'F2', star: 7346 }, { name: 'G2', star: 10178 }, ]; @@ -30,8 +30,13 @@ describe('#2394', () => { radialBar.render(); - expect(radialBar.chart.geometries[0].elements.length).toBe(7); - expect(radialBar.chart.geometries[0].data.length).toBe(7); + expect(radialBar.chart.geometries[0].elements.length).toBe(4); + expect(radialBar.chart.geometries[0].data.length).toBe(4); + + // null认为是0，不过滤 + expect(radialBar.chart.geometries[0].data[0].star).toBeNull(); + + expect(radialBar.chart.geometries[0].data[1].star).toBe(0); radialBar.destroy(); }); diff --git a/src/plots/radial-bar/adaptor.ts b/src/plots/radial-bar/adaptor.ts index 5731eb7ec6..82f93896eb 100644 --- a/src/plots/radial-bar/adaptor.ts +++ b/src/plots/radial-bar/adaptor.ts @@ -13,9 +13,10 @@ function data(params: Params): Params { const { chart, options } = params; const { data } = options; const { yField } = options; + const processData = filter(data, (d) => { const v = d[yField]; - return typeof v === 'number' && !isNaN(v); + return (typeof v === 'number' && !isNaN(v)) || v === null; }); // 打印异常数据情况