From 65e09b0f1f69cdf76a6a88ba37c1cbd3a62d420b Mon Sep 17 00:00:00 2001 From: Bairui Su Date: Thu, 13 Jun 2024 15:01:51 +0800 Subject: [PATCH] fix(tooltip): items for transposed interval + line (#6286) --- .../step0.html | 75 +++++++++++++++++++ .../step1.html | 75 +++++++++++++++++++ __tests__/plots/tooltip/index.ts | 1 + .../mock-tooltip-closest-transposed.ts | 40 ++++++++++ src/interaction/tooltip.ts | 4 +- 5 files changed, 194 insertions(+), 1 deletion(-) create mode 100644 __tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html create mode 100644 __tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html create mode 100644 __tests__/plots/tooltip/mock-tooltip-closest-transposed.ts diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html new file mode 100644 index 0000000000..9630be0c81 --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step0.html @@ -0,0 +1,75 @@ +
+
+ 10:35 +
+ +
\ No newline at end of file diff --git a/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html new file mode 100644 index 0000000000..152e5f58ff --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/mock-tooltip-closest-transposed/step1.html @@ -0,0 +1,75 @@ +
+
+ 10:35 +
+ +
\ No newline at end of file diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts index 45c27b7408..62d93a555d 100644 --- a/__tests__/plots/tooltip/index.ts +++ b/__tests__/plots/tooltip/index.ts @@ -75,3 +75,4 @@ export { oneElementLine } from './one-element-line'; export { disastersPointSlider } from './disasters-point-slider'; export { alphabetText } from './alphabet-text'; export { mockLineFlex } from './mock-line-flex'; +export { mockTooltipClosestTransposed } from './mock-tooltip-closest-transposed'; diff --git a/__tests__/plots/tooltip/mock-tooltip-closest-transposed.ts b/__tests__/plots/tooltip/mock-tooltip-closest-transposed.ts new file mode 100644 index 0000000000..75a7d5a9e1 --- /dev/null +++ b/__tests__/plots/tooltip/mock-tooltip-closest-transposed.ts @@ -0,0 +1,40 @@ +import { seriesTooltipSteps } from './utils'; + +export function mockTooltipClosestTransposed() { + return { + type: 'view', + data: [ + { time: '10:10', call: 4, waiting: 2, people: 2 }, + { time: '10:15', call: 2, waiting: 6, people: 3 }, + { time: '10:20', call: 13, waiting: 2, people: 5 }, + { time: '10:25', call: 9, waiting: 9, people: 1 }, + { time: '10:30', call: 5, waiting: 2, people: 3 }, + { time: '10:35', call: 8, waiting: 2, people: 1 }, + { time: '10:40', call: 13, waiting: 1, people: 2 }, + ], + coordinate: { transform: [{ type: 'transpose' }] }, + children: [ + { + type: 'interval', + encode: { x: 'time', y: 'waiting' }, + axis: { y: { title: 'Waiting', titleFill: '#5B8FF9' } }, + }, + { + type: 'line', + encode: { x: 'time', y: 'people', shape: 'smooth' }, + scale: { y: { independent: true } }, + style: { stroke: '#fdae6b', lineWidth: 2 }, + axis: { + y: { + position: 'right', + grid: null, + title: 'People', + titleFill: '#fdae6b', + }, + }, + }, + ], + }; +} + +mockTooltipClosestTransposed.steps = seriesTooltipSteps([570, 300], [145, 300]); diff --git a/src/interaction/tooltip.ts b/src/interaction/tooltip.ts index c290c04e24..a7f9f172e6 100644 --- a/src/interaction/tooltip.ts +++ b/src/interaction/tooltip.ts @@ -601,7 +601,9 @@ export function seriesTooltip( else if (title || items) itemElements.push(element); } - const isBandScale = !!(transposed ? scale.y : scale.x).getBandWidth; + // For band scale x, find the closest series element to focus, + // useful for interval + line mark. + const isBandScale = !!scale.x.getBandWidth; const closest = isBandScale && itemElements.length > 0; // Sorted elements from top to bottom visually,