From 0a68dabb8942c5a0dcc306489891946ebf2a3179 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 10 May 2017 17:17:51 +0200 Subject: [PATCH] heatmap: Fixes & progress on heatmap docs --- docs/sources/features/panels/heatmap.md | 67 +++++++++++++++++++ .../panel/heatmap/heatmap_data_converter.ts | 2 +- .../plugins/panel/heatmap/heatmap_tooltip.ts | 1 - public/app/plugins/panel/heatmap/rendering.ts | 14 +--- public/sass/components/_panel_graph.scss | 2 +- 5 files changed, 72 insertions(+), 14 deletions(-) diff --git a/docs/sources/features/panels/heatmap.md b/docs/sources/features/panels/heatmap.md index dd469394cd0..b81df6278e3 100644 --- a/docs/sources/features/panels/heatmap.md +++ b/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. + diff --git a/public/app/plugins/panel/heatmap/heatmap_data_converter.ts b/public/app/plugins/panel/heatmap/heatmap_data_converter.ts index 0136a1bb511..e6ae9c701c1 100644 --- a/public/app/plugins/panel/heatmap/heatmap_data_converter.ts +++ b/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: []}; } } diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts index d2152c68aa7..6d577ab9d37 100644 --- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts +++ b/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}; } diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index 12e7926f76f..d933888ea17 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/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; diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 179049ea220..11783692104 100644 --- a/public/sass/components/_panel_graph.scss +++ b/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; }