diff --git a/public/app/plugins/panel/graph/axes_editor.html b/public/app/plugins/panel/graph/axes_editor.html
index b0ab759bf18..1e577fe392e 100644
--- a/public/app/plugins/panel/graph/axes_editor.html
+++ b/public/app/plugins/panel/graph/axes_editor.html
@@ -67,6 +67,12 @@
+
diff --git a/public/app/plugins/panel/graph/axes_editor.ts b/public/app/plugins/panel/graph/axes_editor.ts
index adb3d1d6706..155265e5987 100644
--- a/public/app/plugins/panel/graph/axes_editor.ts
+++ b/public/app/plugins/panel/graph/axes_editor.ts
@@ -10,6 +10,7 @@ export class AxesEditorCtrl {
xAxisModes: any;
xAxisStatOptions: any;
xNameSegment: any;
+ histogramValues: any;
/** @ngInject **/
constructor(private $scope, private $q) {
@@ -34,6 +35,11 @@ export class AxesEditorCtrl {
// 'Data field': 'field',
};
+ this.histogramValues = {
+ 'Percent': 'percent',
+ 'Count': 'count'
+ };
+
this.xAxisStatOptions = [
{text: 'Avg', value: 'avg'},
{text: 'Min', value: 'min'},
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 16d259c210e..8c928fb6a41 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -312,10 +312,13 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
let histMax = _.max(_.map(data, s => s.stats.max));
let ticks = panel.xaxis.buckets || panelWidth / 50;
bucketSize = tickStep(histMin, histMax, ticks);
- let histogram = convertValuesToHistogram(values, bucketSize);
+ let normalize = panel.xaxis.histogramValue === 'percent';
+ let histogram = convertValuesToHistogram(values, bucketSize, normalize);
+
+ let seriesLabel = panel.xaxis.histogramValue || "count";
data[0].data = histogram;
- data[0].alias = data[0].label = data[0].id = "count";
+ data[0].alias = data[0].label = data[0].id = seriesLabel;
data = [data[0]];
options.series.bars.barWidth = bucketSize * 0.8;
@@ -422,21 +425,32 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
function addXHistogramAxis(options, bucketSize) {
let ticks, min, max;
+ let defaultTicks = panelWidth / 50;
if (data.length && bucketSize) {
ticks = _.map(data[0].data, point => point[0]);
+ min = _.min(ticks);
+ max = _.max(ticks);
+
+ // Adjust tick step
+ let tickStep = bucketSize;
+ let ticks_num = Math.floor((max - min) / tickStep);
+ while (ticks_num > defaultTicks) {
+ tickStep = tickStep * 2;
+ ticks_num = Math.ceil((max - min) / tickStep);
+ }
// Expand ticks for pretty view
- min = Math.max(0, _.min(ticks) - bucketSize);
- max = _.max(ticks) + bucketSize;
+ min = Math.floor(min / tickStep) * tickStep;
+ max = Math.ceil(max / tickStep) * tickStep;
ticks = [];
- for (let i = min; i <= max; i += bucketSize) {
+ for (let i = min; i <= max; i += tickStep) {
ticks.push(i);
}
} else {
// Set defaults if no data
- ticks = panelWidth / 100;
+ ticks = defaultTicks / 2;
min = 0;
max = 1;
}
@@ -450,6 +464,9 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
label: "Histogram",
ticks: ticks
};
+
+ // Use 'short' format for histogram values
+ configureAxisMode(options.xaxis, 'short');
}
function addXTableAxis(options) {
diff --git a/public/app/plugins/panel/graph/histogram.ts b/public/app/plugins/panel/graph/histogram.ts
index e6ad7ebb0f6..efb13c546f0 100644
--- a/public/app/plugins/panel/graph/histogram.ts
+++ b/public/app/plugins/panel/graph/histogram.ts
@@ -26,7 +26,7 @@ export function getSeriesValues(data: any): number[] {
* @param values
* @param bucketSize
*/
-export function convertValuesToHistogram(values: number[], bucketSize: number): any[] {
+export function convertValuesToHistogram(values: number[], bucketSize: number, normalize = false): any[] {
let histogram = {};
for (let i = 0; i < values.length; i++) {
@@ -38,9 +38,16 @@ export function convertValuesToHistogram(values: number[], bucketSize: number):
}
}
- return _.map(histogram, (count, bound) => {
+ let histogam_series = _.map(histogram, (count, bound) => {
+ if (normalize && values.length) {
+ return [Number(bound), count / values.length];
+ }
+
return [Number(bound), count];
});
+
+ // Sort by Y axis values
+ return _.sortBy(histogam_series, point => point[0]);
}
function getBucketBound(value: number, bucketSize: number): number {
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index e9ca8c5c4e2..fed739a60d7 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -58,7 +58,8 @@ class GraphCtrl extends MetricsPanelCtrl {
mode: 'time',
name: null,
values: [],
- buckets: null
+ buckets: null,
+ histogramValue: 'percent'
},
// show/hide lines
lines : true,
diff --git a/public/app/plugins/panel/graph/specs/histogram_specs.ts b/public/app/plugins/panel/graph/specs/histogram_specs.ts
index 71b3def8d1d..4d5ad02aec9 100644
--- a/public/app/plugins/panel/graph/specs/histogram_specs.ts
+++ b/public/app/plugins/panel/graph/specs/histogram_specs.ts
@@ -1,7 +1,6 @@
///
-
+import _ from 'lodash';
import { describe, beforeEach, it, expect } from '../../../../../test/lib/common';
-
import { convertValuesToHistogram, getSeriesValues } from '../histogram';
describe('Graph Histogam Converter', function () {
@@ -11,13 +10,13 @@ describe('Graph Histogam Converter', function () {
let bucketSize = 10;
beforeEach(() => {
- values = [1, 2, 10, 11, 17, 20, 29];
+ values = [1, 2, 10, 11, 17, 20, 29, 30, 31, 33];
});
it('Should convert to series-like array', () => {
bucketSize = 10;
let expected = [
- [0, 2], [10, 3], [20, 2]
+ [0, 2], [10, 3], [20, 2], [30, 3]
];
let histogram = convertValuesToHistogram(values, bucketSize);
@@ -27,12 +26,35 @@ describe('Graph Histogam Converter', function () {
it('Should not add empty buckets', () => {
bucketSize = 5;
let expected = [
- [0, 2], [10, 2], [15, 1], [20, 1], [25, 1]
+ [0, 2], [10, 2], [15, 1], [20, 1], [25, 1], [30, 3]
];
let histogram = convertValuesToHistogram(values, bucketSize);
expect(histogram).to.eql(expected);
});
+
+ it('Should normalize values', () => {
+ bucketSize = 5;
+ let normalize = true;
+ let expected = [
+ [0, 0.2], [10, 0.2], [15, 0.1], [20, 0.1], [25, 0.1], [30, 0.3]
+ ];
+
+ let histogram = convertValuesToHistogram(values, bucketSize, normalize);
+ expect(histogram).to.eql(expected);
+ });
+
+ it('Sum of normalized values should be 1', () => {
+ bucketSize = 5;
+ let normalize = true;
+ let expected = [
+ [0, 0.2], [10, 0.2], [15, 0.1], [20, 0.1], [25, 0.1], [30, 0.3]
+ ];
+
+ let histogram = convertValuesToHistogram(values, bucketSize, normalize);
+ let sum = _.reduce(histogram, (sum, point) => sum + point[1], 0);
+ expect(sum).to.eql(1);
+ });
});
describe('Series to values converter', () => {