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 createCSVRows(jsonData: any[], header: string[]): string[] {
+    return jsonData.map(obj => {
+        return header.map(fieldName => {
+            const value = obj[fieldName];
+
+            if (value === null) {
+                return "";
+            }
+
+            // Always wrap strings in double quotes and escape internal double quotes
+            if (typeof value === 'string') {
+                return `"${value.replace(/"/g, '""')}"`;
+            }
+
+            return value;
+        }).join(',');
+    });
+}
+
+
+function convertToCSV(jsonData: any[]): string {
+    if (!jsonData.length) return "";
+
+    const header = Object.keys(jsonData[0]);
+    const rows = createCSVRows(jsonData, header);
+
+    // 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>

compendium-frontend/src/pages/ChargingStructure.tsx

 import React, { useMemo, useState } from "react";
-import { Table } from "react-bootstrap";
+import {Row, Table} from "react-bootstrap";
 import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
 
 import { ChargingStructure, FilterSelection } from "../Schema";
@@ -8,6 +8,7 @@ import ColorPill from "../components/ColorPill";
 import DataPage from "../components/DataPage";
 import Filter from "../components/graphing/Filter";
 import { Sections } from "../helpers/constants";
+import DownloadCSVButton from "../components/DownloadCSVButton";
 
 
 ChartJS.register(
@@ -55,6 +56,10 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
          The charging structure can be based on a flat fee, usage based fee, a combination of both, or no direct charge. 
          By selecting multiple years and NRENs, the table can be used to compare the charging structure of NRENs."
         category={Sections.Organisation} filter={filterNode}>
+            <>
+                <Row>
+                    <DownloadCSVButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv"/>
+                </Row>
                 <Table className="charging-struct-table" striped bordered responsive>
                     <colgroup>
                         <col span={1} style={{width: "10%"}}/>
@@ -90,6 +95,7 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
                     </tbody>
 
                 </Table>
+            </>
         </DataPage>
     );
 }

compendium-frontend/src/pages/ECProjects.tsx

 import React, { useEffect, useMemo, useState } from 'react';
-import { Table } from "react-bootstrap";
+import {Row, Table} from "react-bootstrap";
 
 import { ECProject, FilterSelection } from "../Schema";
 import { createECProjectsDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
+import DownloadCSVButton from "../components/DownloadCSVButton";
 
 
 interface inputProps {
@@ -59,6 +60,10 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
         description='The table shows the NRENs involvement in European Commission Projects Membership. By selecting multiple
         year and NRENs, the table can be used to compare the NRENs involvement in European Commission Projects Membership'
         category={Sections.Organisation} filter={filterNode}>
+            <>
+                <Row>
+                    <DownloadCSVButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv"/>
+                </Row>
                 <Table borderless className='compendium-table'>
                     <thead>
                     <tr>
@@ -71,6 +76,7 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
                     {getJSXFromMap(projectDataByYear)}
                     </tbody>
                 </Table>
+            </>
         </DataPage>
     )
 }

compendium-frontend/src/pages/FundingSource.tsx

@@ -10,6 +10,7 @@ import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 import ColorBadge from '../components/ColorBadge';
+import DownloadCSVButton from "../components/DownloadCSVButton";
 
 export const chartOptions = {
   maintainAspectRatio: false,
@@ -154,6 +155,10 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
         On hovering over the graphs will give income share in that year.  This can be used to compare selecting multiple years to see how the 
         share has changed between the years.'
       category={Sections.Organisation} filter={filterNode}>
+        <>
+            <Row>
+                <DownloadCSVButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv"/>
+            </Row>
             <div>
                 <FundingSourceLegend/>
                 <div className="chart-container" style={{'height': `${height}rem`}}>
@@ -165,6 +170,7 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
                 </div>
                 <FundingSourceLegend/>
             </div>
+        </>
     </DataPage>
   );
 }

compendium-frontend/src/pages/ParentOrganisation.tsx

 import React, { useEffect, useMemo, useState } from 'react';
-import { Table } from "react-bootstrap";
+import {Row, Table} from "react-bootstrap";
 
 import { Organisation, FilterSelection } from "../Schema";
 import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
+import DownloadCSVButton from "../components/DownloadCSVButton";
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -54,6 +55,10 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
         description='The table shows the NRENs parent organisation. You can select only one year at a time
         and multiple NRENs. This table can be used to compare the parent organisation of NRENs.'
         category={Sections.Organisation} filter={filterNode}>
+            <>
+                <Row>
+                    <DownloadCSVButton data={organisationData} filename="nren_parent_organisations.csv"/>
+                </Row>
                 <Table borderless className='compendium-table'>
                     <thead>
                     <tr>
@@ -66,6 +71,7 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
                     {getJSXFromMap(organisationDataset)}
                     </tbody>
                 </Table>
+            </>
         </DataPage>
 
     );

compendium-frontend/src/pages/StaffGraph.tsx

@@ -9,6 +9,8 @@ import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 import WithLegend from '../components/WithLegend';
 import htmlLegendPlugin from '../plugins/HTMLLegendPlugin';
+import {Row} from "react-bootstrap";
+import DownloadCSVButton from "../components/DownloadCSVButton";
 
 ChartJS.register(
     CategoryScale,
@@ -151,10 +153,15 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
     ? "The graph shows the roles of NREN employees. On hovering over the graph will give the percentage of employees in that role. This graph can be used to compare, selecting multiple NRENs to see the fluctuation of roles over selected year and with other NRENs."
     : "The graph shows the types of employment for NREN employees. On hovering over the graphs will give the percentage of employees in that type of employment. This graph can be used to compare, selecting multiple NRENs to see the fluctuation of types of employment over selected year and with other NRENs.";
 
+    const filename = roles ? "roles_of_nren_employees.csv" : "types_of_employment_for_nren.csv";
     return (
         <DataPage title={title} 
         description={description}
         category={Sections.Organisation} filter={filterNode}>
+            <>
+                <Row>
+                    <DownloadCSVButton data={staffData} filename={filename}/>
+                </Row>
                 <WithLegend>
                     <div className="chart-container" style={{'height': `${height}rem`}}>
                         <Bar
@@ -164,6 +171,7 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
                         />
                     </div>
                 </WithLegend>
+            </>
         </DataPage>
     );
 }

compendium-frontend/src/pages/SubOrganisation.tsx

 import React, { useEffect, useMemo, useState } from 'react';
-import { Table } from "react-bootstrap";
+import {Row, Table} from "react-bootstrap";
 
 import { Organisation, FilterSelection } from "../Schema";
 import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
 import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
+import DownloadCSVButton from "../components/DownloadCSVButton";
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -59,6 +60,10 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
         description='The table shows the NRENs suborganisations. You can select multiple years and NRENs to get a
         tabular view of NRENs suborganisations over the years.'
         category={Sections.Organisation} filter={filterNode}>
+            <>
+                <Row>
+                    <DownloadCSVButton data={organisationData} filename="nren_suborganisations.csv"/>
+                </Row>
                 <Table borderless className='compendium-table'>
                     <thead>
                     <tr>
@@ -71,6 +76,7 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
                     {getJSXFromMap(organisationDataset)}
                     </tbody>
                 </Table>
+            </>
         </DataPage>
     );
 }