From 332ecd483f7c7b9215758b9e86a9b27a1190efd1 Mon Sep 17 00:00:00 2001
From: Sofia Papagiannaki <papagian@gmail.com>
Date: Sat, 12 Jan 2019 17:18:51 +0200
Subject: [PATCH] Optionally set histogram x-axis min/max

---
 .../app/plugins/panel/graph/axes_editor.html  | 11 ++++
 public/app/plugins/panel/graph/graph.ts       |  4 +-
 .../plugins/panel/graph/specs/graph.test.ts   | 64 +++++++++++++++++++
 3 files changed, 77 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/panel/graph/axes_editor.html b/public/app/plugins/panel/graph/axes_editor.html
index 6ec64015746..4186111a41c 100644
--- a/public/app/plugins/panel/graph/axes_editor.html
+++ b/public/app/plugins/panel/graph/axes_editor.html
@@ -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>
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts
index 4033e4b3778..98330196ca2 100755
--- a/public/app/plugins/panel/graph/graph.ts
+++ b/public/app/plugins/panel/graph/graph.ts
@@ -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;
diff --git a/public/app/plugins/panel/graph/specs/graph.test.ts b/public/app/plugins/panel/graph/specs/graph.test.ts
index 58a35ea2a5f..dc1c9c99f04 100644
--- a/public/app/plugins/panel/graph/specs/graph.test.ts
+++ b/public/app/plugins/panel/graph/specs/graph.test.ts
@@ -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);
+    });
+  });
 });