🐛 hide entity name when a single entity is selected in multi-indicato…

…r line and slope charts
owid · Feb 26, 2025 · 344cc8f · 344cc8f
1 parent 252b6c0
commit 344cc8f
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 50 deletions.
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx
@@ -106,7 +106,6 @@ import {
     AnnotationsMap,
     getAnnotationsForSeries,
     getAnnotationsMap,
-    getColorKey,
     getSeriesName,
 } from "./LineChartHelpers"
 import { FocusArray } from "../focus/FocusArray.js"
@@ -1246,8 +1245,7 @@ export class LineChart
         column: CoreColumn
     ): LineChartSeries {
         const {
-            manager: { canSelectMultipleEntities = false },
-            transformedTable: { availableEntityNames },
+            transformedTable: { availableEntityNames: selectedEntityNames },
             seriesStrategy,
             hasColorScale,
             colorColumn,
@@ -1285,23 +1283,15 @@ export class LineChart
             entityName,
             columnName,
             seriesStrategy,
-            availableEntityNames,
-            canSelectMultipleEntities,
+            selectedEntityNames,
         })
 
         let seriesColor: Color
         if (hasColorScale) {
             const colorValue = last(points)?.colorValue
             seriesColor = this.getColorScaleColor(colorValue)
         } else {
-            seriesColor = this.categoricalColorAssigner.assign(
-                getColorKey({
-                    entityName,
-                    columnName,
-                    seriesStrategy,
-                    availableEntityNames,
-                })
-            )
+            seriesColor = this.categoricalColorAssigner.assign(seriesName)
         }
 
         return {

diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts b/packages/@ourworldindata/grapher/src/lineCharts/LineChartConstants.ts
@@ -51,5 +51,4 @@ export interface LinesProps {
 export interface LineChartManager extends ChartManager {
     entityYearHighlight?: EntityYearHighlight
     lineStrokeWidth?: number
-    canSelectMultipleEntities?: boolean // used to pick an appropriate series name
 }
diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChartHelpers.ts b/packages/@ourworldindata/grapher/src/lineCharts/LineChartHelpers.ts
@@ -17,47 +17,23 @@ export function getSeriesName({
     entityName,
     columnName,
     seriesStrategy,
-    availableEntityNames,
-    canSelectMultipleEntities,
+    selectedEntityNames,
 }: {
     entityName: EntityName
     columnName: string
     seriesStrategy: SeriesStrategy
-    availableEntityNames: EntityName[]
-    canSelectMultipleEntities: boolean
+    selectedEntityNames: EntityName[]
 }): SeriesName {
     // if entities are plotted, use the entity name
     if (seriesStrategy === SeriesStrategy.entity) return entityName
 
     // if columns are plotted, use the column name
-    // and prepend the entity name if multiple entities can be selected
-    return availableEntityNames.length > 1 || canSelectMultipleEntities
+    // and prepend the entity name if multiple entities are selected
+    return selectedEntityNames.length > 1
         ? `${entityName} – ${columnName}`
         : columnName
 }
 
-export function getColorKey({
-    entityName,
-    columnName,
-    seriesStrategy,
-    availableEntityNames,
-}: {
-    entityName: EntityName
-    columnName: string
-    seriesStrategy: SeriesStrategy
-    availableEntityNames: EntityName[]
-}): SeriesName {
-    // if entities are plotted, use the entity name
-    if (seriesStrategy === SeriesStrategy.entity) return entityName
-
-    // If only one entity is plotted, we want to use the column colors.
-    // Unlike in `getSeriesName`, we don't care whether the user can select
-    // multiple entities, only whether more than one is plotted.
-    return availableEntityNames.length > 1
-        ? `${entityName} - ${columnName}`
-        : columnName
-}
-
 export function getAnnotationsMap(
     table: OwidTable,
     slug: ColumnSlug

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -78,7 +78,6 @@ import {
     AnnotationsMap,
     getAnnotationsForSeries,
     getAnnotationsMap,
-    getColorKey,
     getSeriesName,
 } from "../lineCharts/LineChartHelpers"
 import { SelectionArray } from "../selection/SelectionArray"
@@ -98,7 +97,6 @@ type SVGMouseOrTouchEvent =
     | React.TouchEvent<SVGGElement>
 
 export interface SlopeChartManager extends ChartManager {
-    canSelectMultipleEntities?: boolean // used to pick an appropriate series name
     hasTimeline?: boolean // used to filter the table for the entity selector
     hideNoDataSection?: boolean
 }
@@ -326,16 +324,15 @@ export class SlopeChart
         column: CoreColumn
     ): RawSlopeChartSeries {
         const { startTime, endTime, seriesStrategy } = this
-        const { canSelectMultipleEntities = false } = this.manager
 
-        const { availableEntityNames } = this.transformedTable
+        const { availableEntityNames: selectedEntityNames } =
+            this.transformedTable
         const columnName = column.nonEmptyDisplayName
         const props = {
             entityName,
             columnName,
             seriesStrategy,
-            availableEntityNames,
-            canSelectMultipleEntities,
+            selectedEntityNames,
         }
         const seriesName = getSeriesName(props)
         const displayName = getSeriesName({
@@ -347,8 +344,7 @@ export class SlopeChart
         const start = owidRowByTime?.get(startTime)
         const end = owidRowByTime?.get(endTime)
 
-        const colorKey = getColorKey(props)
-        const color = this.categoricalColorAssigner.assign(colorKey)
+        const color = this.categoricalColorAssigner.assign(seriesName)
 
         const annotation = getAnnotationsForSeries(
             this.annotationsMap,