141 lines
5.3 KiB
JavaScript
141 lines
5.3 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
|
|
} from 'recharts';
|
|
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';
|
|
import Button from '@material-ui/core/Button';
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
display: 'flex',
|
|
},
|
|
card: {
|
|
padding: 20
|
|
}
|
|
}));
|
|
|
|
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 () => {
|
|
let dayData = await fetch(`/simcompanies/API/day?kind=${id}`);
|
|
let dataWithDate = await dayData.json();
|
|
let qualitySortedData = [];
|
|
for (let i = 0; i < dataWithDate.length; i++) {
|
|
if (i === 0) qualitySortedData.push(dataWithDate[i]);
|
|
else {
|
|
if (dataWithDate[i]["time"] === qualitySortedData[qualitySortedData.length - 1]["time"]) {
|
|
switch (dataWithDate[i].quality) {
|
|
case 0: break;
|
|
case 1:
|
|
qualitySortedData[qualitySortedData.length - 1]["q1"] = dataWithDate[i]["price"];
|
|
break;
|
|
case 2:
|
|
qualitySortedData[qualitySortedData.length - 1]["q2"] = dataWithDate[i]["price"];
|
|
break;
|
|
case 3:
|
|
qualitySortedData[qualitySortedData.length - 1]["q3"] = dataWithDate[i]["price"];
|
|
break;
|
|
case 4:
|
|
qualitySortedData[qualitySortedData.length - 1]["q4"] = dataWithDate[i]["price"];
|
|
break;
|
|
case 5:
|
|
qualitySortedData[qualitySortedData.length - 1]["q5"] = dataWithDate[i]["price"];
|
|
break;
|
|
case 6:
|
|
qualitySortedData[qualitySortedData.length - 1]["q6"] = dataWithDate[i]["price"];
|
|
break;
|
|
case 7:
|
|
qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"];
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
} else {
|
|
qualitySortedData.push(dataWithDate[i]);
|
|
qualitySortedData[qualitySortedData.length - 1]["q0"] = qualitySortedData[qualitySortedData.length - 1]["price"];
|
|
}
|
|
}
|
|
}
|
|
for (let i = 0; i < qualitySortedData.length; i++) {
|
|
qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]);
|
|
qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString();
|
|
}
|
|
console.log(qualitySortedData);
|
|
setData(qualitySortedData)
|
|
}
|
|
|
|
if (data === null) {
|
|
loadData();
|
|
}
|
|
|
|
const handleClick = (e) => {
|
|
loadData()
|
|
}
|
|
|
|
return (
|
|
<div className={classes.root}>
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12}>
|
|
<Typography variant="h4">
|
|
Resource Chart
|
|
</Typography>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<Card className={classes.card}>
|
|
<CardContent>
|
|
{output(data)}
|
|
</CardContent>
|
|
<Button variant="contained" color="secondary" onClick={handleClick}>
|
|
Refresh
|
|
</Button>
|
|
</Card>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
</div>
|
|
);
|
|
}
|