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

Author: RudyG252

package-lock.json

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

src/Pages/Rankings.js

@@ -1,40 +1,13 @@
-.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);
+.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
 }
 
 .team-stats {
@@ -50,12 +23,33 @@
     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: 280px;
+    max-height: 250px;
+    margin-top: 5px;
     padding: 0;
     box-shadow: 0px 0px 10px rgb(0, 0, 0);
     justify-content: space-around; /* evenly distribute items along the line */