energylink/public/app/plugins/panel/heatmap/heatmap_ctrl.ts

import { MetricsPanelCtrl } from "app/plugins/sdk";
import _ from "lodash";
import kbn from "app/core/utils/kbn";
import TimeSeries from "app/core/time_series2";
import { axesEditor } from "./axes_editor";
import { heatmapDisplayEditor } from "./display_editor";
import rendering from "./rendering";
import {
  convertToHeatMap,
  convertToCards,
  elasticHistogramToHeatmap,
  calculateBucketSize
} from "./heatmap_data_converter";

let X_BUCKET_NUMBER_DEFAULT = 30;
let Y_BUCKET_NUMBER_DEFAULT = 10;

let panelDefaults = {
  heatmap: {},
  cards: {
    cardPadding: null,
    cardRound: null
  },
  color: {
    mode: "spectrum",
    cardColor: "#b4ff00",
    colorScale: "sqrt",
    exponent: 0.5,
    colorScheme: "interpolateOranges"
  },
  legend: {
    show: false
  },
  dataFormat: "timeseries",
  xAxis: {
    show: true
  },
  yAxis: {
    show: true,
    format: "short",
    decimals: null,
    logBase: 1,
    splitFactor: null,
    min: null,
    max: null
  },
  xBucketSize: null,
  xBucketNumber: null,
  yBucketSize: null,
  yBucketNumber: null,
  tooltip: {
    show: true,
    showHistogram: false
  },
  highlightCards: true
};

let colorModes = ["opacity", "spectrum"];
let opacityScales = ["linear", "sqrt"];

// Schemes from d3-scale-chromatic
// https://github.com/d3/d3-scale-chromatic
let colorSchemes = [
  // Diverging
  { name: "Spectral", value: "interpolateSpectral", invert: "always" },
  { name: "RdYlGn", value: "interpolateRdYlGn", invert: "always" },

  // Sequential (Single Hue)
  { name: "Blues", value: "interpolateBlues", invert: "dark" },
  { name: "Greens", value: "interpolateGreens", invert: "dark" },
  { name: "Greys", value: "interpolateGreys", invert: "dark" },
  { name: "Oranges", value: "interpolateOranges", invert: "dark" },
  { name: "Purples", value: "interpolatePurples", invert: "dark" },
  { name: "Reds", value: "interpolateReds", invert: "dark" },

  // Sequential (Multi-Hue)
  { name: "BuGn", value: "interpolateBuGn", invert: "dark" },
  { name: "BuPu", value: "interpolateBuPu", invert: "dark" },
  { name: "GnBu", value: "interpolateGnBu", invert: "dark" },
  { name: "OrRd", value: "interpolateOrRd", invert: "dark" },
  { name: "PuBuGn", value: "interpolatePuBuGn", invert: "dark" },
  { name: "PuBu", value: "interpolatePuBu", invert: "dark" },
  { name: "PuRd", value: "interpolatePuRd", invert: "dark" },
  { name: "RdPu", value: "interpolateRdPu", invert: "dark" },
  { name: "YlGnBu", value: "interpolateYlGnBu", invert: "dark" },
  { name: "YlGn", value: "interpolateYlGn", invert: "dark" },
  { name: "YlOrBr", value: "interpolateYlOrBr", invert: "dark" },
  { name: "YlOrRd", value: "interpolateYlOrRd", invert: "darm" }
];

export class HeatmapCtrl extends MetricsPanelCtrl {
  static templateUrl = "module.html";

  opacityScales: any = [];
  colorModes: any = [];
  colorSchemes: any = [];
  selectionActivated: boolean;
  unitFormats: any;
  data: any;
  series: any;
  timeSrv: any;
  dataWarning: any;
  decimals: number;
  scaledDecimals: number;

  /** @ngInject */
  constructor($scope, $injector, timeSrv) {
    super($scope, $injector);
    this.timeSrv = timeSrv;
    this.selectionActivated = false;

    _.defaultsDeep(this.panel, panelDefaults);
    this.opacityScales = opacityScales;
    this.colorModes = colorModes;
    this.colorSchemes = colorSchemes;

    // Bind grafana panel events
    this.events.on("render", this.onRender.bind(this));
    this.events.on("data-received", this.onDataReceived.bind(this));
    this.events.on("data-error", this.onDataError.bind(this));
    this.events.on("data-snapshot-load", this.onDataReceived.bind(this));
    this.events.on("init-edit-mode", this.onInitEditMode.bind(this));

    this.onCardColorChange = this.onCardColorChange.bind(this);
  }

  onInitEditMode() {
    this.addEditorTab("Axes", axesEditor, 2);
    this.addEditorTab("Display", heatmapDisplayEditor, 3);
    this.unitFormats = kbn.getUnitFormats();
  }

  zoomOut(evt) {
    this.publishAppEvent("zoom-out", 2);
  }

  onRender() {
    if (!this.range) {
      return;
    }

    let xBucketSize, yBucketSize, heatmapStats, bucketsData;
    let logBase = this.panel.yAxis.logBase;

    if (this.panel.dataFormat === "tsbuckets") {
      heatmapStats = this.parseHistogramSeries(this.series);
      bucketsData = elasticHistogramToHeatmap(this.series);

      // Calculate bucket size based on ES heatmap data
      let xBucketBoundSet = _.map(_.keys(bucketsData), key => Number(key));
      let yBucketBoundSet = _.map(this.series, series => Number(series.alias));
      xBucketSize = calculateBucketSize(xBucketBoundSet);
      yBucketSize = calculateBucketSize(yBucketBoundSet, logBase);
      if (logBase !== 1) {
        // Use yBucketSize in meaning of "Split factor" for log scales
        yBucketSize = 1 / yBucketSize;
      }
    } else {
      let xBucketNumber = this.panel.xBucketNumber || X_BUCKET_NUMBER_DEFAULT;
      let xBucketSizeByNumber = Math.floor(
        (this.range.to - this.range.from) / xBucketNumber
      );

      // Parse X bucket size (number or interval)
      let isIntervalString = kbn.interval_regex.test(this.panel.xBucketSize);
      if (isIntervalString) {
        xBucketSize = kbn.interval_to_ms(this.panel.xBucketSize);
      } else if (
        isNaN(Number(this.panel.xBucketSize)) ||
        this.panel.xBucketSize === "" ||
        this.panel.xBucketSize === null
      ) {
        xBucketSize = xBucketSizeByNumber;
      } else {
        xBucketSize = Number(this.panel.xBucketSize);
      }

      // Calculate Y bucket size
      heatmapStats = this.parseSeries(this.series);
      let yBucketNumber = this.panel.yBucketNumber || Y_BUCKET_NUMBER_DEFAULT;
      if (logBase !== 1) {
        yBucketSize = this.panel.yAxis.splitFactor;
      } else {
        if (heatmapStats.max === heatmapStats.min) {
          if (heatmapStats.max) {
            yBucketSize = heatmapStats.max / Y_BUCKET_NUMBER_DEFAULT;
          } else {
            yBucketSize = 1;
          }
        } else {
          yBucketSize = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
        }
        yBucketSize = this.panel.yBucketSize || yBucketSize;
      }

      bucketsData = convertToHeatMap(
        this.series,
        yBucketSize,
        xBucketSize,
        logBase
      );
    }

    // Set default Y range if no data
    if (!heatmapStats.min && !heatmapStats.max) {
      heatmapStats = { min: -1, max: 1, minLog: 1 };
      yBucketSize = 1;
    }

    let { cards, cardStats } = convertToCards(bucketsData);

    this.data = {
      buckets: bucketsData,
      heatmapStats: heatmapStats,
      xBucketSize: xBucketSize,
      yBucketSize: yBucketSize,
      cards: cards,
      cardStats: cardStats
    };
  }

  onDataReceived(dataList) {
    this.series = dataList.map(this.seriesHandler.bind(this));

    this.dataWarning = null;
    const datapointsCount = _.reduce(
      this.series,
      (sum, series) => {
        return sum + series.datapoints.length;
      },
      0
    );

    if (datapointsCount === 0) {
      this.dataWarning = {
        title: "No data points",
        tip: "No datapoints returned from data query"
      };
    } else {
      for (let series of this.series) {
        if (series.isOutsideRange) {
          this.dataWarning = {
            title: "Data points outside time range",
            tip:
              "Can be caused by timezone mismatch or missing time filter in query"
          };
          break;
        }
      }
    }

    this.render();
  }

  onDataError() {
    this.series = [];
    this.render();
  }

  onCardColorChange(newColor) {
    this.panel.color.cardColor = newColor;
    this.render();
  }

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

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

    let datapoints = seriesData.datapoints || [];
    if (datapoints && datapoints.length > 0) {
      let last = datapoints[datapoints.length - 1][1];
      let from = this.range.from;
      if (last - from < -10000) {
        series.isOutsideRange = true;
      }
    }

    return series;
  }

  parseSeries(series) {
    let min = _.min(_.map(series, s => s.stats.min));
    let minLog = _.min(_.map(series, s => s.stats.logmin));
    let max = _.max(_.map(series, s => s.stats.max));

    return {
      max: max,
      min: min,
      minLog: minLog
    };
  }

  parseHistogramSeries(series) {
    let bounds = _.map(series, s => Number(s.alias));
    let min = _.min(bounds);
    let minLog = _.min(bounds);
    let max = _.max(bounds);

    return {
      max: max,
      min: min,
      minLog: minLog
    };
  }

  link(scope, elem, attrs, ctrl) {
    rendering(scope, elem, attrs, ctrl);
  }
}