From 7e879acc591b85946ae45b6e5f916fa11902bae6 Mon Sep 17 00:00:00 2001
From: cesarLima1 <105736261+cesarLima1@users.noreply.github.com>
Date: Mon, 16 Dec 2024 16:15:05 -0400
Subject: [PATCH] [TM-1466] change format in tootltip for doughnut chart (#751)

---
 .../components/EcoRegionDoughnutChart.tsx     | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
index fd8c26abd..9ca86a03d 100644
--- a/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
+++ b/src/admin/components/ResourceTabs/MonitoredTab/components/EcoRegionDoughnutChart.tsx
@@ -44,10 +44,21 @@ const CustomLegend = ({ payload }: CustomLegendProps) => {
 
 const CustomTooltip = ({ active, payload }: any) => {
   if (active && payload && payload.length) {
+    const value = payload[0].value;
+    const total = payload[0].payload.total;
+    const percentage = (value / total) * 100;
+
+    const formattedValue = value.toLocaleString("en-US", {
+      minimumFractionDigits: 1,
+      maximumFractionDigits: 1
+    });
+
+    const formattedPercentage = percentage.toFixed(0);
+
     return (
       <div className="shadow-lg rounded border bg-white p-2">
         <p className="font-medium">{payload[0].name}</p>
-        <p className="text-gray-600">{`Value: ${payload[0].value}`}</p>
+        <p className="text-gray-600">{`${formattedValue}ha (${formattedPercentage}%)`}</p>
       </div>
     );
   }
@@ -75,6 +86,13 @@ const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data })
   const { chartData } = data;
   const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined);
 
+  const total = chartData.reduce((sum, item) => sum + item.value, 0);
+
+  const enhancedChartData = chartData.map(item => ({
+    ...item,
+    total
+  }));
+
   const onPieEnter = (_: any, index: number) => {
     setActiveIndex(index);
   };
@@ -89,7 +107,7 @@ const EcoRegionDoughnutChart: React.FC<EcoRegionDoughnutChartProps> = ({ data })
         <PieChart>
           <Tooltip content={<CustomTooltip />} />
           <Pie
-            data={chartData}
+            data={enhancedChartData}
             cx="50%"
             cy="50%"
             innerRadius={100}