SimCompanies/dashboard
2
1
Fork 0
Code Issues 17 Pull Requests Releases Activity

made chart responsive #25

Browse Source
This commit is contained in:
Hawk
2020-05-02 18:01:44 +02:00
parent 6318e32f42
commit 7c8914bc52
2 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/components/resourcechart/chart.js
View File

@@ -1,6 +1,6 @@
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import { import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts'; } from 'recharts';
import { makeStyles } from '@material-ui/core/styles'; import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
@@ -12,11 +12,15 @@ import Checkbox from '@material-ui/core/Checkbox';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
display: 'flex', padding: 0,
margin: 0,
}, },
formControl: { formControl: {
margin: theme.spacing(2), margin: theme.spacing(2),
}, },
chart: {
width: 0,
}
})); }));
export default function Chart(props) { export default function Chart(props) {
@@ -62,23 +66,26 @@ export default function Chart(props) {
const { q0, q1, q2, q3, q4, q5, q6, q7 } = state; const { q0, q1, q2, q3, q4, q5, q6, q7 } = state;
return ( return (
<Grid container spacing={2}> <Grid container spacing={2} className={classes.root}>
<Grid item xs={12}> <Grid item xs={12} className={classes.chart}>
<LineChart <ResponsiveContainer width="99%" height={300}>
width={900} <LineChart
height={300} data={data}
data={data} margin={{
margin={{ top: 5, right: 0, left: 0, bottom: 5,
top: 5, right: 30, left: 20, bottom: 5, }}
}} >
> <CartesianGrid strokeDasharray="3 3" />
<CartesianGrid strokeDasharray="3 3" /> <XAxis dataKey="time" />
<XAxis dataKey="time" /> <YAxis domain={['datamin', 'datamax']} />
<YAxis domain={['datamin', 'datamax']} /> <Tooltip />
<Tooltip /> <Legend />
<Legend /> {lines}
{lines} </LineChart>
</LineChart> </ResponsiveContainer>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
<FormControl component="fieldset" className={classes.formControl}> <FormControl component="fieldset" className={classes.formControl}>
@@ -119,7 +126,7 @@ export default function Chart(props) {
</FormGroup> </FormGroup>
</FormControl> </FormControl>
</Grid> </Grid>
</Grid> </Grid >
); );
} }

2
frontend/src/components/resourcechart/resourcechart.js
View File

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