ChargingStructure.tsx

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;