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 @@ ...@@ -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> <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> </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"> <div class="gf-form">
<label class="gf-form-label width-6">Decimals</label> <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> <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 @@ ...@@ -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> <input type="text" class="gf-form-input max-width-20" ng-model="yaxis.label" ng-change="ctrl.render()" ng-model-onblur>
</div> </div>
</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>
<div class="section gf-form-group"> <div class="section gf-form-group">
......
public/app/plugins/panel/graph/graph.ts
...@@ -157,12 +157,17 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { ...@@ -157,12 +157,17 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
function processRangeHook(plot) { function processRangeHook(plot) {
var yaxis = plot.getYAxes(); var yaxis = plot.getYAxes();
if (yaxis.length > 1 && panel.yaxes[1].shareZero) { if (yaxis.length > 1 && panel.yaxes[1].shareLevel) {
shareYLevel(yaxis[0].min, yaxis[0].max, yaxis[1].min, yaxis[1].max, 0); 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) { if (shareLevel !== 0) {
minLeft -= shareLevel; minLeft -= shareLevel;
maxLeft -= shareLevel; maxLeft -= shareLevel;
...@@ -183,6 +188,18 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { ...@@ -183,6 +188,18 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
maxRight += 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 // on the opposite sides with respect to zero
if ((minLeft >= 0 && maxRight <= 0) || (maxLeft <= 0 && minRight >= 0)) { if ((minLeft >= 0 && maxRight <= 0) || (maxLeft <= 0 && minRight >= 0)) {
if (minLeft >= 0) { if (minLeft >= 0) {
...@@ -193,8 +210,15 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { ...@@ -193,8 +210,15 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
minRight = -maxRight; minRight = -maxRight;
} }
} else { } else {
var limitTop = Infinity; // both across zero
var limitBottom = -Infinity; 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 absLeftMin = Math.abs(minLeft);
var absLeftMax = Math.abs(maxLeft); var absLeftMax = Math.abs(maxLeft);
var absRightMin = Math.abs(minRight); var absRightMin = Math.abs(minRight);
...@@ -203,56 +227,41 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { ...@@ -203,56 +227,41 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
var downLeft = _.min([absLeftMin, absLeftMax]); var downLeft = _.min([absLeftMin, absLeftMax]);
var upRight = _.max([absRightMin, absRightMax]); var upRight = _.max([absRightMin, absRightMax]);
var downRight = _.min([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 rateLeft = downLeft ? upLeft / downLeft : upLeft;
if (oneSide) { rateRight = downRight ? upRight / downRight : upRight;
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;
}
} else { } else {
var coef = deltaLeft / deltaRight; if (minLeft > 0 || minRight > 0) {
if ((rate === rateLeft && minLeft > 0) || (rate === rateRight && maxRight < 0)) { rateLeft = maxLeft / maxRight;
maxLeft = maxRight * coef; rateRight = 0;
minRight = minLeft / coef;
} else { } else {
minLeft = minRight * coef; rateLeft = 0;
maxRight = maxLeft / coef; 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 { } else {
rateLeft = if (twoCross) {
minLeft && maxLeft minLeft = minRight ? minRight * rate : minLeft;
? minLeft < 0 ? maxLeft / minLeft : limitBottom minRight = minLeft ? minLeft / rate : minRight;
: minLeft < 0 || maxRight >= 0 ? limitBottom : limitTop; maxLeft = maxRight ? maxRight * rate : maxLeft;
rateRight = maxRight = maxLeft ? maxLeft / rate : maxRight;
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;
} else { } else {
minLeft = minLeft = minLeft > 0 ? minRight * rate : minLeft;
upLeft === absLeftMin && (absLeftMin !== absLeftMax || upRight !== absRightMin) minRight = minRight > 0 ? minLeft / rate : minRight;
? -upLeft maxLeft = maxLeft < 0 ? maxRight * rate : maxLeft;
: upLeft / rate; maxRight = maxRight < 0 ? maxLeft / rate : maxRight;
maxLeft = upLeft === absLeftMax ? upLeft : -upLeft * rate; }
} }
} }
} }
...@@ -263,6 +272,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) { ...@@ -263,6 +272,11 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
minRight += shareLevel; minRight += shareLevel;
maxRight += shareLevel; maxRight += shareLevel;
} }
yaxis[0].min = minLeft;
yaxis[0].max = maxLeft;
yaxis[1].min = minRight;
yaxis[1].max = maxRight;
} }
// Series could have different timeSteps, // Series could have different timeSteps,
......
public/app/plugins/panel/graph/module.ts
...@@ -46,6 +46,8 @@ class GraphCtrl extends MetricsPanelCtrl { ...@@ -46,6 +46,8 @@ class GraphCtrl extends MetricsPanelCtrl {
min: null, min: null,
max: null, max: null,
format: 'short', format: 'short',
shareLevel: false,
shareY: 0,
}, },
], ],
xaxis: { xaxis: {
......
public/vendor/flot/jquery.flot.js
...@@ -1622,15 +1622,25 @@ Licensed under the MIT license. ...@@ -1622,15 +1622,25 @@ Licensed under the MIT license.
return axis.show || axis.reserveSpace; return axis.show || axis.reserveSpace;
}); });
var snaped = false;
for (var i = 0; i < 2; i++) {
$.each(allocatedAxes, function (_, axis) { $.each(allocatedAxes, function (_, axis) {
// make the ticks // make the ticks
setupTickGeneration(axis); setupTickGeneration(axis);
setTicks(axis); setTicks(axis);
snapRangeToTicks(axis, axis.ticks); snaped = snapRangeToTicks(axis, axis.ticks) || snaped;
// find labelWidth/Height for axis // find labelWidth/Height for axis
measureTickLabels(axis); measureTickLabels(axis);
}); });
if (snaped) {
executeHooks(hooks.processRange, []);
snaped = false;
} else {
break;
}
}
// with all dimensions calculated, we can compute the // with all dimensions calculated, we can compute the
// axis bounding boxes, start from the outside // axis bounding boxes, start from the outside
// (reverse order) // (reverse order)
...@@ -1646,6 +1656,7 @@ Licensed under the MIT license. ...@@ -1646,6 +1656,7 @@ Licensed under the MIT license.
}); });
} }
plotWidth = surface.width - plotOffset.left - plotOffset.right; plotWidth = surface.width - plotOffset.left - plotOffset.right;
plotHeight = surface.height - plotOffset.bottom - plotOffset.top; plotHeight = surface.height - plotOffset.bottom - plotOffset.top;
...@@ -1879,13 +1890,19 @@ Licensed under the MIT license. ...@@ -1879,13 +1890,19 @@ Licensed under the MIT license.
} }
function snapRangeToTicks(axis, ticks) { function snapRangeToTicks(axis, ticks) {
var changed = false;
if (axis.options.autoscaleMargin && ticks.length > 0) { if (axis.options.autoscaleMargin && ticks.length > 0) {
// snap to ticks // snap to ticks
if (axis.options.min == null) if (axis.options.min == null) {
axis.min = Math.min(axis.min, ticks[0].v); 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); axis.max = Math.max(axis.max, ticks[ticks.length - 1].v);
changed = true;
}
} }
return changed;
} }
function draw() { 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