Merge pull request #1620 from Shopify/precillieo/polaris-viz-tooltip-bug

[UA][Polaris-Viz]: Fixed Tooltip Positioning When There Are Many Bars
Shopify · Jan 18, 2024 · 9316562 · 9316562
2 parents 1d02a08 + 4715bec
commit 9316562
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx b/packages/polaris-viz/src/components/TooltipWrapper/TooltipWrapper.tsx
@@ -27,6 +27,7 @@ interface BaseProps {
   getAlteredPosition?: AlteredPosition;
   id?: string;
   onIndexChange?: (index: number | null) => void;
+  chartDimensions?: BoundingRect;
 }
 
 function TooltipWrapperRaw(props: BaseProps) {
@@ -40,6 +41,7 @@ function TooltipWrapperRaw(props: BaseProps) {
     id,
     onIndexChange,
     parentRef,
+    chartDimensions,
   } = props;
   const [position, setPosition] = useState<TooltipPosition>({
     x: 0,
@@ -179,6 +181,7 @@ function TooltipWrapperRaw(props: BaseProps) {
       getAlteredPosition={getAlteredPosition}
       margin={props.margin}
       position={position.position}
+      chartDimensions={chartDimensions}
     >
       {props.getMarkup(position.activeIndex)}
     </TooltipAnimatedContainer>

diff --git a/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx b/packages/polaris-viz/src/components/TooltipWrapper/components/TooltipAnimatedContainer.tsx
@@ -22,6 +22,7 @@ export interface TooltipAnimatedContainerProps {
   position?: TooltipPositionOffset;
   id?: string;
   bandwidth?: number;
+  chartDimensions?: BoundingRect;
 }
 
 export function TooltipAnimatedContainer({
@@ -35,6 +36,7 @@ export function TooltipAnimatedContainer({
   getAlteredPosition = getAlteredVerticalBarPosition,
   margin,
   position = DEFAULT_TOOLTIP_POSITION,
+  chartDimensions,
 }: TooltipAnimatedContainerProps) {
   const {isPerformanceImpacted} = useChartContext();
 
@@ -57,6 +59,7 @@ export function TooltipAnimatedContainer({
       margin,
       bandwidth,
       isPerformanceImpacted,
+      chartDimensions,
     });
 
     const shouldRenderImmediate = firstRender.current;
@@ -78,6 +81,7 @@ export function TooltipAnimatedContainer({
     position,
     isPerformanceImpacted,
     tooltipDimensions,
+    chartDimensions,
   ]);
 
   useEffect(() => {

diff --git a/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts b/packages/polaris-viz/src/components/TooltipWrapper/utilities.ts
@@ -19,6 +19,7 @@ export interface AlteredPositionProps {
   margin: Margin;
   position: TooltipPositionOffset;
   tooltipDimensions: Dimensions;
+  chartDimensions?: BoundingRect;
 }
 
 export interface AlteredPositionReturn {
@@ -47,7 +48,6 @@ export function getAlteredVerticalBarPosition(
   //
   // Y POSITIONING
   //
-
   if (!props.isPerformanceImpacted) {
     if (newPosition.vertical === TooltipVerticalOffset.Inline) {
       newPosition.horizontal = TooltipHorizontalOffset.Left;
@@ -79,7 +79,15 @@ export function getAlteredVerticalBarPosition(
       }
     }
   } else {
-    y = 0;
+    y = clamp({
+      amount: (props.chartDimensions?.y ?? 0) - props.tooltipDimensions.height,
+      min: 0,
+      max:
+        window.scrollY +
+        window.innerHeight -
+        props.tooltipDimensions.height -
+        TOOLTIP_MARGIN,
+    });
   }
 
   //

diff --git a/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx b/packages/polaris-viz/src/components/VerticalBarChart/Chart.tsx
@@ -318,6 +318,7 @@ export function Chart({
           getPosition={getTooltipPosition}
           margin={{...ChartMargin, Top: chartYPosition}}
           parentRef={svgRef}
+          chartDimensions={dimensions}
           usePortal
         />
       )}