mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Refactoring code
This commit is contained in:
ilgizar
parent
7eeb68b590
commit
9e68cbea51
123
public/app/plugins/panel/graph/align_yaxes.ts
Normal file
123
public/app/plugins/panel/graph/align_yaxes.ts
Normal file
@ -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;
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
<label class="gf-form-label width-6">Unit</label>
|
||||
<div class="gf-form-dropdown-typeahead max-width-20" ng-model="yaxis.format" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(yaxis, $subItem)"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gf-form">
|
||||
<label class="gf-form-label width-6">Scale</label>
|
||||
@ -28,8 +29,15 @@
|
||||
<label class="gf-form-label width-6">Y-Max</label>
|
||||
<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 class="gf-form">
|
||||
</div>
|
||||
|
||||
<div class="gf-form" ng-show="$index === 1">
|
||||
<label class="gf-form-label width-6">Y-Align</label>
|
||||
<input type="text" class="gf-form-input width-5" placeholder="none" empty-to-null ng-model="yaxis.align" ng-change="ctrl.render()" ng-model-onblur>
|
||||
</div>
|
||||
|
||||
<div ng-if="yaxis.show">
|
||||
<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>
|
||||
</div>
|
||||
@ -39,13 +47,6 @@
|
||||
<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">
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -46,8 +46,7 @@ class GraphCtrl extends MetricsPanelCtrl {
|
||||
min: null,
|
||||
max: null,
|
||||
format: 'short',
|
||||
shareLevel: false,
|
||||
shareY: 0,
|
||||
align: null,
|
||||
},
|
||||
],
|
||||
xaxis: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user