fix: percent-stacked-column tooltip is not a number (#1233)

* modified News

* fix(not a number): percent-stacked-column tooltip not a number

* fix(not a number): percent-stacked-column tooltip is not a number

Co-authored-by: liufu.lf <liufu.lf@antfin.com>

Author: lxfu1

__tests__/bugs/issue-821-spec.ts

@@ -0,0 +1,134 @@
+import { PercentStackedColumn } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('#1005', () => {
+  const data = [
+    {
+      country: 'Asia',
+      year: '1750',
+      value: 0,
+    },
+    {
+      country: 'Asia',
+      year: '1800',
+      value: 635,
+    },
+    {
+      country: 'Asia',
+      year: '1850',
+      value: 809,
+    },
+    {
+      country: 'Asia',
+      year: '1900',
+      value: 947,
+    },
+    {
+      country: 'Asia',
+      year: '1950',
+      value: 1402,
+    },
+    {
+      country: 'Asia',
+      year: '1999',
+      value: 3634,
+    },
+    {
+      country: 'Asia',
+      year: '2050',
+      value: 5268,
+    },
+    {
+      country: 'Africa',
+      year: '1750',
+      value: 0,
+    },
+    {
+      country: 'Africa',
+      year: '1800',
+      value: 107,
+    },
+    {
+      country: 'Africa',
+      year: '1850',
+      value: 111,
+    },
+    {
+      country: 'Africa',
+      year: '1900',
+      value: 133,
+    },
+    {
+      country: 'Africa',
+      year: '1950',
+      value: 221,
+    },
+    {
+      country: 'Africa',
+      year: '1999',
+      value: 767,
+    },
+    {
+      country: 'Africa',
+      year: '2050',
+      value: 1766,
+    },
+    {
+      country: 'Europe',
+      year: '1750',
+      value: 0,
+    },
+    {
+      country: 'Europe',
+      year: '1800',
+      value: 203,
+    },
+    {
+      country: 'Europe',
+      year: '1850',
+      value: 276,
+    },
+    {
+      country: 'Europe',
+      year: '1900',
+      value: 408,
+    },
+    {
+      country: 'Europe',
+      year: '1950',
+      value: 547,
+    },
+    {
+      country: 'Europe',
+      year: '1999',
+      value: 729,
+    },
+    {
+      country: 'Europe',
+      year: '2050',
+      value: 628,
+    },
+  ];
+  const plot = new PercentStackedColumn(createDiv(), {
+    title: {
+      visible: true,
+      text: '百分比堆叠柱状图',
+    },
+    forceFit: true,
+    data,
+    xField: 'year',
+    yField: 'value',
+    stackField: 'country',
+    color: ['#0f759c', '#26a2cb', '#65d1fc'],
+  });
+  plot.render();
+
+  it('render', () => {
+    const view = plot.getLayer().view;
+    const element = view.geometries[0].elements[0];
+    const bbox = element.getBBox();
+    view.showTooltip({ x: bbox.minX + 10, y: bbox.minY + 10 });
+    // tooltip
+    expect(document.getElementsByClassName('g2-tooltip-value')[0].innerHTML).toBe('0.0%');
+  });
+});

src/util/data.ts

@@ -25,8 +25,9 @@ export const transformDataPercentage = (data: DataItem[], groupField: string, me
     const rst = { ...item, _origin: item, total: groupTotals[item[groupField]] };
     each(measures, (field) => {
       // @ts-ignore
-      rst[field] = item[field] / groupTotals[item[groupField]];
+      rst[field] = item[field] / (groupTotals[item[groupField]] || 1);
     });
+
     return rst;
   });
 
@@ -36,15 +37,14 @@ export const transformDataPercentage = (data: DataItem[], groupField: string, me
     each(items, (item: DataItem, itemIdx: number) => {
       each(measures, (field: string, fieldIdx: number) => {
         // @ts-ignore
-        if (sum + item[field] >= 1 || (itemIdx === items.length - 1 && fieldIdx === measures.length - 1)) {
+        if (sum + item[field] >= 1 || (itemIdx === items.length - 1 && fieldIdx === measures.length - 1 && sum > 0)) {
           item[field] = 1 - sum;
         }
         // @ts-ignore
         sum += item[field];
       });
     });
   });
-
   // @ts-ignore
   return newData;
 };