From 23fd69f57277a6d59d78e18dd520bc32cde65ef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Fri, 26 Sep 2025 10:10:05 +0200
Subject: [PATCH] Flame Graph: Use suffix for values formatted with a short
 formatter (#110999)

* Flame Graph: Use suffix for values formatted with a short formatter

* Fix linting
---
 .../src/FlameGraph/FlameGraphTooltip.test.tsx | 44 +++++++++++++++++++
 .../src/FlameGraph/FlameGraphTooltip.tsx      | 15 ++++---
 2 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.test.tsx b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.test.tsx
index 7ad62ca5f78..630d97b6f4c 100644
--- a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.test.tsx
+++ b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.test.tsx
@@ -111,6 +111,20 @@ describe('FlameGraphTooltip', () => {
   });
 });
 
+function setupDiffData2() {
+  const flameGraphData = createDataFrame({
+    fields: [
+      { name: 'level', values: [0, 1] },
+      { name: 'value', values: [101, 101] },
+      { name: 'valueRight', values: [100, 100] },
+      { name: 'self', values: [100, 100] },
+      { name: 'selfRight', values: [1, 1] },
+      { name: 'label', values: ['total', 'func1'] },
+    ],
+  });
+  return new FlameGraphDataContainer(flameGraphData, { collapsing: true });
+}
+
 describe('getDiffTooltipData', () => {
   it('works with diff data', () => {
     const tooltipData = getDiffTooltipData(
@@ -142,6 +156,36 @@ describe('getDiffTooltipData', () => {
       },
     ]);
   });
+  it('works with diff data and short values', () => {
+    const tooltipData = getDiffTooltipData(
+      setupDiffData2(),
+      { start: 0, itemIndexes: [1], value: 101, valueRight: 100, children: [], level: 0 },
+      200
+    );
+    expect(tooltipData).toEqual([
+      {
+        rowId: '1',
+        label: '% of total',
+        baseline: '1%',
+        comparison: '100%',
+        diff: '9.90 K%',
+      },
+      {
+        rowId: '2',
+        label: 'Value',
+        baseline: '1',
+        comparison: '100',
+        diff: '99',
+      },
+      {
+        rowId: '3',
+        label: 'Samples',
+        baseline: '1',
+        comparison: '100',
+        diff: '99',
+      },
+    ]);
+  });
 });
 
 function makeField(name: string, unit: string, values: number[]): Field {
diff --git a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx
index b9dca5a3a94..42e0f331764 100644
--- a/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx
+++ b/packages/grafana-flamegraph/src/FlameGraph/FlameGraphTooltip.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-import { DisplayValue, getValueFormat, GrafanaTheme2 } from '@grafana/data';
+import { DisplayValue, getValueFormat, GrafanaTheme2, ValueFormatter } from '@grafana/data';
 import { InteractiveTable, Portal, useStyles2, VizTooltipContainer } from '@grafana/ui';
 
 import { CollapseConfig, FlameGraphDataContainer, LevelItem } from './dataTransform';
@@ -122,6 +122,11 @@ type DiffTableData = {
   diff: string | number;
 };
 
+const formatWithSuffix = (value: number, formatter: ValueFormatter): string => {
+  const displayValue = formatter(value);
+  return displayValue.text + displayValue.suffix;
+};
+
 export const getDiffTooltipData = (
   data: FlameGraphDataContainer,
   item: LevelItem,
@@ -148,7 +153,7 @@ export const getDiffTooltipData = (
       label: '% of total',
       baseline: percentageLeft + '%',
       comparison: percentageRight + '%',
-      diff: shortValFormat(diff).text + '%',
+      diff: formatWithSuffix(diff, shortValFormat) + '%',
     },
     {
       rowId: '2',
@@ -160,9 +165,9 @@ export const getDiffTooltipData = (
     {
       rowId: '3',
       label: 'Samples',
-      baseline: shortValFormat(valueLeft).text,
-      comparison: shortValFormat(item.valueRight!).text,
-      diff: shortValFormat(item.valueRight! - valueLeft).text,
+      baseline: formatWithSuffix(valueLeft, shortValFormat),
+      comparison: formatWithSuffix(item.valueRight!, shortValFormat),
+      diff: formatWithSuffix(item.valueRight! - valueLeft, shortValFormat),
     },
   ];
 };