Skip to content
Snippets Groups Projects
Commit e3fcab93 authored by Bjarke Madsen's avatar Bjarke Madsen
Browse files

Minor touchups

parent 5baca287
No related branches found
No related tags found
1 merge request!134Refactor
import React, { ReactElement } from "react"; import React, { ReactElement, useEffect } from "react";
import { Container, Row } from "react-bootstrap"; import { Container, Row } from "react-bootstrap";
import OrganizationSidebar from "./sidebar/OrganizationSidebar"; import OrganizationSidebar from "./sidebar/OrganizationSidebar";
...@@ -14,6 +14,7 @@ import ConnectedUsersSidebar from "./sidebar/ConnectedUsersSidebar"; ...@@ -14,6 +14,7 @@ import ConnectedUsersSidebar from "./sidebar/ConnectedUsersSidebar";
import ServicesSidebar from "./sidebar/ServicesSidebar"; import ServicesSidebar from "./sidebar/ServicesSidebar";
import DownloadContainer from "./download/DownloadContainer"; import DownloadContainer from "./download/DownloadContainer";
import useMatomo from "../matomo/UseMatomo"; import useMatomo from "../matomo/UseMatomo";
import { NrenAndYearDatapoint } from "../Schema";
ChartJS.defaults.font.size = 16; ChartJS.defaults.font.size = 16;
...@@ -26,8 +27,8 @@ interface inputProps { ...@@ -26,8 +27,8 @@ interface inputProps {
filter: ReactElement, filter: ReactElement,
children: ReactElement, children: ReactElement,
category: Sections, category: Sections,
data?: any, data: NrenAndYearDatapoint[],
filename?: string, filename: string,
} }
function DataPage({ title, description, filter, children, category, data, filename }: inputProps): ReactElement { function DataPage({ title, description, filter, children, category, data, filename }: inputProps): ReactElement {
...@@ -36,11 +37,11 @@ function DataPage({ title, description, filter, children, category, data, filena ...@@ -36,11 +37,11 @@ function DataPage({ title, description, filter, children, category, data, filena
const { trackPageView } = useMatomo() const { trackPageView } = useMatomo()
React.useEffect(() => { useEffect(() => {
trackPageView({ trackPageView({
documentTitle: title documentTitle: title
}) })
}, [trackPageView]) }, [trackPageView, title])
return ( return (
<> <>
...@@ -61,10 +62,10 @@ function DataPage({ title, description, filter, children, category, data, filena ...@@ -61,10 +62,10 @@ function DataPage({ title, description, filter, children, category, data, filena
<Row> <Row>
<p className="p-md-4">{description}</p> <p className="p-md-4">{description}</p>
</Row> </Row>
{data && filename &&
<Row align="right" style={{ position: 'relative' }}> <Row align="right" style={{ position: 'relative' }}>
<DownloadContainer data={data} filename={filename} /> <DownloadContainer data={data} filename={filename} />
</Row>} </Row>
<Row> <Row>
{filter} {filter}
</Row> </Row>
......
...@@ -3,8 +3,13 @@ import DownloadDataButton from "./DownloadDataButton"; ...@@ -3,8 +3,13 @@ import DownloadDataButton from "./DownloadDataButton";
import DownloadImageChartButton from "./DownloadImageChartButton"; import DownloadImageChartButton from "./DownloadImageChartButton";
import { ExportType } from "../../helpers/constants"; import { ExportType } from "../../helpers/constants";
import { NrenAndYearDatapoint } from "../../Schema";
const DownloadContainer = ({ data, filename }) => { interface DownloadProps {
data: NrenAndYearDatapoint[];
filename: string;
}
const DownloadContainer = ({ data, filename }: DownloadProps) => {
return <div className="downloadcontainer"> return <div className="downloadcontainer">
<DownloadDataButton data={data} filename={`${filename}.csv`} exportType={ExportType.CSV} /> <DownloadDataButton data={data} filename={`${filename}.csv`} exportType={ExportType.CSV} />
<DownloadDataButton data={data} filename={`${filename}.xlsx`} exportType={ExportType.EXCEL} /> <DownloadDataButton data={data} filename={`${filename}.xlsx`} exportType={ExportType.EXCEL} />
......
...@@ -2,16 +2,17 @@ import React from 'react'; ...@@ -2,16 +2,17 @@ import React from 'react';
import * as XLSX from "xlsx"; import * as XLSX from "xlsx";
import { ExportType } from "../../helpers/constants"; import { ExportType } from "../../helpers/constants";
import { FaDownload } from 'react-icons/fa'; import { FaDownload } from 'react-icons/fa';
import { NrenAndYearDatapoint } from '../../Schema';
interface DownloadProps { interface DownloadProps {
data: any[]; data: NrenAndYearDatapoint[];
filename: string; filename: string;
exportType: ExportType; exportType: ExportType;
} }
function createCSVRows(jsonData: any[], header: string[]): string[] { function createCSVRows(jsonData: NrenAndYearDatapoint[], header: string[]): string[] {
return jsonData.map(obj => { return jsonData.map(obj => {
return header.map(fieldName => { return header.map(fieldName => {
const value = obj[fieldName]; const value = obj[fieldName];
...@@ -31,7 +32,7 @@ function createCSVRows(jsonData: any[], header: string[]): string[] { ...@@ -31,7 +32,7 @@ function createCSVRows(jsonData: any[], header: string[]): string[] {
} }
function convertToCSV(jsonData: any[]): string { function convertToCSV(jsonData: NrenAndYearDatapoint[]): string {
if (!jsonData.length) return ""; if (!jsonData.length) return "";
const header = Object.keys(jsonData[0]); const header = Object.keys(jsonData[0]);
...@@ -41,7 +42,7 @@ function convertToCSV(jsonData: any[]): string { ...@@ -41,7 +42,7 @@ 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 { function convertToExcel(jsonData: NrenAndYearDatapoint[], sheetName = "Sheet1"): Blob {
const ws = XLSX.utils.json_to_sheet(jsonData); const ws = XLSX.utils.json_to_sheet(jsonData);
const wb = XLSX.utils.book_new(); const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, sheetName); XLSX.utils.book_append_sheet(wb, ws, sheetName);
......
...@@ -38,7 +38,7 @@ export function useData<Datatype extends NrenAndYearDatapoint>(url, setFilterSel ...@@ -38,7 +38,7 @@ export function useData<Datatype extends NrenAndYearDatapoint>(url, setFilterSel
return { selectedYears: newSelectedYears, selectedNrens: newSelectedNrens }; return { selectedYears: newSelectedYears, selectedNrens: newSelectedNrens };
}); });
}); });
}, [loadUrl, setFilterSelection]); }, [loadUrl, setFilterSelection]); // eslint-disable-line react-hooks/exhaustive-deps
const { years, nrens } = useMemo( const { years, nrens } = useMemo(
() => getYearsAndNrens(data), () => getYearsAndNrens(data),
......
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment