made chart responsive #25

frontend/src/components/resourcechart/chart.js

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import {
-    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
+    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
 } from 'recharts';
 import { makeStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
@@ -12,11 +12,15 @@ import Checkbox from '@material-ui/core/Checkbox';
 
 const useStyles = makeStyles((theme) => ({
     root: {
-        display: 'flex',
+        padding: 0,
+        margin: 0,
     },
     formControl: {
         margin: theme.spacing(2),
     },
+    chart: {
+        width: 0,
+    }
 }));
 
 export default function Chart(props) {
@@ -62,23 +66,26 @@ export default function Chart(props) {
     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 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}>
@@ -119,7 +126,7 @@ export default function Chart(props) {
                     </FormGroup>
                 </FormControl>
             </Grid>
-        </Grid>
+        </Grid >
 
     );
 }

frontend/src/components/resourcechart/resourcechart.js

@@ -103,7 +103,7 @@ export default function ResourceChart(props) {
                 </Grid>
                 <Grid item xs={12}>
                     <Card className={classes.card}>
-                        <CardContent>
+                        <CardContent style={{ padding: 0 }}>
                             {output(data)}
                         </CardContent>
                         <Button variant="contained" color="secondary" onClick={handleClick}>