heatmap: fix tooltip in "Time series bucket" mode, #9332 (#9867)

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

@@ -35,7 +35,16 @@ function elasticHistogramToHeatmap(seriesList) {
         bucket = heatmap[time] = {x: time, buckets: {}};
         bucket = heatmap[time] = {x: time, buckets: {}};
       }
       }
 
 
-      bucket.buckets[bound] = {y: bound, count: count, values: [], points: []};
+      bucket.buckets[bound] = {
+        y: bound,
+        count: count,
+        bounds: {
+          top: null,
+          bottom: bound
+        },
+        values: [],
+        points: []
+      };
     }
     }
   }
   }
 
 

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

@@ -83,7 +83,7 @@ export class HeatmapTooltip {
     let xData = data.buckets[xBucketIndex];
     let xData = data.buckets[xBucketIndex];
     // Search in special 'zero' bucket also
     // Search in special 'zero' bucket also
     let yData = _.find(xData.buckets, (bucket, bucketIndex) => {
     let yData = _.find(xData.buckets, (bucket, bucketIndex) => {
-      return bucket.bounds.bottom === yBucketIndex || bucketIndex === yBucketIndex;
+      return bucket.bounds.bottom === yBucketIndex || bucketIndex === yBucketIndex.toString();
     });
     });
 
 
     let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
     let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
@@ -168,7 +168,8 @@ export class HeatmapTooltip {
     let yBucketSize = this.scope.ctrl.data.yBucketSize;
     let yBucketSize = this.scope.ctrl.data.yBucketSize;
     let {min, max, ticks} = this.scope.ctrl.data.yAxis;
     let {min, max, ticks} = this.scope.ctrl.data.yAxis;
     let histogramData = _.map(xBucket.buckets, bucket => {
     let histogramData = _.map(xBucket.buckets, bucket => {
-      return [bucket.bounds.bottom, bucket.values.length];
+      let count = bucket.count !== undefined ? bucket.count : bucket.values.length;
+      return [bucket.bounds.bottom, count];
     });
     });
     histogramData = _.filter(histogramData, d => {
     histogramData = _.filter(histogramData, d => {
       return d[0] >= min && d[0] <= max;
       return d[0] >= min && d[0] <= max;

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

@@ -222,23 +222,23 @@ describe('ES Histogram converter', () => {
         '1422774000000': {
         '1422774000000': {
           x: 1422774000000,
           x: 1422774000000,
           buckets: {
           buckets: {
-            '1': { y: 1, count: 1, values: [], points: [] },
-            '2': { y: 2, count: 5, values: [], points: [] },
-            '3': { y: 3, count: 0, values: [], points: [] }
+            '1': { y: 1, count: 1, values: [], points: [], bounds: {bottom: 1, top: null}},
+            '2': { y: 2, count: 5, values: [], points: [], bounds: {bottom: 2, top: null}},
+            '3': { y: 3, count: 0, values: [], points: [], bounds: {bottom: 3, top: null}}
           }
           }
         },
         },
         '1422774060000': {
         '1422774060000': {
           x: 1422774060000,
           x: 1422774060000,
           buckets: {
           buckets: {
-            '1': { y: 1, count: 0, values: [], points: [] },
-            '2': { y: 2, count: 3, values: [], points: [] },
-            '3': { y: 3, count: 1, values: [], points: [] }
+            '1': { y: 1, count: 0, values: [], points: [], bounds: {bottom: 1, top: null}},
+            '2': { y: 2, count: 3, values: [], points: [], bounds: {bottom: 2, top: null}},
+            '3': { y: 3, count: 1, values: [], points: [], bounds: {bottom: 3, top: null}}
           }
           }
         },
         },
       };
       };
 
 
       let heatmap = elasticHistogramToHeatmap(ctx.series);
       let heatmap = elasticHistogramToHeatmap(ctx.series);
-      expect(heatmap).toMatchObject(expectedHeatmap);
+      expect(heatmap).toEqual(expectedHeatmap);
     });
     });
   });
   });
 });
 });