Merge branch 'color_by_regex'

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"
-			class="pointer"
+		<i ng-repeat="color in colors" 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

 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) {
     $scope.overrideMenu = [];
     $scope.currentOverrides = [];
     $scope.override = $scope.override || {};
@@ -28,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
@@ -41,6 +48,24 @@ define([
       $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 +100,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

@@ -73,27 +73,30 @@
 					<li class="tight-form-item">
 						alias or regex
 					</li>
+
 					<li>
-						<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" >
+						<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" >
 					</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>
 		</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

+<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

 define([
   'angular',
   'lodash',
+  'jquery',
 ],
-function (angular, _) {
+function (angular, _, $) {
   'use strict';
 
   var module = angular.module('grafana.services');
@@ -14,30 +15,44 @@ function (angular, _) {
     };
 
     this.show = function(options) {
-      var popover = options.element.data('popover');
-      if (popover) {
-        popover.scope.$destroy();
-        popover.destroy();
-        return;
-      }
-
-      this.getTemplate(options.templateUrl).then(function(result) {
-        var template = _.isString(result) ? result : result.data;
-
-        options.element.popover({
-          content: template,
-          placement: 'bottom',
-          html: true
-        });
+      var popover;
+
+      // hide other popovers
+      $('.popover').each(function() {
+        popover = $(this).prev().data('popover');
+        if (popover) {
+          popover.scope.$destroy();
+          popover.destroy();
+        }
+      });
 
+      options.scope.dismiss = function() {
         popover = options.element.data('popover');
-        popover.hasContent = function () {
-          return template;
-        };
+        if (popover) {
+          popover.destroy();
+        }
+        options.scope.$destroy();
+      };
 
-        popover.toggle();
-        popover.scope = options.scope;
-        $compile(popover.$tip)(popover.scope);
+      this.getTemplate(options.templateUrl).then(function(result) {
+        $timeout(function() {
+          var template = _.isString(result) ? result : result.data;
+
+          options.element.popover({
+            content: template,
+            placement: options.placement || 'bottom',
+            html: true
+          });
+
+          popover = options.element.data('popover');
+          popover.hasContent = function () {
+            return template;
+          };
+
+          popover.toggle();
+          popover.scope = options.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%;
@@ -164,6 +164,7 @@
 
 .graph-legend-popover {
   width: 200px;
+  min-height: 100px;
   label {
     display: inline-block;
   }

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() {};