Added carousel header for stats segments on player page

EmoruwaTolu · Dec 27, 2023 · aa15019 · aa15019
1 parent 49ed3f4
commit aa15019
Show file tree

Hide file tree

Showing 17 changed files with 351 additions and 26 deletions.
diff --git a/prem-data/package-lock.json b/prem-data/package-lock.json
diff --git a/prem-data/package.json b/prem-data/package.json
@@ -60,5 +60,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "css-loader": "^6.8.1",
+    "style-loader": "^3.3.3"
   }
 }
diff --git a/prem-data/src/components/bar-chart/carousel-header.css b/prem-data/src/components/bar-chart/carousel-header.css
@@ -0,0 +1,27 @@
+/* CarouselHeader.css */
+
+.carousel-header {
+    display: flex;
+    list-style: none;
+    padding: 1.2em;
+    margin: 0;
+    border-bottom: 1px #c0c0c0 solid;
+  }
+
+  .carousel-item {
+    flex: 1;
+    text-align: center;
+    padding: 0;
+    cursor: pointer;
+    transition: 0.3s;
+  }
+
+  .selected {
+    font-weight: bold;
+    color: #333;
+  }
+
+  .greyed-out {
+    color: #999;
+  }
+
diff --git a/prem-data/src/components/bar-chart/creation-barchart.js b/prem-data/src/components/bar-chart/creation-barchart.js
@@ -8,7 +8,6 @@ export function CreationBars(stats, percentileGroup){
 
     return(
         <div className="bar-collection">
-            <div className="player-stat-header">Chance Creation</div>
             <div className="bar-info">
                 <div className="bar-title">Expected Assists per 90</div>
                 <Bar props={statistics.standard_stats.xAG} percentileGroup={stats.percentileGroup}/>

diff --git a/prem-data/src/components/bar-chart/defensive-barchart.js b/prem-data/src/components/bar-chart/defensive-barchart.js
@@ -8,7 +8,6 @@ export function DefensiveBars(stats, percentileGroup){
 
     return(
         <div className="bar-collection">
-            <div className="player-stat-header">Defensive Work</div>
             <div className="bar-info">
                 <div className="bar-title">Tackles and Interceptions per 90</div>
                 <Bar props={statistics.defensive_stats.tacklesAndInterceptions90} percentileGroup={stats.percentileGroup}/>

diff --git a/prem-data/src/components/bar-chart/involvement-barchart.js b/prem-data/src/components/bar-chart/involvement-barchart.js
@@ -8,7 +8,6 @@ export function InvolvementBars(stats, percentileGroup){
 
     return(
         <div className="bar-collection">
-            <div className="player-stat-header">Involvement</div>
             <div className="bar-info">
                 <div className="bar-title">Touches per 90</div>
                 <Bar props={statistics.possession_stats.touches90} percentileGroup={stats.percentileGroup}/>

diff --git a/prem-data/src/components/bar-chart/passing-barchart.js b/prem-data/src/components/bar-chart/passing-barchart.js
@@ -8,7 +8,6 @@ export function PassingBars(stats, percentileGroup){
 
     return(
         <div className="bar-collection">
-            <div className="player-stat-header">Passing</div>
             <div className="bar-info">
                 <div className="bar-title">Passes Attempted per 90</div>
                 <Bar props={statistics.passing_stats.passesAttempted90} percentileGroup={stats.percentileGroup}/>

diff --git a/prem-data/src/components/bar-chart/player-carousel-header.js b/prem-data/src/components/bar-chart/player-carousel-header.js
@@ -0,0 +1,66 @@
+import React, {useState} from "react";
+import './bar.css';
+import './carousel-header.css';
+
+class Node {
+    constructor(data) {
+      this.data = data;
+      this.next = null;
+      this.prev = null;
+    }
+  }
+
+class DoublyCircularLinkedList {
+    constructor() {
+      this.head = null;
+      this.tail = null;
+    }
+    append(data) {
+      const newNode = new Node(data);
+
+      if (!this.head) {
+        this.head = newNode;
+        this.tail = newNode;
+      } else {
+        newNode.prev = this.tail;
+        this.tail.next = newNode;
+        this.tail = newNode;
+      }
+
+      this.tail.next = this.head;
+      this.head.prev = this.tail;
+    }
+
+    display() {
+        if (!this.head) {
+            console.log('Doubly Circular Linked List is empty.');
+            return;
+        }
+
+        let current = this.head;
+        do {
+            console.log(current.data);
+            current = current.next;
+        } while (current !== this.head);
+    }
+}
+
+
+
+export default function PlayerCarouselHeader({circularLinkedList, selectedNode, setSelectedNode}){
+
+    const handleTabClickRight = () => {
+        setSelectedNode(selectedNode ? selectedNode.next : circularLinkedList.head);
+    };
+    const handleTabClickLeft = () => {
+        setSelectedNode(selectedNode ? selectedNode.prev : circularLinkedList.tail);
+    };
+
+    return (
+        <ul className="carousel-header">
+            <li className="carousel-item greyed-out" onClick={() => {handleTabClickLeft()}}>{selectedNode.prev.data}</li>
+            <li className="carousel-item selected">{selectedNode.data}</li>
+            <li className="carousel-item greyed-out" onClick={() => {handleTabClickRight()}}>{selectedNode.next.data}</li>
+        </ul>
+    )
+}
diff --git a/prem-data/src/components/bar-chart/progression-barchart.js b/prem-data/src/components/bar-chart/progression-barchart.js
@@ -8,7 +8,6 @@ export function ProgressionBars(stats, percentileGroup){
 
     return(
         <div className="bar-collection">
-            <div className="player-stat-header">Ball Progression</div>
             <div className="bar-info">
                 <div className="bar-title">Progressive Carries per 90</div>
                 <Bar props={statistics.standard_stats.progCarries90} percentileGroup={stats.percentileGroup}/>

diff --git a/prem-data/src/components/bar-chart/scoring-barchart.js b/prem-data/src/components/bar-chart/scoring-barchart.js
@@ -8,7 +8,6 @@ export function ScoringBars(stats, percentileGroup){
 
     return(
         <div className="bar-collection">
-            <div className="player-stat-header">Goal Scoring</div>
             <div className="bar-info">
                 <div className="bar-title">Expected Goals per 90</div>
                 <Bar props={statistics.standard_stats.xG90} percentileGroup={stats.percentileGroup}/>

diff --git a/prem-data/src/pages/page-style.css b/prem-data/src/pages/page-style.css
@@ -141,8 +141,8 @@
     display: flex;
     /* grid-template-columns: repeat(2, 1fr); */
     box-sizing: border-box;
-    overflow-x: scroll;
     font-size: 0.8em;
+    flex-direction: column;
 }
 .player-statistics{
     padding: 1em;

diff --git a/prem-data/src/pages/player-page-body/player-page-body.js b/prem-data/src/pages/player-page-body/player-page-body.js
@@ -6,37 +6,105 @@ import { ProgressionBars } from '../../components/bar-chart/progression-barchart
 import { InvolvementBars } from '../../components/bar-chart/involvement-barchart';
 import { PassingBars } from '../../components/bar-chart/passing-barchart';
 import { DefensiveBars } from '../../components/bar-chart/defensive-barchart';
+import PlayerCarouselHeader from '../../components/bar-chart/player-carousel-header';
 import {useState} from 'react';
 
+class Node {
+    constructor(data) {
+      this.data = data;
+      this.next = null;
+      this.prev = null;
+    }
+  }
+
+class DoublyCircularLinkedList {
+    constructor() {
+      this.head = null;
+      this.tail = null;
+    }
+    append(data) {
+      const newNode = new Node(data);
+
+      if (!this.head) {
+        this.head = newNode;
+        this.tail = newNode;
+      } else {
+        newNode.prev = this.tail;
+        this.tail.next = newNode;
+        this.tail = newNode;
+      }
+
+      this.tail.next = this.head;
+      this.head.prev = this.tail;
+    }
+
+    display() {
+        if (!this.head) {
+            console.log('Doubly Circular Linked List is empty.');
+            return;
+        }
+
+        let current = this.head;
+        do {
+            console.log(current.data);
+            current = current.next;
+        } while (current !== this.head);
+    }
+}
+
 function PlayerPageBody(props){
 
     const [view, setView] = useState(0);
     var percentileGroup = view + 1;
 
-    console.log(view)
+    const circularLinkedList = new DoublyCircularLinkedList();
+    circularLinkedList.append('Goal Scoring');
+    circularLinkedList.append('Chance Creation');
+    circularLinkedList.append('Ball Progression');
+    circularLinkedList.append('Involvement');
+    circularLinkedList.append('Passing');
+    circularLinkedList.append('Defensive Work');
+
+    const [selectedNode, setSelectedNode] = useState(circularLinkedList.head);
+    console.log(selectedNode.data)
 
     return(
         <div className='chart-body'>
             <PlayerPolarChart player={props.player} view={view} setView={setView} />
             <div className='numbers-container'>
-                <div className='player-statistics'>
-                    <ScoringBars stats={props.player} percentileGroup={percentileGroup}/>
-                </div>
-                <div className='player-statistics'>
-                    <CreationBars stats={props.player} percentileGroup={percentileGroup}/>
-                </div>
-                <div className='player-statistics'>
-                    <ProgressionBars stats={props.player} percentileGroup={percentileGroup}/>
-                </div>
-                <div className='player-statistics'>
-                    <InvolvementBars stats={props.player} percentileGroup={percentileGroup}/>
-                </div>
-                <div className='player-statistics'>
-                    <PassingBars stats={props.player} percentileGroup={percentileGroup}/>
-                </div>
-                <div className='player-statistics'>
-                    <DefensiveBars stats={props.player} percentileGroup={percentileGroup}/>
+                <div>
+                    <PlayerCarouselHeader selectedNode={selectedNode} setSelectedNode={setSelectedNode} circularLinkedList={circularLinkedList}/>
                 </div>
+                { selectedNode.data === "Goal Scoring" &&
+                    <div className='player-statistics'>
+                        <ScoringBars stats={props.player} percentileGroup={percentileGroup}/>
+                    </div>
+                }
+                { selectedNode.data === "Chance Creation" &&
+                    <div className='player-statistics'>
+                        <CreationBars stats={props.player} percentileGroup={percentileGroup}/>
+                    </div>
+                }
+                { selectedNode.data === "Ball Progression" &&
+                    <div className='player-statistics'>
+                        <ProgressionBars stats={props.player} percentileGroup={percentileGroup}/>
+                    </div>
+                }
+                { selectedNode.data === "Involvement" &&
+                    <div className='player-statistics'>
+                        <InvolvementBars stats={props.player} percentileGroup={percentileGroup}/>
+                    </div>
+                }
+                { selectedNode.data === "Passing" &&
+                    <div className='player-statistics'>
+                        <PassingBars stats={props.player} percentileGroup={percentileGroup}/>
+                    </div>
+                }
+                { selectedNode.data === "Defensive Work" &&
+                    <div className='player-statistics'>
+                        <DefensiveBars stats={props.player} percentileGroup={percentileGroup}/>
+                    </div>
+                }
             </div>
         </div>
     )