fix(tooltip): legendFilter and shared tooltip (#5534)

antvis · Sep 12, 2023 · 7fc3e75 · 7fc3e75
1 parent e9486dc
commit 7fc3e75
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 1 deletion.
diff --git a/__tests__/integration/snapshots/tooltip/mock-interval-shared/step0.html b/__tests__/integration/snapshots/tooltip/mock-interval-shared/step0.html
@@ -0,0 +1 @@
+null
diff --git a/__tests__/integration/snapshots/tooltip/mock-interval-shared/step1.html b/__tests__/integration/snapshots/tooltip/mock-interval-shared/step1.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: 10px; top: 10px;"
+>
+  <div
+    class="g2-tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    20230702
+  </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(0, 201, 201); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="g2-tooltip-list-item-name-label"
+          title="汽车"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          汽车
+        </span>
+      </span>
+      <span
+        class="g2-tooltip-list-item-value"
+        title="23016"
+        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;"
+      >
+        23016
+      </span>
+    </li>
+  </ul>
+</div>
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -63,3 +63,4 @@ export { mockLineFalsy } from './mock-line-falsy';
 export { provincesLineGroupName } from './provinces-line-group-name';
 export { pointsPointRegressionQuad } from './points-point-regression-quad';
 export { alphabetIntervalTooltipRenderUpdate } from './alphabet-interval-tooltip-render-update';
+export { mockIntervalShared } from './mock-interval-shared';
diff --git a/__tests__/plots/tooltip/mock-interval-shared.ts b/__tests__/plots/tooltip/mock-interval-shared.ts
@@ -0,0 +1,34 @@
+import { CustomEvent } from '@antv/g';
+import { G2Spec } from '../../../src';
+import { LEGEND_ITEMS_CLASS_NAME } from '../../../src/interaction/legendFilter';
+import { tooltipSteps } from './utils';
+
+export function mockIntervalShared(): G2Spec {
+  return {
+    type: 'interval',
+    data: {
+      value: [
+        { color: '房地产', x: '20230702', y: 36049 },
+        { color: '房地产', x: '20230703', y: 26229 },
+        { color: '汽车', x: '20230702', y: 23016 },
+        { color: '汽车', x: '20230703', y: 48280 },
+      ],
+    },
+    encode: { x: 'x', y: 'y', color: 'color', series: 'color' },
+    legend: { color: { title: false } },
+    interaction: { tooltip: { shared: true } },
+  };
+}
+
+mockIntervalShared.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const [legend] = document.getElementsByClassName(LEGEND_ITEMS_CLASS_NAME);
+  return [
+    {
+      changeState: async () => {
+        legend.dispatchEvent(new CustomEvent('click'));
+      },
+    },
+    ...tooltipSteps(2)({ canvas }),
+  ];
+};
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
@@ -730,6 +730,7 @@ export function tooltip(
     view,
     mount,
     bounding,
+    shared = false,
     body = true,
     disableNative = false,
   }: Record<string, any>,
@@ -748,7 +749,7 @@ export function tooltip(
       const k = groupKey(element);
       const group = keyGroup.get(k);
       const data =
-        group.length === 1
+        group.length === 1 && !shared
           ? singleItem(group[0])
           : groupItems(group, scale, groupName);
 
@@ -931,6 +932,7 @@ export function Tooltip(options) {
       item,
       emitter,
       view,
+      shared,
     });
   };
 }