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
This commit is part of merge request !62. Comments created here will be created in the context of that merge request.
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 * as XLSX from "xlsx";
import {ExportType} from "../helpers/constants";
import * as buffer from "buffer";
interface DownloadCSVProps {
data: any[];
filename?: string;
filename: string;
exportType: ExportType;
}
......@@ -36,12 +42,43 @@ function convertToCSV(jsonData: any[]): string {
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');
link.href = URL.createObjectURL(blob);
link.download = filename;
......@@ -52,9 +89,9 @@ const DownloadCSVButton: React.FC<DownloadCSVProps> = ({ data, filename = 'data.
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 {
ConnectedUsers = 'CONNECTED USERS',
Network = 'NETWORK',
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 { Row } from "react-bootstrap";
import React, {ReactElement, useEffect, useMemo, useState} from 'react';
import {Row} from "react-bootstrap";
import { Budget, FilterSelection } from "../Schema";
import { createBudgetDataset, getYearsAndNrens, loadDataWithFilterNrenSelectionFallback } from "../helpers/dataconversion";
import {Budget, FilterSelection} from "../Schema";
import {
createBudgetDataset,
getYearsAndNrens,
loadDataWithFilterNrenSelectionFallback
} from "../helpers/dataconversion";
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";
import DownloadExcelButton from "../components/DownloadExcelButton";
import {ExportType, Sections} from '../helpers/constants';
import DownloadDataButton from "../components/DownloadDataButton";
interface inputProps {
filterSelection: FilterSelection
......@@ -47,8 +50,8 @@ function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactE
fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<DownloadCSVButton data={budgetResponse} filename="budget_data.csv"/>
<DownloadExcelButton data={budgetResponse} filename="budget_data.xlsx"/>
<DownloadDataButton data={budgetResponse} filename="budget_data.csv" exportType={ExportType.CSV}/>
<DownloadDataButton data={budgetResponse} filename="budget_data.xlsx" exportType={ExportType.EXCEL}/>
</Row>
<Row>
<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 { 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 { createChargingStructureDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import {ChargingStructure, FilterSelection} from "../Schema";
import {
createChargingStructureDataLookup,
getYearsAndNrens,
loadDataWithFilterSelectionFallback
} from "../helpers/dataconversion";
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";
import DownloadExcelButton from "../components/DownloadExcelButton";
import {ExportType, Sections} from "../helpers/constants";
import DownloadDataButton from "../components/DownloadDataButton";
ChartJS.register(
......@@ -59,8 +62,8 @@ function ChargingStructurePage({ filterSelection, setFilterSelection }: inputPro
category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<DownloadCSVButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv"/>
<DownloadExcelButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.xlsx"/>
<DownloadDataButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.csv" exportType={ExportType.CSV}/>
<DownloadDataButton data={chargingStructureData} filename="charging_mechanism_of_nrens_per_year.xlsx" exportType={ExportType.EXCEL} />
</Row>
<Table className="charging-struct-table" striped bordered responsive>
<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 { ECProject, FilterSelection } from "../Schema";
import { createECProjectsDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from '../helpers/dataconversion';
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";
import DownloadExcelButton from "../components/DownloadExcelButton";
import {ExportType, Sections} from '../helpers/constants';
import DownloadDataButton from "../components/DownloadDataButton";
interface inputProps {
......@@ -63,8 +66,8 @@ function ECProjects({ filterSelection, setFilterSelection }: inputProps) {
category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<DownloadCSVButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv"/>
<DownloadExcelButton data={projectData} filename="nren_involvement_in_european_commission_projects.xlsx"/>
<DownloadDataButton data={projectData} filename="nren_involvement_in_european_commission_projects.csv" exportType={ExportType.CSV}/>
<DownloadDataButton data={projectData} filename="nren_involvement_in_european_commission_projects.xlsx" exportType={ExportType.EXCEL}/>
</Row>
<Table borderless className='compendium-table'>
<thead>
......
compendium-frontend/src/pages/FundingSource.tsx
+ 14
− 11
View file @ ffb0cce5
import React, { useEffect, useMemo, useState } from 'react';
import { Bar } from 'react-chartjs-2';
import { Col, Row } from "react-bootstrap";
import { Chart as ChartJS } from 'chart.js';
import React, {useEffect, useMemo, useState} from 'react';
import {Bar} from 'react-chartjs-2';
import {Col, Row} from "react-bootstrap";
import {Chart as ChartJS} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { FundingSource, FilterSelection } from "../Schema";
import { createFundingSourceDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import {FilterSelection, FundingSource} from "../Schema";
import {
createFundingSourceDataset,
getYearsAndNrens,
loadDataWithFilterSelectionFallback
} from "../helpers/dataconversion";
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants';
import {ExportType, Sections} from '../helpers/constants';
import ColorBadge from '../components/ColorBadge';
import DownloadCSVButton from "../components/DownloadCSVButton";
import DownloadExcelButton from "../components/DownloadExcelButton";
import DownloadDataButton from "../components/DownloadDataButton";
export const chartOptions = {
maintainAspectRatio: false,
......@@ -158,8 +161,8 @@ function FundingSourcePage({ filterSelection, setFilterSelection }: inputProps)
category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<DownloadCSVButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv"/>
<DownloadExcelButton data={fundingSourceData} filename="income_source_of_nren_per_year.xlsx"/>
<DownloadDataButton data={fundingSourceData} filename="income_source_of_nren_per_year.csv" exportType={ExportType.CSV}/>
<DownloadDataButton data={fundingSourceData} filename="income_source_of_nren_per_year.xlsx" exportType={ExportType.EXCEL}/>
</Row>
<div>
<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 { Organisation, FilterSelection } from "../Schema";
import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import {FilterSelection, Organisation} 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";
import DownloadExcelButton from "../components/DownloadExcelButton";
import {ExportType, Sections} from '../helpers/constants';
import DownloadDataButton from "../components/DownloadDataButton";
function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
......@@ -58,8 +61,8 @@ function ParentOrganisation({ filterSelection, setFilterSelection }: inputProps)
category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<DownloadCSVButton data={organisationData} filename="nren_parent_organisations.csv"/>
<DownloadExcelButton data={organisationData} filename="nren_parent_organisations.xlsx"/>
<DownloadDataButton data={organisationData} filename="nren_parent_organisations.csv" exportType={ExportType.CSV}/>
<DownloadDataButton data={organisationData} filename="nren_parent_organisations.xlsx" exportType={ExportType.EXCEL}/>
</Row>
<Table borderless className='compendium-table'>
<thead>
......
compendium-frontend/src/pages/StaffGraph.tsx
+ 10
− 11
View file @ ffb0cce5
import React, { useEffect, useMemo, useState } from 'react';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import React, {useEffect, useMemo, useState} from 'react';
import {Bar} from 'react-chartjs-2';
import {BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip} from 'chart.js';
import { NrenStaff, FilterSelection } from "../Schema";
import { createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import {FilterSelection, NrenStaff} from "../Schema";
import {createNRENStaffDataset, getYearsAndNrens, loadDataWithFilterSelectionFallback} from "../helpers/dataconversion";
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter"
import { Sections } from '../helpers/constants';
import {ExportType, Sections} from '../helpers/constants';
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";
import DownloadDataButton from "../components/DownloadDataButton";
ChartJS.register(
CategoryScale,
......@@ -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 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 (
<DataPage title={title}
description={description}
category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<DownloadCSVButton data={staffData} filename={filename}/>
<DownloadExcelButton data={staffData} filename={filename}/>
<DownloadDataButton data={staffData} filename={filename} exportType={ExportType.CSV}/>
<DownloadDataButton data={staffData} filename={filename} exportType={ExportType.EXCEL}/>
</Row>
<WithLegend>
<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 { Organisation, FilterSelection } from "../Schema";
import { createOrganisationDataLookup, getYearsAndNrens, loadDataWithFilterSelectionFallback } from "../helpers/dataconversion";
import {FilterSelection, Organisation} 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";
import DownloadExcelButton from "../components/DownloadExcelButton";
import {ExportType, Sections} from '../helpers/constants';
import DownloadDataButton from "../components/DownloadDataButton";
function getJSXFromMap(data: Map<string, Map<number, Organisation[]>>) {
......@@ -63,8 +66,8 @@ function SubOrganisation({ filterSelection, setFilterSelection }: inputProps) {
category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<DownloadCSVButton data={organisationData} filename="nren_suborganisations.csv"/>
<DownloadExcelButton data={organisationData} filename="nren_suborganisations.xlsx"/>
<DownloadDataButton data={organisationData} filename="nren_suborganisations.csv" exportType={ExportType.CSV}/>
<DownloadDataButton data={organisationData} filename="nren_suborganisations.xlsx" exportType={ExportType.EXCEL}/>
</Row>
<Table borderless className='compendium-table'>
<thead>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment