feat: tooltip render to mount dom (#5025)

* feat: tooltip render to mount dom * fix: append canvas into jsdom * docs: update interaction.tooltip documents
antvis · May 16, 2023 · d6e098f · d6e098f
1 parent 7a076a9
commit d6e098f
Show file tree

Hide file tree

Showing 11 changed files with 230 additions and 29 deletions.
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step0.html b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/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: 60px; top: 210px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Sun, 13 May 2007 00:00:00 GMT
+  </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="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="109.36"
+        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;"
+      >
+        109.36
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/step1.html b/__tests__/integration/snapshots/tooltip/aapl-line-area-basic-sample-mount/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: 560px; top: 210px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Mon, 13 Feb 2012 00:00:00 GMT
+  </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="close"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          close
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="509.46"
+        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;"
+      >
+        509.46
+      </span>
+    </li>
+  </ul>
+</div>;
diff --git a/__tests__/integration/spec-tooltip.spec.ts b/__tests__/integration/spec-tooltip.spec.ts
@@ -55,4 +55,7 @@ describe('Tooltips', () => {
       }
     });
   }
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
 });
diff --git a/__tests__/integration/utils/createDOMGCanvas.ts b/__tests__/integration/utils/createDOMGCanvas.ts
@@ -11,6 +11,7 @@ export function createDOMGCanvas(width, height) {
   const domInteractionPlugin = renderer.getPlugin('dom-interaction');
   renderer.unregisterPlugin(domInteractionPlugin);
   const container = document.createElement('div');
+  document.body.append(container);
   return new Canvas({
     container,
     width,

diff --git a/__tests__/integration/utils/renderSpec.ts b/__tests__/integration/utils/renderSpec.ts
@@ -2,7 +2,6 @@ import { Canvas } from '@antv/g';
 import { G2Context, G2Spec, render } from '../../../src';
 import { renderToMountedElement } from '../../utils/renderToMountedElement';
 import { createNodeGCanvas } from './createNodeGCanvas';
-import { sleep } from './sleep';
 
 export async function renderSpec(
   generateOptions,

diff --git a/__tests__/integration/utils/toMatchDOMSnapshot.ts b/__tests__/integration/utils/toMatchDOMSnapshot.ts
@@ -21,7 +21,7 @@ export async function toMatchDOMSnapshot(
   const actualPath = path.join(dir, `${name}-actual.${fileFormat}`);
   const expectedPath = path.join(dir, `${name}.${fileFormat}`);
   const container = gCanvas.getConfig().container as HTMLElement;
-  const dom = selector ? container.querySelector(selector) : container;
+  const dom = selector ? document.body.querySelector(selector) : container;
 
   let actual;
   try {

diff --git a/__tests__/plots/tooltip/aapl-line-area-basic-sample-mount.ts b/__tests__/plots/tooltip/aapl-line-area-basic-sample-mount.ts
@@ -0,0 +1,51 @@
+import { G2Spec } from '../../../src';
+import { seriesTooltipSteps } from './utils';
+
+export function aaplLineAreaBasicSampleMount(): G2Spec {
+  return {
+    width: 600,
+    height: 400,
+    type: 'view',
+    data: {
+      type: 'fetch',
+      value: 'data/aapl.csv',
+    },
+    children: [
+      {
+        type: 'area',
+        encode: {
+          x: 'date',
+          y: 'close',
+        },
+        transform: [
+          {
+            type: 'sample',
+            thresholds: 100,
+            strategy: 'lttb',
+          },
+        ],
+        style: {
+          fillOpacity: 0.5,
+        },
+        tooltip: {
+          title: (d) => new Date(d.date).toUTCString(),
+        },
+        interaction: {
+          tooltip: {
+            mount: 'body',
+            bounding: {
+              x: 100,
+              y: 100,
+              width: 500,
+              height: 300,
+            },
+          },
+        },
+      },
+    ],
+  };
+}
+
+aaplLineAreaBasicSampleMount.maxError = 100;
+
+aaplLineAreaBasicSampleMount.steps = seriesTooltipSteps([50, 200], [550, 200]);
diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts
@@ -56,6 +56,7 @@ export { scoreByItemAreaRadar } from './score-by-item-area-radar';
 export { profitIntervalLegendFilterOrdinal } from './profit-interval-legend-filter-ordinal';
 export { aaplLineSliderFilter } from './appl-line-slider-filter';
 export { aaplLineAreaBasicSample } from './aapl-line-area-basic-sample';
+export { aaplLineAreaBasicSampleMount } from './aapl-line-area-basic-sample-mount';
 export { aaplAreaMissingDataTranspose } from './aapl-area-missing-data-transpose';
 export { alphabetIntervalBrushTooltip } from './alphabet-interval-brush-tooltip';
 export { mockLineFalsy } from './mock-line-falsy';

diff --git a/site/docs/spec/interaction/tooltip.zh.md b/site/docs/spec/interaction/tooltip.zh.md
@@ -44,6 +44,8 @@ chart.render();
 | body                      | 是否展示 tooltip                     | `boolean`                                   | true   |
 | groupName                 | 是否使用 groupName                   | `boolean`                                   | true   |
 | position                  | tooltip 位置                         | `TooltipPosition`                           | -      |
+| mount                     | tooltip 渲染的 dom 节点             | `string` \| `HTMLElement`                     | 图表容器  |
+| bounding                  | tooltip 渲染的限制区域，超出会自动调整位置   | `BBox`                                   | 图表区域大小  |
 | crosshairs                | 是否暂时指示线                       | `boolean`                                   | -      |
 | `crosshairs${StyleAttrs}` | 指示线的样式                         | `number \| string`                          | -      |
 | render                    | 自定义 tooltip 渲染函数              | `(event, options) => HTMLElement \| string` | -      |
@@ -52,7 +54,6 @@ chart.render();
 
 ```ts
 type TooltipPosition =
-  | 'auto'
   | 'top'
   | 'bottom'
   | 'left'
@@ -61,6 +62,8 @@ type TooltipPosition =
   | 'top-right'
   | 'bottom-left'
   | 'bottom-right';
+
+type BBox = { x: number, y: number, width: number, height: number };
 ```
 
 ## 案例