From 1f9562ea72cb4e46c202ee911ffaa41d269425f2 Mon Sep 17 00:00:00 2001 From: Kristina Date: Wed, 9 Oct 2024 11:24:06 -0500 Subject: [PATCH] State Timeline: Align left text to 0 when rectangle is left-truncated (#94422) Handle negative x placement with displaying text --- public/app/core/components/TimelineChart/timeline.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/public/app/core/components/TimelineChart/timeline.ts b/public/app/core/components/TimelineChart/timeline.ts index f0b7eec771c..68acea164f6 100644 --- a/public/app/core/components/TimelineChart/timeline.ts +++ b/public/app/core/components/TimelineChart/timeline.ts @@ -321,7 +321,11 @@ export function getConfig(opts: TimelineCoreOptions) { continue; } - let maxChars = Math.floor(boxRect?.w / pxPerChar); + // if x placement is negative, rect is left truncated, remove it from width for calculating how many chars will display + // right truncation happens automatically + const displayedBoxWidth = boxRect.x < 0 ? boxRect?.w + boxRect.x : boxRect?.w; + + let maxChars = Math.floor(displayedBoxWidth / pxPerChar); if (showValue === VisibilityMode.Auto && maxChars < 2) { continue; @@ -333,7 +337,7 @@ export function getConfig(opts: TimelineCoreOptions) { let x = round(boxRect.x + xOff + boxRect.w / 2); if (mode === TimelineMode.Changes) { if (alignValue === 'left') { - x = round(boxRect.x + xOff + strokeWidth + textPadding); + x = round(Math.max(boxRect.x, 0) + xOff + strokeWidth + textPadding); } else if (alignValue === 'right') { x = round(boxRect.x + xOff + boxRect.w - strokeWidth - textPadding); }