✨ (facets) reduce grid padding

owid · May 23, 2024 · 0539b85 · 0539b85
1 parent 896cb26
commit 0539b85
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChart.tsx
@@ -36,7 +36,11 @@ import {
 } from "../chart/ChartTypeMap"
 import { ChartManager } from "../chart/ChartManager"
 import { ChartInterface } from "../chart/ChartInterface"
-import { getChartPadding, getFontSize } from "./FacetChartUtils"
+import {
+    getChartPadding,
+    getFontSize,
+    getLabelPadding,
+} from "./FacetChartUtils"
 import {
     FacetSeries,
     FacetChartProps,
@@ -149,12 +153,13 @@ export class FacetChart
     }
 
     @computed private get facetsContainerBounds(): Bounds {
-        const fontSize = this.facetFontSize
         const legendHeightWithPadding =
             this.showLegend && this.legend.height > 0
                 ? this.legend.height + this.legendPadding
                 : 0
-        return this.bounds.padTop(legendHeightWithPadding + 1.8 * fontSize)
+        return this.bounds.padTop(
+            legendHeightWithPadding + 1.2 * this.facetFontSize
+        )
     }
 
     @computed get fontSize(): number {
@@ -205,7 +210,7 @@ export class FacetChart
         columnPadding: number
         outerPadding: number
     } {
-        return getChartPadding(this.facetCount, this.facetFontSize)
+        return getChartPadding(this.facetFontSize)
     }
 
     @computed private get hideFacetLegends(): boolean {
@@ -773,7 +778,7 @@ export class FacetChart
                         ChartComponentClassMap.get(this.chartTypeName) ??
                         DefaultChartClass
                     const { bounds, contentBounds, seriesName } = facetChart
-                    const shiftTop = facetFontSize * 0.9
+                    const labelPadding = getLabelPadding(facetFontSize)
 
                     const { fontSize, shortenedLabel } =
                         this.shrinkAndShortenFacetLabel(
@@ -786,7 +791,7 @@ export class FacetChart
                         <React.Fragment key={index}>
                             <text
                                 x={contentBounds.x}
-                                y={contentBounds.top - shiftTop}
+                                y={contentBounds.top - labelPadding}
                                 fill={"#1d3d63"}
                                 fontSize={fontSize}
                                 style={{ fontWeight: 700 }}

diff --git a/packages/@ourworldindata/grapher/src/facetChart/FacetChartUtils.tsx b/packages/@ourworldindata/grapher/src/facetChart/FacetChartUtils.tsx
@@ -14,12 +14,16 @@ export const getFontSize = (
     return minSize
 }
 
+export const getLabelPadding = (baseFontSize: number): number =>
+    0.5 * baseFontSize
+
 export const getChartPadding = (
-    count: number,
     baseFontSize: number
 ): { rowPadding: number; columnPadding: number; outerPadding: number } => {
+    const labelHeight = baseFontSize
+    const labelPadding = getLabelPadding(baseFontSize)
     return {
-        rowPadding: Math.round(baseFontSize * 3.5),
+        rowPadding: Math.round(labelHeight + labelPadding + baseFontSize),
         columnPadding: Math.round(baseFontSize),
         outerPadding: 0,
     }

diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedAreaChart.tsx
@@ -307,7 +307,7 @@ export class StackedAreaChart
 
     @computed protected get paddingForLegend(): number {
         const { legendDimensions } = this
-        return legendDimensions ? legendDimensions.width : 20
+        return legendDimensions ? legendDimensions.width : 0
     }
 
     @action.bound onLineLegendMouseOver(seriesName: SeriesName): void {