More data added to player pages

EmoruwaTolu · Dec 1, 2023 · 48a25b7 · 48a25b7
1 parent 2727f34
commit 48a25b7
Show file tree

Hide file tree

Showing 10 changed files with 352 additions and 79 deletions.
diff --git 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;
 }
diff --git 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));
 }
diff --git a/prem-data/src/components/bar-chart/barchart.js b/prem-data/src/components/bar-chart/barchart.js
diff --git a/prem-data/src/components/bar-chart/creation-barchart.js 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>
+    )
+}
diff --git a/prem-data/src/components/bar-chart/involvement-barchart.js 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>
+    )
+}
diff --git a/prem-data/src/components/bar-chart/passing-barchart.js 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>
+    )
+}
diff --git a/prem-data/src/components/bar-chart/progression-barchart.js 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>
+    )
+}