public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optionally set histogram x-axis min/max

Browse Source
This commit is contained in:
Sofia Papagiannaki
2019-03-09 17:20:14 +02:00
committed by Sofia Papagiannaki
parent 0ae9c1c5cc
commit 332ecd483f
3 changed files with 77 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/panel/graph/axes_editor.html
+11
View File
@@ -67,6 +67,17 @@
<input type="number" class="gf-form-input max-width-8" ng-model="ctrl.panel.xaxis.buckets" placeholder="auto" ng-change="ctrl.render()" ng-model-onblur bs-tooltip="'Number of buckets'" data-placement="right">
</div>
<div class="gf-form-inline" ng-if="ctrl.panel.xaxis.mode === 'histogram'">
<div class="gf-form">
<label class="gf-form-label width-6">X-Min</label>
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.xaxis.min" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form">
<label class="gf-form-label width-6">X-Max</label>
<input type="text" class="gf-form-input width-5" placeholder="auto" empty-to-null ng-model="ctrl.panel.xaxis.max" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div>
<br/>
<h5 class="section-heading">Y-Axes</h5>
public/app/plugins/panel/graph/graph.ts
+2 -2
View File
@@ -337,8 +337,8 @@ class GraphElement {
let bucketSize: number;
if (this.data.length) {
const histMin = _.min(_.map(this.data, s => s.stats.min));
const histMax = _.max(_.map(this.data, s => s.stats.max));
const histMin = panel.xaxis.min ? panel.xaxis.min : _.min(_.map(this.data, s => s.stats.min));
const histMax = panel.xaxis.max ? panel.xaxis.max : _.max(_.map(this.data, s => s.stats.max));
const ticks = panel.xaxis.buckets || this.panelWidth / 50;
bucketSize = tickStep(histMin, histMax, ticks);
options.series.bars.barWidth = bucketSize * 0.8;
public/app/plugins/panel/graph/specs/graph.test.ts
+64
View File
@@ -516,4 +516,68 @@ describe('grafanaGraph', () => {
expect(ctx.plotData[0].data[0][1]).toBe(2);
});
});
describe('when graph is histogram, and xaxis min is set', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.xaxis.mode = 'histogram';
ctrl.panel.xaxis.min = 150;
ctrl.panel.stack = false;
ctrl.hiddenSeries = {};
ctx.data[0] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series1',
});
});
});
it('should not contain values lower than min', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0])) === 200);
expect(Math.max.apply(Math, nonZero.map(t => t[0])) === 300);
});
});
describe('when graph is histogram, and xaxis max is set', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.xaxis.mode = 'histogram';
ctrl.panel.xaxis.max = 250;
ctrl.panel.stack = false;
ctrl.hiddenSeries = {};
ctx.data[0] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series1',
});
});
});
it('should not contain values lower than min', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0])) === 100);
expect(Math.max.apply(Math, nonZero.map(t => t[0])) === 200);
});
});
describe('when graph is histogram, and xaxis min and max are set', () => {
beforeEach(() => {
setupCtx(() => {
ctrl.panel.xaxis.mode = 'histogram';
ctrl.panel.xaxis.min = 150;
ctrl.panel.xaxis.max = 250;
ctrl.panel.stack = false;
ctrl.hiddenSeries = {};
ctx.data[0] = new TimeSeries({
datapoints: [[100, 1], [100, 2], [200, 3], [300, 4]],
alias: 'series1',
});
});
});
it('should not contain values lower than min', () => {
const nonZero = ctx.plotData[0].data.filter(t => t[1] > 0);
expect(Math.min.apply(Math, nonZero.map(t => t[0])) === 200);
expect(Math.max.apply(Math, nonZero.map(t => t[0])) === 200);
});
});
});