fix(tooltip): inferred tooltip should show raw column (close: #4681)

antvis · Feb 25, 2023 · b64cb96 · b64cb96
1 parent d0b3ac9
commit b64cb96
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 13 deletions.
diff --git a/__tests__/data/languages.js b/__tests__/data/languages.js
@@ -0,0 +1,7 @@
+export const languages = [
+  { id: 'c', value: 526 },
+  { id: 'sass', value: 220 },
+  { id: 'php', value: 325 },
+  { id: 'elixir', value: 561 },
+  { id: 'rust', value: 54 },
+]
diff --git a/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/step0.html b/__tests__/integration/snapshots/tooltip/alphabet-interval-channel/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: 10px; top: 10px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    A
+  </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; margin-top: 12px; display: flex; line-height: 1em; 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: steelblue; width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px;"
+        />
+        <span
+          class="tooltip-list-item-name-label"
+          title="frequency"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          frequency
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="0.08167"
+        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.08167
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/integration/snapshots/tooltip/languages-interval-stack/step0.html b/__tests__/integration/snapshots/tooltip/languages-interval-stack/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: 10px; top: 10px;"
+>
+  <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; margin-top: 12px; display: flex; line-height: 1em; 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="value"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          value
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="220"
+        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;"
+      >
+        220
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/plots/tooltip/alphabet-interval-channel.ts b/__tests__/plots/tooltip/alphabet-interval-channel.ts
@@ -0,0 +1,31 @@
+import { G2Spec } from '../../../src';
+import { tooltipSteps } from './utils';
+
+export function alphabetIntervalChannel(): G2Spec {
+  return {
+    type: 'view',
+    children: [
+      {
+        type: 'interval',
+        padding: 0,
+        data: {
+          type: 'fetch',
+          value: 'data/alphabet.csv',
+        },
+        axis: false,
+        legend: false,
+        encode: {
+          x: 'letter',
+          y: 'frequency',
+          color: 'steelblue',
+        },
+        tooltip: { channel: 'y' },
+      },
+    ],
+    interaction: {
+      tooltip: true,
+    },
+  };
+}
+
+alphabetIntervalChannel.steps = tooltipSteps(0);
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -21,3 +21,5 @@ export { flareTreemapPoptipCustom } from './flare-treemap-poptip-custom';
 export { morleyBoxChannel } from './morley-box-channel';
 export { alphabetIntervalMultiField } from './alphabet-interval-multi-field';
 export { alphabetIntervalFull } from './alphabet-interval-full';
+export { languagesIntervalStack } from './languages-interval-stack';
+export { alphabetIntervalChannel } from './alphabet-interval-channel';
diff --git a/__tests__/plots/tooltip/indices-line.ts b/__tests__/plots/tooltip/indices-line.ts
@@ -24,6 +24,7 @@ export async function indicesLine(): Promise<G2Spec> {
           color: 'Symbol',
           key: 'Symbol',
         },
+        tooltip: { channel: 'y' },
       },
     ],
     interaction: {

diff --git a/__tests__/plots/tooltip/languages-interval-stack.ts b/__tests__/plots/tooltip/languages-interval-stack.ts
@@ -0,0 +1,21 @@
+import { G2Spec } from '../../../src';
+import { languages } from '../../data/languages';
+import { tooltipSteps } from './utils';
+
+export function languagesIntervalStack(): G2Spec {
+  return {
+    type: 'interval',
+    data: languages,
+    transform: [{ type: 'stackY' }],
+    coordinate: { type: 'theta', innerRadius: 0.25, outerRadius: 0.8 },
+    encode: {
+      y: 'value',
+      color: 'id',
+    },
+    interaction: {
+      tooltip: true,
+    },
+  };
+}
+
+languagesIntervalStack.steps = tooltipSteps(1);
diff --git a/src/interaction/native/tooltip.ts b/src/interaction/native/tooltip.ts
@@ -80,12 +80,6 @@ function destroyTooltip(root) {
   }
 }
 
-function filterDefined(obj) {
-  return Object.fromEntries(
-    Object.entries(obj).filter(([, value]) => defined(value)),
-  );
-}
-
 function singleItem(element) {
   const { __data__: datum } = element;
   const { title, items = [] } = datum;

diff --git a/src/runtime/transform.ts b/src/runtime/transform.ts
@@ -114,11 +114,18 @@ export function normalizeTooltip(
   context: TransformContext,
 ): [number[], G2Mark] {
   const { tooltip = {} } = mark;
+  const isFullTooltip = (tooltip) => {
+    if (Object.keys(tooltip).length === 0) return true;
+    const { title, items } = tooltip;
+    return title !== undefined || items !== undefined;
+  };
   if (tooltip === null) return [I, mark];
   if (Array.isArray(tooltip)) {
     return [I, { ...mark, tooltip: { items: tooltip } }];
   }
-  if (isStrictObject(tooltip)) return [I, { ...mark, tooltip }];
+  if (isStrictObject(tooltip) && isFullTooltip(tooltip)) {
+    return [I, { ...mark, tooltip }];
+  }
   return [I, { ...mark, tooltip: { items: [tooltip] } }];
 }
 
@@ -136,8 +143,9 @@ export function extractTooltip(
     }
     if (isStrictObject(item)) {
       const { field, channel, color, name = field } = item;
+      const channelField = channel && encode[channel].field;
       return I.map((i) => ({
-        name,
+        name: name || channelField,
         color,
         value: field
           ? data[i][field]

diff --git a/src/transform/maybeTooltip.ts b/src/transform/maybeTooltip.ts
@@ -1,6 +1,5 @@
 import { deepMix } from '@antv/util';
 import { TransformComponent as TC } from '../runtime';
-import { column, columnOf } from './utils/helper';
 
 export type MaybeTooltipOptions = {
   channel: string | string[];
@@ -21,10 +20,9 @@ export const MaybeTooltip: TC<MaybeTooltipOptions> = (options) => {
       Object.keys(encode)
         .filter((key) => key.startsWith(channel))
         .map((key) => {
-          const [V, fv] = columnOf(encode, key);
-          // Only show channel with field.
-          if (V && fv !== null) return V.map((v) => ({ value: v, name: fv }));
-          return null;
+          const { field } = encode[key];
+          if (!field) return null;
+          return { field };
         })
         .filter((d) => d !== null),
     );