added excel download button to the pages

compendium-frontend/package.json

@@ -54,7 +54,8 @@
     "react-chartjs-2": "^5.1.0",
     "react-dom": "^18.2.0",
     "react-icons": "4.8.0",
-    "react-router-dom": "^6.5.0"
+    "react-router-dom": "^6.5.0",
+    "xlsx": "^0.18.5"
   },
   "description": "## development environment",
   "main": "index.js",

compendium-frontend/src/components/DownloadExcelButton.tsx

+import React from 'react';
+import * as XLSX from 'xlsx';
+
+interface DownloadExcelProps {
+    data: any[];
+    filename?: string;
+    sheetName?: string;
+}
+
+function convertToExcel(jsonData: any[], sheetName= "Sheet1"): Blob {
+    const ws = XLSX.utils.json_to_sheet(jsonData);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, sheetName);
+    const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
+
+    const buffer = new ArrayBuffer(wbout.length);
+    const view = new Uint8Array(buffer);
+    for (let i = 0; i < wbout.length; i++) {
+        // Convert each character of the binary workbook string to an 8-bit integer and store in the Uint8Array 'view' for blob creation.
+        view[i] = wbout.charCodeAt(i) & 0xFF;
+    }
+
+    return new Blob([buffer], { type: 'application/octet-stream' });
+}
+
+const DownloadExcelButton: React.FC<DownloadExcelProps> = ({ data, filename = 'data.xlsx', sheetName }) => {
+
+    const downloadExcel = () => {
+        const blob = convertToExcel(data, sheetName);
+        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={downloadExcel}>Download Excel</button>
+        </>
+    );
+}
+
+export default DownloadExcelButton;

compendium-frontend/src/pages/Budget.tsx

@@ -8,6 +8,7 @@ import Filter from "../components/graphing/Filter";
 import LineGraph from "../components/graphing/LineGraph";
 import { Sections } from '../helpers/constants';
 import DownloadCSVButton from "../components/DownloadCSVButton";
+import DownloadExcelButton from "../components/DownloadExcelButton";
 
 interface inputProps {
     filterSelection: FilterSelection
@@ -47,6 +48,7 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
             <>
                 <Row>
                     <DownloadCSVButton data={budgetResponse} filename="budget_data.csv"/>
+                    <DownloadExcelButton data={budgetResponse} filename="budget_data.xlsx"/>
                 </Row>
                 <Row>
                     <LineGraph data={budgetData} />

compendium-frontend/src/pages/ChargingStructure.tsx

@@ -9,6 +9,7 @@ import DataPage from "../components/DataPage";
 import Filter from "../components/graphing/Filter";
 import { Sections } from "../helpers/constants";
 import DownloadCSVButton from "../components/DownloadCSVButton";
+import DownloadExcelButton from "../components/DownloadExcelButton";
 
 
 ChartJS.register(
@@ -59,6 +60,7 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
             <>
                 <Row>
                     <DownloadCSVButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv"/>
+                    <DownloadExcelButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.xlsx"/>
                 </Row>
                 <Table className="charging-struct-table" striped bordered responsive>
                     <colgroup>

compendium-frontend/src/pages/ECProjects.tsx

@@ -7,6 +7,7 @@ import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 import DownloadCSVButton from "../components/DownloadCSVButton";
+import DownloadExcelButton from "../components/DownloadExcelButton";
 
 
 interface inputProps {
@@ -63,6 +64,7 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
             <>
                 <Row>
                     <DownloadCSVButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv"/>
+                    <DownloadExcelButton data={projectData} filename="nren_involvement_in_european_commission_projects.xlsx"/>
                 </Row>
                 <Table borderless className='compendium-table'>
                     <thead>

compendium-frontend/src/pages/FundingSource.tsx

@@ -11,6 +11,7 @@ import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 import ColorBadge from '../components/ColorBadge';
 import DownloadCSVButton from "../components/DownloadCSVButton";
+import DownloadExcelButton from "../components/DownloadExcelButton";
 
 export const chartOptions = {
   maintainAspectRatio: false,
@@ -158,6 +159,7 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
         <>
             <Row>
                 <DownloadCSVButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv"/>
+                <DownloadExcelButton data={fundingSourceData} filename="income_source_of_nren_per_year.xlsx"/>
             </Row>
             <div>
                 <FundingSourceLegend/>

compendium-frontend/src/pages/ParentOrganisation.tsx

@@ -7,6 +7,7 @@ import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 import DownloadCSVButton from "../components/DownloadCSVButton";
+import DownloadExcelButton from "../components/DownloadExcelButton";
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -58,6 +59,7 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
             <>
                 <Row>
                     <DownloadCSVButton data={organisationData} filename="nren_parent_organisations.csv"/>
+                    <DownloadExcelButton data={organisationData} filename="nren_parent_organisations.xlsx"/>
                 </Row>
                 <Table borderless className='compendium-table'>
                     <thead>

compendium-frontend/src/pages/StaffGraph.tsx

@@ -11,6 +11,7 @@ import WithLegend from '../components/WithLegend';
 import htmlLegendPlugin from '../plugins/HTMLLegendPlugin';
 import {Row} from "react-bootstrap";
 import DownloadCSVButton from "../components/DownloadCSVButton";
+import DownloadExcelButton from "../components/DownloadExcelButton";
 
 ChartJS.register(
     CategoryScale,
@@ -161,6 +162,7 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu
             <>
                 <Row>
                     <DownloadCSVButton data={staffData} filename={filename}/>
+                    <DownloadExcelButton data={staffData} filename={filename}/>
                 </Row>
                 <WithLegend>
                     <div className="chart-container" style={{'height': `${height}rem`}}>

compendium-frontend/src/pages/SubOrganisation.tsx

@@ -7,6 +7,7 @@ import DataPage from '../components/DataPage';
 import Filter from "../components/graphing/Filter"
 import { Sections } from '../helpers/constants';
 import DownloadCSVButton from "../components/DownloadCSVButton";
+import DownloadExcelButton from "../components/DownloadExcelButton";
 
 
 function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
@@ -63,6 +64,7 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
             <>
                 <Row>
                     <DownloadCSVButton data={organisationData} filename="nren_suborganisations.csv"/>
+                    <DownloadExcelButton data={organisationData} filename="nren_suborganisations.xlsx"/>
                 </Row>
                 <Table borderless className='compendium-table'>
                     <thead>