fix(tooltip): find closest for band scale (#5564)

__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step0.html

@@ -0,0 +1,75 @@
+<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: Roboto-Regular; left: 560px; top: 310px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    10:40
+  </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(253, 174, 107); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="people"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          people
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="2"
+        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;"
+      >
+        2
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="1"
+      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(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="waiting"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          waiting
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="1"
+        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;"
+      >
+        1
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/integration/snapshots/tooltip/mock-tooltip-closest/step1.html

@@ -0,0 +1,75 @@
+<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: Roboto-Regular; left: 155px; top: 310px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    10:15
+  </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(253, 174, 107); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="people"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          people
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="3"
+        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;"
+      >
+        3
+      </span>
+    </li>
+    <li
+      class="g2-tooltip-list-item"
+      data-index="1"
+      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(23, 131, 255); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="waiting"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          waiting
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="6"
+        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;"
+      >
+        6
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/plots/tooltip/index.ts

@@ -65,3 +65,4 @@ export { pointsPointRegressionQuad } from './points-point-regression-quad';
 export { alphabetIntervalTooltipRenderUpdate } from './alphabet-interval-tooltip-render-update';
 export { mockIntervalShared } from './mock-interval-shared';
 export { stateAgesIntervalCustomStyle } from './stateages-interval-custom-style';
+export { mockTooltipClosest } from './mock-tooltip-closest';

__tests__/plots/tooltip/mock-tooltip-closest.ts

@@ -0,0 +1,39 @@
+import { seriesTooltipSteps } from './utils';
+
+export function mockTooltipClosest() {
+  return {
+    type: 'view',
+    data: [
+      { time: '10:10', call: 4, waiting: 2, people: 2 },
+      { time: '10:15', call: 2, waiting: 6, people: 3 },
+      { time: '10:20', call: 13, waiting: 2, people: 5 },
+      { time: '10:25', call: 9, waiting: 9, people: 1 },
+      { time: '10:30', call: 5, waiting: 2, people: 3 },
+      { time: '10:35', call: 8, waiting: 2, people: 1 },
+      { time: '10:40', call: 13, waiting: 1, people: 2 },
+    ],
+    children: [
+      {
+        type: 'interval',
+        encode: { x: 'time', y: 'waiting' },
+        axis: { y: { title: 'Waiting', titleFill: '#5B8FF9' } },
+      },
+      {
+        type: 'line',
+        encode: { x: 'time', y: 'people', shape: 'smooth' },
+        scale: { y: { independent: true } },
+        style: { stroke: '#fdae6b', lineWidth: 2 },
+        axis: {
+          y: {
+            position: 'right',
+            grid: null,
+            title: 'People',
+            titleFill: '#fdae6b',
+          },
+        },
+      },
+    ],
+  };
+}
+
+mockTooltipClosest.steps = seriesTooltipSteps([570, 300], [145, 300]);

src/interaction/tooltip.ts

@@ -457,11 +457,14 @@ export function seriesTooltip(
   const itemElements = [];
   for (const element of elements) {
     const { __data__: data } = element;
-    const { seriesX } = data;
+    const { seriesX, title, items } = data;
     if (seriesX) seriesElements.push(element);
-    else itemElements.push(element);
+    else if (title || items) itemElements.push(element);
   }
 
+  const isBandScale = !!(transposed ? scale.y : scale.x).getBandWidth;
+  const closest = isBandScale && itemElements.length > 0;
+
   // Sorted elements from top to bottom visually,
   // or from right to left in transpose coordinate.
   seriesElements.sort((a, b) => {
@@ -470,6 +473,20 @@ export function seriesTooltip(
     return transposed ? minY(b) - minY(a) : minY(a) - minY(b);
   });
 
+  const extent = (d) => {
+    const index = transposed ? 1 : 0;
+    const { min, max } = d.getLocalBounds();
+    return sort([min[index], max[index]]);
+  };
+  // Sort itemElements by x or y.
+  itemElements.sort((a, b) => {
+    const [minA, maxA] = extent(a);
+    const [minB, maxB] = extent(b);
+    const midA = (minA + maxA) / 2;
+    const midB = (minB + maxB) / 2;
+    return transposed ? midB - midA : midA - midB;
+  });
+
   // Get sortedIndex and X for each series elements
   const elementSortedX = new Map(
     seriesElements.map((element) => {
@@ -494,8 +511,9 @@ export function seriesTooltip(
   const indexByFocus = (focus, I, X) => {
     const finalX = abstractX(focus);
     const [minX, maxX] = sort([X[0], X[X.length - 1]]);
-    // Skip x out of range.
-    if (finalX < minX || finalX > maxX) return null;
+    // If closest is true, always find at least one element.
+    // Otherwise, skip element out of plot area.
+    if (!closest && (finalX < minX || finalX > maxX)) return null;
     const search = bisector((i) => X[+i]).center;
     const i = search(I, finalX);
     return I[i];
@@ -504,14 +522,20 @@ export function seriesTooltip(
   const elementsByFocus = (focus, elements) => {
     const index = transposed ? 1 : 0;
     const x = focus[index];
-    const extent = (d) => {
-      const { min, max } = d.getLocalBounds();
-      return sort([min[index], max[index]]);
-    };
-    return elements.filter((element) => {
+    const filtered = elements.filter((element) => {
       const [min, max] = extent(element);
       return x >= min && x <= max;
     });
+    // If closet is true, always find at least one element.
+    if (!closest || filtered.length > 0) return filtered;
+
+    // Search the closet element to the focus.
+    const search = bisector((element) => {
+      const [min, max] = extent(element);
+      return (min + max) / 2;
+    }).center;
+    const i = search(elements, x);
+    return [elements[i]].filter(defined);
   };
 
   const seriesData = (element, index) => {