[COMP-370] : NREN Traffic Volume

compendium-frontend/src/App.tsx

@@ -14,10 +14,9 @@ import ParentOrganisation from "./pages/ParentOrganisation";
 import ECProjects from "./pages/ECProjects";
 import Providers from "./Providers";
 import PolicyPage from "./pages/Policy";
-import TrafficVolumePage from "./pages/TrafficVolumePerNren";
 import ConnectedInstitutionsURLs from "./pages/ConnectedInstitutionsURLs";
 import ServicesPage from "./pages/Services";
-import {ConnectivityCategory, ServiceCategory} from "./Schema";
+import { ConnectivityCategory, ServiceCategory } from "./Schema";
 import ConnectedUserPage from "./pages/ConnectedUser";
 import FibreLightPage from "./pages/FibreLight";
 import MonitoringToolsPage from "./pages/MonitoringTools";
@@ -42,6 +41,7 @@ import SNPStandardsBusinessContinuityPage from "./pages/SNPStandardsBusinessCont
 import SNPStandardsCrisisExercisesPage from "./pages/SNPStandardsCrisisExercises";
 import SNPStandardsCrisisManagementPage from "./pages/SNPStandardsCrisisManagement";
 import SNPStandardsSecurityControlsPage from "./pages/SNPStandardsSecurityControl";
+import NetworkTrafficVolumePage from "./pages/NetworkTrafficVolume";
 
 
 const router = createBrowserRouter([
@@ -55,7 +55,7 @@ const router = createBrowserRouter([
   { path: "/parentorganisation", element: <ParentOrganisation /> },
   { path: "/ec-projects", element: <ECProjects /> },
   { path: "/policy", element: <PolicyPage /> },
-  { path: "/traffic-volume", element: <TrafficVolumePage /> },
+  { path: "/traffic-volume", element: <NetworkTrafficVolumePage /> },
   { path: "/data", element: <CompendiumData /> },
   { path: "/institutions-urls", element: <ConnectedInstitutionsURLs /> },
   { path: "/connected-proportion", element: <ConnectedUserPage connectivity_category={ConnectivityCategory.ConnectedProportion.toString()} /> },

compendium-frontend/src/pages/NetworkTrafficVolume.tsx

+import React, { ReactElement, useContext } from 'react';
+import { Row, Col } from "react-bootstrap";
+import { Line } from 'react-chartjs-2';
+
+
+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend,
+} from 'chart.js';
+
+import { TrafficVolume } from "../Schema";
+import { createNetworkDarkFibreDataLookUp } from "../helpers/dataconversion";
+import DataPage from '../components/DataPage';
+import Filter from "../components/graphing/Filter";
+import { Sections } from '../helpers/constants';
+import { FilterSelectionContext } from '../helpers/FilterSelectionProvider';
+import ChartContainer from "../components/graphing/ChartContainer";
+import { useData } from '../helpers/useData';
+
+
+const options = {
+    responsive: true,
+    elements: {
+        point: {
+            pointStyle: 'circle',
+            pointRadius: 4,
+            pointBorderWidth: 2,
+            pointBorderColor: (context) => context.dataset.borderColor,
+            pointBackgroundColor: 'white',
+        },
+    },
+    animation: {
+        duration: 0
+    },
+    plugins: {
+        legend: {
+            display: false,
+            position: 'top' as const,
+            onClick: () => { /* intentionally empty */ },
+        },
+        title: {
+            display: false,
+            text: '',
+        },
+        tooltip: {
+            callbacks: {
+                label: (context) => {
+                    let tooltipLines: string[] = [];
+                    const datasetLabel = context.dataset.label || '';
+                    const dataPoint = context.parsed.y;
+
+                    if (dataPoint !== null) {
+                        tooltipLines.push(` ${dataPoint}   ${datasetLabel}`);
+                        // tooltipLines.push('Additional information about this data point');
+                    }
+
+                    return tooltipLines.length > 0 ? tooltipLines : '';
+                },
+            },
+        },
+    },
+    scales: {
+        y: {
+            ticks: {
+                callback: (value: string | number) => {
+                    return `${value}`;
+                },
+            },
+        },
+    },
+
+
+};
+
+ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend
+);
+
+
+function NetworkTrafficVolumePage(): ReactElement {
+
+    const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
+    const { data: trafficVolumeResponse, years, nrens } = useData<TrafficVolume>('/api/traffic/', setFilterSelection);
+
+    const fromCustomerTrafficVolumeData = createNetworkDarkFibreDataLookUp(trafficVolumeResponse, 'from_customers');
+    const toCustomerTrafficVolumeData = createNetworkDarkFibreDataLookUp(trafficVolumeResponse, 'to_customers');
+    const fromExternalTrafficVolumeData = createNetworkDarkFibreDataLookUp(trafficVolumeResponse, 'from_external');
+    const toExternalTrafficVolumeData = createNetworkDarkFibreDataLookUp(trafficVolumeResponse, 'to_external');
+
+    const selectedData = trafficVolumeResponse.filter(data =>
+        filterSelection.selectedNrens.includes(data.nren) // we only allow filtering nrens for this page
+    );
+
+    fromCustomerTrafficVolumeData.datasets.forEach(dataset => {
+        dataset.hidden = !filterSelection.selectedNrens.includes(dataset.label);
+    });
+
+    toCustomerTrafficVolumeData.datasets.forEach(dataset => {
+        dataset.hidden = !filterSelection.selectedNrens.includes(dataset.label);
+    });
+
+    fromExternalTrafficVolumeData.datasets.forEach(dataset => {
+        dataset.hidden = !filterSelection.selectedNrens.includes(dataset.label);
+    });
+
+    toExternalTrafficVolumeData.datasets.forEach(dataset => {
+        dataset.hidden = !filterSelection.selectedNrens.includes(dataset.label);
+    });
+
+
+    const filterNode = <Filter
+        filterOptions={{ availableYears: [], availableNrens: [...nrens.values()] }}
+        filterSelection={filterSelection}
+        setFilterSelection={setFilterSelection}
+    />
+
+    return (
+        <DataPage title="NREN Traffic - NREN Customers & External Networks"
+            description={<span>The four graphs below show the estimates of total annual traffic in Terabytes to & from NREN customers,
+                and to & from external networks. NREN customers are taken to mean sources that are part of the NREN's connectivity remit,
+                while external networks are understood as outside sources including GÉANT, the general/commercial internet, internet
+                exchanges, peerings, other NRENs, etc.</span>} category={Sections.Network} filter={filterNode}
+            data={selectedData} filename="budget_data">
+            <>
+                <Row>
+
+                    <ChartContainer>
+                        <Row style={{ marginBottom: '30px' }}>
+                            <Col>
+                                <span style={{ fontSize: '20px', color: 'rgb(85, 96, 156)', fontWeight: 'bold' }}>Traffic from NREN customer</span>
+                                <Line data={fromCustomerTrafficVolumeData} options={options} />
+                            </Col>
+                            <Col>
+                                <span style={{ fontSize: '20px', color: 'rgb(221, 100, 57)', fontWeight: 'bold' }}>Traffic to NREN customer</span>
+                                <Line data={toCustomerTrafficVolumeData} options={options} />
+                            </Col>
+                        </Row>
+                        <Row style={{ marginTop: '30px' }}>
+                            <Col>
+                                <span style={{ fontSize: '20px', color: 'rgb(63, 143, 77)', fontWeight: 'bold' }}>Traffic from external network</span>
+                                <Line data={fromExternalTrafficVolumeData} options={options} />
+                            </Col>
+                            <Col>
+                                <span style={{ fontSize: '20px', color: 'rgb(173, 48, 51)', fontWeight: 'bold' }}>Traffic to external network</span>
+                                <Line data={toExternalTrafficVolumeData} options={options} />
+                            </Col>
+                        </Row>
+                    </ChartContainer>
+                </Row>
+            </>
+        </DataPage>
+    );
+}
+
+export default NetworkTrafficVolumePage;