legend aligns with left or right y axis depending on axis afinity

src/app/panels/graphite/editor.html

@@ -4,6 +4,11 @@
     <div class="grafana-target-inner-wrapper">
     <div class="grafana-target-inner-wrapper">
       <div class="grafana-target-inner">
       <div class="grafana-target-inner">
         <ul class="grafana-target-controls">
         <ul class="grafana-target-controls">
+          <li ng-if="target.yaxis">
+            <a class="pointer" ng-click="setYAxis()">
+              y&sup2;
+            </a>
+          </li>
           <li>
           <li>
             <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
             <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
               <i class="icon-pencil"></i>
               <i class="icon-pencil"></i>

src/app/panels/graphite/graphiteSrv.js

@@ -95,14 +95,14 @@ function ($, RQ, _, config) {
     var found = targets[0];
     var found = targets[0];
 
 
     for (var i = 0; i < targets.length; i++) {
     for (var i = 0; i < targets.length; i++) {
-      if (targets[i].target == graphiteTargetStr) {
+      if (targets[i].target === graphiteTargetStr) {
         found = targets[i];
         found = targets[i];
         break;
         break;
       }
       }
       if(targets[i].target.match("'" + graphiteTargetStr + "'")) {
       if(targets[i].target.match("'" + graphiteTargetStr + "'")) {
         found = targets[i];
         found = targets[i];
       }
       }
-    };
+    }
 
 
     return found;
     return found;
   }
   }

src/app/panels/graphite/module.html

@@ -88,7 +88,10 @@
   </div>
   </div>
 
 
   <div class="grafana-legend-container">
   <div class="grafana-legend-container">
-    <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
+    <span ng-show="panel.legend"
+          ng-class="{'pull-right': series.yaxis === 2}"
+          ng-repeat='series in legend'
+          class="histogram-legend">
         <i class='icon-circle' ng-style="{color: series.color}"></i>
         <i class='icon-circle' ng-style="{color: series.color}"></i>
         <span class='small histogram-legend-item'>
         <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 || series.query}}</span>

src/vendor/bootstrap/less/grafana.less

@@ -84,10 +84,13 @@
 }
 }
 
 
 .grafana-legend-container {
 .grafana-legend-container {
-  text-align: center;
+  margin: 4px 15px;
+  text-align: left;
 }
 }
 
 
 .panel-full-edit-tabs {
 .panel-full-edit-tabs {
+  margin-top: 10px;
+
   .nav-tabs > li > a {
   .nav-tabs > li > a {
     line-height: 15px;
     line-height: 15px;
     padding-top: 6px;
     padding-top: 6px;
@@ -159,10 +162,11 @@
 }
 }
 
 
 .grafana-target-controls {
 .grafana-target-controls {
-  width: 90px;
+  width: 120px;
   float: right;
   float: right;
   list-style: none;
   list-style: none;
   margin: 0;
   margin: 0;
+  text-align: right;
 
 
   >li {
   >li {
     display: inline-block;
     display: inline-block;