fix(pie): 修复饼图数据全为 0 展示 (#1223)

close: #1161

Co-authored-by: xinming <xinming.lxj@antfin.com>

Author: visiky

__tests__/bugs/issue-1161-spec.ts

@@ -0,0 +1,108 @@
+import { isFinite } from '@antv/util';
+import { Pie } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('#1161: 饼图数据全空的展示优化处理', () => {
+  const config = {
+    data: [
+      { type: '分类一', value: 0 },
+      { type: '分类二', value: 0 },
+      { type: '分类三', value: 0 },
+      { type: '分类四', value: 0 },
+    ],
+    angleField: 'value',
+    colorField: 'type',
+    pieStyle: {
+      // 不描边,避免影响计算
+      lineWidth: 0,
+    },
+  };
+
+  it('数据全为 0: element 均分展示', () => {
+    const div = createDiv();
+    const pie = new Pie(div, config);
+    pie.render();
+    const elements = pie.getLayer().getPlot().geometries[0].elements;
+    expect(elements.length).toBe(4);
+
+    const box1 = elements[0].getBBox();
+    const box2 = elements[1].getBBox();
+    const box3 = elements[2].getBBox();
+    const box4 = elements[3].getBBox();
+    expect(box1.x).toBeCloseTo(box2.x);
+    expect(box1.minX).toBeCloseTo(box2.minX);
+    expect(box1.maxX).toBeCloseTo(box2.maxX);
+    expect(box1.x).not.toBeCloseTo(box3.x);
+
+    expect(box1.y).toBeCloseTo(box4.y);
+    expect(box1.maxY).toBeCloseTo(box4.maxY);
+    expect(box1.y).not.toBeCloseTo(box3.y);
+
+    expect(box4.x).toBeCloseTo(box3.x);
+    expect(box4.minX).toBeCloseTo(box3.minX);
+    expect(box4.maxX).toBeCloseTo(box3.maxX);
+
+    expect(box2.y).toBeCloseTo(box3.y);
+    expect(box2.maxY).toBeCloseTo(box3.maxY);
+  });
+
+  it('数据全为空，部分为 0,部分为 null: 0 值的 element 均分展示', () => {
+    const div = createDiv();
+    const pie = new Pie(div, { ...config, data: config.data.concat({ type: '分类五', value: null }) });
+    pie.render();
+    const elements = pie.getLayer().getPlot().geometries[0].elements;
+    expect(elements.length).toBe(5);
+    const box1 = elements[0].getBBox();
+    const box2 = elements[1].getBBox();
+    const box3 = elements[2].getBBox();
+    const box4 = elements[3].getBBox();
+    const box5 = elements[4].getBBox();
+
+    expect(box1.x).toBeCloseTo(box2.x);
+    expect(box1.minX).toBeCloseTo(box2.minX);
+    expect(box1.maxX).toBeCloseTo(box2.maxX);
+    expect(box1.x).not.toBeCloseTo(box3.x);
+
+    expect(box1.y).toBeCloseTo(box4.y);
+    expect(box1.maxY).toBeCloseTo(box4.maxY);
+    expect(box1.y).not.toBeCloseTo(box3.y);
+
+    expect(box4.x).toBeCloseTo(box3.x);
+    expect(box4.minX).toBeCloseTo(box3.minX);
+    expect(box4.maxX).toBeCloseTo(box3.maxX);
+
+    expect(box2.y).toBeCloseTo(box3.y);
+    expect(box2.maxY).toBeCloseTo(box3.maxY);
+
+    if (isFinite(box5.width)) {
+      expect(box5.width).toBeCloseTo(1);
+    }
+  });
+
+  it('数据全为空，且全部为 null: element 均分展示', () => {
+    const div = createDiv();
+    const pie = new Pie(div, { ...config, data: config.data.map((v) => ({ ...v, value: null })) });
+    pie.render();
+    const elements = pie.getLayer().getPlot().geometries[0].elements;
+    expect(elements.length).toBe(4);
+    const box1 = elements[0].getBBox();
+    const box2 = elements[1].getBBox();
+    const box3 = elements[2].getBBox();
+    const box4 = elements[3].getBBox();
+    expect(box1.x).toBeCloseTo(box2.x);
+    expect(box1.minX).toBeCloseTo(box2.minX);
+    expect(box1.maxX).toBeCloseTo(box2.maxX);
+    expect(box1.x).not.toBeCloseTo(box3.x);
+
+    expect(box1.y).toBeCloseTo(box4.y);
+    expect(box1.maxY).toBeCloseTo(box4.maxY);
+    expect(box1.y).not.toBeCloseTo(box3.y);
+
+    expect(box4.x).toBeCloseTo(box3.x);
+    expect(box4.minX).toBeCloseTo(box3.minX);
+    expect(box4.maxX).toBeCloseTo(box3.maxX);
+
+    expect(box2.y).toBeCloseTo(box3.y);
+    expect(box2.maxY).toBeCloseTo(box3.maxY);
+  });
+});

examples/line/multiple/demo/marker-active.js

@@ -1,5 +1,5 @@
 import { Line } from '@antv/g2plot';
-import * as _ from '@antv/util';
+import { uniq, findIndex } from '@antv/util';
 
 fetch('../data/emissions.json')
   .then((res) => res.json())
@@ -19,7 +19,7 @@ fetch('../data/emissions.json')
 
     const container = document.getElementById('container');
     const containerBox = container.getBoundingClientRect();
-    const series = _.uniq(data.map((d) => d.category));
+    const series = uniq(data.map((d) => d.category));
     const markerSize = 6;
 
     const linePlot = new Line(container, {
@@ -74,7 +74,7 @@ fetch('../data/emissions.json')
             lineWidth,
             fill,
             r,
-            stroke: COLOR_PLATE_10[_.findIndex(series, (s) => s === seriesField)] || 'transparent',
+            stroke: COLOR_PLATE_10[findIndex(series, (s) => s === seriesField)] || 'transparent',
           };
         },
       },

src/plots/pie/layer.ts

@@ -1,4 +1,4 @@
-import { deepMix } from '@antv/util';
+import { deepMix, isNil, map, some, every } from '@antv/util';
 import * as EventParser from './event';
 import ViewLayer, { ViewConfig } from '../../base/view-layer';
 import { DataItem, Label, GraphicStyle } from '../../interface/config';
@@ -126,10 +126,28 @@ export default class PieLayer<T extends PieLayerConfig = PieLayerConfig> extends
 
   protected processData(data?: DataItem[]): DataItem[] | undefined {
     const key = this.options.angleField;
-    return data.map((item) => ({
+    const originalData = data.map((item) => ({
       ...item,
       [key]: typeof item[key] === 'string' ? Number.parseFloat(item[key] as 'string') : item[key],
     }));
+    const getValue = (d: DataItem) => d[key];
+    const notEqualZeroOrNil = (v: number) => v !== 0 && !isNil(v);
+    const allAngleValue = map(originalData, getValue);
+    const allNil = every(allAngleValue, isNil);
+    /** 数据全空处理，同时处理 meta */
+    if (!some(allAngleValue, notEqualZeroOrNil)) {
+      const meta = this.options.meta || {};
+      // 数据全为 null
+      if (allNil) {
+        this.options.meta = deepMix({}, meta, { [key]: { formatter: () => 'null' } });
+        return map(originalData, (d) => ({ ...d, [key]: allNil ? 1 : d[key] === 0 ? 1 : d[key] }));
+      } else {
+        // 数据不全为 null，部分 0 部分 null（null值不展示）
+        this.options.meta = deepMix({}, meta, { [key]: { formatter: () => '0' } });
+        return map(originalData, (d) => ({ ...d, [key]: d[key] === 0 ? 1 : d[key] }));
+      }
+    }
+    return originalData;
   }
 
   protected axis() {