fix(tooltip): group tooltip (#6323)

__tests__/integration/snapshots/tooltip/mock-group-interval/step0.html

@@ -0,0 +1,46 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="g2-tooltip"
+  style="pointer-events: none; position: absolute; visibility: visible; z-index: 8; transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(255, 255, 255, 0.96); box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.12); border-radius: 4px; color: rgba(0, 0, 0, 0.65); font-size: 12px; line-height: 20px; padding: 12px; min-width: 120px; max-width: 360px; font-family: sans-serif; left: 177.921886909541px; top: 371.63280721146975px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    德邦
+  </div>
+  <ul
+    class="g2-tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="g2-tooltip-list-item"
+      data-index="0"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="g2-tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="g2-tooltip-list-item-marker"
+          style="background: rgb(240, 136, 77); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="folded_value"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          folded_value
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="6053623.85"
+        style="display: inline-block; float: right; flex: 1; text-align: right; min-width: 28px; margin-left: 30px; color: rgba(0, 0, 0, 0.85); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+      >
+        6053623.85
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/plots/tooltip/index.ts

@@ -78,3 +78,4 @@ export { mockLineFlex } from './mock-line-flex';
 export { mockTooltipClosestTransposed } from './mock-tooltip-closest-transposed';
 export { mockDualBarShareTooltip } from './mock-dual-bar-share-tooltip';
 export { alphabetLineEnterable } from './alphabet-line-enterable';
+export { mockGroupInterval } from './mock-group-interval';

__tests__/plots/tooltip/mock-group-interval.ts

@@ -0,0 +1,86 @@
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function mockGroupInterval(): G2Spec {
+  return {
+    type: 'interval',
+    data: {
+      type: 'inline',
+      value: [
+        {
+          '86693d71f3f84027991dbbf50996f821': 6053623.85,
+          df21a9ed840b48a6a22435e031ab0671: 6613267,
+          D2022010400161505000009920363_sum: 27616846.54,
+          D2022010400161505000009920358: '德邦',
+          '0223e03e9153401b8db66afb1e989526': 5571.16,
+        },
+        {
+          '86693d71f3f84027991dbbf50996f821': 6035281.49,
+          df21a9ed840b48a6a22435e031ab0671: 6537072,
+          D2022010400161505000009920363_sum: 27701405.4,
+          D2022010400161505000009920358: '邮政',
+          '0223e03e9153401b8db66afb1e989526': 5535.71,
+        },
+        {
+          '86693d71f3f84027991dbbf50996f821': 6345550.92,
+          df21a9ed840b48a6a22435e031ab0671: 6475557,
+          D2022010400161505000009920363_sum: 28880528.23,
+          D2022010400161505000009920358: '申通',
+          '0223e03e9153401b8db66afb1e989526': 5575.93,
+        },
+        {
+          '86693d71f3f84027991dbbf50996f821': 6045575.04,
+          df21a9ed840b48a6a22435e031ab0671: 6475313,
+          D2022010400161505000009920363_sum: 27632017.31,
+          D2022010400161505000009920358: '圆通',
+          '0223e03e9153401b8db66afb1e989526': 5528.19,
+        },
+        {
+          '86693d71f3f84027991dbbf50996f821': 5647259.32,
+          df21a9ed840b48a6a22435e031ab0671: 6559678,
+          D2022010400161505000009920363_sum: 26538220.29,
+          D2022010400161505000009920358: '韵达',
+          '0223e03e9153401b8db66afb1e989526': 5523.76,
+        },
+        {
+          '86693d71f3f84027991dbbf50996f821': 5920258.17,
+          df21a9ed840b48a6a22435e031ab0671: 6586067,
+          D2022010400161505000009920363_sum: 27766226.48,
+          D2022010400161505000009920358: '其他',
+          '0223e03e9153401b8db66afb1e989526': 5589.46,
+        },
+        {
+          '86693d71f3f84027991dbbf50996f821': 5590605.94,
+          df21a9ed840b48a6a22435e031ab0671: 6557904,
+          D2022010400161505000009920363_sum: 25899615.78,
+          D2022010400161505000009920358: '顺丰',
+          '0223e03e9153401b8db66afb1e989526': 5447.06,
+        },
+      ],
+      transform: [
+        {
+          type: 'rename',
+          D2022010400161505000009920363_sum: '单价',
+          '0223e03e9153401b8db66afb1e989526': '折扣',
+          '86693d71f3f84027991dbbf50996f821': '单位成本',
+          df21a9ed840b48a6a22435e031ab0671: '数量',
+        },
+        {
+          type: 'fold',
+          fields: ['单价', '折扣', '单位成本', '数量'],
+          key: 'folded_key',
+          value: 'folded_value',
+        },
+      ],
+    },
+    encode: {
+      x: 'D2022010400161505000009920358',
+      y: 'folded_value',
+      color: 'folded_key',
+    },
+    transform: [{ type: 'dodgeX' }],
+    interaction: {},
+  };
+}
+
+mockGroupInterval.steps = tooltipSteps(2);

src/interaction/tooltip.ts

@@ -991,30 +991,43 @@ export function tooltip(
   const keyGroup = group(elements, groupKey);
   const inInterval = (d) => d.markType === 'interval';
   const isBar = elements.every(inInterval) && !isPolar(coordinate);
-  const xof = (d) => d.__data__.x;
   const scaleX = scale.x;
+  const scaleSeries = scale.series;
+  const bandWidth = scaleX?.getBandWidth?.() ?? 0;
+  const xof = scaleSeries
+    ? (d) => d.__data__.x + d.__data__.series * bandWidth
+    : (d) => d.__data__.x + bandWidth / 2;
 
   // Sort for bisector search.
   if (isBar) elements.sort((a, b) => xof(a) - xof(b));
 
+  const findElementByTarget = (event) => {
+    const { target } = event;
+    return maybeRoot(target, (node) => {
+      if (!node.classList) return false;
+      return node.classList.includes('element');
+    });
+  };
+
   const findElement = isBar
     ? (event) => {
         const mouse = mousePosition(root, event);
         if (!mouse) return;
-        const offsetX = scaleX?.getBandWidth ? scaleX.getBandWidth() / 2 : 0;
         const [normalizedX] = coordinate.invert(mouse);
-        const abstractX = normalizedX - offsetX;
+        const abstractX = normalizedX;
         const search = bisector(xof).center;
         const i = search(elements, abstractX);
-        return elements[i];
+        const target = elements[i];
+        if (!shared) {
+          // For grouped bar chart without shared options.
+          const isGrouped = elements.find(
+            (d) => d !== target && xof(d) === xof(target),
+          );
+          if (isGrouped) return findElementByTarget(event);
+        }
+        return target;
       }
-    : (event) => {
-        const { target } = event;
-        return maybeRoot(target, (node) => {
-          if (!node.classList) return false;
-          return node.classList.includes('element');
-        });
-      };
+    : findElementByTarget;
 
   const pointermove = throttle(
     (event) => {