[TM-1468] add Target Land Use graph

wri · Dec 10, 2024 · 89a6b90 · 89a6b90
1 parent 2048f66
commit 89a6b90
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 5 deletions.
diff --git a/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx b/src/admin/components/ResourceTabs/MonitoredTab/components/DataCard.tsx
@@ -21,10 +21,11 @@ import Toggle, { TogglePropsItem } from "@/components/elements/Toggle/Toggle";
 import Tooltip from "@/components/elements/Tooltip/Tooltip";
 import TooltipMapMonitoring from "@/components/elements/TooltipMap/TooltipMapMonitoring";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
-import { DUMMY_DATA_TARGET_LAND_USE_TYPES_REPRESENTED } from "@/constants/dashboardConsts";
+import { DEFAULT_POLYGONS_DATA } from "@/constants/dashboardConsts";
 import { useMonitoredDataContext } from "@/context/monitoredData.provider";
 import GraphicIconDashboard from "@/pages/dashboard/components/GraphicIconDashboard";
 import { EntityName, OptionValue } from "@/types/common";
+import { parsePolygonsIndicatorDataForLandUse } from "@/utils/dashboardUtils";
 
 import { useMonitoredData } from "../hooks/useMonitoredData";
 
@@ -427,7 +428,9 @@ const DataCard = ({
   const { polygonsIndicator } = useMonitoredData(type!, record.uuid);
   const { setSearchTerm, setIndicatorSlug, indicatorSlug, setSelectPolygonFromMap } = useMonitoredDataContext();
   const navigate = useNavigate();
-
+  const landUseData = polygonsIndicator
+    ? parsePolygonsIndicatorDataForLandUse(polygonsIndicator)
+    : DEFAULT_POLYGONS_DATA;
   const POLYGONS = [
     { title: "Agrariala Palma", value: "1" },
     { title: "Agraisa", value: "2" },
@@ -601,8 +604,8 @@ const DataCard = ({
             <When condition={selected.includes("5")}>
               <div className="w-[73%]">
                 <GraphicIconDashboard
-                  data={DUMMY_DATA_TARGET_LAND_USE_TYPES_REPRESENTED.graphicTargetLandUseTypes}
-                  maxValue={90}
+                  data={landUseData.graphicTargetLandUseTypes}
+                  maxValue={landUseData.totalSection.totalHectaresRestored}
                 />
               </div>
             </When>

diff --git a/src/constants/dashboardConsts.ts b/src/constants/dashboardConsts.ts
@@ -44,6 +44,13 @@ export const TERRAFUND_MONITORING_LINK = "https://www.wri.org/update/land-degrad
 
 export const TERRAFUND_MRV_LINK = `<a href=${TERRAFUND_MONITORING_LINK} class="underline !text-black" target="_blank">TerraFund's MRV framework</a>`;
 
+export const DEFAULT_POLYGONS_DATA = {
+  graphicTargetLandUseTypes: [],
+  totalSection: {
+    totalHectaresRestored: 0
+  }
+};
+
 export const DUMMY_DATA_FOR_CHART_MULTI_LINE_CHART = [
   {
     name: "Total",

diff --git a/src/utils/dashboardUtils.ts b/src/utils/dashboardUtils.ts
@@ -1,4 +1,4 @@
-import { CHART_TYPES, MONTHS } from "@/constants/dashboardConsts";
+import { CHART_TYPES, DEFAULT_POLYGONS_DATA, MONTHS } from "@/constants/dashboardConsts";
 import { DashboardTreeRestorationGoalResponse } from "@/generated/apiSchemas";
 
 type DataPoint = {
@@ -123,6 +123,22 @@ interface ChartCategory {
   values: ChartDataPoint[];
 }
 
+interface PolygonIndicator {
+  id?: number;
+  poly_name?: string;
+  status?: string;
+  data?: Record<string, number>;
+  value?: Record<string, any>;
+  [key: string]: any;
+}
+
+export interface ParsedPolygonsData {
+  graphicTargetLandUseTypes: ParsedLandUseType[];
+  totalSection: {
+    totalHectaresRestored: number;
+  };
+}
+
 export const formatNumberUS = (value: number) =>
   value ? (value >= 1000000 ? `${(value / 1000000).toFixed(2)}M` : value.toLocaleString("en-US")) : "";
 
@@ -416,3 +432,51 @@ export const isEmptyChartData = (chartType: string, data: any): boolean => {
       return false;
   }
 };
+
+const formatLabel = (key: string): string => {
+  return key
+    .split("_")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+};
+
+export const parsePolygonsIndicatorDataForLandUse = (polygonsIndicator: PolygonIndicator[]): ParsedPolygonsData => {
+  if (!polygonsIndicator?.length) {
+    return DEFAULT_POLYGONS_DATA;
+  }
+
+  const { aggregatedData, totalHectares } = polygonsIndicator.reduce(
+    (acc, polygon) => {
+      if (!polygon.data) return acc;
+
+      Object.entries(polygon.data).forEach(([key, value]) => {
+        const label = formatLabel(key);
+        const numericValue = Number(value);
+        acc.aggregatedData[label] = (acc.aggregatedData[label] || 0) + numericValue;
+        acc.totalHectares += numericValue;
+      });
+
+      return acc;
+    },
+    {
+      aggregatedData: {} as Record<string, number>,
+      totalHectares: 0
+    }
+  );
+
+  const graphicTargetLandUseTypes = Object.entries(aggregatedData).map(([label, value]) => {
+    const percentage = calculatePercentage(value as number, totalHectares);
+    return {
+      label,
+      value: value as number,
+      valueText: `${Math.round(value as number)} ha ${percentage.toFixed(2)}%`
+    };
+  });
+
+  return {
+    graphicTargetLandUseTypes,
+    totalSection: {
+      totalHectaresRestored: totalHectares
+    }
+  };
+};