diff --git a/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx b/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx index f1663fca0..798cf3212 100644 --- a/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx +++ b/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx @@ -65,6 +65,8 @@ function TooltipWrapperRaw(props: BaseProps) { position: DEFAULT_TOOLTIP_POSITION, }); + const {containerBounds: bounds} = useChartContext(); + const activeIndexRef = useRef(null); const touchStartTimer = useRef(0); const isLongTouch = useRef(false); @@ -94,9 +96,8 @@ function TooltipWrapperRaw(props: BaseProps) { }) => { const containerBounds = { x: parentElement?.getBoundingClientRect().x ?? 0, - y: - Number(parentElement?.getBoundingClientRect().y ?? 0) + - Number(scrollContainer?.scrollTop ?? 0), + y: parentElement?.getBoundingClientRect().y ?? 0, + // + Number(scrollContainer?.scrollTop ?? 0), width: parentElement?.getBoundingClientRect().width ?? 0, height: parentElement?.getBoundingClientRect().height ?? 0, }; @@ -104,6 +105,7 @@ function TooltipWrapperRaw(props: BaseProps) { case InternalChartType.Line: return getLineChartTooltipPosition({ chartBounds, + containerBounds, data, event, eventType, diff --git a/packages/polaris-viz/src/components/TooltipWrapper/utilities/getAlteredLineChartPosition.ts b/packages/polaris-viz/src/components/TooltipWrapper/utilities/getAlteredLineChartPosition.ts index 71d0840f1..38199f218 100644 --- a/packages/polaris-viz/src/components/TooltipWrapper/utilities/getAlteredLineChartPosition.ts +++ b/packages/polaris-viz/src/components/TooltipWrapper/utilities/getAlteredLineChartPosition.ts @@ -18,7 +18,7 @@ export type AlteredPosition = ( export function getAlteredLineChartPosition( props: AlteredPositionProps, ): AlteredPositionReturn { - const {currentX, currentY, chartBounds, scrollContainer} = props; + const {currentX, currentY, containerBounds, scrollContainer} = props; let x = currentX; let y = currentY; @@ -28,7 +28,7 @@ export function getAlteredLineChartPosition( // if (props.isPerformanceImpacted) { - y = chartBounds.y - (scrollContainer?.scrollTop ?? 0); + y = containerBounds.y - (scrollContainer?.scrollTop ?? 0); } // @@ -41,6 +41,7 @@ export function getAlteredLineChartPosition( if (right.wasOutsideBounds) { const left = getLeftPosition(x, props); + console.log('left', left); x = left.value; } diff --git a/packages/polaris-viz/src/components/TooltipWrapper/utilities/getLineChartTooltipPosition.ts b/packages/polaris-viz/src/components/TooltipWrapper/utilities/getLineChartTooltipPosition.ts index dd53fb9bb..153e180e4 100644 --- a/packages/polaris-viz/src/components/TooltipWrapper/utilities/getLineChartTooltipPosition.ts +++ b/packages/polaris-viz/src/components/TooltipWrapper/utilities/getLineChartTooltipPosition.ts @@ -1,4 +1,4 @@ -import {clamp} from '@shopify/polaris-viz-core'; +import {BoundingRect, clamp} from '@shopify/polaris-viz-core'; import type {ScaleLinear} from 'd3-scale'; import type {TooltipPositionParams} from '../types'; @@ -7,10 +7,12 @@ import {TOOLTIP_POSITION_DEFAULT_RETURN} from '../constants'; import {getXYFromEventType, eventPointNative} from './eventPoint'; interface Props extends Omit { + containerBounds: BoundingRect; xScale: ScaleLinear; } export function getLineChartTooltipPosition({ + containerBounds, chartBounds, data, event, @@ -53,8 +55,8 @@ export function getLineChartTooltipPosition({ const x = xScale?.(activeIndex) ?? 0; return { - x: x + chartBounds.x, - y: chartBounds.y, + x: x + containerBounds.x, + y: containerBounds.y, activeIndex, }; }