heatmap: fix Y axis and tooltip decimals and units issues

public/app/plugins/datasource/prometheus/datasource.ts

@@ -470,5 +470,5 @@ function parseHistogramLabel(le: string): number {
   if (le === '+Inf') {
     return +Infinity;
   }
-  return parseInt(le);
+  return Number(le);
 }

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

@@ -86,7 +86,7 @@ function parseHistogramLabel(label: string): number {
   if (label === '+Inf') {
     return +Infinity;
   }
-  return parseInt(label);
+  return Number(label);
 }
 
 /**

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

@@ -116,11 +116,12 @@ export class HeatmapTooltip {
     if (yData) {
       if (yData.bounds) {
         if (data.tsBuckets) {
+          const decimals = this.panelCtrl.decimals || 0;
           const tickFormatter = valIndex => {
             let valueFormatted = data.tsBuckets[valIndex];
             if (!_.isNaN(_.toNumber(valueFormatted)) && valueFormatted !== '') {
               // Try to format numeric tick labels
-              valueFormatted = this.bucketBoundFormatter(0)(valueFormatted);
+              valueFormatted = this.bucketBoundFormatter(decimals)(_.toNumber(valueFormatted));
             }
             return valueFormatted;
           };
@@ -290,7 +291,12 @@ export class HeatmapTooltip {
   bucketBoundFormatter(decimals, scaledDecimals = null) {
     let format = this.panel.yAxis.format;
     return function(value) {
-      return kbn.valueFormats[format](value, decimals, scaledDecimals);
+      try {
+        return format !== 'none' ? kbn.valueFormats[format](value, decimals, scaledDecimals) : value;
+      } catch (err) {
+        console.error(err.message || err);
+        return value;
+      }
     };
   }
 }

public/app/plugins/panel/heatmap/partials/axes_editor.html

@@ -24,12 +24,12 @@
         <label class="gf-form-label width-8">Y-Max</label>
         <input type="text" class="gf-form-input width-12" placeholder="auto" empty-to-null ng-model="ctrl.panel.yAxis.max" ng-change="ctrl.render()" ng-model-onblur>
       </div>
-      <div class="gf-form">
-        <label class="gf-form-label width-8">Decimals</label>
-        <input type="number" class="gf-form-input width-12" placeholder="auto" data-placement="right"
-        bs-tooltip="'Override automatic decimal precision for axis.'"
-        ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
-      </div>
+    </div>
+    <div class="gf-form">
+      <label class="gf-form-label width-8">Decimals</label>
+      <input type="number" class="gf-form-input width-12" placeholder="auto" data-placement="right"
+      bs-tooltip="'Override automatic decimal precision for axis.'"
+      ng-model="ctrl.panel.yAxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
     </div>
   </div>
 

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

@@ -305,12 +305,15 @@ export default function link(scope, elem, attrs, ctrl) {
       .range([chartHeight, 0]);
 
     const tick_values = _.map(tsBuckets, (b, i) => i);
+    const decimalsAuto = _.max(_.map(tsBuckets, getStringPrecision));
+    const decimals = panel.yAxis.decimals === null ? decimalsAuto : panel.yAxis.decimals;
+    ctrl.decimals = decimals;
 
     function tickFormatter(valIndex) {
       let valueFormatted = tsBuckets[valIndex];
       if (!_.isNaN(_.toNumber(valueFormatted)) && valueFormatted !== '') {
         // Try to format numeric tick labels
-        valueFormatted = tickValueFormatter(0)(valueFormatted);
+        valueFormatted = tickValueFormatter(decimals)(_.toNumber(valueFormatted));
       }
       return valueFormatted;
     }
@@ -390,7 +393,12 @@ export default function link(scope, elem, attrs, ctrl) {
   function tickValueFormatter(decimals, scaledDecimals = null) {
     let format = panel.yAxis.format;
     return function(value) {
-      return kbn.valueFormats[format](value, decimals, scaledDecimals);
+      try {
+        return format !== 'none' ? kbn.valueFormats[format](value, decimals, scaledDecimals) : value;
+      } catch (err) {
+        console.error(err.message || err);
+        return value;
+      }
     };
   }
 
@@ -849,12 +857,16 @@ function logp(value, base) {
   return Math.log(value) / Math.log(base);
 }
 
-function getPrecision(num) {
+function getPrecision(num: number): number {
   let str = num.toString();
-  let dot_index = str.indexOf('.');
+  return getStringPrecision(str);
+}
+
+function getStringPrecision(num: string): number {
+  let dot_index = num.indexOf('.');
   if (dot_index === -1) {
     return 0;
   } else {
-    return str.length - dot_index - 1;
+    return num.length - dot_index - 1;
   }
 }