graph: minor fixes to y-axes alignment feature

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

@@ -2,16 +2,16 @@ import _ from 'lodash';
 
 /**
  * To align two Y axes by Y level
- * @param yaxis data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}]
- * @param align Y level
+ * @param yAxes data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}]
+ * @param level Y level
  */
-export function alignYLevel(yaxis, alignLevel) {
-  if (isNaN(alignLevel) || !checkCorrectAxis(yaxis)) {
+export function alignYLevel(yAxes, level) {
+  if (isNaN(level) || !checkCorrectAxis(yAxes)) {
     return;
   }
 
-  var [yLeft, yRight] = yaxis;
-  moveLevelToZero(yLeft, yRight, alignLevel);
+  var [yLeft, yRight] = yAxes;
+  moveLevelToZero(yLeft, yRight, level);
 
   expandStuckValues(yLeft, yRight);
 
@@ -62,7 +62,7 @@ export function alignYLevel(yaxis, alignLevel) {
     }
   }
 
-  restoreLevelFromZero(yLeft, yRight, alignLevel);
+  restoreLevelFromZero(yLeft, yRight, level);
 }
 
 function expandStuckValues(yLeft, yRight) {
@@ -78,21 +78,21 @@ function expandStuckValues(yLeft, yRight) {
   }
 }
 
-function moveLevelToZero(yLeft, yRight, alignLevel) {
-  if (alignLevel !== 0) {
-    yLeft.min -= alignLevel;
-    yLeft.max -= alignLevel;
-    yRight.min -= alignLevel;
-    yRight.max -= alignLevel;
+function moveLevelToZero(yLeft, yRight, level) {
+  if (level !== 0) {
+    yLeft.min -= level;
+    yLeft.max -= level;
+    yRight.min -= level;
+    yRight.max -= level;
   }
 }
 
-function restoreLevelFromZero(yLeft, yRight, alignLevel) {
-  if (alignLevel !== 0) {
-    yLeft.min += alignLevel;
-    yLeft.max += alignLevel;
-    yRight.min += alignLevel;
-    yRight.max += alignLevel;
+function restoreLevelFromZero(yLeft, yRight, level) {
+  if (level !== 0) {
+    yLeft.min += level;
+    yLeft.max += level;
+    yRight.min += level;
+    yRight.max += level;
   }
 }
 

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

@@ -70,10 +70,12 @@
 		<div>
 			<br/>
 			<h5 class="section-heading">Y-Axes</h5>
-			<gf-form-switch class="gf-form" label="Align" tooltip="Align two Y-axes by {{ctrl.panel.yaxis.alignment ? ctrl.panel.yaxis.align || 0 : 'value'}}" label-class="width-6" switch-class="width-5" checked="ctrl.panel.yaxis.alignment" on-change="ctrl.render()"></gf-form-switch>
-			<div class="gf-form" ng-show="ctrl.panel.yaxis.alignment">
-				<label class="gf-form-label width-6">Value</label>
-				<input type="number" class="gf-form-input width-5" placeholder="0" ng-model="ctrl.panel.yaxis.align" ng-change="ctrl.render()" ng-model-onblur ng-init="ctrl.panel.yaxis.align = ctrl.panel.yaxis.align || 0">
+			<gf-form-switch class="gf-form" label="Align" tooltip="Align left and right Y-axes" label-class="width-6" switch-class="width-5" checked="ctrl.panel.yaxis.align" on-change="ctrl.render()"></gf-form-switch>
+			<div class="gf-form" ng-show="ctrl.panel.yaxis.align">
+				<label class="gf-form-label width-6">
+					Level
+				</label>
+				<input type="number" class="gf-form-input width-5" placeholder="0" ng-model="ctrl.panel.yaxis.alignLevel" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Alignment of Y-axes are based on this value, starting from Y=0'" data-placement="right">
 			</div>
 		</div>
 

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

@@ -157,10 +157,12 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
       }
 
       function processRangeHook(plot) {
-        var yaxis = plot.getYAxes();
-        if (yaxis.length > 1 && panel.yaxis.alignment) {
-          var align = panel.yaxis.align || 0;
-          alignYLevel(yaxis, parseFloat(align));
+        var yAxes = plot.getYAxes();
+        const align = panel.yaxis.align || false;
+
+        if (yAxes.length > 1 && align === true) {
+          const level = panel.yaxis.alignLevel || 0;
+          alignYLevel(yAxes, parseFloat(level));
         }
       }
 

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

@@ -56,8 +56,8 @@ class GraphCtrl extends MetricsPanelCtrl {
       buckets: null,
     },
     yaxis: {
-      alignment: false,
-      align: 0,
+      align: false,
+      alignLevel: null,
     },
     // show/hide lines
     lines: true,