✨ (facets) reduce grid padding

owid · May 22, 2024 · 7f1312a · 7f1312a
1 parent 896cb26
commit 7f1312a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 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,
@@ -773,7 +777,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 +790,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 {