Skip to content
Snippets Groups Projects

Refactor remaining pages & improvements

Merged Bjarke Madsen requested to merge FixPills into develop
9 files
+ 160
396
Compare changes
  • Side-by-side
  • Inline
Files
9
import React, { useContext } from "react";
import { Table } from "react-bootstrap";
import { AlienWave } from "../../Schema";
import { createNrenTableLookup } from "../../helpers/dataconversion";
import ColorPill from "../../components/ColorPill";
import { createNrenTableLookup, addTooltip } from "../../helpers/dataconversion";
import DataPage from "../../components/DataPage";
import Filter from "../../components/graphing/Filter";
import { Sections } from "../../helpers/constants";
import { FilterSelectionContext } from "../../providers/FilterSelectionProvider";
import ChartContainer from "../../components/graphing/ChartContainer";
import { useData } from "../../helpers/useData";
import PillTable from "../../components/PillTable";
function AlienWavePage(): React.ReactElement {
const dataField = 'alien_wave_third_party';
const validityCheck = (data: AlienWave) => data[dataField] !== null;
const { filterSelection, setFilterSelection } = useContext(FilterSelectionContext);
const { data: pertTeamData, years, nrens } = useData<AlienWave>('/api/network/alien-wave', setFilterSelection);
const { data, years, nrens } = useData<AlienWave>('/api/network/alien-wave', setFilterSelection, validityCheck);
const selectedData = (pertTeamData).filter(data =>
const selectedData = data.filter(data =>
filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
);
const dataLookup = createNrenTableLookup(selectedData, 'alien_wave_third_party');
const dataLookup = createNrenTableLookup(selectedData, dataField);
const withTooltip = addTooltip(dataLookup, 'nr_of_alien_wave_third_party_services', undefined, 'No. of alien wavelength services: ');
const columns = [
"Yes",
"Planned",
"No",
]
const columnValueMap = new Map<string, string>([
[columns[0], "yes"],
[columns[1], "planned"],
[columns[2], "no"],
]);
const filterNode = <Filter
filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
@@ -28,8 +42,6 @@ function AlienWavePage(): React.ReactElement {
coloredYears
/>
const showYears = [...filterSelection.selectedYears.filter(year => years.has(year))].sort();
return (
<DataPage title="NREN Use of 3rd Party Alienwave/Lightpath Services"
description="The table below shows NREN usage of alien wavelength or lightpath services provided by third parties.
@@ -43,51 +55,9 @@ function AlienWavePage(): React.ReactElement {
box. These are indicated by a black line around the coloured marker."
category={Sections.Network} filter={filterNode}
data={selectedData} filename="alien_wave_nrens_per_year">
<>
<ChartContainer>
<Table className="charging-struct-table" striped bordered >
<colgroup>
<col span={1} style={{ width: "25%" }} />
<col span={1} style={{ width: "25%" }} />
<col span={1} style={{ width: "25%" }} />
<col span={1} style={{ width: "25%" }} />
</colgroup>
<thead>
<tr>
<th></th>
<th>Yes</th>
<th>Planned</th>
<th>No</th>
</tr>
</thead>
<tbody>
{Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
<tr key={nren}>
<td>{nren}</td>
{["yes",
"planned",
"no"].map(column_key => (
<td key={column_key}>
{nrenMap.has(column_key) &&
showYears.map(year => {
const chargingYears = nrenMap.get(column_key)!;
const alienWaveInfo = chargingYears.get(year);
return <ColorPill key={year} year={year} active={chargingYears.has(year)}
tooltip={
alienWaveInfo?.nr_of_alien_wave_third_party_services != null
? `No. of Individual alien wavelength services: ${alienWaveInfo.nr_of_alien_wave_third_party_services}`
: ""
} />;
})
}
</td>
))}
</tr>
))}
</tbody>
</Table>
</ChartContainer>
</>
<ChartContainer>
<PillTable columns={columns} columnLookup={columnValueMap} dataLookup={withTooltip} />
</ChartContainer>
</DataPage>
);
}
Loading