wip

Shopify · Dec 4, 2024 · 26737b7 · 26737b7
1 parent b38b128
commit 26737b7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 18 deletions.
diff --git a/packages/polaris-viz/src/components/ChartContainer/hooks/useContainerBounds.ts b/packages/polaris-viz/src/components/ChartContainer/hooks/useContainerBounds.ts
@@ -49,6 +49,8 @@ export function useContainerBounds({
     const scrollY =
       scrollContainer == null ? window.scrollY : scrollContainer.scrollTop;
 
+    console.log(y, scrollY);
+
     setContainerBounds({width, height, x, y: y + scrollY});
   }, [entry, previousEntry?.contentRect, scrollContainer]);
 

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
@@ -27,23 +27,24 @@ export function getAlteredLineChartPosition(
   // Y POSITIONING
   //
 
-  if (props.isPerformanceImpacted) {
-    y = chartBounds.y - (scrollContainer?.scrollTop ?? 0);
-  }
+  // if (props.isPerformanceImpacted) {
+  //   y = chartBounds.y - (scrollContainer?.scrollTop ?? 0);
+  // }
 
-  //
-  // X POSITIONING
-  //
+  // //
+  // // X POSITIONING
+  // //
 
-  const right = getRightPosition(x, props);
+  // const right = getRightPosition(x, props);
 
-  x = right.value;
+  // x = right.value;
 
-  if (right.wasOutsideBounds) {
-    const left = getLeftPosition(x, props);
+  // if (right.wasOutsideBounds) {
+  //   const left = getLeftPosition(x, props);
+  //   console.log('left', left);
 
-    x = left.value;
-  }
+  //   x = left.value;
+  // }
 
   return {
     x: clamp({

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,
     };
   }