From 60d5738d866f2625542a71f3d666ca67e5424f6d Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Wed, 20 Nov 2024 16:14:14 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(slope)=20add=20support=20for=20ent?=
 =?UTF-8?q?ity=20name=20annotations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../grapher/src/slopeCharts/SlopeChart.tsx    | 29 ++++++++++++++++++-
 .../src/slopeCharts/SlopeChartConstants.ts    |  1 +
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
index 87e5c7ef1b6..677edd06bf0 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx
@@ -27,6 +27,7 @@ import {
     Time,
     SeriesStrategy,
     EntityName,
+    PrimitiveType,
 } from "@ourworldindata/types"
 import { ChartInterface } from "../chart/ChartInterface"
 import { ChartManager } from "../chart/ChartManager"
@@ -613,6 +614,28 @@ export class SlopeChart
         }
     }
 
+    // todo: for now just works with 1 y column
+    @computed private get annotationsMap(): Map<
+        PrimitiveType,
+        Set<PrimitiveType>
+    > {
+        return this.inputTable
+            .getAnnotationColumnForColumn(this.yColumnSlugs[0])
+            ?.getUniqueValuesGroupedBy(this.inputTable.entityNameSlug)
+    }
+
+    private getAnnotationsForSeries(
+        seriesName: SeriesName
+    ): string | undefined {
+        const annotationsMap = this.annotationsMap
+        const annos = annotationsMap?.get(seriesName)
+        return annos
+            ? Array.from(annos.values())
+                  .filter((anno) => anno)
+                  .join(" & ")
+            : undefined
+    }
+
     private getColorKey(
         entityName: EntityName,
         columnName: string,
@@ -671,10 +694,13 @@ export class SlopeChart
                         )
                     )
 
+                    const annotation = this.getAnnotationsForSeries(seriesName)
+
                     return {
                         seriesName,
                         color,
                         values: sortedValues,
+                        annotation,
                     } as SlopeChartSeries
                 })
                 .filter((series) => series.values.length >= 2)
@@ -792,11 +818,12 @@ export class SlopeChart
 
     @computed get labelSeries(): LineLabelSeries[] {
         return this.series.map((series) => {
-            const { seriesName, color, values } = series
+            const { seriesName, color, values, annotation } = series
             return {
                 color,
                 seriesName,
                 label: seriesName,
+                annotation,
                 yValue: values[1].y,
             }
         })
diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChartConstants.ts b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChartConstants.ts
index 6c271390a20..16d767bd113 100644
--- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChartConstants.ts
+++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChartConstants.ts
@@ -12,6 +12,7 @@ export interface SlopeChartValue {
 export interface SlopeChartSeries extends ChartSeries {
     size: number
     values: SlopeChartValue[]
+    annotation?: string
 }
 
 export const DEFAULT_SLOPE_CHART_COLOR = "#ff7f0e"