diff --git a/__tests__/integration/chart-emit-show-tooltip.spec.ts b/__tests__/integration/chart-emit-show-tooltip.spec.ts new file mode 100644 index 0000000000..eca519a2a4 --- /dev/null +++ b/__tests__/integration/chart-emit-show-tooltip.spec.ts @@ -0,0 +1,69 @@ +import './utils/useSnapshotMatchers'; +import { Chart } from '../../src'; +import { createNodeGCanvas } from './utils/createNodeGCanvas'; +import { sleep } from './utils/sleep'; +import { dispatchFirstElementPointerMoveEvent } from './utils/event'; +import { kebabCase } from './utils/kebabCase'; + +const data = [ + { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 }, + { name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 }, + { name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 }, + { name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 }, + { name: 'London', 月份: 'May', 月均降雨量: 47 }, + { name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 }, + { name: 'London', 月份: 'Jul.', 月均降雨量: 24 }, + { name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 }, + { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 }, + { name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 }, + { name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 }, + { name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 }, + { name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 }, + { name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 }, + { name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 }, + { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 }, +]; + +function renderColumn({ canvas, container }) { + const chart = new Chart({ canvas, container }); + chart.options({ + type: 'interval', + data, + encode: { x: '月份', y: '月均降雨量', color: 'name' }, + transform: [{ type: 'dodgeX' }], + style: { + inset: 0, + }, + interaction: { tooltip: { shared: false } }, + }); + const finished = chart.render(); + return { chart, finished }; +} + +describe('chart.emit', () => { + const dir = `${__dirname}/snapshots/api/${kebabCase('chartEmitShowTooltip')}`; + const columnCanvas = createNodeGCanvas(640, 480); + + it('chart.emit tooltip', async () => { + const { finished, chart } = renderColumn({ + canvas: columnCanvas, + container: document.createElement('div'), + }); + await finished; + + chart.emit('tooltip:show', { + offsetY: 0, + data: { data: { name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 } }, + }); + await sleep(20); + + await expect(columnCanvas).toMatchDOMSnapshot(dir, 'step0', { + fileFormat: 'html', + selector: '.g2-tooltip', + }); + }); + + afterAll(() => { + columnCanvas?.destroy(); + }); +}); diff --git a/__tests__/integration/snapshots/api/chart-emit-show-tooltip/step0.html b/__tests__/integration/snapshots/api/chart-emit-show-tooltip/step0.html new file mode 100644 index 0000000000..5e5672ce50 --- /dev/null +++ b/__tests__/integration/snapshots/api/chart-emit-show-tooltip/step0.html @@ -0,0 +1,46 @@ +
+
+ Aug. +
+ +
\ No newline at end of file diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index 14aca94363..3af1642df9 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -1000,7 +1000,7 @@ export function tooltip( const scaleSeries = scale.series; const bandWidth = scaleX?.getBandWidth?.() ?? 0; const xof = scaleSeries - ? (d) => d.__data__.x + d.__data__.series * bandWidth + ? (d) => d.__data__.x : (d) => d.__data__.x + bandWidth / 2; // Sort for bisector search. @@ -1018,8 +1018,7 @@ export function tooltip( ? (event) => { const mouse = mousePosition(root, event); if (!mouse) return; - const [normalizedX] = coordinate.invert(mouse); - const abstractX = normalizedX; + const [abstractX] = coordinate.invert(mouse); const search = bisector(xof).center; const i = search(elements, abstractX); const target = elements[i];