input fixed, started data grid

webserver/package.json

@@ -9,17 +9,20 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "react-apexcharts": "^1.3.9",
     "formik": "^2.2.9",
     "pouchdb": "^7.2.2",
     "react": "^17.0.2",
-    "react-chartjs-2": "^4.0.0",
     "react-dom": "^17.0.2",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.3",
-    "@material-ui/core": "^4.12.3",
+    "@mui/material": "^5.5.0",
-    "@material-ui/icons": "^4.11.2",
+    "@mui/icons-material": "^5.5.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@mui/x-data-grid": "^5.6.1",
     "workbox-background-sync": "^5.1.4",
     "workbox-broadcast-update": "^5.1.4",
     "workbox-cacheable-response": "^5.1.4",
@@ -32,7 +35,6 @@
     "workbox-routing": "^5.1.4",
     "workbox-strategies": "^5.1.4",
     "workbox-streams": "^5.1.4"
-    
   },
   "scripts": {
     "start": "react-scripts start",

webserver/src/App.jsx

@@ -1,13 +1,7 @@
 import logo from "./logo.svg";
 import Navigation from "./components/Navigation/Navigation";
 import { DbProvider } from "./DbContext";
-import {
+import { BrowserRouter as Router, Routes, Route, Link, Navigate } from "react-router-dom";
-  BrowserRouter as Router,
-  Routes,
-  Route,
-  Link,
-  Navigate,
-} from "react-router-dom";
 import "./App.css";
 // const Cushion = require('cushiondb-client');
 
@@ -16,23 +10,27 @@ import NotFoundPage from "./Pages/NotFoundPage";
 import DashboardPage from "./Pages/DashboardPage/DashboardPage";
 import WelcomePage from "./Pages/WelcomePage";
 import InputPage from "./Pages/InputPage";
-import { createTheme, ThemeProvider } from '@material-ui/core/styles'
+import { createTheme, ThemeProvider } from "@mui/material";
-import { Formik, Field, Form } from 'formik';
-import { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@material-ui/core";
-import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
 import { ProcessedDataBucketProvider } from "./ProcessedDataBucketContext";
 
-
-
 function App() {
   const darkTheme = createTheme({
     // Theme settings
     palette: {
-      type: "dark",
+      mode: "dark",
+      background: {
+        paper: "#101515",
+      },
+      text: {
+        // primary: "#edf8f3",
+        // secondary: "#acd3bf",
+      },
+      red_alliance: "#ec2e63",
+      blue_alliance: "#2d74eb",
     },
     typography: {
-      fontSize: 18
+      fontSize: 18,
-    }
+    },
   });
   return (
     <ThemeProvider theme={darkTheme}>

webserver/src/Pages/DashboardPage/DashboardPage.jsx

@@ -1,8 +1,9 @@
 import React from "react";
-import "chart.js/auto";
 import { useLocalDb } from "../../DbContext";
-import { Pie, Bar, Chart } from "react-chartjs-2";
 import { useProcessedDataBucket } from "../../ProcessedDataBucketContext";
+import Chart from "react-apexcharts";
+import { DataGrid } from "@mui/x-data-grid";
+import { Box } from "@mui/material";
 
 const DashboardPage = () => {
   //https://react-charts.js.org/examples/column
@@ -16,15 +17,64 @@ const DashboardPage = () => {
         {
           label: "Climbs",
           data: pdb.teamData[4388].climb_counts,
-          backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(150,230,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
+          backgroundColor: ["rgba(230,20,20)", "rgba(230,150,20)", "rgba(160,220,20)", "rgba(20,230,70)", "rgba(20,200,180)"],
         },
       ],
     };
   };
-  // console.log(pdb);
+  console.log(pdb);
+
+  //format data for the data grid
+  let grid_data = [];
+  //turns the values of the key value pairs in the list into an array
+  let team_data_array = Object.values(pdb.teamData);
+  const roundPlaces = (n, d) => Math.round(n * Math.pow(10, d)) / Math.pow(10, d);
+  team_data_array.forEach((value, index, array) => {
+    grid_data.push({
+      id: value.team_number,
+      average_auto_points: roundPlaces(value.average_auto_points, 2),
+      average_teleop_hub_points: roundPlaces(value.average_teleop_hub_points, 2),
+      average_climb_points: roundPlaces(value.average_climb_points, 2),
+      average_total_match_points: roundPlaces(value.average_total_match_points, 2),
+    });
+  });
+  console.log(grid_data);
+
   return (
     <div>
-      <Pie data={makePieChartData(pdb, 4388)} />
+      {/* <Pie data={makePieChartData(pdb, 4388)} /> */}
+      <Box
+        sx={{
+          height: "600px",
+          m: 2,
+        }}
+      >
+        <DataGrid
+          rows={grid_data}
+          columns={[
+            { field: "id", headerName: "Team", width: 100 },
+            { field: "average_total_match_points", headerName: "Avg Total Pts", width: 150 },
+            { field: "average_auto_points", headerName: "Avg Auto Pts", width: 150 },
+            { field: "average_teleop_hub_points", headerName: "Avg Teleop Hub Pts", width: 190 },
+            { field: "average_climb_points", headerName: "Avg Climb Pts", width: 150 },
+            // { field: "matched_played", headerName: "Matches", width: 100 },
+          ]}
+          checkboxSelection
+          rowsPerPageOptions={[15]}
+        />
+      </Box>
+      {/* <Chart
+        options={{
+          chart: {
+            width: 384,
+            type: "pie",
+          },
+          labels: ["None", "Low", "Mid", "High", "Transversal"],
+        }}
+        series={pdb.teamData[4388].climb_counts}
+        type="pie"
+        width={380}
+      /> */}
     </div>
   );
 };

webserver/src/Pages/InputPage.jsx

@@ -1,18 +1,25 @@
 import React from "react";
 import { useLocalDb } from "../DbContext";
 import "./InputPage.css";
-// import { Button, Intent, Spinner } from "@blueprintjs/core";
-import FormRenderer from "@data-driven-forms/react-form-renderer/form-renderer";
-import componentTypes from "@data-driven-forms/react-form-renderer/component-types";
-import componentMapper from "@data-driven-forms/blueprint-component-mapper/component-mapper";
-import FormTemplate from "@data-driven-forms/blueprint-component-mapper/form-template";
 import { Formik, FastField, Form } from "formik";
 import InputNumberField from "../components/InputNumberField.jsx";
-import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@material-ui/core";
+import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment, Box } from "@mui/material";
-import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
 
 const InputPage = () => {
   const localdb = useLocalDb();
+  let panel_sx = {
+    display: "flex",
+    flexDirection: { xs: "column", sm: "row" },
+    alignItems: { xs: "center", sm: "center" },
+    justifyContent: { xs: "flex-start", sm: "center" },
+    bgcolor: "background.paper",
+    p: 2,
+    m: 1,
+    gap: 2,
+    maxWidth: "fit-content",
+    borderRadius: "10px",
+    boxShadow: 7,
+  };
   return (
     <div>
       <br />
@@ -64,49 +71,31 @@ const InputPage = () => {
       >
         {({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
           <Form>
-            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
+            <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
-              <Grid item>
+              <Box sx={panel_sx}>
                 <FastField type="input" as={TextField} name="team_number" label="Team #" />
-              </Grid>
-              <Grid item>
                 <FastField type="input" as={TextField} name="match_number" label="Match Number" />
-              </Grid>
-              <Grid item>
                 <FormControl component="fieldset">
                   <FormLabel component="legend">Alliance</FormLabel>
                   <RadioGroup aria-label="Alliance" name="alliance" row>
-                    <FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="red" style={{ fontSize: 50 }} />} label="Red" />
+                    <FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="red" sx={{ "&, &.Mui-checked": { color: "red_alliance" } }} />} sx={{ color: "red_alliance" }} label="Red" />
-                    <FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="blue" />} label="Blue" />
+                    <FormControlLabel control={<FastField as={Radio} type="radio" name="alliance" value="blue" sx={{ "&, &.Mui-checked": { color: "blue_alliance" } }} />} sx={{ color: "blue_alliance" }} label="Blue" />
                   </RadioGroup>
                 </FormControl>
-              </Grid>
+              </Box>
-            </Grid>
+
-            <div />
+              <Box sx={panel_sx}>
-            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
-              <Grid item>
-                <Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
-                  <Grid item>
                 <InputNumberField name="upper_hub_auto" label="Upper Hub Auto" />
-                  </Grid>
-                  <Grid item>
                 <InputNumberField name="lower_hub_auto" label="Lower Hub Auto" />
-                  </Grid>
+                <FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="taxi_auto" />} label="Auto Taxi" />
-                </Grid>
+              </Box>
-              </Grid>
+
-              <Grid item>
+              <Box sx={panel_sx}>
-                <Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
-                  <Grid item>
                 <InputNumberField name="upper_hub_teleop" label="Upper Hub Teleop" />
-                  </Grid>
-                  <Grid item>
                 <InputNumberField name="lower_hub_teleop" label="Lower Hub Teleop" />
-                  </Grid>
+              </Box>
-                </Grid>
+
-              </Grid>
+              <Box sx={panel_sx}>
-            </Grid>
-            <div />
-            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
-              <Grid item>
                 <FormControl component="fieldset">
                   <FormLabel component="legend">Climbing</FormLabel>
                   <RadioGroup aria-label="Climbing" name="climb_level" row>
@@ -117,66 +106,45 @@ const InputPage = () => {
                     <FormControlLabel control={<FastField as={Radio} type="radio" name="climb_level" value="4" />} label="Traversal" />
                   </RadioGroup>
                 </FormControl>
-              </Grid>
+              </Box>
-            </Grid>
+
-            <div />
+              <Box sx={panel_sx}>
-            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
+                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-              <Grid item>
-                <Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
-                  <Grid item>
                   <InputNumberField name="fouls" label="Fouls" />
-                  </Grid>
-                  <Grid item>
                   <InputNumberField name="fouls_tech" label="Tech Fouls" />
-                  </Grid>
+                </Box>
-                </Grid>
+                <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-              </Grid>
-              <Grid item>
-                <Grid container direction="column" justifyContent="flex-end" alignItems="center" spacing={3}>
-                  <Grid item>
                   <InputNumberField name="red_cards" label="Red Cards" />
-                  </Grid>
-                  <Grid item>
                   <InputNumberField name="yellow_cards" label="Yellow Cards" />
-                  </Grid>
+                </Box>
-                </Grid>
+              </Box>
-              </Grid>
+
-            </Grid>
+              <Box sx={panel_sx}>
-            <div />
-            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
-              <Grid item>
                 <FormControl component="fieldset">
                   <FormLabel component="legend">Defense</FormLabel>
                   <RadioGroup aria-label="Defense" name="defence" row>
                     <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="0" />} label="None" />
-                    {/* <Divider orientation="vertical" flexItem middle /> */}
                     <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="1" />} label="Poor" />
-                    <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="2" />} label="Good" /> <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="3" />} label="Exceptional" />
+                    <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="2" />} label="Good" />
+                    <FormControlLabel control={<FastField as={Radio} type="radio" name="defence" value="3" />} label="Exceptional" />
                   </RadioGroup>
                 </FormControl>
-              </Grid>
-              <Grid item>
                 <FormControlLabel control={<FastField as={Checkbox} type="checkbox" name="disabled" />} label="Disabled" />
-              </Grid>
+              </Box>
-            </Grid>
+
-            <div />
+              <Box sx={{ ...panel_sx, display: "flex", flexDirection: "column" }}>
-            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
+                <h2>What they _______</h2>
-              <Grid item>
+                <Box sx={{ display: "flex", flexDirection: "row", gap: 2, p: 0, m: 0 }}>
-                <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="What they did Well" />
+                  <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_well" label="did well" />
-              </Grid>
+                  <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="struggled with" />
-              <Grid item>
+                  <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="can't do" />
-                <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_struggle" label="What they struggled with" />
+                </Box>
-              </Grid>
-              <Grid item>
-                <FastField type="input" as={TextField} multiline rows={3} name="team_abilities_cant" label="What they can't do" />
-              </Grid>
-            </Grid>
-            <div />
-            <Grid container direction="row" justifyContent="center" alignItems="flex-end" spacing={3}>
                 <Button type="submit" disabled={isSubmitting}>
                   Submit
                 </Button>
-            </Grid>
+              </Box>
+            </Box>
+            <div />
           </Form>
         )}
       </Formik>

webserver/src/ProcessedDataBucket.jsx

@@ -20,21 +20,22 @@ export class ProcessedDataBucket {
             if (typeof this.teamData[doc.team_number] === "undefined") {
               this.teamData[doc.team_number] = {
                 team_number: doc.team_number,
-                games_played: 0,
+                matched_played: 0,
                 data_sets: {
                   upper_hub_auto: [],
                   lower_hub_auto: [],
                   upper_hub_teleop: [],
                   lower_hub_teleop: [],
-                  match_points: [],
+                  auto_points: [],
+                  teleop_hub_points: [],
+                  climb_points: [],
+                  total_match_points: [],
                 },
                 climb_counts: [0, 0, 0, 0, 0],
-                // climbs_none: 0,
+                average_auto_points: 0,
-                // climbs_low: 0,
+                average_teleop_hub_points: 0,
-                // climbs_mid: 0,
+                average_climb_points: 0,
-                // climbs_high: 0,
+                average_total_match_points: 0,
-                // climbs_transverse: 0,
-                points_average: 0,
                 num_disables: 0,
                 num_flips: 0,
                 fouls: 0,
@@ -46,47 +47,24 @@ export class ProcessedDataBucket {
 
             //add this game's data to the respective team data:
             let thisTeamData = this.teamData[doc.team_number];
-            thisTeamData.games_played++;
+            thisTeamData.matched_played++;
 
-            let match_points =
+            let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2;
-              (parseInt(doc.taxi_auto) ? 2 : 0) +
+            let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1;
-              parseInt(doc.upper_hub_auto) * 4 +
+            let climb_points = (parseInt(doc.climb_level) == 0 ? 4 : 0) + (parseInt(doc.climb_level) == 1 ? 6 : 0) + (parseInt(doc.climb_level) == 2 ? 10 : 0) + (parseInt(doc.climb_level) == 3 ? 15 : 0);
-              parseInt(doc.lower_hub_auto) * 2 +
+            let total_match_points = auto_points + teleop_hub_points + climb_points;
-              parseInt(doc.upper_hub_teleop) * 2 +
-              parseInt(doc.lower_hub_teleop) * 1 +
-              (parseInt(doc.climb_level) == 0 ? 4 : 0) +
-              (parseInt(doc.climb_level) == 1 ? 6 : 0) +
-              (parseInt(doc.climb_level) == 2 ? 10 : 0) +
-              (parseInt(doc.climb_level) == 3 ? 15 : 0);
             //data sets
             thisTeamData.data_sets.upper_hub_auto.push(parseInt(doc.upper_hub_auto));
             thisTeamData.data_sets.lower_hub_auto.push(parseInt(doc.lower_hub_auto));
             thisTeamData.data_sets.upper_hub_teleop.push(parseInt(doc.upper_hub_teleop));
             thisTeamData.data_sets.lower_hub_teleop.push(parseInt(doc.lower_hub_teleop));
-            thisTeamData.data_sets.match_points.push(match_points);
+            thisTeamData.data_sets.auto_points.push(auto_points);
+            thisTeamData.data_sets.teleop_hub_points.push(teleop_hub_points);
+            thisTeamData.data_sets.climb_points.push(climb_points);
+            thisTeamData.data_sets.total_match_points.push(total_match_points);
 
             //climb data
             thisTeamData.climb_counts[parseInt(doc.climb_level)]++;
-            // switch (parseInt(doc.climb_level)) {
-            //   case 0:
-            //     thisTeamData.climbs_none++;
-            //     break;
-            //   case 1:
-            //     thisTeamData.climbs_low++;
-            //     break;
-            //   case 2:
-            //     thisTeamData.climbs_mid++;
-            //     break;
-            //   case 3:
-            //     thisTeamData.climbs_high++;
-            //     break;
-            //   case 4:
-            //     thisTeamData.climbs_transverse++;
-            //     break;
-            //   default:
-            //     console.error("Invalid Climb Level (how did this even happen lol?): " + doc.climb_level);
-            //     break;
-            // }
 
             //misc data
             thisTeamData.num_disables += doc.disabled ? 1 : 0;
@@ -95,13 +73,15 @@ export class ProcessedDataBucket {
             thisTeamData.fouls_tech += parseInt(doc.fouls_tech);
             thisTeamData.red_cards += parseInt(doc.red_cards);
             thisTeamData.yellow_cards += parseInt(doc.yellow_cards);
+
             //sum of all points in the match points data set for this team
-            let total_points = thisTeamData.data_sets.match_points.reduce(function (accum, current) {
+            //function for getting the sum of an array, use in reduce function of array
-              return accum + current;
+            const sum = (accum, current) => accum + current;
-            }, 0);
+            thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_played;
-            thisTeamData.points_average = total_points / thisTeamData.games_played;
+            thisTeamData.average_teleop_hub_points = thisTeamData.data_sets.teleop_hub_points.reduce(sum, 0) / thisTeamData.matched_played;
+            thisTeamData.average_climb_points = thisTeamData.data_sets.climb_points.reduce(sum, 0) / thisTeamData.matched_played;
+            thisTeamData.average_total_match_points = thisTeamData.data_sets.total_match_points.reduce(sum, 0) / thisTeamData.matched_played;
           });
-          console.log(this.teamData);
         })
         .catch((err) => {
           console.log("Error while processing data!");

webserver/src/components/InputNumberField.jsx

@@ -1,38 +1,25 @@
 import React from "react";
 import { Formik, FastField, Form, useFormikContext } from "formik";
-import {
+import { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@mui/material";
-  TextField,
+import { AddCircleOutline, RemoveCircleOutline } from "@mui/icons-material";
-  Button,
-  Grid,
-  FormRow,
-  Checkbox,
-  Radio,
-  FormControlLabel,
-  FormControl,
-  FormLabel,
-  RadioGroup,
-  IconButton,
-  InputAdornment,
-} from "@material-ui/core";
-import { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons";
 
 const InputNumberField = (props) => {
   const { values, setFieldValue } = useFormikContext();
   return (
     <FastField
-      type="number"
+      //https://stackoverflow.com/questions/50823182/material-ui-remove-up-down-arrow-dials-from-textview
+      type="tel" //telephone numbers because 'number' creates unwanted arrows
       as={TextField}
       name={props.name}
       label={props.label}
       InputProps={{
-        style: { fontSize: 40, "maxWidth": 300 },
+        style: { fontSize: 40, maxWidth: 300 },
         startAdornment: (
           <InputAdornment position="start">
             <IconButton
               onClick={() => {
                 setFieldValue(props.name, Math.max(parseInt(values[props.name]) - 1, 0));
               }}
-              style={{ width: '96px', height: '96px', padding: '24px' }}
               touch="true"
             >
               <RemoveCircleOutline style={{ fontSize: 50 }} />
@@ -45,7 +32,6 @@ const InputNumberField = (props) => {
               onClick={() => {
                 setFieldValue(props.name, Math.max(parseInt(values[props.name]) + 1, 0));
               }}
-              style={{ width: '96px', height: '96px', padding: '0' }}
               touch="true"
             >
               <AddCircleOutline style={{ fontSize: 50 }} />

webserver/src/components/Navigation/Drawer/SideDrawer.css

@@ -1,5 +1,6 @@
 .side_drawer {
     position: fixed;
+    top: 56px;
     height: 100%;
     width: 100%;
     background: #009954;
@@ -18,6 +19,7 @@
 
 .side_drawer ul {
     /* height: 100%; */
+    width: 100%;
     list-style: none;
     display: flex;
     flex-direction: column;
@@ -26,6 +28,11 @@
 
 .side_drawer li {
     margin: 0.5rem 0;
+    /* border-top: 1px solid #ddd; */
+}
+
+.side_drawer li:first-child {
+    /* border-top: 0; */
 }
 
 .side_drawer a {
@@ -36,6 +43,7 @@
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     padding-right: 1000%;
+    max-width: 100%;
 }
 
 .side_drawer a:hover,

webserver/src/components/Navigation/Navigation.css

@@ -4,5 +4,5 @@
   top: 0;
   left: 0;
   width: 100%;
-  z-index: 1;
+  z-index: 2;
 }