fix: fix tooltip shown on one element line chart. (#5917)

* fix: fix the tooltip shown on one element line chart

* fix: change test examples

__tests__/integration/snapshots/tooltip/one-element-line/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: Roboto-Regular; left: 210px; top: 210px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    2007-04-23T00:00:00.000Z
+  </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(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="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="93.24"
+        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;"
+      >
+        93.24
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/plots/tooltip/index.ts

@@ -71,3 +71,4 @@ export { mockTooltipClosest } from './mock-tooltip-closest';
 export { stateAgesIntervalScrollbar } from './stateages-interval-scrollbar';
 export { aaplLineOverflow } from './aapl-line-overflow';
 export { moviesIntervalScaleKeyScrollbar } from './movies-interval-scale-key-scrollbar';
+export { oneElementLine } from './one-element-line';

__tests__/plots/tooltip/one-element-line.ts

@@ -0,0 +1,28 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export function oneElementLine(): G2Spec {
+  return {
+    width: 800,
+    type: 'line',
+    data: {
+      value: [
+        {
+          date: '2007-04-23T00:00:00.000Z',
+          close: 93.24,
+        },
+      ],
+    },
+    encode: {
+      x: 'date',
+      y: 'close',
+      size: 10,
+    },
+    tooltip: {
+      title: 'date',
+      items: ['close'],
+    },
+  };
+}
+
+oneElementLine.steps = seriesTooltipSteps([200, 200]);

src/interaction/tooltip.ts

@@ -530,9 +530,13 @@ export function seriesTooltip(
     const finalX = abstractX(focus);
     const DX = X.filter(defined);
     const [minX, maxX] = sort([DX[0], DX[DX.length - 1]]);
+    // If only has one element(minX == maxX), show tooltip when hover whole chart
+    const isOnlyOneElement = minX === maxX;
+
     // 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;
+    if (!closest && (finalX < minX || finalX > maxX) && !isOnlyOneElement)
+      return null;
     const search = bisector((i) => X[+i]).center;
     const i = search(I, finalX);
     return I[i];