heatmap: fix scaledDecimals calculation (use the same method as in flot.js)

public/app/core/utils/ticks.ts

@@ -29,3 +29,39 @@ export function tickStep(start: number, stop: number, count: number): number {
 export function getScaledDecimals(decimals, tick_size) {
   return decimals - Math.floor(Math.log(tick_size) / Math.LN10);
 }
+
+/**
+ * Calculate tick size based on min and max values, number of ticks and precision.
+ * @param min           Axis minimum
+ * @param max           Axis maximum
+ * @param noTicks       Number of ticks
+ * @param tickDecimals  Tick decimal precision
+ */
+export function getFlotTickSize(min: number, max: number, noTicks: number, tickDecimals: number) {
+  var delta = (max - min) / noTicks,
+    dec = -Math.floor(Math.log(delta) / Math.LN10),
+    maxDec = tickDecimals;
+
+  var magn = Math.pow(10, -dec),
+    norm = delta / magn, // norm is between 1.0 and 10.0
+    size;
+
+  if (norm < 1.5) {
+    size = 1;
+  } else if (norm < 3) {
+    size = 2;
+    // special case for 2.5, requires an extra decimal
+    if (norm > 2.25 && (maxDec == null || dec + 1 <= maxDec)) {
+      size = 2.5;
+      ++dec;
+    }
+  } else if (norm < 7.5) {
+    size = 5;
+  } else {
+    size = 10;
+  }
+
+  size *= magn;
+
+  return size;
+}

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

@@ -89,7 +89,7 @@ export class HeatmapTooltip {
     let time = this.dashboard.formatDate(xData.x, tooltipTimeFormat);
 
     let decimals = this.panel.tooltipDecimals || this.panelCtrl.decimals;
-    let scaledDecimals = decimals - 2;
+    let scaledDecimals = this.panel.tooltipDecimals ? decimals - 2 : this.panelCtrl.scaledDecimals;
     let valueFormatter = this.valueFormatter(decimals, scaledDecimals);
 
     let tooltipHtml = `<div class="graph-tooltip-time">${time}</div>

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, getScaledDecimals} from 'app/core/utils/ticks';
+import {tickStep, getScaledDecimals, getFlotTickSize} from 'app/core/utils/ticks';
 import d3 from 'd3';
 import {HeatmapTooltip} from './heatmap_tooltip';
 import {convertToCards, mergeZeroBuckets} from './heatmap_data_converter';
@@ -133,7 +133,9 @@ 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);
+    // Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
+    let flot_tick_size = getFlotTickSize(y_min, y_max, ticks, decimalsAuto);
+    let scaledDecimals = getScaledDecimals(decimals, flot_tick_size);
     ctrl.decimals = decimals;
     ctrl.scaledDecimals = scaledDecimals;
 
@@ -220,8 +222,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;
+
+    // Calculate scaledDecimals for log scales using tick size (as in jquery.flot.js)
+    let flot_tick_size = getFlotTickSize(y_min, y_max, tick_values.length, decimalsAuto);
+    let scaledDecimals = getScaledDecimals(decimals, flot_tick_size);
     ctrl.decimals = decimals;
     ctrl.scaledDecimals = scaledDecimals;