From 5cb9ae77b7a1259deff587d02dbfa527411bbb2b Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 6 Jun 2024 17:21:47 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20(grapher)=20prevent=20infinite?= =?UTF-8?q?=20loop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grapher/src/barCharts/DiscreteBarChart.tsx | 15 ++++++++++++--- .../src/stackedCharts/StackedDiscreteBarChart.tsx | 15 ++++++++++++--- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx index 26ea150a181..479be5124cb 100644 --- a/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx +++ b/packages/@ourworldindata/grapher/src/barCharts/DiscreteBarChart.tsx @@ -905,19 +905,28 @@ export class DiscreteBarChart const barHeight = this.approximateBarHeight return this.series.map((series) => { + // make sure we're dealing with a single-line text fragment + const seriesName = series.seriesName.replace(/\n/g, " ").trim() + let label = new TextWrap({ - text: series.seriesName, + text: seriesName, maxWidth: this.boundsWithoutColorLegend.width * 0.3, ...this.legendLabelStyle, }) // prevent labels from being taller than the bar - while (label.height > barHeight && label.lines.length > 1) { + let step = 0 + while ( + label.height > barHeight && + label.lines.length > 1 && + step < 10 // safety net + ) { label = new TextWrap({ - text: series.seriesName, + text: seriesName, maxWidth: label.maxWidth + 20, ...this.legendLabelStyle, }) + step += 1 } return { ...series, label } diff --git a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx index 2e809533b42..a6630341179 100644 --- a/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx +++ b/packages/@ourworldindata/grapher/src/stackedCharts/StackedDiscreteBarChart.tsx @@ -332,19 +332,28 @@ export class StackedDiscreteBarChart const barHeight = this.approximateBarHeight return this.items.map((item) => { + // make sure we're dealing with a single-line text fragment + const entityName = item.entityName.replace(/\n/g, " ").trim() + let label = new TextWrap({ - text: item.entityName, + text: entityName, maxWidth: this.boundsWithoutLegend.width * 0.3, ...this.labelStyle, }) // prevent labels from being taller than the bar - while (label.height > barHeight && label.lines.length > 1) { + let step = 0 + while ( + label.height > barHeight && + label.lines.length > 1 && + step < 10 // safety net + ) { label = new TextWrap({ - text: item.entityName, + text: entityName, maxWidth: label.maxWidth + 20, ...this.labelStyle, }) + step += 1 } return { ...item, label }