✨ (discrete bar) add more whitespace between bars (#4373)

owid · Jan 8, 2025 · 59228f1 · 59228f1
1 parent 5afe857
commit 59228f1
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 15 deletions.
diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -86,6 +86,8 @@ 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 BAR_SPACING_FACTOR = 0.35
+
 export interface Label {
     valueString: string
     timeString: string
@@ -312,18 +314,29 @@ export class DiscreteBarChart
         return this.series.length
     }
 
-    @computed private get barHeight(): number {
-        return (0.8 * this.innerBounds.height) / this.barCount
+    /** The total height of the series, i.e. the height of the bar + the white space around it */
+    @computed private get seriesHeight(): number {
+        return this.innerBounds.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 barSpacing(): number {
+        return this.seriesHeight * BAR_SPACING_FACTOR
     }
 
-    @computed private get barSpacing(): number {
-        return this.innerBounds.height / this.barCount - this.barHeight
+    @computed private get barHeight(): number {
+        const totalWhiteSpace = this.barCount * this.barSpacing
+        return (this.innerBounds.height - totalWhiteSpace) / this.barCount
+    }
+
+    // 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 = 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,8 @@ 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 BAR_SPACING_FACTOR = 0.35
+
 const labelToBarPadding = 5
 
 export interface StackedDiscreteBarChartManager extends ChartManager {
@@ -470,18 +472,29 @@ 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
+    /** The total height of the series, i.e. the height of the bar + the white space around it */
+    @computed private get seriesHeight(): number {
+        return this.innerBounds.height / this.barCount
+    }
+
+    @computed private get barSpacing(): number {
+        return this.seriesHeight * BAR_SPACING_FACTOR
     }
 
     @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
+    // 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 = height / this.barCount
+        const approximateBarSpacing =
+            approximateMaxBarHeight * BAR_SPACING_FACTOR
+        const totalWhiteSpace = this.barCount * approximateBarSpacing
+        return (height - totalWhiteSpace) / this.barCount
     }
 
     // legend props