feat(v2/pie-label): add pie options (#1296)

Co-authored-by: kasmine<[email protected]>

Author: visiky

__tests__/unit/plots/pie/index-spec.ts

@@ -62,9 +62,6 @@ describe('pie', () => {
     const polarRadius = coordinate.getRadius();
     expect(radius).toBeUndefined();
     expect(polarRadius).toBeGreaterThan(0);
-
-    const geometry = pie.chart.geometries[0];
-    const elements = geometry.elements;
   });
 
   it('innerRadius', () => {

__tests__/unit/plots/pie/label-spec.ts

@@ -0,0 +1,98 @@
+import { Pie } from '../../../../src';
+import { POSITIVE_NEGATIVE_DATA } from '../../../data/common';
+import { createDiv } from '../../../utils/dom';
+import { IGroup } from '@antv/g2/lib/dependents';
+
+describe('pie label', () => {
+  const data = POSITIVE_NEGATIVE_DATA.filter((o) => o.value > 0).map((d, idx) =>
+    idx === 1 ? { ...d, type: 'item1' } : d
+  );
+
+  const config = {
+    width: 400,
+    height: 300,
+    data,
+    angleField: 'value',
+    colorField: 'type',
+    radius: 0.8,
+    label: {},
+  };
+
+  it('label: visible', () => {
+    const pie = new Pie(createDiv(), config);
+
+    pie.render();
+
+    const geometry = pie.chart.geometries[0];
+    const elements = geometry.elements;
+    const labelGroups = geometry.labelsContainer.getChildren();
+
+    expect(elements.length).toBe(data.length);
+    expect(labelGroups.length).toBe(data.length);
+  });
+
+  it.skip('label: single color(todo-hustcc: 没有 color 字段，label 显示错误)', () => {
+    const pie = new Pie(createDiv(), {
+      ...config,
+      colorField: null,
+    });
+
+    pie.render();
+
+    const geometry = pie.chart.geometries[0];
+    const labelGroups = geometry.labelsContainer.getChildren();
+
+    expect(labelGroups.length).toBe(data.length);
+  });
+
+  it('label: custom content', () => {
+    const pie = new Pie(createDiv(), {
+      ...config,
+      label: {
+        content: (data, item, idx) => {
+          if (idx === 0 || idx === 1) {
+            return 'hello';
+          }
+          const { type, value } = data;
+          return `${type}: ${value}`;
+        },
+      },
+    });
+
+    pie.render();
+
+    const geometry = pie.chart.geometries[0];
+    const labelGroups = geometry.labelsContainer.getChildren();
+    expect(labelGroups.length).toBe(data.length);
+    const label1 = (labelGroups[0] as IGroup).getChildren();
+    expect(label1[0].get('type')).toBe('text');
+    expect(label1[1].get('type')).toBe('path');
+    expect(label1[0].attr('text')).toBe('hello');
+    const label2 = (labelGroups[1] as IGroup).getChildren();
+    expect(label2[0].attr('text')).toBe('hello');
+  });
+
+  it('label: custom callback', () => {
+    const pie = new Pie(createDiv(), {
+      ...config,
+      label: {
+        callback: (value, type) => {
+          return {
+            content: `${type}: ${value}`,
+          };
+        },
+      },
+    });
+
+    pie.render();
+
+    const geometry = pie.chart.geometries[0];
+    const labelGroups = geometry.labelsContainer.getChildren();
+
+    expect(labelGroups.length).toBe(data.length);
+    const label1 = (labelGroups[0] as IGroup).getChildren();
+    const label3 = (labelGroups[2] as IGroup).getChildren();
+    expect(label1[0].attr('text')).toBe(`${data[0].type}: ${data[0].value}`);
+    expect(label3[0].attr('text')).toBe(`${data[2].type}: ${data[2].value}`);
+  });
+});

src/plots/pie/adaptor.ts

@@ -74,6 +74,29 @@ function legend(params: Params<PieOptions>): Params<PieOptions> {
   return params;
 }
 
+/**
+ * label 配置
+ * @param params
+ */
+function label(params: Params<PieOptions>): Params<PieOptions> {
+  const { chart, options } = params;
+  const { label, colorField, angleField } = options;
+
+  const geometry = chart.geometries[0];
+  // label 为 false, 空 则不显示 label
+  if (!label) {
+    geometry.label(false);
+  } else {
+    const { callback, ...cfg } = label;
+    geometry.label({
+      fields: [angleField, colorField],
+      callback,
+      cfg,
+    });
+  }
+  return params;
+}
+
 /**
  * style 配置
  * @param params
@@ -102,5 +125,5 @@ function style(params: Params<PieOptions>): Params<PieOptions> {
  */
 export function adaptor(params: Params<PieOptions>) {
   // flow 的方式处理所有的配置到 G2 API
-  flow(field, meta, coord, legend, tooltip, style)(params);
+  flow(field, meta, coord, legend, tooltip, label, style)(params);
 }