From 50799478366172cc41b19da9f928cc44b15ea640 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Mon, 21 Oct 2024 16:52:40 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(legend)=20fix=20vertical=20posi?= =?UTF-8?q?tioning=20(#4072)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../VerticalColorLegend.tsx | 50 ++++++++++--------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx index 49c9cccc2e0..1851979afae 100644 --- a/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx +++ b/packages/@ourworldindata/grapher/src/verticalColorLegend/VerticalColorLegend.tsx @@ -89,31 +89,33 @@ export class VerticalColorLegend extends React.Component<{ lineHeight, } = this - return manager.legendItems - .map((series, index) => { - let label = series.label - // infer label for numeric bins - if (!label && series.minText && series.maxText) { - label = `${series.minText} – ${series.maxText}` - } - const textWrap = new TextWrap({ - maxWidth: this.maxLegendWidth, - fontSize, - lineHeight: 1, - text: label ?? "", - }) - const width = rectSize + rectPadding + textWrap.width - const height = Math.max(textWrap.height, rectSize) - const yOffset = titleHeight + index * (height + lineHeight) - return { - textWrap, - color: series.color, - width, - height, - yOffset, - } + let runningYOffset = titleHeight + return manager.legendItems.map((series) => { + let label = series.label + // infer label for numeric bins + if (!label && series.minText && series.maxText) { + label = `${series.minText} – ${series.maxText}` + } + const textWrap = new TextWrap({ + maxWidth: this.maxLegendWidth, + fontSize, + lineHeight: 1, + text: label ?? "", }) - .filter((v) => !!v) as SizedLegendSeries[] + const width = rectSize + rectPadding + textWrap.width + const height = Math.max(textWrap.height, rectSize) + const yOffset = runningYOffset + + runningYOffset += height + lineHeight + + return { + textWrap, + color: series.color, + width, + height, + yOffset, + } + }) } @computed get width(): number {