wip

Shopify · Dec 4, 2024 · 34b1e06 · 34b1e06
1 parent b38b128
commit 34b1e06
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git 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<number | null>(null);
   const touchStartTimer = useRef<number>(0);
   const isLongTouch = useRef(false);
@@ -94,16 +96,16 @@ 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,
       };
       switch (chartType) {
         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
@@ -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
@@ -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<TooltipPositionParams, 'xScale'> {
+  containerBounds: BoundingRect;
   xScale: ScaleLinear<number, number>;
 }
 
 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,
     };
   }