Merge pull request #81 from globalfund/feat/DE-1399

DE-1399 | Export chart data option
globalfund · Oct 2, 2024 · 55e5534 · 55e5534
2 parents e27214e + 8e97dc2
commit 55e5534
Show file tree

Hide file tree

Showing 34 changed files with 862 additions and 8 deletions.
diff --git a/src/app/components/chart-block/ChartBlock.stories.tsx b/src/app/components/chart-block/ChartBlock.stories.tsx
@@ -25,9 +25,11 @@ const Wrapper: React.FC = () => {
       cycles={CYCLES}
       infoType="global"
       title="$84 Billion"
+      data={STORY_DATA_VARIANT_2}
       selectedCycles={selectedCycles}
       subtitle="Funds raised to date"
       handleCycleChange={handleCycleChange}
+      exportName="pledges-and-contributions"
       text="Government, private sector, nongovernment and other donor pledges and contributions"
     >
       <BarChart

diff --git a/src/app/components/chart-block/components/button-toolbar/data.tsx b/src/app/components/chart-block/components/button-toolbar/data.tsx
@@ -18,6 +18,11 @@ export interface ChartBlockButtonToolbarProps {
   blockId: string;
   infoType: InfoPanelType;
   chartType?: string;
+  exportName: string;
+  chartData: {
+    headers: string[];
+    data: (string | number)[][];
+  };
 }
 
 export interface InfoPanelProps {
@@ -47,12 +52,12 @@ export const DownloadPanel: React.FC<ChartBlockButtonToolbarProps> = (
     null
   );
 
-  const handleButtonClick = (type: "pdf" | "png") => () => {
-    exportChart(props.blockId || "", type)
+  const handleButtonClick = (type: "csv" | "pdf" | "png") => () => {
+    exportChart(props.blockId || "", type, props.chartData, props.exportName)
       .then(() => {
         setFeedbackMessage(`Asset downloaded as ${type.toUpperCase()}.`);
       })
-      .catch(() => {
+      .catch((e) => {
         setFeedbackMessage("Oops, something went wrong.");
       });
   };
@@ -78,6 +83,7 @@ export const DownloadPanel: React.FC<ChartBlockButtonToolbarProps> = (
       )}
       {!feedbackMessage && (
         <React.Fragment>
+          <Button onClick={handleButtonClick("csv")}>CSV.</Button>
           <Button onClick={handleButtonClick("pdf")}>PDF.</Button>
           <Button onClick={handleButtonClick("png")}>PNG.</Button>
         </React.Fragment>

diff --git a/src/app/components/chart-block/data.ts b/src/app/components/chart-block/data.ts
@@ -1,12 +1,14 @@
 import { InfoPanelType } from "app/components/chart-block/components/button-toolbar/data";
 
 export interface ChartBlockProps {
+  data: any;
   id: string;
   title: string;
   text?: string;
   empty?: boolean;
   subtitle: string;
   loading?: boolean;
+  exportName: string;
   latestUpdate?: string;
   noSplitText?: boolean;
   showCycleAll?: boolean;

diff --git a/src/app/components/chart-block/index.tsx b/src/app/components/chart-block/index.tsx
@@ -178,7 +178,9 @@ export const ChartBlock: React.FC<ChartBlockProps> = (
           <ChartBlockButtonToolbar
             blockId={id}
             hashId={props.id}
+            chartData={props.data}
             infoType={props.infoType}
+            exportName={props.exportName}
             chartType={props.dropdownSelected}
           />
         )}

diff --git a/src/app/components/charts/radial/data.ts b/src/app/components/charts/radial/data.ts
@@ -8,6 +8,13 @@ import {
 export interface RadialChartDataItem {
   name: string;
   value: number;
+  tooltip?: {
+    items: {
+      name: string;
+      value: number;
+      percentage: number;
+    }[];
+  };
   itemStyle?: {
     color: string;
   };

diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-2/index.tsx
@@ -128,6 +128,37 @@ export const AccessToFundingBlock2: React.FC<AccessToFundingBlock2Props> = (
     ];
   }, [dataEligibilityTable]);
 
+  const exportChartData = React.useMemo(() => {
+    const result: (string | number)[][] = [];
+    dataEligibilityTable.forEach((geography) => {
+      get(geography, "_children", []).forEach((component: any) => {
+        const diseaseBurdens = get(component, "_children[0]", {});
+        const eligibilityStatuses = get(component, "_children[1]", {});
+        dataEligibilityTableYears.forEach((year) => {
+          const diseaseBurden = get(diseaseBurdens, `["${year}"]`, "");
+          const eligibilityStatus = get(eligibilityStatuses, `["${year}"]`, "");
+          result.push([
+            geography.name,
+            component.name,
+            year,
+            diseaseBurden,
+            eligibilityStatus,
+          ]);
+        });
+      });
+    });
+    return {
+      headers: [
+        "Geography",
+        "Component",
+        "Year",
+        "Disease Burden",
+        "Eligbility Status",
+      ],
+      data: result,
+    };
+  }, [dataEligibilityTable]);
+
   const handleToggleChartFilter = (
     checked: boolean,
     value: string,
@@ -215,6 +246,7 @@ export const AccessToFundingBlock2: React.FC<AccessToFundingBlock2Props> = (
       <DatasetChartBlock
         id="eligibility"
         infoType="global"
+        exportName="eligibility"
         title={getCMSDataField(
           cmsData,
           "pagesDatasetsAccessToFunding.eligibilityTitle",
@@ -227,6 +259,7 @@ export const AccessToFundingBlock2: React.FC<AccessToFundingBlock2Props> = (
         )}
         dropdownItems={[]}
         disableCollapse
+        data={exportChartData}
         latestUpdate={latestUpdateDate}
         loading={loadingEligibilityTable}
         filterGroups={props.filterGroups}

diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-3/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-3/index.tsx
@@ -210,6 +210,55 @@ export const AccessToFundingBlock3: React.FC<AccessToFundingBlock3Props> = (
     dataAllocationsTable,
   ]);
 
+  const chartData = React.useMemo(() => {
+    const result: (string | number)[][] = [];
+    let headers: string[] = [];
+    switch (dropdownSelected) {
+      case dropdownItemsAllocations[0].value:
+        headers = ["Sub-Region", "Country", "Amount"];
+        dataAllocationsSunburst.forEach((item: any) => {
+          const items = get(item, "children", []);
+          if (items.length > 0) {
+            items.forEach((child: any) => {
+              result.push([item.name, child.name, child.value]);
+            });
+          } else {
+            result.push([item.name, "", item.value]);
+          }
+        });
+        break;
+      case dropdownItemsAllocations[1].value:
+        headers = ["Component", "Amount"];
+        dataAllocationsTreemap.forEach((item: any) => {
+          result.push([item.name, item.value]);
+        });
+        break;
+      case dropdownItemsAllocations[2].value:
+        headers = ["Geography", "Component", "Period", "Amount"];
+        dataAllocationsTable.forEach((item: any) => {
+          get(item, "_children", []).forEach((child: any) => {
+            Object.keys(child).forEach((key) => {
+              if (key !== "name") {
+                result.push([item.name, child.name, key, child[key]]);
+              }
+            });
+          });
+        });
+        break;
+      default:
+        break;
+    }
+    return {
+      headers,
+      data: result,
+    };
+  }, [
+    dropdownSelected,
+    dataAllocationsSunburst,
+    dataAllocationsTreemap,
+    dataAllocationsTable,
+  ]);
+
   const chartEmpty = React.useMemo(() => {
     switch (dropdownSelected) {
       case dropdownItemsAllocations[0].value:
@@ -337,6 +386,7 @@ export const AccessToFundingBlock3: React.FC<AccessToFundingBlock3Props> = (
     >
       <DatasetChartBlock
         id="allocation"
+        exportName="allocation"
         title={getCMSDataField(
           cmsData,
           "pagesDatasetsAccessToFunding.allocationTitle",
@@ -361,6 +411,7 @@ export const AccessToFundingBlock3: React.FC<AccessToFundingBlock3Props> = (
         handleResetFilters={handleResetChartFilters}
         appliedFiltersData={chart2AppliedFiltersData}
         extraDropdown={allocationCycleDropdown}
+        data={chartData}
         infoType="global"
       >
         {chartContent}

diff --git a/src/app/pages/datasets/access-to-funding/blocks/block-5/index.tsx b/src/app/pages/datasets/access-to-funding/blocks/block-5/index.tsx
@@ -177,6 +177,51 @@ export const AccessToFundingBlock5: React.FC<AccessToFundingBlock5Props> = (
     fetchFundingRequestsTable({ filterString: chart3FilterString });
   }, [chart3FilterString]);
 
+  const exportChartData = React.useMemo(() => {
+    const result: (string | number)[][] = [];
+
+    dataFundingRequestsTable.forEach((row) => {
+      get(row, "_children", []).forEach((subRow: any) => {
+        get(subRow, "_children", []).forEach((subSubRow: any) => {
+          result.push([
+            `"${row.components}"`,
+            `"${subRow.components}"`,
+            `"${subRow.submissionDate}"`,
+            `"${subRow.approach}"`,
+            `"${subRow.trpWindow}"`,
+            `"${subRow.trpOutcome}"`,
+            `"${subRow.portfolioCategorization}"`,
+            `"${subSubRow.boardApproval}"`,
+            `"${subSubRow.gacMeeting}"`,
+            `"${subSubRow.grant}"`,
+            `"${subSubRow.startingDate}"`,
+            `"${subSubRow.endingDate}"`,
+            `"${subSubRow.principalRecipient}"`,
+          ]);
+        });
+      });
+    });
+
+    return {
+      headers: [
+        "Geography",
+        "Components",
+        "Submission Date",
+        "Approach",
+        "TRP Window",
+        "TRP Outcome",
+        "Portfolio Categorization",
+        "Board Approval",
+        "GAC Meeting",
+        "Grant",
+        "Starting Date",
+        "Ending Date",
+        "Principal Recipient",
+      ],
+      data: result,
+    };
+  }, [dataFundingRequestsTable]);
+
   return (
     <Box
       padding="50px 0"
@@ -204,6 +249,8 @@ export const AccessToFundingBlock5: React.FC<AccessToFundingBlock5Props> = (
         )}
         disableCollapse
         dropdownItems={[]}
+        data={exportChartData}
+        exportName="funding-requests"
         latestUpdate={latestUpdateDate}
         loading={loadingFundingRequestsTable}
         filterGroups={props.filterGroups}

diff --git a/src/app/pages/datasets/annual-results/index.tsx b/src/app/pages/datasets/annual-results/index.tsx
@@ -371,6 +371,47 @@ export const AnnualResultsPage: React.FC = () => {
     }
   }, [dropdownSelected, dataPolyline, dataTable, yearSelected]);
 
+  const exportChartData = React.useMemo(() => {
+    const result: (string | number)[][] = [];
+    switch (dropdownSelected) {
+      case dropdownItems[0].value:
+        dataPolyline.children?.forEach((component) => {
+          component.children?.forEach((indicator) => {
+            result.push([
+              dataPolyline.name,
+              `"${component.name}"`,
+              `"${indicator.name}"`,
+              indicator.value ?? "",
+            ]);
+          });
+        });
+        break;
+      case dropdownItems[1].value:
+        dataTable.forEach((year) => {
+          if (year !== null) {
+            // @ts-ignore
+            get(year, "_children", []).forEach((component: any) => {
+              get(component, "_children", []).forEach((indicator: any) => {
+                result.push([
+                  year.name,
+                  `"${component.name}"`,
+                  `"${indicator.name}"`,
+                  indicator.value ?? "",
+                ]);
+              });
+            });
+          }
+        });
+        break;
+      default:
+        break;
+    }
+    return {
+      headers: ["Year", "Component", "Indicator", "Amount"],
+      data: result,
+    };
+  }, [dropdownSelected, dataPolyline, dataTable]);
+
   React.useEffect(() => {
     if (annualResultsCycles.length > 0) {
       setYearSelected(annualResultsCycles[0].value.toString());
@@ -451,12 +492,14 @@ export const AnnualResultsPage: React.FC = () => {
         >
           <DatasetChartBlock
             id="annual-results"
+            exportName="annual-results"
             title={get(
               cmsData,
               "pagesDatasetsAnnualResults.chartTitle",
               "Annual Results"
             )}
             subtitle=""
+            data={exportChartData}
             loading={loadingResults}
             dropdownItems={dropdownItems}
             latestUpdate={latestUpdateDate}

diff --git a/src/app/pages/datasets/common/chart-block/ChartBlock.stories.tsx b/src/app/pages/datasets/common/chart-block/ChartBlock.stories.tsx
@@ -28,13 +28,15 @@ const Wrapper: React.FC = () => {
       subtitle="Funds raised to date"
       dropdownItems={items}
       dropdownSelected={dropdownSelected}
+      exportName="pledges-and-contributions"
       handleDropdownChange={handleSelectionChange}
       filterGroups={[]}
       toggleFilter={() => {}}
       removeFilter={() => {}}
       handleResetFilters={() => {}}
       appliedFilters={[]}
       appliedFiltersData={defaultAppliedFilters}
+      data={STORY_DATA_VARIANT_2}
       infoType="global"
     >
       <BarChart

diff --git a/src/app/pages/datasets/common/chart-block/data.ts b/src/app/pages/datasets/common/chart-block/data.ts
@@ -3,11 +3,13 @@ import { AppliedFiltersModel } from "app/state/api/action-reducers/sync/filters"
 import { InfoPanelType } from "app/components/chart-block/components/button-toolbar/data";
 
 export interface DatasetChartBlockProps {
+  data: any;
   id: string;
   title: string;
   empty?: boolean;
   subtitle: string;
   loading?: boolean;
+  exportName: string;
   latestUpdate?: string;
   infoType: InfoPanelType;
   appliedFilters: string[];

diff --git a/src/app/pages/datasets/common/chart-block/index.tsx b/src/app/pages/datasets/common/chart-block/index.tsx
@@ -244,7 +244,9 @@ export const DatasetChartBlock: React.FC<DatasetChartBlockProps> = (
           <ChartBlockButtonToolbar
             blockId={id}
             hashId={props.id}
+            chartData={props.data}
             infoType={props.infoType}
+            exportName={props.exportName}
             chartType={props.dropdownSelected}
           />
         </Box>