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

Interval selection
All checks were successful
SimcoDash/simcompanies-dashboard/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Hawk
2020-05-13 23:56:35 +02:00
parent ed52f12e7d
commit 049c4ad938
2 changed files with 24 additions and 19 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, q7: true,
}); });
const [lines, setLines] = React.useState([]) const [lines, setLines] = React.useState([])
useEffect(() => { useEffect(() => {
if (data !== props.data) { if (data !== props.data) {
setData(data) setData(props.data)
} }
}, [data, setData, props.data]); }, [data, setData, props.data]);
useEffect(() => { useEffect(() => {
var output = [] var output = []
const colors = ["#8884d8", "#000000", "#82ca9d", "#ff0066", "#660066", "#99cc00", "#669999", "#996633"] const colors = ["#8884d8", "#000000", "#82ca9d", "#ff0066", "#660066", "#99cc00", "#669999", "#996633"]

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

@@ -1,7 +1,4 @@
import React from 'react'; import React, { useEffect } from 'react';
import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
} from 'recharts';
import { import {
useParams useParams
} from "react-router-dom"; } from "react-router-dom";
@@ -45,7 +42,6 @@ export default function ResourceChart(props) {
const [interval, setInterval] = React.useState('day'); const [interval, setInterval] = React.useState('day');
let { id } = useParams(); let { id } = useParams();
const loadData = async () => { const loadData = async () => {
console.log(interval)
let dayData = await fetch(`/simcompanies/API/${interval}?kind=${id}`); let dayData = await fetch(`/simcompanies/API/${interval}?kind=${id}`);
let dataWithDate = await dayData.json(); let dataWithDate = await dayData.json();
let qualitySortedData = []; let qualitySortedData = [];
@@ -54,44 +50,56 @@ export default function ResourceChart(props) {
else { else {
if (dataWithDate[i]["time"] === qualitySortedData[qualitySortedData.length - 1]["time"]) { if (dataWithDate[i]["time"] === qualitySortedData[qualitySortedData.length - 1]["time"]) {
switch (dataWithDate[i].quality) { switch (dataWithDate[i].quality) {
case 0: break; case 0:
break;
case 1: case 1:
qualitySortedData[qualitySortedData.length - 1]["q1"] = dataWithDate[i]["price"]; qualitySortedData[qualitySortedData.length - 1]["q1"] = dataWithDate[i]["price"].toFixed(3);
break; break;
case 2: case 2:
qualitySortedData[qualitySortedData.length - 1]["q2"] = dataWithDate[i]["price"]; qualitySortedData[qualitySortedData.length - 1]["q2"] = dataWithDate[i]["price"].toFixed(3);
break; break;
case 3: case 3:
qualitySortedData[qualitySortedData.length - 1]["q3"] = dataWithDate[i]["price"]; qualitySortedData[qualitySortedData.length - 1]["q3"] = dataWithDate[i]["price"].toFixed(3);
break; break;
case 4: case 4:
qualitySortedData[qualitySortedData.length - 1]["q4"] = dataWithDate[i]["price"]; qualitySortedData[qualitySortedData.length - 1]["q4"] = dataWithDate[i]["price"].toFixed(3);
break; break;
case 5: case 5:
qualitySortedData[qualitySortedData.length - 1]["q5"] = dataWithDate[i]["price"]; qualitySortedData[qualitySortedData.length - 1]["q5"] = dataWithDate[i]["price"].toFixed(3);
break; break;
case 6: case 6:
qualitySortedData[qualitySortedData.length - 1]["q6"] = dataWithDate[i]["price"]; qualitySortedData[qualitySortedData.length - 1]["q6"] = dataWithDate[i]["price"].toFixed(3);
break; break;
case 7: case 7:
qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"]; qualitySortedData[qualitySortedData.length - 1]["q7"] = dataWithDate[i]["price"].toFixed(3);
break; break;
default: default:
break; break;
} }
} else { } else {
qualitySortedData.push(dataWithDate[i]); 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++) { for (let i = 0; i < qualitySortedData.length; i++) {
qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]); qualitySortedData[i]["time"] = new Date(qualitySortedData[i]["time"]);
if (interval === "day") {
qualitySortedData[i]["time"] = qualitySortedData[i]["time"].toLocaleTimeString(); 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) setData(qualitySortedData)
} }
useEffect(() => {
loadData()
}, [interval])
if (data === null) { if (data === null) {
loadData(); loadData();
} }
@@ -101,7 +109,6 @@ export default function ResourceChart(props) {
} }
const handleChange = (event) => { const handleChange = (event) => {
setInterval(event.target.value); setInterval(event.target.value);
loadData()
} }
return ( return (