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 (

{payload[0].name}

-

{`Value: ${payload[0].value}`}

+

{`${formattedValue}ha (${formattedPercentage}%)`}

); } @@ -75,6 +86,13 @@ const EcoRegionDoughnutChart: React.FC = ({ data }) const { chartData } = data; const [activeIndex, setActiveIndex] = useState(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 = ({ data }) } />