From 0f2bd788c27a539822391aa197532ee43b821116 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mr=E5=B0=8F=E5=88=98?= <1016817543@qq.com>
Date: Tue, 23 Mar 2021 17:56:05 +0800
Subject: [PATCH] =?UTF-8?q?fix(radial-bar):=20=E4=BF=AE=E5=A4=8D=E7=8E=89?=
 =?UTF-8?q?=E9=92=B0=E5=9B=BE=E5=AD=98=E5=9C=A8=E9=9D=9E=E6=B3=95=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E5=B4=A9=E6=BA=83=E9=97=AE=E9=A2=98=20(#2394)=20(#244?=
 =?UTF-8?q?7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(radial-bar): filter illegal data (#2394)

* fix(radial-bar): 过滤不合法数据不包含null，单测增加断言
---
 __tests__/bugs/issue-2394-spec.ts | 43 +++++++++++++++++++++++++++++++
 src/plots/radial-bar/adaptor.ts   | 35 +++++++++++++++++++++----
 2 files changed, 73 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..4040677321
--- /dev/null
+++ b/__tests__/bugs/issue-2394-spec.ts
@@ -0,0 +1,43 @@
+import { RadialBar } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('#2394', () => {
+  it('filter illegal data', () => {
+    const data = [
+      { name: 'X6', star: '297a' },
+      { 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 },
+    ];
+
+    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(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 3f77491645..82f93896eb 100644
--- a/src/plots/radial-bar/adaptor.ts
+++ b/src/plots/radial-bar/adaptor.ts
@@ -1,9 +1,31 @@
+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<RadialBarOptions>): Params<RadialBarOptions> {
+  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)) || v === null;
+  });
+
+  // 打印异常数据情况
+  log(LEVEL.WARN, processData.length === data.length, 'illegal data existed in chart data.');
+
+  chart.data(processData);
+
+  return params;
+}
 
 /**
  * geometry 处理
@@ -11,8 +33,7 @@ import { getScaleMax } from './utils';
  */
 function geometry(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
   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 +64,11 @@ function geometry(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
  * @param params
  */
 export function meta(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
-  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 +147,7 @@ function label(params: Params<RadialBarOptions>): Params<RadialBarOptions> {
  */
 export function adaptor(params: Params<RadialBarOptions>) {
   return flow(
+    data,
     geometry,
     meta,
     axis,