[TM-1467] show tooltip over the land use type chart (#756)

wri · Dec 17, 2024 · 1ebedd9 · 1ebedd9
1 parent 36392e2
commit 1ebedd9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
@@ -86,6 +86,9 @@ const MonitoredCharts = ({
   const [hasNoData, setHasNoData] = useState(false);
 
   useEffect(() => {
+    if (isLoadingIndicator) {
+      setHasNoData(false);
+    }
     const noData = selected.some(chartId => {
       switch (chartId) {
         case "1":
@@ -102,7 +105,7 @@ const MonitoredCharts = ({
       }
     });
     setHasNoData(noData);
-  }, [selected, parsedData, ecoRegionData, strategiesData, landUseData]);
+  }, [selected, parsedData, ecoRegionData, strategiesData, landUseData, isLoadingIndicator]);
 
   const renderChart = (chartId: React.Key) => {
     switch (chartId) {

diff --git a/src/pages/dashboard/components/GraphicIconDashboard.tsx b/src/pages/dashboard/components/GraphicIconDashboard.tsx
@@ -11,11 +11,14 @@ import { DashboardTableDataProps } from "../index.page";
 
 const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProps[]; maxValue: number }) => {
   const t = useT();
-  const [tooltip, setTooltip] = useState<{ text: string | null; label: string | null; x: number; y: number }>({
+  const [tooltip, setTooltip] = useState<{
+    text: string | null;
+    label: string | null;
+    position: { top: number; left: number } | null;
+  }>({
     text: null,
     label: null,
-    x: 0,
-    y: 0
+    position: null
   });
 
   const colorIconLabel = (label: string): { color: string; icon: keyof typeof IconNames } => {
@@ -43,17 +46,23 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
     }
   };
 
-  const handleMouseEnter = (event: MouseEvent<HTMLDivElement>, label: string, valueText: string) => {
+  const handleMouseMove = (event: MouseEvent<HTMLDivElement>, label: string, valueText: string) => {
     setTooltip({
       text: valueText,
       label,
-      x: event.pageX,
-      y: event.pageY
+      position: {
+        top: event.clientY - 70,
+        left: event.clientX
+      }
     });
   };
 
   const handleMouseLeave = () => {
-    setTooltip({ text: null, label: null, x: 0, y: 0 });
+    setTooltip({
+      text: null,
+      label: null,
+      position: null
+    });
   };
 
   return (
@@ -72,18 +81,18 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
                 )}
                 style={{ width: `${percentage}%` }}
                 key={index}
-                onMouseEnter={e => handleMouseEnter(e, item.label, item.valueText)}
+                onMouseMove={e => handleMouseMove(e, item.label, item.valueText)}
                 onMouseLeave={handleMouseLeave}
               />
             );
           })}
         </div>
-        {tooltip.text && (
+        {tooltip.text && tooltip.position && (
           <div
             className="shadow-md fixed z-10 w-auto rounded border border-darkCustom bg-white p-2"
             style={{
-              left: `${tooltip.x}px`,
-              top: `${tooltip.y - 65}px`,
+              left: `${tooltip.position.left}px`,
+              top: `${tooltip.position.top}px`,
               transform: "translateX(-50%)"
             }}
           >
@@ -109,7 +118,7 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
                 </div>
                 <div
                   className="relative h-4 rounded bg-blueCustom-30 lg:h-5"
-                  onMouseEnter={e => handleMouseEnter(e, item.label, item.valueText)}
+                  onMouseMove={e => handleMouseMove(e, item.label, item.valueText)}
                   onMouseLeave={handleMouseLeave}
                 >
                   <div