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

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 {

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,
+      baseline: formatWithSuffix(valueLeft, shortValFormat),
-      comparison: shortValFormat(item.valueRight!).text,
+      comparison: formatWithSuffix(item.valueRight!, shortValFormat),
-      diff: shortValFormat(item.valueRight! - valueLeft).text,
+      diff: formatWithSuffix(item.valueRight! - valueLeft, shortValFormat),
     },
   ];
 };