feature: assign second y axis to graphite target

src/app/controllers/graphiteTarget.js

@@ -210,6 +210,21 @@ function (angular, _, config, graphiteFuncs, Parser) {
       $scope.targetChanged();
     };
 
+    $scope.setYAxis = function() {
+      if ($scope.target.yaxis) {
+        delete $scope.target.yaxis;
+      } else {
+        $scope.target.yaxis = 2;
+      }
+
+      $scope.get_data();
+    };
+
+    $scope.duplicate = function() {
+      var clone = angular.copy($scope.target);
+      $scope.panel.targets.push(clone);
+    };
+
   });
 
   module.directive('focusMe', function($timeout, $parse) {

src/app/panels/graphite/editor.html

@@ -9,10 +9,27 @@
               <i class="icon-pencil"></i>
             </a>
           </li>
-          <li>
+          <li class="dropdown">
-            <a class="pointer" tabindex="1" ng-click="enableTextEditor()">
+            <a  class="pointer dropdown-toggle"
+                data-toggle="dropdown"
+                tabindex="1"
+                ng-click="doSomethign()">
               <i class="icon-cog"></i>
             </a>
+            <ul class="dropdown-menu pull-right" role="menu">
+              <li role="menuitem">
+                <a  tabindex="1"
+                    ng-click="duplicate()">
+                  Duplicate
+                </a>
+              </li>
+              <li role="menuitem">
+                <a  tabindex="1"
+                    ng-click="setYAxis()">
+                  Right Y-axis
+                </a>
+              </li>
+            </ul>
           </li>
           <li>
             <a class="pointer" tabindex="1" ng-click="removeTarget(target)">

src/app/panels/graphite/graphiteSrv.js

@@ -1,9 +1,10 @@
 define([
   'jquery',
   'rq',
+  'underscore',
   'config'
 ],
-function ($, RQ, config) {
+function ($, RQ, _, config) {
   'use strict';
 
 
@@ -90,7 +91,24 @@ function ($, RQ, config) {
     });
   }
 
+  function match(targets, graphiteTargetStr) {
+    var found = targets[0];
+
+    for (var i = 0; i < targets.length; i++) {
+      if (targets[i].target == graphiteTargetStr) {
+        found = targets[i];
+        break;
+      }
+      if(targets[i].target.match("'" + graphiteTargetStr + "'")) {
+        found = targets[i];
+      }
+    };
+
+    return found;
+  }
+
   return {
-    loadGraphiteData: loadGraphiteData
+    loadGraphiteData: loadGraphiteData,
+    match: match
   };
 });

src/app/panels/graphite/module.js

@@ -211,7 +211,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
 
 
     $scope.init = function() {
-      //$scope.openConfigureModal({preventDefault: function() {}, stopPropagation: function() {} });
+      $scope.openConfigureModal({preventDefault: function() {}, stopPropagation: function() {} });
 
       // Hide view options by default
       $scope.options = false;
@@ -369,17 +369,23 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
             }
           });
 
+          var target = graphiteSrv.match($scope.panel.targets, targetData.target);
+
           var seriesInfo = {
             alias: targetData.target,
             color: $scope.colors[data.length],
-            enable: true
+            enable: true,
+            yaxis: target.yaxis || 1
           };
 
           $scope.legend.push(seriesInfo);
 
+          data.hasSecondY = (target.yaxis || 1) > 1;
+
           data.push({
             info: seriesInfo,
-            time_series: time_series
+            time_series: time_series,
+            yaxis: target.yaxis || 1
           });
 
         });
@@ -468,6 +474,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
           if (!data) {
             return;
           }
+
           // IE doesn't work without this
           elem.css({height:scope.panel.height || scope.row.height});
 
@@ -512,11 +519,14 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
               },
               shadowSize: 1
             },
-            yaxis: {
+            yaxes: [
-              show: scope.panel['y-axis'],
+              {
-              min: scope.panel.grid.min,
+                position: 'left',
-              max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
+                show: scope.panel['y-axis'],
-            },
+                min: scope.panel.grid.min,
+                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
+              }
+            ],
             xaxis: {
               timezone: scope.panel.timezone,
               show: scope.panel['x-axis'],
@@ -586,6 +596,15 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
             data[i].data = _d;
           }
 
+          if (data.hasSecondY) {
+            options.yaxes.push({
+              position: 'right',
+              show: scope.panel['y-axis'],
+              min: scope.panel.grid.min,
+              max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
+            });
+          }
+
          /* var totalDataPoints = _.reduce(data, function(num, series) { return series.data.length + num; }, 0);
           console.log('Datapoints[0] count:', data[0].data.length);
           console.log('Datapoints.Total count:', totalDataPoints);*/