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

add-week-month-view #62

Merged
oliver merged 3 commits from add-week-month-view into master 2020-05-13 22:04:53 +00:00
Conversation 1 Commits 3 Files Changed 2 +47 -18
2 changed files with 47 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,13 +37,11 @@ export default function Chart(props) {
q7: true,
});
const [lines, setLines] = React.useState([])
useEffect(() => {
if (data !== props.data) {
setData(data)
setData(props.data)
}
}, [data, setData, props.data]);
useEffect(() => {
var output = []
const colors = ["#8884d8", "#000000", "#82ca9d", "#ff0066", "#660066", "#99cc00", "#669999", "#996633"]

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

@@ -1,7 +1,4 @@
import React from 'react';
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';
import React, { useEffect } from 'react';
import {
useParams
} from "react-router-dom";
@@ -13,6 +10,10 @@ import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Chart from './chart';
import FormHelperText from '@material-ui/core/FormHelperText';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
const useStyles = makeStyles((theme) => ({
root: {
@@ -38,9 +39,10 @@ const output = (data) => {
export default function ResourceChart(props) {
const classes = useStyles();
const [data, setData] = React.useState(null);
const [interval, setInterval] = React.useState('day');
let { id } = useParams();
const loadData = async () => {
let dayData = await fetch(`/simcompanies/API/day?kind=${id}`);
let dayData = await fetch(`/simcompanies/API/${interval}?kind=${id}`);
let dataWithDate = await dayData.json();
let qualitySortedData = [];
for (let i = 0; i < dataWithDate.length; i++) {
@@ -48,44 +50,56 @@ export default function ResourceChart(props) {
else {
if (dataWithDate[i]["time"] === qualitySortedData[qualitySortedData.length - 1]["time"]) {
switch (dataWithDate[i].quality) {
case 0: break;
case 0:
break;
case 1:
qualitySortedData[qualitySortedData.length - 1]["q1"] = dataWithDate[i]["price"];
qualitySortedData[qualitySortedData.length - 1]["q1"] = dataWithDate[i]["price"].toFixed(3);
break;
case 2:
qualitySortedData[qualitySortedData.length - 1]["q2"] = dataWithDate[i]["price"];
qualitySortedData[qualitySortedData.length - 1]["q2"] = dataWithDate[i]["price"].toFixed(3);
break;
case 3:
qualitySortedData[qualitySortedData.length - 1]["q3"] = dataWithDate[i]["price"];
qualitySortedData[qualitySortedData.length - 1]["q3"] = dataWithDate[i]["price"].toFixed(3);
break;
case 4:
qualitySortedData[qualitySortedData.length - 1]["q4"] = dataWithDate[i]["price"];
qualitySortedData[qualitySortedData.length - 1]["q4"] = dataWithDate[i]["price"].toFixed(3);
break;
case 5:
qualitySortedData[qualitySortedData.length - 1]["q5"] = dataWithDate[i]["price"];
qualitySortedData[qualitySortedData.length - 1]["q5"] = dataWithDate[i]["price"].toFixed(3);
break;
case 6:
qualitySortedData[qualitySortedData.length - 1]["q6"] = dataWithDate[i]["price"];
qualitySortedData[qualitySortedData.length - 1]["q6"] = dataWithDate[i]["price"].toFixed(3);
break;
case 7:
qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"];
qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"].toFixed(3);
break;
default:
break;
}
} else {
qualitySortedData.push(dataWithDate[i]);
qualitySortedData[qualitySortedData.length - 1]["q0"] = qualitySortedData[qualitySortedData.length - 1]["price"];
qualitySortedData[qualitySortedData.length - 1]["q0"] = qualitySortedData[qualitySortedData.length - 1]["price"].toFixed(3);
}
}
}
for (let i = 0; i < qualitySortedData.length; i++) {
qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]);
qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString();
if (interval === "day") {
qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString();
} else if (interval === "week") {
qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleString();
} else {
qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleDateString();
}
}
setData(qualitySortedData)
}
useEffect(() => {
loadData()
}, [interval])
if (data === null) {
loadData();
}
@@ -93,6 +107,10 @@ export default function ResourceChart(props) {
const handleClick = (e) => {
loadData()
}
const handleChange = (event) => {
setInterval(event.target.value);
}
return (
<div className={classes.root}>
<Grid container spacing={2}>
@@ -103,6 +121,19 @@ export default function ResourceChart(props) {
</Grid>
<Grid item xs={12}>
<Card className={classes.card}>
<FormControl style={{ margin: 20 }}>
<Select
id="select-interval"
value={interval}
onChange={handleChange}
>
<MenuItem value={"day"}>Day</MenuItem>
<MenuItem value={"week"}>Week</MenuItem>
<MenuItem value={"month"}>Month</MenuItem>
</Select>
<FormHelperText>Select Interval</FormHelperText>
</FormControl>
<CardContent style={{ padding: 0 }}>
{output(data)}
</CardContent>