Budget.tsx

import React, { ReactElement, useEffect, useMemo, useState } from 'react';
import { Row } from "react-bootstrap";

import { Budget, FilterSelection } from "../Schema";
import { createBudgetDataset, getYearsAndNrens, loadDataWithFilterNrenSelectionFallback } from "../helpers/dataconversion";
import DataPage from '../components/DataPage';
import Filter from "../components/graphing/Filter";
import LineGraph from "../components/graphing/LineGraph";
import {ExportType, Sections} from '../helpers/constants';
import DownloadDataButton from "../components/DownloadDataButton";

interface inputProps {
    filterSelection: FilterSelection
    setFilterSelection: React.Dispatch<React.SetStateAction<FilterSelection>>
}

function BudgetPage({ filterSelection, setFilterSelection }: inputProps): ReactElement {

    const [budgetResponse, setBudget] = useState<Budget[]>([]);

    const { nrens } = useMemo(
        () => getYearsAndNrens(budgetResponse),
        [budgetResponse]
    );

    const budgetData = createBudgetDataset(budgetResponse);

    budgetData.datasets.forEach(dataset => {
        dataset.hidden = !filterSelection.selectedNrens.includes(dataset.label);
    });

    useEffect(() => {
        loadDataWithFilterNrenSelectionFallback('/api/budget/', setBudget, setFilterSelection);
    }, [setFilterSelection]);

    const filterNode = <Filter
        filterOptions={{ availableYears: [], availableNrens: [...nrens.values()] }}
        filterSelection={filterSelection}
        setFilterSelection={setFilterSelection}
    />

    return (
        <DataPage title="Budget of NRENs per Year" 
        description='The graph shows the NRENs budget capita (in Million €) per year . 
        On hovering over the graphs data points will give NRENs budget share in that year.  This graph can be used to compare, selecting multiple NRENs to see the 
        fluctuation of budget over years and with other NRENs.' category={Sections.Organisation} filter={filterNode}>
            <>
                <Row>
                    <DownloadDataButton data={budgetResponse} filename="budget_data.csv" exportType={ExportType.CSV}/>
                    <DownloadDataButton data={budgetResponse} filename="budget_data.xlsx" exportType={ExportType.EXCEL}/>
                </Row>
                <Row>
                    <LineGraph data={budgetData} />
                </Row>
            </>
        </DataPage>
    );
}

export default BudgetPage;