From e956f5e14530a30f1bbb3d7fadce5be674b49710 Mon Sep 17 00:00:00 2001
From: cesarLima1 <cesmaulim@gmail.com>
Date: Mon, 16 Dec 2024 13:32:31 -0400
Subject: [PATCH] [TM-1466] adjust no data to display div

---
 .../MonitoredTab/components/DataCard.tsx      |  2 +-
 .../components/MonitoredCharts.tsx            | 30 +++++++++++++++++--
 .../MonitoredTab/components/NoDataState.tsx   |  2 +-
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
index f51a80836..bb523eaee 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -644,7 +644,7 @@ const DataCard = ({
             </div>
           </When>
           <When condition={tabActive === 1}>
-            <div className="relative z-auto flex w-full gap-8 px-6 pb-6 pt-2">
+            <div className="relative z-auto flex h-[calc(100vh-320px)] w-full gap-8 px-6 pb-6 pt-2">
               <Dropdown
                 containerClassName={classNames("absolute left-full -translate-x-full pr-6 z-[1]", {
                   hidden: selected.includes("6")
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
index 4542d7b64..7f315ba4c 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import classNames from "classnames";
+import React, { useEffect, useState } from "react";
 import { ReactNode } from "react";
 import { When } from "react-if";
 
@@ -81,6 +82,27 @@ const MonitoredCharts = ({
   record,
   totalHectaresRestoredGoal
 }: MonitoredChartsProps) => {
+  const [hasNoData, setHasNoData] = useState(false);
+
+  useEffect(() => {
+    const noData = selected.some(chartId => {
+      switch (chartId) {
+        case "1":
+        case "2":
+          return !parsedData?.length;
+        case "3":
+          return !ecoRegionData?.chartData?.length;
+        case "4":
+          return !strategiesData?.length;
+        case "5":
+          return !landUseData?.graphicTargetLandUseTypes?.length;
+        default:
+          return false;
+      }
+    });
+    setHasNoData(noData);
+  }, [selected, parsedData, ecoRegionData, strategiesData, landUseData]);
+
   const renderChart = (chartId: React.Key) => {
     switch (chartId) {
       case "1":
@@ -124,7 +146,11 @@ const MonitoredCharts = ({
   };
 
   return (
-    <div className="flex w-full flex-col gap-6">
+    <div
+      className={classNames("flex w-full flex-col gap-6", {
+        "relative z-10 bg-white": hasNoData
+      })}
+    >
       {selected.map(
         (id: React.Key | null | undefined) =>
           id != null && (
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx
index c4125b03c..fdac5578f 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/NoDataState.tsx
@@ -6,7 +6,7 @@ import Icon from "@/components/extensive/Icon/Icon";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 
 export const NoDataState = () => (
-  <div className="flex w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000">
+  <div className="z-10 flex h-[75%] w-full flex-col items-center justify-center gap-2 rounded-xl border border-grey-1000">
     <Text variant="text-32-semibold" className="text-blueCustom">
       No Data to Display
     </Text>