From 20a66343bd82d8e1264ca68cd6633e54dd20c07a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Edvard=20Falksk=C3=A4r?=
 <457523+edvard-falkskar@users.noreply.github.com>
Date: Thu, 26 Sep 2024 13:41:03 +0200
Subject: [PATCH] SparklineCell: Improve text alignment factor (#93539)

---
 packages/grafana-ui/src/components/Table/SparklineCell.tsx | 5 ++---
 packages/grafana-ui/src/components/Table/utils.ts          | 7 ++++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/SparklineCell.tsx b/packages/grafana-ui/src/components/Table/SparklineCell.tsx
index 3c047c0fdf0..0d6c26c4a1d 100644
--- a/packages/grafana-ui/src/components/Table/SparklineCell.tsx
+++ b/packages/grafana-ui/src/components/Table/SparklineCell.tsx
@@ -8,6 +8,7 @@ import {
   isDataFrame,
   Field,
   isDataFrameWithValue,
+  formattedValueToString,
 } from '@grafana/data';
 import {
   BarAlignment,
@@ -92,9 +93,7 @@ export const SparklineCell = (props: TableCellProps) => {
     const displayValue = field.display!(value);
     const alignmentFactor = getAlignmentFactor(field, displayValue, cell.row.index);
 
-    valueWidth =
-      measureText(`${alignmentFactor.prefix ?? ''}${alignmentFactor.text}${alignmentFactor.suffix ?? ''}`, 16).width +
-      theme.spacing.gridSize;
+    valueWidth = measureText(formattedValueToString(alignmentFactor), 16).width + theme.spacing.gridSize;
 
     valueElement = (
       <FormattedValueDisplay
diff --git a/packages/grafana-ui/src/components/Table/utils.ts b/packages/grafana-ui/src/components/Table/utils.ts
index bbd6c66cc13..6d1fa60ebef 100644
--- a/packages/grafana-ui/src/components/Table/utils.ts
+++ b/packages/grafana-ui/src/components/Table/utils.ts
@@ -531,8 +531,9 @@ export function getAlignmentFactor(
 
   if (alignmentFactor) {
     // check if current alignmentFactor is still the longest
-    if (alignmentFactor.text.length < displayValue.text.length) {
-      alignmentFactor.text = displayValue.text;
+    if (formattedValueToString(alignmentFactor).length < formattedValueToString(displayValue).length) {
+      alignmentFactor = { ...displayValue };
+      field.state!.alignmentFactors = alignmentFactor;
     }
     return alignmentFactor;
   } else {
@@ -542,7 +543,7 @@ export function getAlignmentFactor(
 
     for (let i = rowIndex + 1; i < maxIndex; i++) {
       const nextDisplayValue = field.display!(field.values[i]);
-      if (nextDisplayValue.text.length > alignmentFactor.text.length) {
+      if (formattedValueToString(alignmentFactor).length > formattedValueToString(nextDisplayValue).length) {
         alignmentFactor.text = displayValue.text;
       }
     }