feat(tooltip): on and emit (#4980)

__tests__/integration/api-chart-emit-item-tooltip.spec.ts

@@ -0,0 +1,51 @@
+import { chartEmitItemTooltip as render } from '../plots/api/chart-emit-item-tooltip';
+import { kebabCase } from './utils/kebabCase';
+import {
+  dispatchFirstElementEvent,
+  createPromise,
+  receiveExpectData,
+} from './utils/event';
+import './utils/useSnapshotMatchers';
+import { createDOMGCanvas } from './utils/createDOMGCanvas';
+
+describe('chart.emit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
+  const canvas = createDOMGCanvas(800, 500);
+
+  it('chart.emit and chart.on should control item tooltip display.', async () => {
+    const { finished, chart, clear } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    clear();
+
+    // chart.emit("tooltip:show", options) should show tooltip.
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
+      selector: '.tooltip',
+    });
+
+    // chart.emit("tooltip:hide") should hide tooltip.
+    chart.emit('tooltip:hide');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
+      selector: '.tooltip',
+    });
+
+    chart.off();
+    // chart.on("tooltip:show", callback) should revive selected data.
+    const [tooltipShowed, resolveShow] = createPromise();
+    chart.on('tooltip:show', receiveExpectData(resolveShow));
+    dispatchFirstElementEvent(canvas, 'pointerover');
+    await tooltipShowed;
+
+    // chart.on("tooltip:hide") should be called when hiding tooltip.
+    const [tooltipHided, resolveHide] = createPromise();
+    chart.on('tooltip:hide', receiveExpectData(resolveHide, null));
+    dispatchFirstElementEvent(canvas, 'pointerout');
+    await tooltipHided;
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/integration/api-chart-emit-pie-tooltip.spec.ts

@@ -0,0 +1,27 @@
+import { chartEmitPieTooltip as render } from '../plots/api/chart-emit-pie-tooltip';
+import { kebabCase } from './utils/kebabCase';
+import './utils/useSnapshotMatchers';
+import { createDOMGCanvas } from './utils/createDOMGCanvas';
+
+describe('chart.emit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
+  const canvas = createDOMGCanvas(800, 500);
+
+  it('chart.emit and chart.on should control item tooltip display.', async () => {
+    const { finished, chart, clear } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    clear();
+
+    // chart.emit("tooltip:show", options) should show tooltip.
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
+      selector: '.tooltip',
+    });
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/integration/api-chart-emit-series-tooltip.spec.ts

@@ -0,0 +1,59 @@
+import { chartEmitSeriesTooltip as render } from '../plots/api/chart-emit-series-tooltip';
+import { kebabCase } from './utils/kebabCase';
+import {
+  dispatchPlotEvent,
+  createPromise,
+  receiveExpectData,
+} from './utils/event';
+import { createDOMGCanvas } from './utils/createDOMGCanvas';
+import './utils/useCustomFetch';
+import './utils/useSnapshotMatchers';
+
+describe('chart.emit', () => {
+  const dir = `${__dirname}/snapshots/api/${kebabCase(render.name)}`;
+  const canvas = createDOMGCanvas(800, 500);
+
+  it('chart.emit and chart.on should control item tooltip display.', async () => {
+    const { finished, chart, clear } = render({
+      canvas,
+      container: document.createElement('div'),
+    });
+    await finished;
+    clear();
+
+    // chart.emit("tooltip:show", options) should show tooltip.
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step0', {
+      selector: '.tooltip',
+    });
+
+    // chart.emit("tooltip:hide") should hide tooltip.
+    chart.emit('tooltip:hide');
+    await expect(canvas).toMatchDOMSnapshot(dir, 'step1', {
+      selector: '.tooltip',
+    });
+
+    chart.off();
+    // chart.on("tooltip:show", callback) should revive selected data.
+    const [tooltipShowed, resolveShow] = createPromise();
+    chart.on('tooltip:show', (event) => {
+      const { x } = event.data.data;
+      expect(x.toUTCString()).toBe('Tue, 23 Oct 2007 05:18:47 GMT');
+      resolveShow();
+    });
+    dispatchPlotEvent(canvas, 'pointermove', {
+      offsetX: 100,
+      offsetY: 100,
+    });
+    await tooltipShowed;
+
+    // chart.on("tooltip:hide") should be called when hiding tooltip.
+    const [tooltipHided, resolveHide] = createPromise();
+    chart.on('tooltip:hide', receiveExpectData(resolveHide, null));
+    dispatchPlotEvent(canvas, 'pointerleave');
+    await tooltipHided;
+  });
+
+  afterAll(() => {
+    canvas?.destroy();
+  });
+});

__tests__/integration/api-chart-on-item-element.spec.ts

@@ -1,6 +1,10 @@
 import { chartOnItemElement as render } from '../plots/api/chart-on-item-element';
 import { createDOMGCanvas } from './utils/createDOMGCanvas';
-import { dispatchEvent, createPromise, receiveExpectData } from './utils/event';
+import {
+  dispatchFirstElementEvent,
+  createPromise,
+  receiveExpectData,
+} from './utils/event';
 import './utils/useSnapshotMatchers';
 import { ChartEvent } from '../../src';
 
@@ -14,71 +18,71 @@ describe('chart.on', () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`element:${ChartEvent.CLICK}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'click', { detail: 1 });
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
     await fired;
   });
 
   it('chart.on("interval:click", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.CLICK}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'click', { detail: 1 });
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
     await fired;
   });
 
   it('chart.on("interval:dblclick", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DBLCLICK}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'click', { detail: 2 });
+    dispatchFirstElementEvent(canvas, 'click', { detail: 2 });
     await fired;
   });
 
   it('chart.on("interval:pointertap", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.POINTER_TAP}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'pointertap');
+    dispatchFirstElementEvent(canvas, 'pointertap');
     await fired;
   });
 
   it('chart.on("interval:pointerdown", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.POINTER_DOWN}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'pointerdown');
+    dispatchFirstElementEvent(canvas, 'pointerdown');
     await fired;
   });
 
   it('chart.on("interval:pointerup", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.POINTER_UP}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'pointerup');
+    dispatchFirstElementEvent(canvas, 'pointerup');
     await fired;
   });
 
   it('chart.on("interval:pointerover", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.POINTER_OVER}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'pointerover');
+    dispatchFirstElementEvent(canvas, 'pointerover');
     await fired;
   });
 
   it('chart.on("interval:pointerout", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.POINTER_OUT}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'pointerout');
+    dispatchFirstElementEvent(canvas, 'pointerout');
     await fired;
   });
 
   it('chart.on("interval:pointermove", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.POINTER_MOVE}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'pointermove');
+    dispatchFirstElementEvent(canvas, 'pointermove');
     await fired;
   });
 
@@ -89,7 +93,7 @@ describe('chart.on', () => {
       `interval:${ChartEvent.POINTER_ENTER}`,
       receiveExpectData(resolve),
     );
-    dispatchEvent(canvas, 'pointerenter');
+    dispatchFirstElementEvent(canvas, 'pointerenter');
     await fired;
   });
 
@@ -100,7 +104,7 @@ describe('chart.on', () => {
       `interval:${ChartEvent.POINTER_LEAVE}`,
       receiveExpectData(resolve),
     );
-    dispatchEvent(canvas, 'pointerleave');
+    dispatchFirstElementEvent(canvas, 'pointerleave');
     await fired;
   });
 
@@ -111,63 +115,63 @@ describe('chart.on', () => {
       `interval:${ChartEvent.POINTER_UPOUTSIDE}`,
       receiveExpectData(resolve),
     );
-    dispatchEvent(canvas, 'pointerupoutside');
+    dispatchFirstElementEvent(canvas, 'pointerupoutside');
     await fired;
   });
 
   it('chart.on("interval:dragstart", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DRAG_START}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'dragstart');
+    dispatchFirstElementEvent(canvas, 'dragstart');
     await fired;
   });
 
   it('chart.on("interval:dragend", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DRAG_END}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'dragend');
+    dispatchFirstElementEvent(canvas, 'dragend');
     await fired;
   });
 
   it('chart.on("interval:drag", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DRAG}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'drag');
+    dispatchFirstElementEvent(canvas, 'drag');
     await fired;
   });
 
   it('chart.on("interval:dragenter", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DRAG_ENTER}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'dragenter');
+    dispatchFirstElementEvent(canvas, 'dragenter');
     await fired;
   });
 
   it('chart.on("interval:dragleave", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DRAG_LEAVE}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'dragleave');
+    dispatchFirstElementEvent(canvas, 'dragleave');
     await fired;
   });
 
   it('chart.on("interval:dragover", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DRAG_OVER}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'dragover');
+    dispatchFirstElementEvent(canvas, 'dragover');
     await fired;
   });
 
   it('chart.on("interval:drop", callback) should provide datum for item element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on(`interval:${ChartEvent.DROP}`, receiveExpectData(resolve));
-    dispatchEvent(canvas, 'drop');
+    dispatchFirstElementEvent(canvas, 'drop');
     await fired;
   });
 

__tests__/integration/api-chart-on-series-element.spec.ts

@@ -1,6 +1,10 @@
 import { chartOnSeriesElement as render } from '../plots/api/chart-on-series-element';
 import { createDOMGCanvas } from './utils/createDOMGCanvas';
-import { dispatchEvent, createPromise, receiveExpectData } from './utils/event';
+import {
+  dispatchFirstElementEvent,
+  createPromise,
+  receiveExpectData,
+} from './utils/event';
 import './utils/useSnapshotMatchers';
 
 const data = {
@@ -77,15 +81,15 @@ describe('chart.on', () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on('element:click', receiveExpectData(resolve, data));
-    dispatchEvent(canvas, 'click', { detail: 1 });
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
     await fired;
   });
 
   it('chart.on("line:click", callback) should provide data for series element', async () => {
     await finished;
     const [fired, resolve] = createPromise();
     chart.on('line:click', receiveExpectData(resolve, data));
-    dispatchEvent(canvas, 'click', { detail: 1 });
+    dispatchFirstElementEvent(canvas, 'click', { detail: 1 });
     await fired;
   });
 

__tests__/integration/snapshots/api/chart-emit-item-tooltip/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: 226.7156883688534px; top: 380.10715157645086px;"
+>
+  <div
+    class="tooltip-title"
+    style="color: rgba(0, 0, 0, 0.45); overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+  >
+    Strategy
+  </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="sold"
+          style="flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"
+        >
+          sold
+        </span>
+      </span>
+      <span
+        class="tooltip-list-item-value"
+        title="115"
+        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;"
+      >
+        115
+      </span>
+    </li>
+  </ul>
+</div>;