From 3c78fb1aa4ea4a379762d5d03c8d9656f12a024c Mon Sep 17 00:00:00 2001
From: XZCendence <44044176+XZCendence@users.noreply.github.com>
Date: Thu, 12 Dec 2024 01:15:29 -0500
Subject: [PATCH] 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    |  4 ++++
 packages/grafana-schema/src/common/mudball.cue      |  2 ++
 .../src/components/BigValue/BigValueLayout.tsx      |  9 +++++++--
 packages/grafana-ui/src/options/builder/text.tsx    | 13 +++++++++++++
 4 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-schema/src/common/common.gen.ts b/packages/grafana-schema/src/common/common.gen.ts
index ad1169b3c96..580ff15f40d 100644
--- a/packages/grafana-schema/src/common/common.gen.ts
+++ b/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
    */
diff --git a/packages/grafana-schema/src/common/mudball.cue b/packages/grafana-schema/src/common/mudball.cue
index 3ef52efbe31..d131935c497 100644
--- a/packages/grafana-schema/src/common/mudball.cue
+++ b/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
diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index 23b32b90ad1..ef0a5a80f02 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/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);
 
diff --git a/packages/grafana-ui/src/options/builder/text.tsx b/packages/grafana-ui/src/options/builder/text.tsx
index d6ecba45ebc..b2cfd425113 100644
--- a/packages/grafana-ui/src/options/builder/text.tsx
+++ b/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,
+  });
 }