Player page stats displayed

prem-data/src/components/bar-chart/bar.css

@@ -0,0 +1,39 @@
+@keyframes growAnimation {
+    from {
+      width: 0;
+    }
+    to {
+      width: 100%; 
+    }
+}
+.bar-collection{
+    font-weight: 600;
+}
+.bar-info{
+    margin-bottom: 1em;
+}
+.bar {
+    width: 100%;
+    overflow: hidden; /* Hide overflow content */
+    font-weight: 400;
+    display: flex;
+    align-items: center;
+    font-style: italic;
+}
+.value{
+    width: 15%;
+}
+.jam {
+    display: flex;
+    justify-content: space-between;
+    background-color: lightblue;
+    animation: growAnimation 2s forwards;
+    box-sizing: border-box;
+    border-radius: 16px;
+    color: #838389;
+    width: 85%;
+
+}
+.bar:hover{
+    cursor: pointer;
+}

prem-data/src/components/bar-chart/bar.js

@@ -0,0 +1,19 @@
+import React from "react";
+import './bar.css';
+
+export function Bar(props){
+
+    var stats = props.props;
+    console.log(stats)
+
+    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>
+            </div>
+        </div>
+    )
+}

prem-data/src/components/bar-chart/barchart.js

@@ -0,0 +1,55 @@
+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>
+    )
+}

prem-data/src/pages/page-style.css

@@ -81,20 +81,22 @@
     border-radius: 0 0 8px 8px;
     padding-top: 1em;
     box-sizing: border-box;
+    display: flex;
+    justify-content: center;
 }
 .chart-body{
     height: fit-content;
     width: 100%;
     max-width: 100%;
     display: flex;
     gap: 1em;
+    box-sizing: border-box;
 }
 .chart-container{
     max-height: fit-content;
-    max-width: fit-content;
+    max-width: 30%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
     box-sizing: border-box;
 }
@@ -111,6 +113,7 @@
     text-align: center;
 }
 .position-tabs button{
+    max-height: 8vh;
     cursor: pointer;
     padding: 1em;
     background-color: transparent;
@@ -130,15 +133,17 @@
     display: flex;
     justify-content: center;
     margin-bottom: 1em;
-    flex-grow: 1;
+    box-sizing: border-box;
 }
 .numbers-container{
-    width: 100%;
+    width: 70%;
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+    box-sizing: border-box;
 }
-.numbers-container div{
-    border: 0.5px solid #505050;
+.player-statistics{
+    padding: 1em;
+    box-sizing: border-box;
 }
 
 @media screen and (max-width: 1023px) {
@@ -156,6 +161,9 @@
         width: 100%;
         max-width: 100%;
     }
+    .numbers-container{
+        width: 100%;
+    }
 
 }
 

prem-data/src/pages/player-page-body/player-page-body.js

@@ -1,5 +1,6 @@
 import PlayerPolarChart from '../../components/player-polar-chart';
 import '../page-style.css';
+import { Bars } from '../../components/bar-chart/barchart';
 import {useState} from 'react';
 
 function PlayerPageBody(props){
@@ -11,13 +12,17 @@ function PlayerPageBody(props){
             <PlayerPolarChart props={props}/>
             <div className='numbers-container'>
                 <div className='player-statistics'>
-                    <div className="bar-container">
-                        <div className="bar" style={{ width: `${props.player.standard_stats.assists90[1]}%` }}>{props.player.standard_stats.assists90[0]}</div>
-                    </div>
+                    <Bars stats={props.player} percentileGroup={1}/>
                 </div>
-                <div>1</div>
-                <div>1</div>
-                <div>1</div>
+                {/* <div className='player-statistics'>
+                    <Bars stats={props.player.passing_stats} percentileGroup={1}/>
+                </div>
+                <div className='player-statistics'>
+                    <Bars stats={props.player.possession_stats} percentileGroup={1}/>
+                </div>
+                <div className='player-statistics'>
+                    <Bars stats={props.player.shot_goalCreation} percentileGroup={1}/>
+                </div> */}
                 <div>1</div>
                 <div>1</div>
             </div>