🐛 (scatter) left-align no data section (#4349)

owid · Dec 20, 2024 · c3a1fb3 · c3a1fb3
1 parent 6b6cdd5
commit c3a1fb3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx b/packages/@ourworldindata/grapher/src/scatterCharts/NoDataSection.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Bounds } from "@ourworldindata/utils"
+import { Bounds, HorizontalAlign } from "@ourworldindata/utils"
 import {
     GRAPHER_FONT_SCALE_11,
     GRAPHER_FONT_SCALE_12,
@@ -9,10 +9,12 @@ import { GRAPHER_LIGHT_TEXT } from "../color/ColorConstants"
 export function NoDataSection({
     seriesNames,
     bounds,
+    align = HorizontalAlign.left,
     baseFontSize = 16,
 }: {
     seriesNames: string[]
     bounds: Bounds
+    align?: HorizontalAlign
     baseFontSize?: number
 }): React.ReactElement {
     {
@@ -30,7 +32,8 @@ export function NoDataSection({
                 className="NoDataSection"
                 {...bounds.toProps()}
                 style={{
-                    textAlign: "right",
+                    textAlign:
+                        align === HorizontalAlign.right ? "right" : "left",
                     color: GRAPHER_LIGHT_TEXT,
                 }}
             >

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -35,6 +35,7 @@ import {
     VerticalAlign,
     FacetStrategy,
     InteractionState,
+    HorizontalAlign,
 } from "@ourworldindata/types"
 import { ChartInterface } from "../chart/ChartInterface"
 import { ChartManager } from "../chart/ChartManager"
@@ -1127,6 +1128,7 @@ export class SlopeChart
             <NoDataSection
                 seriesNames={seriesNames}
                 bounds={bounds}
+                align={HorizontalAlign.right}
                 baseFontSize={this.fontSize}
             />
         )