feat(graph panel): more progress on graph panel and non time series data support

public/app/core/directives/metric_segment.js

@@ -170,7 +170,6 @@ function (_, $, coreModule) {
       },
       link: {
         pre: function postLink($scope, elem, attrs) {
-          var cachedOptions;
 
           $scope.valueToSegment = function(value) {
             var option = _.find($scope.options, {value: value});
@@ -190,20 +189,13 @@ function (_, $, coreModule) {
               });
               return $q.when(optionSegments);
             } else {
-              return $scope.getOptions().then(function(options) {
-                cachedOptions = options;
-                return _.map(options, function(option) {
-                  return uiSegmentSrv.newSegment({value: option.text});
-                });
-              });
+              return $scope.getOptions();
             }
           };
 
           $scope.onSegmentChange = function() {
-            var options = $scope.options || cachedOptions;
-
-            if (options) {
-              var option = _.find(options, {text: $scope.segment.value});
+            if ($scope.options) {
+              var option = _.find($scope.options, {text: $scope.segment.value});
               if (option && option.value !== $scope.property) {
                 $scope.property = option.value;
               } else if (attrs.custom !== 'false') {

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

@@ -30,8 +30,7 @@ export class AxesEditorCtrl {
     this.xAxisModes = {
       'Time': 'time',
       'Series': 'series',
-      'Table': 'table',
-      'Json': 'json'
+      'Custom': 'custom'
     };
 
     this.xAxisStatOptions =  [
@@ -55,12 +54,21 @@ export class AxesEditorCtrl {
   xAxisOptionChanged()  {
     switch (this.panel.xaxis.mode) {
       case 'time': {
+        this.panel.bars = false;
+        this.panel.lines = true;
+        this.panel.points = false;
+        this.panel.legend.show = true;
         this.panel.tooltip.shared = true;
         this.panel.xaxis.values = [];
         this.panelCtrl.onDataReceived(this.panelCtrl.dataList);
         break;
       }
       case 'series': {
+        this.panel.bars = true;
+        this.panel.lines = false;
+        this.panel.points = false;
+        this.panel.stack = false;
+        this.panel.legend.show = false;
         this.panel.tooltip.shared = false;
         this.panelCtrl.processor.validateXAxisSeriesValue();
         this.panelCtrl.onDataReceived(this.panelCtrl.dataList);

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

@@ -11,20 +11,26 @@ export class DataProcessor {
   }
 
   getSeriesList(options) {
+    if (!options.dataList || options.dataList.length === 0) {
+      return [];
+    }
+
+    // auto detect xaxis mode
+    var firstItem;
+    if (options.dataList && options.dataList.length > 0) {
+      firstItem = options.dataList[0];
+      if (firstItem.type === 'docs') {
+        this.panel.xaxis.mode = 'custom';
+      }
+    }
 
     switch (this.panel.xaxis.mode) {
       case 'series':
       case 'time': {
         return options.dataList.map(this.timeSeriesHandler.bind(this));
       }
-      case 'table': {
-         // Table panel uses only first enabled target, so we can use dataList[0]
-         // dataList.splice(1, dataList.length - 1);
-         // dataHandler = this.tableHandler;
-        break;
-      }
-      case 'json': {
-        break;
+      case 'custom': {
+        return this.customHandler(firstItem);
       }
     }
   }
@@ -56,6 +62,11 @@ export class DataProcessor {
     return this.seriesHandler(seriesData, index, datapoints, alias);
   }
 
+  customHandler(dataItem) {
+    console.log('custom', dataItem);
+    return [];
+  }
+
   tableHandler(seriesData, index) {
     var xColumnIndex = Number(this.panel.xaxis.columnIndex);
     var valueColumnIndex = Number(this.panel.xaxis.valueColumnIndex);

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

@@ -262,9 +262,6 @@ function (angular, $, moment, _, kbn, GraphTooltip, thresholdManExports) {
             if (data.length) {
               options.series.bars.barWidth = 0.7;
               options.series.bars.align = 'center';
-              options.series.bars.show = true;
-              options.series.points.show = false;
-              options.series.lines.show = false;
             }
 
             addXSeriesAxis(options);