Added percentiles for player compare chart

EmoruwaTolu · Feb 3, 2024 · 1a41f08 · 1a41f08
1 parent f2e1e93
commit 1a41f08
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 8 deletions.
diff --git a/prem-data/src/components/compare-page/compare-function.js b/prem-data/src/components/compare-page/compare-function.js
@@ -76,7 +76,6 @@ const normalizeNames = {'Expected Goals per 90': 'xG90',
 const findNestedField = (obj, targetField) => {
     for (const key in obj) {
         if (key === targetField) {
-            console.log(obj[key][0]);
             return obj[key][0];
         } 
         else if (typeof obj[key] === 'object') {
@@ -89,7 +88,7 @@ const findNestedField = (obj, targetField) => {
     return undefined; // Field not found
 };
 
-export default function RadarAxisMaker({player1, player2, attributes}){
+export default function RadarAxisMaker({player1, player2, attributes, }){
 
     var playerChartList = [];
 

diff --git a/prem-data/src/components/compare-page/compare-player-section.css b/prem-data/src/components/compare-page/compare-player-section.css
@@ -35,4 +35,87 @@
 }
 .compare-search-field{
     width: 40%;
+    height: fit-content;
+}
+
+.percentile-toggle {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+}
+.percentile-toggle p {
+    color: white;
+    font-size: 0.8em;
+}
+
+
+/* slider */
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 20px;
+  }
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 2px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(36px);
+    -ms-transform: translateX(36px);
+    transform: translateX(36px);
+}
+
+  /* Rounded sliders */
+.slider.round {
+    border-radius: 12px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+.percentile-options{
+    color: white;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+}
+.compare-image-percentile{
+    display: flex;
+    height: 70%;
+    align-items: center;
+    justify-content: center;
 }
diff --git a/prem-data/src/components/compare-page/compare-player-section.js b/prem-data/src/components/compare-page/compare-player-section.js
@@ -10,6 +10,8 @@ const ComparePlayerSection = ({setPlayer}) => {
     const [player1, setPlayer1] = useState();
     const [player2, setPlayer2] = useState();
     const [selectedItems, setSelectedItems] = useState([]);
+    const [isPercentileMode, setIsPercentileMode] = useState(false);
+    const [percentileComparer, setPercentileComparer] = useState(0);
 
 
     const options = ['Expected Goals per 90', 
@@ -87,8 +89,10 @@ const ComparePlayerSection = ({setPlayer}) => {
         setSelectedItems(checkedItems);
     };
 
-    console.log(player1)
-    console.log(player2)
+    const handlePercentileToggle = event => {
+        setIsPercentileMode(current => !current);
+        setPercentileComparer(0);
+    };
 
     return(
         <div className="compare-body">
@@ -100,18 +104,48 @@ const ComparePlayerSection = ({setPlayer}) => {
             <div className="player-display">
                 <div className="compare-search-fields">
                     <div className="compare-search-field">
-                        {
-                            player1 && <img src={player1.image}></img>
+                        {player1 && 
+                            <div className="compare-image-percentile">
+                                <img src={player1.image}></img>
+                                {
+                                    isPercentileMode && player1.position.includes(",") && 
+                                    <div className="percentile-options">
+                                        <input type="radio" id={1} name="drone" value={1}  />
+                                        <label for={1}>{player1.position.split(",")[0]}</label>
+                                        <input type="radio" id={2} name="drone" value={2}  />
+                                        <label for={1}>{player1.position.split(",")[1]}</label>
+                                    </div>
+
+                                }
+                            </div>
                         }
                         <Autocompletion setPlayer={setPlayer1}/>
                     </div>
                     <div className="compare-search-field">
-                        {
-                            player2 && <img src={player2.image}></img>
+                        {player2 && 
+                            <div className="compare-image-percentile">
+                                <img src={player2.image}></img>
+                                {
+                                    isPercentileMode && player2.position.includes(",") && 
+                                    <div className="percentile-options">
+                                        <input type="radio" id={1} name="drone" value={0} onCha />
+                                        <label for={1}>{player2.position.split(",")[0]}</label>
+                                        <input type="radio" id={2} name="drone" value={2}  />
+                                        <label for={1}>{player2.position.split(",")[1]}</label>
+                                    </div>
+                                }
+                            </div>
                         }
                         <Autocompletion setPlayer={setPlayer2}/>
                     </div>
                 </div>
+                <div className="percentile-toggle">
+                    <p>Use percentiles on graph</p>
+                    <label class="switch">
+                        <input type="checkbox" value={isPercentileMode} onChange={handlePercentileToggle}></input>
+                        <span class="slider round"></span>
+                    </label>
+                </div>
                 <RadarAxisMaker player1={player1} player2={player2} attributes={selectedItems} />
             </div>
         </div>