[TM-1468] minor updates in charts (#754)

src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx

@@ -378,7 +378,7 @@ const DataCard = ({
 }: React.HTMLAttributes<HTMLDivElement> & {
   type?: EntityName;
 }) => {
-  const [tabActive, setTabActive] = useState(0);
+  const [tabActive, setTabActive] = useState(1);
   const [selected, setSelected] = useState<OptionValue[]>(["1"]);
   const [selectedPolygonUuid, setSelectedPolygonUuid] = useState<any>("0");
   const basename = useBasename();
@@ -624,7 +624,7 @@ const DataCard = ({
                 </Button>
               </When>
 
-              <Toggle items={toggleItems} onChangeActiveIndex={setTabActive} />
+              <Toggle items={toggleItems} onChangeActiveIndex={setTabActive} defaultActiveIndex={tabActive} />
             </div>
           </div>
           <When condition={tabActive === 0}>

src/admin/components/ResourceTabs/MonitoredTab/components/MonitoredCharts.tsx

@@ -57,7 +57,7 @@ const RestorationMetrics = ({
       tooltip={TOTAL_HECTARES_UNDER_RESTORATION_TOOLTIP}
       showTreesRestoredGraph={false}
     />
-    <SimpleBarChart data={strategiesData} />
+    <SimpleBarChart data={strategiesData} total={record.total_hectares_restored_sum} />
   </div>
 );
 

src/components/elements/Toggle/Toggle.tsx

@@ -14,12 +14,19 @@ export interface ToggleProps {
   disabledIndexes?: number[];
   variant?: ToggleVariants;
   onChangeActiveIndex?: (index: number) => void;
+  defaultActiveIndex?: number;
 }
 
 const Toggle = (props: ToggleProps) => {
-  const { items, disabledIndexes = [], variant = VARIANT_TOGGLE_PRIMARY, onChangeActiveIndex } = props;
+  const {
+    items,
+    disabledIndexes = [],
+    variant = VARIANT_TOGGLE_PRIMARY,
+    onChangeActiveIndex,
+    defaultActiveIndex = 0
+  } = props;
 
-  const [activeIndex, setActiveIndex] = useState(0);
+  const [activeIndex, setActiveIndex] = useState(defaultActiveIndex);
   const [width, setWidth] = useState(0);
   const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
 

src/pages/dashboard/charts/CustomBarJobsCreated.tsx

@@ -10,6 +10,9 @@ interface CustomBarProps {
 
 export const CustomBar: React.FC<CustomBarProps> = ({ fill, x, y, width, height }) => {
   const radius = 5;
+  if (width === 0 || height === 0) {
+    return null;
+  }
   const path = `
     M${x},${y + height}
     L${x},${y + radius}

src/pages/dashboard/charts/CustomTooltip.tsx

@@ -2,13 +2,23 @@ import React from "react";
 
 export const CustomTooltip: React.FC<any> = ({ active, payload, label }) => {
   if (!active || !payload || !payload.length) return null;
+  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="border-gray-300 custom-tooltip rounded-lg border bg-white p-2">
       <p className="text-12-bold text-black">{label}</p>
       {payload.map((item: any, index: number) => (
         <p key={index} className="text-12">
-          <span className="text-12 font-normal text-black">{item.name}: </span>
-          <span className="text-12-bold text-black">{item.value.toLocaleString()}</span>
+          <p className="text-gray-600">{`${formattedValue}ha (${formattedPercentage}%)`}</p>
         </p>
       ))}
     </div>

src/pages/dashboard/charts/SimpleBarChart.tsx

@@ -17,12 +17,14 @@ type ResturationStrategy = {
 type FormattedData = {
   name: string;
   Value: number;
+  total: number;
 };
 
-const SimpleBarChart = ({ data }: { data: ResturationStrategy[] }) => {
+const SimpleBarChart = ({ data, total }: { data: ResturationStrategy[]; total?: number }) => {
   const formattedData: FormattedData[] = data.map(item => ({
     name: item.label.split(",").join(" + ").replace(/-/g, " "),
-    Value: item.value
+    Value: item.value,
+    total: total ?? 0
   }));
 
   return (

src/pages/dashboard/components/GraphicIconDashboard.tsx

@@ -83,12 +83,12 @@ const GraphicIconDashboard = ({ data, maxValue }: { data: DashboardTableDataProp
             className="shadow-md fixed z-10 w-auto rounded border border-darkCustom bg-white p-2"
             style={{
               left: `${tooltip.x}px`,
-              top: `${tooltip.y - 50}px`,
+              top: `${tooltip.y - 65}px`,
               transform: "translateX(-50%)"
             }}
           >
-            <span className="text-12-light text-darkCustom">{`${t(tooltip.label)} `}</span>
-            <span className="text-12-bold text-darkCustom">{t(tooltip.text)}</span>
+            <p className="text-12-bold text-darkCustom">{`${t(tooltip.label)} `}</p>
+            <span className="text-12-light text-darkCustom">{t(tooltip.text)}</span>
           </div>
         )}
         <div className="w-full">

src/utils/dashboardUtils.ts

@@ -482,7 +482,7 @@ export const parsePolygonsIndicatorDataForLandUse = (
     return {
       label,
       value: adjustedValue as number,
-      valueText: `${Math.round(value as number)} ha ${percentage.toFixed(2)}%`
+      valueText: `${Math.round(value as number)}ha (${percentage.toFixed(0)}%)`
     };
   });
 
@@ -524,12 +524,10 @@ export const parsePolygonsIndicatorDataForStrategies = (polygonsIndicator: Polyg
     }
   });
 
-  return Object.entries(totals)
-    .filter(([_, value]) => value > 0)
-    .map(([label, value]) => ({
-      label,
-      value: Number(value.toFixed(2))
-    }));
+  return Object.entries(totals).map(([label, value]) => ({
+    label,
+    value: Number(value.toFixed(2))
+  }));
 };
 
 export const parsePolygonsIndicatorDataForEcoRegion = (polygons: PolygonIndicator[]): ParsedResult => {