began work on color by regex / series override for color, #590

public/app/panels/graph/seriesOverridesCtrl.js

@@ -1,14 +1,15 @@
 define([
   'angular',
+  'jquery',
   'app',
   'lodash',
-], function(angular, app, _) {
+], function(angular, jquery, app, _) {
   'use strict';
 
   var module = angular.module('grafana.panels.graph', []);
   app.useModule(module);
 
-  module.controller('SeriesOverridesCtrl', function($scope) {
+  module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv, $timeout) {
     $scope.overrideMenu = [];
     $scope.currentOverrides = [];
     $scope.override = $scope.override || {};
@@ -37,10 +38,32 @@ define([
         $scope.addSeriesOverride({ alias: subItem.value, lines: false });
       }
 
+      if (item.propertyName === 'color') {
+        $scope.openColorSelector();
+      }
+
       $scope.updateCurrentOverrides();
       $scope.render();
     };
 
+    $scope.colorSelected = function(color) {
+      $scope.override['color'] = color;
+      $scope.updateCurrentOverrides();
+      $scope.render();
+    };
+
+    $scope.openColorSelector = function() {
+      var popoverScope = $scope.$new();
+      popoverScope.colorSelected = $scope.colorSelected;
+
+      popoverSrv.show({
+        element: $element.find(".dropdown"),
+        placement: 'top',
+        templateUrl:  'app/partials/colorpicker.html',
+        scope: popoverScope
+      });
+    };
+
     $scope.removeOverride = function(option) {
       delete $scope.override[option.propertyName];
       $scope.updateCurrentOverrides();
@@ -75,6 +98,7 @@ define([
     $scope.addOverrideOption('Points', 'points', [true, false]);
     $scope.addOverrideOption('Points Radius', 'pointradius', [1,2,3,4,5]);
     $scope.addOverrideOption('Stack', 'stack', [true, false, 2, 3, 4, 5]);
+    $scope.addOverrideOption('Color', 'color', ['change']);
     $scope.addOverrideOption('Y-axis', 'yaxis', [1, 2]);
     $scope.addOverrideOption('Z-index', 'zindex', [-1,-2,-3,0,1,2,3]);
     $scope.updateCurrentOverrides();

public/app/panels/graph/styleEditor.html

@@ -94,6 +94,8 @@
 			</div>
 		</div>
 
-		<button class="btn btn-success" style="margin-top: 20px" ng-click="addSeriesOverride()">Add series override rule</button>
+		<button class="btn btn-inverse" style="margin-top: 20px" ng-click="addSeriesOverride()">
+			Add series specific option
+		</button>
 	</div>
 </div>

public/app/partials/colorpicker.html

@@ -0,0 +1,11 @@
+<div class="graph-legend-popover">
+	<a class="close" ng-click="dismiss();" href="">×</a>
+
+	<div class="editor-row">
+		<i ng-repeat="color in colors" class="pointer fa fa-circle"
+			ng-style="{color:color}"
+			ng-click="colorSelected(color);dismiss();">&nbsp;</i>
+	</div>
+
+</div>
+

public/app/services/popoverSrv.js

@@ -21,12 +21,20 @@ function (angular, _) {
         return;
       }
 
+      options.scope.dismiss = function() {
+        popover = options.element.data('popover');
+        if (popover) {
+          popover.destroy();
+        }
+        options.scope.$destroy();
+      };
+
       this.getTemplate(options.templateUrl).then(function(result) {
         var template = _.isString(result) ? result : result.data;
 
         options.element.popover({
           content: template,
-          placement: 'bottom',
+          placement: options.placement || 'bottom',
           html: true
         });
 

public/css/less/graph.less

@@ -164,6 +164,7 @@
 
 .graph-legend-popover {
   width: 200px;
+  min-height: 100px;
   label {
     display: inline-block;
   }