Graph & Singlestat: Users can now set decimal precision for legend and tooltips…

Graph & Singlestat: Users can now set decimal precision for legend and tooltips (override auto precision), Closes #1253

CHANGELOG.md

@@ -15,6 +15,7 @@
 - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts
 - [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix
 - [Issue #599](https://github.com/grafana/grafana/issues/599).   Graph: Added right y axis label setting and graph support
+- [Issue #1253](https://github.com/grafana/grafana/issues/1253). Graph & Singlestat: Users can now set decimal precision for legend and tooltips (override auto precision)
 
 **Fixes**
 - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query

src/app/components/kbn.js

@@ -343,7 +343,7 @@ function($, _, moment) {
         if (steps >= limit) { return "NA"; }
       }
 
-      if (steps > 0) {
+      if (steps > 0 && scaledDecimals !== null) {
         decimals = scaledDecimals + (3 * steps);
       }
 
@@ -400,6 +400,14 @@ function($, _, moment) {
   kbn.valueFormats.velocitymph = function(value, decimals) { return kbn.toFixed(value, decimals) + ' mph'; };
   kbn.valueFormats.velocityknot = function(value, decimals) { return kbn.toFixed(value, decimals) + ' kn'; };
 
+  kbn.toFixedScaled = function(value, decimals, scaledDecimals, additionalDecimals, ext) {
+    if (scaledDecimals === null) {
+      return kbn.toFixed(value, decimals) + ext;
+    } else {
+      return kbn.toFixed(value, scaledDecimals + additionalDecimals) + ext;
+    }
+  };
+
   kbn.valueFormats.ms = function(size, decimals, scaledDecimals) {
     if (size === null) { return ""; }
 
@@ -408,22 +416,22 @@ function($, _, moment) {
     }
     // Less than 1 min
     else if (Math.abs(size) < 60000) {
-      return kbn.toFixed(size / 1000, scaledDecimals + 3) + " s";
+      return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, " s");
     }
     // Less than 1 hour, devide in minutes
     else if (Math.abs(size) < 3600000) {
-      return kbn.toFixed(size / 60000, scaledDecimals + 5) + " min";
+      return kbn.toFixedScaled(size / 60000, decimals, scaledDecimals, 5, " min");
     }
     // Less than one day, devide in hours
     else if (Math.abs(size) < 86400000) {
-      return kbn.toFixed(size / 3600000, scaledDecimals + 7) + " hour";
+      return kbn.toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, " hour");
     }
     // Less than one year, devide in days
     else if (Math.abs(size) < 31536000000) {
-      return kbn.toFixed(size / 86400000, scaledDecimals + 8) + " day";
+      return kbn.toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, " day");
     }
 
-    return kbn.toFixed(size / 31536000000, scaledDecimals + 10) + " year";
+    return kbn.toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, " year");
   };
 
   kbn.valueFormats.s = function(size, decimals, scaledDecimals) {
@@ -434,22 +442,22 @@ function($, _, moment) {
     }
     // Less than 1 hour, devide in minutes
     else if (Math.abs(size) < 3600) {
-      return kbn.toFixed(size / 60, scaledDecimals + 1) + " min";
+      return kbn.toFixedScaled(size / 60, decimals, scaledDecimals, 1, " min");
     }
     // Less than one day, devide in hours
     else if (Math.abs(size) < 86400) {
-      return kbn.toFixed(size / 3600, scaledDecimals + 4) + " hour";
+      return kbn.toFixedScaled(size / 3600, decimals, scaledDecimals, 4, " hour");
     }
     // Less than one week, devide in days
     else if (Math.abs(size) < 604800) {
-      return kbn.toFixed(size / 86400, scaledDecimals + 5) + " day";
+      return kbn.toFixedScaled(size / 86400, decimals, scaledDecimals, 5, " day");
     }
     // Less than one year, devide in week
     else if (Math.abs(size) < 31536000) {
-      return kbn.toFixed(size / 604800, scaledDecimals + 6) + " week";
+      return kbn.toFixedScaled(size / 604800, decimals, scaledDecimals, 6, " week");
     }
 
-    return kbn.toFixed(size / 3.15569e7, scaledDecimals + 7) + " year";
+    return kbn.toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, " year");
   };
 
   kbn.valueFormats['µs'] = function(size, decimals, scaledDecimals) {
@@ -459,10 +467,10 @@ function($, _, moment) {
       return kbn.toFixed(size, decimals) + " µs";
     }
     else if (Math.abs(size) < 1000000) {
-      return kbn.toFixed(size / 1000, scaledDecimals + 3) + " ms";
+      return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, " ms");
     }
     else {
-      return kbn.toFixed(size / 1000000, scaledDecimals + 6) + " s";
+      return kbn.toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, " s");
     }
   };
 
@@ -473,16 +481,16 @@ function($, _, moment) {
       return kbn.toFixed(size, decimals) + " ns";
     }
     else if (Math.abs(size) < 1000000) {
-      return kbn.toFixed(size / 1000, scaledDecimals + 3) + " µs";
+      return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, " µs");
     }
     else if (Math.abs(size) < 1000000000) {
-      return kbn.toFixed(size / 1000000, scaledDecimals + 6) + " ms";
+      return kbn.toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, " ms");
     }
     else if (Math.abs(size) < 60000000000){
-      return kbn.toFixed(size / 1000000000, scaledDecimals + 9) + " s";
+      return kbn.toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, " s");
     }
     else {
-      return kbn.toFixed(size / 60000000000, scaledDecimals + 12) + " m";
+      return kbn.toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, " min");
     }
   };
 

src/app/panels/graph/axisEditor.html

@@ -144,7 +144,7 @@
 	<div class="section">
 		<div class="tight-form last">
 			<ul class="tight-form-list">
-				<li class="tight-form-item" style="width: 80px">
+				<li class="tight-form-item" style="width: 110px">
 					<strong>Legend</strong>
 				</li>
 				<li class="tight-form-item">
@@ -176,7 +176,7 @@
 		</div>
 	</div>
 	<div class="section">
-		<div class="tight-form last">
+		<div class="tight-form">
 			<ul class="tight-form-list">
 				<li class="tight-form-item" style="width: 100px">
 					<strong>Legend values</strong>
@@ -214,6 +214,20 @@
 			</ul>
 			<div class="clearfix"></div>
 		</div>
+		<div class="tight-form last">
+			<ul class="tight-form-list">
+				<li class="tight-form-item" style="width: 100px">
+					<strong>Decimals</strong>
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
+					ng-model="panel.decimals" ng-change="render()" ng-model-onblur>
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+
+
 	</div>
 </div>
 

src/app/panels/graph/graph.js

@@ -113,11 +113,17 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
             var axis = yaxis[series.yaxis - 1];
             var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]];
 
-            // legend and tooltip gets one more decimal precision
-            // than graph legend ticks
-            var tickDecimals = (axis.tickDecimals || -1) + 1;
+            // decimal override
+            if (scope.panel.decimals) {
+              series.updateLegendValues(formater, scope.panel.decimals, null);
+            } else {
+              // auto decimals
+              // legend and tooltip gets one more decimal precision
+              // than graph legend ticks
+              var tickDecimals = (axis.tickDecimals || -1) + 1;
+              series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2);
+            }
 
-            series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2);
             if(!scope.$$phase) { scope.$digest(); }
           }
 

src/app/panels/graph/legend.js

@@ -143,13 +143,13 @@ function (angular, app, _, kbn, $) {
             html += '<a>' + series.label + '</a>';
             html += '</div>';
 
-            var avg = series.formatValue(series.stats.avg);
-            var current = series.formatValue(series.stats.current);
-            var min = series.formatValue(series.stats.min);
-            var max = series.formatValue(series.stats.max);
-            var total = series.formatValue(series.stats.total);
-
             if (panel.legend.values) {
+              var avg = series.formatValue(series.stats.avg);
+              var current = series.formatValue(series.stats.current);
+              var min = series.formatValue(series.stats.min);
+              var max = series.formatValue(series.stats.max);
+              var total = series.formatValue(series.stats.total);
+
               if (panel.legend.min) { html += '<div class="graph-legend-value min">' + min + '</div>'; }
               if (panel.legend.max) { html += '<div class="graph-legend-value max">' + max + '</div>'; }
               if (panel.legend.avg) { html += '<div class="graph-legend-value avg">' + avg + '</div>'; }

src/app/panels/singlestat/editor.html

@@ -59,11 +59,18 @@
 				<li class="tight-form-item" style="width: 80px">
 					<strong>Unit</strong>
 				</li>
-				<li class="dropdown" style="width: 130px;"
+				<li class="dropdown" style="width: 119px;"
 					ng-model="panel.format"
 					dropdown-typeahead="unitFormats"
 					dropdown-typeahead-on-select="setUnitFormat($subItem)">
 				</li>
+				<li class="tight-form-item">
+					Decimals
+				</li>
+				<li>
+					<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
+					ng-model="panel.decimals" ng-change="render()" ng-model-onblur>
+				</li>
 			</ul>
 			<div class="clearfix"></div>
 		</div>

src/app/panels/singlestat/module.js

@@ -123,6 +123,9 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
     };
 
     $scope.getDecimalsForValue = function(value) {
+      if ($scope.panel.decimals) {
+        return { decimals: $scope.panel.decimals, scaledDecimals: null };
+      }
 
       var delta = value / 2;
       var dec = -Math.floor(Math.log(delta) / Math.LN10);

src/test/specs/kbn-format-specs.js

@@ -37,6 +37,22 @@ define([
     });
   });
 
+  describe('kbn ms format when scaled decimals is null do not use it', function() {
+    it('should use specified decimals', function() {
+      var str = kbn.valueFormats['ms'](10000086.123, 1, null);
+      expect(str).to.be('2.8 hour');
+    });
+  });
+
+  describe('kbn kbytes format when scaled decimals is null do not use it', function() {
+    it('should use specified decimals', function() {
+      var str = kbn.valueFormats['kbytes'](10000000, 3, null);
+      expect(str).to.be('9.537 GiB');
+    });
+  });
+
+
+
   describe('calculateInterval', function() {
     it('1h 100 resultion', function() {
       var range = { from: kbn.parseDate('now-1h'), to: kbn.parseDate('now') };