added csv download functionality to pages

compendium-frontend/src/App.tsx

 import React, { ReactElement, useState } from "react";
-import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom";
+import { BrowserRouter as Router, Routes, Route,} from "react-router-dom";
 import Landing from "./pages/Landing";
 import ExternalPageNavBar from "./shared/ExternalPageNavBar";
 import GeantFooter from "./components/global/GeantFooter";

compendium-frontend/src/Schema.tsx

@@ -82,19 +82,6 @@ export interface FundingSourceDataset {
     }[]
 }
 
-export interface ChargingStructureDataset {
-    labels: string[],
-    datasets: {
-        label: string,
-        data: { x: number | null; y: number | null; }[],
-        borderRadius: number,
-        borderSkipped: boolean,
-        barPercentage: number,
-        borderWidth: number,
-        categoryPercentage: number,
-    }[]
-}
-
 export interface NrenStaffDataset {
 
     labels: string[],

compendium-frontend/src/components/DownloadCSVButton.tsx

+import React from 'react';
+
+interface DownloadCSVProps {
+    data: any[];
+    filename?: string;
+}
+
+function convertToCSV(jsonData: any[]): string {
+    if (!jsonData.length) return "";
+
+    const header = Object.keys(jsonData[0]);
+
+    const rows = jsonData.map(obj => {
+        return header.map(fieldName => {
+            const value = obj[fieldName];
+            // Handle null values and wrap strings with commas or double-quotes in double quotes
+            return value === null ? '' : typeof value === 'string' && (value.includes(',') || value.includes('"')) ?
+                   `"${value.replace(/"/g, '""')}"` : value;
+        }).join(',');
+    });
+
+    // Combine header and rows with newline characters
+    return [header.join(','), ...rows].join('\r\n');
+}
+
+const DownloadCSVButton: React.FC<DownloadCSVProps> = ({ data, filename = 'data.csv' }) => {
+
+    const downloadCSV = () => {
+        const csv = convertToCSV(data);
+        const blob = new Blob([csv], { type: 'text/csv' });
+        const link = document.createElement('a');
+        link.href = URL.createObjectURL(blob);
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+
+    return (
+        <>
+            <button onClick={downloadCSV}>Download CSV</button>
+        </>
+    );
+}
+
+export default DownloadCSVButton;

compendium-frontend/src/helpers/dataconversion.tsx

@@ -188,12 +188,10 @@ export function createBudgetDataset(budgetEntries: Budget[]): BasicDataset {
         }
     });
 
-    const budgetAPIResponse = {
+    return {
         datasets: sets,
         labels: labelsYear.map(year => year.toString())
-    }
-
-    return budgetAPIResponse;
+    };
 }
 
 

compendium-frontend/src/pages/Budget.tsx

@@ -7,6 +7,7 @@ import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter";
 import LineGraph from "../components/graphing/LineGraph";
 import { Sections } from '../helpers/constants';
+import DownloadCSVButton from "../components/DownloadCSVButton";
 
 interface inputProps {
     filterSelection: FilterSelection
@@ -44,6 +45,9 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
         On hovering over the graphs data points will give NRENs budget share in that year.  This graph can be used to compare, selecting multiple NRENs to see the 
         fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}>
             <>
+                <Row>
+                    <DownloadCSVButton data={budgetResponse} filename="budget_data.csv"/>
+                </Row>
                 <Row>
                     <LineGraph data={budgetData} />
                 </Row>