Merge pull request #17 from valterschutz/bug-fixes

barplot shows all names
valterschutz · Mar 11, 2024 · e084d08 · e084d08
2 parents c853608 + 8911450
commit e084d08
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 12 deletions.
diff --git a/src/App.js b/src/App.js
@@ -28,7 +28,7 @@ function App() {
   const [user, loading, error] = useAuthState(auth);
 
   return (
-    <div className="App bg-apricot min-h-screen flex flex-col font-sans">
+    <div className="App bg-apricot min-h-screen flex flex-col items-stretch font-sans">
       <FirebaseContext.Provider value={[app, auth, db]}>
         {user ? <LoggedIn /> : <LoggedOut />}
       </FirebaseContext.Provider>

diff --git a/src/MatchesView.js b/src/MatchesView.js
@@ -10,9 +10,11 @@ export default function MatchesView() {
   const latestMatches = sortedMatches.slice(0, 10)
 
   return (
-    <div className="flex flex-col flex-grow justify-center items-center gap-6 px-2">
-      <h2 className="underline text-4xl font-kanit">Last 10 matches</h2>
-      {latestMatches.map((match, idx) => <MatchView key={idx} match={match} />)}
+    <div className="flex-grow flex flex-row justify-center">
+      <div className="max-w-xl flex-grow flex flex-col justify-center items-center gap-6 px-2">
+        <h2 className="underline text-4xl font-kanit">Last 10 matches</h2>
+        {latestMatches.map((match, idx) => <MatchView key={idx} match={match} />)}
+      </div>
     </div>
   )
 }
diff --git a/src/Stats.js b/src/Stats.js
@@ -33,6 +33,7 @@ const winLossDrawPlotOptions = {
     },
     y: {
       ticks: {
+        autoSkip: false,
         font: {
           size: 14, // Change font size for y-axis labels
           weight: 'normal' // Change font weight for y-axis labels
@@ -49,7 +50,8 @@ const winLossDrawPlotOptions = {
     },
   },
   responsive: true,
-  aspectRatio: 1,
+  //   aspectRatio: 1,
+  maintainAspectRatio: false,
   plugins: {
     legend: {
       position: 'top',
@@ -83,6 +85,7 @@ const winRatioPlotOptions = {
     },
     y: {
       ticks: {
+        autoSkip: false,
         font: {
           size: 14, // Change font size for y-axis labels
           weight: 'normal' // Change font weight for y-axis labels
@@ -98,7 +101,8 @@ const winRatioPlotOptions = {
     },
   },
   responsive: true,
-  aspectRatio: 1,
+  //   aspectRatio: 1,
+  maintainAspectRatio: false,
   plugins: {
     legend: {
       display: false,
@@ -147,26 +151,34 @@ function Stats() {
     return acc
   }, {}))
 
+  // Now sorting the players by matches played
+  // Sort player names by matches played
+  const sortedByMatchesPlayedPlayersNames = playersNames.sort((a, b) => {
+    const aMatches = scoring[a].wins + scoring[a].losses + scoring[a].draws
+    const bMatches = scoring[b].wins + scoring[b].losses + scoring[b].draws
+    return bMatches - aMatches
+  })
+
   const winLossDrawPlotData = {
-    labels: playersNames,
+    labels: sortedByMatchesPlayedPlayersNames,
     datasets: [
       {
         label: 'Wins',
-        data: playersNames.map(playerName => scoring[playerName].wins),
+        data: sortedByMatchesPlayedPlayersNames.map(playerName => scoring[playerName].wins),
         borderColor: 'hsl(141, 71%, 48%)',
         backgroundColor: 'hsla(141, 71%, 48%, 0.5)',
         stack: 0,
       },
       {
         label: 'Losses',
-        data: playersNames.map(playerName => scoring[playerName].losses),
+        data: sortedByMatchesPlayedPlayersNames.map(playerName => scoring[playerName].losses),
         borderColor: 'hsl(348, 100%, 61%)',
         backgroundColor: 'hsla(348, 100%, 61%, 0.5)',
         stack: 0,
       },
       {
         label: 'Draws',
-        data: playersNames.map(playerName => scoring[playerName].draws),
+        data: sortedByMatchesPlayedPlayersNames.map(playerName => scoring[playerName].draws),
         borderColor: 'hsl(48, 100%, 67%)',
         backgroundColor: 'hsla(48, 100%, 67%, 0.5)',
         stack: 0,
@@ -197,9 +209,15 @@ function Stats() {
     ],
   };
 
+  const chartHeight = 40 * playersNames.length
+
   return <div className="bg-white p-4 flex flex-col gap-2">
-    <Bar data={winLossDrawPlotData} options={winLossDrawPlotOptions} />
-    <Bar data={winRatioPlotData} options={winRatioPlotOptions} />
+    <div style={{ height: chartHeight }}>
+      <Bar data={winLossDrawPlotData} options={winLossDrawPlotOptions} />
+    </div>
+    <div style={{ height: chartHeight }}>
+      <Bar data={winRatioPlotData} options={winRatioPlotOptions} />
+    </div>
   </div>
 
 }