feat(tooltip): custom marker tooltip (#6384)

* feat(tooltip): custom marker tooltip

* test: update snapshots

__tests__/integration/snapshots/tooltip/temperature-line-marker/step0.html

@@ -0,0 +1,9 @@
+<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: sans-serif; left: 210px; top: 310px;"
+>
+  Tokyo: 9.5
+  <br />
+  London: 5.7
+</div>

__tests__/integration/snapshots/tooltip/temperature-line-marker/step1.html

@@ -0,0 +1,7 @@
+<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: sans-serif; left: 199.470002395169px; top: 322.01769911504425px;"
+>
+  Tokyo: 9.5
+</div>

__tests__/plots/tooltip/index.ts

@@ -79,3 +79,4 @@ export { mockTooltipClosestTransposed } from './mock-tooltip-closest-transposed'
 export { mockDualBarShareTooltip } from './mock-dual-bar-share-tooltip';
 export { alphabetLineEnterable } from './alphabet-line-enterable';
 export { mockGroupInterval } from './mock-group-interval';
+export { temperatureLineMarker } from './temperatures-line-marker';

__tests__/plots/tooltip/temperatures-line-marker.ts

@@ -0,0 +1,60 @@
+import { CustomEvent } from '@antv/g';
+import { G2Spec, PLOT_CLASS_NAME } from '../../../src';
+import { temperatures } from '../../data/temperatures';
+
+export function temperatureLineMarker(): G2Spec {
+  return {
+    type: 'line',
+    data: temperatures,
+    encode: {
+      x: 'month',
+      y: 'temperature',
+      color: 'city',
+    },
+    interaction: {
+      tooltip: {
+        render: (event, { items }) => {
+          const target = event.target;
+          const format = (item) => `${item.name}: ${item.value}`;
+          if (target.className === 'g2-tooltip-marker') {
+            const color = target.style.fill;
+            const item = items.find((i) => i.color === color);
+            return format(item);
+          }
+          return items.map(format).join('<br>');
+        },
+      },
+    },
+  };
+}
+
+temperatureLineMarker.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const plot = document.getElementsByClassName(PLOT_CLASS_NAME)[0];
+  return [
+    {
+      changeState: async () => {
+        plot.dispatchEvent(
+          new CustomEvent('pointermove', {
+            offsetX: 200,
+            offsetY: 300,
+          }),
+        );
+      },
+    },
+    {
+      changeState: async () => {
+        const marker = plot.getElementsByClassName('g2-tooltip-marker')[0];
+        const bbox = marker.getBBox();
+        const x = bbox.x + bbox.width / 2;
+        const y = bbox.y + bbox.height / 2;
+        marker.dispatchEvent(
+          new CustomEvent('pointermove', {
+            offsetX: x,
+            offsetY: y,
+          }),
+        );
+      },
+    },
+  ];
+};

site/examples/component/tooltip/demo/meta.json

@@ -52,6 +52,14 @@
       },
       "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*seQRQrEFOBoAAAAAAAAAAAAADmJ7AQ/original"
     },
+    {
+      "filename": "tooltip-line-marker.ts",
+      "title": {
+        "zh": "自定义 marker 的 tooltip",
+        "en": "Custom Marker Tooltip"
+      },
+      "screenshot": "https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TgQ-TI-8Jj4AAAAAAAAAAAAADmJ7AQ/original"
+    },
     {
       "filename": "tooltip-click.ts",
       "title": {

site/examples/component/tooltip/demo/tooltip-click-line.ts

@@ -1,15 +1,5 @@
 import { Chart } from '@antv/g2';
 
-function css(...styles) {
-  return styles
-    .map((obj) =>
-      Object.entries(obj)
-        .map(([k, v]) => k + ':' + v)
-        .join(';'),
-    )
-    .join(';');
-}
-
 const chart = new Chart({
   container: 'container',
   autoFit: true,