Merge pull request #1998 from visualize-admin/fix/tooltip-issues

fix: Chart tooltip issues

Author: bprusinowski

CHANGELOG.md

@@ -16,6 +16,10 @@ You can also check the
   - Preview via API using iframe (`/preview`) now ignores invalid messages sent
     from the parent window
   - Selected values are now correctly displayed in the filter panel
+  - Chart tooltip now wraps in case of long text, instead of going off the
+    screen
+  - Pie chart tooltip is now positioned closer to the chart to prevent it from
+    going off the screen in case of iframe embed
 
 # [5.2.0] - 2025-01-22
 

app/charts/pie/pie-state.tsx

@@ -1,7 +1,7 @@
 import { ascending, sum } from "d3-array";
 import { ScaleOrdinal, scaleOrdinal } from "d3-scale";
 import { schemeCategory10 } from "d3-scale-chromatic";
-import { Pie, PieArcDatum, arc, pie } from "d3-shape";
+import { Pie, pie, PieArcDatum } from "d3-shape";
 import orderBy from "lodash/orderBy";
 import { useMemo } from "react";
 
@@ -31,7 +31,6 @@ import {
   getSortingOrders,
   makeDimensionValueSorters,
 } from "@/utils/sorting-values";
-import { useIsMobile } from "@/utils/use-is-mobile";
 
 import { ChartProps } from "../shared/ChartProps";
 
@@ -112,7 +111,7 @@ const usePieState = (
           label: segment,
           color:
             fields.color.type === "segment"
-              ? fields.color.colorMapping![dvIri] ?? schemeCategory10[0]
+              ? (fields.color.colorMapping![dvIri] ?? schemeCategory10[0])
               : schemeCategory10[0],
         };
       });
@@ -169,17 +168,7 @@ const usePieState = (
     left,
   };
   const bounds = useChartBounds(width, margins, height);
-  const { chartWidth, chartHeight } = bounds;
-
-  // Pie values
-  const maxSide = Math.min(chartWidth, chartHeight) / 2;
-
-  const innerRadius = 0;
-  const outerRadius = Math.min(maxSide, 100);
-
-  const arcGenerator = arc<Observation, PieArcDatum<Observation>>()
-    .innerRadius(innerRadius)
-    .outerRadius(outerRadius);
+  const { chartWidth } = bounds;
 
   // Pie data
   // Sort the pie according to the segments
@@ -216,34 +205,17 @@ const usePieState = (
     return `${rounded}% (${fValue})`;
   };
 
-  const isMobile = useIsMobile();
-
   // Tooltip
   const getAnnotationInfo = (
     arcDatum: PieArcDatum<Observation>
   ): TooltipInfo => {
-    const [x, y] = arcGenerator.centroid(arcDatum);
     const datum = arcDatum.data;
 
-    const xTranslate = chartWidth / 2;
-    const yTranslate = chartHeight / 2;
-
-    const xAnchor = isMobile ? chartWidth / 2 : x + xTranslate;
-    const yAnchor = isMobile ? -chartHeight : y + yTranslate;
-
-    const xPlacement = isMobile
-      ? "center"
-      : xAnchor < chartWidth * 0.5
-        ? "right"
-        : "left";
+    const xAnchor = chartWidth / 2;
+    const yAnchor = -4;
 
-    const yPlacement = isMobile
-      ? "top"
-      : yAnchor > chartHeight * 0.2
-        ? "top"
-        : yAnchor < chartHeight * 0.8
-          ? "bottom"
-          : "middle";
+    const xPlacement = "center";
+    const yPlacement = "top";
 
     return {
       xAnchor,
@@ -255,7 +227,7 @@ const usePieState = (
         color: colors(getSegment(datum)) as string,
       },
       values: undefined,
-      withTriangle: !isMobile,
+      withTriangle: false,
     };
   };
 

app/charts/pie/rendering-utils.ts

@@ -5,11 +5,11 @@ import { Transition } from "d3-transition";
 
 import {
   maybeTransition,
-  RenderOptions,
+  RenderOptions
 } from "@/charts/shared/rendering-utils";
 import { Observation } from "@/domain/data";
 
-import type { BaseType, Selection } from "d3-selection";
+import type { Selection } from "d3-selection";
 
 export type RenderDatum = {
   key: string;
@@ -43,25 +43,11 @@ export const renderPies = (
           .attr("stroke-width", 0)
           .on("mouseenter", function (_, d) {
             handleMouseEnter(d.arcDatum);
-            select<SVGPathElement, RenderDatum>(this).call(
-              (s: Selection<SVGPathElement, RenderDatum, BaseType, unknown>) =>
-                maybeTransition(s, {
-                  transition,
-                  s: (g) => g.attr("stroke-width", 1),
-                  t: (g) => g.attr("stroke-width", 1),
-                })
-            );
+            select<SVGPathElement, RenderDatum>(this).attr("stroke-width", 1)
           })
           .on("mouseleave", function () {
             handleMouseLeave();
-            select<SVGPathElement, RenderDatum>(this).call(
-              (s: Selection<SVGPathElement, RenderDatum, BaseType, unknown>) =>
-                maybeTransition(s, {
-                  transition,
-                  s: (g) => g.attr("stroke-width", 0),
-                  t: (g) => g.attr("stroke-width", 0),
-                })
-            );
+            select<SVGPathElement, RenderDatum>(this).attr("stroke-width", 0)
           })
           .call((enter) =>
             maybeTransition(enter, {

app/charts/shared/interaction/tooltip-box.tsx

@@ -165,6 +165,7 @@ export const TooltipBox = ({
             left: tooltipXBoundary! + margins.left + position.left,
             top: mxYOffset(y!, placement) + margins.top + position.top,
             transform: mkTranslation(placement),
+            maxWidth: "100%",
             pointerEvents: "none",
           }}
         >

app/charts/shared/interaction/tooltip-content.tsx

@@ -16,12 +16,12 @@ export const TooltipSingle = ({
   yError?: string;
 }) => {
   return (
-    <Box>
+    <div>
       {xValue && (
         <Typography
           component="div"
           variant="caption"
-          sx={{ fontWeight: "bold" }}
+          sx={{ fontWeight: "bold", whiteSpace: "wrap" }}
         >
           {xValue}
         </Typography>
@@ -37,7 +37,7 @@ export const TooltipSingle = ({
           {yError ?? null}
         </Typography>
       )}
-    </Box>
+    </div>
   );
 };
 

app/charts/shared/interaction/tooltip.tsx

@@ -1,7 +1,16 @@
+import { PieArcDatum } from "d3-shape";
 import { ReactNode } from "react";
 
+import { AreasState } from "@/charts/area/areas-state";
+import { GroupedBarsState } from "@/charts/bar/bars-grouped-state";
+import { StackedBarsState } from "@/charts/bar/bars-stacked-state";
+import { BarsState } from "@/charts/bar/bars-state";
+import { ComboLineColumnState } from "@/charts/combo/combo-line-column-state";
+import { ComboLineDualState } from "@/charts/combo/combo-line-dual-state";
+import { ComboLineSingleState } from "@/charts/combo/combo-line-single-state";
 import { LinesState } from "@/charts/line/lines-state";
 import { PieState } from "@/charts/pie/pie-state";
+import { ScatterplotState } from "@/charts/scatterplot/scatterplot-state";
 import { useChartState } from "@/charts/shared/chart-state";
 import {
   TooltipBox,
@@ -48,8 +57,16 @@ export type TooltipInfo = {
 
 const TooltipInner = ({ d, type }: { d: Observation; type: TooltipType }) => {
   const { bounds, getAnnotationInfo } = useChartState() as
+    | AreasState
+    | BarsState
+    | GroupedBarsState
+    | StackedBarsState
+    | ComboLineDualState
+    | ComboLineSingleState
+    | ComboLineColumnState
     | LinesState
-    | PieState;
+    | PieState
+    | ScatterplotState;
   const { margins } = bounds;
   const {
     xAnchor,
@@ -60,7 +77,7 @@ const TooltipInner = ({ d, type }: { d: Observation; type: TooltipType }) => {
     datum,
     values,
     withTriangle,
-  } = getAnnotationInfo(d as any);
+  } = getAnnotationInfo(d as Observation & PieArcDatum<Observation>, []);
 
   if (Number.isNaN(yAnchor)) {
     return null;