-
Mohammad Torkashvand authoredMohammad Torkashvand authored
ChargingStructure.tsx 4.53 KiB
import React, {useMemo, useState} from "react";
import {Row, Table} from "react-bootstrap";
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 ColorPill from "../components/ColorPill";
import DataPage from "../components/DataPage";
import Filter from "../components/graphing/Filter";
import {ExportType, Sections} from "../helpers/constants";
import DownloadDataButton from "../components/DownloadDataButton";
ChartJS.register(
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
);
interface inputProps {
filterSelection: FilterSelection
setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
}
function ChargingStructurePage({ filterSelection, setFilterSelection }: inputProps): React.ReactElement {
const [chargingStructureData, setChargingStructureData] = useState<ChargingStructure[]>([]);
const { years, nrens } = useMemo(
() => getYearsAndNrens(chargingStructureData),
[chargingStructureData]
);
const selectedData = (chargingStructureData).filter(data =>
filterSelection.selectedYears.includes(data.year) && filterSelection.selectedNrens.includes(data.nren)
);
const dataLookup = createChargingStructureDataLookup(selectedData);
React.useEffect(() => {
loadDataWithFilterSelectionFallback('/api/charging/', setChargingStructureData, setFilterSelection);
}, [setFilterSelection]);
const filterNode = <Filter
filterOptions={{ availableYears: [...years], availableNrens: [...nrens.values()] }}
filterSelection={filterSelection}
setFilterSelection={setFilterSelection}
coloredYears
/>
return (
<DataPage title="Charging Mechanism of NRENs per Year"
description="The charging structure is the way in which NRENs charge their customers for the services they provide.
The charging structure can be based on a flat fee, usage based fee, a combination of both, or no direct charge.
By selecting multiple years and NRENs, the table can be used to compare the charging structure of NRENs."
category={Sections.Organisation} filter={filterNode}>
<>
<Row>
<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>
<col span={1} style={{width: "10%"}}/>
<col span={1} style={{width: "18%"}}/>
<col span={1} style={{width: "18%"}}/>
<col span={1} style={{width: "18%"}}/>
<col span={1} style={{width: "18%"}}/>
<col span={1} style={{width: "18%"}}/>
</colgroup>
<thead>
<tr>
<th></th>
<th>Flat fee based on bandwidth</th>
<th>Usage based fee</th>
<th>Combination flat fee & usage basedfee</th>
<th>No Direct Charge</th>
<th>Other</th>
</tr>
</thead>
<tbody>
{Array.from(dataLookup.entries()).map(([nren, nrenMap]) => (
<tr key={nren}>
<td>{nren}</td>
{["flat_fee", "usage_based_fee", "combination", "no_charge", "other"].map(discriminator => (
<td key={discriminator}>
{Array.from(nrenMap.entries()).map(([year, chargingMechanism]) => (
<ColorPill key={year} year={year} active={chargingMechanism == discriminator}/>
))}
</td>
))}
</tr>
))}
</tbody>
</Table>
</>
</DataPage>
);
}
export default ChargingStructurePage;