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

Merge branch 'master' of cloud.ol:oliver/simcompanies-dashboard

Browse Source
This commit is contained in:
Oliver Boehlk
2020-05-02 11:35:53 +02:00
parent a02dcbf2dc f5d70d157b
commit f4bd6dfd7b
7 changed files with 13293 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1688
backend/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

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

@@ -24,7 +24,7 @@ export default function Content() {
<div className={classes.root}> <div className={classes.root}>
<Route exact path="/" component={Overview} /> <Route exact path="/" component={Overview} />
<Route path="/resources" component={SelectResource} /> <Route path="/resources" component={SelectResource} />
<Route path="/resourcechart/:id" render={() => <ResourceChart />} /> <Route path="/resourcechart/:id" component={ResourceChart} />
</div> </div>
); );

125
frontend/src/components/resourcechart/chart.js Normal file
View File

@@ -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>
);
}

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

@@ -12,6 +12,7 @@ import Typography from '@material-ui/core/Typography';
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';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import Chart from './chart';
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
root: { root: {
@@ -25,32 +26,11 @@ const useStyles = makeStyles((theme) => ({
const output = (data) => { const output = (data) => {
if (data === null) { if (data === null) {
return ( return (
<CircularProgress color="secondary" /> <CircularProgress color="secondary" disableShrink />
) )
} else { } else {
return ( return (
<LineChart <Chart data={data}></Chart>
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>
) )
} }
} }
@@ -103,7 +83,6 @@ export default function ResourceChart(props) {
qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]); qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]);
qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString(); qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString();
} }
console.log(qualitySortedData);
setData(qualitySortedData) setData(qualitySortedData)
} }
@@ -114,13 +93,12 @@ export default function ResourceChart(props) {
const handleClick = (e) => { const handleClick = (e) => {
loadData() loadData()
} }
return ( return (
<div className={classes.root}> <div className={classes.root}>
<Grid container spacing={2}> <Grid container spacing={2}>
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
Resource Chart {props.location.state.name}
</Typography> </Typography>
</Grid> </Grid>
<Grid item xs={12}> <Grid item xs={12}>
@@ -134,7 +112,6 @@ export default function ResourceChart(props) {
</Card> </Card>
</Grid> </Grid>
</Grid> </Grid>
</div> </div>
); );
} }

275
frontend/src/components/selectResource/index.js
View File

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import ResourceCard from './resourceCard'; import ResourceCard from './resourceCard';
import Typography from '@material-ui/core/Typography'; import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
@@ -61,149 +62,151 @@ export default function SelectResource() {
loadResources(); loadResources();
return ( return (
resources.length === 0 ?
<CircularProgress color="secondary" disableShrink /> :
<Grid container spacing={2} > <Grid container spacing={2} >
<Grid item xs={12} className={classes.grid}> <Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} > <Grid container spacing={2} >
<Grid item xs={12}> <Grid item xs={12}>
<Typography variant="h4"> <Typography variant="h4">
Agriculture & Food Agriculture & Food
</Typography> </Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[0]}
</Grid>
</Grid>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}> </Grid>
<Grid container spacing={1} > <Grid item xs={12} className={classes.grid}>
{resources[0]} <Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Construction
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[1]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Fashion
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[2]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Energy
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[3]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Electronics
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[4]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Automotive
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[5]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Aerospace
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[6]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Resources
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[7]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Research
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[8]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Others
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[9]}
</Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Construction
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[1]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Fashion
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[2]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Energy
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[3]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Electronics
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[4]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Automotive
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[5]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Aerospace
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[6]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Resources
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[7]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Research
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[8]}
</Grid>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={2} >
<Grid item xs={12}>
<Typography variant="h4">
Others
</Typography>
</Grid>
<Grid item xs={12} className={classes.grid}>
<Grid container spacing={1} >
{resources[9]}
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
); );
} }

2
frontend/src/components/selectResource/resourceCard.js
View File

@@ -45,7 +45,7 @@ export default function ResourceCard(props) {
<Grid item xs={4} lg={2} key={props.resource["name"]}> <Grid item xs={4} lg={2} key={props.resource["name"]}>
<Card > <Card >
<CardContent style={{ padding: 0 }}> <CardContent style={{ padding: 0 }}>
<ListItemLink to={"/resourcechart/" + props.resource["db_letter"]} component={Link}> <ListItemLink to={{ pathname: "/resourcechart/" + props.resource["db_letter"], state: { name: props.resource["name"] } }} component={Link} >
<ListItemIcon> <ListItemIcon>
<img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} /> <img src={picture} alt={props.resource["name"]} style={{ width: 50, height: 50 }} />
</ListItemIcon> </ListItemIcon>

11335
frontend/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff