diff --git a/public/app/plugins/panel/heatmap/axes_editor.ts b/public/app/plugins/panel/heatmap/axes_editor.ts index 81df957e2ea..cec3df9f8c5 100644 --- a/public/app/plugins/panel/heatmap/axes_editor.ts +++ b/public/app/plugins/panel/heatmap/axes_editor.ts @@ -32,6 +32,7 @@ export class AxesEditorCtrl { Auto: 'auto', Upper: 'upper', Lower: 'lower', + Middle: 'middle', }; } diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts index c447825eef8..90cbecd6657 100644 --- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts +++ b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts @@ -114,7 +114,9 @@ export class HeatmapTooltip { }; boundBottom = tickFormatter(yBucketIndex); - boundTop = yBucketIndex < data.tsBuckets.length - 1 ? tickFormatter(yBucketIndex + 1) : ''; + if (this.panel.yBucketBound !== 'middle') { + boundTop = yBucketIndex < data.tsBuckets.length - 1 ? tickFormatter(yBucketIndex + 1) : ''; + } } else { // Display 0 if bucket is a special 'zero' bucket const bottom = yData.y ? yData.bounds.bottom : 0; @@ -122,8 +124,9 @@ export class HeatmapTooltip { boundTop = bucketBoundFormatter(yData.bounds.top); } valuesNumber = countValueFormatter(yData.count); + const boundStr = boundTop && boundBottom ? `${boundBottom} - ${boundTop}` : boundBottom || boundTop; tooltipHtml += `
- bucket: ${boundBottom} - ${boundTop}
+ bucket: ${boundStr}
count: ${valuesNumber}
`; } else { diff --git a/public/app/plugins/panel/heatmap/rendering.ts b/public/app/plugins/panel/heatmap/rendering.ts index 42b418b06cb..a4649428722 100644 --- a/public/app/plugins/panel/heatmap/rendering.ts +++ b/public/app/plugins/panel/heatmap/rendering.ts @@ -379,6 +379,12 @@ export class HeatmapRenderer { const posX = this.getYAxisWidth(this.heatmap) + Y_AXIS_TICK_PADDING; this.heatmap.select('.axis-y').attr('transform', 'translate(' + posX + ',' + posY + ')'); + if (this.panel.yBucketBound === 'middle' && tickValues && tickValues.length) { + // Shift Y axis labels to the middle of bucket + const tickShift = 0 - this.chartHeight / (tickValues.length - 1) / 2; + this.heatmap.selectAll('.axis-y text').attr('transform', 'translate(' + 0 + ',' + tickShift + ')'); + } + // Remove vertical line in the right of axis labels (called domain in d3) this.heatmap .select('.axis-y')