Configure tooltip to use sx

CodeForAfrica · Jul 25, 2024 · 92e5215 · 92e5215
1 parent 661a999
commit 92e5215
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 43 deletions.
diff --git a/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js b/apps/climatemappedafrica/src/components/HURUmap/Chart/index.js
@@ -7,7 +7,7 @@ import embed from "vega-embed";
 
 import configureScope from "./configureScope";
 import Filters from "./Filters";
-import { idify } from "./utils";
+import { calculateTooltipPosition, idify } from "./utils";
 
 import IndicatorTitle from "@/climatemappedafrica/components/HURUmap/IndicatorTitle";
 
@@ -33,11 +33,11 @@ function Chart({
 }) {
   const classes = useStyles(props);
   const chartRef = useRef();
+  const tooltipRef = useRef();
   const [view, setView] = useState(null);
   const [cSpec, setCSpec] = useState(null);
   const isMobile = !useMediaQuery("(min-width:600px)");
   const [tooltipData, setTooltipData] = useState(null);
-  const [tooltipEvent, setTooltipEvent] = useState(null);
   const secondaryIndicator = sI?.indicator;
 
   const {
@@ -63,8 +63,7 @@ function Chart({
 
   const handler = useCallback(
     (_, event, item, value) => {
-      setTooltipEvent(event);
-      setTooltipData({ item, value, id, geoCode });
+      setTooltipData({ item, value, id, geoCode, event });
     },
     [id, geoCode],
   );
@@ -154,6 +153,15 @@ function Chart({
       }),
   ];
 
+  let position = {};
+  if (tooltipData?.event && tooltipRef?.current) {
+    position = calculateTooltipPosition(
+      tooltipData?.event,
+      tooltipRef?.current?.getBoundingClientRect(),
+      0,
+      10,
+    );
+  }
   if (!indicator?.data) {
     return null;
   }
@@ -196,14 +204,16 @@ function Chart({
       >
         {source}
       </Source>
-      {tooltipData && tooltipEvent && (
+      {tooltipData && tooltipData?.event && (
         <ChartTooltip
           id={id}
           geoCode={geoCode}
           value={tooltipData.value}
           itemColor={tooltipData.item?.fill}
-          event={tooltipEvent}
+          event={tooltipData?.event}
           title={tooltipData.value?.group}
+          tooltipRef={tooltipRef}
+          position={position}
           formattedValue={
             defaultType?.toLowerCase() === "percentage" || !disableToggle
               ? tooltipData.value?.percentage

diff --git a/apps/pesayetu/src/components/HURUmap/Chart/index.js b/apps/pesayetu/src/components/HURUmap/Chart/index.js
@@ -7,7 +7,7 @@ import embed from "vega-embed";
 
 import configureScope from "./configureScope";
 import Filters from "./Filters";
-import { idify } from "./utils";
+import { calculateTooltipPosition, idify } from "./utils";
 
 import IndicatorTitle from "@/pesayetu/components/HURUmap/IndicatorTitle";
 
@@ -33,11 +33,11 @@ function Chart({
 }) {
   const classes = useStyles(props);
   const chartRef = useRef();
+  const tooltipRef = useRef();
   const [view, setView] = useState(null);
   const [cSpec, setCSpec] = useState(null);
   const isMobile = !useMediaQuery("(min-width:600px)");
   const [tooltipData, setTooltipData] = useState(null);
-  const [tooltipEvent, setTooltipEvent] = useState(null);
   const secondaryIndicator = sI?.indicator;
 
   const {
@@ -63,8 +63,7 @@ function Chart({
 
   const handler = useCallback(
     (_, event, item, value) => {
-      setTooltipEvent(event);
-      setTooltipData({ item, value, id, geoCode });
+      setTooltipData({ item, value, id, geoCode, event });
     },
     [id, geoCode],
   );
@@ -154,6 +153,15 @@ function Chart({
       }),
   ];
 
+  let position = {};
+  if (tooltipData?.event && tooltipRef?.current) {
+    position = calculateTooltipPosition(
+      tooltipData?.event,
+      tooltipRef?.current?.getBoundingClientRect(),
+      0,
+      10,
+    );
+  }
   if (!indicator?.data) {
     return null;
   }
@@ -196,14 +204,16 @@ function Chart({
       >
         {source}
       </Source>
-      {tooltipData && tooltipEvent && (
+      {tooltipData && tooltipData?.event && (
         <ChartTooltip
           id={id}
           geoCode={geoCode}
           value={tooltipData.value}
           itemColor={tooltipData.item?.fill}
-          event={tooltipEvent}
+          event={tooltipData?.event}
           title={tooltipData.value?.group}
+          tooltipRef={tooltipRef}
+          position={position}
           formattedValue={
             defaultType?.toLowerCase() === "percentage" || !disableToggle
               ? tooltipData.value?.percentage

diff --git a/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js b/packages/hurumap-core/src/ChartTooltip/ChartTooltip.js
@@ -1,28 +1,10 @@
+/* eslint-env browser */
 import { StyledEngineProvider } from "@mui/material/styles";
-import React, { useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 
 import Tooltip from "./Tooltip"; // Import your ChartTooltip component
 
-function calculateTooltipPosition(event, tooltipBox, offsetX, offsetY) {
-  let x = event.pageX + offsetX;
-  /* eslint-env browser */
-  if (x + tooltipBox.width > window.innerWidth) {
-    x = +event.pageX - offsetX - tooltipBox.width;
-  }
-  let y = event.pageY + offsetY;
-  /* eslint-env browser */
-  if (y < window.innerHeight) {
-    /* eslint-env browser */
-    y = window.innerHeight + offsetY;
-  }
-  /* eslint-env browser */
-  if (y + tooltipBox.height > window.innerHeight) {
-    y = +event.pageY - offsetY - tooltipBox.height;
-  }
-  return { x, y };
-}
-
 function ChartTooltip({
   id,
   geoCode,
@@ -31,9 +13,11 @@ function ChartTooltip({
   title,
   formattedValue,
   event,
+  position,
+  ...props
 }) {
-  const tooltipRef = useRef();
-
+  const { tooltipRef } = props;
+  const { x, y } = position;
   useEffect(() => {
     const el = document.createElement("div");
     el.className = `charttooltip-${id}-${geoCode}`;
@@ -48,22 +32,16 @@ function ChartTooltip({
         el.remove();
       }
     };
-  }, [id, geoCode]);
+  }, [id, geoCode, tooltipRef]);
 
   useEffect(() => {
     if (tooltipRef.current && value) {
-      const { x, y } = calculateTooltipPosition(
-        event,
-        tooltipRef.current.getBoundingClientRect(),
-        0,
-        10,
-      );
       tooltipRef.current.style.top = `${y}px`;
       tooltipRef.current.style.left = `${x}px`;
       tooltipRef.current.style.zIndex = 1230;
       tooltipRef.current.style.position = "absolute";
     }
-  }, [value, event]);
+  }, [value, event, x, y, tooltipRef]);
 
   if (!tooltipRef.current || !value) {
     return null;
@@ -77,6 +55,7 @@ function ChartTooltip({
         formattedValue={formattedValue}
         item={value?.category}
         itemColor={itemColor}
+        {...props}
       />
     </StyledEngineProvider>,
     tooltipRef.current,

diff --git a/packages/hurumap-core/src/ChartTooltip/Tooltip.js b/packages/hurumap-core/src/ChartTooltip/Tooltip.js
@@ -2,7 +2,7 @@ import { Box, Typography, Grid } from "@mui/material";
 import React, { forwardRef } from "react";
 
 const Tooltip = forwardRef(function Tooltip(
-  { title, value, formattedValue, item, ...props },
+  { title, value, formattedValue, item, sx, ...props },
   ref,
 ) {
   return (
@@ -19,6 +19,7 @@ const Tooltip = forwardRef(function Tooltip(
         paddingRight: 0,
         display: "inline-block",
         width: "fit-content",
+        ...(typeof sx === "function" ? sx(theme) : sx),
       })}
     >
       {item && (