diff --git a/frontend/src/components/resourcechart/chart.js b/frontend/src/components/resourcechart/chart.js index 8962982..d9016c6 100644 --- a/frontend/src/components/resourcechart/chart.js +++ b/frontend/src/components/resourcechart/chart.js @@ -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"] diff --git a/frontend/src/components/resourcechart/resourcechart.js b/frontend/src/components/resourcechart/resourcechart.js index bb95f39..5a0b8c4 100644 --- a/frontend/src/components/resourcechart/resourcechart.js +++ b/frontend/src/components/resourcechart/resourcechart.js @@ -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"; @@ -45,7 +42,6 @@ export default function ResourceChart(props) { const [interval, setInterval] = React.useState('day'); let { id } = useParams(); const loadData = async () => { - console.log(interval) let dayData = await fetch(`/simcompanies/API/${interval}?kind=${id}`); let dataWithDate = await dayData.json(); let qualitySortedData = []; @@ -54,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(); } @@ -101,7 +109,6 @@ export default function ResourceChart(props) { } const handleChange = (event) => { setInterval(event.target.value); - loadData() } return (