@grafana/data#ReducerID TypeScript Examples

ReduceTransformerEditor: React.FC<TransformerUIProps<ReduceTransformerOptions>> = ({
  options,
  onChange,
  input,
}) => {
  return (
    <StatsPicker
      width={25}
      placeholder="Choose Stat"
      allowMultiple
      stats={options.reducers || []}
      onChange={stats => {
        onChange({
          ...options,
          reducers: stats as ReducerID[],
        });
      }}
    />
  );
}

onSelectGELType = (item: SelectableValue<GELQueryType>) => {
    const { query, onChange } = this.props;
    const q = {
      ...query,
      type: item.value!,
    };

    if (q.type === GELQueryType.reduce) {
      if (!q.reducer) {
        q.reducer = ReducerID.mean;
      }
      q.expression = undefined;
    } else if (q.type === GELQueryType.resample) {
      if (!q.downsampler) {
        q.downsampler = ReducerID.mean;
      }
      if (!q.upsampler) {
        q.upsampler = 'fillna';
      }
      q.reducer = undefined;
    } else {
      q.reducer = undefined;
    }

    onChange(q);
  };

defaults: PieChartOptions = {
  pieType: PieChartType.PIE,
  strokeWidth: 1,
  orientation: VizOrientation.Auto,
  fieldOptions: {
    ...standardFieldDisplayOptions,
    calcs: [ReducerID.last],
    defaults: {
      unit: 'short',
    },
  },
}

standardFieldDisplayOptions: FieldDisplayOptions = {
  values: false,
  calcs: [ReducerID.mean],
  defaults: {
    thresholds: {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: 'green' },
        { value: 80, color: 'red' }, // 80%
      ],
    },
    mappings: [],
  },
  overrides: [],
}

standardFieldDisplayOptions: FieldDisplayOptions = {
  values: false,
  calcs: [ReducerID.mean],
  defaults: {
    thresholds: {
      mode: ThresholdsMode.Absolute,
      steps: [
        { value: -Infinity, color: 'green' },
        { value: 80, color: 'red' }, // 80%
      ],
    },
    mappings: [],
  },
  overrides: [],
}

render() {
    const { value } = this.props;
    const { calcs, values, limit } = value;

    const labelWidth = this.props.labelWidth || 5;

    return (
      <>
        <div className="gf-form">
          <FormLabel width={labelWidth}>Show</FormLabel>
          <Select
            options={showOptions}
            value={values ? showOptions[0] : showOptions[1]}
            onChange={this.onShowValuesChange}
          />
        </div>
        {values ? (
          <FormField
            label="Limit"
            labelWidth={labelWidth}
            placeholder={`${DEFAULT_FIELD_DISPLAY_VALUES_LIMIT}`}
            onChange={this.onLimitChange}
            value={toNumberString(limit)}
            type="number"
          />
        ) : (
          <div className="gf-form">
            <FormLabel width={labelWidth}>Calc</FormLabel>
            <StatsPicker
              width={12}
              placeholder="Choose Stat"
              defaultStat={ReducerID.mean}
              allowMultiple={false}
              stats={calcs}
              onChange={this.onCalcsChange}
            />
          </div>
        )}
      </>
    );
  }

export function sharedSingleStatPanelChangedHandler(
  options: Partial<SingleStatBaseOptions> | any,
  prevPluginId: string,
  prevOptions: any
) {
  // Migrating from angular singlestat
  if (prevPluginId === 'singlestat' && prevOptions.angular) {
    const panel = prevOptions.angular;
    const reducer = fieldReducers.getIfExists(panel.valueName);
    const options = {
      fieldOptions: {
        defaults: {} as FieldConfig,
        overrides: [] as ConfigOverrideRule[],
        calcs: [reducer ? reducer.id : ReducerID.mean],
      },
      orientation: VizOrientation.Horizontal,
    };

    const defaults = options.fieldOptions.defaults;
    if (panel.format) {
      defaults.unit = panel.format;
    }
    if (panel.nullPointMode) {
      defaults.nullValueMode = panel.nullPointMode;
    }
    if (panel.nullText) {
      defaults.noValue = panel.nullText;
    }
    if (panel.decimals || panel.decimals === 0) {
      defaults.decimals = panel.decimals;
    }

    // Convert thresholds and color values
    if (panel.thresholds && panel.colors) {
      const levels = panel.thresholds.split(',').map((strVale: string) => {
        return Number(strVale.trim());
      });

      // One more color than threshold
      const thresholds: Threshold[] = [];
      for (const color of panel.colors) {
        const idx = thresholds.length - 1;
        if (idx >= 0) {
          thresholds.push({ value: levels[idx], color });
        } else {
          thresholds.push({ value: -Infinity, color });
        }
      }
      defaults.thresholds = {
        mode: ThresholdsMode.Absolute,
        steps: thresholds,
      };
    }

    // Convert value mappings
    const mappings = convertOldAngularValueMapping(panel);
    if (mappings && mappings.length) {
      defaults.mappings = mappings;
    }

    if (panel.gauge && panel.gauge.show) {
      defaults.min = panel.gauge.minValue;
      defaults.max = panel.gauge.maxValue;
    }
    return options;
  }

  for (const k of optionsToKeep) {
    if (prevOptions.hasOwnProperty(k)) {
      options[k] = cloneDeep(prevOptions[k]);
    }
  }
  return options;
}

reducerTypes: Array<SelectableValue<string>> = [
  { value: ReducerID.min, label: 'Min', description: 'Get the minimum value' },
  { value: ReducerID.max, label: 'Max', description: 'Get the maximum value' },
  { value: ReducerID.mean, label: 'Mean', description: 'Get the average value' },
  { value: ReducerID.sum, label: 'Sum', description: 'Get the sum of all values' },
  { value: ReducerID.count, label: 'Count', description: 'Get the number of values' },
]

downsamplingTypes: Array<SelectableValue<string>> = [
  { value: ReducerID.min, label: 'Min', description: 'Fill with the minimum value' },
  { value: ReducerID.max, label: 'Max', description: 'Fill with the maximum value' },
  { value: ReducerID.mean, label: 'Mean', description: 'Fill with the average value' },
  { value: ReducerID.sum, label: 'Sum', description: 'Fill with the sum of all values' },
]

processField(fieldInfo: FieldInfo) {
    const { panel, dashboard } = this;

    const name = fieldInfo.field.config.title || fieldInfo.field.name;
    let calc = panel.valueName;
    let calcField = fieldInfo.field;
    let val: any = undefined;

    if ('name' === calc) {
      val = name;
    } else {
      if ('last_time' === calc) {
        if (fieldInfo.frame.firstTimeField) {
          calcField = fieldInfo.frame.firstTimeField;
          calc = ReducerID.last;
        }
      }

      // Normalize functions (avg -> mean, etc)
      const r = fieldReducers.getIfExists(calc);
      if (r) {
        calc = r.id;
        // With strings, don't accidentally use a math function
        if (calcField.type === FieldType.string) {
          const avoid = [ReducerID.mean, ReducerID.sum];
          if (avoid.includes(calc)) {
            calc = panel.valueName = ReducerID.first;
          }
        }
      } else {
        calc = ReducerID.lastNotNull;
      }

      // Calculate the value
      val = reduceField({
        field: calcField,
        reducers: [calc],
      })[calc];
    }

    const processor = getDisplayProcessor({
      field: {
        ...fieldInfo.field,
        config: {
          ...fieldInfo.field.config,
          unit: panel.format,
          decimals: panel.decimals,
          mappings: convertOldAngularValueMapping(panel),
        },
      },
      theme: config.theme,
      timeZone: dashboard.getTimezone(),
    });

    const sparkline: any[] = [];
    const data = {
      field: fieldInfo.field,
      value: val,
      display: processor(val),
      scopedVars: _.extend({}, panel.scopedVars),
      sparkline,
    };

    data.scopedVars['__name'] = { value: name };
    panel.tableColumn = this.fieldNames.length > 1 ? name : '';

    // Get the fields for a sparkline
    if (panel.sparkline && panel.sparkline.show && fieldInfo.frame.firstTimeField) {
      data.sparkline = getFlotPairs({
        xField: fieldInfo.frame.firstTimeField,
        yField: fieldInfo.field,
        nullValueMode: panel.nullPointMode,
      });
    }

    return data;
  }

renderValue = (
    value: FieldDisplay,
    width: number,
    height: number,
    alignmentFactors: DisplayValueAlignmentFactors
  ): JSX.Element => {
    const { timeRange, options } = this.props;
    let sparkline: BigValueSparkline | undefined;

    if (value.sparkline) {
      sparkline = {
        data: value.sparkline,
        xMin: timeRange.from.valueOf(),
        xMax: timeRange.to.valueOf(),
        yMin: value.field.min,
        yMax: value.field.max,
      };

      const calc = options.fieldOptions.calcs[0];
      if (calc === ReducerID.last) {
        sparkline.highlightIndex = sparkline.data.length - 1;
      }
    }

    return (
      <DataLinksContextMenu links={getFieldLinksSupplier(value)}>
        {({ openMenu, targetClassName }) => {
          return (
            <BigValue
              value={value.display}
              sparkline={sparkline}
              colorMode={options.colorMode}
              graphMode={options.graphMode}
              justifyMode={options.justifyMode}
              alignmentFactors={alignmentFactors}
              width={width}
              height={height}
              theme={config.theme}
              onClick={openMenu}
              className={targetClassName}
            />
          );
        }}
      </DataLinksContextMenu>
    );
  };

describe('SingleStatCtrl', () => {
  const ctx: TestContext = {} as TestContext;
  const epoch = 1505826363746;
  Date.now = () => epoch;

  const $scope = {
    $on: () => {},
  };

  const $injector = {
    get: () => {},
  };

  const $sanitize = {};

  SingleStatCtrl.prototype.dashboard = ({
    getTimezone: jest.fn(() => 'utc'),
  } as any) as DashboardModel;

  function singleStatScenario(desc: string, func: any) {
    describe(desc, () => {
      ctx.setup = (setupFunc: any) => {
        beforeEach(() => {
          SingleStatCtrl.prototype.panel = {
            events: {
              on: () => {},
              emit: () => {},
            },
          };

          // @ts-ignore
          ctx.ctrl = new SingleStatCtrl($scope, $injector, {} as LinkSrv, $sanitize);
          setupFunc();
          ctx.ctrl.onSnapshotLoad(ctx.input);
          ctx.data = ctx.ctrl.data;
        });
      };

      func(ctx);
    });
  }

  singleStatScenario('with defaults', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 1],
            [20, 2],
          ],
        },
      ];
    });

    it('Should use series avg as default main value', () => {
      expect(ctx.data.value).toBe(15);
    });

    it('should set formatted falue', () => {
      expect(ctx.data.display!.text).toBe('15');
    });
  });

  singleStatScenario('showing serie name instead of value', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 1],
            [20, 2],
          ],
        },
      ];
      ctx.ctrl.panel.valueName = 'name';
    });

    it('Should use series avg as default main value', () => {
      expect(ctx.data.value).toBe('test.cpu1');
    });

    it('should set formatted value', () => {
      expect(ctx.data.display!.text).toBe('test.cpu1');
    });
  });

  singleStatScenario('showing last iso time instead of value', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 12],
            [20, 1505634997920],
          ],
        },
      ];
      ctx.ctrl.panel.valueName = 'last_time';
      ctx.ctrl.panel.format = 'dateTimeAsIso';
      ctx.ctrl.dashboard.getTimezone = () => 'browser';
    });

    it('Should use time instead of value', () => {
      expect(ctx.data.value).toBe(1505634997920);
    });

    it('should set formatted value', () => {
      expect(dateTime(ctx.data.display!.text).valueOf()).toBe(1505634997000);
    });
  });

  singleStatScenario('showing last iso time instead of value (in UTC)', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 12],
            [20, 5000],
          ],
        },
      ];
      ctx.ctrl.panel.valueName = 'last_time';
      ctx.ctrl.panel.format = 'dateTimeAsIso';
      ctx.ctrl.dashboard.getTimezone = () => 'utc';
    });

    it('should set value', () => {
      expect(ctx.data.display!.text).toBe('1970-01-01 00:00:05');
    });
  });

  singleStatScenario('showing last us time instead of value', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 12],
            [20, 1505634997920],
          ],
        },
      ];
      ctx.ctrl.panel.valueName = 'last_time';
      ctx.ctrl.panel.format = 'dateTimeAsUS';
      ctx.ctrl.dashboard.getTimezone = () => 'browser';
    });

    it('Should use time instead of value', () => {
      expect(ctx.data.value).toBe(1505634997920);
    });

    it('should set formatted value', () => {
      expect(ctx.data.display!.text).toBe(dateTime(1505634997920).format('MM/DD/YYYY h:mm:ss a'));
    });
  });

  singleStatScenario('showing last us time instead of value (in UTC)', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 12],
            [20, 5000],
          ],
        },
      ];
      ctx.ctrl.panel.valueName = 'last_time';
      ctx.ctrl.panel.format = 'dateTimeAsUS';
      ctx.ctrl.dashboard.getTimezone = () => 'utc';
    });

    it('should set formatted value', () => {
      expect(ctx.data.display!.text).toBe('01/01/1970 12:00:05 am');
    });
  });

  singleStatScenario('showing last time from now instead of value', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 12],
            [20, 1505634997920],
          ],
        },
      ];
      ctx.ctrl.panel.valueName = 'last_time';
      ctx.ctrl.panel.format = 'dateTimeFromNow';
    });

    it('Should use time instead of value', () => {
      expect(ctx.data.value).toBe(1505634997920);
    });

    it('should set formatted value', () => {
      expect(ctx.data.display!.text).toBe('2 days ago');
    });
  });

  singleStatScenario('showing last time from now instead of value (in UTC)', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [
        {
          target: 'test.cpu1',
          datapoints: [
            [10, 12],
            [20, 1505634997920],
          ],
        },
      ];
      ctx.ctrl.panel.valueName = 'last_time';
      ctx.ctrl.panel.format = 'dateTimeFromNow';
    });

    it('should set formatted value', () => {
      expect(ctx.data.display!.text).toBe('2 days ago');
    });
  });

  singleStatScenario(
    'MainValue should use same number for decimals as displayed when checking thresholds',
    (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = [
          {
            target: 'test.cpu1',
            datapoints: [
              [99.999, 1],
              [99.99999, 2],
            ],
          },
        ];
        ctx.ctrl.panel.valueName = 'avg';
        ctx.ctrl.panel.format = 'none';
      });

      it('Should be rounded', () => {
        expect(ctx.data.value).toBe(99.999495);
      });

      it('should set formatted value', () => {
        expect(ctx.data.display!.text).toBe('100');
      });
    }
  );

  singleStatScenario('When value to text mapping is specified', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [{ target: 'test.cpu1', datapoints: [[9.9, 1]] }];
      ctx.ctrl.panel.valueMaps = [{ value: '9.9', text: 'OK' }];
    });

    it('value should remain', () => {
      expect(ctx.data.value).toBe(9.9);
    });

    it('Should replace value with text', () => {
      expect(ctx.data.display!.text).toBe('OK');
    });
  });

  singleStatScenario('When mapping null values and no data', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = []; // No data
      ctx.ctrl.panel.valueMaps = [{ value: 'null', text: 'XYZ' }];
    });

    it('value should be null', () => {
      expect(ctx.data.value).toBe(null);
    });

    it('Should replace value with text', () => {
      expect(ctx.data.display!.text).toBe('XYZ');
    });
  });

  singleStatScenario('When range to text mapping is specified for first range', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [{ target: 'test.cpu1', datapoints: [[41, 50]] }];
      ctx.ctrl.panel.mappingType = 2;
      ctx.ctrl.panel.rangeMaps = [
        { from: '10', to: '50', text: 'OK' },
        { from: '51', to: '100', text: 'NOT OK' },
      ];
    });

    it('Should replace value with text OK', () => {
      expect(ctx.data.display!.text).toBe('OK');
    });
  });

  singleStatScenario('When range to text mapping is specified for other ranges', (ctx: TestContext) => {
    ctx.setup(() => {
      ctx.input = [{ target: 'test.cpu1', datapoints: [[65, 75]] }];
      ctx.ctrl.panel.mappingType = 2;
      ctx.ctrl.panel.rangeMaps = [
        { from: '10', to: '50', text: 'OK' },
        { from: '51', to: '100', text: 'NOT OK' },
      ];
    });

    it('Should replace value with text NOT OK', () => {
      expect(ctx.data.display!.text).toBe('NOT OK');
    });
  });

  describe('When table data', () => {
    const tableData = [
      {
        columns: [{ text: 'Time', type: 'time' }, { text: 'test1' }, { text: 'mean' }, { text: 'test2' }],
        rows: [[1492759673649, 'ignore1', 15, 'ignore2']],
        type: 'table',
      },
    ];

    singleStatScenario('with default values', (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = tableData;
        ctx.ctrl.panel.tableColumn = 'mean';
        ctx.ctrl.panel.format = 'none';
      });

      it('Should use first rows value as default main value', () => {
        expect(ctx.data.value).toBe(15);
      });

      it('should set formatted value', () => {
        expect(ctx.data.display!.text).toBe('15');
      });
    });

    singleStatScenario('When table data has multiple columns', (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = tableData;
        ctx.ctrl.panel.tableColumn = '';
      });

      it('Should set column to first column that is not time', () => {
        expect(ctx.ctrl.panel.tableColumn).toBe('test1');
      });
    });

    singleStatScenario(
      'MainValue should use same number for decimals as displayed when checking thresholds',
      (ctx: TestContext) => {
        ctx.setup(() => {
          ctx.input = tableData;
          ctx.input[0].rows[0] = [1492759673649, 'ignore1', 99.99999, 'ignore2'];
          ctx.ctrl.panel.mappingType = 0;
          ctx.ctrl.panel.tableColumn = 'mean';
        });

        it('Should be rounded', () => {
          expect(ctx.data.value).toBe(99.99999);
        });

        it('should set formatted falue', () => {
          expect(ctx.data.display!.text).toBe('100');
        });
      }
    );

    singleStatScenario('When value to text mapping is specified', (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = tableData;
        ctx.input[0].rows[0] = [1492759673649, 'ignore1', 10, 'ignore2'];
        ctx.ctrl.panel.mappingType = 1;
        ctx.ctrl.panel.tableColumn = 'mean';
        ctx.ctrl.panel.valueMaps = [{ value: '10', text: 'OK' }];
      });

      it('value should remain', () => {
        expect(ctx.data.value).toBe(10);
      });

      it('Should replace value with text', () => {
        expect(ctx.data.display!.text).toBe('OK');
      });
    });

    singleStatScenario('When range to text mapping is specified for first range', (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = tableData;
        ctx.input[0].rows[0] = [1492759673649, 'ignore1', 41, 'ignore2'];
        ctx.ctrl.panel.tableColumn = 'mean';
        ctx.ctrl.panel.mappingType = 2;
        ctx.ctrl.panel.rangeMaps = [
          { from: '10', to: '50', text: 'OK' },
          { from: '51', to: '100', text: 'NOT OK' },
        ];
      });

      it('Should replace value with text OK', () => {
        expect(ctx.data.display!.text).toBe('OK');
      });
    });

    singleStatScenario('When range to text mapping is specified for other ranges', (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = tableData;
        ctx.input[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
        ctx.ctrl.panel.tableColumn = 'mean';
        ctx.ctrl.panel.mappingType = 2;
        ctx.ctrl.panel.rangeMaps = [
          { from: '10', to: '50', text: 'OK' },
          { from: '51', to: '100', text: 'NOT OK' },
        ];
      });

      it('Should replace value with text NOT OK', () => {
        expect(ctx.data.display!.text).toBe('NOT OK');
      });
    });

    singleStatScenario('When value is string', (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = tableData;
        ctx.input[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
        ctx.ctrl.panel.tableColumn = 'test1';
        ctx.ctrl.panel.valueName = ReducerID.first;
      });

      it('Should replace value with text NOT OK', () => {
        expect(ctx.data.display!.text).toBe('ignore1');
      });
    });

    singleStatScenario('When value is zero', (ctx: TestContext) => {
      ctx.setup(() => {
        ctx.input = tableData;
        ctx.input[0].rows[0] = [1492759673649, 'ignore1', 0, 'ignore2'];
        ctx.ctrl.panel.tableColumn = 'mean';
      });

      it('Should return zero', () => {
        expect(ctx.data.value).toBe(0);
      });
    });
  });
});