diff --git a/public/app/plugins/panel/graph/align_yaxes.ts b/public/app/plugins/panel/graph/align_yaxes.ts
new file mode 100644
index 00000000000..74fc9a063c7
--- /dev/null
+++ b/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;
+}
diff --git a/public/app/plugins/panel/graph/axes_editor.html b/public/app/plugins/panel/graph/axes_editor.html
index a80ebd3036c..7bf6756a7df 100644
--- a/public/app/plugins/panel/graph/axes_editor.html
+++ b/public/app/plugins/panel/graph/axes_editor.html
@@ -11,6 +11,7 @@
+
@@ -28,8 +29,15 @@
-
-
+
+
+
+
+
+
+
+
-
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 95790222cac..3f7d1bee33c 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/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.
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 67b59997278..c198d118115 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/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: {