remove button and loading circle close #65

frontend/src/components/resourcechart/chart.js

@@ -64,7 +64,7 @@ export default function Chart(props) {
     const { q0, q1, q2, q3, q4, q5, q6, q7 } = state;
 
     return (
-        <Grid container spacing={2} className={classes.root}>
+        <React.Fragment>
             <Grid item xs={12} className={classes.chart}>
                 <ResponsiveContainer width="99%" height={300}>
                     <LineChart
@@ -81,11 +81,8 @@ export default function Chart(props) {
                         {lines}
                     </LineChart>
                 </ResponsiveContainer>
-
-
-
             </Grid>
-            <Grid item xs={12}>
+            <Grid item>
                 <FormControl component="fieldset" className={classes.formControl}>
                     <FormLabel component="legend">Select Qualities:</FormLabel>
                     <FormGroup row>
@@ -124,7 +121,6 @@ export default function Chart(props) {
                     </FormGroup>
                 </FormControl>
             </Grid>
-        </Grid >
-
+        </React.Fragment>
     );
 }

frontend/src/components/resourcechart/resourcechart.js

@@ -28,7 +28,7 @@ const useStyles = makeStyles((theme) => ({
 const output = (data) => {
     if (data === null) {
         return (
-            <CircularProgress color="secondary" disableShrink />
+            null
         )
     } else {
         return (
@@ -108,10 +108,6 @@ export default function ResourceChart(props) {
     if (data === null) {
         loadData();
     }
-
-    const handleClick = (e) => {
-        loadData()
-    }
     const handleChange = (event) => {
         setInterval(event.target.value);
     }
@@ -126,6 +122,12 @@ export default function ResourceChart(props) {
                 <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"
@@ -138,13 +140,9 @@ export default function ResourceChart(props) {
                                         </Select>
                                         <FormHelperText>Select Interval</FormHelperText>
                                     </FormControl>
-                        {loading}
-                        <CardContent style={{ padding: 0 }}>
-                            {output(data)}
+                                </Grid >
+                            </Grid >
                         </CardContent>
-                        <Button variant="contained" color="secondary" onClick={handleClick}>
-                            Refresh
-                        </Button>
                     </Card>
                 </Grid>
             </Grid>