Merge pull request #15 from Software-Engineering-DHBW/Stats

Stats

Author: JonasUnruh

wall-tracker/package-lock.json

@@ -11,7 +11,7 @@
     "@fontsource/roboto": "^4.5.3",
     "@material-ui/core": "^4.12.3",
     "@mui/icons-material": "^5.4.4",
-    "@mui/material": "^5.4.4",
+    "@mui/material": "^5.5.2",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.3",
     "@testing-library/user-event": "^13.5.0",

wall-tracker/package.json

@@ -1,28 +1,105 @@
 import React, { useEffect, useState} from 'react';
-import {Paper} from "@mui/material";
+import {Paper, Typography} from "@mui/material";
 import useAxios from "../Hooks/useAxios.hook";
-import {CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis} from 'recharts';
+import {CartesianGrid, Legend, Line, BarChart,Bar, Tooltip, XAxis, YAxis, ResponsiveContainer} from 'recharts';
 
 function Charts() {
-    const [data, setData] = useState();
-    let url = "boulder";
-    const [ response, isLoading, isError ] = useAxios(url);
+    // const [data1, setData] = useState();
+    // let url = "progress";
+    // const [ response, isLoading, isError ] = useAxios(url);
 
-    useEffect(() => {
-        setData(response)
+    // const [data2, setData] = useState();
+    // let url = "boulder";
+    // const [ response, isLoading, isError ] = useAxios(url);
+
+    // const [data3, setData] = useState();
+    // let url = "ratings";
+    // const [ response, isLoading, isError ] = useAxios(url);
+
+    //     useEffect(() => {
+    //     setData(response)
+    //
+    // }, [url]);
+
+    const testdata = [
+        {
+            "Boulder": "01",
+            "pv": 2
+        },
+        {
+            "Boulder": "02",
+            "pv": 8
+        },
+        {
+            "Boulder": "03",
+            "pv": 9
+        },
+        {
+            "Boulder": "04",
+            "pv": 3
+        },
+        {
+            "Boulder": "05",
+            "pv": 4
+        },
+        {
+            "Boulder": "06",
+            "pv": 8
+        },
+        {
+            "Boulder": "07",
+            "pv": 3
+        }
+    ]
 
-    }, [url]);
 
     return(
+
         <Paper>
-            <LineChart width={730} height={250} data={data}>
-                <CartesianGrid strokeDasharray="3 3" />
-                <XAxis dataKey="id" type="number"/>
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Line type="monotone" dataKey="difficulty" stroke="#8884d8" />
-            </LineChart>
+            <Typography align="center">
+                <h2>Completed Bolder</h2>
+
+            </Typography>
+            <ResponsiveContainer width='100%' height={400}>
+                <BarChart width={700} height={250} data={testdata} margin={{ top: 20, right: 50, left: 20, bottom: 20 }}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="Boulder" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="pv" fill="#8884d8" name="Completed"/>
+                </BarChart>
+            </ResponsiveContainer>
+
+            <Typography align="center">
+                <h2>Difficulty of the Bolder</h2>
+
+            </Typography>
+            <ResponsiveContainer width='100%' height={400}>
+                <BarChart width={700} height={250} data={testdata} margin={{ top: 20, right: 50, left: 20, bottom: 20 }}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="Boulder" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="pv" fill="#8884d8" name="Difficulty"/>
+                </BarChart>
+            </ResponsiveContainer>
+
+            <Typography align="center">
+                <h2>Rating of the Bolder</h2>
+
+            </Typography>
+            <ResponsiveContainer width='100%' height={400}>
+                <BarChart width={700} height={250} data={testdata} margin={{ top: 20, right: 50, left: 20, bottom: 20 }}>
+                    <CartesianGrid strokeDasharray="3 3" />
+                    <XAxis dataKey="Boulder" />
+                    <YAxis />
+                    <Tooltip />
+                    <Legend />
+                    <Bar dataKey="pv" fill="#8884d8" name="Rating of the Bolder" />
+                </BarChart>
+            </ResponsiveContainer>
         </Paper>
     )
 }

wall-tracker/src/Components/Charts.tsx

@@ -1,11 +1,19 @@
+import { Typography } from '@mui/material';
 import React from 'react'
 import Charts from "../Components/Charts";
+import Container from '@mui/material/Container';
+
 
 const Stats = () => {
     return(
         <div>
-            Stats Page
+
+            <Typography align="center">
+                <h1>Your Personal Stats</h1>
+
+            </Typography>
             <Charts />
+
         </div>
     )
 }