✨ (slope) prefer to show left labels for entities that are already la…

…belled on the right
owid · Dec 6, 2024 · f4b494e · f4b494e
1 parent 1860a91
commit f4b494e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 36 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx
@@ -335,13 +335,13 @@ export interface LineLegendProps {
     textOutlineColor?: Color
 
     // used to determine which series should be labelled when there is limited space
-    seriesSortedByImportance?: EntityName[]
+    seriesSortedByImportance?: SeriesName[]
 
     // interactions
     isStatic?: boolean // don't add interactions if true
-    focusedSeriesNames?: EntityName[] // currently in focus
-    onClick?: (key: EntityName) => void
-    onMouseOver?: (key: EntityName) => void
+    focusedSeriesNames?: SeriesName[] // currently in focus
+    onClick?: (key: SeriesName) => void
+    onMouseOver?: (key: SeriesName) => void
     onMouseLeave?: () => void
 }
 
@@ -788,7 +788,8 @@ export class LineLegend extends React.Component<LineLegendProps> {
                 uniqueKey="background"
                 series={this.backgroundSeries}
                 needsConnectorLines={this.needsLines}
-                outlineColor={this.props.outlineColor}
+                showTextOutline={this.props.showTextOutlines}
+                textOutlineColor={this.props.textOutlineColor}
                 isFocus={false}
                 anchor={this.props.xAnchor}
                 isStatic={this.props.isStatic}
@@ -807,7 +808,8 @@ export class LineLegend extends React.Component<LineLegendProps> {
                 uniqueKey="focus"
                 series={this.focusedSeries}
                 needsConnectorLines={this.needsLines}
-                outlineColor={this.props.outlineColor}
+                showTextOutline={this.props.showTextOutlines}
+                textOutlineColor={this.props.textOutlineColor}
                 isFocus={true}
                 anchor={this.props.xAnchor}
                 isStatic={this.props.isStatic}

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -563,6 +563,8 @@ export class SlopeChart
         return {
             xAnchor: "end",
             fontWeight: this.showSeriesNamesInLineLegendLeft ? 700 : undefined,
+            seriesSortedByImportance:
+                this.seriesSortedByImportanceForLineLegendLeft,
         }
     }
 
@@ -574,21 +576,19 @@ export class SlopeChart
         if (!this.manager.showLegend) return 0
 
         // can't use `lineLegendSeriesLeft` due to a circular dependency
-        const series = excludeUndefined(
-            this.visibleLineLegendLabelsRight.map((seriesName) => {
-                const series = this.seriesByName.get(seriesName)
-                if (!series) return undefined
-                return this.constructSingleLineLegendSeries(
-                    series,
-                    (series) => series.start.value,
-                    { showSeriesName: false }
-                )
-            })
+        const series = this.series.map((series) =>
+            this.constructSingleLineLegendSeries(
+                series,
+                (series) => series.start.value,
+                { showSeriesName: false }
+            )
         )
 
         return LineLegend.maxLevel({
             labelSeries: series,
             ...this.lineLegendPropsCommon,
+            seriesSortedByImportance:
+                this.seriesSortedByImportanceForLineLegendLeft,
             // not including `lineLegendPropsLeft` due to a circular dependency
         })
     }
@@ -611,13 +611,33 @@ export class SlopeChart
         })
     }
 
-    @computed get visibleLineLegendLabelsRight(): SeriesName[] {
-        if (!this.manager.showLegend) return []
-        return LineLegend.visibleSeriesNames({
-            labelSeries: this.lineLegendSeriesRight,
-            ...this.lineLegendPropsCommon,
-            ...this.lineLegendPropsRight,
-        })
+    @computed get visibleLineLegendLabelsRight(): Set<SeriesName> {
+        if (!this.manager.showLegend) return new Set()
+        return new Set(
+            LineLegend.visibleSeriesNames({
+                labelSeries: this.lineLegendSeriesRight,
+                ...this.lineLegendPropsCommon,
+                ...this.lineLegendPropsRight,
+            })
+        )
+    }
+
+    @computed get seriesSortedByImportanceForLineLegendLeft(): SeriesName[] {
+        return this.series
+            .map((s) => s.seriesName)
+            .toSorted((s1: SeriesName, s2: SeriesName): number => {
+                const PREFER_S1 = -1
+                const PREFER_S2 = 1
+
+                const s1_isLabelled = this.visibleLineLegendLabelsRight.has(s1)
+                const s2_isLabelled = this.visibleLineLegendLabelsRight.has(s2)
+
+                // prefer to show value labels for series that are already labelled
+                if (s1_isLabelled && !s2_isLabelled) return PREFER_S1
+                if (s2_isLabelled && !s1_isLabelled) return PREFER_S2
+
+                return 0
+            })
     }
 
     @computed get xRange(): [number, number] {
@@ -700,27 +720,23 @@ export class SlopeChart
 
     @computed get lineLegendSeriesLeft(): LineLabelSeries[] {
         const { showSeriesNamesInLineLegendLeft: showSeriesName } = this
-        return excludeUndefined(
-            this.visibleLineLegendLabelsRight.map((seriesName) => {
-                const series = this.seriesByName.get(seriesName)
-                if (!series) return undefined
-                return this.constructSingleLineLegendSeries(
-                    series,
-                    (series) => series.start.value,
-                    { showSeriesName }
-                )
-            })
+        return this.series.map((series) =>
+            this.constructSingleLineLegendSeries(
+                series,
+                (series) => series.start.value,
+                { showSeriesName }
+            )
         )
     }
 
     @computed get lineLegendSeriesRight(): LineLabelSeries[] {
-        return this.series.map((series) => {
-            return this.constructSingleLineLegendSeries(
+        return this.series.map((series) =>
+            this.constructSingleLineLegendSeries(
                 series,
                 (series) => series.end.value,
                 { showSeriesName: true, showAnnotation: !this.useCompactLayout }
             )
-        })
+        )
     }
 
     private playIntroAnimation() {