✨ (slope) render halo for entity labels

owid · Nov 29, 2024 · c95c7bb · c95c7bb
1 parent 2c40d5c
commit c95c7bb
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 32 deletions.
diff --git a/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx b/packages/@ourworldindata/components/src/TextWrap/TextWrap.tsx
@@ -266,10 +266,10 @@ export class TextWrap {
             textProps,
             id,
         }: { textProps?: React.SVGProps<SVGTextElement>; id?: string } = {}
-    ): React.ReactElement | null {
+    ): React.ReactElement {
         const { props, lines, fontSize, fontWeight, lineHeight } = this
 
-        if (lines.length === 0) return null
+        if (lines.length === 0) return <></>
 
         const [correctedX, correctedY] = this.getPositionForSvgRendering(x, y)
 

diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -23,9 +23,10 @@ import { BASE_FONT_SIZE, GRAPHER_FONT_SCALE_12 } from "../core/GrapherConstants"
 import { ChartSeries } from "../chart/ChartInterface"
 import { darkenColorForText } from "../color/ColorUtils"
 import { AxisConfig } from "../axis/AxisConfig.js"
+import { Halo } from "../halo/Halo"
 
 // Minimum vertical space between two legend items
-const LEGEND_ITEM_MIN_SPACING = 2
+const LEGEND_ITEM_MIN_SPACING = 4
 // Horizontal distance from the end of the chart to the start of the marker
 const MARKER_MARGIN = 4
 // Space between the label and the annotation
@@ -151,23 +152,22 @@ class LineLabels extends React.Component<{
         return (
             <g id={makeIdForHumanConsumption("text-labels")}>
                 {this.markers.map(({ series, labelText }, index) => {
+                    const key = getSeriesKey(
+                        series,
+                        index,
+                        this.props.uniqueKey
+                    )
                     const textColor = darkenColorForText(series.color)
                     return (
-                        <React.Fragment
-                            key={getSeriesKey(
-                                series,
-                                index,
-                                this.props.uniqueKey
-                            )}
-                        >
+                        <Halo id={key} key={key}>
                             {series.textWrap.render(labelText.x, labelText.y, {
                                 textProps: {
                                     fill: textColor,
                                     opacity: this.textOpacity,
                                     textAnchor: this.anchor,
                                 },
                             })}
-                        </React.Fragment>
+                        </Halo>
                     )
                 })}
             </g>
@@ -182,17 +182,19 @@ class LineLabels extends React.Component<{
         return (
             <g id={makeIdForHumanConsumption("text-annotations")}>
                 {markersWithAnnotations.map(({ series, labelText }, index) => {
+                    const key = getSeriesKey(
+                        series,
+                        index,
+                        this.props.uniqueKey
+                    )
+                    if (!series.annotationTextWrap) return
                     return (
-                        <React.Fragment
-                            key={getSeriesKey(
-                                series,
-                                index,
-                                this.props.uniqueKey
-                            )}
-                        >
-                            {series.annotationTextWrap?.render(
+                        <Halo id={key} key={key}>
+                            {series.annotationTextWrap.render(
                                 labelText.x,
-                                labelText.y + series.textWrap.height,
+                                labelText.y +
+                                    series.textWrap.height +
+                                    ANNOTATION_PADDING,
                                 {
                                     textProps: {
                                         fill: "#333",
@@ -202,7 +204,7 @@ class LineLabels extends React.Component<{
                                     },
                                 }
                             )}
-                        </React.Fragment>
+                        </Halo>
                     )
                 })}
             </g>
@@ -217,30 +219,32 @@ class LineLabels extends React.Component<{
         return (
             <g id={makeIdForHumanConsumption("text-values")}>
                 {markersWithTextValues.map(({ series, labelText }, index) => {
+                    if (!series.valueTextWrap) return
+                    const key = getSeriesKey(
+                        series,
+                        index,
+                        this.props.uniqueKey
+                    )
                     const textColor = darkenColorForText(series.color)
                     const direction = this.anchor === "start" ? 1 : -1
                     const x = this.showValueLabelsInline
                         ? labelText.x + direction * (series.textWrap.width + 4)
                         : labelText.x
                     const y = this.showValueLabelsInline
                         ? labelText.y
-                        : labelText.y + series.textWrap.height
+                        : labelText.y +
+                          series.textWrap.height +
+                          ANNOTATION_PADDING
                     return (
-                        <React.Fragment
-                            key={getSeriesKey(
-                                series,
-                                index,
-                                this.props.uniqueKey
-                            )}
-                        >
-                            {series.valueTextWrap?.render(x, y, {
+                        <Halo id={key} key={key}>
+                            {series.valueTextWrap.render(x, y, {
                                 textProps: {
                                     fill: textColor,
                                     opacity: this.textOpacity,
                                     textAnchor: this.anchor,
                                 },
                             })}
-                        </React.Fragment>
+                        </Halo>
                     )
                 })}
             </g>

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -959,7 +959,7 @@ export class SlopeChart
                 <GridLines
                     bounds={this.bounds}
                     yAxis={this.yAxis}
-                    endX={this.innerBounds.right}
+                    endX={this.endX}
                 />
                 <VerticalAxisComponent
                     bounds={bounds}