fix(tooltip): missing data (#4910)

antvis · Apr 24, 2023 · 131b032 · 131b032
1 parent 29ed50c
commit 131b032
Show file tree

Hide file tree

Showing 5 changed files with 231 additions and 14 deletions.
diff --git a/__tests__/data/provinces.js b/__tests__/data/provinces.js
@@ -0,0 +1,65 @@
+export const provinces =[
+  {
+    "idx": 0,
+    "number": 2445,
+    "province": "四川省",
+    "type": "number",
+    "sub_type": "xx"
+  },
+  {
+    "idx": 0,
+    "number": 21094.69,
+    "province": "四川省",
+    "type": "price",
+    "sub_type": "yy"
+  },
+   {
+    "idx": 1,
+    "number": 1244,
+    "province": "四川省",
+    "type": "number",
+    "sub_type": "xx"
+  },
+  {
+    "idx": 1,
+    "number": 12756,
+    "province": "四川省",
+    "type": "price",
+    "sub_type": "yy"
+  },
+  {
+    "idx": 2,
+    "number": 2244,
+    "province": "四川省",
+    "type": "number",
+    "sub_type": "xx"
+  },
+  {
+    "idx": 2,
+    "number": 19756.88,
+    "province": "四川省",
+    "type": "price",
+    "sub_type": "yy"
+  },
+  {
+    "idx": 3,
+    "number": 244,
+    "province": "四川省",
+    "type": "number",
+    "sub_type": "xx"
+  },
+  {
+    "idx": 4,
+    "number": 1975,
+    "province": "四川省",
+    "type": "price",
+    "sub_type": "yy"
+  },
+  {
+    "idx": 4,
+    "number": 4004,
+    "province": "四川省",
+    "type": "number",
+    "sub_type": "xx"
+  },
+]
diff --git a/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html b/__tests__/integration/snapshots/tooltip/provinces-line-group-name/step0.html
@@ -0,0 +1,104 @@
+<div
+  xmlns="http://www.w3.org/1999/xhtml"
+  class="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: 460px; top: 310px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    3
+  </div>
+  <ul
+    class="tooltip-list"
+    style="margin: 0px; list-style-type: none; padding: 0px;"
+  >
+    <li
+      class="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="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="number"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          number
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="244"
+        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;"
+      >
+        244
+      </span>
+    </li>
+    <li
+      class="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="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="province"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          province
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="四川省"
+        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;"
+      >
+        四川省
+      </span>
+    </li>
+    <li
+      class="tooltip-list-item"
+      data-index="2"
+      style="list-style-type: none; display: flex; line-height: 2em; align-items: center; justify-content: space-between; white-space: nowrap;"
+    >
+      <span
+        class="tooltip-list-item-name"
+        style="display: flex; align-items: center; max-width: 216px;"
+      >
+        <span
+          class="tooltip-list-item-marker"
+          style="background: rgb(90, 216, 166); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="sub_type"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          sub_type
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="xx"
+        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;"
+      >
+        xx
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -59,3 +59,4 @@ export { aaplLineAreaBasicSample } from './aapl-line-area-basic-sample';
 export { aaplAreaMissingDataTranspose } from './aapl-area-missing-data-transpose';
 export { alphabetIntervalBrushTooltip } from './alphabet-interval-brush-tooltip';
 export { mockLineFalsy } from './mock-line-falsy';
+export { provincesLineGroupName } from './provinces-line-group-name';
diff --git a/__tests__/plots/tooltip/provinces-line-group-name.ts b/__tests__/plots/tooltip/provinces-line-group-name.ts
@@ -0,0 +1,25 @@
+import { provinces } from '../../data/provinces';
+import { seriesTooltipSteps } from './utils';
+
+export function provincesLineGroupName() {
+  return {
+    type: 'line',
+    data: provinces,
+    paddingLeft: 60,
+    encode: {
+      x: (d) => d.idx + '',
+      y: 'number',
+      color: 'type',
+    },
+    scale: { y: { nice: true } },
+    tooltip: {
+      items: [
+        { field: 'number', name: 'number' },
+        { field: 'province', name: 'province' },
+        { field: 'sub_type', name: 'sub_type' },
+      ],
+    },
+  };
+}
+
+provincesLineGroupName.steps = seriesTooltipSteps([450, 300]);
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
@@ -1,5 +1,5 @@
 import { DisplayObject, IElement, Line } from '@antv/g';
-import { sort, group, mean, bisector } from 'd3-array';
+import { sort, group, mean, bisector, minIndex } from 'd3-array';
 import { deepMix, lowerFirst, throttle } from '@antv/util';
 import { Tooltip as TooltipComponent } from '@antv/gui';
 import { Constant, Identity } from '@antv/scale';
@@ -162,7 +162,7 @@ function unique(items, key = (d) => d) {
 function groupItems(
   elements,
   scale,
-  groupName = true,
+  groupName,
   data = elements.map((d) => d['__data__']),
 ) {
   const key = (d) => (d instanceof Date ? +d : d);
@@ -174,23 +174,32 @@ function groupItems(
     .flatMap((datum, i) => {
       const element = elements[i];
       const { items = [], title } = datum;
-      return items
-        .filter(defined)
-        .map(({ color = itemColorOf(element), name, ...item }) => {
-          const name1 = groupName
+      const definedItems = items.filter(defined);
+
+      // If there is only one item, use groupName as title by default.
+      const useGroupName =
+        groupName !== undefined ? groupName : items.length <= 1 ? true : false;
+
+      return definedItems.map(
+        ({ color = itemColorOf(element), name, ...item }) => {
+          const name1 = useGroupName
             ? groupNameOf(scale, datum) || name
             : name || groupNameOf(scale, datum);
           return {
             ...item,
             color,
             name: name1 || title,
           };
-        });
+        },
+      );
     })
     .map(showUndefined);
   return {
     ...(T.length > 0 && { title: T.join(',') }),
-    items: unique(newItems, (d) => `(${key(d.name)}, ${key(d.value)})`),
+    items: unique(
+      newItems,
+      (d) => `(${key(d.name)}, ${key(d.value)}, ${key(d.color)})`,
+    ),
   };
 }
 
@@ -283,7 +292,7 @@ export function seriesTooltip(
     coordinate,
     crosshairs,
     render,
-    groupName = true,
+    groupName,
     wait = 50,
     leading = true,
     trailing = false,
@@ -338,9 +347,13 @@ export function seriesTooltip(
   // Apply offset for band scale x.
   const offsetX = scaleX?.getBandWidth ? scaleX.getBandWidth() / 2 : 0;
 
-  const indexByFocus = (focus, I, X) => {
+  const abstractX = (focus) => {
     const [normalizedX] = coordinate.invert(focus);
-    const finalX = normalizedX - offsetX;
+    return normalizedX - offsetX;
+  };
+
+  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;
@@ -400,8 +413,17 @@ export function seriesTooltip(
           selectedSeriesData.push([d, p] as const);
         }
       }
+
+      // Filter selectedSeriesData with different x,
+      // make sure there is only one x closest to focusX.
+      const SX = Array.from(new Set(selectedSeriesData.map((d) => d[0].x)));
+      const closestX = SX[minIndex(SX, (x) => Math.abs(x - abstractX(focus)))];
+      const filteredSeriesData = selectedSeriesData.filter(
+        (d) => d[0].x === closestX,
+      );
+
       const selectedData = [
-        ...selectedSeriesData.map((d) => d[0]),
+        ...filteredSeriesData.map((d) => d[0]),
         ...selectedItems.map((d) => d.__data__),
       ];
 
@@ -443,7 +465,7 @@ export function seriesTooltip(
       }
 
       if (crosshairs) {
-        const points = selectedSeriesData.map((d) => d[1]);
+        const points = filteredSeriesData.map((d) => d[1]);
         updateRuleY(root, points, {
           ...ruleStyle,
           width,
@@ -486,7 +508,7 @@ export function tooltip(
     elements: elementsof,
     scale,
     render,
-    groupName = true,
+    groupName,
     sort: sortFunction,
     filter: filterFunction,
     wait = 50,