heatmap: Fixes & progress on heatmap docs

docs/sources/features/panels/heatmap.md

@@ -14,3 +14,70 @@ weight = 3
 
 ![](/img/docs/v43/heatmap_panel.png)
 
+The Heatmap panel allows you to view histograms over time.
+
+## Histograms and buckets
+
+A histogram is a graphical representation of the distribution of numerical data. You group values into buckets
+(some times also called bins) and then count how many values fall into each bucket. Instead
+of graphing the actual values you then graph the buckets. Each each bar represents a bucket
+and the bar height represents the frequency (i.e. count) of values that fell into that bucket's interval.
+
+Example Histogram:
+
+![](/img/docs/v43/heatmap_histogram.png)
+
+The above histogram shows us that most value distribution of a couple of time series. We can easily see that
+most values land between 240-300 with a peak between 260-280. Histograms just look at value distributions
+over specific time range. So you cannot see any trend or changes in the distribution over time,
+this is where heatmaps become useful.
+
+## Heatmap
+
+A Heatmap is like a histogram but over time where each time slice represents it's own
+histogram. Instead of using bar hight as a represenation of frequency you use a cells and color
+the cell propotional to the number of values in the bucket.
+
+Example:
+
+![](/img/docs/v43/heatmap_histogram_over_time.png)
+
+Here we can clearly see what values are more common and how they trend over time.
+
+## Data Options
+
+Data and bucket options can be found in the `Axes` tab.
+
+### Data Formats
+
+Data format | Description
+------------ | -------------
+*Time series* | Grafana does the bucketing by going through all time series values. The bucket sizes & intervals will be determined using the Buckets options.
+*Time series buckets* | Each time series already represents a Y-Axis bucket. The time series name (alias) needs to be a numeric value representing the upper interval for the bucket. Grafana does no bucketing so the bucket size options are hidden.
+
+### Bucket Size
+
+The Bucket count & size options are used by Grafana to calculate how big each cell in the heatmap is. You can
+define the bucket size either by count (the first input box) or by specifying a size interval. For the Y-Axis
+the size interval is just a value but for the X-bucket you can specify a time range in the *Size* input, for example,
+the time range `1h`.  This will make the cells 1h wide on the X-axis.
+
+### Pre-bucketed data
+
+If you have a data that is already organized into buckets you can use the `Time series buckets` data format. This
+format requires that your metric query return regular time series and that each time series has numeric name
+that represent the upper or lower bound of the interval.
+
+The only data source that supports histograms over time is Elasticsearch. You do this by adding a *Histogram*
+bucket aggregation before the *Date Histogram*.
+
+![](/img/docs/v43/elastic_histogram.png)
+
+You control the size of the buckets using the Histogram interval (Y-Axis) and the Date Histogram interval (X-axis).
+
+## Display Options
+
+The color spectrum controls what value get's assigned what color. The left most color on the
+spectrum represents the low frequency and the color on the right most side represents the max frequency.
+Most color schemes are automatically inverted when using the light theme.
+

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

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

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

@@ -126,7 +126,6 @@ export class HeatmapTooltip {
   getBucketIndexes(pos, data) {
     const xBucketIndex = this.getXBucketIndex(pos.offsetX, data);
     const yBucketIndex = this.getYBucketIndex(pos.offsetY, data);
-
     return {xBucketIndex, yBucketIndex};
   }
 

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

@@ -94,7 +94,7 @@ export default function link(scope, elem, attrs, ctrl) {
   }
 
   function addXAxis() {
-    xScale = d3.scaleTime()
+    scope.xScale = xScale = d3.scaleTime()
       .domain([timeRange.from, timeRange.to])
       .range([0, chartWidth]);
 
@@ -147,7 +147,7 @@ export default function link(scope, elem, attrs, ctrl) {
       ticks: ticks
     };
 
-    yScale = d3.scaleLinear()
+    scope.yScale = yScale = d3.scaleLinear()
       .domain([y_min, y_max])
       .range([chartHeight, 0]);
 
@@ -206,7 +206,7 @@ export default function link(scope, elem, attrs, ctrl) {
       y_min = 1;
     }
 
-    yScale = d3.scaleLog()
+    scope.yScale = yScale = d3.scaleLog()
       .base(panel.yAxis.logBase)
       .domain([y_min, y_max])
       .range([chartHeight, 0]);
@@ -546,16 +546,10 @@ export default function link(scope, elem, attrs, ctrl) {
   // Shared crosshair and tooltip
   appEvents.on('graph-hover', event => {
     drawSharedCrosshair(event.pos);
-
-    // Show shared tooltip
-    if (ctrl.dashboard.graphTooltip === 2) {
-      tooltip.show(event.pos, data);
-    }
   }, scope);
 
   appEvents.on('graph-hover-clear', () => {
     clearCrosshair();
-    tooltip.destroy();
   }, scope);
 
   function onMouseDown(event) {
@@ -768,8 +762,6 @@ export default function link(scope, elem, attrs, ctrl) {
     }
 
     addHeatmap();
-    scope.yScale = yScale;
-    scope.xScale = xScale;
     scope.yAxisWidth = yAxisWidth;
     scope.xAxisHeight = xAxisHeight;
     scope.chartHeight = chartHeight;

public/sass/components/_panel_graph.scss

@@ -324,7 +324,7 @@
 .axisLabel {
   color: $text-color;
   font-size: $font-size-sm;
-  position: absolute;
+  position: relative;
   text-align: center;
   font-size: 12px;
 }