fix(tooltip): items for transposed interval + line (#6286)

antvis · Jun 13, 2024 · 65e09b0 · 65e09b0
1 parent 6760603
commit 65e09b0
Show file tree

Hide file tree

Showing 5 changed files with 194 additions and 1 deletion.
diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/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:35
+  </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="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>
+    <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="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>
+  </ul>
+</div>
diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/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:35
+  </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="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>
+    <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="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>
+  </ul>
+</div>
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -75,3 +75,4 @@ export { oneElementLine } from './one-element-line';
 export { disastersPointSlider } from './disasters-point-slider';
 export { alphabetText } from './alphabet-text';
 export { mockLineFlex } from './mock-line-flex';
+export { mockTooltipClosestTransposed } from './mock-tooltip-closest-transposed';
diff --git a/__tests__/plots/tooltip/mock-tooltip-closest-transposed.ts b/__tests__/plots/tooltip/mock-tooltip-closest-transposed.ts
@@ -0,0 +1,40 @@
+import { seriesTooltipSteps } from './utils';
+
+export function mockTooltipClosestTransposed() {
+  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 },
+    ],
+    coordinate: { transform: [{ type: 'transpose' }] },
+    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',
+          },
+        },
+      },
+    ],
+  };
+}
+
+mockTooltipClosestTransposed.steps = seriesTooltipSteps([570, 300], [145, 300]);
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
@@ -601,7 +601,9 @@ export function seriesTooltip(
     else if (title || items) itemElements.push(element);
   }
 
-  const isBandScale = !!(transposed ? scale.y : scale.x).getBandWidth;
+  // For band scale x, find the closest series element to focus,
+  // useful for interval + line mark.
+  const isBandScale = !!scale.x.getBandWidth;
   const closest = isBandScale && itemElements.length > 0;
 
   // Sorted elements from top to bottom visually,