From 1d23c6cf882d0b7f3a5932f6408b2da5566122fa Mon Sep 17 00:00:00 2001
From: Paul Marbach <paul.marbach@grafana.com>
Date: Mon, 20 Oct 2025 09:59:49 -0400
Subject: [PATCH] Stat: Fix math for percent change value heights when
 sparkline is not rendered (#112599)

* Stat: Fix math for percent change value heights when sparkline is not rendered

* add tests
---
 .../BigValue/BigValueLayout.test.tsx          | 22 +++++++++++++++++++
 .../components/BigValue/BigValueLayout.tsx    | 16 +++++++++++---
 2 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
index 8a2cf4aaf25..462e1f5e3dd 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
@@ -100,6 +100,28 @@ describe('BigValueLayout', () => {
       );
       expect(layout).toBeInstanceOf(WideWithChartLayout);
     });
+
+    it.each([
+      ['wide layout', {}],
+      ['non-wide layout', { disableWideLayout: true }],
+    ])('should shrink the value if percent change is shown for %s', (_, propsOverride) => {
+      const baseProps: Partial<Props> = {
+        width: 300,
+        height: 100,
+        sparkline: undefined,
+        alignmentFactors: {
+          text: '1000',
+          title: '12',
+        },
+        ...propsOverride,
+      };
+      const layout = buildLayout(getProps(baseProps));
+      const layoutWithPercentChange = buildLayout(
+        getProps({ ...baseProps, value: { text: '25', numeric: 25, percentChange: 20 } })
+      );
+
+      expect(layoutWithPercentChange.valueFontSize).toBeLessThan(layout.valueFontSize);
+    });
   });
 
   describe('percentChangeColor', () => {
diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index 07d1c41c559..d13408d3271 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -171,7 +171,7 @@ export abstract class BigValueLayout {
 
     return {
       containerStyles,
-      iconSize: iconSize,
+      iconSize,
     };
   }
 
@@ -294,11 +294,16 @@ export class WideNoChartLayout extends BigValueLayout {
     const valueWidthPercent = this.titleToAlignTo?.length ? 0.3 : 1.0;
 
     if (this.valueToAlignTo.length) {
+      let valueHeight = this.maxTextHeight;
+      if (props.value.percentChange != null) {
+        // percent change uses 40% of value height, so we want to scale the value font size accordingly
+        valueHeight = valueHeight * 0.75;
+      }
       // initial value size
       this.valueFontSize = calculateFontSize(
         this.valueToAlignTo,
         this.maxTextWidth * valueWidthPercent,
-        this.maxTextHeight,
+        valueHeight,
         LINE_HEIGHT,
         undefined,
         VALUE_FONT_WEIGHT
@@ -479,10 +484,15 @@ export class StackedWithNoChartLayout extends BigValueLayout {
     }
 
     if (this.valueToAlignTo.length) {
+      let valueHeight = this.maxTextHeight - titleHeight;
+      if (props.value.percentChange != null) {
+        // percent change uses 40% of value height, so we want to scale the value font size accordingly
+        valueHeight = valueHeight * 0.75;
+      }
       this.valueFontSize = calculateFontSize(
         this.valueToAlignTo,
         this.maxTextWidth,
-        this.maxTextHeight - titleHeight,
+        valueHeight,
         LINE_HEIGHT,
         undefined,
         VALUE_FONT_WEIGHT