StatPanels: Add new calculation option for percentage difference (#26369)

* Update fieldReducer.ts

addition of percentage difference to the singlestat panel

* Update time_series2.ts

* Update module.ts

* Update calculations-list.md

* Update docs/sources/panels/calculations-list.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update public/app/plugins/panel/singlestat/module.ts

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update module.ts

* Update calculations-list.md

* Update calculations-list.md

* Update module.ts

* Update fieldReducer.ts

* Update fieldReducer.ts

* Update fieldReducer.test.ts

* change name to remove wildcard characters

* Update calculations-list.md

* Update time_series2.ts

Fix spelling

* Update module.ts

* Update fieldReducer.ts

* formatting

* Update fieldReducer.ts

* Update fieldReducer.test.ts

* Update fieldReducer.test.ts

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

docs/sources/panels/calculations-list.md

@@ -21,6 +21,7 @@ Among other places, these calculations are used in the Transform tab and the bar
 | Count | number of values in a field|
 | Count | number of values in a field|
 | Delta | cumulative change in value |
 | Delta | cumulative change in value |
 | Difference | difference between first and last value of a field|
 | Difference | difference between first and last value of a field|
+| Difference percent | percentage change between first and last value of a field |
 | Distinct count | number of unique values in a field |
 | Distinct count | number of unique values in a field |
 | First (not null) | first, not null value in a field|
 | First (not null) | first, not null value in a field|
 | Max | maximum value of a field |
 | Max | maximum value of a field |

packages/grafana-data/src/transformations/fieldReducer.test.ts

@@ -130,12 +130,13 @@ describe('Stats Calculators', () => {
 
 
     const stats = reduceField({
     const stats = reduceField({
       field: createField('x', info[0].data),
       field: createField('x', info[0].data),
-      reducers: [ReducerID.first, ReducerID.last, ReducerID.firstNotNull, ReducerID.lastNotNull], // uses standard path
+      reducers: [ReducerID.first, ReducerID.last, ReducerID.firstNotNull, ReducerID.lastNotNull, ReducerID.diffperc], // uses standard path
     });
     });
     expect(stats[ReducerID.first]).toEqual(null);
     expect(stats[ReducerID.first]).toEqual(null);
     expect(stats[ReducerID.last]).toEqual(null);
     expect(stats[ReducerID.last]).toEqual(null);
     expect(stats[ReducerID.firstNotNull]).toEqual(200);
     expect(stats[ReducerID.firstNotNull]).toEqual(200);
     expect(stats[ReducerID.lastNotNull]).toEqual(200);
     expect(stats[ReducerID.lastNotNull]).toEqual(200);
+    expect(stats[ReducerID.diffperc]).toEqual(0);
 
 
     const reducers = [ReducerID.lastNotNull, ReducerID.firstNotNull];
     const reducers = [ReducerID.lastNotNull, ReducerID.firstNotNull];
     for (const input of info) {
     for (const input of info) {

packages/grafana-data/src/transformations/fieldReducer.ts

@@ -15,6 +15,7 @@ export enum ReducerID {
   count = 'count',
   count = 'count',
   range = 'range',
   range = 'range',
   diff = 'diff',
   diff = 'diff',
+  diffperc = 'diffperc',
   delta = 'delta',
   delta = 'delta',
   step = 'step',
   step = 'step',
 
 
@@ -223,6 +224,12 @@ export const fieldReducers = new Registry<FieldReducerInfo>(() => [
     standard: false,
     standard: false,
     reduce: calculateDistinctCount,
     reduce: calculateDistinctCount,
   },
   },
+  {
+    id: ReducerID.diffperc,
+    name: 'Difference percent',
+    description: 'Percentage difference between first and last values',
+    standard: true,
+  },
 ]);
 ]);
 
 
 export function doStandardCalcs(field: Field, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs {
 export function doStandardCalcs(field: Field, ignoreNulls: boolean, nullAsZero: boolean): FieldCalcs {
@@ -244,6 +251,7 @@ export function doStandardCalcs(field: Field, ignoreNulls: boolean, nullAsZero:
     diff: null,
     diff: null,
     delta: 0,
     delta: 0,
     step: Number.MAX_VALUE,
     step: Number.MAX_VALUE,
+    diffperc: 0,
 
 
     // Just used for calculations -- not exposed as a stat
     // Just used for calculations -- not exposed as a stat
     previousDeltaUp: true,
     previousDeltaUp: true,
@@ -353,6 +361,9 @@ export function doStandardCalcs(field: Field, ignoreNulls: boolean, nullAsZero:
     calcs.diff = calcs.lastNotNull - calcs.firstNotNull;
     calcs.diff = calcs.lastNotNull - calcs.firstNotNull;
   }
   }
 
 
+  if (isNumber(calcs.firstNotNull) && isNumber(calcs.diff)) {
+    calcs.diffperc = calcs.diff / calcs.firstNotNull;
+  }
   return calcs;
   return calcs;
 }
 }
 
 

public/app/core/time_series2.ts

@@ -232,6 +232,7 @@ export default class TimeSeries {
     this.stats.first = null;
     this.stats.first = null;
     this.stats.delta = 0;
     this.stats.delta = 0;
     this.stats.diff = null;
     this.stats.diff = null;
+    this.stats.diffperc = 0;
     this.stats.range = null;
     this.stats.range = null;
     this.stats.timeStep = Number.MAX_VALUE;
     this.stats.timeStep = Number.MAX_VALUE;
     this.allIsNull = true;
     this.allIsNull = true;
@@ -336,6 +337,7 @@ export default class TimeSeries {
     }
     }
     if (this.stats.current !== null && this.stats.first !== null) {
     if (this.stats.current !== null && this.stats.first !== null) {
       this.stats.diff = this.stats.current - this.stats.first;
       this.stats.diff = this.stats.current - this.stats.first;
+      this.stats.diffperc = this.stats.diff / this.stats.first;
     }
     }
 
 
     this.stats.count = result.length;
     this.stats.count = result.length;

public/app/plugins/panel/singlestat/module.ts

@@ -68,6 +68,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
     { value: 'first', text: 'First' },
     { value: 'first', text: 'First' },
     { value: 'delta', text: 'Delta' },
     { value: 'delta', text: 'Delta' },
     { value: 'diff', text: 'Difference' },
     { value: 'diff', text: 'Difference' },
+    { value: 'diffperc', text: 'Difference percent' },
     { value: 'range', text: 'Range' },
     { value: 'range', text: 'Range' },
     { value: 'last_time', text: 'Time of last point' },
     { value: 'last_time', text: 'Time of last point' },
   ];
   ];