feature toggle series by alias!

src/app/panels/graphite/module.html

@@ -41,47 +41,6 @@
     </span>
   </div>
 
-  <form class="form-inline bordered histogram-options" ng-show="options">
-    <span>
-      <div class="checkbox">
-        <label class="small">
-          <input type="checkbox" ng-model="panel.bars" ng-checked="panel.bars" ng-change="render()">
-          Bars
-        </label>
-      </div>
-      <div class="checkbox">
-        <label class="small">
-          <input type="checkbox" ng-model="panel.lines" ng-checked="panel.lines" ng-change="render()">
-          Lines
-        </label>
-      </div>
-      <div class="checkbox">
-        <label class="small">
-          <input type="checkbox" ng-model="panel.stack" ng-checked="panel.stack" ng-change="render()">
-          Stack
-        </label>
-      </div>
-    </span>
-    <span ng-show="panel.stack">
-      <div class="checkbox">
-        <label style="white-space:nowrap" class="small">
-          <input type="checkbox"  ng-model="panel.percentage" ng-checked="panel.percentage" ng-change="render()">
-          Percent
-        </label>
-      </div>
-    </span>
-    <span>
-      <div class="checkbox">
-        <label class="small">
-          <input type="checkbox" ng-model="panel.legend" ng-checked="panel.legend" ng-change="render()">
-          Legend
-        </label>
-      </div>
-    </span>
-    <span>
-      <label class="small">Interval</label> <select ng-change="set_interval(panel.interval);get_data();" class="input-small" ng-model="panel.interval" ng-options="interval_label(time) for time in _.union([panel.interval],panel.intervals)"></select>
-    </span>
-  </form>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
 
   <div histogram-chart class="pointer histogram-chart" params="{{panel}}">
@@ -89,13 +48,14 @@
 
   <div class="grafana-legend-container">
     <span ng-show="panel.legend"
-          ng-class="{'pull-right': series.yaxis === 2}"
+          ng-class="{'pull-right': series.yaxis === 2, 'hidden-series': hiddenSeries[series.alias]}"
           ng-repeat='series in legend'
           class="histogram-legend">
         <i class='icon-circle' ng-style="{color: series.color}"></i>
         <span class='small histogram-legend-item'>
-          <span ng-if="panel.show_query">{{series.alias || series.query}}</span>
-          <span ng-if="!panel.show_query">{{series.alias}}</span>
+          <a ng-click="toggleSeries(series)">
+            {{series.alias}}
+          </a>
         </span>
     </span>
   </div>

src/app/panels/graphite/module.js

@@ -216,6 +216,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
       // Hide view options by default
       $scope.options = false;
       $scope.editor = {index: 1};
+      $scope.hiddenSeries = {};
 
       // Always show the query if an alias isn't set. Users can set an alias if the query is too
       // long
@@ -380,8 +381,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
 
           $scope.legend.push(seriesInfo);
 
-          data.hasSecondY = (target.yaxis || 1) > 1;
-
           data.push({
             info: seriesInfo,
             time_series: time_series,
@@ -443,9 +442,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
       $scope.$emit('render');
     };
 
+    $scope.toggleSeries = function(info) {
+      if ($scope.hiddenSeries[info.alias]) {
+        delete $scope.hiddenSeries[info.alias];
+        info.hidden = false;
+      }
+      else {
+        $scope.hiddenSeries[info.alias] = true;
+        info.hidden = true;
+      }
+
+      $scope.$emit('toggleLegend', info.alias);
+    };
+
     $scope.setEditorTabs = function(panelMeta) {
       $scope.editorTabs = _.union(['General'],_.pluck(panelMeta.fullEditorTabs,'title'));
-      return $scope.editorTabs;
     };
 
   });
@@ -456,11 +467,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
       template: '<div> </div>',
       link: function(scope, elem) {
         var data, plot;
+        var hiddenData = {};
 
         scope.$on('refresh',function() {
           scope.get_data();
         });
 
+        scope.$on('toggleLegend', function(e, alias) {
+          if (hiddenData[alias]) {
+            data.push(hiddenData[alias]);
+            delete hiddenData[alias];
+          }
+
+          render_panel(data);
+        });
+
         // Receive render events
         scope.$on('render',function(event, d) {
           data = d || data;
@@ -481,13 +502,20 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
           // IE doesn't work without this
           elem.css({height:scope.panel.height || scope.row.height});
 
-          // Populate from the query service
-          try {
-            _.each(data, function(series) {
-              series.label = series.info.alias;
-              series.color = series.info.color;
+          _.each(data, function(series) {
+            series.label = series.info.alias;
+            series.color = series.info.color;
+          });
+
+          _.each(_.keys(scope.hiddenSeries), function(seriesAlias) {
+            var dataSeries = _.find(data, function(series) {
+              return series.info.alias === seriesAlias;
             });
-          } catch(e) {return;}
+            if (dataSeries) {
+              hiddenData[dataSeries.info.alias] = dataSeries;
+              data = _.without(data, dataSeries);
+            }
+          });
 
           // Set barwidth based on specified interval
           var barwidth = kbn.interval_to_ms(scope.panel.interval);
@@ -599,7 +627,9 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
             data[i].data = _d;
           }
 
-          if (data.hasSecondY) {
+          var hasSecondY = _.findWhere(data, { yaxis: 2});
+
+          if (hasSecondY) {
             options.yaxes.push({
               position: 'right',
               show: scope.panel['y-axis'],

src/app/panels/graphite/styleEditor.html

@@ -51,15 +51,6 @@
 </div>
 
 <div class="editor-row">
-  <div class="section">
-    <h5>Header<h5>
-    <div class="editor-option">
-      <label class="small">Zoom</label><input type="checkbox" ng-model="panel.zoomlinks" ng-checked="panel.zoomlinks"  />
-    </div>
-    <div class="editor-option">
-      <label class="small">View</label><input type="checkbox" ng-model="panel.options" ng-checked="panel.options" />
-    </div>
-  </div>
   <div class="section">
     <h5>Legend<h5>
     <div class="editor-option">

src/vendor/bootstrap/less/grafana.less

@@ -64,6 +64,12 @@
   font-size: 12px;
 }
 
+.hidden-series {
+  a {
+    color: darken(@linkColor, 45%);
+  }
+}
+
 .full-edit-mode {
   //display: none;
 }