Merge pull request #1911 from visualize-admin/fix/fix-pie-chart-toolt…

…ip-alignment Fix/fix pie chart tooltip alignment
visualize-admin · Nov 25, 2024 · e5ebe61 · e5ebe61
2 parents f4d05db + d4262de
commit e5ebe61
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 19 deletions.
diff --git a/app/charts/pie/pie-state.tsx b/app/charts/pie/pie-state.tsx
@@ -31,6 +31,7 @@ import {
   getSortingOrders,
   makeDimensionValueSorters,
 } from "@/utils/sorting-values";
+import { useIsMobile } from "@/utils/use-is-mobile";
 
 import { ChartProps } from "../shared/ChartProps";
 
@@ -206,6 +207,8 @@ const usePieState = (
     return `${rounded}% (${fValue})`;
   };
 
+  const isMobile = useIsMobile();
+
   // Tooltip
   const getAnnotationInfo = (
     arcDatum: PieArcDatum<Observation>
@@ -216,13 +219,18 @@ const usePieState = (
     const xTranslate = chartWidth / 2;
     const yTranslate = chartHeight / 2;
 
-    const xAnchor = x + xTranslate;
-    const yAnchor = y + yTranslate;
+    const xAnchor = isMobile ? chartWidth / 2 : x + xTranslate;
+    const yAnchor = isMobile ? -chartHeight : y + yTranslate;
 
-    const xPlacement = xAnchor < chartWidth * 0.5 ? "right" : "left";
+    const xPlacement = isMobile
+      ? "center"
+      : xAnchor < chartWidth * 0.5
+        ? "right"
+        : "left";
 
-    const yPlacement =
-      yAnchor > chartHeight * 0.2
+    const yPlacement = isMobile
+      ? "top"
+      : yAnchor > chartHeight * 0.2
         ? "top"
         : yAnchor < chartHeight * 0.8
           ? "bottom"
@@ -238,6 +246,7 @@ const usePieState = (
         color: colors(getSegment(datum)) as string,
       },
       values: undefined,
+      withTriangle: !isMobile,
     };
   };
 

diff --git a/app/charts/shared/interaction/tooltip-box.tsx b/app/charts/shared/interaction/tooltip-box.tsx
@@ -30,6 +30,7 @@ export interface TooltipBoxProps {
   x: number | undefined;
   y: number | undefined;
   placement: TooltipPlacement;
+  withTriangle?: boolean;
   margins: Margins;
   children: ReactNode;
 }
@@ -128,8 +129,9 @@ export const TooltipBox = ({
   placement,
   margins,
   children,
+  withTriangle = true,
 }: TooltipBoxProps) => {
-  const triangle = mkTriangle(placement);
+  const triangle = withTriangle ? mkTriangle(placement) : null;
   const [pos, posRef] = usePosition();
 
   const [tooltipRef, tooltipWidth] = useResizeObserver<HTMLDivElement>();
@@ -145,8 +147,8 @@ export const TooltipBox = ({
   const mobileTriangleXPosition = getTriangleXPos(x!, tooltipWidth, chartWidth);
 
   const desktopTriangleXPosition = {
-    left: triangle.left,
-    right: triangle.right,
+    left: triangle?.left,
+    right: triangle?.right,
   };
 
   const triangleXPosition = isMobile
@@ -181,21 +183,21 @@ export const TooltipBox = ({
 
               "&::before": {
                 content: "''",
-                display: "block",
+                display: withTriangle ? "block" : "none",
                 position: "absolute",
                 pointerEvents: "none",
                 zIndex: -1,
                 width: 0,
                 height: 0,
                 borderStyle: "solid",
-                top: triangle.top,
-                bottom: triangle.bottom,
+                top: triangle?.top,
+                bottom: triangle?.bottom,
                 ...triangleXPosition,
-                borderWidth: triangle.borderWidth,
-                borderTopColor: triangle.borderTopColor,
-                borderRightColor: triangle.borderRightColor,
-                borderBottomColor: triangle.borderBottomColor,
-                borderLeftColor: triangle.borderLeftColor,
+                borderWidth: triangle?.borderWidth,
+                borderTopColor: triangle?.borderTopColor,
+                borderRightColor: triangle?.borderRightColor,
+                borderBottomColor: triangle?.borderBottomColor,
+                borderLeftColor: triangle?.borderLeftColor,
               },
             }}
           >

diff --git a/app/charts/shared/interaction/tooltip.tsx b/app/charts/shared/interaction/tooltip.tsx
@@ -41,22 +41,37 @@ export interface TooltipInfo {
   tooltipContent?: ReactNode;
   datum: TooltipValue;
   values: TooltipValue[] | undefined;
+  withTriangle?: boolean;
 }
 
 const TooltipInner = ({ d, type }: { d: Observation; type: TooltipType }) => {
   const { bounds, getAnnotationInfo } = useChartState() as
     | LinesState
     | PieState;
   const { margins } = bounds;
-  const { xAnchor, yAnchor, placement, xValue, tooltipContent, datum, values } =
-    getAnnotationInfo(d as any);
+  const {
+    xAnchor,
+    yAnchor,
+    placement,
+    xValue,
+    tooltipContent,
+    datum,
+    values,
+    withTriangle,
+  } = getAnnotationInfo(d as any);
 
   if (Number.isNaN(yAnchor)) {
     return null;
   }
 
   return (
-    <TooltipBox x={xAnchor} y={yAnchor} placement={placement} margins={margins}>
+    <TooltipBox
+      x={xAnchor}
+      y={yAnchor}
+      placement={placement}
+      withTriangle={withTriangle}
+      margins={margins}
+    >
       {tooltipContent ? (
         tooltipContent
       ) : type === "multiple" && values ? (