From d32bf23dd335cc49c0d19aede891557ce9fdf4f6 Mon Sep 17 00:00:00 2001 From: Evan Lanham Date: Sun, 13 Mar 2022 18:58:26 -0600 Subject: [PATCH] input fixed, started data grid --- .../testdata.1643440069.couch | Bin 680138 -> 725194 bytes .../testdata.1643440069.couch | Bin 422093 -> 467149 bytes webserver/package.json | 10 +- webserver/src/App.jsx | 30 ++-- .../src/Pages/DashboardPage/DashboardPage.jsx | 60 ++++++- webserver/src/Pages/InputPage.jsx | 156 +++++++----------- webserver/src/ProcessedDataBucket.jsx | 70 +++----- webserver/src/components/InputNumberField.jsx | 24 +-- .../Navigation/Drawer/SideDrawer.css | 8 + .../src/components/Navigation/Navigation.css | 2 +- 10 files changed, 176 insertions(+), 184 deletions(-) diff --git a/couchdb/data/shards/00000000-7fffffff/testdata.1643440069.couch b/couchdb/data/shards/00000000-7fffffff/testdata.1643440069.couch index 03b4b56e0ae78b7ff09d5972d94e17f37455e004..8157b6280958bdc2caa378c7cb7c049dba2c4d57 100644 GIT binary patch delta 5429 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 diff --git a/couchdb/data/shards/80000000-ffffffff/testdata.1643440069.couch b/couchdb/data/shards/80000000-ffffffff/testdata.1643440069.couch index 36d9644b9d4ec2f078175edf455dde8029921939..518d6fa68d4460f5342f6fa6e80a77acd71aee5b 100644 GIT binary patch delta 3836 zcmdUyZ%`EH9mk(%@7cRs@Cpn5JEV#z6^l!6Z~xuVc#4Prr~wX6rI}FN-P@BpkOK~i zCN1cMM8%{zLXroQOh)2ZYn*0u)Unf|RPA&UJJz1;8D7xt?NJRG z4A?r;=_}^o&HX-~@Avoo7#Ot=T*}03gOi8J+H^or z8M)RvIoezu)f(k2ioS*?22HQxZ(b)W!*z9vw6Vd>Zme%AUcaTdxq^M7rIsyRy}E{w zA$0+elouowR1v!+MdCPB&=}qk6c}FOos5eY1cnn_tV>nlyTDBq_@5i8As28sip;9eEk&&T{`A^D{vWa_|czaKv;?3}xQ%hheGp2_IJ^VXWnt6HeKd32 z^L6v@oo4Nt54%#TtO$x@Nz(66p0rYm!z>SUg8vmbx{SGmYPts zInuNTw%Po)XTKCCJC2M(0q;AD=A)m`@Bq%G(J~AD!gDl)m+>x$_AOq&!qWu--+2q% z?Sd2I;InZ+jiYc_cb)ZB*Y{@4w8jSFGU4g-m)61RIdSPlB^Q^7FRrl-#OA&CJWxG} zpp~Qt(!*yT=^?K&zC)U@PHf) zDvBz&7%u2^GrY^iGj7$TFp4H|supx>yu{9_8nyX7qXd%elO}J(;2hZ=|L#N=d?(q! zi=P@pi=YLk$fgBE&vN|wWin?e0rS2D4WSxR=azM^gm4A^-VnJjJ7@m2TY5?AhXLRx zhC!$P)4O39q_);JMtv*WJj38sFS&vm28a{K^*`c*D`Zjf+zQdr*wDJ|r?3aZD<~&D zT(kL{ze#JT3#qcMX_ww3T$)WTOo^H%qNX25ZT)CT^})_M45Mg%cWjJIB38zmeZ@0G z;NA-ITdQ)uo!^N7r2P7_@B?dCCz8$jo=D{PMwdRd*)X;mo;2apy)YeGFnz`cGl!@_}S z5^&~rbUPIf!1JaTT5dn~qvn`!{jV4Quy!I5fMcO}0Mg3htw;Za{V8~GhbenHE6b*_ z5?_uF>m~5tdTF2PrEJsg_53Ejth{brzQp=>wpQ$F4Lc5Y>UsUQrI_Myvmz@v7)@jK z-6P8!BRdp<5fm}#VpX@QIE5O+qHWTl*olzDOmw2>bhGk?KNG3W#~Ygqsjh3c()G+S z<)6_+qK>wHAALU?1kr@)qbMI2M^P#XJ^z7mWIjc5$Yh#o{IFr%q#MU20rQghZlA{X zdAfzTlazXNeB{&M_L`CX{mO0TjT128`po-=>wX+@!2R>8!&~bFe^EemN-p1?k|yt# z?^pcL*lWubQ58AP;bb(2s@Ge8vKU$7U5u=ETVXj(b4wB~W#M9I$Bi_RjbkiakYqF) z2H+njGfvGq<6k#%emvu35D_Ot4wOy%rD-np*8^dBM09{=ERVrVvw1J2CZ4^itMG5e zDm;`XS=#za>(;zy5w%9=*#wds>892E(_w>`AClhQ2 z6KpQvNZEsu)1BO#wVc&-5;CVU`bnerjB`kgThknjC_-%? zA&;-C0KmSj0`$xZ>@gn{k}`~SD#H&SY1Hy&0~7p7FDFbjHm+6gp#F(44y>t3>o=12 zi-4Sy_R+b@*AJa4qSqXFEJ1U0#7NrM3^bSVPF0iKs>X0m7Z-nJ^{u73W&M?PxOs;n zJDo0E;)6^6k70iP5HMfc(Z1tnzbl?Nx$^UmZ&tyJ37EITLF7M2#)Eo^5C0B4{Gi~s-t diff --git a/webserver/package.json b/webserver/package.json index 508f78e..9e1b72a 100644 --- a/webserver/package.json +++ b/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", - "@material-ui/icons": "^4.11.2", + "@mui/material": "^5.5.0", + "@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", diff --git a/webserver/src/App.jsx b/webserver/src/App.jsx index be319a3..440004e 100644 --- a/webserver/src/App.jsx +++ b/webserver/src/App.jsx @@ -1,13 +1,7 @@ import logo from "./logo.svg"; import Navigation from "./components/Navigation/Navigation"; import { DbProvider } from "./DbContext"; -import { - BrowserRouter as Router, - Routes, - Route, - Link, - Navigate, -} from "react-router-dom"; +import { 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 { 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 { createTheme, ThemeProvider } from "@mui/material"; 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 ( diff --git a/webserver/src/Pages/DashboardPage/DashboardPage.jsx b/webserver/src/Pages/DashboardPage/DashboardPage.jsx index 8938979..6f4c55c 100644 --- a/webserver/src/Pages/DashboardPage/DashboardPage.jsx +++ b/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 (
- + {/* */} + + + + {/* */}
); }; diff --git a/webserver/src/Pages/InputPage.jsx b/webserver/src/Pages/InputPage.jsx index f51d687..e21b645 100644 --- a/webserver/src/Pages/InputPage.jsx +++ b/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 { AddCircleOutline, RemoveCircleOutline } from "@material-ui/icons"; +import { TextField, Button, Grid, FormRow, Divider, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment, Box } from "@mui/material"; 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 (

@@ -64,49 +71,31 @@ const InputPage = () => { > {({ values, setValues, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
- - + + - - - - Alliance - } label="Red" /> - } label="Blue" /> + } sx={{ color: "red_alliance" }} label="Red" /> + } sx={{ color: "blue_alliance" }} label="Blue" /> - - -
- - - - - - - - - - - - - - - - - - - - - - -
- - + + + + + + } label="Auto Taxi" /> + + + + + + + + Climbing @@ -117,66 +106,45 @@ const InputPage = () => { } label="Traversal" /> - - -
- - - - - - - - - - - - - - - - - - - - - - -
- - + + + + + + + + + + + + + + Defense } label="None" /> - {/* */} } label="Poor" /> - } label="Good" /> } label="Exceptional" /> + } label="Good" /> + } label="Exceptional" /> - - } label="Disabled" /> - - + + + +

What they _______

+ + + + + + + +
- - - - - - - - - - - -
- - - )} diff --git a/webserver/src/ProcessedDataBucket.jsx b/webserver/src/ProcessedDataBucket.jsx index 50c1aa3..2f92ecc 100644 --- a/webserver/src/ProcessedDataBucket.jsx +++ b/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, - // climbs_low: 0, - // climbs_mid: 0, - // climbs_high: 0, - // climbs_transverse: 0, - points_average: 0, + average_auto_points: 0, + average_teleop_hub_points: 0, + average_climb_points: 0, + average_total_match_points: 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 = - (parseInt(doc.taxi_auto) ? 2 : 0) + - parseInt(doc.upper_hub_auto) * 4 + - parseInt(doc.lower_hub_auto) * 2 + - 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); + let auto_points = (parseInt(doc.taxi_auto) ? 2 : 0) + parseInt(doc.upper_hub_auto) * 4 + parseInt(doc.lower_hub_auto) * 2; + let teleop_hub_points = parseInt(doc.upper_hub_teleop) * 2 + parseInt(doc.lower_hub_teleop) * 1; + 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); + let total_match_points = auto_points + teleop_hub_points + climb_points; //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) { - return accum + current; - }, 0); - thisTeamData.points_average = total_points / thisTeamData.games_played; + //function for getting the sum of an array, use in reduce function of array + const sum = (accum, current) => accum + current; + thisTeamData.average_auto_points = thisTeamData.data_sets.auto_points.reduce(sum, 0) / thisTeamData.matched_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!"); diff --git a/webserver/src/components/InputNumberField.jsx b/webserver/src/components/InputNumberField.jsx index 10d382b..81f1e38 100644 --- a/webserver/src/components/InputNumberField.jsx +++ b/webserver/src/components/InputNumberField.jsx @@ -1,38 +1,25 @@ import React from "react"; import { Formik, FastField, Form, useFormikContext } 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 { TextField, Button, Grid, FormRow, Checkbox, Radio, FormControlLabel, FormControl, FormLabel, RadioGroup, IconButton, InputAdornment } from "@mui/material"; +import { AddCircleOutline, RemoveCircleOutline } from "@mui/icons-material"; const InputNumberField = (props) => { const { values, setFieldValue } = useFormikContext(); return ( { setFieldValue(props.name, Math.max(parseInt(values[props.name]) - 1, 0)); }} - style={{ width: '96px', height: '96px', padding: '24px' }} touch="true" > @@ -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" > diff --git a/webserver/src/components/Navigation/Drawer/SideDrawer.css b/webserver/src/components/Navigation/Drawer/SideDrawer.css index af22f4b..cb0eeb2 100644 --- a/webserver/src/components/Navigation/Drawer/SideDrawer.css +++ b/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, diff --git a/webserver/src/components/Navigation/Navigation.css b/webserver/src/components/Navigation/Navigation.css index 86545cd..3fbe0fc 100644 --- a/webserver/src/components/Navigation/Navigation.css +++ b/webserver/src/components/Navigation/Navigation.css @@ -4,5 +4,5 @@ top: 0; left: 0; width: 100%; - z-index: 1; + z-index: 2; }