fix(tooltip): show falsy item by default (#4907)

antvis · Apr 23, 2023 · 29ed50c · 29ed50c
1 parent 1816339
commit 29ed50c
Show file tree

Hide file tree

Showing 10 changed files with 278 additions and 25 deletions.
diff --git a/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html b/__tests__/integration/snapshots/tooltip/aapl-area-missing-data-transpose/step0.html
@@ -12,5 +12,35 @@
   <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: black; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="NaN"
+        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;"
+      >
+        NaN
+      </span>
+    </li>
+  </ul>
 </div>;
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step0.html
@@ -0,0 +1,46 @@
+<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: 210px; top: 310px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    北京
+  </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(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="value"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          value
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="null"
+        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;"
+      >
+        null
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step1.html
@@ -0,0 +1,46 @@
+<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: 285px; top: 310px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    河北
+  </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(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="value"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          value
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="0"
+        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;"
+      >
+        0
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html b/__tests__/integration/snapshots/tooltip/mock-line-falsy/step2.html
@@ -0,0 +1,46 @@
+<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: 430px; top: 310px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    海南
+  </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(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="value"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          value
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="undefined"
+        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;"
+      >
+        undefined
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/integration/snapshots/tooltip/profit-interval-legend-filter-ordinal/step1.html b/__tests__/integration/snapshots/tooltip/profit-interval-legend-filter-ordinal/step1.html
@@ -42,5 +42,34 @@
         387264
       </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(91, 143, 249); width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="start"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          start
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="0"
+        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;"
+      >
+        0
+      </span>
+    </li>
   </ul>
 </div>;
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -58,3 +58,4 @@ export { aaplLineSliderFilter } from './appl-line-slider-filter';
 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';
diff --git a/__tests__/plots/tooltip/london-tube-lines-geo.ts b/__tests__/plots/tooltip/london-tube-lines-geo.ts
@@ -22,6 +22,7 @@ export async function londonTubeLineGeo(): Promise<G2Spec> {
     width: 700,
     height: 500,
     padding: 10,
+    interaction: { tooltip: { filter: (d) => d.value !== null } },
     children: [
       {
         type: 'geoPath',

diff --git a/__tests__/plots/tooltip/mock-line-falsy.ts b/__tests__/plots/tooltip/mock-line-falsy.ts
@@ -0,0 +1,48 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export function mockLineFalsy(): G2Spec {
+  return {
+    type: 'line',
+    data: [
+      {
+        city: '杭州',
+        value: 400,
+      },
+      {
+        city: '上海',
+        value: 300,
+      },
+      {
+        city: '北京',
+        value: null,
+      },
+      {
+        city: '河北',
+        value: 0,
+      },
+      {
+        city: '苏州',
+        value: 500,
+      },
+      {
+        city: '海南',
+        value: undefined,
+      },
+      {
+        city: '成都',
+        value: 400,
+      },
+      {
+        city: '重庆',
+        value: 200,
+      },
+    ],
+    encode: {
+      x: 'city',
+      y: 'value',
+    },
+  };
+}
+
+mockLineFalsy.steps = seriesTooltipSteps([200, 300], [275, 300], [420, 300]);
diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts
@@ -102,6 +102,11 @@ function destroyTooltip(root) {
   }
 }
 
+function showUndefined(item) {
+  const { value } = item;
+  return { ...item, value: value === undefined ? 'undefined' : value };
+}
+
 function singleItem(element) {
   const { __data__: datum } = element;
   const { title, items = [] } = datum;
@@ -110,7 +115,8 @@ function singleItem(element) {
     .map(({ color = itemColorOf(element), ...item }) => ({
       ...item,
       color,
-    }));
+    }))
+    .map(showUndefined);
   return {
     ...(title && { title }),
     items: newItems,
@@ -164,22 +170,24 @@ function groupItems(
     data.map((d) => d.title),
     key,
   ).filter(defined);
-  const newItems = data.flatMap((datum, i) => {
-    const element = elements[i];
-    const { items = [], title } = datum;
-    return items
-      .filter(defined)
-      .map(({ color = itemColorOf(element), name, ...item }) => {
-        const name1 = groupName
-          ? groupNameOf(scale, datum) || name
-          : name || groupNameOf(scale, datum);
-        return {
-          ...item,
-          color,
-          name: name1 || title,
-        };
-      });
-  });
+  const newItems = data
+    .flatMap((datum, i) => {
+      const element = elements[i];
+      const { items = [], title } = datum;
+      return items
+        .filter(defined)
+        .map(({ color = itemColorOf(element), name, ...item }) => {
+          const name1 = groupName
+            ? 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)})`),

diff --git a/src/runtime/transform.ts b/src/runtime/transform.ts
@@ -170,13 +170,11 @@ export function extractTooltip(
           : definedChannel
           ? encode[channel].value[i]
           : null;
-        if (value1) {
-          values[i] = {
-            name: name1,
-            color,
-            value: normalizedValueFormatter(value1),
-          };
-        }
+        values[i] = {
+          name: name1,
+          color,
+          value: normalizedValueFormatter(value1),
+        };
       }
       return values;
     }