Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Flexible Y-Min and Y-Max settings. #5720

Closed
wants to merge 2 commits into from
Closed

Feature: Flexible Y-Min and Y-Max settings. #5720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
839b320
Feature: Flexible Y-Min and Y-Max settings.
thoj Aug 11, 2016
56710c3
Use parseFloat instead of implicit conversion
thoj Aug 12, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
41 changes: 41 additions & 0 deletions public/app/plugins/panel/graph/graph.js
View file
Open in desktop
Expand Up @@ -352,6 +352,45 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
};
}

//Override min/max to provide more flexible autoscaling
function autoscaleSpanOverride(yaxis, data, options) {
var m, op, num, precision;
if (yaxis.min != null && data != null) {
m = yaxis.min.match(/([<=>~]*)\W*(\d+(\.\d+)?)/);
Copy link

@lpalm lpalm Aug 12, 2016 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we do:
/([<=>~]?)\W*(\d+(\.\d+)?)/
Or even (assuming we want to support >=, <=, which don't matter much for floating point, but may be more intuitive):
/(<|<=|>|>=|~|=)?\W*(\d+(\.\d+)?)/

Instead of:
/([<=>~]*)\W*(\d+(\.\d+)?)/

(Same for the Y-Max)

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lpalm I have a bit of a difficult time figuring out where <= and >= would be useful? Could you explain one case for me?

I agree that the regex could be a lot better. I think we need \W* because \W would enforce a white space.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It wouldn't be useful. Rather, it may be nice to treat >= as > and <= as < instead of just not working. Don't feel strongly about it.

Apologies about the \W*, looks like github treated the asterisk as an indication to italicize my text! I've edited it to be in block quotes now.

if (m != null) {
op = m[1];
num = parseFloat(m[2]);
precision = m[3] == null ? 0 : m[3].length - 1; //Precision based on input
if (op === ">") {
options.min = data.stats.min < num ? num : null;
} else if (op === "<") {
options.min = data.stats.min > num ? num : null;
} else if (op === "~") {
options.min = kbn.roundValue(data.stats.avg - num, precision);
} else if (op === "=") {
options.min = kbn.roundValue(data.stats.current - num, precision);
}
}
}
if (yaxis.max != null && data != null) {
m = yaxis.max.match(/([<=>~]*)\W*(\d+(\.\d+)?)/);
if (m != null) {
op = m[1];
num = parseFloat(m[2]);
precision = m[3] == null ? 0 : m[3].length - 1; //Precision based on input
if (op === ">") {
options.max = data.stats.max < num ? num : null;
} else if (op === "<") {
options.max = data.stats.max > num ? num : null;
} else if (op === "~") {
options.max = kbn.roundValue(data.stats.avg + num, precision);
} else if (op === "=") {
options.max = kbn.roundValue(data.stats.current + num, precision);
}
}
}
}

function configureAxisOptions(data, options) {
var defaults = {
position: 'left',
Expand All @@ -362,6 +401,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
max: panel.percentage && panel.stack ? 100 : panel.yaxes[0].max,
};

autoscaleSpanOverride(panel.yaxes[0], data[0], defaults);
options.yaxes.push(defaults);

if (_.findWhere(data, {yaxis: 2})) {
Expand All @@ -372,6 +412,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
secondY.position = 'right';
secondY.min = panel.yaxes[1].min;
secondY.max = panel.percentage && panel.stack ? 100 : panel.yaxes[1].max;
autoscaleSpanOverride(panel.yaxes[1], data[1], secondY);
options.yaxes.push(secondY);

applyLogScale(options.yaxes[1], data);
Expand Down
63 changes: 63 additions & 0 deletions public/app/plugins/panel/graph/specs/graph_specs.ts
View file
Open in desktop
Expand Up @@ -271,4 +271,67 @@ describe('grafanaGraph', function() {
});

}, 10);

graphScenario('when using flexible Y-Min and Y-Max settings', function(ctx) {
describe('and Y-Min is <100 and Y-Max is >200 and values within range', function() {
ctx.setup(function(ctrl, data) {
ctrl.panel.yaxes[0].min = '<100';
ctrl.panel.yaxes[0].max = '>200';
data[0] = new TimeSeries({
datapoints: [[120,10],[160,20]],
alias: 'series1',
});
});

it('should set min to 100 and max to 200', function() {
expect(ctx.plotOptions.yaxes[0].min).to.be(100);
expect(ctx.plotOptions.yaxes[0].max).to.be(200);
});
});
describe('and Y-Min is <100 and Y-Max is >200 and values outside range', function() {
ctx.setup(function(ctrl, data) {
ctrl.panel.yaxes[0].min = '<100';
ctrl.panel.yaxes[0].max = '>200';
data[0] = new TimeSeries({
datapoints: [[99,10],[201,20]],
alias: 'series1',
});
});

it('should set min to auto and max to auto', function() {
expect(ctx.plotOptions.yaxes[0].min).to.be(null);
expect(ctx.plotOptions.yaxes[0].max).to.be(null);
});
});
describe('and Y-Min is =10.5 and Y-Max is =10.5', function() {
ctx.setup(function(ctrl, data) {
ctrl.panel.yaxes[0].min = '=10.5';
ctrl.panel.yaxes[0].max = '=10.5';
data[0] = new TimeSeries({
datapoints: [[100,10],[120,20], [110,30]],
alias: 'series1',
});
});

it('should set min to last value + 10.5 and max to last value + 10.5', function() {
expect(ctx.plotOptions.yaxes[0].min).to.be(99.5);
expect(ctx.plotOptions.yaxes[0].max).to.be(120.5);
});
});
describe('and Y-Min is ~10.5 and Y-Max is ~10.5', function() {
ctx.setup(function(ctrl, data) {
ctrl.panel.yaxes[0].min = '~10.5';
ctrl.panel.yaxes[0].max = '~10.5';
data[0] = new TimeSeries({
datapoints: [[102,10],[104,20], [110,30]], //Also checks precision
alias: 'series1',
});
});

it('should set min to average value + 10.5 and max to average value + 10.5', function() {
expect(ctx.plotOptions.yaxes[0].min).to.be(94.8);
expect(ctx.plotOptions.yaxes[0].max).to.be(115.8);
});
});
});
});
4 changes: 2 additions & 2 deletions public/app/plugins/panel/graph/tab_axes.html
View file
Open in desktop
Expand Up @@ -22,11 +22,11 @@ <h5 class="section-heading" ng-show="$index === 1">Right Y</h5>
<div class="gf-form-inline">
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Min</label>
<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur>
<input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="yaxis.min" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Max</label>
<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur>
<input type="text" class="gf-form-input" placeholder="auto" empty-to-null ng-model="yaxis.max" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>

Expand Down