From 3f6d65fc68cb0b584535c1e632de0223c55abe95 Mon Sep 17 00:00:00 2001
From: Jacob Louis Hoover <postylem@users.noreply.github.com>
Date: Tue, 25 Jan 2022 13:00:19 -0500
Subject: [PATCH 1/3] histogram width divide by mode, not total
Divide by the value that occurs the most frequently, instead of the total games, so the histogram always uses the whole space available, rather than possibly getting smaller and smaller the more games are played.
---
src/components/stats/Histogram.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/stats/Histogram.tsx b/src/components/stats/Histogram.tsx
index 5f3aca7..1d6e1e5 100644
--- a/src/components/stats/Histogram.tsx
+++ b/src/components/stats/Histogram.tsx
@@ -14,7 +14,7 @@ export const Histogram = ({ gameStats }: Props) => {
<Progress
key={i}
index={i}
- size={95 * (value / totalGames)}
+ size={95 * (value / Math.max(...winDistribution)}
label={String(value)}
/>
))}
From b5bfad11046c9ddc13904a5b5fb1e66c29118abd Mon Sep 17 00:00:00 2001
From: Jacob Louis Hoover <postylem@users.noreply.github.com>
Date: Tue, 25 Jan 2022 13:03:27 -0500
Subject: [PATCH 2/3] Update Histogram.tsx
oops missing parenthesis.
---
src/components/stats/Histogram.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/stats/Histogram.tsx b/src/components/stats/Histogram.tsx
index 1d6e1e5..c1b8883 100644
--- a/src/components/stats/Histogram.tsx
+++ b/src/components/stats/Histogram.tsx
@@ -14,7 +14,7 @@ export const Histogram = ({ gameStats }: Props) => {
<Progress
key={i}
index={i}
- size={95 * (value / Math.max(...winDistribution)}
+ size={95 * (value / Math.max(...winDistribution))}
label={String(value)}
/>
))}
From 8d42c8d763ff0d86a24b6387bcae302139cd6bdd Mon Sep 17 00:00:00 2001
From: Jacob Louis Hoover <postylem@users.noreply.github.com>
Date: Tue, 25 Jan 2022 13:11:04 -0500
Subject: [PATCH 3/3] set const maxValue = Math.max(...winDistribution)
---
src/components/stats/Histogram.tsx | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/src/components/stats/Histogram.tsx b/src/components/stats/Histogram.tsx
index c1b8883..f496309 100644
--- a/src/components/stats/Histogram.tsx
+++ b/src/components/stats/Histogram.tsx
@@ -6,7 +6,8 @@ type Props = {
}
export const Histogram = ({ gameStats }: Props) => {
- const { totalGames, winDistribution } = gameStats
+ const winDistribution = gameStats.winDistribution
+ const maxValue = Math.max(...winDistribution)
return (
<div className="columns-1 justify-left m-2 text-sm">
@@ -14,7 +15,7 @@ export const Histogram = ({ gameStats }: Props) => {
<Progress
key={i}
index={i}
- size={95 * (value / Math.max(...winDistribution))}
+ size={90 * (value / maxValue)}
label={String(value)}
/>
))}