From b4772d3182dc0b3a68477904ae3fe90ebaea9452 Mon Sep 17 00:00:00 2001
From: "aiyin.lzy" <nadia.lzy@antfin.com>
Date: Sun, 27 Dec 2020 18:10:01 +0800
Subject: [PATCH] fix: funnel undefined render

---
 __tests__/bugs/issue-2124-spec.ts             | 33 ++++++++++++++++---
 src/plots/funnel/geometries/common.ts         | 12 +++----
 src/plots/funnel/geometries/dynamic-height.ts |  6 ++--
 3 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/__tests__/bugs/issue-2124-spec.ts b/__tests__/bugs/issue-2124-spec.ts
index 1bfcd6503e..87f403b550 100644
--- a/__tests__/bugs/issue-2124-spec.ts
+++ b/__tests__/bugs/issue-2124-spec.ts
@@ -8,6 +8,7 @@ const DATA1 = [
   { stage: '录取人数', number: 87 },
   { stage: '入职人数', number: null },
   { stage: '离职人数', number: 10 },
+  { stage: '回流人数' },
 ];
 
 const DATA2 = [
@@ -17,16 +18,18 @@ const DATA2 = [
   { stage: '录取人数', number: 87, company: 'A公司' },
   { stage: '入职人数', number: null, company: 'A公司' },
   { stage: '离职人数', number: 10, company: 'A公司' },
+  { stage: '回流人数', company: 'A公司' },
   { stage: '简历筛选', number: 303, company: 'B公司' },
   { stage: '初试人数', number: 0, company: 'B公司' },
   { stage: '复试人数', number: 153, company: 'B公司' },
   { stage: '录取人数', number: 117, company: 'B公司' },
   { stage: '入职人数', number: 79, company: 'B公司' },
   { stage: '离职人数', number: 15, company: 'B公司' },
+  { stage: '回流人数', company: 'B公司' },
 ];
 
 describe('#2124', () => {
-  it('Funnel 数据为 null, 0 不能报错', async () => {
+  it('Funnel 数据为 null, 0, undefined 不能报错', async () => {
     const plot = new Funnel(createDiv(), {
       data: DATA1,
       xField: 'stage',
@@ -42,7 +45,7 @@ describe('#2124', () => {
         .getController('annotation')
         .getComponents()
         .map((co) => co.component.cfg.text.content)
-    ).toEqual(['转化率: 59.68%', '转化率: -∞', '转化率: ∞', '转化率: -', '转化率: -']);
+    ).toEqual(['转化率: 59.68%', '转化率: -∞', '转化率: ∞', '转化率: -', '转化率: -', '转化率: -']);
 
     plot.destroy();
   });
@@ -80,7 +83,7 @@ describe('#2124', () => {
         .getComponents()
         .filter((co) => co.component.cfg.type === 'line')
         .map((co) => co.component.cfg.text.content)
-    ).toEqual(['转化率: 59.68%', '转化率: -∞', '转化率: ∞', '转化率: -', '转化率: -']);
+    ).toEqual(['转化率: 59.68%', '转化率: -∞', '转化率: ∞', '转化率: -', '转化率: -', '转化率: -']);
 
     expect(
       plot.chart.views[1]
@@ -88,7 +91,29 @@ describe('#2124', () => {
         .getComponents()
         .filter((co) => co.component.cfg.type === 'line')
         .map((co) => co.component.cfg.text.content)
-    ).toEqual(['转化率: -∞', '转化率: ∞', '转化率: 76.47%', '转化率: 67.52%', '转化率: 18.99%']);
+    ).toEqual(['转化率: -∞', '转化率: ∞', '转化率: 76.47%', '转化率: 67.52%', '转化率: 18.99%', '转化率: -']);
+
+    plot.destroy();
+  });
+
+  it('动态高度漏斗图', async () => {
+    const plot = new Funnel(createDiv(), {
+      data: DATA1,
+      xField: 'stage',
+      yField: 'number',
+      dynamicHeight: true,
+      legend: false,
+      minSize: 0.1,
+    });
+
+    plot.render();
+
+    expect(
+      plot.chart
+        .getController('annotation')
+        .getComponents()
+        .map((co) => co.component.cfg.text.content)
+    ).toEqual(['转化率: 59.68%', '转化率: -∞', '转化率: ∞', '转化率: -', '转化率: -', '转化率: -']);
 
     plot.destroy();
   });
diff --git a/src/plots/funnel/geometries/common.ts b/src/plots/funnel/geometries/common.ts
index 841a3a9ead..b6edd67b0c 100644
--- a/src/plots/funnel/geometries/common.ts
+++ b/src/plots/funnel/geometries/common.ts
@@ -22,13 +22,11 @@ export function transformData(
 
   // format 数据
   formatData = map(data, (row, index) => {
-    if (row[yField] !== undefined) {
-      const percent = row[yField] / maxYFieldValue;
-      row[FUNNEL_PERCENT] = percent;
-      row[FUNNEL_MAPPING_VALUE] = (max - min) * percent + min;
-      // 转化率数据存储前后数据
-      row[FUNNEL_CONVERSATION] = [get(data, [index - 1, yField]), row[yField]];
-    }
+    const percent = (row[yField] || 0) / maxYFieldValue;
+    row[FUNNEL_PERCENT] = percent;
+    row[FUNNEL_MAPPING_VALUE] = (max - min) * percent + min;
+    // 转化率数据存储前后数据
+    row[FUNNEL_CONVERSATION] = [get(data, [index - 1, yField]), row[yField]];
     return row;
   });
 
diff --git a/src/plots/funnel/geometries/dynamic-height.ts b/src/plots/funnel/geometries/dynamic-height.ts
index 2ea78a9824..89aedc872a 100644
--- a/src/plots/funnel/geometries/dynamic-height.ts
+++ b/src/plots/funnel/geometries/dynamic-height.ts
@@ -31,7 +31,7 @@ function field(params: Params<FunnelOptions>): Params<FunnelOptions> {
   const sum = reduce(
     data,
     (total, item) => {
-      return total + item[yField];
+      return total + (item[yField] || 0);
     },
     0
   );
@@ -43,7 +43,7 @@ function field(params: Params<FunnelOptions>): Params<FunnelOptions> {
     const x = [];
     const y = [];
 
-    row[FUNNEL_TOTAL_PERCENT] = row[yField] / sum;
+    row[FUNNEL_TOTAL_PERCENT] = (row[yField] || 0) / sum;
 
     // 获取左上角，右上角坐标
     if (index) {
@@ -69,7 +69,7 @@ function field(params: Params<FunnelOptions>): Params<FunnelOptions> {
     // 赋值
     row[PLOYGON_X] = x;
     row[PLOYGON_Y] = y;
-    row[FUNNEL_PERCENT] = row[yField] / max;
+    row[FUNNEL_PERCENT] = (row[yField] || 0) / max;
     row[FUNNEL_CONVERSATION] = [get(data, [index - 1, yField]), row[yField]];
     return row;
   });