IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

State Timeline: Align left text to 0 when rectangle is left-truncated (#94422)

Browse Source 
Handle negative x placement with displaying text
This commit is contained in:
Kristina 2024-10-09 11:24:06 -05:00 committed by GitHub
parent e8bcc5e831
commit 1f9562ea72
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/core/components/TimelineChart/timeline.ts
View File

@ -321,7 +321,11 @@ export function getConfig(opts: TimelineCoreOptions) {
continue; 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) { if (showValue === VisibilityMode.Auto && maxChars < 2) {
continue; continue;
@ -333,7 +337,7 @@ export function getConfig(opts: TimelineCoreOptions) {
let x = round(boxRect.x + xOff + boxRect.w / 2); let x = round(boxRect.x + xOff + boxRect.w / 2);
if (mode === TimelineMode.Changes) { if (mode === TimelineMode.Changes) {
if (alignValue === 'left') { if (alignValue === 'left') {
x = round(boxRect.x + xOff + strokeWidth + textPadding); x = round(Math.max(boxRect.x, 0) + xOff + strokeWidth + textPadding);
} else if (alignValue === 'right') { } else if (alignValue === 'right') {
x = round(boxRect.x + xOff + boxRect.w - strokeWidth - textPadding); x = round(boxRect.x + xOff + boxRect.w - strokeWidth - textPadding);
} }