DataAnalysis.tsx

import React, {ReactElement, useEffect, useState} from 'react';
import {Accordion, Col, Container, Form, ListGroup, Row} from "react-bootstrap";
import BarGraph from "../components/graphing/BarGraph";
import LineGraph from "../components/graphing/LineGraph";
import {DataSetProps} from "../components/graphing/types";


import {BudgetMatrix, DataEntrySection} from "../Schema";


export const options = {
    // indexAxis: 'y' as const,
    responsive: true,
    plugins: {
        legend: {
            position: 'top' as const,
        },
        title: {
            display: true,
            text: 'Loading...',
        },
    },
};
function DataAnalysis(): ReactElement {

    function api<T>(url: string, options: RequestInit): Promise<T> {
        return fetch(url, options)
            .then((response) => {
                if (!response.ok) {
                    return response.text().then((message) => {
                        console.error(`Failed to load datax: ${message}`, response.status);
                        throw new Error("The data could not be loaded, check the logs for details.");
                    });
                }

                return response.json() as Promise<T>;
            })
    }

    const [budgetResponse, setBudgetMatrix] = useState<BudgetMatrix>();
    const [dataEntrySection, setDataEntrySection] = useState<DataEntrySection>();
    const [selectedDataEntry, setSelectedDataEntry] = useState<number>(0);

    // const [services, setServices] = useState<Service[][]>();

    useEffect(() => {
        // let timeoutRef = 0;
        const getDataEntries = () => {
            api<DataEntrySection>('/api/data-entries/sections/1', {
                referrerPolicy: "unsafe-url",
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "text/plain"
                }
            }).then( (dataEntrySectionResponse: DataEntrySection) => {
                setDataEntrySection(dataEntrySectionResponse);
            })
        }
        const loadData = () => {
            if (selectedDataEntry == 0) {
                getDataEntries();
                return;
            }

            api<BudgetMatrix>('/api/data-entries/item/' + selectedDataEntry,{
                referrerPolicy: "unsafe-url",
                headers: {
                    "Access-Control-Allow-Origin": "*",
                    "Content-Type": "text/plain"
                }
            })
                .then((budgetMatrix :BudgetMatrix)=>{
                    options.plugins.title.text = budgetMatrix.title;
                    setBudgetMatrix(budgetMatrix)
                })

        }
        loadData()
    }, [selectedDataEntry]);

    const renderEntries = () => {
        return (
            <ul>

            </ul>
        );
    };
    const empty_bar_response = {
    'data': {
        'datasets': [
            {
                'backgroundColor':'',
                'data':[],
                'label':''
        }],
        'labels':[]
    },
    'description': "",
    'id': "",
    'settings':{},
    'title':''
}

const barResponse: BudgetMatrix = budgetResponse !== undefined ? budgetResponse : empty_bar_response;
    const data: DataSetProps = {
        data: {
            datasets: [
                {
                    backgroundColor: '#114466',
                    borderColor: '#114466',
                    data: [10, 13, 18,21,16,12],
                    label: '2016'
                },
                {
                    backgroundColor: '#FF4466',
                    borderColor: '#FF4466',
                    data: [15, null, 13,11,11,44],
                    label: '2017'
                },
            ],
            labels: ['AB', 'BC', 'CD', 'DE', 'EF', 'FE']
        }
    }

    return (
        <div>
            <h1>Data Analysis</h1>
            <Container>
                <Row>
                    <Col>
                        <Row>
                            <BarGraph data={barResponse.data} />
                        </Row>
                        <Row>
                            <LineGraph data={barResponse.data} />
                        </Row>
                        <Row>{budgetResponse?.description}</Row>

                    </Col>
                    <Col xs={3}>
                        <Accordion defaultActiveKey="0">
                            <Accordion.Item eventKey="0">
                                <Accordion.Header>Items</Accordion.Header>
                                <Accordion.Body>
                                    <ListGroup>
                                        {
                                            dataEntrySection?.items.map((item) => (
                                                <ListGroup.Item key={item.id} action onClick={() => setSelectedDataEntry(item.id)}>{item.title}</ListGroup.Item>
                                            ))
                                        }
                                    </ListGroup>
                                </Accordion.Body>
                            </Accordion.Item>
                        </Accordion>
                    </Col>
                </Row>


            </Container>
        </div>
    );
}

export default DataAnalysis;