Made responsivity better on larger screens and rounded out the player…

… data pages

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

@@ -17,11 +17,12 @@
 }
 .bar {
     width: 100%;
-    overflow: hidden; /* Hide overflow content */
+    overflow: hidden; 
     font-weight: 400;
     display: flex;
     align-items: center;
     font-style: italic;
+    gap: 1em;
 }
 .value{
     width: 15%;

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

@@ -0,0 +1,66 @@
+import React from "react";
+import './bar.css';
+import { Bar } from "./bar";
+
+export function DefensiveBars(stats, percentileGroup){
+
+    var statistics =  stats.stats;
+
+    return(
+        <div className="bar-collection">
+            <div>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}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Tackles Attempted per 90</div>
+                <Bar props={statistics.defensive_stats.tacklesAttempted90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Tackles Won per 90</div>
+                <Bar props={statistics.defensive_stats.tacklesWon90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Tackles in Attacking 3rd per 90</div>
+                <Bar props={statistics.defensive_stats.tacklesInAttack3rd90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Tackles in Middle 3rd per 90</div>
+                <Bar props={statistics.defensive_stats.tacklesInMiddle3rd90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Tackles in Defensive 3rd per 90</div>
+                <Bar props={statistics.defensive_stats.tacklesInDef3rd90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Interceptions per 90</div>
+                <Bar props={statistics.defensive_stats.interceptions90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Dribblers Challenged per 90</div>
+                <Bar props={statistics.defensive_stats.dribblersChallenged90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Dribblers Tackled per 90</div>
+                <Bar props={statistics.defensive_stats.dribblersTackled90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Challenges Lost per 90</div>
+                <Bar props={statistics.defensive_stats.challengesLost90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Aerials Won per 90</div>
+                <Bar props={statistics.other_stats.aerialsWon90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Aerials Lost per 90</div>
+                <Bar props={statistics.other_stats.aerialsLost90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Blocks per 90</div>
+                <Bar props={statistics.defensive_stats.blocks90} percentileGroup={stats.percentileGroup}/>
+            </div>
+        </div>
+    )
+}

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

@@ -8,27 +8,6 @@ export function InvolvementBars(stats, percentileGroup){
 
     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>
@@ -51,8 +30,36 @@ export function InvolvementBars(stats, percentileGroup){
                 <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 className="bar-title">Ball Recoveries per 90</div>
+                <Bar props={statistics.other_stats.ballRecoveries90} percentileGroup={stats.percentileGroup}/>
+            </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">Fouls Drawn per 90</div>
+                <Bar props={statistics.other_stats.foulsDrawn90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Fouls Committed per 90</div>
+                <Bar props={statistics.other_stats.foulsCommitted90} 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 className="bar-info">
+                <div className="bar-title">Errors per 90</div>
+                <Bar props={statistics.defensive_stats.errors90} percentileGroup={stats.percentileGroup}/>
             </div>
         </div>
     )

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

@@ -41,6 +41,18 @@ export function PassingBars(stats, percentileGroup){
                 <div className="bar-title">Short Passes Completed per 90</div>
                 <Bar props={statistics.passing_stats.shortPassesCompleted90} percentileGroup={stats.percentileGroup}/>
             </div>
+            <div className="bar-info">
+                <div className="bar-title">Crosses per 90</div>
+                <Bar props={statistics.pass_types.crosses90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Switches per 90</div>
+                <Bar props={statistics.pass_types.switches90} percentileGroup={stats.percentileGroup}/>
+            </div>
+            <div className="bar-info">
+                <div className="bar-title">Passes Offside per 90</div>
+                <Bar props={statistics.pass_types.passesOffside90} percentileGroup={stats.percentileGroup}/>
+            </div>
         </div>
     )
 }

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

@@ -91,6 +91,7 @@
     display: flex;
     gap: 1em;
     box-sizing: border-box;
+    justify-content: space-between;
 }
 .chart-container{
     max-height: fit-content;
@@ -136,14 +137,17 @@
     box-sizing: border-box;
 }
 .numbers-container{
-    width: 70%;
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
+    width: 65%;
+    display: flex;
+    /* grid-template-columns: repeat(2, 1fr); */
     box-sizing: border-box;
+    overflow-x: scroll;
+    font-size: 0.8em;
 }
 .player-statistics{
     padding: 1em;
     box-sizing: border-box;
+    min-width: 45%;
 }
 
 @media screen and (max-width: 1023px) {
@@ -175,9 +179,14 @@
         height: fit-content;
         max-width: 80vw;
     }
+}
+@media screen and (max-width: 800px) {
+    .player-statistics{
+        min-width: 90%;
+    }
     .numbers-container{
-        grid-template-rows: repeat(5, 1fr);
-        grid-template-columns: none;
+        border-top: #C0C0C0 1px solid;
+        border-bottom: #C0C0C0 1px solid;
     }
 }
 
@@ -205,4 +214,28 @@
     .player-page-position{
         font-size: 0.5em;
     }
+}
+@media screen and (min-width: 1800px) {
+    .player-name{
+        font-size: 1.8em;
+    }
+    .player-page-club{
+        font-size: 1em;
+        margin-bottom: 0.5em;
+    }
+    .player-page-position{
+        font-size: 1em;
+    }
+    .numbers-container{
+        font-size: 1.2em;
+    }
+    .chart-container p{
+        font-size: 1em;
+    }
+    .position-tabs button{
+        font-size: 1.5em;
+    }
+    .player-statistics{
+        min-width: 60%;
+    }
 }

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

@@ -5,6 +5,7 @@ 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 { DefensiveBars } from '../../components/bar-chart/defensive-barchart';
 import {useState} from 'react';
 
 function PlayerPageBody(props){
@@ -33,8 +34,9 @@ function PlayerPageBody(props){
                 <div className='player-statistics'>
                     <PassingBars stats={props.player} percentileGroup={percentileGroup}/>
                 </div>
-                <div>1</div>
-                <div>1</div>
+                <div className='player-statistics'>
+                    <DefensiveBars stats={props.player} percentileGroup={percentileGroup}/>
+                </div>
             </div>
         </div>
     )

prem-data/src/styles.css

@@ -152,3 +152,11 @@
         flex-direction: column;
     }
 }
+@media screen and (min-width: 1800px) {
+    .player-card .player-info .player-name{
+        font-size: 2.5em;
+    }
+    .player-card .player-info .club-name{
+        font-size: 1.2em;
+    }
+}