Dashboards: Add option to specify explicit percent change text size for stat panels (#96952)

Add option to change percent change text size

packages/grafana-schema/src/common/common.gen.ts

@@ -576,6 +576,10 @@ export type TimelineValueAlignment = ('center' | 'left' | 'right');
  * TODO docs
  */
 export interface VizTextDisplayOptions {
+  /**
+   * Explicit percent text size
+   */
+  percentSize?: number;
   /**
    * Explicit title text size
    */

packages/grafana-schema/src/common/mudball.cue

@@ -206,6 +206,8 @@ VizTextDisplayOptions: {
 	titleSize?: number
 	// Explicit value text size
 	valueSize?: number
+	// Explicit percent text size
+	percentSize?: number
 } @cuetsy(kind="interface")
 
 // TODO docs

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -19,6 +19,7 @@ const VALUE_FONT_WEIGHT = 500;
 export abstract class BigValueLayout {
   titleFontSize: number;
   valueFontSize: number;
+  percentFontSize: number;
   chartHeight: number;
   chartWidth: number;
   valueColor: string;
@@ -41,6 +42,7 @@ export abstract class BigValueLayout {
     this.titleToAlignTo = this.textValues.titleToAlignTo;
     this.titleFontSize = 0;
     this.valueFontSize = 0;
+    this.percentFontSize = 0;
     this.chartHeight = 0;
     this.chartWidth = 0;
     this.maxTextWidth = width - this.panelPadding * 2;
@@ -56,6 +58,9 @@ export abstract class BigValueLayout {
         this.valueFontSize = text.valueSize;
         this.valueToAlignTo = '';
       }
+      if (text.percentSize) {
+        this.percentFontSize = text.percentSize;
+      }
     }
   }
 
@@ -111,8 +116,8 @@ export abstract class BigValueLayout {
   ): PercentChangeStyles {
     const VALUE_TO_PERCENT_CHANGE_RATIO = 2.5;
     const valueContainerStyles = this.getValueAndTitleContainerStyles();
-    const percentFontSize = Math.max(this.valueFontSize / VALUE_TO_PERCENT_CHANGE_RATIO, 12);
-    let iconSize = Math.max(this.valueFontSize / 3, 10);
+    const percentFontSize = this.percentFontSize || Math.max(this.valueFontSize / VALUE_TO_PERCENT_CHANGE_RATIO, 12);
+    let iconSize = this.percentFontSize ? this.percentFontSize - 3 : Math.max(this.valueFontSize / 3, 10);
     const themeVisualizationColors = this.props.theme.visualization;
     const color = getPercentChangeColor(percentChange, percentChangeColorMode, valueStyles, themeVisualizationColors);
 

packages/grafana-ui/src/options/builder/text.tsx

@@ -38,4 +38,17 @@ export function addTextSizeOptions<T extends OptionsWithTextFormatting>(
     },
     defaultValue: undefined,
   });
+
+  builder.addNumberInput({
+    path: 'text.percentSize',
+    category: ['Text size'],
+    name: 'Percent change',
+    settings: {
+      placeholder: 'Auto',
+      integer: false,
+      min: 1,
+      max: 200,
+    },
+    defaultValue: undefined,
+  });
 }