Graph panel: add value option (min, max, avg, etc), issue #5812.

public/app/plugins/panel/graph/graph.js

@@ -227,7 +227,17 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           };
 
           if (panel.xaxis.mode === 'histogram') {
-            histogramData = formatToHistogram(data, _.last);
+            // Format to histogram
+
+            var getValueFuncs = {
+              'min': _.min,
+              'max': _.max,
+              'avg': seriesAvg,
+              'current': _.last,
+              'total': seriesSum
+            };
+
+            histogramData = formatToHistogram(data, getValueFuncs[panel.xaxis.histogramValue]);
 
             if (histogramData.length && histogramData[0].ticks.length) {
               // options.series.bars.barWidth = histogramData[0].ticks.length / 1.5;
@@ -306,6 +316,20 @@ function (angular, $, moment, _, kbn, GraphTooltip) {
           return histogram;
         }
 
+        function seriesSum(values) {
+          return _.reduce(values, function(sum, num) {
+            return sum + num;
+          });
+        }
+
+        function seriesAvg(values) {
+          if (values.length) {
+            return seriesSum(values) / values.length;
+          } else {
+            return null;
+          }
+        }
+
         function translateFillOption(fill) {
           return fill === 0 ? 0.001 : fill/10;
         }

public/app/plugins/panel/graph/module.ts

@@ -21,6 +21,7 @@ class GraphCtrl extends MetricsPanelCtrl {
   logScales: any;
   unitFormats: any;
   xAxisModes: any;
+  xAxisHistogramValues: any;
   annotationsPromise: any;
   datapointsCount: number;
   datapointsOutside: boolean;
@@ -52,7 +53,8 @@ class GraphCtrl extends MetricsPanelCtrl {
     ],
     xaxis: {
       show: true,
-      mode: 'timeseries'
+      mode: 'timeseries',
+      histogramValue: 'avg'
     },
     grid          : {
       threshold1: null,
@@ -116,6 +118,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     _.defaults(this.panel.tooltip, this.panelDefaults.tooltip);
     _.defaults(this.panel.grid, this.panelDefaults.grid);
     _.defaults(this.panel.legend, this.panelDefaults.legend);
+    _.defaults(this.panel.xaxis, this.panelDefaults.xaxis);
 
     this.colors = $scope.$root.colors;
 
@@ -145,6 +148,8 @@ class GraphCtrl extends MetricsPanelCtrl {
       'Time Series': 'timeseries',
       'Histogram': 'histogram'
     };
+
+    this.xAxisHistogramValues = ['min', 'max', 'avg', 'current', 'total'];
   }
 
   onInitPanelActions(actions) {

public/app/plugins/panel/graph/tab_axes.html

@@ -51,6 +51,16 @@
 				</select>
 			</div>
 		</div>
+		<div class="gf-form" ng-if="ctrl.panel.xaxis.mode==='histogram'">
+			<label class="gf-form-label width-5">Value</label>
+			<div class="gf-form-select-wrapper max-width-15">
+				<select class="gf-form-input"
+					ng-model="ctrl.panel.xaxis.histogramValue"
+					ng-options="v for v in ctrl.xAxisHistogramValues"
+					ng-change="ctrl.render()">
+				</select>
+			</div>
+		</div>
 	</div>
 
   <div class="section gf-form-group">