fixed persistance of alias color changes

src/app/panels/graphite/funcEditor.html

@@ -10,7 +10,6 @@
     </a>
     &nbsp;&nbsp;
     <a class="close" ng-click="dismiss();" href="">×</a>
-
   </div>
 
   <div class="editor-row" ng-if="func.def.params.length">

src/app/panels/graphite/legend.html

@@ -0,0 +1,32 @@
+<span ng-show="panel.legend"
+      ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
+      ng-repeat='series in legend'
+      class="histogram-legend">
+    <i  class='icon-circle pointer'
+        ng-style="{color: series.color}"
+        bs-popover="'colorPopup.html'"
+        data-unique="1"
+        data-placement="bottomLeft">
+    </i>
+    <span class='small histogram-legend-item'>
+      <a ng-click="toggleSeries(series)">
+        {{series.alias}}
+      </a>
+    </span>
+</span>
+
+<script type="text/ng-template" id="colorPopup.html">
+  <div style="width: 150px;">
+    <div>
+      <a class="close pull-right" ng-click="dismiss();" href="">×</a>
+      <div class="clearfix"></div>
+    </div>
+
+    <i ng-repeat="color in colors"
+      class="pointer"
+      ng-class="{'icon-circle-blank': color === series.color,'icon-circle': color !== series.color}"
+      ng-style="{color:color}"
+      ng-click="changeSeriesColor(series, color);dismiss();">
+    </i>
+</div>
+</script>

src/app/panels/graphite/module.html

@@ -50,23 +50,8 @@
   <div histogram-chart class="pointer histogram-chart" params="{{panel}}">
   </div>
 
-  <div class="grafana-legend-container">
-    <span ng-show="panel.legend"
-          ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
-          ng-repeat='series in legend'
-          class="histogram-legend">
-        <i  class='icon-circle pointer'
-            ng-style="{color: series.color}"
-            bs-popover="'app/panels/graphite/seriesColor.html'"
-            data-unique="1"
-            data-placement="bottomLeft">
-        </i>
-        <span class='small histogram-legend-item'>
-          <a ng-click="toggleSeries(series)">
-            {{series.alias}}
-          </a>
-        </span>
-    </span>
+  <div ng-if="panel.legend" class="grafana-legend-container">
+    <div ng-include="'app/panels/graphite/legend.html'"></div>
   </div>
 
   <div class="panel-full-edit-tabs" ng-if="inEditMode">

src/app/panels/graphite/module.js

@@ -193,14 +193,15 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
        * zerofill:: Improves the accuracy of line charts at a small performance cost.
        */
       zerofill      : true,
-      /** @scratch /panels/histogram/3
-       * derivative:: Show each point on the x-axis as the change from the previous point
-       */
+
       tooltip       : {
         value_type: 'cumulative',
         query_as_alias: true
       },
-      targets: []
+
+      targets: [],
+
+      aliasColors: {}
     };
 
     _.defaults($scope.panel,_d);
@@ -217,7 +218,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.editor = {index: 1};
       $scope.editorTabs = _.union(['General'],_.pluck($scope.panelMeta.fullEditorTabs,'title'));
       $scope.hiddenSeries = {};
-      $scope.aliasToColor = {};
       // Always show the query if an alias isn't set. Users can set an alias if the query is too
       // long
       $scope.panel.tooltip.query_as_alias = true;
@@ -335,9 +335,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
         throw { message: 'no data in response from graphite' };
       }
 
-      //console.log('Data from graphite:', results);
-      //console.log('nr datapoints from graphite: %d', results[0].datapoints.length);
-
       var tsOpts = {
         interval: interval,
         start_date: range && range.from,
@@ -356,7 +353,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
 
         var target = graphiteSrv.match($scope.panel.targets, targetData.target);
         var alias = targetData.target;
-        var color = $scope.aliasToColor[alias] || $scope.colors[data.length];
+        var color = $scope.panel.aliasColors[alias] || $scope.colors[data.length];
 
         var seriesInfo = {
           alias: alias,
@@ -438,6 +435,12 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       $scope.$emit('render');
     };
 
+    $scope.changeSeriesColor = function(series, color) {
+      series.color = color;
+      $scope.panel.aliasColors[series.alias] = series.color;
+      $scope.render();
+    }
+
     $scope.toggleFullscreen = function(evt) {
       if ($scope.showFullscreen) {
         $rootScope.$emit('panel-fullscreen-exit');

src/app/panels/graphite/seriesColor.html

@@ -1,8 +0,0 @@
-<div style="width: 150px;">
-  <i ng-repeat="color in colors"
-    class="pointer"
-    ng-class="{'icon-circle-blank': color === series.color,'icon-circle': color !== series.color}"
-    ng-style="{color:color}"
-    ng-click="series.color = color;render();aliasToColor[series.alias] = color;">
-  </i>
-</div>