From 48a25b74cf8b923951bff97ff2ab16ba705aa8af Mon Sep 17 00:00:00 2001
From: Tolu <emoruwatoluwanimi@gmail.com>
Date: Fri, 1 Dec 2023 08:27:28 -0500
Subject: [PATCH] More data added to player pages

---
 prem-data/src/components/bar-chart/bar.css    | 18 ++++--
 prem-data/src/components/bar-chart/bar.js     | 41 +++++++++++--
 .../src/components/bar-chart/barchart.js      | 55 -----------------
 .../components/bar-chart/creation-barchart.js | 58 ++++++++++++++++++
 .../bar-chart/involvement-barchart.js         | 59 +++++++++++++++++++
 .../components/bar-chart/passing-barchart.js  | 46 +++++++++++++++
 .../bar-chart/progression-barchart.js         | 59 +++++++++++++++++++
 .../components/bar-chart/scoring-barchart.js  | 54 +++++++++++++++++
 .../src/components/player-polar-chart.js      | 13 ++--
 .../player-page-body/player-page-body.js      | 28 ++++++---
 10 files changed, 352 insertions(+), 79 deletions(-)
 delete mode 100644 prem-data/src/components/bar-chart/barchart.js
 create mode 100644 prem-data/src/components/bar-chart/creation-barchart.js
 create mode 100644 prem-data/src/components/bar-chart/involvement-barchart.js
 create mode 100644 prem-data/src/components/bar-chart/passing-barchart.js
 create mode 100644 prem-data/src/components/bar-chart/progression-barchart.js
 create mode 100644 prem-data/src/components/bar-chart/scoring-barchart.js

diff --git a/prem-data/src/components/bar-chart/bar.css b/prem-data/src/components/bar-chart/bar.css
index f8c5786..82908fe 100644
--- a/prem-data/src/components/bar-chart/bar.css
+++ b/prem-data/src/components/bar-chart/bar.css
@@ -12,6 +12,9 @@
 .bar-info{
     margin-bottom: 1em;
 }
+.bar-title{
+    margin-bottom: 0.2em;
+}
 .bar {
     width: 100%;
     overflow: hidden; /* Hide overflow content */
@@ -26,14 +29,17 @@
 .jam {
     display: flex;
     justify-content: space-between;
-    background-color: lightblue;
-    animation: growAnimation 2s forwards;
     box-sizing: border-box;
     border-radius: 16px;
-    color: #838389;
+    color: #FFFFFF;
+    animation: growAnimation 2s forwards;
     width: 85%;
-
 }
-.bar:hover{
-    cursor: pointer;
+.inner-bar{
+    display: flex;
+    justify-content: center;
+    border-radius: 16px;
+    padding: 0.5em 1em;
+    box-sizing: border-box;
+    opacity: 0.7;
 }
\ No newline at end of file
diff --git a/prem-data/src/components/bar-chart/bar.js b/prem-data/src/components/bar-chart/bar.js
index 34241da..e09580f 100644
--- a/prem-data/src/components/bar-chart/bar.js
+++ b/prem-data/src/components/bar-chart/bar.js
@@ -1,19 +1,52 @@
 import React from "react";
 import './bar.css';
 
-export function Bar(props){
+export function Bar(props, percentileGroup){
     
     var stats = props.props;
-    console.log(stats)
+
+    var colour = perc2color(stats[props.percentileGroup]);
+
+    var percentileAlignment = "left";
+
+    if(stats[props.percentileGroup] <= 14){
+        percentileAlignment = "center"
+    }
 
     return(
         <div className="bar">
             <div className="value">{stats[0]}</div>
             <div className="jam">
-                <div style={{width:`${stats[1]}%`, backgroundColor: "beige", borderRadius: "16px", padding: "0.5em 1em", boxSizing: "border-box"}}>
-                    <div>{stats[1]}</div>
+                <div className="inner-bar" style={{width:`${stats[props.percentileGroup]}%`, backgroundColor: `${colour}`, justifyContent: `${percentileAlignment}`}}>
+                    <div>{stats[props.percentileGroup]}</div>
                 </div>
             </div>
         </div>
     )
+}
+
+//The function aims to give the statistics a colour based on it's percentage - red(really bad) green(really good)
+function perc2color(perc) {
+    var r, g, b = 0;
+    if(perc < 50) {
+        r = 255;
+        g = Math.round(5.1 * perc);
+    }
+    else {
+        g = 255;
+        r = Math.round(510 - 5.10 * perc);
+    }
+
+    //The if block below is used to make our colours a slightly darker shade to improve contrast and user visibility
+    if(r !== 0){
+        r -= Math.round(r*0.1)
+    }
+    if(g !== 0){
+        g -= Math.round(g*0.1)
+    }
+    if(b !== 0){
+        b -= Math.round(b*0.1)
+    }
+    var h = r * 0x10000 + g * 0x100 + b * 0x1;
+    return ('#' + ('000000' + h.toString(16)).slice(-6));
 }
\ No newline at end of file
diff --git a/prem-data/src/components/bar-chart/barchart.js b/prem-data/src/components/bar-chart/barchart.js
deleted file mode 100644
index 8315516..0000000
--- a/prem-data/src/components/bar-chart/barchart.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from "react";
-import './bar.css';
-import { Bar } from "./bar";
-
-export function Bars(stats, percentileGroup){
-
-    var statistics =  stats.stats;
-    console.log(statistics)
-
-
-    return(
-        <div className="bar-collection">
-            <div className="bar-info">
-                Expected Goals per 90
-                <Bar props={statistics.standard_stats.xG90}/>
-            </div>
-            <div className="bar-info">
-                Non-penalty xG per 90
-                <Bar props={statistics.standard_stats.nonPenXG90}/>
-            </div>
-            <div className="bar-info">
-                Goals per 90
-                <Bar props={statistics.standard_stats.goals90}/>
-            </div>
-            <div className="bar-info">
-                Non-penalty Goals per 90
-                <Bar props={statistics.standard_stats.nonPenGoals90}/>
-            </div>
-            <div className="bar-info">
-                Goals minus xG
-                <Bar props={statistics.shooting_stats.goalsMinusXG}/>
-            </div>
-            <div className="bar-info">
-                Goals minus Non-penalty xG
-                <Bar props={statistics.shooting_stats.nonPenGoalsMinusXG}/>
-            </div>
-            <div className="bar-info">
-                Non-penalty xG per Shot
-                <Bar props={statistics.shooting_stats.nonPenXGPerShot90}/>
-            </div>
-            <div className="bar-info">
-                Shots per 90
-                <Bar props={statistics.shooting_stats.shots90}/>
-            </div>
-            <div className="bar-info">
-                Shots on Target per 90
-                <Bar props={statistics.shooting_stats.shotOnTarget90}/>
-            </div>
-            <div className="bar-info">
-                Avg. Shot Distance from Goal
-                <Bar props={statistics.shooting_stats.avgShotDistance}/>
-            </div>
-        </div>
-    )
-}
\ No newline at end of file
diff --git a/prem-data/src/components/bar-chart/creation-barchart.js b/prem-data/src/components/bar-chart/creation-barchart.js
new file mode 100644
index 0000000..d8b8abb
--- /dev/null
+++ b/prem-data/src/components/bar-chart/creation-barchart.js
@@ -0,0 +1,58 @@
+import React from "react";
+import './bar.css';
+import { Bar } from "./bar";
+
+export function CreationBars(stats, percentileGroup){
+
+    var statistics =  stats.stats;
+
+    return(
+        <div className="bar-collection">
+            <div>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}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Assists per 90</div>
+                <Bar props={statistics.standard_stats.nonPenXG90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Key Passes per 90</div>
+                <Bar props={statistics.passing_stats.keyPasses90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Goal Creating Actions per 90</div>
+                <Bar props={statistics.shot_goalCreation.goalCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Goal Creating Actions from Live Balls per 90</div>
+                <Bar props={statistics.shot_goalCreation.liveBallGoalCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Goal Creating Actions from Dead Balls per 90</div>
+                <Bar props={statistics.shot_goalCreation.deadBallGoalCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Goal Creating Actions from Take-ons per 90</div>
+                <Bar props={statistics.shot_goalCreation.takeOnGoalCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Shot Creating Actions per 90</div>
+                <Bar props={statistics.shot_goalCreation.shotCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Shot Creating Actions from Live Balls per 90</div>
+                <Bar props={statistics.shot_goalCreation.liveBallShotCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Shot Creating Actions from Dead Balls per 90</div>
+                <Bar props={statistics.shot_goalCreation.deadBallShotCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Shot Creating Actions from Take-ons per 90</div>
+                <Bar props={statistics.shot_goalCreation.takeOnShotCreateAct90} percentileGroup={stats.percentileGroup}/>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/prem-data/src/components/bar-chart/involvement-barchart.js b/prem-data/src/components/bar-chart/involvement-barchart.js
new file mode 100644
index 0000000..032dbe9
--- /dev/null
+++ b/prem-data/src/components/bar-chart/involvement-barchart.js
@@ -0,0 +1,59 @@
+import React from "react";
+import './bar.css';
+import { Bar } from "./bar";
+
+export function InvolvementBars(stats, percentileGroup){
+
+    var statistics =  stats.stats;
+
+    return(
+        <div className="bar-collection">
+            <div>Ball Security</div>
+            <div className="bar-info">
+                <div className="bar-title">Successful Take-ons per 90</div>
+                <Bar props={statistics.possession_stats.successfulTakeOns90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Take-ons Attempted per 90</div>
+                <Bar props={statistics.possession_stats.takeOnsAttempted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Successful Take-on percent</div>
+                <Bar props={statistics.possession_stats.successfulTakeOnPercent} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Times dispossessed per 90</div>
+                <Bar props={statistics.possession_stats.dispossessed90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Miscontrols per 90</div>
+                <Bar props={statistics.possession_stats.miscontrols90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div>Involvement</div>
+            <div className="bar-info">
+                <div className="bar-title">Touches per 90</div>
+                <Bar props={statistics.possession_stats.touches90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Touches in Attacking Penalty Area per 90</div>
+                <Bar props={statistics.possession_stats.touchesInAttackPenArea90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Touches in Attacking 3rd per 90</div>
+                <Bar props={statistics.possession_stats.touchesInAttack3rd90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Touches in Middle 3rd per 90</div>
+                <Bar props={statistics.possession_stats.touchesInMiddle3rd90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Touches in Defensive 3rd per 90</div>
+                <Bar props={statistics.possession_stats.touchesInDef3rd90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Passes Received per 90</div>
+                <Bar props={statistics.possession_stats.passesReceived90} percentileGroup={stats.percentileGroup}/>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/prem-data/src/components/bar-chart/passing-barchart.js b/prem-data/src/components/bar-chart/passing-barchart.js
new file mode 100644
index 0000000..80db139
--- /dev/null
+++ b/prem-data/src/components/bar-chart/passing-barchart.js
@@ -0,0 +1,46 @@
+import React from "react";
+import './bar.css';
+import { Bar } from "./bar";
+
+export function PassingBars(stats, percentileGroup){
+
+    var statistics =  stats.stats;
+
+    return(
+        <div className="bar-collection">
+            <div>Passing</div>
+            <div className="bar-info">
+                <div className="bar-title">Passes Attempted per 90</div>
+                <Bar props={statistics.passing_stats.passesAttempted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Passes Completed per 90</div>
+                <Bar props={statistics.passing_stats.passesCompleted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Long Passes Attempted per 90</div>
+                <Bar props={statistics.passing_stats.longPassesAttempted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Long Passes Completed per 90</div>
+                <Bar props={statistics.passing_stats.longPassesCompleted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Medium Passes Attempted per 90</div>
+                <Bar props={statistics.passing_stats.mediumPassesAttempted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Medium Passes Completed per 90</div>
+                <Bar props={statistics.passing_stats.mediumPassesCompleted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Short Passes Attempted per 90</div>
+                <Bar props={statistics.passing_stats.shortPassesAttempted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Short Passes Completed per 90</div>
+                <Bar props={statistics.passing_stats.shortPassesCompleted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/prem-data/src/components/bar-chart/progression-barchart.js b/prem-data/src/components/bar-chart/progression-barchart.js
new file mode 100644
index 0000000..c64984b
--- /dev/null
+++ b/prem-data/src/components/bar-chart/progression-barchart.js
@@ -0,0 +1,59 @@
+import React from "react";
+import './bar.css';
+import { Bar } from "./bar";
+
+export function ProgressionBars(stats, percentileGroup){
+
+    var statistics =  stats.stats;
+
+    return(
+        <div className="bar-collection">
+            <div>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}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Carries per 90</div>
+                <Bar props={statistics.possession_stats.carries90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Carries into Final 3rd per 90</div>
+                <Bar props={statistics.possession_stats.carriesIntoFinal3rd90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Carries into Penalty Area per 90</div>
+                <Bar props={statistics.possession_stats.carriesIntoPenArea90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Progressive Carrying Distance per 90</div>
+                <Bar props={statistics.possession_stats.progressiveCarryingDistance90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Progressive Passes per 90</div>
+                <Bar props={statistics.standard_stats.progressivePass90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Through Balls per 90</div>
+                <Bar props={statistics.pass_types.throughBalls90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Progressive Passes Received per 90</div>
+                <Bar props={statistics.standard_stats.progPassRec90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Passes Received per 90</div>
+                <Bar props={statistics.possession_stats.passesReceived90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Passes into Final 3rd per 90</div>
+                <Bar props={statistics.passing_stats.passesFinalThird90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Passes into Penalty Area per 90</div>
+                <Bar props={statistics.passing_stats.passesPenaltyArea90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/prem-data/src/components/bar-chart/scoring-barchart.js b/prem-data/src/components/bar-chart/scoring-barchart.js
new file mode 100644
index 0000000..85c71db
--- /dev/null
+++ b/prem-data/src/components/bar-chart/scoring-barchart.js
@@ -0,0 +1,54 @@
+import React from "react";
+import './bar.css';
+import { Bar } from "./bar";
+
+export function ScoringBars(stats, percentileGroup){
+
+    var statistics =  stats.stats;
+
+    return(
+        <div className="bar-collection">
+            <div>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}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Non-penalty xG per 90</div>
+                <Bar props={statistics.standard_stats.nonPenXG90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Goals per 90</div>
+                <Bar props={statistics.standard_stats.goals90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Non-penalty Goals per 90</div>
+                <Bar props={statistics.standard_stats.nonPenGoals90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Goals minus xG</div>
+                <Bar props={statistics.shooting_stats.goalsMinusXG} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Goals minus Non-penalty xG</div>
+                <Bar props={statistics.shooting_stats.nonPenGoalsMinusXG} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Non-penalty xG per Shot</div>
+                <Bar props={statistics.shooting_stats.nonPenXGPerShot90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Shots per 90</div>
+                <Bar props={statistics.shooting_stats.shots90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Shots on Target per 90</div>
+                <Bar props={statistics.shooting_stats.shotOnTarget90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Avg. Shot Distance from Goal</div>
+                <Bar props={statistics.shooting_stats.avgShotDistance} percentileGroup={stats.percentileGroup}/>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/prem-data/src/components/player-polar-chart.js b/prem-data/src/components/player-polar-chart.js
index 47bf299..cd23037 100644
--- a/prem-data/src/components/player-polar-chart.js
+++ b/prem-data/src/components/player-polar-chart.js
@@ -12,11 +12,14 @@ import {makePositionReadable, playerCardDisplayLabels} from '../pages/player-pag
 
 ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);
 
-function PlayerPolarChart(props){
+function PlayerPolarChart({player, view, setView}){
 
-    var playerInfo = props.props.player;
+    var playerInfo = player;
     var positionArray = [];
-    const [view, setView] = useState(0);
+    // const [view, setView] = useState(0);
+
+    console.log(player)
+    
 
     function changeView(id){
         setView(id);
@@ -112,8 +115,8 @@ function PlayerPolarChart(props){
         return(
             <div className='chart-container'>
                     <div className='position-tabs'>
-                        <button className={view === 0 ? "active-position" : ""} onClick={() => {changeView(0)}}>{makePositionReadable(positionArray[0])}</button>
-                        <button className={view === 1 ? "active-position" : ""} onClick={() => {changeView(1)}}>{makePositionReadable(positionArray[1])}</button>
+                        <button className={view === 0 ? "active-position" : ""} onClick={() => {setView(0)}}>{makePositionReadable(positionArray[0])}</button>
+                        <button className={view === 1 ? "active-position" : ""} onClick={() => {setView(1)}}>{makePositionReadable(positionArray[1])}</button>
                     </div>
                     {view === 0 && (
                             <div className='percentile-polar-chart'>
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
index eb2dacf..8f2791c 100644
--- a/prem-data/src/pages/player-page-body/player-page-body.js
+++ b/prem-data/src/pages/player-page-body/player-page-body.js
@@ -1,28 +1,38 @@
 import PlayerPolarChart from '../../components/player-polar-chart';
 import '../page-style.css';
-import { Bars } from '../../components/bar-chart/barchart';
+import { ScoringBars } from '../../components/bar-chart/scoring-barchart';
+import { CreationBars } from '../../components/bar-chart/creation-barchart';
+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 {useState} from 'react';
 
 function PlayerPageBody(props){
 
-    console.log(props.player.standard_stats.assists90[1])
+    const [view, setView] = useState(0);
+    var percentileGroup = view + 1;
+
+    console.log(view)
 
     return(
         <div className='chart-body'>
-            <PlayerPolarChart props={props}/>
+            <PlayerPolarChart player={props.player} view={view} setView={setView} />
             <div className='numbers-container'>
                 <div className='player-statistics'>
-                    <Bars stats={props.player} percentileGroup={1}/>
+                    <ScoringBars stats={props.player} percentileGroup={percentileGroup}/>
                 </div>
-                {/* <div className='player-statistics'>
-                    <Bars stats={props.player.passing_stats} percentileGroup={1}/>
+                <div className='player-statistics'>
+                    <CreationBars stats={props.player} percentileGroup={percentileGroup}/>
                 </div>
                 <div className='player-statistics'>
-                    <Bars stats={props.player.possession_stats} percentileGroup={1}/>
+                    <ProgressionBars stats={props.player} percentileGroup={percentileGroup}/>
                 </div>
                 <div className='player-statistics'>
-                    <Bars stats={props.player.shot_goalCreation} percentileGroup={1}/>
-                </div> */}
+                    <InvolvementBars stats={props.player} percentileGroup={percentileGroup}/>
+                </div>
+                <div className='player-statistics'>
+                    <PassingBars stats={props.player} percentileGroup={percentileGroup}/>
+                </div>
                 <div>1</div>
                 <div>1</div>
             </div>