✨ (discrete bar) add more whitespace between bars

owid · Jan 3, 2025 · c86ab80 · c86ab80
1 parent daf1174
commit c86ab80
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -86,6 +86,9 @@ const DEFAULT_PROJECTED_DATA_COLOR_IN_LEGEND = "#787878"
 // if an entity name exceeds this width, we use the short name instead (if available)
 const SOFT_MAX_LABEL_WIDTH = 90
 
+const TOTAL_HEIGHT_OF_BARS_RATIO = 0.8
+const BAR_SPACING_FACTOR = 0.4
+
 export interface Label {
     valueString: string
     timeString: string
@@ -312,18 +315,30 @@ export class DiscreteBarChart
         return this.series.length
     }
 
-    @computed private get barHeight(): number {
-        return (0.8 * this.innerBounds.height) / this.barCount
+    @computed private get maxBarHeight(): number {
+        const { height } = this.innerBounds
+        return (TOTAL_HEIGHT_OF_BARS_RATIO * height) / this.barCount
     }
 
-    // useful if `this.barHeight` can't be used due to a cyclic dependency
-    // keep in mind though that this is not exactly the same as `this.barHeight`
-    @computed private get approximateBarHeight(): number {
-        return (0.8 * this.boundsWithoutColorLegend.height) / this.barCount
+    @computed private get barHeight(): number {
+        const totalWhiteSpace = this.barCount * this.barSpacing
+        return (this.innerBounds.height - totalWhiteSpace) / this.barCount
     }
 
     @computed private get barSpacing(): number {
-        return this.innerBounds.height / this.barCount - this.barHeight
+        return this.maxBarHeight * BAR_SPACING_FACTOR
+    }
+
+    // useful if `barHeight` can't be used due to a cyclic dependency
+    // keep in mind though that this is not exactly the same as `barHeight`
+    @computed private get approximateBarHeight(): number {
+        const { height } = this.boundsWithoutColorLegend
+        const approximateMaxBarHeight =
+            (TOTAL_HEIGHT_OF_BARS_RATIO * height) / this.barCount
+        const approximateBarSpacing =
+            approximateMaxBarHeight * BAR_SPACING_FACTOR
+        const totalWhiteSpace = this.barCount * approximateBarSpacing
+        return (height - totalWhiteSpace) / this.barCount
     }
 
     @computed private get barPlacements(): { x: number; width: number }[] {

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx
@@ -84,6 +84,9 @@ import { TextWrap } from "@ourworldindata/components"
 // if an entity name exceeds this width, we use the short name instead (if available)
 const SOFT_MAX_LABEL_WIDTH = 90
 
+const TOTAL_HEIGHT_OF_BARS_RATIO = 0.8
+const BAR_SPACING_FACTOR = 0.4
+
 const labelToBarPadding = 5
 
 export interface StackedDiscreteBarChartManager extends ChartManager {
@@ -470,18 +473,30 @@ export class StackedDiscreteBarChart
         }))
     }
 
-    // useful if `this.barHeight` can't be used due to a cyclic dependency
-    // keep in mind though that this is not exactly the same as `this.barHeight`
-    @computed private get approximateBarHeight(): number {
-        return (0.8 * this.boundsWithoutLegend.height) / this.barCount
+    @computed private get maxBarHeight(): number {
+        const { height } = this.innerBounds
+        return (TOTAL_HEIGHT_OF_BARS_RATIO * height) / this.barCount
     }
 
     @computed private get barHeight(): number {
-        return (0.8 * this.innerBounds.height) / this.barCount
+        const totalWhiteSpace = this.barCount * this.barSpacing
+        return (this.innerBounds.height - totalWhiteSpace) / this.barCount
     }
 
     @computed private get barSpacing(): number {
-        return this.innerBounds.height / this.barCount - this.barHeight
+        return this.maxBarHeight * BAR_SPACING_FACTOR
+    }
+
+    // useful if `barHeight` can't be used due to a cyclic dependency
+    // keep in mind though that this is not exactly the same as `barHeight`
+    @computed private get approximateBarHeight(): number {
+        const { height } = this.boundsWithoutLegend
+        const approximateMaxBarHeight =
+            (TOTAL_HEIGHT_OF_BARS_RATIO * height) / this.barCount
+        const approximateBarSpacing =
+            approximateMaxBarHeight * BAR_SPACING_FACTOR
+        const totalWhiteSpace = this.barCount * approximateBarSpacing
+        return (height - totalWhiteSpace) / this.barCount
     }
 
     // legend props