From 2dac9758053f514a7160fa14d35a04ae18de5b9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Wed, 13 May 2015 21:34:50 +0200
Subject: [PATCH] began work on color by regex / series override for color,
 #590

---
 .../app/panels/graph/seriesOverridesCtrl.js   | 28 +++++++++++++++++--
 public/app/panels/graph/styleEditor.html      |  4 ++-
 public/app/partials/colorpicker.html          | 11 ++++++++
 public/app/services/popoverSrv.js             | 10 ++++++-
 public/css/less/graph.less                    |  1 +
 5 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 public/app/partials/colorpicker.html

diff --git a/public/app/panels/graph/seriesOverridesCtrl.js b/public/app/panels/graph/seriesOverridesCtrl.js
index 80fb2ead6c2..6105402ce05 100644
--- a/public/app/panels/graph/seriesOverridesCtrl.js
+++ b/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();
diff --git a/public/app/panels/graph/styleEditor.html b/public/app/panels/graph/styleEditor.html
index a5d82bba262..d646b766f70 100644
--- a/public/app/panels/graph/styleEditor.html
+++ b/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>
diff --git a/public/app/partials/colorpicker.html b/public/app/partials/colorpicker.html
new file mode 100644
index 00000000000..f687b740bbf
--- /dev/null
+++ b/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>
+
diff --git a/public/app/services/popoverSrv.js b/public/app/services/popoverSrv.js
index a1e60525e2d..0fb94b06ebe 100644
--- a/public/app/services/popoverSrv.js
+++ b/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
         });
 
diff --git a/public/css/less/graph.less b/public/css/less/graph.less
index a56fe968017..1b29816fa12 100644
--- a/public/css/less/graph.less
+++ b/public/css/less/graph.less
@@ -164,6 +164,7 @@
 
 .graph-legend-popover {
   width: 200px;
+  min-height: 100px;
   label {
     display: inline-block;
   }