🐛 (discrete bar) fix broken layout

owid · Feb 26, 2024 · 5693a5b · 5693a5b
1 parent fbd1b4a
commit 5693a5b
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 19 deletions.
diff --git a/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx b/packages/@ourworldindata/grapher/src/axis/AxisViews.tsx
@@ -82,12 +82,10 @@ export class HorizontalAxisGridLines extends React.Component<{
     render(): JSX.Element {
         const { horizontalAxis, strokeWidth } = this.props
         const { bounds } = this
-        const axis = horizontalAxis.clone()
-        axis.range = bounds.xRange()
 
         return (
             <g className={classNames("AxisGridLines", "verticalLines")}>
-                {axis.getTickValues().map((t, i) => {
+                {horizontalAxis.getTickValues().map((t, i) => {
                     const color = t.faint
                         ? FAINT_TICK_COLOR
                         : t.solid
@@ -97,9 +95,9 @@ export class HorizontalAxisGridLines extends React.Component<{
                     return (
                         <line
                             key={i}
-                            x1={axis.place(t.value)}
+                            x1={horizontalAxis.place(t.value)}
                             y1={bounds.bottom.toFixed(2)}
-                            x2={axis.place(t.value)}
+                            x2={horizontalAxis.place(t.value)}
                             y2={bounds.top.toFixed(2)}
                             stroke={color}
                             strokeWidth={strokeWidth}
@@ -126,8 +124,6 @@ export class HorizontalAxisZeroLine extends React.Component<{
 }> {
     render(): JSX.Element {
         const { bounds, horizontalAxis, strokeWidth } = this.props
-        const axis = horizontalAxis.clone()
-        axis.range = bounds.xRange()
 
         return (
             <g
@@ -138,9 +134,9 @@ export class HorizontalAxisZeroLine extends React.Component<{
                 )}
             >
                 <line
-                    x1={axis.place(0)}
+                    x1={horizontalAxis.place(0)}
                     y1={bounds.bottom.toFixed(2)}
-                    x2={axis.place(0)}
+                    x2={horizontalAxis.place(0)}
                     y2={bounds.top.toFixed(2)}
                     stroke={SOLID_TICK_COLOR}
                     strokeWidth={strokeWidth}

diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx
@@ -236,13 +236,18 @@ export class DiscreteBarChart
     @computed private get leftValueLabelWidth(): number {
         if (!this.hasNegative) return 0
 
-        const longestNegativeLabel =
-            max(
-                this.series
-                    .filter((d) => d.value < 0)
-                    .map((d) => this.formatValue(d).width)
-            ) ?? 0
-        return longestNegativeLabel + labelToTextPadding
+        const labelAndValueWidths = this.series
+            .filter((d) => d.value < 0)
+            .map((d) => {
+                const labelWidth = Bounds.forText(
+                    d.seriesName,
+                    this.legendLabelStyle
+                ).width
+                const valueWidth = this.formatValue(d).width
+                return labelWidth + valueWidth + labelToTextPadding
+            })
+
+        return max(labelAndValueWidths) ?? 0
     }
 
     @computed private get x0(): number {
@@ -264,8 +269,7 @@ export class DiscreteBarChart
     @computed private get xRange(): [number, number] {
         return [
             this.boundsWithoutColorLegend.left +
-                this.seriesLegendWidth +
-                this.leftValueLabelWidth,
+                Math.max(this.seriesLegendWidth, this.leftValueLabelWidth),
             this.boundsWithoutColorLegend.right - this.rightValueLabelWidth,
         ]
     }
@@ -296,7 +300,7 @@ export class DiscreteBarChart
 
     @computed private get innerBounds(): Bounds {
         return this.boundsWithoutColorLegend
-            .padLeft(this.seriesLegendWidth + this.leftValueLabelWidth)
+            .padLeft(Math.max(this.seriesLegendWidth, this.leftValueLabelWidth))
             .padBottom(this.showHorizontalAxis ? this.yAxis.height : 0)
             .padRight(this.rightValueLabelWidth)
     }