heatmap: initial ES histogram support

public/app/plugins/panel/heatmap/axes_editor.ts

@@ -7,6 +7,7 @@ export class AxesEditorCtrl {
   panelCtrl: any;
   unitFormats: any;
   logScales: any;
+  dataFormats: any;
 
   /** @ngInject */
   constructor($scope) {
@@ -23,6 +24,11 @@ export class AxesEditorCtrl {
       'log (base 32)': 32,
       'log (base 1024)': 1024
     };
+
+    this.dataFormats = {
+      'Timeseries': 'timeseries',
+      'ES histogram': 'es_histogram'
+    };
   }
 
   setUnitFormat(subItem) {

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

@@ -7,7 +7,7 @@ import TimeSeries from 'app/core/time_series';
 import {axesEditor} from './axes_editor';
 import {heatmapDisplayEditor} from './display_editor';
 import rendering from './rendering';
-import {convertToHeatMap, getMinLog} from './heatmap_data_converter';
+import { convertToHeatMap, elasticHistogramToHeatmap, getMinLog} from './heatmap_data_converter';
 
 let X_BUCKET_NUMBER_DEFAULT = 30;
 let Y_BUCKET_NUMBER_DEFAULT = 10;
@@ -27,6 +27,7 @@ let panelDefaults = {
     colorScheme: 'interpolateSpectral',
     fillBackground: false
   },
+  dataFormat: 'timeseries',
   xBucketSize: null,
   xBucketNumber: null,
   yBucketSize: null,
@@ -137,7 +138,7 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   onRender() {
     if (!this.range) { return; }
 
-    let xBucketSize, yBucketSize;
+    let xBucketSize, yBucketSize, heatmapStats, bucketsData;
     let logBase = this.panel.yAxis.logBase;
     let xBucketNumber = this.panel.xBucketNumber || X_BUCKET_NUMBER_DEFAULT;
     let xBucketSizeByNumber = Math.floor((this.range.to - this.range.from) / xBucketNumber);
@@ -152,25 +153,49 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
       xBucketSize = Number(this.panel.xBucketSize);
     }
 
-    // Calculate Y bucket size
-    let 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;
+    if (this.panel.dataFormat === 'es_histogram') {
+      heatmapStats = this.parseHistogramSeries(this.series);
+
+      // Calculate Y bucket size
+      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 = 1;
+          yBucketSize = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
         }
+        yBucketSize = this.panel.yBucketSize || yBucketSize;
+      }
+
+      bucketsData = elasticHistogramToHeatmap(this.series);
+    } else {
+
+      // 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 {
-        yBucketSize = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
+        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;
       }
-      yBucketSize = this.panel.yBucketSize || yBucketSize;
-    }
 
-    let bucketsData = convertToHeatMap(this.series, yBucketSize, xBucketSize, logBase);
+      bucketsData = convertToHeatMap(this.series, yBucketSize, xBucketSize, logBase);
+    }
 
     // Set default Y range if no data
     if (!heatmapStats.min && !heatmapStats.max) {
@@ -252,6 +277,19 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
     };
   }
 
+  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);
   }

public/app/plugins/panel/heatmap/partials/axes_editor.html

@@ -82,4 +82,14 @@
         ng-model="ctrl.panel.xBucketSize" ng-change="ctrl.refresh()" ng-model-onblur>
     </div>
   </div>
+
+  <div class="section gf-form-group">
+  <h5 class="section-heading">Data format</h5>
+  <div class="gf-form">
+    <label class="gf-form-label width-5">Format</label>
+    <div class="gf-form-select-wrapper max-width-15">
+      <select class="gf-form-input" ng-model="ctrl.panel.dataFormat" ng-options="v as k for (k, v) in editor.dataFormats" ng-change="ctrl.render()"></select>
+    </div>
+  </div>
+</div>
 </div>