From f15af23a600ca409b10f9d53f70fc08036f6163c Mon Sep 17 00:00:00 2001 From: sophiamersmann Date: Thu, 5 Dec 2024 12:01:17 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(slope)=20make=20line=20legend=20a?= =?UTF-8?q?=20bit=20more=20narrow=20in=20compact=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grapher/src/slopeCharts/SlopeChart.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx index 3e391fc4958..67f11b88b0f 100644 --- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx +++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx @@ -509,7 +509,9 @@ export class SlopeChart } @computed get maxLineLegendWidth(): number { - return 0.25 * this.innerBounds.width + return this.useCompactLayout + ? 0.15 * this.innerBounds.width + : 0.25 * this.innerBounds.width } @computed get lineLegendFontSize(): number { @@ -650,7 +652,7 @@ export class SlopeChart return this.xRange[1] + LINE_LEGEND_PADDING } - @computed get useCompactLineLegend(): boolean { + @computed get useCompactLayout(): boolean { return !!this.manager.isSemiNarrow } @@ -675,7 +677,7 @@ export class SlopeChart seriesName, label, formattedValue, - valueInNewLine: this.useCompactLineLegend, + valueInNewLine: this.useCompactLayout, yValue: start.value, } }) @@ -690,16 +692,16 @@ export class SlopeChart color, seriesName, label: seriesName, - annotation: this.useCompactLineLegend ? undefined : annotation, + annotation: this.useCompactLayout ? undefined : annotation, formattedValue, - valueInNewLine: this.useCompactLineLegend, + valueInNewLine: this.useCompactLayout, yValue: end.value, } }) } @computed private get lineLegendConnectorLinesWidth(): number { - return this.useCompactLineLegend ? 15 : 25 + return this.useCompactLayout ? 15 : 25 } private playIntroAnimation() {