fix: 修复分组 tooltip 的显示问题

packages/f2/src/components/tooltip/withTooltip.tsx

@@ -1,6 +1,6 @@
 import { jsx } from '../../jsx';
-import Component from '../../base/component';
 import { isArray, isFunction } from '@antv/util';
+import Component from '../../base/component';
 
 export default (View) => {
   return class Tooltip extends Component {
@@ -11,10 +11,21 @@ export default (View) => {
       };
     }
 
+    updateCoord() {
+      const { props, context } = this;
+      const { padding = '10px', chart } = props;
+
+      chart.updateCoordFor(this, { position: 'top', width: 0, height: context.px2hd(padding) });
+    }
+
+    willMount(): void {
+      this.updateCoord();
+    }
+
     didMount() {
       const { props } = this;
       const { chart, defaultItem } = props;
-      if(defaultItem) {
+      if (defaultItem) {
         const point = chart.getPosition(defaultItem);
         this.show(point);
       }
@@ -41,14 +52,26 @@ export default (View) => {
     show(point) {
       const { props } = this;
       const { chart, onChange } = props;
-      const records = chart.getSnapRecords(point);
-      if (isArray(records) && records.length > 0) {
-        this.setState({
-          records,
-        });
-        if (isFunction(onChange)) {
-          onChange(records);
-        }
+      const snapRecords = chart.getSnapRecords(point);
+
+      const records = snapRecords.map((record) => {
+        const { origin, xField, yField, x, y, color } = record;
+        const xScale = chart.getScale(xField);
+        const yScale = chart.getScale(yField);
+        const xText = xScale.getText(origin[xField]);
+        const yText = yScale.getText(origin[yField]);
+
+        return { origin, x, y, color, xField, yField, xText, yText };
+      });
+
+      if (!isArray(records) || !records.length) {
+        return;
+      }
+      this.setState({
+        records,
+      });
+      if (isFunction(onChange)) {
+        onChange(records);
       }
     }
 
@@ -57,13 +80,17 @@ export default (View) => {
         records: null,
       });
     }
+
     render() {
       const { props, state } = this;
       const { visible } = props;
       if (visible === false) {
         return null;
       }
-      return <View {...props} {...state} />;
+      const { records } = state;
+      if (!records || !records.length) return null;
+
+      return <View {...props} records={records} />;
     }
   };
 };

packages/f2/src/createRef.ts

@@ -0,0 +1,6 @@
+export default function createRef() {
+  const ref = {
+    current: null,
+  };
+  return ref;
+}

packages/f2/src/index.ts

@@ -11,4 +11,5 @@ import { jsx as createElement } from './jsx';
 
 export * from './components';
 export { jsx, render } from './jsx';
+export { default as createRef } from './createRef';
 export { Children, createElement, Component, Timeline, Canvas, Chart };

packages/f2/test/components/line/line.test.tsx

@@ -1,5 +1,5 @@
 import { Rect } from '../../../src/coord';
-import { jsx, Component, Canvas, Chart, Line, Point, Axis, Tooltip, Legend } from '../../../src';
+import { jsx, Component, Canvas, Chart, Line, Point, Axis, Legend } from '../../../src';
 import { createContext, delay } from '../../util';
 
 const data = [
@@ -341,7 +341,6 @@ describe('折线图', () => {
             <Axis field="value" tickCount={5} />
             <Line x="day" y="value" ref={lineRef} />
             <Point x="day" y="value" ref={pointRef} />
-            <Tooltip snap />
           </Chart>
         </Canvas>
       );
@@ -421,7 +420,6 @@ describe('折线图', () => {
             />
             <Axis field="tem" />
             <Line x="time" y="tem" ref={lineRef} shape="smooth" />
-            <Tooltip />
           </Chart>
         </Canvas>
       );
@@ -467,20 +465,6 @@ describe('折线图', () => {
             />
             <Axis field="value" tickCount={5} />
             <Line ref={lineRef} x="date" y="value" lineWidth="4px" color="type" shape="type" />
-            <Tooltip
-              showCrosshairs
-              crosshairsType="xy"
-              crosshairsStyle={{
-                stroke: '#1577FE',
-                lineWidth: '1px',
-                lineDash: [2, 2],
-              }}
-              custom
-              showXTip
-              showYTip
-              xTipBackground={{ fill: '#1677FF', radius: '2px' }}
-              yTipBackground={{ fill: '#1677FF', radius: '2px' }}
-            />
             <Legend position="top" />
           </Chart>
         </Canvas>
@@ -895,7 +879,6 @@ describe('折线图', () => {
                 callback: (val) => (val === 2 ? '#518DFE' : '#F35833'),
               }}
             />
-            <Tooltip snap />
           </Chart>
         </Canvas>
       );

packages/f2/test/components/tooltip/tooltip.test.tsx

@@ -1,4 +1,4 @@
-import { jsx, Canvas, Chart, Axis, Interval, Tooltip } from '../../../src';
+import { jsx, Canvas, Chart, Axis, Interval, Tooltip, Legend } from '../../../src';
 import { createContext, delay, gestureSimulator } from '../../util';
 
 const data = [
@@ -23,6 +23,9 @@ describe('tooltip', () => {
     const { props } = (
       <Canvas context={context} pixelRatio={1}>
         <Chart data={data}>
+          <Axis field="genre" />
+          <Axis field="sold" />
+          <Legend />
           <Interval x="genre" y="sold" color="genre" />
           <Tooltip
             alwaysShow={true}
@@ -32,7 +35,7 @@ describe('tooltip', () => {
             onChange={onChangeMockCallback}
             crosshairsType="xy"
             snap
-            custom
+            // custom
             showXTip
             showYTip
           />
@@ -42,16 +45,19 @@ describe('tooltip', () => {
 
     const canvas = new Canvas(props);
     canvas.render();
-    await delay(100);
+    await delay(500);
     await gestureSimulator(context.canvas, 'press', { clientX: 170, clientY: 21 });
     expect(onChangeMockCallback.mock.calls.length).toBe(1); // 验证 onChange 有被调用
     expect(onChangeMockCallback.mock.calls[0][0].length).toBe(1); // 验证 onChange 参数有效
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
   });
 
   it('Tooltip 默认展示', async () => {
     const context = createContext('Tooltip 默认展示');
     const { props } = (
-      <Canvas context={context} pixelRatio={2}>
+      <Canvas context={context} pixelRatio={1}>
         <Chart
           data={data}
           style={
@@ -70,13 +76,16 @@ describe('tooltip', () => {
 
     const canvas = new Canvas(props);
     canvas.render();
+
+    await delay(1000);
+    expect(context).toMatchImageSnapshot();
   });
 
   it('Tooltip 不触发回调的情形', async () => {
     const context = createContext('Tooltip 不触发回调的情形');
     const onChangeMockCallback = jest.fn();
     const { props } = (
-      <Canvas context={context} pixelRatio={2}>
+      <Canvas context={context} pixelRatio={1}>
         <Chart
           data={data}
           style={
@@ -95,8 +104,122 @@ describe('tooltip', () => {
 
     const canvas = new Canvas(props);
     canvas.render();
-    await delay(100);
+    await delay(500);
     await gestureSimulator(context.canvas, 'press', { clientX: -10, clientY: 21 }); // 不合理坐标范围
     expect(onChangeMockCallback.mock.calls.length).toBe(0); // 验证 onChange 未被调用
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
+
+  it('分组柱状图-tooltip', async () => {
+    const context = createContext('分组柱图');
+    const data = [
+      {
+        name: 'London',
+        月份: 'Jan.',
+        月均降雨量: 18.9,
+      },
+      {
+        name: 'London',
+        月份: 'Feb.',
+        月均降雨量: 28.8,
+      },
+      {
+        name: 'London',
+        月份: 'Mar.',
+        月均降雨量: 39.3,
+      },
+      {
+        name: 'London',
+        月份: 'Apr.',
+        月均降雨量: 81.4,
+      },
+      {
+        name: 'London',
+        月份: 'May.',
+        月均降雨量: 47,
+      },
+      {
+        name: 'London',
+        月份: 'Jun.',
+        月均降雨量: 20.3,
+      },
+      {
+        name: 'London',
+        月份: 'Jul.',
+        月均降雨量: 24,
+      },
+      {
+        name: 'London',
+        月份: 'Aug.',
+        月均降雨量: 35.6,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jan.',
+        月均降雨量: 12.4,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Feb.',
+        月均降雨量: 23.2,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Mar.',
+        月均降雨量: 34.5,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Apr.',
+        月均降雨量: 99.7,
+      },
+      {
+        name: 'Berlin',
+        月份: 'May.',
+        月均降雨量: 52.6,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jun.',
+        月均降雨量: 35.5,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Jul.',
+        月均降雨量: 37.4,
+      },
+      {
+        name: 'Berlin',
+        月份: 'Aug.',
+        月均降雨量: 42.4,
+      },
+    ];
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="月份" />
+          <Axis field="月均降雨量" />
+          <Interval
+            x="月份"
+            y="月均降雨量"
+            color="name"
+            adjust={{
+              type: 'dodge',
+            }}
+          />
+          <Tooltip />
+        </Chart>
+      </Canvas>
+    );
+    const canvas = new Canvas(props);
+    canvas.render();
+
+    await delay(500);
+    await gestureSimulator(context.canvas, 'press', { clientX: 170, clientY: 21 });
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
   });
 });