From 7588ee974d8113b5229a881a7518533deab84b8e Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Sun, 14 Aug 2016 17:33:18 +0300
Subject: [PATCH] Working on non time series X-axis feature.

---
 public/app/plugins/panel/graph/graph.js      | 69 ++++++++++++++++----
 public/app/plugins/panel/graph/module.ts     |  9 ++-
 public/app/plugins/panel/graph/tab_axes.html | 11 ++++
 3 files changed, 77 insertions(+), 12 deletions(-)

diff --git a/public/app/plugins/panel/graph/graph.js b/public/app/plugins/panel/graph/graph.js
index 0a6a2bc0e45..66d201588df 100755
--- a/public/app/plugins/panel/graph/graph.js
+++ b/public/app/plugins/panel/graph/graph.js
@@ -28,7 +28,7 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
         var ctrl = scope.ctrl;
         var dashboard = ctrl.dashboard;
         var panel = ctrl.panel;
-        var data, annotations;
+        var data, annotations, histogramData;
         var sortedSeries;
         var legendSideLastValue = null;
         var rootScope = scope.$root;
@@ -226,22 +226,37 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
             }
           };
 
-          for (var i = 0; i < data.length; i++) {
-            var series = data[i];
-            series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode);
+          if (panel.xaxis.mode === 'histogram') {
+            histogramData = formatToHistogram(data, _.last);
 
-            // if hidden remove points and disable stack
-            if (ctrl.hiddenSeries[series.alias]) {
-              series.data = [];
-              series.stack = false;
+            if (histogramData.length && histogramData[0].ticks.length) {
+              // options.series.bars.barWidth = histogramData[0].ticks.length / 1.5;
+              options.series.bars.barWidth = 0.7;
+              // options.series.bars.align = 'center';
+            }
+          } else {
+            for (var i = 0; i < data.length; i++) {
+              var series = data[i];
+              series.data = series.getFlotPairs(series.nullPointMode || panel.nullPointMode);
+
+              // if hidden remove points and disable stack
+              if (ctrl.hiddenSeries[series.alias]) {
+                series.data = [];
+                series.stack = false;
+              }
+            }
+
+            if (data.length && data[0].stats.timeStep) {
+              options.series.bars.barWidth = data[0].stats.timeStep / 1.5;
             }
           }
 
-          if (data.length && data[0].stats.timeStep) {
-            options.series.bars.barWidth = data[0].stats.timeStep / 1.5;
+          if (panel.xaxis.mode === 'histogram') {
+            addXAxis(options);
+          } else {
+            addTimeAxis(options);
           }
 
-          addTimeAxis(options);
           addGridThresholds(options, panel);
           addAnnotations(options);
           configureAxisOptions(data, options);
@@ -275,6 +290,24 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           }
         }
 
+        function formatToHistogram(data, getValueCallback) {
+          var histogram = [data[0]];
+
+          histogram[0].data = _.map(data, function(series, index) {
+            var values = _.remove(_.map(series.datapoints, function(point) {
+              return point[0];
+            }), null);
+            var calculatedPoint = getValueCallback(values);
+            return [index, calculatedPoint];
+          });
+
+          histogram[0].ticks = _.map(data, function(series, index) {
+            return [index, series.alias];
+          });
+
+          return histogram;
+        }
+
         function translateFillOption(fill) {
           return fill === 0 ? 0.001 : fill/10;
         }
@@ -305,6 +338,20 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           };
         }
 
+        function addXAxis(options) {
+          var ticks = histogramData[0].ticks;
+
+          options.xaxis = {
+            timezone: dashboard.getTimezone(),
+            show: panel.xaxis.show,
+            mode: null,
+            min: 0,
+            max: ticks.length,
+            label: "Datetime",
+            ticks: ticks
+          };
+        }
+
         function addGridThresholds(options, panel) {
           if (_.isNumber(panel.grid.threshold1)) {
             var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null);
diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts
index 8fbde9e84a1..1f71ad63829 100644
--- a/public/app/plugins/panel/graph/module.ts
+++ b/public/app/plugins/panel/graph/module.ts
@@ -20,6 +20,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   seriesList: any = [];
   logScales: any;
   unitFormats: any;
+  xAxisModes: any;
   annotationsPromise: any;
   datapointsCount: number;
   datapointsOutside: boolean;
@@ -50,7 +51,8 @@ class GraphCtrl extends MetricsPanelCtrl {
       }
     ],
     xaxis: {
-      show: true
+      show: true,
+      mode: 'timeseries'
     },
     grid          : {
       threshold1: null,
@@ -138,6 +140,11 @@ class GraphCtrl extends MetricsPanelCtrl {
       'log (base 1024)': 1024
     };
     this.unitFormats = kbn.getUnitFormats();
+
+    this.xAxisModes = {
+      'Time Series': 'timeseries',
+      'Histogram': 'histogram'
+    };
   }
 
   onInitPanelActions(actions) {
diff --git a/public/app/plugins/panel/graph/tab_axes.html b/public/app/plugins/panel/graph/tab_axes.html
index eeaf27aff78..0469aff547f 100644
--- a/public/app/plugins/panel/graph/tab_axes.html
+++ b/public/app/plugins/panel/graph/tab_axes.html
@@ -40,6 +40,17 @@
 	<div class="section gf-form-group">
 		<h5 class="section-heading">X-Axis</h5>
 		<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.xaxis.show" on-change="ctrl.render()"></gf-form-switch>
+
+		<div class="gf-form">
+			<label class="gf-form-label width-5">Mode</label>
+			<div class="gf-form-select-wrapper max-width-15">
+				<select class="gf-form-input"
+					ng-model="ctrl.panel.xaxis.mode"
+					ng-options="v as k for (k, v) in ctrl.xAxisModes"
+					ng-change="ctrl.render()">
+				</select>
+			</div>
+		</div>
 	</div>
 
   <div class="section gf-form-group">