fix(issue-2264): 修复瀑布图 formatter 不生效 (#2270)

* fix(issue-2264): 修复瀑布图 formatter 不生效

close: #2264

* fix: 修改 cr 建议

__tests__/bugs/issue-2264-spec.ts

@@ -0,0 +1,46 @@
+import { Waterfall } from '../../src';
+import { createDiv } from '../utils/dom';
+
+describe('#2264', () => {
+  const data = [
+    { type: '日用品', money: 300 },
+    { type: '伙食费', money: 900 },
+    { type: '交通费', money: -200 },
+    { type: '水电费', money: 300 },
+    { type: '房租', money: 1200 },
+    { type: '商场消费', money: 1000 },
+    { type: '应酬交际', money: 2000 },
+    { type: '总费用', money: 5900 },
+  ];
+
+  const waterfall = new Waterfall(createDiv(), {
+    width: 400,
+    height: 300,
+    xField: 'type',
+    yField: 'money',
+    data: data,
+    tooltip: {
+      formatter: () => {
+        return { name: 'name', value: 'test' };
+      },
+    },
+  });
+
+  it('tooltip formater could not works', () => {
+    waterfall.render();
+    const tooltipController = waterfall.chart.getController('tooltip');
+    // @ts-ignore
+    expect(tooltipController.isVisible()).toBe(true);
+    const box = waterfall.chart.geometries[0].elements[0].shape.getBBox();
+    // @ts-ignore
+    const items = tooltipController.getTooltipItems({ x: box.x + box.width / 2, y: box.y + box.height / 2 });
+    // @ts-ignore
+    expect(items[0].name).toBe('name');
+    // @ts-ignore
+    expect(items[0].value).toBe('test');
+  });
+
+  afterAll(() => {
+    waterfall.destroy();
+  });
+});

__tests__/unit/plots/waterfall/component-spec.ts

@@ -47,16 +47,25 @@ describe('waterfall components', () => {
     });
     // @ts-ignore
     expect(tooltipController.getTooltipCfg().showMarkers).toBe(true);
-    // @ts-ignore
-    expect(waterfall.chart.geometries[0].tooltipOption.fields[0]).toBe(
-      'sales'
-    ) /** 默认使用用户定义 yField 展示 tooltip */;
+    // @ts-ignore 默认使用用户定义 yField 展示 tooltip
+    expect(waterfall.chart.geometries[0].tooltipOption.fields[0]).toBe('sales');
     // @ts-ignore
     expect(waterfall.chart.options.tooltip.title).toBe('hello world');
-    waterfall.update({
-      ...waterfall.options,
-      tooltip: false,
-    });
+  });
+
+  it('tooltip: items', () => {
+    const tooltipController = waterfall.chart.getController('tooltip');
+    const box = waterfall.chart.geometries[0].elements[0].shape.getBBox();
+    // @ts-ignore
+    const items = tooltipController.getTooltipItems({ x: box.x + box.width / 2, y: box.y + box.height / 2 });
+    // @ts-ignore
+    expect(items[0].name).toBe('sales');
+    // @ts-ignore
+    expect(items[0].value).toBe(`${salesByArea[0].sales}`);
+  });
+
+  it('tooltip: not visible', () => {
+    waterfall.update({ tooltip: false });
     // @ts-ignore
     expect(waterfall.chart.options.tooltip).toBe(false);
     expect(waterfall.chart.getComponents().find((co) => co.type === 'tooltip')).toBe(undefined);

src/plots/waterfall/adaptor.ts

@@ -61,8 +61,6 @@ function geometry(params: Params<WaterfallOptions>): Params<WaterfallOptions> {
 
   // 将 waterfall leaderLineCfg 传入到自定义 shape 中
   geometry.customInfo({ leaderLine });
-  // 瀑布图默认以 yField 作为 tooltip 内容
-  geometry.tooltip(yField);
 
   return params;
 }
@@ -195,7 +193,7 @@ function label(params: Params<WaterfallOptions>): Params<WaterfallOptions> {
  */
 export function tooltip(params: Params<WaterfallOptions>): Params<WaterfallOptions> {
   const { chart, options } = params;
-  const { tooltip, yField } = options;
+  const { tooltip, xField, yField } = options;
 
   if (tooltip !== false) {
     chart.tooltip({
@@ -206,6 +204,9 @@ export function tooltip(params: Params<WaterfallOptions>): Params<WaterfallOptio
       fields: [yField],
       ...tooltip,
     });
+    // 瀑布图默认以 yField 作为 tooltip 内容
+    const geometry = chart.geometries[0];
+    tooltip?.formatter ? geometry.tooltip(`${xField}*${yField}`, tooltip.formatter) : geometry.tooltip(yField);
   } else {
     chart.tooltip(false);
   }