feat: change expenditures & budgets settings

globalfund · Jul 22, 2024 · 71d5a10 · 71d5a10
1 parent 3ac9a45
commit 71d5a10
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 18 deletions.
diff --git a/src/app/components/charts/heatmap/data.ts b/src/app/components/charts/heatmap/data.ts
@@ -31,6 +31,7 @@ export interface HeatmapProps {
   columnHeader?: string;
   rowHeader?: string;
   noLegend?: boolean;
+  expandAll?: boolean;
 }
 
 export function getPercentageColor(item?: HeatmapDataItem) {

diff --git a/src/app/components/charts/heatmap/index.tsx b/src/app/components/charts/heatmap/index.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import get from "lodash/get";
+import filter from "lodash/filter";
 import uniqBy from "lodash/uniqBy";
 import Box from "@mui/material/Box";
 import orderBy from "lodash/orderBy";
@@ -13,6 +14,7 @@ import {
   LEGENDS,
   ItemModel,
   HeatmapProps,
+  HeatmapDataItem,
 } from "app/components/charts/heatmap/data";
 import {
   Row,
@@ -50,9 +52,22 @@ export function Heatmap(props: HeatmapProps) {
   };
 
   React.useEffect(() => {
-    setExpandedRows([]);
-    setExpandedColumns([]);
-  }, [props.data, props.rowCategory, props.columnCategory]);
+    if (props.expandAll) {
+      setExpandedRows(
+        filter(props.data, (item: HeatmapDataItem) => !item.parentRow).map(
+          (item: HeatmapDataItem) => item.row
+        )
+      );
+      setExpandedColumns(
+        filter(props.data, (item: HeatmapDataItem) => !item.parentColumn).map(
+          (item: HeatmapDataItem) => item.column
+        )
+      );
+    } else {
+      setExpandedRows([]);
+      setExpandedColumns([]);
+    }
+  }, [props.data, props.rowCategory, props.columnCategory, props.expandAll]);
 
   React.useEffect(() => {
     setVisibleRows(

diff --git a/src/app/pages/datasets/grant-implementation/index.tsx b/src/app/pages/datasets/grant-implementation/index.tsx
@@ -970,19 +970,16 @@ export const GrantImplementationPage: React.FC = () => {
   }, [cycles, budgetCycleDropdownSelected]);
 
   const budgetsTableDataTypeDropdown = React.useMemo(() => {
-    if (budgetsDropdownSelected === dropdownItemsBudgets[2].value) {
-      return (
-        <Box gap="10px" display="flex" flexDirection="row">
-          {budgetsCycleDropdown}
-          <Dropdown
-            dropdownSelected={budgetTableDataType}
-            dropdownItems={dropdownItemsBudgetsTableDataTypes}
-            handleDropdownChange={handleBudgetTableDataTypeChange}
-          />
-        </Box>
-      );
-    }
-    return budgetsCycleDropdown;
+    return (
+      <Box gap="10px" display="flex" flexDirection="row">
+        {budgetsCycleDropdown}
+        <Dropdown
+          dropdownSelected={budgetTableDataType}
+          dropdownItems={dropdownItemsBudgetsTableDataTypes}
+          handleDropdownChange={handleBudgetTableDataTypeChange}
+        />
+      </Box>
+    );
   }, [budgetsDropdownSelected, budgetTableDataType, budgetsCycleDropdown]);
 
   const financialMetricsCycleDropdown = React.useMemo(() => {
@@ -1911,6 +1908,15 @@ export const GrantImplementationPage: React.FC = () => {
     }
   }, [cycles]);
 
+  React.useEffect(() => {
+    if (
+      budgetTableDataType === dropdownItemsBudgetsTableDataTypes[1].value &&
+      budgetsDropdownSelected !== dropdownItemsBudgets[2].value
+    ) {
+      setBudgetsDropdownSelected(dropdownItemsBudgets[2].value);
+    }
+  }, [budgetTableDataType]);
+
   useUnmount(() => {
     fetchLocationFilterOptions({
       routeParams: {
@@ -2055,7 +2061,14 @@ export const GrantImplementationPage: React.FC = () => {
             subtitle={`${totalBudget} total budget.`}
             dropdownItems={dropdownItemsBudgets}
             dropdownSelected={budgetsDropdownSelected}
-            handleDropdownChange={(value) => setBudgetsDropdownSelected(value)}
+            handleDropdownChange={(value) => {
+              if (value !== dropdownItemsBudgets[2].value) {
+                setBudgetTableDataType(
+                  dropdownItemsBudgetsTableDataTypes[0].value
+                );
+              }
+              setBudgetsDropdownSelected(value);
+            }}
             loading={loadingBudget}
             disableCollapse={
               budgetsDropdownSelected === dropdownItemsBudgets[2].value

diff --git a/src/app/pages/home/index.tsx b/src/app/pages/home/index.tsx
@@ -417,7 +417,7 @@ export const Home: React.FC = () => {
     fetchExpendituresHeatmap({
       filterString,
       routeParams: {
-        row: "principalRecipientType,principalRecipientSubType,principalRecipient",
+        row: "principalRecipientType,principalRecipientSubType",
         column: "component",
         componentField:
           componentField === CHART_5_DROPDOWN_ITEMS[0].value
@@ -774,6 +774,7 @@ export const Home: React.FC = () => {
         infoType="expenditures"
       >
         <Heatmap
+          expandAll
           data={dataExpendituresHeatmap}
           hoveredLegend={null}
           valueType={chart5Unit}