Skip to content
Snippets Groups Projects
Commit ffb0cce5 authored by Mohammad Torkashvand's avatar Mohammad Torkashvand
Browse files

make them a single component

parent b6aef6ab
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 183 additions and 109 deletions
compendium-frontend/src/components/DownloadCSVButton.tsx → compendium-frontend/src/components/DownloadDataButton.tsx
+ 97
− 0
View file @ ffb0cce5
import React from 'react'; import React from 'react';
import * as XLSX from "xlsx";
import {ExportType} from "../helpers/constants";
import * as buffer from "buffer";
interface DownloadCSVProps { interface DownloadCSVProps {
data: any[]; data: any[];
filename?: string; filename: string;
exportType: ExportType;
} }
...@@ -36,12 +42,43 @@ function convertToCSV(jsonData: any[]): string { ...@@ -36,12 +42,43 @@ function convertToCSV(jsonData: any[]): string {
return [header.join(','), ...rows].join('\r\n'); return [header.join(','), ...rows].join('\r\n');
} }
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 DownloadDataButton: React.FC<DownloadCSVProps> = ({data, filename, exportType}) => {
const downloadData = () => {
let blob;
const DownloadCSVButton: React.FC<DownloadCSVProps> = ({ data, filename = 'data.csv' }) => { switch (exportType) {
case ExportType.EXCEL: {
const csv = convertToExcel(data);
blob = new Blob([csv], {type: 'application/octet-stream'});
filename = filename.endsWith('.xlsx') ? filename : `${filename}.xlsx`;
break;
}
case ExportType.CSV:
default: {
const csvData = convertToCSV(data);
blob = new Blob([csvData], {type: 'text/csv'});
filename = filename.endsWith('.csv') ? filename : `${filename}.csv`;
break;
}
}
const downloadCSV = () => {
const csv = convertToCSV(data);
const blob = new Blob([csv], { type: 'text/csv' });
const link = document.createElement('a'); const link = document.createElement('a');
link.href = URL.createObjectURL(blob); link.href = URL.createObjectURL(blob);
link.download = filename; link.download = filename;
...@@ -52,9 +89,9 @@ const DownloadCSVButton: React.FC<DownloadCSVProps> = ({ data, filename = 'data. ...@@ -52,9 +89,9 @@ const DownloadCSVButton: React.FC<DownloadCSVProps> = ({ data, filename = 'data.
return ( return (
<> <>
<button onClick={downloadCSV}>Download CSV</button> <button onClick={downloadData}>Download {exportType}</button>
</> </>
); );
} }
export default DownloadCSVButton; export default DownloadDataButton;
compendium-frontend/src/components/DownloadExcelButton.tsx deleted 100644 → 0
+ 0
− 45
View file @ b6aef6ab
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/helpers/constants.ts
+ 5
− 0
View file @ ffb0cce5
...@@ -4,4 +4,9 @@ export enum Sections { ...@@ -4,4 +4,9 @@ export enum Sections {
ConnectedUsers = 'CONNECTED USERS', ConnectedUsers = 'CONNECTED USERS',
Network = 'NETWORK', Network = 'NETWORK',
Services = 'SERVICES', Services = 'SERVICES',
}
export enum ExportType {
CSV = "CSV",
EXCEL = "EXCEL",
} }
\ No newline at end of file
compendium-frontend/src/pages/Budget.tsx
+ 12
− 9
View file @ ffb0cce5
import React, { ReactElement, useEffect, useMemo, useState } from 'react'; import React, {ReactElement, useEffect, useMemo, useState} from 'react';
import { Row } from "react-bootstrap"; import {Row} from "react-bootstrap";
import { Budget, FilterSelection } from "../Schema"; import {Budget, FilterSelection} from "../Schema";
import { createBudgetDataset, getYearsAndNrens, loadDataWithFilterNrenSelectionFallback } from "../helpers/dataconversion"; import {
createBudgetDataset,
getYearsAndNrens,
loadDataWithFilterNrenSelectionFallback
} from "../helpers/dataconversion";
import DataPage from '../components/DataPage'; import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter"; import Filter from "../components/graphing/Filter";
import LineGraph from "../components/graphing/LineGraph"; import LineGraph from "../components/graphing/LineGraph";
import { Sections } from '../helpers/constants'; import {ExportType, Sections} from '../helpers/constants';
import DownloadCSVButton from "../components/DownloadCSVButton"; import DownloadDataButton from "../components/DownloadDataButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
interface inputProps { interface inputProps {
filterSelection: FilterSelection filterSelection: FilterSelection
...@@ -47,8 +50,8 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE ...@@ -47,8 +50,8 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}> fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}>
<> <>
<Row> <Row>
<DownloadCSVButton data={budgetResponse} filename="budget_data.csv"/> <DownloadDataButton data={budgetResponse} filename="budget_data.csv" exportType={ExportType.CSV}/>
<DownloadExcelButton data={budgetResponse} filename="budget_data.xlsx"/> <DownloadDataButton data={budgetResponse} filename="budget_data.xlsx" exportType={ExportType.EXCEL}/>
</Row> </Row>
<Row> <Row>
<LineGraph data={budgetData} /> <LineGraph data={budgetData} />
......
compendium-frontend/src/pages/ChargingStructure.tsx
+ 12
− 9
View file @ ffb0cce5
import React, { useMemo, useState } from "react"; import React, {useMemo, useState} from "react";
import {Row, Table} from "react-bootstrap"; import {Row, Table} from "react-bootstrap";
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip} from 'chart.js';
import { ChargingStructure, FilterSelection } from "../Schema"; import {ChargingStructure, FilterSelection} from "../Schema";
import { createChargingStructureDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import {
createChargingStructureDataLookup,
getYearsAndNrens,
loadDataWithFilterSelectionFallback
} from "../helpers/dataconversion";
import ColorPill from "../components/ColorPill"; import ColorPill from "../components/ColorPill";
import DataPage from "../components/DataPage"; import DataPage from "../components/DataPage";
import Filter from "../components/graphing/Filter"; import Filter from "../components/graphing/Filter";
import { Sections } from "../helpers/constants"; import {ExportType, Sections} from "../helpers/constants";
import DownloadCSVButton from "../components/DownloadCSVButton"; import DownloadDataButton from "../components/DownloadDataButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
ChartJS.register( ChartJS.register(
...@@ -59,8 +62,8 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro ...@@ -59,8 +62,8 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
category={Sections.Organisation} filter={filterNode}> category={Sections.Organisation} filter={filterNode}>
<> <>
<Row> <Row>
<DownloadCSVButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv"/> <DownloadDataButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv" exportType={ExportType.CSV}/>
<DownloadExcelButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.xlsx"/> <DownloadDataButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.xlsx" exportType={ExportType.EXCEL} />
</Row> </Row>
<Table className="charging-struct-table" striped bordered responsive> <Table className="charging-struct-table" striped bordered responsive>
<colgroup> <colgroup>
......
compendium-frontend/src/pages/ECProjects.tsx
+ 11
− 8
View file @ ffb0cce5
import React, { useEffect, useMemo, useState } from 'react'; import React, {useEffect, useMemo, useState} from 'react';
import {Row, Table} from "react-bootstrap"; import {Row, Table} from "react-bootstrap";
import { ECProject, FilterSelection } from "../Schema"; import {ECProject, FilterSelection} from "../Schema";
import { createECProjectsDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion'; import {
createECProjectsDataLookup,
getYearsAndNrens,
loadDataWithFilterSelectionFallback
} from '../helpers/dataconversion';
import DataPage from '../components/DataPage'; import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter" import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants'; import {ExportType, Sections} from '../helpers/constants';
import DownloadCSVButton from "../components/DownloadCSVButton"; import DownloadDataButton from "../components/DownloadDataButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
interface inputProps { interface inputProps {
...@@ -63,8 +66,8 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) { ...@@ -63,8 +66,8 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
category={Sections.Organisation} filter={filterNode}> category={Sections.Organisation} filter={filterNode}>
<> <>
<Row> <Row>
<DownloadCSVButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv"/> <DownloadDataButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv" exportType={ExportType.CSV}/>
<DownloadExcelButton data={projectData} filename="nren_involvement_in_european_commission_projects.xlsx"/> <DownloadDataButton data={projectData} filename="nren_involvement_in_european_commission_projects.xlsx" exportType={ExportType.EXCEL}/>
</Row> </Row>
<Table borderless className='compendium-table'> <Table borderless className='compendium-table'>
<thead> <thead>
......
compendium-frontend/src/pages/FundingSource.tsx
+ 14
− 11
View file @ ffb0cce5
import React, { useEffect, useMemo, useState } from 'react'; import React, {useEffect, useMemo, useState} from 'react';
import { Bar } from 'react-chartjs-2'; import {Bar} from 'react-chartjs-2';
import { Col, Row } from "react-bootstrap"; import {Col, Row} from "react-bootstrap";
import { Chart as ChartJS } from 'chart.js'; import {Chart as ChartJS} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels'; import ChartDataLabels from 'chartjs-plugin-datalabels';
import { FundingSource, FilterSelection } from "../Schema"; import {FilterSelection, FundingSource} from "../Schema";
import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import {
createFundingSourceDataset,
getYearsAndNrens,
loadDataWithFilterSelectionFallback
} from "../helpers/dataconversion";
import DataPage from '../components/DataPage'; import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter" import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants'; import {ExportType, Sections} from '../helpers/constants';
import ColorBadge from '../components/ColorBadge'; import ColorBadge from '../components/ColorBadge';
import DownloadCSVButton from "../components/DownloadCSVButton"; import DownloadDataButton from "../components/DownloadDataButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
export const chartOptions = { export const chartOptions = {
maintainAspectRatio: false, maintainAspectRatio: false,
...@@ -158,8 +161,8 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps) ...@@ -158,8 +161,8 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
category={Sections.Organisation} filter={filterNode}> category={Sections.Organisation} filter={filterNode}>
<> <>
<Row> <Row>
<DownloadCSVButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv"/> <DownloadDataButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv" exportType={ExportType.CSV}/>
<DownloadExcelButton data={fundingSourceData} filename="income_source_of_nren_per_year.xlsx"/> <DownloadDataButton data={fundingSourceData} filename="income_source_of_nren_per_year.xlsx" exportType={ExportType.EXCEL}/>
</Row> </Row>
<div> <div>
<FundingSourceLegend/> <FundingSourceLegend/>
......
compendium-frontend/src/pages/ParentOrganisation.tsx
+ 11
− 8
View file @ ffb0cce5
import React, { useEffect, useMemo, useState } from 'react'; import React, {useEffect, useMemo, useState} from 'react';
import {Row, Table} from "react-bootstrap"; import {Row, Table} from "react-bootstrap";
import { Organisation, FilterSelection } from "../Schema"; import {FilterSelection, Organisation} from "../Schema";
import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import {
createOrganisationDataLookup,
getYearsAndNrens,
loadDataWithFilterSelectionFallback
} from "../helpers/dataconversion";
import DataPage from '../components/DataPage'; import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter" import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants'; import {ExportType, Sections} from '../helpers/constants';
import DownloadCSVButton from "../components/DownloadCSVButton"; import DownloadDataButton from "../components/DownloadDataButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) { function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
...@@ -58,8 +61,8 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps) ...@@ -58,8 +61,8 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
category={Sections.Organisation} filter={filterNode}> category={Sections.Organisation} filter={filterNode}>
<> <>
<Row> <Row>
<DownloadCSVButton data={organisationData} filename="nren_parent_organisations.csv"/> <DownloadDataButton data={organisationData} filename="nren_parent_organisations.csv" exportType={ExportType.CSV}/>
<DownloadExcelButton data={organisationData} filename="nren_parent_organisations.xlsx"/> <DownloadDataButton data={organisationData} filename="nren_parent_organisations.xlsx" exportType={ExportType.EXCEL}/>
</Row> </Row>
<Table borderless className='compendium-table'> <Table borderless className='compendium-table'>
<thead> <thead>
......
compendium-frontend/src/pages/StaffGraph.tsx
+ 10
− 11
View file @ ffb0cce5
import React, { useEffect, useMemo, useState } from 'react'; import React, {useEffect, useMemo, useState} from 'react';
import { Bar } from 'react-chartjs-2'; import {Bar} from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip} from 'chart.js';
import { NrenStaff, FilterSelection } from "../Schema"; import {FilterSelection, NrenStaff} from "../Schema";
import { createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import {createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback} from "../helpers/dataconversion";
import DataPage from '../components/DataPage'; import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter" import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants'; import {ExportType, Sections} from '../helpers/constants';
import WithLegend from '../components/WithLegend'; import WithLegend from '../components/WithLegend';
import htmlLegendPlugin from '../plugins/HTMLLegendPlugin'; import htmlLegendPlugin from '../plugins/HTMLLegendPlugin';
import {Row} from "react-bootstrap"; import {Row} from "react-bootstrap";
import DownloadCSVButton from "../components/DownloadCSVButton"; import DownloadDataButton from "../components/DownloadDataButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
ChartJS.register( ChartJS.register(
CategoryScale, CategoryScale,
...@@ -154,15 +153,15 @@ function StaffGraph({ filterSelection, setFilterSelection, roles = false }: inpu ...@@ -154,15 +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 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."; : "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"; const filename = roles ? "roles_of_nren_employees" : "types_of_employment_for_nrens";
return ( return (
<DataPage title={title} <DataPage title={title}
description={description} description={description}
category={Sections.Organisation} filter={filterNode}> category={Sections.Organisation} filter={filterNode}>
<> <>
<Row> <Row>
<DownloadCSVButton data={staffData} filename={filename}/> <DownloadDataButton data={staffData} filename={filename} exportType={ExportType.CSV}/>
<DownloadExcelButton data={staffData} filename={filename}/> <DownloadDataButton data={staffData} filename={filename} exportType={ExportType.EXCEL}/>
</Row> </Row>
<WithLegend> <WithLegend>
<div className="chart-container" style={{'height': `${height}rem`}}> <div className="chart-container" style={{'height': `${height}rem`}}>
......
compendium-frontend/src/pages/SubOrganisation.tsx
+ 11
− 8
View file @ ffb0cce5
import React, { useEffect, useMemo, useState } from 'react'; import React, {useEffect, useMemo, useState} from 'react';
import {Row, Table} from "react-bootstrap"; import {Row, Table} from "react-bootstrap";
import { Organisation, FilterSelection } from "../Schema"; import {FilterSelection, Organisation} from "../Schema";
import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion"; import {
createOrganisationDataLookup,
getYearsAndNrens,
loadDataWithFilterSelectionFallback
} from "../helpers/dataconversion";
import DataPage from '../components/DataPage'; import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter" import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants'; import {ExportType, Sections} from '../helpers/constants';
import DownloadCSVButton from "../components/DownloadCSVButton"; import DownloadDataButton from "../components/DownloadDataButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) { function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
...@@ -63,8 +66,8 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) { ...@@ -63,8 +66,8 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
category={Sections.Organisation} filter={filterNode}> category={Sections.Organisation} filter={filterNode}>
<> <>
<Row> <Row>
<DownloadCSVButton data={organisationData} filename="nren_suborganisations.csv"/> <DownloadDataButton data={organisationData} filename="nren_suborganisations.csv" exportType={ExportType.CSV}/>
<DownloadExcelButton data={organisationData} filename="nren_suborganisations.xlsx"/> <DownloadDataButton data={organisationData} filename="nren_suborganisations.xlsx" exportType={ExportType.EXCEL}/>
</Row> </Row>
<Table borderless className='compendium-table'> <Table borderless className='compendium-table'>
<thead> <thead>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment