fix: handle the case where stepWidth is negative (#6758)

* fix: handle the case where stepWidth is negative

* fix: add unit test

Author: interstellarmt

__tests__/integration/snapshots/tooltip/reverse-scale-range/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: 242.39007350773517px; top: 432px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    0
+  </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="Male"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          Male
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="9735380"
+        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;"
+      >
+        9735380
+      </span>
+    </li>
+  </ul>
+</div>

__tests__/plots/tooltip/index.ts

@@ -84,3 +84,4 @@ export { itemsCallback } from './items-callback';
 export { issue6699 } from './issue-6699';
 export { issue6699Improve } from './issue-6699-improve';
 export { issue6710 } from './issue-6710';
+export { reverseScaleRange } from './reverse-scale-range';

__tests__/plots/tooltip/reverse-scale-range.ts

@@ -0,0 +1,33 @@
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function reverseScaleRange(): G2Spec {
+  return {
+    type: 'interval',
+    autoFit: true,
+    data: {
+      type: 'fetch',
+      value: 'data/population.csv',
+      transform: [{ type: 'filter', callback: (d) => d.year === 2000 }],
+    },
+    encode: {
+      x: 'age',
+      y: (d) => (d.sex === 1 ? -d.people : d.people),
+      color: 'sex',
+    },
+    scale: { color: { type: 'ordinal' }, x: { range: [1, 0] } },
+    coordinate: { transform: [{ type: 'transpose' }] },
+    axis: { y: { labelFormatter: '~s' } },
+    legend: { color: { labelFormatter: (d) => (d === 1 ? 'Male' : 'Female') } },
+    tooltip: {
+      items: [
+        (d) => ({
+          value: d.people,
+          name: d.sex === 1 ? 'Male' : 'Female',
+        }),
+      ],
+    },
+  };
+}
+
+reverseScaleRange.steps = tooltipSteps(0);

src/interaction/tooltip.ts

@@ -1064,10 +1064,18 @@ export function tooltip(
         const i = search(elements, abstractX);
         const target = elements[i];
 
-        const targetLeftBoundary = xof(target) - stepWidth / 2;
-        const targetRightBoundary = xof(target) + stepWidth / 2;
-        if (abstractX < targetLeftBoundary || abstractX > targetRightBoundary)
+        // Handle the case where stepWidth is negative.
+        const isStepWidthPositive = stepWidth > 0;
+        const targetLeftBoundary = isStepWidthPositive
+          ? xof(target) - stepWidth / 2
+          : xof(target) + stepWidth / 2;
+        const targetRightBoundary = isStepWidthPositive
+          ? xof(target) + stepWidth / 2
+          : xof(target) - stepWidth / 2;
+
+        if (abstractX < targetLeftBoundary || abstractX > targetRightBoundary) {
           return;
+        }
 
         if (!shared) {
           // For grouped bar chart without shared options.