heatmap: more refactoring

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

@@ -45,44 +45,6 @@ function elasticHistogramToHeatmap(seriesList) {
   return heatmap;
 }
 
-  /**
-   * Convert set of time series into heatmap buckets
-   * @return {Object}    Heatmap object:
- * {
- *   xBucketBound_1: {
- *     x: xBucketBound_1,
- *     buckets: {
- *       yBucketBound_1: {
- *         y: yBucketBound_1,
- *         bounds: {bottom, top}
- *         values: [val_1, val_2, ..., val_K],
- *         points: [[val_Y, val_X, series_name], ..., [...]],
- *         seriesStat: {seriesName_1: val_1, seriesName_2: val_2}
- *       },
- *       ...
- *       yBucketBound_M: {}
- *     },
- *     values: [val_1, val_2, ..., val_K],
- *     points: [
- *       [val_Y, val_X, series_name], (point_1)
- *       ...
- *       [...] (point_K)
- *     ]
- *   },
- *   xBucketBound_2: {},
- *   ...
- *   xBucketBound_N: {}
- * }
- */
-function convertToHeatMap(series, yBucketSize, xBucketSize, logBase) {
-  let seriesBuckets = _.map(series, s => {
-    return seriesToHeatMap(s, yBucketSize, xBucketSize, logBase);
-  });
-
-  let buckets = mergeBuckets(seriesBuckets);
-  return buckets;
-}
-
 /**
  * Convert buckets into linear array of "cards" - objects, represented heatmap elements.
  * @param  {Object} buckets
@@ -193,23 +155,52 @@ function getSeriesStat(points) {
 }
 
 /**
- * Convert individual series to heatmap buckets
+   * Convert set of time series into heatmap buckets
+   * @return {Object}    Heatmap object:
+ * {
+ *   xBucketBound_1: {
+ *     x: xBucketBound_1,
+ *     buckets: {
+ *       yBucketBound_1: {
+ *         y: yBucketBound_1,
+ *         bounds: {bottom, top}
+ *         values: [val_1, val_2, ..., val_K],
+ *         points: [[val_Y, val_X, series_name], ..., [...]],
+ *         seriesStat: {seriesName_1: val_1, seriesName_2: val_2}
+ *       },
+ *       ...
+ *       yBucketBound_M: {}
+ *     },
+ *     values: [val_1, val_2, ..., val_K],
+ *     points: [
+ *       [val_Y, val_X, series_name], (point_1)
+ *       ...
+ *       [...] (point_K)
+ *     ]
+ *   },
+ *   xBucketBound_2: {},
+ *   ...
+ *   xBucketBound_N: {}
+ * }
  */
-function seriesToHeatMap(series, yBucketSize, xBucketSize, logBase = 1) {
-  let datapoints = series.datapoints;
-  let seriesName = series.label;
-  let xBuckets = {};
-
-  // Slice series into X axis buckets
-  // |    | ** |    |  * |  **|
-  // |  * |*  *|*   |** *| *  |
-  // |** *|    | ***|    |*   |
-  // |____|____|____|____|____|_
-  //
-  _.forEach(datapoints, point => {
-    let bucketBound = getBucketBound(point[TIME_INDEX], xBucketSize);
-    pushToXBuckets(xBuckets, point, bucketBound, seriesName);
-  });
+function convertToHeatMap(seriesList, yBucketSize, xBucketSize, logBase = 1) {
+  let heatmap = {};
+
+  for (let series of seriesList) {
+    let datapoints = series.datapoints;
+    let seriesName = series.label;
+
+    // Slice series into X axis buckets
+    // |    | ** |    |  * |  **|
+    // |  * |*  *|*   |** *| *  |
+    // |** *|    | ***|    |*   |
+    // |____|____|____|____|____|_
+    //
+    _.forEach(datapoints, point => {
+      let bucketBound = getBucketBound(point[TIME_INDEX], xBucketSize);
+      pushToXBuckets(heatmap, point, bucketBound, seriesName);
+    });
+  }
 
   // Slice X axis buckets into Y (value) buckets
   // |  **|     |2|,
@@ -217,14 +208,15 @@ function seriesToHeatMap(series, yBucketSize, xBucketSize, logBase = 1) {
   // |*   | --/ |1|,
   // |____|     |0|
   //
-  _.forEach(xBuckets, xBucket => {
+  _.forEach(heatmap, xBucket => {
     if (logBase !== 1) {
       xBucket.buckets = convertToLogScaleValueBuckets(xBucket, yBucketSize, logBase);
     } else {
       xBucket.buckets = convertToValueBuckets(xBucket, yBucketSize);
     }
   });
-  return xBuckets;
+
+  return heatmap;
 }
 
 function pushToXBuckets(buckets, point, bucketNum, seriesName) {
@@ -249,13 +241,13 @@ function pushToXBuckets(buckets, point, bucketNum, seriesName) {
 function pushToYBuckets(buckets, bucketNum, value, point, bounds) {
   if (buckets[bucketNum]) {
     buckets[bucketNum].values.push(value);
-    buckets[bucketNum].points.push(point);
+    buckets[bucketNum].count += 1;
   } else {
     buckets[bucketNum] = {
       y: bucketNum,
       bounds: bounds,
       values: [value],
-      points: [point]
+      count: 1,
     };
   }
 }
@@ -288,6 +280,7 @@ function convertToValueBuckets(xBucket, bucketSize) {
   let values = xBucket.values;
   let points = xBucket.points;
   let buckets = {};
+
   _.forEach(values, (val, index) => {
     let bounds = getBucketBounds(val, bucketSize);
     let bucketNum = bounds.bottom;
@@ -343,53 +336,6 @@ function convertToLogScaleValueBuckets(xBucket, yBucketSplitFactor, logBase) {
   return buckets;
 }
 
-/**
- * Merge individual buckets for all series into one
- * @param  {Array}  seriesBuckets Array of series buckets
- * @return {Object}               Merged buckets.
- */
-function mergeBuckets(seriesBuckets) {
-  let mergedBuckets: any = {};
-  _.forEach(seriesBuckets, (seriesBucket, index) => {
-    if (index === 0) {
-      mergedBuckets = seriesBucket;
-    } else {
-      _.forEach(seriesBucket, (xBucket, xBound) => {
-        if (mergedBuckets[xBound]) {
-          if (xBucket.points) {
-            mergedBuckets[xBound].points = xBucket.points.concat(mergedBuckets[xBound].points);
-          }
-          if (xBucket.values) {
-            mergedBuckets[xBound].values = xBucket.values.concat(mergedBuckets[xBound].values);
-          }
-
-          _.forEach(xBucket.buckets, (yBucket, yBound) => {
-            let bucket = mergedBuckets[xBound].buckets[yBound];
-            if (bucket && bucket.values) {
-              mergedBuckets[xBound].buckets[yBound].values = bucket.values.concat(yBucket.values);
-
-              if (bucket.points) {
-                mergedBuckets[xBound].buckets[yBound].points = bucket.points.concat(yBucket.points);
-              }
-            } else {
-              mergedBuckets[xBound].buckets[yBound] = yBucket;
-            }
-
-            let points = mergedBuckets[xBound].buckets[yBound].points;
-            if (points) {
-              mergedBuckets[xBound].buckets[yBound].seriesStat = getSeriesStat(points);
-            }
-          });
-        } else {
-          mergedBuckets[xBound] = xBucket;
-        }
-      });
-    }
-  });
-
-  return mergedBuckets;
-}
-
 // Get minimum non zero value.
 function getMinLog(series) {
   let values = _.compact(_.map(series.datapoints, p => p[0]));
@@ -454,36 +400,36 @@ function isHeatmapDataEqual(objA: any, objB: any): boolean {
   let is_eql = !emptyXOR(objA, objB);
 
   _.forEach(objA, (xBucket: XBucket, x) => {
-    if (objB[x]) {
+      if (objB[x]) {
       if (emptyXOR(xBucket.buckets, objB[x].buckets)) {
-        is_eql = false;
-        return false;
+      is_eql = false;
+      return false;
       }
 
       _.forEach(xBucket.buckets, (yBucket: YBucket, y) => {
-        if (objB[x].buckets && objB[x].buckets[y]) {
+          if (objB[x].buckets && objB[x].buckets[y]) {
           if (objB[x].buckets[y].values) {
-            is_eql = _.isEqual(_.sortBy(yBucket.values), _.sortBy(objB[x].buckets[y].values));
-            if (!is_eql) {
-              return false;
-            }
+          is_eql = _.isEqual(_.sortBy(yBucket.values), _.sortBy(objB[x].buckets[y].values));
+          if (!is_eql) {
+          return false;
+          }
           } else {
-            is_eql = false;
-            return false;
+          is_eql = false;
+          return false;
           }
-        } else {
+          } else {
           is_eql = false;
           return false;
-        }
-      });
+          }
+          });
 
       if (!is_eql) {
         return false;
       }
-    } else {
-      is_eql = false;
-      return false;
-    }
+      } else {
+        is_eql = false;
+        return false;
+      }
   });
 
   return is_eql;
@@ -495,12 +441,12 @@ function emptyXOR(foo: any, bar: any): boolean {
 
 export {
   convertToHeatMap,
-  elasticHistogramToHeatmap,
-  convertToCards,
-  removeZeroBuckets,
-  mergeZeroBuckets,
-  getMinLog,
-  getValueBucketBound,
-  isHeatmapDataEqual,
-  calculateBucketSize
+    elasticHistogramToHeatmap,
+    convertToCards,
+    removeZeroBuckets,
+    mergeZeroBuckets,
+    getMinLog,
+    getValueBucketBound,
+    isHeatmapDataEqual,
+    calculateBucketSize
 };

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

@@ -90,7 +90,7 @@ export class HeatmapTooltip {
     if (yData && yData.bounds) {
       boundBottom = valueFormatter(yData.bounds.bottom);
       boundTop = valueFormatter(yData.bounds.top);
-      valuesNumber = yData.values.length;
+      valuesNumber = yData.count;
       tooltipHtml += `<div>
         bucket: <b>${boundBottom} - ${boundTop}</b> <br>
         count: <b>${valuesNumber}</b> <br>

public/app/plugins/panel/heatmap/specs/heatmap_data_converter_specs.ts

@@ -119,21 +119,24 @@ describe('HeatmapDataConverter', () => {
   beforeEach(() => {
     ctx.series = [];
     ctx.series.push(new TimeSeries({
-      datapoints: [[1, 1422774000000], [2, 1422774060000]],
+      datapoints: [[1, 1422774000000], [1, 1422774000010], [2, 1422774060000]],
       alias: 'series1'
     }));
     ctx.series.push(new TimeSeries({
-      datapoints: [[2, 1422774000000], [3, 1422774060000]],
+      datapoints: [[2, 1422774000000], [2, 1422774000010], [3, 1422774060000]],
       alias: 'series2'
     }));
+    ctx.series.push(new TimeSeries({
+      datapoints: [[5, 1422774000000], [3, 1422774000010], [4, 1422774060000]],
+      alias: 'series3'
+    }));
 
     ctx.xBucketSize = 60000; // 60s
-    ctx.yBucketSize = 1;
+    ctx.yBucketSize = 2;
     ctx.logBase = 1;
   });
 
   describe('when logBase is 1 (linear scale)', () => {
-
     beforeEach(() => {
       ctx.logBase = 1;
     });
@@ -143,15 +146,16 @@ describe('HeatmapDataConverter', () => {
         '1422774000000': {
           x: 1422774000000,
           buckets: {
-            '1': { y: 1, values: [1] },
-            '2': { y: 2, values: [2] }
+            '0': {y: 0, values: [1, 1], count: 2, bounds: {bottom: 0, top: 2}},
+            '2': {y: 2, values: [2, 2, 3], count: 3, bounds: {bottom: 2, top: 4}},
+            '4': {y: 4, values: [5], count: 1, bounds: {bottom: 4, top: 6}},
           }
         },
         '1422774060000': {
           x: 1422774060000,
           buckets: {
-            '2': { y: 2, values: [2] },
-            '3': { y: 3, values: [3] }
+            '2': {y: 2, values: [2, 3], count: 3, bounds: {bottom: 2, top: 4}},
+            '4': {y: 4, values: [4], count: 1, bounds: {bottom: 4, top: 6}},
           }
         },
       };
@@ -161,7 +165,7 @@ describe('HeatmapDataConverter', () => {
     });
   });
 
-  describe('when logBase is 2', () => {
+  describe.skip('when logBase is 2', () => {
 
     beforeEach(() => {
       ctx.logBase = 2;