added quality selection close #28

frontend/src/components/resourcechart/chart.js

@@ -0,0 +1,125 @@
+import React, { useEffect } from 'react';
+import {
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+} 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: {
+        display: 'flex',
+    },
+    formControl: {
+        margin: theme.spacing(2),
+    },
+}));
+
+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(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}>
+            <Grid item xs={12}>
+                <LineChart
+                    width={900}
+                    height={300}
+                    data={data}
+                    margin={{
+                        top: 5, right: 30, left: 20, bottom: 5,
+                    }}
+                >
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="time" />
+                    <YAxis domain={['datamin', 'datamax']} />
+                    <Tooltip />
+                    <Legend />
+                    {lines}
+                </LineChart>
+            </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>
+
+    );
+}

frontend/src/components/resourcechart/resourcechart.js

@@ -12,6 +12,7 @@ import Typography from '@material-ui/core/Typography';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Button from '@material-ui/core/Button';
+import Chart from './chart';
 
 const useStyles = makeStyles((theme) => ({
     root: {
@@ -25,32 +26,11 @@ const useStyles = makeStyles((theme) => ({
 const output = (data) => {
     if (data === null) {
         return (
-            <CircularProgress color="secondary" />
+            <CircularProgress color="secondary" disableShrink />
         )
     } else {
         return (
-            <LineChart
-                width={900}
-                height={300}
-                data={data}
-                margin={{
-                    top: 5, right: 30, left: 20, bottom: 5,
-                }}
-            >
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="time" interval="2" />
-                <YAxis domain={['datamin', 'datamax']} />
-                <Tooltip />
-                <Legend />
-                <Line type="monotone" dataKey="q0" stroke="#8884d8" dot={false} />
-                <Line type="monotone" dataKey="q1" stroke="#000000" dot={false} />
-                <Line type="monotone" dataKey="q2" stroke="#82ca9d" dot={false} />
-                <Line type="monotone" dataKey="q3" stroke="#ff0066" dot={false} />
-                <Line type="monotone" dataKey="q4" stroke="#660066" dot={false} />
-                <Line type="monotone" dataKey="q5" stroke="#99cc00" dot={false} />
-                <Line type="monotone" dataKey="q6" stroke="#669999" dot={false} />
-                <Line type="monotone" dataKey="q7" stroke="#996633" dot={false} />
-            </LineChart>
+            <Chart data={data}></Chart>
         )
     }
 }
@@ -103,7 +83,6 @@ export default function ResourceChart(props) {
             qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]);
             qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString();
         }
-        console.log(qualitySortedData);
         setData(qualitySortedData)
     }
 
@@ -134,7 +113,6 @@ export default function ResourceChart(props) {
                     </Card>
                 </Grid>
             </Grid>
-
         </div>
     );
 }