heatmap: fix tooltip decimals

public/app/core/utils/ticks.ts

@@ -25,3 +25,7 @@ export function tickStep(start: number, stop: number, count: number): number {
 
   return stop < start ? -step1 : step1;
 }
+
+export function getScaledDecimals(decimals, tick_size) {
+  return decimals - Math.floor(Math.log(tick_size) / Math.LN10);
+}

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

@@ -95,6 +95,8 @@ export class HeatmapCtrl extends MetricsPanelCtrl {
   series: any;
   timeSrv: any;
   dataWarning: any;
+  decimals: number;
+  scaledDecimals: number;
 
   /** @ngInject */
   constructor($scope, $injector, private $rootScope, timeSrv) {

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

@@ -15,6 +15,7 @@ export class HeatmapTooltip {
   tooltip: any;
   scope: any;
   dashboard: any;
+  panelCtrl: any;
   panel: any;
   heatmapPanel: any;
   mouseOverBucket: boolean;
@@ -23,6 +24,7 @@ export class HeatmapTooltip {
   constructor(elem, scope) {
     this.scope = scope;
     this.dashboard = scope.ctrl.dashboard;
+    this.panelCtrl = scope.ctrl;
     this.panel = scope.ctrl.panel;
     this.heatmapPanel = elem;
     this.mouseOverBucket = false;
@@ -85,8 +87,10 @@ export class HeatmapTooltip {
 
     let tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss';
     let time = this.dashboard.formatDate(xData.x, tooltipTimeFormat);
-    let decimals = this.panel.tooltipDecimals || 5;
-    let valueFormatter = this.valueFormatter(decimals);
+
+    let decimals = this.panel.tooltipDecimals || this.panelCtrl.decimals;
+    let scaledDecimals = decimals - 2;
+    let valueFormatter = this.valueFormatter(decimals, scaledDecimals);
 
     let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>
       <div class="heatmap-histogram"></div>`;
@@ -220,13 +224,13 @@ export class HeatmapTooltip {
       .style("top", top + "px");
   }
 
-  valueFormatter(decimals) {
+  valueFormatter(decimals, scaledDecimals = null) {
     let format = this.panel.yAxis.format;
     return function(value) {
       if (_.isInteger(value)) {
         decimals = 0;
       }
-      return kbn.valueFormats[format](value, decimals);
+      return kbn.valueFormats[format](value, decimals, scaledDecimals);
     };
   }
 }

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

@@ -5,7 +5,7 @@ import $ from 'jquery';
 import moment from 'moment';
 import kbn from 'app/core/utils/kbn';
 import {appEvents, contextSrv} from 'app/core/core';
-import {tickStep} from 'app/core/utils/ticks';
+import {tickStep, getScaledDecimals} from 'app/core/utils/ticks';
 import d3 from 'd3';
 import {HeatmapTooltip} from './heatmap_tooltip';
 import {convertToCards, mergeZeroBuckets} from './heatmap_data_converter';
@@ -134,6 +134,8 @@ export default function link(scope, elem, attrs, ctrl) {
     let decimalsAuto = getPrecision(tick_interval);
     let decimals = panel.yAxis.decimals === null ? decimalsAuto : panel.yAxis.decimals;
     let scaledDecimals = getScaledDecimals(decimals, tick_interval);
+    ctrl.decimals = decimals;
+    ctrl.scaledDecimals = scaledDecimals;
 
     // Set default Y min and max if no data
     if (_.isEmpty(data.buckets)) {
@@ -218,7 +220,10 @@ export default function link(scope, elem, attrs, ctrl) {
 
     let decimalsAuto = getPrecision(y_min);
     let decimals = panel.yAxis.decimals || decimalsAuto;
+    // TODO: calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
     let scaledDecimals = decimals - 2;
+    ctrl.decimals = decimals;
+    ctrl.scaledDecimals = scaledDecimals;
 
     data.yAxis = {
       min: y_min,
@@ -298,10 +303,6 @@ export default function link(scope, elem, attrs, ctrl) {
     return tickValues;
   }
 
-  function getScaledDecimals(decimals, tick_size) {
-    return decimals - Math.floor(Math.log(tick_size) / Math.LN10);
-  }
-
   function tickValueFormatter(decimals, scaledDecimals = null) {
     let format = panel.yAxis.format;
     return function(value) {