From 1c73213cacc46835d4bad1b45501e51a0fcee866 Mon Sep 17 00:00:00 2001
From: GideonC <100504528+TheLumpiest@users.noreply.github.com>
Date: Mon, 26 Feb 2024 18:19:54 -0500
Subject: [PATCH] Data viz (#33)

* fixed the graphing

* Added the Browser router and adjusted the graph

* Finished a preliminary full team graph

* Created a Team Look Up page

* waka

* added qr code

* added a sorter to the table

* Fixed the NavBar for mobile
---
 src/Components/ClimbSelector.tsx |  2 +-
 src/Components/NavBar.tsx        | 12 ++---
 src/Components/TrapSelector.tsx  | 27 ++++++++++
 src/ContextProvider.tsx          |  4 +-
 src/DataEntry.tsx                |  2 +
 src/DataGraphs.tsx               | 34 ++++++------
 src/DataViz/FullTeamGraph.tsx    | 89 +++++++++++++++++++++++++++++++-
 src/DataViz/TeamGraph.tsx        | 84 +++++++++++++++++++++++++-----
 src/DataViz/TeamLookUp.tsx       |  7 ++-
 src/DataViz/TeamTable.tsx        | 50 +++++++++++++++---
 src/Forms/TeleopForm.tsx         |  4 ++
 11 files changed, 267 insertions(+), 48 deletions(-)
 create mode 100644 src/Components/TrapSelector.tsx

diff --git a/src/Components/ClimbSelector.tsx b/src/Components/ClimbSelector.tsx
index c04a90c..4b5e976 100644
--- a/src/Components/ClimbSelector.tsx
+++ b/src/Components/ClimbSelector.tsx
@@ -7,7 +7,7 @@ const opts = [
   "Not Attempted",
   "Attempted but Failed",
   "Climbed",
-  "Climbed with other Robot",
+  "Harmony",
   "Parked",
 ];
 
diff --git a/src/Components/NavBar.tsx b/src/Components/NavBar.tsx
index c0ddb6d..d5fde1a 100644
--- a/src/Components/NavBar.tsx
+++ b/src/Components/NavBar.tsx
@@ -61,7 +61,7 @@ export default function NavBar() {
 
   return (
     <div
-      className={`flex fixed md:relative bottom-0 md:bottom-auto mt-2.5 left-0 md:left-auto justify-between text-sm md:text-lg lg:text-base w-full md:w-auto flex-row grid-1 shadow-lg text-white md:rounded-lg transition font-sans items-center
+      className={`flex fixed  bottom-1 md:bottom-auto sm:bottom-1 mt-2.5 left-1 md:left-auto sm:left-0 justify-between text-sm md:text-lg lg:text-base w-3/4 md:w-auto sm:w-1/2 sm:scroll-smooth flex-row grid-1 shadow-lg text-white md:rounded-lg transition font-sans items-center
       ${settings.Alliance == "Red" ? "bg-red-bg" : "bg-blue-bg"}`}
     >
       {/* <Link
@@ -72,19 +72,19 @@ export default function NavBar() {
         {links.prev.text}
       </Link> */}
       <Link
-        className="bg-black bg-opacity-25 hover:bg-opacity-50 py-2 hidden md:block px-4 rounded-l-lg"
+        className="bg-black bg-opacity-25 hover:bg-opacity-50 py-2  md:block px-4  rounded-l-lg sm:block"
         to="/dataEntry"
       >
         DataEntry
       </Link>
       <Link
-        className="bg-black bg-opacity-25 hover:bg-opacity-50 py-2 hidden md:block px-4"
+        className="bg-black bg-opacity-25 hover:bg-opacity-50 py-2  md:block px-4 sm:block"
         to="/dataGraphs"
       >
         DataGraphs
       </Link>
       <Link
-        className="bg-black bg-opacity-25 hover:bg-opacity-50 py-2 hidden md:block px-4"
+        className="bg-black bg-opacity-25 hover:bg-opacity-50 py-2  md:block px-4 sm:block"
         to="/teamLookUp"
       >
         TeamLookUp
@@ -108,7 +108,7 @@ export default function NavBar() {
         Teleop
       </Link> */}
       <button
-        className="flex-auto flex self-center flex-row bg-black bg-opacity-50 hover:bg-opacity-60 justify-center items-center md:rounded-r-lg md:px-2"
+        className="flex-auto flex self-center flex-row bg-black bg-opacity-50 hover:bg-opacity-60 justify-center items-center md:rounded-r-lg md:px-2 sm:px-2"
         onClick={() => {
           setSettings({
             ...settings,
@@ -116,7 +116,7 @@ export default function NavBar() {
           });
         }}
       >
-        <div className="flex justify-self-center font-semibold py-4 md:py-2 px-1 md:px-2 text-center">
+        <div className="flex justify-self-center font-semibold py-2 md:py-2 px-1 md:px-4 text-center ">
           Alliance
         </div>
         <AllianceSwitch />
diff --git a/src/Components/TrapSelector.tsx b/src/Components/TrapSelector.tsx
new file mode 100644
index 0000000..720f999
--- /dev/null
+++ b/src/Components/TrapSelector.tsx
@@ -0,0 +1,27 @@
+import { Autocomplete, TextField } from "@mui/material";
+import React from "react";
+import { useTeleopContext } from "../ContextProvider";
+import { GetTeamsEvent } from "../Data";
+
+const opts = ["Not Attempted", "Attempted but Failed", "Succesful"];
+
+export default function TrapSelector() {
+  const { teleop, setTeleop } = useTeleopContext();
+
+  return (
+    <Autocomplete
+      value={teleop.Trap}
+      onChange={(event: any, newValue: string | null) => {
+        if (!newValue) return;
+        setTeleop({
+          ...teleop,
+          Trap: newValue,
+        });
+      }}
+      clearOnEscape
+      options={opts}
+      sx={{ width: 300 }}
+      renderInput={(params) => <TextField {...params} label="Trap" />}
+    />
+  );
+}
diff --git a/src/ContextProvider.tsx b/src/ContextProvider.tsx
index 6fa5b02..921fe14 100644
--- a/src/ContextProvider.tsx
+++ b/src/ContextProvider.tsx
@@ -66,6 +66,7 @@ type Teleop = {
   Speaker_Made: number;
   Speaker_Missed: number;
   EndGame: string;
+  Trap: string;
   Text: string;
 };
 
@@ -76,7 +77,7 @@ type TeleopState = {
 
 export const defaultData: DataViz = {
   Competition: "2024chcmp",
-  Team: "",
+  Team: "401",
   TeamsList: [],
   NickName: "",
   AllComps: false,
@@ -94,6 +95,7 @@ export const defaultTeleop: Teleop = {
   Speaker_Made: 0,
   Speaker_Missed: 0,
   EndGame: "Not Attempted",
+  Trap: "Not Attempted",
   Text: "",
 };
 export const defaultSettings: Settings = {
diff --git a/src/DataEntry.tsx b/src/DataEntry.tsx
index 82c0b54..04827d6 100644
--- a/src/DataEntry.tsx
+++ b/src/DataEntry.tsx
@@ -51,6 +51,7 @@ export default function DataEntry() {
       Teleop_Speaker_Missed: teleop.Speaker_Missed,
       Teleop_Speaker_Made: teleop.Speaker_Made,
       Endgame: teleop.EndGame,
+      Trap: teleop.Trap,
       Comments: teleop.Text,
     });
     if (error) {
@@ -74,6 +75,7 @@ export default function DataEntry() {
         teleop.Speaker_Missed!,
         teleop.Speaker_Made!,
         teleop.EndGame!,
+        teleop.Trap!,
         teleop.Text!,
       ].toString()
     );
diff --git a/src/DataGraphs.tsx b/src/DataGraphs.tsx
index 07d9706..298a4b1 100644
--- a/src/DataGraphs.tsx
+++ b/src/DataGraphs.tsx
@@ -8,22 +8,26 @@ export default function DataGraphs() {
   return (
     <div
       className={`transition min-h-screen w-screen font-sans flex flex-col items-center
-       `}
+      `}
     >
-      <div className="w-11/12 h-full md:h-min md:w-min">
-        <div className="grid grid-auto-rows-auto gap-y-3">
-          <div className="bg-white text-black rounded-xl p-10 mt-5 shadow-lg w-full h-full flex flex-col items-center">
-            <CompetitionSelector
-              value={dataViz.Competition}
-              onChange={(event, newValue: string | null) =>
-                setDataViz({
-                  ...dataViz,
-                  Competition: newValue!,
-                })
-              }
-            />
-            <FullTeamGraph />
-            <TeamTable />
+      <div className="w-11/12 h-full md:h-min md:w-3/4">
+        <div className="min-h-screen">
+          <div className="grid grid-auto-rows-auto gap-y-3 mb-5">
+            <div className="bg-white text-black rounded-xl p-10 mt-5 shadow-lg w-1/2 overflow-scroll h-full flex flex-col items-center">
+              <CompetitionSelector
+                value={dataViz.Competition}
+                onChange={(event, newValue: string | null) =>
+                  setDataViz({
+                    ...dataViz,
+                    Competition: newValue!,
+                  })
+                }
+              />
+              <FullTeamGraph />
+            </div>
+            <div className="bg-white text-black rounded-xl p-10 mt-5 shadow-lg w-1/2 overflow-scroll h-full flex flex-col items-center content-center">
+              <TeamTable />
+            </div>
           </div>
         </div>
       </div>
diff --git a/src/DataViz/FullTeamGraph.tsx b/src/DataViz/FullTeamGraph.tsx
index dfa655d..a3b06dc 100644
--- a/src/DataViz/FullTeamGraph.tsx
+++ b/src/DataViz/FullTeamGraph.tsx
@@ -23,6 +23,91 @@ export async function getEventData(competition: string) {
   }
   return resp;
 }
+export async function fetchClimbAvg(team: string) {
+  const { data, error } = await supabase
+    .from("Scout_Data")
+    .select("team, Endgame")
+    .eq("team", team);
+  const resp = await data;
+  if (error) {
+    console.log("you bad", error);
+    return;
+  }
+  if (!resp || resp == null || resp == undefined) {
+    return 0;
+  }
+  const values: string[] = await resp!.map(
+    (a: { Endgame: string }) => a.Endgame
+  );
+  if (values.length == 0 || values == null || values == undefined) {
+    return 0;
+  }
+  let sum = 0;
+  for (const value of values) {
+    if (value == "Parked") {
+      sum += 1;
+    } else if (value == "Climbed") {
+      sum += 3;
+    } else if (value == "Harmony ") {
+      sum += 5;
+    }
+  }
+  let avg = sum / values.length;
+  return avg;
+}
+export async function fetchTaxiAvg(team: string) {
+  const { data, error } = await supabase
+    .from("Scout_Data")
+    .select("team, Taxi")
+    .eq("team", team);
+  const resp = await data;
+  if (error) {
+    console.log("you bad", error);
+    return 0;
+  }
+  if (!resp || resp == null || resp == undefined) {
+    return 0;
+  }
+  const values: boolean[] = await resp!.map((a: { Taxi: boolean }) => a.Taxi);
+  if (values.length == 0 || values == null || values == undefined) {
+    return 0;
+  }
+  let sum = 0;
+  for (const value of values) {
+    if (value) {
+      sum++;
+    }
+  }
+  let avg = sum / values.length;
+  console.log("Taxi Avg:", avg);
+  return avg;
+}
+export async function fetchTrapAvg(team: string) {
+  const { data, error } = await supabase
+    .from("Scout_Data")
+    .select("team, Trap")
+    .eq("team", team);
+  const resp = await data;
+  if (error) {
+    console.log("you bad", error);
+    return 0;
+  }
+  if (!resp || resp == null || resp == undefined) {
+    return 0;
+  }
+  const values: string[] = await resp!.map((a: { Trap: string }) => a.Trap);
+  if (values.length == 0 || values == null || values == undefined) {
+    return 0;
+  }
+  let sum = 0;
+  for (const value of values) {
+    if (value == "Succesful") {
+      sum += 1;
+    }
+  }
+  let avg = sum / values.length;
+  return avg;
+}
 export default function FullTeamGraph() {
   const { dataViz } = useDataVizContext();
 
@@ -198,14 +283,14 @@ export default function FullTeamGraph() {
   return (
     <div>
       <BarChart
-        width={600}
+        width={500}
         height={300}
         margin={{ left: 200 }}
         slotProps={{
           legend: {
             direction: "column",
             position: { vertical: "top", horizontal: "left" },
-            padding: -1,
+            padding: 0,
             labelStyle: { fontSize: 12 },
           },
         }}
diff --git a/src/DataViz/TeamGraph.tsx b/src/DataViz/TeamGraph.tsx
index 52fac7c..c024ecc 100644
--- a/src/DataViz/TeamGraph.tsx
+++ b/src/DataViz/TeamGraph.tsx
@@ -1,10 +1,15 @@
 import * as React from "react";
 import { BarChart } from "@mui/x-charts/BarChart";
 import supabase from "../Supabase/supabaseClient";
-import { BackHand } from "@mui/icons-material";
+import { BackHand, FitScreen } from "@mui/icons-material";
 import { useDataVizContext } from "../ContextProvider";
 import { useEffect, useState } from "react";
-import { getEventData } from "./FullTeamGraph";
+import {
+  fetchClimbAvg,
+  fetchTaxiAvg,
+  fetchTrapAvg,
+  getEventData,
+} from "./FullTeamGraph";
 
 export async function getFullTeamData(team: string) {
   const { data, error } = await supabase
@@ -27,6 +32,9 @@ export default function TeamGraph() {
     [0],
     [0],
     [0],
+    [0],
+    [0],
+    [0],
   ]);
   useEffect(() => {
     if (dataViz.AllComps) fetchAveragesAll();
@@ -66,10 +74,10 @@ export default function TeamGraph() {
 
     if (!teamData[0] || teamData[0] == null || teamData[0] == undefined) {
       console.log("no team data");
-      setAvgTeamData([[0], [0], [0], [0]]);
-      return [[0], [0], [0], [0]];
+      setAvgTeamData([[0], [0], [0], [0], [0], [0], [0]]);
+      return [[0], [0], [0], [0], [0], [0], [0]];
     }
-    let avgTeamData: number[][] = [[], [], [], []];
+    let avgTeamData: number[][] = [[], [], [], [], [], [], []];
     for (let i = 0; i < teamData[0].length; i++) {
       let sum = 0;
       for (const element of teamData) {
@@ -84,7 +92,30 @@ export default function TeamGraph() {
       avgTeamData[0] == undefined
     ) {
       console.log("no team data");
-      return [[0], [0], [0], [0]];
+      return [[0], [0], [0], [0], [0], [0], [0]];
+    }
+    let climb = await fetchClimbAvg(dataViz.Team);
+    if (climb == null || !climb || climb == undefined) {
+      climb = 0;
+    }
+    let taxi = await fetchTaxiAvg(dataViz.Team);
+    if (taxi == null || taxi == undefined) {
+      taxi = 0;
+    }
+    let trap = await fetchTrapAvg(dataViz.Team);
+    if ((trap == null || trap == undefined) && trap <= 1) {
+      trap = 0;
+    }
+    avgTeamData[4].push(climb);
+    avgTeamData[5].push(taxi);
+    avgTeamData[6].push(trap);
+    if (
+      !avgTeamData[4] ||
+      avgTeamData[4] == null ||
+      avgTeamData[4] == undefined
+    ) {
+      console.log("no climb data");
+      return [[0], [0], [0], [0], [0], [0], [0]];
     }
     console.log("avgTeamData", avgTeamData);
     setAvgTeamData(avgTeamData);
@@ -124,10 +155,10 @@ export default function TeamGraph() {
 
     if (!teamData[0] || teamData[0] == null || teamData[0] == undefined) {
       console.log("no team data");
-      setAvgTeamData([[0], [0], [0], [0]]);
-      return [[0], [0], [0], [0]];
+      setAvgTeamData([[0], [0], [0], [0], [0], [0], [0]]);
+      return [[0], [0], [0], [0], [0], [0], [0]];
     }
-    let avgTeamData: number[][] = [[], [], [], []];
+    let avgTeamData: number[][] = [[], [], [], [], [], [], []];
     for (let i = 0; i < teamData[0].length; i++) {
       let sum = 0;
       for (const element of teamData) {
@@ -142,7 +173,30 @@ export default function TeamGraph() {
       avgTeamData[0] == undefined
     ) {
       console.log("no team data");
-      return [[0], [0], [0], [0]];
+      return [[0], [0], [0], [0], [0], [0], [0]];
+    }
+    let climb = await fetchClimbAvg(dataViz.Team);
+    if (climb == null || !climb || climb == undefined) {
+      climb = 0;
+    }
+    let taxi = await fetchTaxiAvg(dataViz.Team);
+    if (taxi == null || !taxi || taxi == undefined) {
+      taxi = 0;
+    }
+    let trap = await fetchTrapAvg(dataViz.Team);
+    if (trap == null || !trap || trap == undefined) {
+      trap = 0;
+    }
+    avgTeamData[4].push(climb);
+    avgTeamData[5].push(taxi);
+    avgTeamData[6].push(trap);
+    if (
+      !avgTeamData[4] ||
+      avgTeamData[4] == null ||
+      avgTeamData[4] == undefined
+    ) {
+      console.log("no climb data");
+      return [[0], [0], [0], [0], [0], [0], [0]];
     }
     console.log("avgTeamData", avgTeamData);
     setAvgTeamData(avgTeamData);
@@ -151,13 +205,14 @@ export default function TeamGraph() {
   return (
     <BarChart
       height={400}
-      width={600}
-      margin={{ left: 200 }}
+      width={500}
+      sx={{ maxWidth: 600, width: 300 }}
+      margin={{ left: 150 }}
       slotProps={{
         legend: {
           direction: "column",
           position: { vertical: "top", horizontal: "left" },
-          padding: -1,
+          padding: 0,
           labelStyle: { fontSize: 12 },
         },
       }}
@@ -166,6 +221,9 @@ export default function TeamGraph() {
         { data: avgTeamData[1], label: "Auto_Speaker" },
         { data: avgTeamData[2], label: "Tele_Amp" },
         { data: avgTeamData[3], label: "Tele_Speaker" },
+        { data: avgTeamData[4], label: "Climb_Score" },
+        { data: avgTeamData[5], label: "Taxi (1 = 100%)" },
+        { data: avgTeamData[6], label: "Trap (1 = 100%)" },
       ]}
       xAxis={[{ data: [dataViz.Team], scaleType: "band" }]}
     />
diff --git a/src/DataViz/TeamLookUp.tsx b/src/DataViz/TeamLookUp.tsx
index 891baef..aabe7e6 100644
--- a/src/DataViz/TeamLookUp.tsx
+++ b/src/DataViz/TeamLookUp.tsx
@@ -54,7 +54,7 @@ export default function DataGraphs() {
        `}
     >
       <div className="w-11/12 h-full md:h-min md:w-min">
-        <div className="bg-white text-black rounded-xl p-10 mt-5 shadow-lg w-full h-full flex flex-col items-center">
+        <div className="bg-white text-black rounded-xl p-10 mt-5 shadow-lg w-full overflow-scroll h-full flex flex-col items-center">
           <Typography variant="h5">Name: {dataViz.NickName}</Typography>
 
           <Grid
@@ -63,6 +63,7 @@ export default function DataGraphs() {
             direction={"column"}
             flexGrow={12}
             marginTop={2}
+            overflow={"scroll"}
           >
             <Grid item alignContent={"flex-start"} justifyItems={"start"}>
               <TeamSelector
@@ -102,7 +103,9 @@ export default function DataGraphs() {
               />
             </Grid>
           </Grid>
-          <TeamGraph />
+          <Grid item>
+            <TeamGraph />
+          </Grid>
         </div>
       </div>
     </div>
diff --git a/src/DataViz/TeamTable.tsx b/src/DataViz/TeamTable.tsx
index 3c70880..0372af5 100644
--- a/src/DataViz/TeamTable.tsx
+++ b/src/DataViz/TeamTable.tsx
@@ -12,7 +12,12 @@ import {
   TableRow,
 } from "@mui/material";
 import { GetTeamsEvent } from "../Data";
-import { getEventData } from "./FullTeamGraph";
+import {
+  fetchClimbAvg,
+  fetchTaxiAvg,
+  fetchTrapAvg,
+  getEventData,
+} from "./FullTeamGraph";
 
 import { alpha } from "@mui/material/styles";
 import Box from "@mui/material/Box";
@@ -38,6 +43,7 @@ interface Data {
   Teleop_Speaker: number;
   Climb_Score: number;
   Taxi: number;
+  Trap: number;
 }
 
 function createData(
@@ -48,7 +54,8 @@ function createData(
   Teleop_Amp: number,
   Teleop_Speaker: number,
   Climb_Score: number,
-  Taxi: number
+  Taxi: number,
+  Trap: number
 ) {
   return {
     name,
@@ -59,6 +66,7 @@ function createData(
     Teleop_Speaker,
     Climb_Score,
     Taxi,
+    Trap,
   };
 }
 
@@ -141,13 +149,32 @@ const headCells: readonly HeadCell[] = [
     id: "Teleop_Amp",
     numeric: true,
     disablePadding: true,
-    label: "Average_Teleop_Amp",
+    label: "Avg_Teleop_Amp",
+
   },
   {
     id: "Teleop_Speaker",
     numeric: true,
     disablePadding: false,
-    label: "Average_Teleop_Speaker",
+    label: "Avg_Teleop_Speaker",
+  },
+  {
+    id: "Climb_Score",
+    numeric: true,
+    disablePadding: false,
+    label: "Avg_Climb_Score",
+  },
+  {
+    id: "Taxi",
+    numeric: true,
+    disablePadding: false,
+    label: "Taxi (%)",
+  },
+  {
+    id: "Trap",
+    numeric: true,
+    disablePadding: false,
+    label: "Trap (%)",
   },
 ];
 
@@ -362,6 +389,9 @@ export default function EnhancedTable() {
     for (const team of teamsList) {
       const averages = await fetchAveragesComp(team);
       const nickName = await getNickName(team);
+      const climb = Math.trunc((await fetchClimbAvg(team))!);
+      const taxi = Math.trunc((await fetchTaxiAvg(team))!) * 100;
+      const trap = Math.trunc((await fetchTrapAvg(team))!) * 100;
       rows.push(
         createData(
           nickName,
@@ -370,8 +400,9 @@ export default function EnhancedTable() {
           averages[1][0],
           averages[2][0],
           averages[3][0],
-          1,
-          1
+          climb!,
+          taxi!,
+          trap!
         )
       );
     }
@@ -455,8 +486,7 @@ export default function EnhancedTable() {
       <Paper sx={{ width: "100%", mb: 2 }}>
         <EnhancedTableToolbar numSelected={selected.length} />
         <TableContainer>
-          <Table
-            sx={{ minWidth: 750 }}
+            sx={{ maxWidth: 250 }}
             aria-labelledby="tableTitle"
             size={dense ? "small" : "medium"}
           >
@@ -500,6 +530,10 @@ export default function EnhancedTable() {
                     <TableCell align="right">{row.Auto_Speaker}</TableCell>
                     <TableCell align="right">{row.Teleop_Amp}</TableCell>
                     <TableCell align="right">{row.Teleop_Speaker}</TableCell>
+                    <TableCell align="right">{row.Climb_Score}</TableCell>
+                    <TableCell align="right">{row.Taxi}</TableCell>
+                    <TableCell align="right">{row.Trap}</TableCell>
+
                   </TableRow>
                 );
               })}
diff --git a/src/Forms/TeleopForm.tsx b/src/Forms/TeleopForm.tsx
index ce17d38..06214a9 100644
--- a/src/Forms/TeleopForm.tsx
+++ b/src/Forms/TeleopForm.tsx
@@ -5,6 +5,7 @@ import { useTeleopContext } from "../ContextProvider";
 import ScoreCounter from "../Components/ScoreCounter";
 import { Grid } from "@mui/material";
 import ClimbSelector from "../Components/ClimbSelector";
+import TrapSelector from "../Components/TrapSelector";
 
 export default function TeleopForm() {
   const { teleop, setTeleop } = useTeleopContext();
@@ -64,6 +65,9 @@ export default function TeleopForm() {
             <Grid item>
               <ClimbSelector />
             </Grid>
+            <Grid item>
+              <TrapSelector />
+            </Grid>
           </Grid>
         </div>