Create page functionality complete

prem-data/src/App.js

@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import Home from './pages/home';
 import PlayerPage from './pages/player-page';
 import Compare from './pages/compare';
+import Create from './pages/create';
 
 function App() {
 
@@ -11,6 +12,7 @@ function App() {
         <Route path='/' element={<Home />}/>
         <Route path='/player/:playerName' element={<PlayerPage />}/>
         <Route path='/compare' element={<Compare />} />
+        <Route path='/create' element={<Create />} />
       </Routes>
   );
 }

prem-data/src/components/HomeBlog.js

@@ -13,7 +13,7 @@ export default function HomeBlog(){
             setPosts(data);
         }
         catch(error){
-            console.error('Error fetching players');
+            console.error('Error fetching blogs');
         }
 
     }

prem-data/src/components/autocomplete.js

@@ -33,7 +33,7 @@ const Autocompletion = ({setPlayer}) => {
     }, []);
 
     const handleClick = (value) => {
-        history(`/player/${value.standard_stats.name}`)
+        history(`/player/${value.name}`)
     }
 
     return(

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

@@ -10,47 +10,47 @@ export function CreationBars(stats, percentileGroup){
         <div className="bar-collection">
             <div className="bar-info">
                 <div className="bar-title">Expected Assists per 90</div>
-                <Bar props={statistics.standard_stats.xAG} percentileGroup={stats.percentileGroup}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.takeOnShotCreateAct90} percentileGroup={stats.percentileGroup}/>
             </div>
         </div>
     )

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

@@ -10,55 +10,55 @@ export function DefensiveBars(stats, percentileGroup){
         <div className="bar-collection">
             <div className="bar-info">
                 <div className="bar-title">Tackles and Interceptions per 90</div>
-                <Bar props={statistics.defensive_stats.tacklesAndInterceptions90} percentileGroup={stats.percentileGroup}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.blocks90} percentileGroup={stats.percentileGroup}/>
             </div>
         </div>
     )

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

@@ -10,55 +10,55 @@ export function InvolvementBars(stats, percentileGroup){
         <div className="bar-collection">
             <div className="bar-info">
                 <div className="bar-title">Touches per 90</div>
-                <Bar props={statistics.possession_stats.touches90} percentileGroup={stats.percentileGroup}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.touchesInDef3rd90} percentileGroup={stats.percentileGroup}/>
             </div>
             <div className="bar-info">
                 <div className="bar-title">Ball Recoveries per 90</div>
-                <Bar props={statistics.other_stats.ballRecoveries90} percentileGroup={stats.percentileGroup}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.errors90} percentileGroup={stats.percentileGroup}/>
             </div>
         </div>
     )

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

@@ -10,47 +10,47 @@ export function PassingBars(stats, percentileGroup){
         <div className="bar-collection">
             <div className="bar-info">
                 <div className="bar-title">Passes Attempted per 90</div>
-                <Bar props={statistics.passing_stats.passesAttempted90} percentileGroup={stats.percentileGroup}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.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}/>
+                <Bar props={statistics.passesOffside90} percentileGroup={stats.percentileGroup}/>
             </div>
         </div>
     )