Graph: toggle legend on/off from panel menu, #941, no keyboard shortcut yet, but could come

src/app/directives/panelMenu.js

@@ -97,7 +97,7 @@ function (angular, $, _) {
             $menu = $(menuTemplate);
             $menu.css('left', menuLeftPos);
             $menu.mouseleave(function() {
-              //dismiss(1000);
+              dismiss(1000);
             });
 
             menuScope = $scope.$new();
@@ -111,7 +111,7 @@ function (angular, $, _) {
             $(".panel-container").removeClass('panel-highlight');
             $panelContainer.toggleClass('panel-highlight');
 
-            //dismiss(2500);
+            dismiss(2500);
           };
 
           if ($scope.panelMeta.titlePos && $scope.panel.title) {

src/app/panels/graph/module.js

@@ -37,6 +37,8 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
     $scope.panelMeta.addEditorTab('Axes & Grid', 'app/panels/graph/axisEditor.html');
     $scope.panelMeta.addEditorTab('Display Styles', 'app/panels/graph/styleEditor.html');
 
+    $scope.panelMeta.addExtendedMenuItem('Toggle legend', '', 'toggleLegend()');
+
     // Set and populate defaults
     var _d = {
       // datasource name, null = default datasource
@@ -143,14 +145,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
           $scope.panelMeta.loading = false;
           $scope.panelMeta.error = err.message || "Timeseries data request error";
           $scope.inspector.error = err;
-          $scope.legend = [];
           $scope.render([]);
         });
     };
 
     $scope.dataHandler = function(results) {
       $scope.panelMeta.loading = false;
-      $scope.legend = [];
 
       // png renderer returns just a url
       if (_.isString(results)) {
@@ -180,16 +180,9 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
       var alias = seriesData.target;
       var color = $scope.panel.aliasColors[alias] || $rootScope.colors[index];
 
-      var seriesInfo = {
-        alias: alias,
-        color: color,
-      };
-
-      $scope.legend.push(seriesInfo);
-
       var series = new TimeSeries({
         datapoints: datapoints,
-        info: seriesInfo,
+        info: {alias: alias, color: color},
       });
 
       if (datapoints && datapoints.length > 0) {
@@ -288,6 +281,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
       $scope.render();
     };
 
+    // Called from panel menu
+    $scope.toggleLegend = function() {
+      $scope.panel.legend.show = !$scope.panel.legend.show;
+      $scope.get_data();
+    };
+
     panelSrv.init($scope);
   });
 

src/app/services/dashboard/dashboardKeyBindings.js

@@ -51,8 +51,7 @@ function(angular, $) {
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+l', function() {
-        scope.dashboard.hideAllLegends = !scope.dashboard.hideAllLegends;
-        scope.dashboard.emit_refresh('refresh');
+        scope.$broadcast('toggle-all-legends');
       }, { inputDisabled: true });
 
       keyboardManager.bind('ctrl+h', function() {

src/app/services/dashboard/dashboardSrv.js

@@ -35,6 +35,7 @@ function (angular, $, kbn, _, moment) {
       this.annotations = this._ensureListExist(data.annotations);
       this.refresh = data.refresh;
       this.version = data.version || 0;
+      this.hideAllLegends = data.hideAllLegends || false;
 
       if (this.nav.length === 0) {
         this.nav.push({ type: 'timepicker' });

src/test/specs/graph-ctrl-specs.js

@@ -27,11 +27,6 @@ define([
         ctx.scope.$digest();
       });
 
-      it('should build legend model', function() {
-        expect(ctx.scope.legend[0].alias).to.be('test.cpu1');
-        expect(ctx.scope.legend[1].alias).to.be('test.cpu2');
-      });
-
       it('should send time series to render', function() {
         var data = ctx.scope.render.getCall(0).args[0];
         expect(data.length).to.be(2);
@@ -44,10 +39,6 @@ define([
           ctx.scope.$digest();
         });
 
-        it('should clear the legend data', function() {
-          expect(ctx.scope.legend).to.eql([]);
-        });
-
       });
 
     });