-
Bjarke Madsen authored
use common margins
Bjarke Madsen authoreduse common margins
DataPage.tsx 2.87 KiB
import React, { ReactElement, useEffect } from "react";
import { Container, Row } from "react-bootstrap";
import OrganizationSidebar from "./sidebar/OrganizationSidebar";
import PageHeader from "../components/global/PageHeader"
import SectionNavigation from "./SectionNavigation";
import { Sections } from "../helpers/constants";
import PolicySidebar from "./sidebar/PolicySidebar";
import { Chart as ChartJS } from 'chart.js';
import { usePreview } from "../helpers/usePreview";
import NetworkSidebar from "./sidebar/NetworkSidebar";
import ConnectedUsersSidebar from "./sidebar/ConnectedUsersSidebar";
import ServicesSidebar from "./sidebar/ServicesSidebar";
import DownloadContainer from "./download/DownloadContainer";
import useMatomo from "../matomo/UseMatomo";
import { NrenAndYearDatapoint } from "../Schema";
ChartJS.defaults.font.size = 16;
ChartJS.defaults.font.family = 'Open Sans';
ChartJS.defaults.font.weight = 700;
interface inputProps {
title: string,
description?: string | ReactElement,
filter: ReactElement,
children: ReactElement,
category: Sections,
data: NrenAndYearDatapoint[],
filename: string,
}
function DataPage({ title, description, filter, children, category, data, filename }: inputProps): ReactElement {
const preview = usePreview();
const locationWithoutPreview = window.location.origin + window.location.pathname;
const { trackPageView } = useMatomo()
useEffect(() => {
trackPageView({
documentTitle: title
})
}, [trackPageView, title])
return (
<>
{category === Sections.Organisation && <OrganizationSidebar />}
{category === Sections.Policy && <PolicySidebar />}
{category === Sections.Network && <NetworkSidebar />}
{category === Sections.ConnectedUsers && <ConnectedUsersSidebar />}
{category === Sections.Services && <ServicesSidebar />}
<PageHeader type={'data'} />
{preview && <Row className="preview-banner">
<span>You are viewing a preview of the website which includes pre-published survey data. <a href={locationWithoutPreview}>Click here</a> to deactivate preview mode.</span>
</Row>}
<SectionNavigation activeCategory={category} />
<Container className="mb-5 grow">
<Row>
<h3 className="m-1">{title}</h3>
</Row>
<Row>
<p className="p-md-4">{description}</p>
</Row>
<Row align="right" style={{ position: 'relative' }}>
<DownloadContainer data={data} filename={filename} />
</Row>
<Row>
{filter}
</Row>
<Row>
{children}
</Row>
</Container>
</>
);
}
export default DataPage;