IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

graph: minor fixes to y-axes alignment feature

Browse Source
This commit is contained in:
Marcus Efraimsson 2018-03-22 18:30:23 +01:00
parent 2e8aeffc13
commit c672e44d35
4 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
public/app/plugins/panel/graph/align_yaxes.ts
View File

@ -2,16 +2,16 @@ 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
* @param yAxes data [{min: min_y1, min: max_y1}, {min: min_y2, max: max_y2}]
* @param level Y level
*/
export function alignYLevel(yaxis, alignLevel) {
if (isNaN(alignLevel) || !checkCorrectAxis(yaxis)) {
export function alignYLevel(yAxes, level) {
if (isNaN(level) || !checkCorrectAxis(yAxes)) {
return;
}
var [yLeft, yRight] = yaxis;
moveLevelToZero(yLeft, yRight, alignLevel);
var [yLeft, yRight] = yAxes;
moveLevelToZero(yLeft, yRight, level);
expandStuckValues(yLeft, yRight);
@ -62,7 +62,7 @@ export function alignYLevel(yaxis, alignLevel) {
}
}
restoreLevelFromZero(yLeft, yRight, alignLevel);
restoreLevelFromZero(yLeft, yRight, level);
}
function expandStuckValues(yLeft, yRight) {
@ -78,21 +78,21 @@ function expandStuckValues(yLeft, yRight) {
}
}
function moveLevelToZero(yLeft, yRight, alignLevel) {
if (alignLevel !== 0) {
yLeft.min -= alignLevel;
yLeft.max -= alignLevel;
yRight.min -= alignLevel;
yRight.max -= alignLevel;
function moveLevelToZero(yLeft, yRight, level) {
if (level !== 0) {
yLeft.min -= level;
yLeft.max -= level;
yRight.min -= level;
yRight.max -= level;
}
}
function restoreLevelFromZero(yLeft, yRight, alignLevel) {
if (alignLevel !== 0) {
yLeft.min += alignLevel;
yLeft.max += alignLevel;
yRight.min += alignLevel;
yRight.max += alignLevel;
function restoreLevelFromZero(yLeft, yRight, level) {
if (level !== 0) {
yLeft.min += level;
yLeft.max += level;
yRight.min += level;
yRight.max += level;
}
}

10
public/app/plugins/panel/graph/axes_editor.html
View File

@ -70,10 +70,12 @@
<div>
<br/>
<h5 class="section-heading">Y-Axes</h5>
<gf-form-switch class="gf-form" label="Align" tooltip="Align two Y-axes by {{ctrl.panel.yaxis.alignment ? ctrl.panel.yaxis.align || 0 : 'value'}}" label-class="width-6" switch-class="width-5" checked="ctrl.panel.yaxis.alignment" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form" ng-show="ctrl.panel.yaxis.alignment">
<label class="gf-form-label width-6">Value</label>
<input type="number" class="gf-form-input width-5" placeholder="0" ng-model="ctrl.panel.yaxis.align" ng-change="ctrl.render()" ng-model-onblur ng-init="ctrl.panel.yaxis.align = ctrl.panel.yaxis.align || 0">
<gf-form-switch class="gf-form" label="Align" tooltip="Align left and right Y-axes" label-class="width-6" switch-class="width-5" checked="ctrl.panel.yaxis.align" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form" ng-show="ctrl.panel.yaxis.align">
<label class="gf-form-label width-6">
Level
</label>
<input type="number" class="gf-form-input width-5" placeholder="0" ng-model="ctrl.panel.yaxis.alignLevel" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Alignment of Y-axes are based on this value, starting from Y=0'" data-placement="right">
</div>
</div>

10
public/app/plugins/panel/graph/graph.ts
View File

@ -157,10 +157,12 @@ function graphDirective(timeSrv, popoverSrv, contextSrv) {
}
function processRangeHook(plot) {
var yaxis = plot.getYAxes();
if (yaxis.length > 1 && panel.yaxis.alignment) {
var align = panel.yaxis.align || 0;
alignYLevel(yaxis, parseFloat(align));
var yAxes = plot.getYAxes();
const align = panel.yaxis.align || false;
if (yAxes.length > 1 && align === true) {
const level = panel.yaxis.alignLevel || 0;
alignYLevel(yAxes, parseFloat(level));
}
}

4
public/app/plugins/panel/graph/module.ts
View File

@ -56,8 +56,8 @@ class GraphCtrl extends MetricsPanelCtrl {
buckets: null,
},
yaxis: {
alignment: false,
align: 0,
align: false,
alignLevel: null,
},
// show/hide lines
lines: true,