fix: pie tooltip (#2312)

* fix(issue-2220): 修复饼图 tooltip 配置问题

close: #2220

* test(pie-tooltip): 饼图 tooltip 添加单测

* test(pie-adaptor): 补充单测

Co-authored-by: kasmine <visiky>

Author: visiky

__tests__/bugs/issue-2220-spec.ts

@@ -0,0 +1,60 @@
+import { Pie } from '../../src/plots/pie';
+import { delay } from '../utils/delay';
+import { createDiv } from '../utils/dom';
+
+describe('pie tooltip', () => {
+  const div = createDiv();
+  const data = [
+    { type: 'x', value: 0, city: 'HZ' },
+    { type: 'y', value: 0, city: 'SZ' },
+  ];
+  const pie = new Pie(div, {
+    data,
+    angleField: 'value',
+    colorField: 'type',
+  });
+  pie.render();
+
+  it('#2220, tooltip display not same as normal when data ara all zero', async () => {
+    const box = pie.chart.geometries[0].elements[0].shape.getBBox();
+    const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+
+    await delay(100);
+    pie.chart.showTooltip(point);
+    await delay(100);
+    const tooltipName = div.querySelector('.g2-tooltip .g2-tooltip-name');
+    expect((tooltipName as HTMLElement).innerText).toBe('x');
+  });
+
+  it('formatter works. before: when fields is empty, formatter not works', async () => {
+    pie.update({ tooltip: { fields: [], formatter: () => ({ name: 'xxx', value: 'yyy' }) } });
+    const tooltipController = pie.chart.getController('tooltip');
+    const box = pie.chart.geometries[0].elements[0].shape.getBBox();
+    const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+
+    await delay(100);
+    pie.chart.showTooltip(point);
+    await delay(100);
+    // @ts-ignore
+    let items = tooltipController.getTooltipItems(point);
+    expect(items[0].name).toBe('xxx');
+    expect(items[0].value).toBe('yyy');
+
+    pie.update({ tooltip: { fields: null, formatter: () => ({ name: 'xxx', value: 'yyy' }) } });
+
+    pie.chart.showTooltip(point);
+    await delay(100);
+    // @ts-ignore
+    items = tooltipController.getTooltipItems(point);
+    expect(items[0].name).toBe('xxx');
+    expect(items[0].value).toBe('yyy');
+  });
+
+  afterEach(() => {
+    pie.chart.clear();
+  });
+
+  afterAll(() => {
+    pie.destroy();
+  });
+});

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

@@ -44,7 +44,8 @@ describe('饼图 异常数据', () => {
   });
 
   it('数据全部为 0, 设置 angleField meta', async () => {
-    const pie = new Pie(createDiv(), {
+    const div = createDiv();
+    const pie = new Pie(div, {
       width: 400,
       height: 400,
       data,
@@ -70,10 +71,12 @@ describe('饼图 异常数据', () => {
     const labels = pie.chart.geometries[0].labelsContainer.getChildren();
     expect(every(labels, (label) => (label as IGroup).getChildren()[0].attr('text') === '0 个')).toBe(true);
 
+    // 数据全 0 的时候，tooltip-items 应该和正常保持一致，只有一条
     const positionFields = pie.chart.geometries[0].getAttribute('position').getFields();
     const point = pie.chart.getXY({ 1: data[0].type, [positionFields[1]]: 1 / data.length });
     const tooltipItems = pie.chart.getTooltipItems(point);
-    expect(tooltipItems[1].value).toBe('0 个');
+    expect(tooltipItems[0].name).toBe(data[0].type);
+    expect(tooltipItems[0].value).toBe(0);
 
     pie.destroy();
   });
@@ -120,7 +123,7 @@ describe('饼图 异常数据', () => {
     expect(every(labels, (label) => (label as IGroup).getChildren()[0].attr('text') === 1)).toBe(true);
     const point = pie.chart.getXY({ 1: '类型 1', value: 1 });
     const tooltipItems = pie.chart.getTooltipItems(point);
-    expect(tooltipItems[0].value).toBe('1');
+    expect(tooltipItems[0].value).toBe(1);
 
     pie.destroy();
   });

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

@@ -73,6 +73,10 @@ describe('中心文本 - 指标卡', () => {
     pie.update({ meta: { value: { formatter: (v) => `${v}¥` } }, statistic: { content: {} } });
     htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
     expect((htmlAnnotations[1] as HTMLElement).innerText).toBe(`${data.reduce((a, b) => a + b.value, 0)}¥`);
+
+    pie.update({ meta: { value: { formatter: undefined } }, statistic: { content: {} } });
+    htmlAnnotations = document.querySelectorAll('.g2-html-annotation');
+    expect((htmlAnnotations[1] as HTMLElement).innerText).toBe(`${data.reduce((a, b) => a + b.value, 0)}`);
   });
 
   it('自定义中心文本内容: update statistic title & content', () => {

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

@@ -0,0 +1,57 @@
+import { Pie } from '../../../../src/plots/pie';
+import { delay } from '../../../utils/delay';
+import { createDiv } from '../../../utils/dom';
+
+describe('pie tooltip', () => {
+  const div = createDiv();
+  const data = [
+    { type: 'x', value: 0, city: 'HZ' },
+    { type: 'y', value: 0, city: 'SZ' },
+  ];
+  const pie = new Pie(div, {
+    data,
+    angleField: 'value',
+    colorField: 'type',
+  });
+  pie.render();
+
+  it('close tooltip', () => {
+    // @ts-ignore
+    expect(pie.chart.options.tooltip).not.toBe(false);
+    // @ts-ignore
+    expect(pie.chart.getController('tooltip').isVisible()).toBe(true);
+    pie.update({ tooltip: false });
+    // @ts-ignore
+    expect(pie.chart.options.tooltip).toBe(false);
+    // @ts-ignore
+    expect(pie.chart.getController('tooltip').isVisible()).toBe(false);
+  });
+
+  it('formatter work in normal cases', async () => {
+    pie.update({
+      tooltip: {
+        fields: ['type', 'value', 'city'],
+        formatter: (datum) => ({ name: `${datum.city}-${datum.type}`, value: `${datum.value}-xxxx` }),
+      },
+    });
+
+    const tooltipController = pie.chart.getController('tooltip');
+    const box = pie.chart.geometries[0].elements[0].shape.getBBox();
+    const point = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+
+    pie.chart.showTooltip(point);
+    await delay(100);
+    // @ts-ignore
+    const items = tooltipController.getTooltipItems(point);
+    expect(items[0].name).toBe(`${data[0].city}-${data[0].type}`);
+    expect(items[0].value).toBe(`${data[0].value}-xxxx`);
+  });
+
+  afterEach(() => {
+    pie.chart.clear();
+  });
+
+  afterAll(() => {
+    pie.destroy();
+  });
+});

src/plots/pie/adaptor.ts

@@ -1,6 +1,7 @@
 import { isFunction, isString, isNil, get, isArray, isNumber } from '@antv/util';
 import { Params } from '../../core/adaptor';
-import { legend, tooltip, interaction, animation, theme, state, annotation } from '../../adaptor/common';
+import { legend, interaction, animation, theme, state, annotation } from '../../adaptor/common';
+import { getMappingFunction } from '../../adaptor/geometries/base';
 import { interval } from '../../adaptor/geometries';
 import { flow, template, transformLabel, deepAssign, renderStatistic } from '../../utils';
 import { DEFAULT_OPTIONS } from './contants';
@@ -41,9 +42,6 @@ function geometry(params: Params<PieOptions>): Params<PieOptions> {
     });
 
     interval(p);
-
-    // all zero 额外处理
-    chart.geometries[0].tooltip(`${colorField}*${angleField}`);
   } else {
     chart.data(processData);
 
@@ -208,13 +206,30 @@ export function pieAnnotation(params: Params<PieOptions>): Params<PieOptions> {
 }
 
 /**
- * 饼图 tooltip 配置适配，强制 tooltip.shared 为 false
+ * 饼图 tooltip 配置
+ * 1. 强制 tooltip.shared 为 false
  * @param params
  */
-function adaptorTooltipOptions(params: Params<PieOptions>): Params<PieOptions> {
-  return get(params, ['options', 'tooltip']) !== false
-    ? deepAssign({}, params, { options: { tooltip: { shared: false } } })
-    : params;
+function tooltip(params: Params<PieOptions>): Params<PieOptions> {
+  const { chart, options } = params;
+  const { tooltip, colorField, angleField } = options;
+
+  if (tooltip === false) {
+    chart.tooltip(tooltip);
+  } else {
+    chart.tooltip(deepAssign({}, tooltip, { shared: false }));
+
+    const fields = get(tooltip, 'fields') || [colorField, angleField];
+    let formatter = get(tooltip, 'formatter');
+
+    if (!formatter) {
+      // 主要解决 all zero， 对于非 all zero 也适用
+      formatter = (datum) => ({ name: datum[colorField], value: datum[angleField] });
+    }
+    chart.geometries[0].tooltip(fields.join('*'), getMappingFunction(fields, formatter));
+  }
+
+  return params;
 }
 
 /**
@@ -230,7 +245,7 @@ export function adaptor(params: Params<PieOptions>) {
     theme,
     coordinate,
     legend,
-    (args) => tooltip(adaptorTooltipOptions(args)),
+    tooltip,
     label,
     state,
     /** 指标卡中心文本 放在下层 */