🔨 remove label from axis components

packages/@ourworldindata/grapher/src/axis/Axis.ts

@@ -23,7 +23,6 @@ import {
     OwidVariableRoundingMode,
 } from "@ourworldindata/utils"
 import { AxisConfig, AxisManager } from "./AxisConfig"
-import { MarkdownTextWrap } from "@ourworldindata/components"
 import { ColumnTypeMap, CoreColumn } from "@ourworldindata/core-table"
 import { GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants.js"
 
@@ -73,7 +72,6 @@ abstract class AbstractAxis {
     @observable hideFractionalTicks = false
     @observable.struct range: ValueRange = [0, 0]
     @observable private _scaleType?: ScaleType
-    @observable private _label?: string
 
     constructor(config: AxisConfig, axisManager?: AxisManager) {
         this.config = config
@@ -88,7 +86,6 @@ abstract class AbstractAxis {
      */
     abstract get size(): number
     abstract get orient(): Position
-    abstract get labelWidth(): number
 
     abstract placeTickLabel(value: number): TickLabelPlacement
     abstract get tickLabels(): TickLabelPlacement[]
@@ -101,8 +98,8 @@ abstract class AbstractAxis {
         return this.config.hideGridlines ?? false
     }
 
-    @computed get labelPadding(): number {
-        return this.config.labelPadding ?? 5
+    @computed get tickPadding(): number {
+        return this.config.tickPadding ?? 5
     }
 
     @computed get nice(): boolean {
@@ -133,14 +130,6 @@ abstract class AbstractAxis {
         this._scaleType = value
     }
 
-    @computed get label(): string {
-        return this._label ?? this.config.label ?? ""
-    }
-
-    set label(value: string) {
-        this._label = value
-    }
-
     // This will expand the domain but never shrink.
     // This will change the min unless the user's min setting is less
     // This will change the max unless the user's max setting is greater
@@ -167,7 +156,6 @@ abstract class AbstractAxis {
         this.hideFractionalTicks = parentAxis.hideFractionalTicks
         this.range = parentAxis.range.slice() as ValueRange
         this._scaleType = parentAxis._scaleType
-        this._label = parentAxis._label
         return this
     }
 
@@ -479,24 +467,6 @@ abstract class AbstractAxis {
             tick.toString()
         )
     }
-
-    @computed get labelFontSize(): number {
-        return GRAPHER_FONT_SCALE_12 * this.fontSize
-    }
-
-    @computed get labelTextWrap(): MarkdownTextWrap | undefined {
-        const text = this.label
-        return text
-            ? new MarkdownTextWrap({
-                  maxWidth: this.labelWidth,
-                  fontSize: this.labelFontSize,
-                  text,
-                  lineHeight: 1,
-                  detailsOrderedByReference:
-                      this.axisManager?.detailsOrderedByReference,
-              })
-            : undefined
-    }
 }
 
 export class HorizontalAxis extends AbstractAxis {
@@ -511,27 +481,15 @@ export class HorizontalAxis extends AbstractAxis {
             : Position.bottom
     }
 
-    @computed get labelOffset(): number {
-        return this.labelTextWrap
-            ? this.labelTextWrap.height + this.labelPadding * 2
-            : 0
-    }
-
-    @computed get labelWidth(): number {
-        return this.rangeSize
-    }
-
     // note that we intentionally don't take `hideAxisLabels` into account here.
     // tick labels might be hidden in faceted charts. when faceted, it's important
     // the axis size doesn't change as a result of hiding the axis labels, or else
     // we might end up with misaligned axes.
     @computed get height(): number {
         if (this.hideAxis) return 0
-        const { labelOffset, labelPadding } = this
+        const { tickPadding } = this
         const maxTickHeight = max(this.tickLabels.map((tick) => tick.height))
-        const height = maxTickHeight
-            ? maxTickHeight + labelOffset + labelPadding
-            : 0
+        const height = maxTickHeight ? maxTickHeight + tickPadding : 0
         return Math.max(height, this.config.minSize ?? 0)
     }
 
@@ -630,28 +588,16 @@ export class VerticalAxis extends AbstractAxis {
         return Position.left
     }
 
-    @computed get labelWidth(): number {
-        return this.height
-    }
-
-    @computed get labelOffset(): number {
-        return this.labelTextWrap
-            ? this.labelTextWrap.height + this.labelPadding * 2
-            : 0
-    }
-
     // note that we intentionally don't take `hideAxisLabels` into account here.
     // tick labels might be hidden in faceted charts. when faceted, it's important
     // the axis size doesn't change as a result of hiding the axis labels, or else
     // we might end up with misaligned axes.
     @computed get width(): number {
         if (this.hideAxis) return 0
-        const { labelOffset, labelPadding } = this
+        const { tickPadding } = this
         const maxTickWidth = max(this.tickLabels.map((tick) => tick.width))
         const width =
-            maxTickWidth !== undefined
-                ? maxTickWidth + labelOffset + labelPadding
-                : 0
+            maxTickWidth !== undefined ? maxTickWidth + tickPadding : 0
         return Math.max(width, this.config.minSize ?? 0)
     }
 

packages/@ourworldindata/grapher/src/axis/AxisConfig.ts

@@ -20,7 +20,6 @@ import {
 
 export interface AxisManager {
     fontSize: number
-    detailsOrderedByReference?: string[]
 }
 
 class AxisConfigDefaults implements AxisConfigInterface {
@@ -33,7 +32,7 @@ class AxisConfigDefaults implements AxisConfigInterface {
     @observable.ref hideAxis?: boolean = undefined
     @observable.ref hideGridlines?: boolean = undefined
     @observable.ref hideTickLabels?: boolean = undefined
-    @observable.ref labelPadding?: number = undefined
+    @observable.ref tickPadding?: number = undefined
     @observable.ref nice?: boolean = undefined
     @observable.ref maxTicks?: number = undefined
     @observable.ref tickFormattingOptions?: TickFormattingOptions = undefined
@@ -89,7 +88,7 @@ export class AxisConfig
             hideAxis: this.hideAxis,
             hideGridlines: this.hideGridlines,
             hideTickLabels: this.hideTickLabels,
-            labelPadding: this.labelPadding,
+            tickPadding: this.tickPadding,
             nice: this.nice,
             maxTicks: this.maxTicks,
             tickFormattingOptions: this.tickFormattingOptions,

packages/@ourworldindata/grapher/src/axis/AxisViews.tsx

@@ -15,6 +15,8 @@ import { VerticalAxis, HorizontalAxis, DualAxis } from "./Axis"
 import classNames from "classnames"
 import { GRAPHER_DARK_TEXT } from "../color/ColorConstants"
 import { ScaleType, DetailsMarker } from "@ourworldindata/types"
+import { MarkdownTextWrap } from "@ourworldindata/components"
+import { GRAPHER_AXIS_LABEL_PADDING } from "../core/GrapherConstants.js"
 
 const dasharrayFromFontSize = (fontSize: number): string => {
     const dashLength = Math.round((fontSize / 16) * 3)
@@ -172,11 +174,9 @@ interface DualAxisViewProps {
     dualAxis: DualAxis
     highlightValue?: { x: number; y: number }
     showTickMarks?: boolean
-    labelColor?: string
     tickColor?: string
     lineWidth?: number
     gridDashPattern?: string
-    detailsMarker?: DetailsMarker
 }
 
 @observer
@@ -185,11 +185,9 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
         const {
             dualAxis,
             showTickMarks,
-            labelColor,
             tickColor,
             lineWidth,
             gridDashPattern,
-            detailsMarker,
         } = this.props
         const { bounds, horizontalAxis, verticalAxis, innerBounds } = dualAxis
 
@@ -215,9 +213,7 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
             <VerticalAxisComponent
                 bounds={bounds}
                 verticalAxis={verticalAxis}
-                labelColor={labelColor}
                 tickColor={tickColor}
-                detailsMarker={detailsMarker}
             />
         )
 
@@ -227,10 +223,8 @@ export class DualAxisComponent extends React.Component<DualAxisViewProps> {
                 axis={horizontalAxis}
                 showTickMarks={showTickMarks}
                 preferredAxisPosition={innerBounds.bottom}
-                labelColor={labelColor}
                 tickColor={tickColor}
                 tickMarkWidth={lineWidth}
-                detailsMarker={detailsMarker}
             />
         )
 
@@ -250,42 +244,17 @@ export class VerticalAxisComponent extends React.Component<{
     bounds: Bounds
     verticalAxis: VerticalAxis
     showTickMarks?: boolean
-    labelColor?: string
     tickColor?: string
-    detailsMarker?: DetailsMarker
 }> {
     render(): React.ReactElement {
-        const {
-            bounds,
-            verticalAxis,
-            labelColor,
-            tickColor,
-            detailsMarker,
-            showTickMarks,
-        } = this.props
-        const { tickLabels, labelTextWrap, config } = verticalAxis
+        const { bounds, verticalAxis, tickColor, showTickMarks } = this.props
+        const { tickLabels, config } = verticalAxis
 
         return (
             <g
                 id={makeIdForHumanConsumption("vertical-axis")}
                 className="VerticalAxis"
             >
-                {labelTextWrap &&
-                    labelTextWrap.renderSVG(
-                        -verticalAxis.rangeCenter,
-                        bounds.left,
-                        {
-                            id: makeIdForHumanConsumption(
-                                "vertical-axis-label"
-                            ),
-                            textProps: {
-                                transform: "rotate(-90)",
-                                fill: labelColor || GRAPHER_DARK_TEXT,
-                                textAnchor: "middle",
-                            },
-                            detailsMarker,
-                        }
-                    )}
                 {showTickMarks && (
                     <g id={makeIdForHumanConsumption("tick-marks")}>
                         {tickLabels.map((label, i) => (
@@ -315,7 +284,7 @@ export class VerticalAxisComponent extends React.Component<{
                                     x={(
                                         bounds.left +
                                         verticalAxis.width -
-                                        verticalAxis.labelPadding
+                                        verticalAxis.tickPadding
                                     ).toFixed(2)}
                                     y={y}
                                     dy={dyFromAlign(
@@ -343,10 +312,8 @@ export class HorizontalAxisComponent extends React.Component<{
     axis: HorizontalAxis
     showTickMarks?: boolean
     preferredAxisPosition?: number
-    labelColor?: string
     tickColor?: string
     tickMarkWidth?: number
-    detailsMarker?: DetailsMarker
 }> {
     @computed get scaleType(): ScaleType {
         return this.props.axis.scaleType
@@ -370,25 +337,20 @@ export class HorizontalAxisComponent extends React.Component<{
             axis,
             showTickMarks,
             preferredAxisPosition,
-            labelColor,
             tickColor,
             tickMarkWidth = 1,
-            detailsMarker,
         } = this.props
-        const { tickLabels, labelTextWrap: label, labelOffset, orient } = axis
+        const { tickLabels, orient } = axis
         const tickSize = 5
         const horizontalAxisLabelsOnTop = orient === Position.top
-        const labelYPosition = horizontalAxisLabelsOnTop
-            ? bounds.top
-            : bounds.bottom - (label?.height ?? 0)
 
         const tickMarksYPosition = horizontalAxisLabelsOnTop
             ? bounds.top + axis.height - 5
             : (preferredAxisPosition ?? bounds.bottom)
 
         const tickLabelYPlacement = horizontalAxisLabelsOnTop
-            ? bounds.top + labelOffset + 10
-            : bounds.bottom - labelOffset
+            ? bounds.top + 10
+            : bounds.bottom
 
         const showTickLabels = !axis.config.hideTickLabels
 
@@ -397,15 +359,6 @@ export class HorizontalAxisComponent extends React.Component<{
                 id={makeIdForHumanConsumption("horizontal-axis")}
                 className="HorizontalAxis"
             >
-                {label &&
-                    label.renderSVG(axis.rangeCenter, labelYPosition, {
-                        id: makeIdForHumanConsumption("horizontal-axis-label"),
-                        textProps: {
-                            fill: labelColor || GRAPHER_DARK_TEXT,
-                            textAnchor: "middle",
-                        },
-                        detailsMarker,
-                    })}
                 {showTickMarks && (
                     <g id={makeIdForHumanConsumption("tick-marks")}>
                         {tickLabels.map((label) => (
@@ -472,3 +425,64 @@ export class VerticalAxisTickMark extends React.Component<{
         )
     }
 }
+
+export function HorizonalAxisLabel({
+    textWrap,
+    dualAxis,
+    padding = GRAPHER_AXIS_LABEL_PADDING,
+    color = GRAPHER_DARK_TEXT,
+    detailsMarker,
+}: {
+    textWrap: MarkdownTextWrap
+    dualAxis: DualAxis
+    padding?: number
+    color?: string
+    detailsMarker?: DetailsMarker
+}): React.ReactElement | null {
+    const { horizontalAxis, bounds } = dualAxis
+
+    const horizontalAxisLabelsOnTop = horizontalAxis.orient === Position.top
+
+    const x = horizontalAxis.rangeCenter
+    const y = horizontalAxisLabelsOnTop
+        ? bounds.top - textWrap.height - padding
+        : bounds.bottom + padding
+
+    return textWrap.renderSVG(x, y, {
+        id: makeIdForHumanConsumption("horizontal-axis-label"),
+        textProps: {
+            fill: color || GRAPHER_DARK_TEXT,
+            textAnchor: "middle",
+        },
+        detailsMarker,
+    })
+}
+
+export function VerticalAxisLabel({
+    textWrap,
+    dualAxis,
+    padding = GRAPHER_AXIS_LABEL_PADDING,
+    color = GRAPHER_DARK_TEXT,
+    detailsMarker,
+}: {
+    textWrap: MarkdownTextWrap
+    dualAxis: DualAxis
+    padding?: number
+    color?: string
+    detailsMarker?: DetailsMarker
+}): React.ReactElement | null {
+    const { verticalAxis, bounds } = dualAxis
+
+    const x = -verticalAxis.rangeCenter
+    const y = bounds.left - textWrap.height - padding
+
+    return textWrap.renderSVG(x, y, {
+        id: makeIdForHumanConsumption("vertical-axis-label"),
+        textProps: {
+            transform: "rotate(-90)",
+            fill: color || GRAPHER_DARK_TEXT,
+            textAnchor: "middle",
+        },
+        detailsMarker,
+    })
+}