Stat: Add Percent Change Option (#78250)

* Stat: Add Percent Change Option

* Ensure div style only applied for percent change

* Add metrics section to gdev

* Apply new style and fix nan truthy

* Handle no text case properly

* Only display percent change with value

* Improve styling

* Remove VizOrientation dep and improve styling

* Display percent change for text mode name

* Add check for undefined percentChange

* Don't show percent change option for all values

* Make metric alignment more robust

* Make percent change column case tighter

Check undefined directly to avoid truthy issues

* Simplify percentChange calculation

* Add documentation for show percent change

* Add tests for percent change

* Refactor big value and pull out percent change

* minor changes

* initial approach at addressing setting % change colors to be conventional (not super happy with handling of contrast)

* Clean up initial color change approach (no need to handle 0 case as is handled as NaN currently

* Update shadow styling and include icon

* Update docs/sources/panels-visualizations/visualizations/stat/index.md

Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>

* Stat: Add Percent Change Option (refactor and color exploration)  (#79504)

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>

* some missed cleanup :D

* update percent change to show to not be tied to text value; update docs accordingly

* initial start for fixing scaling of % change for no text mode

* Fix styling for case where textmode is none

* Tweak styling a bit for icon and minimum padding

* Apply flex wrap to container styles

* Update gdev for stat panel tests

* attempt at fixing horizontal percent change styling / placement

---------

Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
Co-authored-by: Isabel <76437239+imatwawana@users.noreply.github.com>
Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

packages/grafana-data/src/field/fieldDisplay.ts

@@ -72,6 +72,7 @@ export interface GetFieldDisplayValuesOptions {
   fieldConfig: FieldConfigSource;
   replaceVariables: InterpolateFunction;
   sparkline?: boolean; // Calculate the sparkline
+  percentChange?: boolean; // Calculate percent change
   theme: GrafanaTheme2;
   timeZone?: TimeZone;
 }
@@ -186,6 +187,9 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
           } else {
             displayValue.title = getFieldDisplayName(field, dataFrame, data);
           }
+          displayValue.percentChange = options.percentChange
+            ? reduceField({ field: field, reducers: [ReducerID.diffperc] }).diffperc
+            : undefined;
 
           let sparkline: FieldSparkline | undefined = undefined;
           if (options.sparkline) {

packages/grafana-data/src/types/displayValue.ts

@@ -11,6 +11,10 @@ export interface DisplayValue extends FormattedValue {
    *  0-1 between min & max
    */
   percent?: number;
+  /**
+   *  0-1 percent change across range
+   */
+  percentChange?: number;
   /**
    *  Color based on mappings or threshold
    */