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"]

frontend/src/components/resourcechart/resourcechart.js

@@ -1,7 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
-import {
-    LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend,
-} from 'recharts';
 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"]);
+            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>