diff --git a/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx b/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx index 08810daa587..16deafbd398 100644 --- a/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx +++ b/packages/@ourworldindata/grapher/src/chart/ChartUtils.tsx @@ -43,11 +43,11 @@ export const getDefaultFailMessage = (manager: ChartManager): string => { export const getSeriesKey = ( series: LineChartSeries, - suffix?: string + index: number ): string => { return `${series.seriesName}-${series.color}-${ series.isProjection ? "projection" : "" - }${suffix ? "-" + suffix : ""}` + }-${index}` } export const autoDetectSeriesStrategy = ( diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx index dd54175a663..207959ea007 100644 --- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx +++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx @@ -279,8 +279,8 @@ class Lines extends React.Component<LinesProps> { private renderLines(): React.ReactElement { return ( <> - {this.props.series.map((series) => ( - <React.Fragment key={getSeriesKey(series)}> + {this.props.series.map((series, index) => ( + <React.Fragment key={getSeriesKey(series, index)}> {this.renderLine(series)} {this.renderLineMarkers(series)} </React.Fragment> @@ -556,7 +556,7 @@ export class LineChart y2={verticalAxis.range[1]} stroke="rgba(180,180,180,.4)" /> - {this.renderSeries.map((series) => { + {this.renderSeries.map((series, index) => { const value = series.points.find( (point) => point.x === activeX ) @@ -574,7 +574,7 @@ export class LineChart return ( <circle - key={getSeriesKey(series)} + key={getSeriesKey(series, index)} cx={horizontalAxis.place(value.x)} cy={verticalAxis.place(value.y)} r={this.lineStrokeWidth / 2 + 3.5} diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx index f36393b9e96..950ae9ad19e 100644 --- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx +++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx @@ -39,6 +39,7 @@ import { MARKER_MARGIN, NON_FOCUSED_TEXT_COLOR, } from "./LineLegendConstants.js" +import { getSeriesKey } from "./LineLegendHelpers" export interface LineLabelSeries extends ChartSeries { label: string @@ -150,7 +151,7 @@ class LineLabels extends React.Component<{ @computed private get textLabels(): React.ReactElement { return ( <g id={makeIdForHumanConsumption("text-labels")}> - {this.markers.map(({ series, labelText }) => { + {this.markers.map(({ series, labelText }, index) => { const textColor = !series.focus?.background || series.hover?.active ? darkenColorForText(series.color) @@ -164,7 +165,7 @@ class LineLabels extends React.Component<{ return series.textWrap instanceof TextWrap ? ( <Halo id={series.seriesName} - key={series.seriesName} + key={getSeriesKey(series, index)} show={this.showTextOutline} outlineColor={this.textOutlineColor} > @@ -197,12 +198,12 @@ class LineLabels extends React.Component<{ if (!markersWithAnnotations) return return ( <g id={makeIdForHumanConsumption("text-annotations")}> - {markersWithAnnotations.map(({ series, labelText }) => { + {markersWithAnnotations.map(({ series, labelText }, index) => { if (!series.annotationTextWrap) return return ( <Halo id={series.seriesName} - key={series.seriesName} + key={getSeriesKey(series, index)} show={this.showTextOutline} outlineColor={this.textOutlineColor} > @@ -232,7 +233,7 @@ class LineLabels extends React.Component<{ if (!this.props.needsConnectorLines) return return ( <g id={makeIdForHumanConsumption("connectors")}> - {this.markers.map(({ series, connectorLine }) => { + {this.markers.map(({ series, connectorLine }, index) => { const { x1, x2 } = connectorLine const { level, @@ -253,7 +254,7 @@ class LineLabels extends React.Component<{ return ( <path id={makeIdForHumanConsumption(series.seriesName)} - key={series.seriesName} + key={getSeriesKey(series, index)} d={d} stroke={lineColor} strokeWidth={0.5} @@ -268,14 +269,14 @@ class LineLabels extends React.Component<{ @computed private get interactions(): React.ReactElement | void { return ( <g> - {this.props.series.map((series) => { + {this.props.series.map((series, index) => { const x = this.anchor === "start" ? series.origBounds.x : series.origBounds.x - series.bounds.width return ( <g - key={series.seriesName} + key={getSeriesKey(series, index)} onMouseOver={() => this.props.onMouseOver?.(series)} onMouseLeave={() => this.props.onMouseLeave?.(series) diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegendHelpers.ts b/packages/@ourworldindata/grapher/src/lineLegend/LineLegendHelpers.ts index 17310a4d4e6..286c5cf7f36 100644 --- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegendHelpers.ts +++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegendHelpers.ts @@ -245,3 +245,7 @@ export function computeCandidateScores( return scoreMap } + +export function getSeriesKey(series: PlacedSeries, index: number): string { + return `${series.seriesName}-${index}` +}