From c824b5f087c1445809b0fca9ffa29555a2581ed5 Mon Sep 17 00:00:00 2001 From: pearmini Date: Thu, 25 Jul 2024 15:06:50 +0800 Subject: [PATCH 1/2] feat(tooltip): custom marker tooltip --- .../temperature-line-marker/step0.html | 9 +++ .../temperature-line-marker/step1.html | 7 +++ __tests__/plots/tooltip/index.ts | 1 + .../plots/tooltip/temperatures-line-marker.ts | 60 +++++++++++++++++++ .../examples/component/tooltip/demo/meta.json | 8 +++ .../tooltip/demo/tooltip-click-line.ts | 10 ---- .../tooltip/demo/tooltip-line-marker.ts | 52 ++++++++++++++++ src/interaction/tooltip.ts | 1 + 8 files changed, 138 insertions(+), 10 deletions(-) create mode 100644 __tests__/integration/snapshots/tooltip/temperature-line-marker/step0.html create mode 100644 __tests__/integration/snapshots/tooltip/temperature-line-marker/step1.html create mode 100644 __tests__/plots/tooltip/temperatures-line-marker.ts create mode 100644 site/examples/component/tooltip/demo/tooltip-line-marker.ts diff --git a/__tests__/integration/snapshots/tooltip/temperature-line-marker/step0.html b/__tests__/integration/snapshots/tooltip/temperature-line-marker/step0.html new file mode 100644 index 0000000000..eba07a4df6 --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/temperature-line-marker/step0.html @@ -0,0 +1,9 @@ +
+ Tokyo: 9.5 +
+ London: 5.7 +
\ No newline at end of file diff --git a/__tests__/integration/snapshots/tooltip/temperature-line-marker/step1.html b/__tests__/integration/snapshots/tooltip/temperature-line-marker/step1.html new file mode 100644 index 0000000000..cef5aeb5a4 --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/temperature-line-marker/step1.html @@ -0,0 +1,7 @@ +
+ Tokyo: 9.5 +
\ No newline at end of file diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts index b89a593dc3..863eaa7cca 100644 --- a/__tests__/plots/tooltip/index.ts +++ b/__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'; diff --git a/__tests__/plots/tooltip/temperatures-line-marker.ts b/__tests__/plots/tooltip/temperatures-line-marker.ts new file mode 100644 index 0000000000..10da59c797 --- /dev/null +++ b/__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('
'); + }, + }, + }, + }; +} + +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, + }), + ); + }, + }, + ]; +}; diff --git a/site/examples/component/tooltip/demo/meta.json b/site/examples/component/tooltip/demo/meta.json index 66827f7f3c..d36a765e2a 100644 --- a/site/examples/component/tooltip/demo/meta.json +++ b/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": { diff --git a/site/examples/component/tooltip/demo/tooltip-click-line.ts b/site/examples/component/tooltip/demo/tooltip-click-line.ts index a153ad7588..670c3e5205 100644 --- a/site/examples/component/tooltip/demo/tooltip-click-line.ts +++ b/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, diff --git a/site/examples/component/tooltip/demo/tooltip-line-marker.ts b/site/examples/component/tooltip/demo/tooltip-line-marker.ts new file mode 100644 index 0000000000..c6bd2d243a --- /dev/null +++ b/site/examples/component/tooltip/demo/tooltip-line-marker.ts @@ -0,0 +1,52 @@ +import { Chart } from '@antv/g2'; + +const chart = new Chart({ + container: 'container', + autoFit: true, +}); + +chart + .line() + .data([ + { month: 'Jan', city: 'Tokyo', temperature: 7 }, + { month: 'Jan', city: 'London', temperature: 3.9 }, + { month: 'Feb', city: 'Tokyo', temperature: 6.9 }, + { month: 'Feb', city: 'London', temperature: 4.2 }, + { month: 'Mar', city: 'Tokyo', temperature: 9.5 }, + { month: 'Mar', city: 'London', temperature: 5.7 }, + { month: 'Apr', city: 'Tokyo', temperature: 14.5 }, + { month: 'Apr', city: 'London', temperature: 8.5 }, + { month: 'May', city: 'Tokyo', temperature: 18.4 }, + { month: 'May', city: 'London', temperature: 11.9 }, + { month: 'Jun', city: 'Tokyo', temperature: 21.5 }, + { month: 'Jun', city: 'London', temperature: 15.2 }, + { month: 'Jul', city: 'Tokyo', temperature: 25.2 }, + { month: 'Jul', city: 'London', temperature: 17 }, + { month: 'Aug', city: 'Tokyo', temperature: 26.5 }, + { month: 'Aug', city: 'London', temperature: 16.6 }, + { month: 'Sep', city: 'Tokyo', temperature: 23.3 }, + { month: 'Sep', city: 'London', temperature: 14.2 }, + { month: 'Oct', city: 'Tokyo', temperature: 18.3 }, + { month: 'Oct', city: 'London', temperature: 10.3 }, + { month: 'Nov', city: 'Tokyo', temperature: 13.9 }, + { month: 'Nov', city: 'London', temperature: 6.6 }, + { month: 'Dec', city: 'Tokyo', temperature: 9.6 }, + { month: 'Dec', city: 'London', temperature: 4.8 }, + ]) + .encode('x', 'month') + .encode('y', 'temperature') + .encode('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('
'); + }, + }); + +chart.render(); diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index d397275e00..14aca94363 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -499,6 +499,7 @@ function updateMarker(root, { data, style, theme }) { const fill = type === 'hollow' ? 'transparent' : originColor; const stroke = type === 'hollow' ? originColor : '#fff'; const shape = new Circle({ + className: 'g2-tooltip-marker', style: { cx: point[0], cy: point[1], From 3f75ba64ee6210b58cf5532134a9c2dea7762ac0 Mon Sep 17 00:00:00 2001 From: pearmini Date: Thu, 25 Jul 2024 15:26:33 +0800 Subject: [PATCH 2/2] test: update snapshots --- .../alphabet-interval-active-marker-type/step0.svg | 4 ++++ .../alphabet-interval-active-marker-type/step1.svg | 4 ++++ .../interaction/change-size-polar-crosshairs-x-y/step0.svg | 4 ++++ .../interaction/change-size-polar-crosshairs-x-y/step1.svg | 4 ++++ .../interaction/indices-line-crosshairs-x-y/step0.svg | 5 +++++ .../interaction/indices-line-crosshairs-x-y/step1.svg | 5 +++++ .../interaction/missing-area-tooltip-marker/step1.svg | 1 + .../interaction/points-point-tooltip-marker/step0.svg | 1 + .../snapshots/interaction/stocks-line-slider/step1.svg | 4 ++++ 9 files changed, 32 insertions(+) diff --git a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg index b89759dd12..d63ddeb2a3 100644 --- a/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg +++ b/__tests__/integration/snapshots/interaction/alphabet-interval-active-marker-type/step0.svg @@ -380,6 +380,7 @@