heatmap: calculate bucket size automatically for ES histogram

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 {axesEditor} from './axes_editor';
 import {heatmapDisplayEditor} from './display_editor';
 import {heatmapDisplayEditor} from './display_editor';
 import rendering from './rendering';
 import rendering from './rendering';
-import { convertToHeatMap, elasticHistogramToHeatmap, getMinLog} from './heatmap_data_converter';
+import { convertToHeatMap, elasticHistogramToHeatmap, calculateBucketSize, getMinLog} from './heatmap_data_converter';
 
 
 let X_BUCKET_NUMBER_DEFAULT = 30;
 let X_BUCKET_NUMBER_DEFAULT = 30;
 let Y_BUCKET_NUMBER_DEFAULT = 10;
 let Y_BUCKET_NUMBER_DEFAULT = 10;
@@ -140,6 +140,21 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
 
 
     let xBucketSize, yBucketSize, heatmapStats, bucketsData;
     let xBucketSize, yBucketSize, heatmapStats, bucketsData;
     let logBase = this.panel.yAxis.logBase;
     let logBase = this.panel.yAxis.logBase;
+
+    if (this.panel.dataFormat === 'es_histogram') {
+      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 xBucketNumber = this.panel.xBucketNumber || X_BUCKET_NUMBER_DEFAULT;
       let xBucketSizeByNumber = Math.floor((this.range.to - this.range.from) / xBucketNumber);
       let xBucketSizeByNumber = Math.floor((this.range.to - this.range.from) / xBucketNumber);
 
 
@@ -153,29 +168,6 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
         xBucketSize = Number(this.panel.xBucketSize);
         xBucketSize = Number(this.panel.xBucketSize);
       }
       }
 
 
-    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 = (heatmapStats.max - heatmapStats.min) / yBucketNumber;
-        }
-        yBucketSize = this.panel.yBucketSize || yBucketSize;
-      }
-
-      bucketsData = elasticHistogramToHeatmap(this.series);
-    } else {
-
       // Calculate Y bucket size
       // Calculate Y bucket size
       heatmapStats = this.parseSeries(this.series);
       heatmapStats = this.parseSeries(this.series);
       let yBucketNumber = this.panel.yBucketNumber || Y_BUCKET_NUMBER_DEFAULT;
       let yBucketNumber = this.panel.yBucketNumber || Y_BUCKET_NUMBER_DEFAULT;

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

@@ -155,10 +155,17 @@ function mergeZeroBuckets(buckets, minValue) {
     let newBucket = {
     let newBucket = {
       y: 0,
       y: 0,
       bounds: {bottom: minValue, top: minBucket.bounds.top || minValue},
       bounds: {bottom: minValue, top: minBucket.bounds.top || minValue},
-      values: nullBucket.values.concat(minBucket.values),
-      points: nullBucket.points.concat(minBucket.points)
+      values: [],
+      points: []
     };
     };
 
 
+    if (nullBucket.values) {
+      newBucket.values = nullBucket.values.concat(minBucket.values);
+    }
+    if (nullBucket.points) {
+      newBucket.points = nullBucket.points.concat(minBucket.points);
+    }
+
     let newYBuckets = {};
     let newYBuckets = {};
     _.forEach(yBuckets, (bucket, bound) => {
     _.forEach(yBuckets, (bucket, bound) => {
       bound = Number(bound);
       bound = Number(bound);

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

@@ -449,7 +449,7 @@ export default function link(scope, elem, attrs, ctrl) {
 
 
     if (panel.yAxis.logBase !== 1) {
     if (panel.yAxis.logBase !== 1) {
       let base = panel.yAxis.logBase;
       let base = panel.yAxis.logBase;
-      let splitFactor = panel.yAxis.splitFactor || 1;
+      let splitFactor = data.yBucketSize || 1;
       yGridSize = Math.floor((yScale(1) - yScale(base)) / splitFactor);
       yGridSize = Math.floor((yScale(1) - yScale(base)) / splitFactor);
     }
     }