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

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', () => {

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