From bdb652da1198f11067c9d2e1a39ca9eb073cd699 Mon Sep 17 00:00:00 2001 From: Sophia Mersmann Date: Tue, 1 Oct 2024 20:20:34 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20(grapher)=20increase=20padding=20be?= =?UTF-8?q?tween=20line=20label=20and=20annotation=20(#3994)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../grapher/src/lineLegend/LineLegend.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx index fec34188f4f..39b3e1da829 100644 --- a/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx +++ b/packages/@ourworldindata/grapher/src/lineLegend/LineLegend.tsx @@ -27,6 +27,8 @@ import { darkenColorForText } from "../color/ColorUtils" const LEGEND_ITEM_MIN_SPACING = 2 // Horizontal distance from the end of the chart to the start of the marker const MARKER_MARGIN = 4 +// Space between the label and the annotation +const ANNOTATION_PADDING = 2 const DEFAULT_FONT_WEIGHT = 400 @@ -144,7 +146,9 @@ class Label extends React.Component<{ {series.annotationTextWrap && series.annotationTextWrap.render( needsLines ? markerX2 + MARKER_MARGIN : markerX1, - series.bounds.y + series.textWrap.height, + series.bounds.y + + series.textWrap.height + + ANNOTATION_PADDING, { id: makeIdForHumanConsumption("annotation"), textProps: { @@ -226,7 +230,9 @@ export class LineLegend extends React.Component<{ ), height: textWrap.height + - (annotationTextWrap ? annotationTextWrap.height : 0), + (annotationTextWrap + ? ANNOTATION_PADDING + annotationTextWrap.height + : 0), } }) }