feat(pie-outer-label): 新增自定义饼图outer-label

        1. 替代旧outer label
        2. 添加了测试单例

Author: xinming

__tests__/unit/pie-label-spec.ts

@@ -0,0 +1,169 @@
+import { Pie } from '../../src';
+import { Shape, BBox } from '@antv/g';
+import * as _ from '@antv/util';
+import { getElementLabels } from '@antv/g2';
+
+const createDiv = (id: string, parent?: HTMLDivElement) => {
+  const canvasDiv = document.createElement('div');
+  canvasDiv.style.width = '400px';
+  canvasDiv.style.height = '400px';
+  canvasDiv.style.margin = '0 auto 10px';
+  canvasDiv.style.border = '1px solid #eee';
+  canvasDiv.id = id;
+  parent ? parent.appendChild(canvasDiv) : document.body.appendChild(canvasDiv);
+  return canvasDiv;
+};
+
+const createRangeInput = (onClick: (val: number) => void, initialValue: number = 0, parentDOM?: HTMLDivElement) => {
+  const spanGroup = document.createElement('span');
+  const span = document.createElement('span');
+  span.style.color = '#333';
+  span.style.display = 'inline-block';
+  span.style.fontSize = '14px';
+  span.style.padding = '0 4px 0 8px';
+  const rangeBtn = document.createElement('input');
+  rangeBtn.type = 'range';
+  rangeBtn.value = `${initialValue}`;
+  span.innerHTML = `${initialValue}`;
+  rangeBtn.onchange = (e) => {
+    // @ts-ignore
+    const value = e.target.value;
+    onClick(value);
+    span.innerHTML = value;
+  };
+  parentDOM ? parentDOM.appendChild(spanGroup) : document.body.appendChild(spanGroup);
+  spanGroup.appendChild(span);
+  spanGroup.appendChild(rangeBtn);
+};
+
+describe('Pie plot with outer-label', () => {
+  it('get outer-label', () => {
+    expect(getElementLabels('outer')).toBeDefined();
+  });
+
+  const group1 = document.createElement('div');
+  document.body.appendChild(group1);
+  // @ts-ignore
+  group1.style = `margin: 10px auto;width: 420px;border: 1px solid #aaaaaa2b;padding: 16px;font-size: 14px;color:#333;`;
+  const canvasDiv = createDiv('div1', group1);
+  const pieConfig = {
+    forceFit: true,
+    padding: [16, 0, 0, 0],
+    angleField: 'value',
+    colorField: 'type',
+    radius: 0.6,
+    legend: {
+      visible: false,
+    },
+    pieStyle: {
+      lineWidth: 0,
+    },
+  };
+
+  const data = [];
+  for (let i = 0; i < 16; i++) {
+    data.push({ type: `分类 ${i + 1}`, value: 10 + Math.random() * 100 });
+  }
+
+  // 记录 label 可视率
+  const labelVisibleRecordDiv = document.createElement('span');
+  group1.appendChild(labelVisibleRecordDiv);
+
+  const piePlot = new Pie(canvasDiv, {
+    ...pieConfig,
+    data,
+    label: {
+      visible: true,
+      type: 'outer',
+      formatter: (text, item) => {
+        return `${item._origin['type']} (${item._origin['value'].toFixed(2)})`;
+      },
+    },
+  });
+  piePlot.render();
+  const plot = piePlot.getLayer().view;
+  const element = plot.get('elements')[0];
+
+  // 半径 切换器
+  createRangeInput(
+    (value) => {
+      piePlot.updateConfig({ radius: value / 100 });
+      piePlot.render();
+      const plot = piePlot.getLayer().view;
+      const element = plot.get('elements')[0];
+      calcVisibleRate(element.get('labels'), labelVisibleRecordDiv);
+    },
+    pieConfig.radius * 100,
+    group1
+  );
+
+  it('all labels visible', () => {
+    const labelShapes: Shape[] = element.get('labels');
+    if (data.length < 30) {
+      labelShapes.forEach((label) => {
+        expect(label.get('visible')).toBe(true);
+      });
+    }
+  });
+
+  it('all labels outside pie', () => {
+    const labelShapes: Shape[] = element.get('labels');
+    const coord = plot.get('coord');
+    labelShapes.forEach((label) => {
+      const distX = Math.abs(coord.getCenter().x - label.attr('x'));
+      const distY = Math.abs(coord.getCenter().y - label.attr('y'));
+      const dist = Math.sqrt(distX * distX + distY * distY);
+      expect(dist > coord.getRadius()).toBe(true);
+    });
+  });
+
+  it('all visible labels inside panel', () => {
+    function inPanel(panel: BBox, label: BBox): boolean {
+      return (
+        label.minX >= panel.minX && label.maxX <= panel.maxX && label.minY >= panel.minY && label.maxY <= panel.maxY
+      );
+    }
+    const panel = plot.get('panelRange');
+    const labelShapes: Shape[] = _.filter(element.get('labels'), (l) => l.get('visible'));
+    labelShapes.forEach((l) => {
+      expect(inPanel(panel, l.getBBox())).toBe(true);
+    });
+  });
+
+  it('no label overlap', () => {
+    function checkOverlap(a: BBox, b: BBox): boolean {
+      const xOverlap = Math.max(0, Math.min(a.maxX, b.maxX) - Math.max(a.x, b.x));
+      const yOverlap = Math.max(0, Math.min(a.maxY, b.maxY) - Math.max(a.y, b.y));
+      if (xOverlap * yOverlap) return true;
+      return false;
+    }
+    const labelShapes: Shape[] = _.filter(element.get('labels'), (l) => l.get('visible'));
+    labelShapes.forEach((l, idx) => {
+      for (let i = 0; i < labelShapes.length; i++) {
+        if (i !== idx) {
+          expect(checkOverlap(l.getBBox(), labelShapes[i].getBBox())).toBe(false);
+        }
+      }
+    });
+  });
+
+  function calcVisibleRate(labelShapes: Shape[], div: HTMLElement) {
+    const visibleLabels: Shape[] = _.filter(labelShapes, (l) => l.get('visible'));
+
+    const visibleRate = visibleLabels.length / labelShapes.length;
+    div.innerHTML = `label 可见率: ${visibleRate * 100}%`;
+    return visibleRate;
+  }
+
+  it('label 可见率 > 90%(data count < 90)', () => {
+    const labelShapes: Shape[] = element.get('labels');
+    const visibleRate = calcVisibleRate(labelShapes, labelVisibleRecordDiv);
+    if (data.length < 90) {
+      expect(visibleRate > 0.9).toBe(true);
+    }
+  });
+
+  afterAll(() => {
+    // piePlot.destroy();
+  });
+});

__tests__/unit/pie-upgradeLabel-spec.ts

@@ -0,0 +1,41 @@
+import { getEllipsisText, measureTextWidth } from '../../src/plots/pie/component/label/utils/text';
+
+const FONT = {
+  fontSize: 10,
+  fontFamily: 'serif',
+};
+
+describe('measure-text', () => {
+  it('measureTextWidth', () => {
+    expect(measureTextWidth('蚂蚁')).toEqual(measureTextWidth('蚂') + measureTextWidth('蚁'));
+
+    expect(measureTextWidth('蚂蚁', FONT)).toBe(20);
+    expect(measureTextWidth('东...', FONT)).toBeLessThan(measureTextWidth('东北', FONT));
+  });
+
+  it('change font', () => {
+    const newFont = { ...FONT, fontSize: 20 };
+    expect(measureTextWidth('hello', newFont)).not.toEqual(measureTextWidth('hello', FONT));
+  });
+
+  it('getEllipsisText', () => {
+    expect(getEllipsisText('蚂蚁是一个什么公司了？', 54, FONT).endsWith('...')).toEqual(true);
+    expect(getEllipsisText('蚂蚁是一个什么公司了？', 44, FONT)).toEqual('蚂蚁是...');
+    expect(getEllipsisText('hello', 50, FONT)).toEqual('hello');
+
+    // measureTextWidth('东北') = 20
+    expect(getEllipsisText('东北', 19, FONT)).toEqual('东...');
+    expect(getEllipsisText('东北', 20, FONT)).toEqual('东北');
+
+    expect(getEllipsisText('东北东北东北东北东北东北东北东北东北东北', 199, FONT)).toBe(
+      '东北东北东北东北东北东北东北东北东北东...'
+    );
+    expect(getEllipsisText('东北东北东北东北东北东北东北东北东北东北', 200, FONT)).toBe(
+      '东北东北东北东北东北东北东北东北东北东北'
+    );
+  });
+
+  it('area getEllipsisText', () => {
+    expect(getEllipsisText('city', 24, FONT)).toBe('city');
+  });
+});