Refactoring code

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

@@ -0,0 +1,123 @@
+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
+ */
+export function alignYLevel(yaxis, alignLevel) {
+  var minLeft = yaxis[0].min;
+  var maxLeft = yaxis[0].max;
+  var minRight = yaxis[1].min;
+  var maxRight = yaxis[1].max;
+
+  if (alignLevel !== 0) {
+    minLeft -= alignLevel;
+    maxLeft -= alignLevel;
+    minRight -= alignLevel;
+    maxRight -= alignLevel;
+  }
+
+  // wide Y min and max using increased wideFactor
+  var deltaLeft = maxLeft - minLeft;
+  var deltaRight = maxRight - minRight;
+  var wideFactor = 0.25;
+  if (deltaLeft === 0) {
+    minLeft -= wideFactor;
+    maxLeft += wideFactor;
+  }
+  if (deltaRight === 0) {
+    minRight -= wideFactor;
+    maxRight += wideFactor;
+  }
+
+  // one of graphs on zero
+  var zero = minLeft === 0 || minRight === 0 || maxLeft === 0 || maxRight === 0;
+
+  // on the one hand with respect to zero
+  var oneSide = (minLeft >= 0 && minRight >= 0) || (maxLeft <= 0 && maxRight <= 0);
+
+  if (zero && oneSide) {
+    minLeft = maxLeft > 0 ? 0 : minLeft;
+    maxLeft = maxLeft > 0 ? maxLeft : 0;
+    minRight = maxRight > 0 ? 0 : minRight;
+    maxRight = maxRight > 0 ? maxRight : 0;
+  } else {
+    // on the opposite sides with respect to zero
+    if ((minLeft >= 0 && maxRight <= 0) || (maxLeft <= 0 && minRight >= 0)) {
+      if (minLeft >= 0) {
+        minLeft = -maxLeft;
+        maxRight = -minRight;
+      } else {
+        maxLeft = -minLeft;
+        minRight = -maxRight;
+      }
+    } else {
+      // both across zero
+      var twoCross = minLeft <= 0 && maxLeft >= 0 && minRight <= 0 && maxRight >= 0;
+
+      var rateLeft, rateRight, rate;
+      if (twoCross) {
+        rateLeft = minRight ? minLeft / minRight : 0;
+        rateRight = maxRight ? maxLeft / maxRight : 0;
+      } else {
+        if (oneSide) {
+          var absLeftMin = Math.abs(minLeft);
+          var absLeftMax = Math.abs(maxLeft);
+          var absRightMin = Math.abs(minRight);
+          var absRightMax = Math.abs(maxRight);
+          var upLeft = _.max([absLeftMin, absLeftMax]);
+          var downLeft = _.min([absLeftMin, absLeftMax]);
+          var upRight = _.max([absRightMin, absRightMax]);
+          var downRight = _.min([absRightMin, absRightMax]);
+
+          rateLeft = downLeft ? upLeft / downLeft : upLeft;
+          rateRight = downRight ? upRight / downRight : upRight;
+        } else {
+          if (minLeft > 0 || minRight > 0) {
+            rateLeft = maxLeft / maxRight;
+            rateRight = 0;
+          } else {
+            rateLeft = 0;
+            rateRight = minLeft / minRight;
+          }
+        }
+      }
+      rate = rateLeft > rateRight ? rateLeft : rateRight;
+
+      if (oneSide) {
+        if (minLeft > 0) {
+          minLeft = maxLeft / rate;
+          minRight = maxRight / rate;
+        } else {
+          maxLeft = minLeft / rate;
+          maxRight = minRight / rate;
+        }
+      } else {
+        if (twoCross) {
+          minLeft = minRight ? minRight * rate : minLeft;
+          minRight = minLeft ? minLeft / rate : minRight;
+          maxLeft = maxRight ? maxRight * rate : maxLeft;
+          maxRight = maxLeft ? maxLeft / rate : maxRight;
+        } else {
+          minLeft = minLeft > 0 ? minRight * rate : minLeft;
+          minRight = minRight > 0 ? minLeft / rate : minRight;
+          maxLeft = maxLeft < 0 ? maxRight * rate : maxLeft;
+          maxRight = maxRight < 0 ? maxLeft / rate : maxRight;
+        }
+      }
+    }
+  }
+
+  if (alignLevel !== 0) {
+    minLeft += alignLevel;
+    maxLeft += alignLevel;
+    minRight += alignLevel;
+    maxRight += alignLevel;
+  }
+
+  yaxis[0].min = minLeft;
+  yaxis[0].max = maxLeft;
+  yaxis[1].min = minRight;
+  yaxis[1].max = maxRight;
+}

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

@@ -11,6 +11,7 @@
 				<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>
 
 			<div class="gf-form">
 				<label class="gf-form-label width-6">Scale</label>
@@ -28,8 +29,15 @@
 					<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">
+			</div>
+
+			<div class="gf-form" ng-show="$index === 1">
+				<label class="gf-form-label width-6">Y-Align</label>
+				<input type="text" class="gf-form-input width-5" placeholder="none" empty-to-null ng-model="yaxis.align" ng-change="ctrl.render()" ng-model-onblur>
+			</div>
+
+		<div ng-if="yaxis.show">
+			<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" empty-to-null bs-tooltip="'Override automatic decimal precision for y-axis'" data-placement="right" ng-model="yaxis.decimals" ng-change="ctrl.render()" ng-model-onblur>
 			</div>
@@ -39,13 +47,6 @@
 				<input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
 			</div>
 		</div>
-		<div class="gf-form-inline">
-			<gf-form-switch class="gf-form" label="Share Y" label-class="width-6" checked="yaxis.shareLevel" on-change="ctrl.render()" ng-show="$index === 1"></gf-form-switch>
-			<div class="gf-form" ng-if="yaxis.shareLevel">
-				<label class="gf-form-label width-6">Y level</label>
-				<input type="text" class="gf-form-input width-5" placeholder="0" empty-to-null ng-model="yaxis.shareY" ng-change="ctrl.render()" ng-model-onblur ng-init="yaxis.shareY = yaxis.shareY || 0">
-			</div>
-		</div>
 	</div>
 
 	<div class="section gf-form-group">

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

@@ -18,6 +18,7 @@ import GraphTooltip from './graph_tooltip';
 import { ThresholdManager } from './threshold_manager';
 import { EventManager } from 'app/features/annotations/all';
 import { convertValuesToHistogram, getSeriesValues } from './histogram';
+import { alignYLevel } from './align_yaxes';
 import config from 'app/core/config';
 
 /** @ngInject **/
@@ -157,128 +158,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
 
       function processRangeHook(plot) {
         var yaxis = plot.getYAxes();
-        if (yaxis.length > 1 && panel.yaxes[1].shareLevel) {
-          shareYLevel(yaxis, parseFloat(panel.yaxes[1].shareY || 0));
+        if (yaxis.length > 1 && panel.yaxes[1].align !== null) {
+          alignYLevel(yaxis, parseFloat(panel.yaxes[1].align));
         }
       }
 
-      function shareYLevel(yaxis, shareLevel) {
-        var minLeft = yaxis[0].min;
-        var maxLeft = yaxis[0].max;
-        var minRight = yaxis[1].min;
-        var maxRight = yaxis[1].max;
-
-        if (shareLevel !== 0) {
-          minLeft -= shareLevel;
-          maxLeft -= shareLevel;
-          minRight -= shareLevel;
-          maxRight -= shareLevel;
-        }
-
-        // wide Y min and max using increased wideFactor
-        var deltaLeft = maxLeft - minLeft;
-        var deltaRight = maxRight - minRight;
-        var wideFactor = 0.25;
-        if (deltaLeft === 0) {
-          minLeft -= wideFactor;
-          maxLeft += wideFactor;
-        }
-        if (deltaRight === 0) {
-          minRight -= wideFactor;
-          maxRight += wideFactor;
-        }
-
-        // one of graphs on zero
-        var zero = minLeft === 0 || minRight === 0 || maxLeft === 0 || maxRight === 0;
-
-        // on the one hand with respect to zero
-        var oneSide = (minLeft >= 0 && minRight >= 0) || (maxLeft <= 0 && maxRight <= 0);
-
-        if (zero && oneSide) {
-          minLeft = maxLeft > 0 ? 0 : minLeft;
-          maxLeft = maxLeft > 0 ? maxLeft : 0;
-          minRight = maxRight > 0 ? 0 : minRight;
-          maxRight = maxRight > 0 ? maxRight : 0;
-        } else {
-          // on the opposite sides with respect to zero
-          if ((minLeft >= 0 && maxRight <= 0) || (maxLeft <= 0 && minRight >= 0)) {
-            if (minLeft >= 0) {
-              minLeft = -maxLeft;
-              maxRight = -minRight;
-            } else {
-              maxLeft = -minLeft;
-              minRight = -maxRight;
-            }
-          } else {
-            // both across zero
-            var twoCross = minLeft <= 0 && maxLeft >= 0 && minRight <= 0 && maxRight >= 0;
-
-            var rateLeft, rateRight, rate;
-            if (twoCross) {
-              rateLeft = minRight ? minLeft / minRight : 0;
-              rateRight = maxRight ? maxLeft / maxRight : 0;
-            } else {
-              if (oneSide) {
-                var absLeftMin = Math.abs(minLeft);
-                var absLeftMax = Math.abs(maxLeft);
-                var absRightMin = Math.abs(minRight);
-                var absRightMax = Math.abs(maxRight);
-                var upLeft = _.max([absLeftMin, absLeftMax]);
-                var downLeft = _.min([absLeftMin, absLeftMax]);
-                var upRight = _.max([absRightMin, absRightMax]);
-                var downRight = _.min([absRightMin, absRightMax]);
-
-                rateLeft = downLeft ? upLeft / downLeft : upLeft;
-                rateRight = downRight ? upRight / downRight : upRight;
-              } else {
-                if (minLeft > 0 || minRight > 0) {
-                  rateLeft = maxLeft / maxRight;
-                  rateRight = 0;
-                } else {
-                  rateLeft = 0;
-                  rateRight = minLeft / minRight;
-                }
-              }
-            }
-            rate = rateLeft > rateRight ? rateLeft : rateRight;
-
-            if (oneSide) {
-              if (minLeft > 0) {
-                minLeft = maxLeft / rate;
-                minRight = maxRight / rate;
-              } else {
-                maxLeft = minLeft / rate;
-                maxRight = minRight / rate;
-              }
-            } else {
-              if (twoCross) {
-                minLeft = minRight ? minRight * rate : minLeft;
-                minRight = minLeft ? minLeft / rate : minRight;
-                maxLeft = maxRight ? maxRight * rate : maxLeft;
-                maxRight = maxLeft ? maxLeft / rate : maxRight;
-              } else {
-                minLeft = minLeft > 0 ? minRight * rate : minLeft;
-                minRight = minRight > 0 ? minLeft / rate : minRight;
-                maxLeft = maxLeft < 0 ? maxRight * rate : maxLeft;
-                maxRight = maxRight < 0 ? maxLeft / rate : maxRight;
-              }
-            }
-          }
-        }
-
-        if (shareLevel !== 0) {
-          minLeft += shareLevel;
-          maxLeft += shareLevel;
-          minRight += shareLevel;
-          maxRight += shareLevel;
-        }
-
-        yaxis[0].min = minLeft;
-        yaxis[0].max = maxLeft;
-        yaxis[1].min = minRight;
-        yaxis[1].max = maxRight;
-      }
-
       // Series could have different timeSteps,
       // let's find the smallest one so that bars are correctly rendered.
       // In addition, only take series which are rendered as bars for this.

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

@@ -46,8 +46,7 @@ class GraphCtrl extends MetricsPanelCtrl {
         min: null,
         max: null,
         format: 'short',
-        shareLevel: false,
-        shareY: 0,
+        align: null,
       },
     ],
     xaxis: {