dashboard/frontend/src/components/resourcechart/resourcechart.js

import React, { useEffect } from 'react';
import {
    useParams
} from "react-router-dom";
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Chart from './chart';
import FormHelperText from '@material-ui/core/FormHelperText';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import LinearProgress from '@material-ui/core/LinearProgress';

const useStyles = makeStyles((theme) => ({
    root: {
        display: 'flex',
    },
    card: {
        padding: 20
    }
}));

const output = (data) => {
    if (data === null) {
        return (
            null
        )
    } else {
        return (
            <Chart data={data}></Chart>
        )
    }
}

export default function ResourceChart(props) {
    const classes = useStyles();
    const [data, setData] = React.useState(null);
    const [interval, setInterval] = React.useState('day');
    const [loading, setLoading] = React.useState(null);
    let { id } = useParams();
    const loadData = async () => {
        if (loading === null) {
            setLoading(<LinearProgress />)
        }
        let dayData = await fetch(`/simcompanies/API/price/${interval}?kind=${id}`);
        let dataWithDate = await dayData.json();
        let qualitySortedData = [];
        for (let i = 0; i < dataWithDate.length; i++) {
            if (i === 0) qualitySortedData.push(dataWithDate[i]);
            else {
                if (dataWithDate[i]["time"] === qualitySortedData[qualitySortedData.length - 1]["time"]) {
                    switch (dataWithDate[i].quality) {
                        case 0:
                            break;
                        case 1:
                            qualitySortedData[qualitySortedData.length - 1]["q1"] = dataWithDate[i]["price"].toFixed(3);
                            break;
                        case 2:
                            qualitySortedData[qualitySortedData.length - 1]["q2"] = dataWithDate[i]["price"].toFixed(3);
                            break;
                        case 3:
                            qualitySortedData[qualitySortedData.length - 1]["q3"] = dataWithDate[i]["price"].toFixed(3);
                            break;
                        case 4:
                            qualitySortedData[qualitySortedData.length - 1]["q4"] = dataWithDate[i]["price"].toFixed(3);
                            break;
                        case 5:
                            qualitySortedData[qualitySortedData.length - 1]["q5"] = dataWithDate[i]["price"].toFixed(3);
                            break;
                        case 6:
                            qualitySortedData[qualitySortedData.length - 1]["q6"] = dataWithDate[i]["price"].toFixed(3);
                            break;
                        case 7:
                            qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"].toFixed(3);
                            break;
                        default:
                            break;
                    }
                } else {
                    qualitySortedData.push(dataWithDate[i]);
                    qualitySortedData[qualitySortedData.length - 1]["q0"] = qualitySortedData[qualitySortedData.length - 1]["price"].toFixed(3);
                }
            }
        }
        for (let i = 0; i < qualitySortedData.length; i++) {
            qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]);
            if (interval === "day") {
                qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString();
            } else if (interval === "week") {
                qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleString();
            } else {
                qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleDateString();
            }
        }
        setData(qualitySortedData)
        setLoading(null)
    }

    useEffect(() => {
        loadData()
    }, [interval])

    if (data === null) {
        loadData();
    }
    const handleChange = (event) => {
        setInterval(event.target.value);
    }
    return (
        <div className={classes.root}>
            <Grid container spacing={2}>
                <Grid item xs={12}>
                    <Typography variant="h4">
                        {props.location.state.name}
                    </Typography>
                </Grid>
                <Grid item xs={12}>
                    <Card className={classes.card}>


                        {loading}
                        <CardContent style={{ padding: 0 }}>
                            <Grid container spacing={2}>
                                {output(data)}
                                <Grid item>
                                    <FormControl style={{ margin: 20 }}>
                                        <Select
                                            id="select-interval"
                                            value={interval}
                                            onChange={handleChange}
                                        >
                                            <MenuItem value={"day"}>Day</MenuItem>
                                            <MenuItem value={"week"}>Week</MenuItem>
                                            <MenuItem value={"month"}>Month</MenuItem>
                                        </Select>
                                        <FormHelperText>Select Interval</FormHelperText>
                                    </FormControl>
                                </Grid >
                            </Grid >
                        </CardContent>
                    </Card>
                </Grid>
            </Grid>
        </div>
    );
}