fix: funnel undefined render (#2150)

Co-authored-by: aiyin.lzy <[email protected]>

Author: liuzhenying

__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,15 +83,37 @@ 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]
         .getController('annotation')
         .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();
   });

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;
   });
 

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;
   });