Began work on per series style overrides, #425

src/app/directives/addGraphiteFunc.js

@@ -97,4 +97,4 @@ function (angular, app, _, $, gfunc) {
       };
     });
   }
-});
+});

src/app/directives/grafanaGraph.js

@@ -156,9 +156,11 @@ function (angular, $, kbn, moment, _) {
           for (var i = 0; i < data.length; i++) {
             var _d = data[i].getFlotPairs(panel.nullPointMode, panel.y_formats);
             data[i].data = _d;
+            data[0].lines = { show: false };
+            data[0].bars = { show: true  };
           }
 
-          if (panel.bars && data.length && data[0].info.timeStep) {
+          if (data.length && data[0].info.timeStep) {
             options.series.bars.barWidth = data[0].info.timeStep / 1.5;
           }
 

src/app/panels/graph/module.js

@@ -180,6 +180,8 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
       aliasColors: {},
       aliasYAxis: {},
+
+      seriesOverrides: [],
     };
 
     _.defaults($scope.panel,_d);
@@ -357,7 +359,53 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.render();
     };
 
+    $scope.addSeriesOverride = function() {
+      $scope.panel.seriesOverrides.push({});
+    };
+
     panelSrv.init($scope);
   });
 
+  angular
+    .module('grafana.directives')
+    .directive('seriesOverrideOption', function($compile) {
+      var template =
+          '<div class="dropdown"> ' +
+             '<a  class="dropdown-toggle" gf-dropdown="options" data-toggle="dropdown">' +
+                '<i class="icon-minus"></i></a>' +
+          '</div>';
+
+      return {
+        scope: true,
+        link: function($scope, elem, attrs) {
+          var $template = $(template);
+          elem.append($template);
+          var $link = $(elem).find('a');
+
+          $scope.options = $scope.$eval(attrs.options);
+          $scope.options.unshift(null);
+
+          $scope.options = _.map($scope.options, function(option, index) {
+            return {
+              text: option === null ? '<i class="icon-minus"></i>' : String(option),
+              value: option,
+              click: 'setValue(' + index + ')'
+            };
+          });
+
+          $scope.setValue = function(index) {
+            var value = $scope.options[index].value;
+            if (value === null) {
+              $link.html('<i class="icon-minus"></i>');
+            }
+            else {
+              $link.html(value);
+            }
+          };
+
+          $compile(elem.contents())($scope);
+        }
+      };
+    });
+
 });

src/app/panels/graph/styleEditor.html

@@ -1,5 +1,3 @@
-
-
 <div class="editor-row">
   <div class="section">
     <h5>Chart Options</h5>
@@ -64,3 +62,40 @@
     </div>
   </div>
 </div>
+
+<div class="editor-row">
+  <div class="section">
+		<h5>Series specific overrides</h5>
+		<table class="table table-striped">
+			<tr>
+				<th>Series alias/regex</th>
+				<th>Bars</th>
+				<th>Lines</th>
+				<th>Points</th>
+				<th>Fill</th>
+				<th>Width</th>
+				<th>Radius</th>
+				<th>Staircase</th>
+				<th>Stack</th>
+				<th>Y-axis</th>
+				<th>Z-index</th>
+				<th>Color</th>
+			</tr>
+			<tr ng-repeat="override in panel.seriesOverrides">
+				<td>
+					<input type="text" class="input input-medium">
+				</td>
+				<td>
+					<series-override-option data-options="[true, false]" data-attr="override.bars">
+					</series-override-option>
+				</td>
+				<td>
+					<series-override-option data-options="[1,2,3,4,5]">
+					</series-override-option>
+				</td>
+			</tr>
+		</table>
+		<button class="btn btn-success" ng-click="addSeriesOverride()">Add</button>
+
+	</div>
+</div>

src/app/services/panelSrv.js

@@ -104,7 +104,7 @@ function (angular, _) {
 
       // Post init phase
       $scope.fullscreen = false;
-      $scope.editor = { index: 1 };
+      $scope.editor = { index: 3 };
       if ($scope.panelMeta.fullEditorTabs) {
         $scope.editorTabs = _.pluck($scope.panelMeta.fullEditorTabs, 'title');
       }