From dc1182755f89c0647cee2fbd9a9d35719d653c8a Mon Sep 17 00:00:00 2001 From: MiniPear Date: Fri, 20 Oct 2023 14:27:26 +0800 Subject: [PATCH] fix(tooltip): shared tooltip with scrollbar --- .../state-ages-interval-scrollbar/step0.html | 278 ++++++++++++++++++ __tests__/plots/tooltip/index.ts | 1 + .../tooltip/stateages-interval-scrollbar.ts | 26 ++ src/interaction/utils.ts | 6 +- 4 files changed, 306 insertions(+), 5 deletions(-) create mode 100644 __tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/step0.html create mode 100644 __tests__/plots/tooltip/stateages-interval-scrollbar.ts diff --git a/__tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/step0.html b/__tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/step0.html new file mode 100644 index 0000000000..3fc5958129 --- /dev/null +++ b/__tests__/integration/snapshots/tooltip/state-ages-interval-scrollbar/step0.html @@ -0,0 +1,278 @@ +
+
+ CA +
+ +
\ No newline at end of file diff --git a/__tests__/plots/tooltip/index.ts b/__tests__/plots/tooltip/index.ts index 3640ab993f..8d94a0df09 100644 --- a/__tests__/plots/tooltip/index.ts +++ b/__tests__/plots/tooltip/index.ts @@ -66,3 +66,4 @@ export { alphabetIntervalTooltipRenderUpdate } from './alphabet-interval-tooltip export { mockIntervalShared } from './mock-interval-shared'; export { stateAgesIntervalCustomStyle } from './stateages-interval-custom-style'; export { mockTooltipClosest } from './mock-tooltip-closest'; +export { stateAgesIntervalScrollbar } from './stateages-interval-scrollbar'; diff --git a/__tests__/plots/tooltip/stateages-interval-scrollbar.ts b/__tests__/plots/tooltip/stateages-interval-scrollbar.ts new file mode 100644 index 0000000000..d82545dff4 --- /dev/null +++ b/__tests__/plots/tooltip/stateages-interval-scrollbar.ts @@ -0,0 +1,26 @@ +import { G2Spec } from '../../../src'; +import { tooltipSteps } from './utils'; + +export function stateAgesIntervalScrollbar(): G2Spec { + return { + type: 'interval', + transform: [ + { type: 'sortX', by: 'y', reverse: true, reducer: 'sum', slice: 6 }, + { type: 'dodgeX' }, + ], + data: { + type: 'fetch', + value: 'data/stateages.csv', + }, + legend: false, + encode: { + x: 'state', + y: 'population', + color: 'age', + }, + interaction: { tooltip: { shared: true } }, + scrollbar: { x: { ratio: 0.5 } }, + }; +} + +stateAgesIntervalScrollbar.steps = tooltipSteps(0); diff --git a/src/interaction/utils.ts b/src/interaction/utils.ts index 02c12650a2..b473664762 100644 --- a/src/interaction/utils.ts +++ b/src/interaction/utils.ts @@ -82,11 +82,7 @@ export function createColorKey(view) { } export function createXKey(view) { - const { x: scaleX } = view.scale; - return (element) => { - const { x } = element.__data__; - return scaleX.invert(x); - }; + return (element) => element.__data__.x; } export function createDatumof(view: G2ViewDescriptor | G2ViewDescriptor[]) {