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

SparklineCell: Improve text alignment factor (#93539)

Browse Source
This commit is contained in:
Edvard Falkskär 2024-09-26 13:41:03 +02:00 committed by GitHub
parent 6c8f24adc9
commit 20a66343bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Table/SparklineCell.tsx
View File

@ -8,6 +8,7 @@ import {
isDataFrame, isDataFrame,
Field, Field,
isDataFrameWithValue, isDataFrameWithValue,
formattedValueToString,
} from '@grafana/data'; } from '@grafana/data';
import { import {
BarAlignment, BarAlignment,
@ -92,9 +93,7 @@ export const SparklineCell = (props: TableCellProps) => {
const displayValue = field.display!(value); const displayValue = field.display!(value);
const alignmentFactor = getAlignmentFactor(field, displayValue, cell.row.index); const alignmentFactor = getAlignmentFactor(field, displayValue, cell.row.index);
valueWidth = valueWidth = measureText(formattedValueToString(alignmentFactor), 16).width + theme.spacing.gridSize;
measureText(`${alignmentFactor.prefix ?? ''}${alignmentFactor.text}${alignmentFactor.suffix ?? ''}`, 16).width +
theme.spacing.gridSize;
valueElement = ( valueElement = (
<FormattedValueDisplay <FormattedValueDisplay

7
packages/grafana-ui/src/components/Table/utils.ts
View File

@ -531,8 +531,9 @@ export function getAlignmentFactor(
if (alignmentFactor) { if (alignmentFactor) {
// check if current alignmentFactor is still the longest // check if current alignmentFactor is still the longest
if (alignmentFactor.text.length < displayValue.text.length) { if (formattedValueToString(alignmentFactor).length < formattedValueToString(displayValue).length) {
alignmentFactor.text = displayValue.text; alignmentFactor = { ...displayValue };
field.state!.alignmentFactors = alignmentFactor;
} }
return alignmentFactor; return alignmentFactor;
} else { } else {
@ -542,7 +543,7 @@ export function getAlignmentFactor(
for (let i = rowIndex + 1; i < maxIndex; i++) { for (let i = rowIndex + 1; i < maxIndex; i++) {
const nextDisplayValue = field.display!(field.values[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; alignmentFactor.text = displayValue.text;
} }
} }