✨ (line) deduplicate line labels (#4420)

packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx

@@ -1363,13 +1363,21 @@ export class LineChart
     // Order of the legend items on a line chart should visually correspond
     // to the order of the lines as the approach the legend
     @computed get lineLegendSeries(): LineLabelSeries[] {
-        // If there are any projections, ignore non-projection legends
-        // Bit of a hack
-        let seriesToShow = this.series
-        if (seriesToShow.some((series) => !!series.isProjection))
-            seriesToShow = seriesToShow.filter((series) => series.isProjection)
+        // If there are any projections, ignore non-projection legends (bit of a hack)
+        let series = this.series
+        if (series.some((series) => !!series.isProjection))
+            series = series.filter((series) => series.isProjection)
+
+        // Deduplicate series by seriesName to avoid showing the same label multiple times
+        const deduplicatedSeries: LineChartSeries[] = []
+        const seriesGroupedByName = groupBy(series, "seriesName")
+        for (const duplicates of Object.values(seriesGroupedByName)) {
+            // keep only the label for the series with the most recent data
+            // (series are sorted by time, so we can just take the last one)
+            deduplicatedSeries.push(last(duplicates)!)
+        }
 
-        return seriesToShow.map((series) => {
+        return deduplicatedSeries.map((series) => {
             const { seriesName, color } = series
             const lastValue = last(series.points)!.y
             return {