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

Merge branch 'master' into improve-backend

Browse Source
This commit is contained in:
Oliver Boehlk
2020-04-19 18:45:29 +02:00
parent 66d837f387 a13edde2ab
commit dd35ab0c51
6 changed files with 184 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,9 +5,54 @@ import {
import {
useParams
} from "react-router-dom";
import CircularProgress from '@material-ui/core/CircularProgress';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
}));
const output = (data) => {
if (data === null) {
return (
<CircularProgress color="secondary" />
)
} 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>
)
}
}
export default function ResourceChart(props) {
const classes = useStyles();
const [data, setData] = React.useState(null);
let { id } = useParams();
const loadData = async () => {
@@ -60,28 +105,25 @@ export default function ResourceChart(props) {
loadData();
}
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>
<div className={classes.root}>
<Grid container spacing={2}>
<Grid item xs={12}>
<Typography variant="h4">
Resource Chart
</Typography>
</Grid>
<Grid item xs={12}>
<Card>
<CardContent>
{output(data)}
</CardContent>
</Card>
</Grid>
</Grid>
</div>
);
}