From af8fec941c372f637ed2a5ed435698b95566254d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Tue, 23 Sep 2014 08:18:59 +0200
Subject: [PATCH] Graph: Fix for series draw order not being the same after
 hiding/unhiding series, Fixes #847

---
 CHANGELOG.md                         |  5 +++++
 src/app/directives/grafanaGraph.js   | 26 ++++++--------------------
 src/test/specs/grafanaGraph-specs.js | 13 +++++++++++++
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8d28e9223f0..79bc9c23752 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+# 1.9.0 (unreleased)
+
+**Fixes**
+- [Issue #847](https://github.com/grafana/grafana/issues/847). Graph: Fix for series draw order not being the same after hiding/unhiding series
+
 # 1.8.0 (2014-09-22)
 
 Read this [blog post](http://grafana.org/blog/2014/09/11/grafana-1-8-0-rc1-released.html) for an overview of all improvements.
diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js
index 15f1556aa62..a2987213cb4 100755
--- a/src/app/directives/grafanaGraph.js
+++ b/src/app/directives/grafanaGraph.js
@@ -16,7 +16,6 @@ function (angular, $, kbn, moment, _) {
       template: '<div> </div>',
       link: function(scope, elem) {
         var data, annotations;
-        var hiddenData = {};
         var dashboard = scope.dashboard;
         var legendSideLastValue = null;
 
@@ -24,14 +23,7 @@ function (angular, $, kbn, moment, _) {
           scope.get_data();
         });
 
-        scope.$on('toggleLegend', function(e, series) {
-          _.each(series, function(serie) {
-            if (hiddenData[serie.alias]) {
-              data.push(hiddenData[serie.alias]);
-              delete hiddenData[serie.alias];
-            }
-          });
-
+        scope.$on('toggleLegend', function() {
           render_panel();
         });
 
@@ -95,17 +87,6 @@ function (angular, $, kbn, moment, _) {
           }
 
           var panel = scope.panel;
-
-          _.each(_.keys(scope.hiddenSeries), function(seriesAlias) {
-            var dataSeries = _.find(data, function(series) {
-              return series.info.alias === seriesAlias;
-            });
-            if (dataSeries) {
-              hiddenData[dataSeries.info.alias] = dataSeries;
-              data = _.without(data, dataSeries);
-            }
-          });
-
           var stack = panel.stack ? true : null;
 
           // Populate element
@@ -156,6 +137,11 @@ function (angular, $, kbn, moment, _) {
             var series = data[i];
             series.applySeriesOverrides(panel.seriesOverrides);
             series.data = series.getFlotPairs(panel.nullPointMode, panel.y_formats);
+            // if hidden remove points and disable stack
+            if (scope.hiddenSeries[series.info.alias]) {
+              series.data = [];
+              series.stack = false;
+            }
           }
 
           if (data.length && data[0].info.timeStep) {
diff --git a/src/test/specs/grafanaGraph-specs.js b/src/test/specs/grafanaGraph-specs.js
index 1b86ee9073d..faf19119d27 100644
--- a/src/test/specs/grafanaGraph-specs.js
+++ b/src/test/specs/grafanaGraph-specs.js
@@ -29,6 +29,7 @@ define([
               y_formats: [],
               seriesOverrides: []
             };
+            scope.hiddenSeries = {};
             scope.dashboard = { timezone: 'browser' };
             scope.range = {
               from: new Date('2014-08-09 10:00:00'),
@@ -145,6 +146,18 @@ define([
       });
     });
 
+    graphScenario('when series is hidden', function(ctx) {
+      ctx.setup(function(scope) {
+        scope.hiddenSeries = {'series2': true};
+      });
+
+      it('should remove datapoints and disable stack', function() {
+        expect(ctx.plotData[0].info.alias).to.be('series1');
+        expect(ctx.plotData[1].data.length).to.be(0);
+        expect(ctx.plotData[1].stack).to.be(false);
+      });
+    });
+
   });
 });