grafana/public/app/plugins/panel/singlestat/controller.ts

///<reference path="../../../headers/common.d.ts" />

import angular from 'angular';
import _ from 'lodash';
import kbn from 'app/core/utils/kbn';
import TimeSeries from '../../../core/time_series2';
import {MetricsPanelCtrl} from '../../../features/panel/panel';

// Set and populate defaults
var panelDefaults = {
  links: [],
  datasource: null,
  maxDataPoints: 100,
  interval: null,
  targets: [{}],
  cacheTimeout: null,
  format: 'none',
  prefix: '',
  postfix: '',
  nullText: null,
  valueMaps: [
    { value: 'null', op: '=', text: 'N/A' }
  ],
  nullPointMode: 'connected',
  valueName: 'avg',
  prefixFontSize: '50%',
  valueFontSize: '80%',
  postfixFontSize: '50%',
  thresholds: '',
  colorBackground: false,
  colorValue: false,
  colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
  sparkline: {
    show: false,
    full: false,
    lineColor: 'rgb(31, 120, 193)',
    fillColor: 'rgba(31, 118, 189, 0.18)',
  }
};

export class SingleStatCtrl extends MetricsPanelCtrl {
  series: any[];
  data: any[];
  fontSizes: any[];
  unitFormats: any[];

  /** @ngInject */
  constructor($scope, $injector) {
    super($scope, $injector);
    _.defaults(this.panel, panelDefaults);
  }

  initEditMode() {
    super.initEditMode();
    this.icon =  "fa fa-dashboard";
    this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
    this.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html', 2);
    this.unitFormats = kbn.getUnitFormats();
  }

  setUnitFormat(subItem) {
    this.panel.format = subItem.value;
    this.render();
  }

  refreshData(datasource) {
    return this.issueQueries(datasource)
      .then(this.dataHandler.bind(this))
      .catch(err => {
        this.series = [];
        this.render();
        throw err;
      });
  }

  loadSnapshot(snapshotData) {
    this.updateTimeRange();
    this.dataHandler(snapshotData);
  }

  dataHandler(results) {
    this.series = _.map(results.data, this.seriesHandler.bind(this));
    this.render();
  }

  seriesHandler(seriesData) {
    var series = new TimeSeries({
      datapoints: seriesData.datapoints,
      alias: seriesData.target,
    });

    series.flotpairs = series.getFlotPairs(this.panel.nullPointMode);
    return series;
  }

  setColoring(options) {
    if (options.background) {
      this.panel.colorValue = false;
      this.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
    } else {
      this.panel.colorBackground = false;
      this.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
    }
    this.render();
  }

  invertColorOrder() {
    var tmp = this.panel.colors[0];
    this.panel.colors[0] = this.panel.colors[2];
    this.panel.colors[2] = tmp;
    this.render();
  }

  getDecimalsForValue(value) {
    if (_.isNumber(this.panel.decimals)) {
      return {decimals: this.panel.decimals, scaledDecimals: null};
    }

    var delta = value / 2;
    var dec = -Math.floor(Math.log(delta) / Math.LN10);

    var magn = Math.pow(10, -dec),
      norm = delta / magn, // norm is between 1.0 and 10.0
      size;

    if (norm < 1.5) {
      size = 1;
    } else if (norm < 3) {
      size = 2;
      // special case for 2.5, requires an extra decimal
      if (norm > 2.25) {
        size = 2.5;
        ++dec;
      }
    } else if (norm < 7.5) {
      size = 5;
    } else {
      size = 10;
    }

    size *= magn;

    // reduce starting decimals if not needed
    if (Math.floor(value) === value) { dec = 0; }

    var result: any = {};
    result.decimals = Math.max(0, dec);
    result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2;

    return result;
  }

  render() {
    var data: any = {};
    this.setValues(data);

    data.thresholds = this.panel.thresholds.split(',').map(function(strVale) {
      return Number(strVale.trim());
    });

    data.colorMap = this.panel.colors;

    this.data = data;
    this.broadcastRender();
  }

  setValues(data) {
    data.flotpairs = [];

    if (this.series.length > 1) {
      this.inspector.error = new Error();
      this.inspector.error.message = 'Multiple Series Error';
      this.inspector.error.data = 'Metric query returns ' + this.series.length +
        ' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify(this.series);
      throw this.inspector.error;
    }

    if (this.series && this.series.length > 0) {
      var lastPoint = _.last(this.series[0].datapoints);
      var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;

      if (_.isString(lastValue)) {
        data.value = 0;
        data.valueFormated = lastValue;
        data.valueRounded = 0;
      } else {
        data.value = this.series[0].stats[this.panel.valueName];
        data.flotpairs = this.series[0].flotpairs;

        var decimalInfo = this.getDecimalsForValue(data.value);
        var formatFunc = kbn.valueFormats[this.panel.format];
        data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
        data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
      }
    }

    // check value to text mappings
    for (var i = 0; i < this.panel.valueMaps.length; i++) {
      var map = this.panel.valueMaps[i];
      // special null case
      if (map.value === 'null') {
        if (data.value === null || data.value === void 0) {
          data.valueFormated = map.text;
          return;
        }
        continue;
      }

      // value/number to text mapping
      var value = parseFloat(map.value);
      if (value === data.value) {
        data.valueFormated = map.text;
        return;
      }
    }

    if (data.value === null || data.value === void 0) {
      data.valueFormated = "no value";
    }
  };

  removeValueMap(map) {
    var index = _.indexOf(this.panel.valueMaps, map);
    this.panel.valueMaps.splice(index, 1);
    this.render();
  };

  addValueMap() {
    this.panel.valueMaps.push({value: '', op: '=', text: '' });
  }
}