From 7eeb68b59088686ad3b350d0a8e839d3f41d3116 Mon Sep 17 00:00:00 2001 From: ilgizar Date: Tue, 20 Feb 2018 16:58:49 +0500 Subject: [PATCH] Refactoring code. Change Y-Zero to Y-Level. --- .../app/plugins/panel/graph/axes_editor.html | 8 +- public/app/plugins/panel/graph/graph.ts | 148 ++++++++++-------- public/app/plugins/panel/graph/module.ts | 2 + public/vendor/flot/jquery.flot.js | 37 +++-- 4 files changed, 117 insertions(+), 78 deletions(-) diff --git a/public/app/plugins/panel/graph/axes_editor.html b/public/app/plugins/panel/graph/axes_editor.html index ee3654a9bbd..a80ebd3036c 100644 --- a/public/app/plugins/panel/graph/axes_editor.html +++ b/public/app/plugins/panel/graph/axes_editor.html @@ -29,7 +29,6 @@ -
@@ -40,6 +39,13 @@
+
+ +
+ + +
+
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index ade2fb80960..95790222cac 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -157,12 +157,17 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { function processRangeHook(plot) { var yaxis = plot.getYAxes(); - if (yaxis.length > 1 && panel.yaxes[1].shareZero) { - shareYLevel(yaxis[0].min, yaxis[0].max, yaxis[1].min, yaxis[1].max, 0); + if (yaxis.length > 1 && panel.yaxes[1].shareLevel) { + shareYLevel(yaxis, parseFloat(panel.yaxes[1].shareY || 0)); } } - function shareYLevel(minLeft, maxLeft, minRight, maxRight, shareLevel) { + 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; @@ -183,76 +188,80 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { maxRight += wideFactor; } - // 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; - } + // 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 { - var limitTop = Infinity; - var limitBottom = -Infinity; - 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]); - var oneSide = (minLeft >= 0 && minRight >= 0) || (maxLeft <= 0 && maxRight <= 0); - var rateLeft, rateRight, rate; - - // on the one hand with respect to zero - if (oneSide) { - rateLeft = downLeft ? upLeft / downLeft : downLeft >= 0 ? limitTop : limitBottom; - rateRight = downRight ? upRight / downRight : downRight >= 0 ? limitTop : limitBottom; - rate = _.max([rateLeft, rateRight]); - - if (rate === limitTop) { - if (maxLeft > 0) { - minLeft = 0; - minRight = 0; - } else { - maxLeft = 0; - maxRight = 0; - } + // 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 { - var coef = deltaLeft / deltaRight; - if ((rate === rateLeft && minLeft > 0) || (rate === rateRight && maxRight < 0)) { - maxLeft = maxRight * coef; - minRight = minLeft / coef; - } else { - minLeft = minRight * coef; - maxRight = maxLeft / coef; - } + maxLeft = -minLeft; + minRight = -maxRight; } } else { - rateLeft = - minLeft && maxLeft - ? minLeft < 0 ? maxLeft / minLeft : limitBottom - : minLeft < 0 || maxRight >= 0 ? limitBottom : limitTop; - rateRight = - minRight && maxRight - ? minRight < 0 ? maxRight / minRight : limitBottom - : minRight < 0 || maxLeft >= 0 ? limitBottom : limitTop; - rate = _.max([rateLeft, rateRight]); + // both across zero + var twoCross = minLeft <= 0 && maxLeft >= 0 && minRight <= 0 && maxRight >= 0; - if (rate === rateLeft) { - minRight = - upRight === absRightMin && (absRightMin !== absRightMax || upLeft !== absLeftMin) - ? -upRight - : upRight / rate; - maxRight = upRight === absRightMax ? upRight : -upRight * rate; + var rateLeft, rateRight, rate; + if (twoCross) { + rateLeft = minRight ? minLeft / minRight : 0; + rateRight = maxRight ? maxLeft / maxRight : 0; } else { - minLeft = - upLeft === absLeftMin && (absLeftMin !== absLeftMax || upRight !== absRightMin) - ? -upLeft - : upLeft / rate; - maxLeft = upLeft === absLeftMax ? upLeft : -upLeft * rate; + 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; + } } } } @@ -263,6 +272,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { 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, diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index 59e72124c74..67b59997278 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -46,6 +46,8 @@ class GraphCtrl extends MetricsPanelCtrl { min: null, max: null, format: 'short', + shareLevel: false, + shareY: 0, }, ], xaxis: { diff --git a/public/vendor/flot/jquery.flot.js b/public/vendor/flot/jquery.flot.js index 040eb808f48..401198b712d 100644 --- a/public/vendor/flot/jquery.flot.js +++ b/public/vendor/flot/jquery.flot.js @@ -1622,14 +1622,24 @@ Licensed under the MIT license. return axis.show || axis.reserveSpace; }); - $.each(allocatedAxes, function (_, axis) { - // make the ticks - setupTickGeneration(axis); - setTicks(axis); - snapRangeToTicks(axis, axis.ticks); - // find labelWidth/Height for axis - measureTickLabels(axis); - }); + var snaped = false; + for (var i = 0; i < 2; i++) { + $.each(allocatedAxes, function (_, axis) { + // make the ticks + setupTickGeneration(axis); + setTicks(axis); + snaped = snapRangeToTicks(axis, axis.ticks) || snaped; + // find labelWidth/Height for axis + measureTickLabels(axis); + }); + + if (snaped) { + executeHooks(hooks.processRange, []); + snaped = false; + } else { + break; + } + } // with all dimensions calculated, we can compute the // axis bounding boxes, start from the outside @@ -1646,6 +1656,7 @@ Licensed under the MIT license. }); } + plotWidth = surface.width - plotOffset.left - plotOffset.right; plotHeight = surface.height - plotOffset.bottom - plotOffset.top; @@ -1879,13 +1890,19 @@ Licensed under the MIT license. } function snapRangeToTicks(axis, ticks) { + var changed = false; if (axis.options.autoscaleMargin && ticks.length > 0) { // snap to ticks - if (axis.options.min == null) + if (axis.options.min == null) { axis.min = Math.min(axis.min, ticks[0].v); - if (axis.options.max == null && ticks.length > 1) + changed = true; + } + if (axis.options.max == null && ticks.length > 1) { axis.max = Math.max(axis.max, ticks[ticks.length - 1].v); + changed = true; + } } + return changed; } function draw() {