SparklineCell: Improve text alignment factor (#93539)

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

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;
       }
     }