feat: tooltip自动换行 (#1911)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Jan 1, 2024 · 2aaa51f · 2aaa51f
1 parent 5cb9d5d
commit 2aaa51f
Show file tree

Hide file tree

Showing 4 changed files with 164 additions and 3 deletions.
diff --git a/packages/f2/src/components/tooltip/tooltipView.tsx b/packages/f2/src/components/tooltip/tooltipView.tsx
@@ -260,6 +260,50 @@ const RenderYTip = (props) => {
 
 // tooltip 内容框
 class RenderLabel extends Component {
+  style = {};
+
+  getMaxItemBox(node) {
+    let maxItemWidth = 0;
+    let maxItemHeight = 0;
+    (node.children || []).forEach((child) => {
+      const { layout } = child;
+      const { width, height } = layout;
+
+      maxItemWidth = Math.max(maxItemWidth, width);
+      maxItemHeight = Math.max(maxItemHeight, height);
+    });
+
+    return {
+      width: maxItemWidth,
+      height: maxItemHeight,
+    };
+  }
+
+  _getContainerLayout() {
+    const { records, coord } = this.props;
+
+    if (!records || !records.length) return;
+    const { width } = coord;
+
+    const node = computeLayout(this, this.render());
+    const { width: itemMaxWidth } = this.getMaxItemBox(node?.children[0]);
+
+    // 每行最多的个数
+    const lineMaxCount = Math.max(1, Math.floor(width / itemMaxWidth));
+    const itemCount = records.length;
+
+    // 是否需要换行
+    if (itemCount > lineMaxCount) {
+      this.style = {
+        width,
+      };
+    }
+  }
+
+  willMount(): void {
+    this._getContainerLayout();
+  }
+
   render() {
     const {
       records,
@@ -273,6 +317,7 @@ class RenderLabel extends Component {
       arrowWidth,
       x,
       coord,
+      itemWidth,
     } = this.props;
 
     // 显示内容
@@ -287,6 +332,7 @@ class RenderLabel extends Component {
               padding: [0, 0, 0, '6px'],
               left,
               top,
+              ...this.style,
               ...background,
             }}
           >
@@ -299,6 +345,7 @@ class RenderLabel extends Component {
                     flexDirection: 'row',
                     alignItems: 'center',
                     padding: [0, '6px', 0, 0],
+                    width: itemWidth,
                   }}
                 >
                   {showItemMarker ? (
@@ -410,6 +457,7 @@ export default class TooltipView extends Component {
       yTipBackground = defaultStyle.yTipBackground,
       custom = false,
       customText,
+      itemWidth,
     } = props;
     const itemMarkerStyle = {
       ...customItemMarkerStyle,
@@ -500,6 +548,7 @@ export default class TooltipView extends Component {
             nameStyle={{ ...defaultStyle.nameStyle, ...nameStyle }}
             valueStyle={{ ...defaultStyle.valueStyle, ...valueStyle }}
             joinString={joinString}
+            itemWidth={itemWidth}
           />
         )}
       </group>

diff --git a/...ts/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-自动换行-1-snap.png b/...ts/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-自动换行-1-snap.png
diff --git a/...ts/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-自动换行-2-snap.png b/...ts/tooltip/__image_snapshots__/tooltip-test-tsx-tooltip-tooltip-自动换行-2-snap.png
diff --git a/packages/f2/test/components/tooltip/tooltip.test.tsx b/packages/f2/test/components/tooltip/tooltip.test.tsx
@@ -411,7 +411,7 @@ describe('tooltip', () => {
           <Axis field="sold" />
           <Interval x="genre" y="sold" color="genre" />
           <Tooltip
-          alwaysShow={true}
+            alwaysShow={true}
             showCrosshairs
             crosshairsType="xy"
             snap
@@ -442,11 +442,11 @@ describe('tooltip', () => {
               fill: 'red',
               textAlign: 'start',
               textBaseline: 'middle',
-              text: ''
+              text: '',
             }}
             valueStyle={{
               fill: 'red',
-              text: ''
+              text: '',
             }}
           />
         </Chart>
@@ -461,4 +461,116 @@ describe('tooltip', () => {
     await delay(100);
     expect(context).toMatchImageSnapshot();
   });
+
+  it('Tooltip 自动换行', async () => {
+    const context = createContext('Tooltip 自动换行');
+    const data = [
+      {
+        date: '2017-06-05',
+        type: '测试a',
+        value: 100,
+      },
+      {
+        date: '2017-06-05',
+        type: '测试b',
+        value: 116,
+      },
+      {
+        date: '2017-06-05',
+        type: '测试c',
+        value: 156,
+      },
+      {
+        date: '2017-06-05',
+        type: '测试d',
+        value: 126,
+      },
+      {
+        date: '2017-06-05',
+        type: '测试e',
+        value: 196,
+      },
+      {
+        date: '2017-06-05',
+        type: '测试f',
+        value: 26,
+      },
+      {
+        date: '2017-06-06',
+        type: '测试a',
+        value: 110,
+      },
+      {
+        date: '2017-06-06',
+        type: '测试b',
+        value: 129,
+      },
+      {
+        date: '2017-06-06',
+        type: '测试c',
+        value: 156,
+      },
+      {
+        date: '2017-06-06',
+        type: '测试d',
+        value: 126,
+      },
+      {
+        date: '2017-06-07',
+        type: '测试a',
+        value: 123,
+      },
+      {
+        date: '2017-06-07',
+        type: '测试b',
+        value: 135,
+      },
+      {
+        date: '2017-06-07',
+        type: '测试c',
+        value: 156,
+      },
+      {
+        date: '2017-06-07',
+        type: '测试d',
+        value: 126,
+      },
+    ];
+    const { props } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="date" />
+          <Axis field="value" />
+          <Interval x="date" y="value" color="type" />
+          <Tooltip alwaysShow={true} showTooltipMarker={true} defaultItem={data[0]} />
+        </Chart>
+      </Canvas>
+    );
+
+    const canvas = new Canvas(props);
+    await canvas.render();
+
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+
+    const { props: updateProps } = (
+      <Canvas context={context} pixelRatio={1}>
+        <Chart data={data}>
+          <Axis field="date" />
+          <Axis field="value" />
+          <Interval x="date" y="value" color="type" />
+          <Tooltip
+            alwaysShow={true}
+            showTooltipMarker={true}
+            defaultItem={data[0]}
+            itemWidth={200}
+          />
+        </Chart>
+      </Canvas>
+    );
+
+    await canvas.update(updateProps);
+    await delay(500);
+    expect(context).toMatchImageSnapshot();
+  });
 });