Revert "Merge branch 'Data-Visualization' of https://github.com/Patribots4738/ScoutingBackend2024 into Data-Visualization"

This reverts commit 93c47bd, reversing
changes made to c7656ba.

Author: Oliver-Cushman

package-lock.json

@@ -9,7 +9,6 @@
     "@testing-library/user-event": "^13.5.0",
     "ag-grid-react": "^31.0.1",
     "apexcharts": "^3.45.2",
-    "chroma-js": "^2.4.2",
     "firebase": "^10.7.1",
     "firebase-admin": "^12.0.0",
     "fs": "^0.0.1-security",

package.json

@@ -55,6 +55,22 @@
     flex-direction: column;
 }
 
+.match-stats-container {
+    border: 1px solid var(--lighter-background-color);
+    width: 100%;
+    margin-left: 20px;
+    margin-right: 20px;
+    max-height: 250px;
+    margin-top: 5px;
+    box-shadow: 0px 0px 10px rgb(0, 0, 0);
+    display: flex; /* turn the container into a flex container */
+    justify-content: space-around; /* evenly distribute items along the line */
+    flex-wrap: wrap;
+    align-items: center; /* center items along the cross-axis */
+    overflow-y: auto;
+    margin-bottom: 15px;
+}
+
 .match-content-selector {
     width: 200px;
     display: flex;

src/Pages/CompareTeams.css

@@ -15,7 +15,7 @@ function Compare() {
     const [allTeams, setAllTeams] = useState([]);
     const [teamData, setTeamData] = useState([]);
     const [teamMatchData, setTeamMatchData] = useState([]);
-    const [maxMinAverages, setMaxMinAverages] = useState({});
+    const [maxMin, setMaxMin] = useState({});
     const [teamColors, setTeamColors] = useState([]);
     const [teamList, setTeamList] = useState([]);
 
@@ -60,7 +60,7 @@ function Compare() {
                 setAllTeams(getAllTeams(data));
                 setAverageData(data.teamAverageMap);
                 setMatchData(data.bigTeamMap);
-                setMaxMinAverages(data.maxMinOfAverages);
+                setMaxMin(data.maxMin);
             });
         }, 1000);
     }, []);
@@ -236,23 +236,27 @@ function Compare() {
 
     // selects data points from teamData and formats them for
     // the radar chart
-    const convertForReCharts = () => {
+    const convertForReCharts = (isBar) => {
         let arr = [];
         for (let i = 1; i < teamData[0][0].length; i++) {
             if (isRadarPoint(teamData[0][0][i])) {
                 let categoryObj = { key: teamData[0][0][i] };
                 for (let j = 0; j < teamData.length; j++) {
-                    let min = maxMinAverages.get(teamData[j][0][i])[0];
-                    let max = maxMinAverages.get(teamData[j][0][i])[1];
+                    let min = maxMin.get(teamData[j][0][i])[0];
+                    let max = maxMin.get(teamData[j][0][i])[1];
                     let val = ((teamData[j][1][i] - min) / (max - min)) * 100;
-                    categoryObj[teamList[j]] = val; // Use team number as key
+                    if (isBar) {
+                        categoryObj[teamList[j]] = teamData[j][1][i];
+                    } else {
+                        categoryObj[teamList[j]] = val;
+                    }
                 }
                 arr.push(categoryObj);
             }
         }
         console.log(arr);
         return arr;
-    };   
+    };    
 
     const colors = [
         '#d4af37',
@@ -283,7 +287,7 @@ function Compare() {
                     <MyBarChart
                         width={1000}
                         height={250}
-                        data={convertForReCharts()}
+                        data={convertForReCharts(true)}
                         margin={{ top: 5, right: 30, left: 20, bottom: 50 }}
                         barConfigs={teamList.map(
                             (team, index) => colorConfig[`team${index + 1}`]
@@ -295,7 +299,7 @@ function Compare() {
 
                 <div className="radar-ct">
                     <RadarGraph
-                        data={convertForReCharts()}
+                        data={convertForReCharts(false)}
                         angleKey="key"
                         radiusDomain={[0, 100]}
                         radars={teamList.slice(0, 10).map((team, index) => ({

src/Pages/CompareTeams.js

@@ -51,7 +51,7 @@ function Rankings() {
                 "children": [
                     {
                         "name": data.rankingTable[i]["Team"],
-                        "Score": data.rankingTable[i][sortCol]
+                        "Score": data.rankingTable[i]["Score"]
                     }
                 ]
             });

src/Pages/Rankings.js

@@ -1,13 +1,40 @@
-.search {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    width: 100%;
-    background-color: var(--background-color);
-    color: var(--text-color);
-    position: relative
+.search-bar {
+    position: absolute;
+    width: 200px;
+    left: 0;
+    right: 0;
+    top: 60px;
+    margin-left: auto;
+    margin-right: auto;
+    display: inline-flex;
+}
+
+.search-input {
+    position: relative;
+    width: 70%;
+    height: 40px;
+    border-radius: 20px 0px 0px 20px;
+    border: none;
+    outline: none;
+    text-align: center;
+    font-size: 20px;
+}
+
+.search-button {
+    position: relative;
+    border: none;
+    border-radius: 0px 20px 20px 0px;
+    width: 30%;
+    background-color: rgb(230, 230, 230);
+    transition: background-color 0.25s;
+}
+
+.search-button:hover {
+    background-color: rgb(210, 210, 210);
+}
+
+.search-button:active {
+    background-color: rgb(190, 190, 190);
 }
 
 .team-stats {
@@ -23,33 +50,12 @@
     flex-direction: column;
 }
 
-.average-stats-container {
-    border: 1px solid var(--lighter-background-color);
-    width: 100%;
-    margin-left: 20px;
-    margin-right: 20px;
-    max-height: 400px;
-    margin-top: 5px;
-    padding: 0;
-    box-shadow: 0px 0px 10px rgb(0, 0, 0);
-    justify-content: space-around; /* evenly distribute items along the line */
-    flex-wrap: wrap;
-    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* animate border and shadow changes */
-    left: 0;
-    right: 0;
-    margin-left: auto;
-    margin-right: auto;
-    overflow: auto;
-    padding: 0px;
-}
-
 .match-stats-container {
     border: 1px solid var(--lighter-background-color);
     width: 100%;
     margin-left: 20px;
     margin-right: 20px;
-    max-height: 250px;
-    margin-top: 5px;
+    max-height: 280px;
     padding: 0;
     box-shadow: 0px 0px 10px rgb(0, 0, 0);
     justify-content: space-around; /* evenly distribute items along the line */