Skip to content

N
nexpie-grafana-theme
Commit 7eeb68b5 by ilgizar
Options

Refactoring code. Change Y-Zero to Y-Level.

parent 57013d22
Showing with 91 additions and 52 deletions
public/app/plugins/panel/graph/axes_editor.html
......@@ -29,7 +29,6 @@
<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>
<gf-form-switch class="gf-form" label="Share Zero" label-class="width-6" checked="yaxis.shareZero" on-change="ctrl.render()" ng-show="$index === 1"></gf-form-switch>
<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>
......@@ -40,6 +39,13 @@
<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
......@@ -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,6 +188,18 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
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) {
......@@ -193,8 +210,15 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
minRight = -maxRight;
}
} else {
var limitTop = Infinity;
var limitBottom = -Infinity;
// 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);
......@@ -203,56 +227,41 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
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;
}
rateLeft = downLeft ? upLeft / downLeft : upLeft;
rateRight = downRight ? upRight / downRight : upRight;
} else {
var coef = deltaLeft / deltaRight;
if ((rate === rateLeft && minLeft > 0) || (rate === rateRight && maxRight < 0)) {
maxLeft = maxRight * coef;
minRight = minLeft / coef;
if (minLeft > 0 || minRight > 0) {
rateLeft = maxLeft / maxRight;
rateRight = 0;
} else {
minLeft = minRight * coef;
maxRight = maxLeft / coef;
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 {
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]);
if (rate === rateLeft) {
minRight =
upRight === absRightMin && (absRightMin !== absRightMax || upLeft !== absLeftMin)
? -upRight
: upRight / rate;
maxRight = upRight === absRightMax ? upRight : -upRight * rate;
if (twoCross) {
minLeft = minRight ? minRight * rate : minLeft;
minRight = minLeft ? minLeft / rate : minRight;
maxLeft = maxRight ? maxRight * rate : maxLeft;
maxRight = maxLeft ? maxLeft / rate : maxRight;
} else {
minLeft =
upLeft === absLeftMin && (absLeftMin !== absLeftMax || upRight !== absRightMin)
? -upLeft
: upLeft / rate;
maxLeft = upLeft === absLeftMax ? upLeft : -upLeft * rate;
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,
......
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: {
......
public/vendor/flot/jquery.flot.js
......@@ -1622,15 +1622,25 @@ Licensed under the MIT license.
return axis.show || axis.reserveSpace;
});
var snaped = false;
for (var i = 0; i < 2; i++) {
$.each(allocatedAxes, function (_, axis) {
// make the ticks
setupTickGeneration(axis);
setTicks(axis);
snapRangeToTicks(axis, axis.ticks);
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
// (reverse order)
......@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment