diff --git a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts index d760539f27d..32e7bd7ca11 100644 --- a/public/app/plugins/panel/heatmap/heatmap_tooltip.ts +++ b/public/app/plugins/panel/heatmap/heatmap_tooltip.ts @@ -97,15 +97,17 @@ export class HeatmapTooltip { let time = this.dashboard.formatDate(xData.x, tooltipTimeFormat); // Decimals override. Code from panel/graph/graph.ts - let valueFormatter; + let countValueFormatter, bucketBoundFormatter; if (_.isNumber(this.panel.tooltipDecimals)) { - valueFormatter = this.valueFormatter(this.panel.tooltipDecimals, null); + countValueFormatter = this.countValueFormatter(this.panel.tooltipDecimals, null); + bucketBoundFormatter = this.bucketBoundFormatter(this.panel.tooltipDecimals, null); } else { // auto decimals // legend and tooltip gets one more decimal precision // than graph legend ticks let decimals = (this.panelCtrl.decimals || -1) + 1; - valueFormatter = this.valueFormatter(decimals, this.panelCtrl.scaledDecimals + 2); + countValueFormatter = this.countValueFormatter(decimals, this.panelCtrl.scaledDecimals + 2); + bucketBoundFormatter = this.bucketBoundFormatter(decimals, this.panelCtrl.scaledDecimals + 2); } let tooltipHtml = `
${time}
@@ -114,15 +116,25 @@ export class HeatmapTooltip { if (yData) { if (yData.bounds) { if (data.tsBuckets) { - boundBottom = data.tsBuckets[yBucketIndex]; - boundTop = yBucketIndex < data.tsBuckets.length - 1 ? data.tsBuckets[yBucketIndex + 1] : ''; + const tickFormatter = valIndex => { + let valueFormatted = data.tsBuckets[valIndex]; + if (!_.isNaN(_.toNumber(valueFormatted)) && valueFormatted !== '') { + // Try to format numeric tick labels + valueFormatted = this.bucketBoundFormatter(0)(valueFormatted); + } + return valueFormatted; + }; + const tsBucketsTickFormatter = tickFormatter.bind(this); + + boundBottom = tsBucketsTickFormatter(yBucketIndex); + boundTop = yBucketIndex < data.tsBuckets.length - 1 ? tsBucketsTickFormatter(yBucketIndex + 1) : ''; } else { // Display 0 if bucket is a special 'zero' bucket let bottom = yData.y ? yData.bounds.bottom : 0; - boundBottom = valueFormatter(bottom); - boundTop = valueFormatter(yData.bounds.top); + boundBottom = bucketBoundFormatter(bottom); + boundTop = bucketBoundFormatter(yData.bounds.top); } - valuesNumber = valueFormatter(yData.count); + valuesNumber = countValueFormatter(yData.count); tooltipHtml += `
bucket: ${boundBottom} - ${boundTop}
count: ${valuesNumber}
@@ -268,7 +280,14 @@ export class HeatmapTooltip { return this.tooltip.style('left', left + 'px').style('top', top + 'px'); } - valueFormatter(decimals, scaledDecimals = null) { + countValueFormatter(decimals, scaledDecimals = null) { + let format = 'none'; + return function(value) { + return kbn.valueFormats[format](value, decimals, scaledDecimals); + }; + } + + bucketBoundFormatter(decimals, scaledDecimals = null) { let format = this.panel.yAxis.format; return function(value) { return kbn.valueFormats[format](value, decimals, scaledDecimals);