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

import React, { useEffect } from 'react';
import {
    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';

const useStyles = makeStyles((theme) => ({
    root: {
        padding: 0,
        margin: 0,
    },
    formControl: {
        margin: theme.spacing(2),
    },
    chart: {
        width: 0,
    }
}));

export default function Chart(props) {
    const classes = useStyles();
    const [data, setData] = React.useState(props.data);
    const [state, setState] = React.useState({
        q0: true,
        q1: true,
        q2: true,
        q3: true,
        q4: true,
        q5: true,
        q6: true,
        q7: true,
    });
    const [lines, setLines] = React.useState([])
    useEffect(() => {
        if (data !== props.data) {
            setData(props.data)
        }
    }, [data, setData, props.data]);
    useEffect(() => {
        var output = []
        const colors = ["#8884d8", "#000000", "#82ca9d", "#ff0066", "#660066", "#99cc00", "#669999", "#996633"]
        for (var i = 0; i < 8; i++) {
            if (state["q" + i]) {
                output.push(
                    <Line type="monotone" dataKey={"q" + i} stroke={colors[i]} dot={false} />
                )
            }
        }
        setLines(output)
    }, [state, setLines])



    const handleChange = (event) => {
        setState({ ...state, [event.target.name]: event.target.checked })
    };

    const { q0, q1, q2, q3, q4, q5, q6, q7 } = state;

    return (
        <Grid container spacing={2} className={classes.root}>
            <Grid item xs={12} className={classes.chart}>
                <ResponsiveContainer width="99%" height={300}>
                    <LineChart
                        data={data}
                        margin={{
                            top: 5, right: 0, left: 0, bottom: 5,
                        }}
                    >
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="time" />
                        <YAxis domain={['datamin', 'datamax']} />
                        <Tooltip />
                        <Legend />
                        {lines}
                    </LineChart>
                </ResponsiveContainer>



            </Grid>
            <Grid item xs={12}>
                <FormControl component="fieldset" className={classes.formControl}>
                    <FormLabel component="legend">Select Qualities:</FormLabel>
                    <FormGroup row>
                        <FormControlLabel
                            control={<Checkbox checked={q0} onChange={handleChange} name="q0" />}
                            label="q0"
                        />
                        <FormControlLabel
                            control={<Checkbox checked={q1} onChange={handleChange} name="q1" />}
                            label="q1"
                        />
                        <FormControlLabel
                            control={<Checkbox checked={q2} onChange={handleChange} name="q2" />}
                            label="q2"
                        />
                        <FormControlLabel
                            control={<Checkbox checked={q3} onChange={handleChange} name="q3" />}
                            label="q3"
                        />
                        <FormControlLabel
                            control={<Checkbox checked={q4} onChange={handleChange} name="q4" />}
                            label="q4"
                        />
                        <FormControlLabel
                            control={<Checkbox checked={q5} onChange={handleChange} name="q5" />}
                            label="q5"
                        />
                        <FormControlLabel
                            control={<Checkbox checked={q6} onChange={handleChange} name="q6" />}
                            label="q6"
                        />
                        <FormControlLabel
                            control={<Checkbox checked={q7} onChange={handleChange} name="q7" />}
                            label="q7"
                        />
                    </FormGroup>
                </FormControl>
            </Grid>
        </Grid >

    );
}