graph: adds decimals option for y-axis

Fixes #8187

public/app/plugins/panel/graph/axes_editor.html

@@ -4,34 +4,38 @@
 		<h5 class="section-heading" ng-show="$index === 0">Left Y</h5>
 		<h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
 
-		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch>
+		<gf-form-switch class="gf-form" label="Show" label-class="width-6" checked="yaxis.show" on-change="ctrl.render()"></gf-form-switch>
 
 		<div ng-if="yaxis.show">
 			<div class="gf-form">
-				<label class="gf-form-label width-5">Unit</label>
-				<div class="gf-form-dropdown-typeahead max-width-15" ng-model="yaxis.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $subItem)"></div>
+				<label class="gf-form-label width-6">Unit</label>
+				<div class="gf-form-dropdown-typeahead max-width-20" ng-model="yaxis.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $subItem)"></div>
 			</div>
 
 			<div class="gf-form">
-				<label class="gf-form-label width-5">Scale</label>
-				<div class="gf-form-select-wrapper max-width-15">
+				<label class="gf-form-label width-6">Scale</label>
+				<div class="gf-form-select-wrapper max-width-20">
 					<select class="gf-form-input" ng-model="yaxis.logBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
 				</div>
 			</div>
 
 			<div class="gf-form-inline">
 				<div class="gf-form">
-					<label class="gf-form-label width-5">Y-Min</label>
+					<label class="gf-form-label width-6">Y-Min</label>
 					<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur>
 				</div>
 				<div class="gf-form">
-					<label class="gf-form-label width-5">Y-Max</label>
+					<label class="gf-form-label width-6">Y-Max</label>
 					<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur>
 				</div>
       </div>
+      <div class="gf-form">
+				<label class="gf-form-label width-6">Decimals</label>
+				<input type="number" class="gf-form-input max-width-20" placeholder="auto" bs-tooltip="'Override automatic decimal precision for y-axis'" data-placement="right" ng-model="yaxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
 
 			<div class="gf-form">
-				<label class="gf-form-label width-5">Label</label>
+				<label class="gf-form-label width-6">Label</label>
 				<input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
 			</div>
 		</div>

public/app/plugins/panel/graph/graph.ts

@@ -498,6 +498,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
           logBase: panel.yaxes[0].logBase || 1,
           min: panel.yaxes[0].min ? _.toNumber(panel.yaxes[0].min) : null,
           max: panel.yaxes[0].max ? _.toNumber(panel.yaxes[0].max) : null,
+          tickDecimals: panel.yaxes[0].decimals !== null ? _.toNumber(panel.yaxes[0].decimals): null
         };
 
         options.yaxes.push(defaults);
@@ -510,6 +511,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
           secondY.position = 'right';
           secondY.min = panel.yaxes[1].min ? _.toNumber(panel.yaxes[1].min) : null;
           secondY.max = panel.yaxes[1].max ? _.toNumber(panel.yaxes[1].max) : null;
+          secondY.tickDecimals = panel.yaxes[1].decimals !== null ? _.toNumber(panel.yaxes[1].decimals): null;
           options.yaxes.push(secondY);
 
           applyLogScale(options.yaxes[1], data);