Graph: Define series color using regex rule, Closes #590

CHANGELOG.md

@@ -5,6 +5,7 @@
 - [Issue #1922](https://github.com/grafana/grafana/issues/1922). Templating: Specify multiple variable values via URL params.
 - [Issue #1888](https://github.com/grafana/grafana/issues/1144). Templating: Repeat panel or row for each selected template variable value
 - [Issue #1888](https://github.com/grafana/grafana/issues/1944). Dashboard: Custom Navigation links & dynamic links to related dashboards
+- [Issue #590](https://github.com/grafana/grafana/issues/590).   Graph: Define series color using regex rule
 
 **User or Organization admin**
 - [Issue #1899](https://github.com/grafana/grafana/issues/1899). Organization: You can now update the organization user role directly (without removing and readding the organization user).

package.json

@@ -40,7 +40,7 @@
     "karma-coverage": "0.3.1",
     "karma-coveralls": "0.1.5",
     "karma-expect": "~1.1.0",
-    "karma-mocha": "~0.1.4",
+    "karma-mocha": "~0.1.10",
     "karma-phantomjs-launcher": "0.1.4",
     "karma-requirejs": "0.2.2",
     "karma-script-launcher": "0.1.0",

public/app/components/timeSeries.js

@@ -53,6 +53,7 @@ function (_, kbn) {
       if (override.steppedLine !== void 0) { this.lines.steps = override.steppedLine; }
       if (override.zindex !== void 0) { this.zindex = override.zindex; }
       if (override.fillBelowTo !== void 0) { this.fillBelowTo = override.fillBelowTo; }
+      if (override.color !== void 0) { this.color = override.color; }
 
       if (override.yaxis !== void 0) {
         this.yaxis = override.yaxis;

public/app/panels/graph/legend.js

@@ -41,7 +41,7 @@ function (angular, app, _, kbn, $) {
           var popoverScope = scope.$new();
           popoverScope.series = seriesInfo;
           popoverSrv.show({
-            element: $(':first-child', el),
+            element: el,
             templateUrl:  'app/panels/graph/legend.popover.html',
             scope: popoverScope
           });

public/app/panels/graph/legend.popover.html

@@ -16,8 +16,7 @@
 	</div>
 
 	<div class="editor-row">
-		<i ng-repeat="color in colors"
+		<i ng-repeat="color in colors" class="pointer"
-			class="pointer"
 			ng-class="{'fa fa-circle-o': color === series.color,'fa fa-circle': color !== series.color}"
 			ng-style="{color:color}"
 			ng-click="changeSeriesColor(series, color);dismiss();">&nbsp;</i>

public/app/panels/graph/seriesOverridesCtrl.js

@@ -9,7 +9,7 @@ define([
   var module = angular.module('grafana.panels.graph', []);
   app.useModule(module);
 
-  module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv, $timeout) {
+  module.controller('SeriesOverridesCtrl', function($scope, $element, popoverSrv) {
     $scope.overrideMenu = [];
     $scope.currentOverrides = [];
     $scope.override = $scope.override || {};
@@ -29,6 +29,12 @@ define([
     };
 
     $scope.setOverride = function(item, subItem) {
+      // handle color overrides
+      if (item.propertyName === 'color') {
+        $scope.openColorSelector();
+        return;
+      }
+
       $scope.override[item.propertyName] = subItem.value;
 
       // automatically disable lines for this series and the fill bellow to series
@@ -38,10 +44,6 @@ define([
         $scope.addSeriesOverride({ alias: subItem.value, lines: false });
       }
 
-      if (item.propertyName === 'color') {
-        $scope.openColorSelector();
-      }
-
       $scope.updateCurrentOverrides();
       $scope.render();
     };

public/app/panels/graph/styleEditor.html

@@ -73,22 +73,23 @@
 					<li class="tight-form-item">
 						alias or regex
 					</li>
+
 					<li>
-						<input type="text"
+						<input type="text" ng-model="override.alias" bs-typeahead="getSeriesNames" ng-blur="render()" data-min-length=0 data-items=100 class="input-medium tight-form-input" >
-						ng-model="override.alias"
-						bs-typeahead="getSeriesNames"
-						ng-blur="render()"
-						data-min-length=0 data-items=100
-						class="input-medium tight-form-input" >
 					</li>
+
 					<li class="tight-form-item" ng-repeat="option in currentOverrides">
 						<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
-						{{option.name}}: {{option.value}}
+						<span ng-show="option.propertyName === 'color'">
+							Color: <i class="fa fa-circle" ng-style="{color:option.value}"></i>
+						</span>
+						<span ng-show="option.propertyName !== 'color'">
+							{{option.name}}: {{option.value}}
+						</span>
 					</li>
 
 					<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
 					</li>
-
 				</ul>
 				<div class="clearfix"></div>
 			</div>

public/app/services/popoverSrv.js

@@ -1,8 +1,9 @@
 define([
   'angular',
   'lodash',
+  'jquery',
 ],
-function (angular, _) {
+function (angular, _, $) {
   'use strict';
 
   var module = angular.module('grafana.services');
@@ -14,12 +15,16 @@ function (angular, _) {
     };
 
     this.show = function(options) {
-      var popover = options.element.data('popover');
+      var popover;
-      if (popover) {
+
-        popover.scope.$destroy();
+      // hide other popovers
-        popover.destroy();
+      $('.popover').each(function() {
-        return;
+        popover = $(this).prev().data('popover');
-      }
+        if (popover) {
+          popover.scope.$destroy();
+          popover.destroy();
+        }
+      });
 
       options.scope.dismiss = function() {
         popover = options.element.data('popover');
@@ -30,22 +35,24 @@ function (angular, _) {
       };
 
       this.getTemplate(options.templateUrl).then(function(result) {
-        var template = _.isString(result) ? result : result.data;
+        $timeout(function() {
+          var template = _.isString(result) ? result : result.data;
 
-        options.element.popover({
+          options.element.popover({
-          content: template,
+            content: template,
-          placement: options.placement || 'bottom',
+            placement: options.placement || 'bottom',
-          html: true
+            html: true
-        });
+          });
 
-        popover = options.element.data('popover');
+          popover = options.element.data('popover');
-        popover.hasContent = function () {
+          popover.hasContent = function () {
-          return template;
+            return template;
-        };
+          };
 
-        popover.toggle();
+          popover.toggle();
-        popover.scope = options.scope;
+          popover.scope = options.scope;
-        $compile(popover.$tip)(popover.scope);
+          $compile(popover.$tip)(popover.scope);
+        }, 1);
       });
     };
 

public/css/less/graph.less

@@ -114,7 +114,7 @@
 
   th {
     text-align: right;
-    padding: 5px 10px;
+    padding: 0px 10px 1px 0;
     font-weight: bold;
     color: @blue;
     font-size: 85%;

public/test/specs/seriesOverridesCtrl-specs.js

@@ -6,11 +6,15 @@ define([
 
   describe('SeriesOverridesCtrl', function() {
     var ctx = new helpers.ControllerTestContext();
+    var popoverSrv = {};
 
     beforeEach(module('grafana.services'));
     beforeEach(module('grafana.panels.graph'));
 
-    beforeEach(ctx.providePhase());
+    beforeEach(ctx.providePhase({
+      popoverSrv: popoverSrv
+    }));
+
     beforeEach(ctx.createControllerPhase('SeriesOverridesCtrl'));
     beforeEach(function() {
       ctx.scope.render = function() {};