added loading component for prices close #22

frontend/src/components/resourcechart/resourcechart.js

@@ -5,9 +5,47 @@ import {
 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';
+
+const useStyles = makeStyles((theme) => ({
+    root: {
+        display: 'flex',
+    },
+}));
+
+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="price" stroke="#8884d8" dot={false} />
+            </LineChart>
+        )
+    }
+}
 
 export default function ResourceChart(props) {
-
+    const classes = useStyles();
     const [data, setData] = React.useState(null);
     let { id } = useParams();
     const loadData = async () => {
@@ -24,21 +62,27 @@ export default function ResourceChart(props) {
         loadData();
     }
 
+
+
     return (
-        <LineChart
+        <div className={classes.root}>
-            width={900}
+            <Grid container spacing={2}>
-            height={300}
+                <Grid item xs={12}>
-            data={data}
+                    <Typography variant="h4">
-            margin={{
+                        Resource Chart
-                top: 5, right: 30, left: 20, bottom: 5,
+                    </Typography>
-            }}
+                </Grid>
-        >
+                <Grid item xs={12}>
-            <CartesianGrid strokeDasharray="3 3" />
+                    <Card>
-            <XAxis dataKey="time" interval="2" />
+                        <CardContent>
-            <YAxis domain={['datamin', 'datamax']} />
+                            {output(data)}
-            <Tooltip />
+                        </CardContent>
-            <Legend />
+                    </Card>
-            <Line type="monotone" dataKey="price" stroke="#8884d8" dot={false} />
+                </Grid>
-        </LineChart>
+            </Grid>
+
+        </div>
+
+
     );
 }

frontend/src/components/selectResource/index.js

@@ -1,14 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
-import Typography from '@material-ui/core/Typography';
 import Grid from '@material-ui/core/Grid';
-import { Link } from 'react-router-dom';
-import Link1 from '@material-ui/core/Link';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import CardMedia from '@material-ui/core/CardMedia';
 import ResourceCard from './resourceCard';