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
team401 · Feb 26, 2024 · 1c73213 · 1c73213
1 parent 16c8070
commit 1c73213
Show file tree

Hide file tree

Showing 11 changed files with 267 additions and 48 deletions.
diff --git 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
@@ -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,15 +108,15 @@ 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,
             Alliance: settings.Alliance == "Red" ? "Blue" : "Red",
           });
         }}
       >
-        <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 },
           },
         }}