added yaxis label

src/app/controllers/search.js

@@ -16,7 +16,7 @@ function (angular, _, config, $) {
       $scope.giveSearchFocus = 0;
       $scope.selectedIndex = null;
 
-      keyboardManager.bind('s', function() {
+      keyboardManager.bind('shift+s', function() {
         $element.find('.dropdown').addClass('open');
         $scope.giveSearchFocus += 1;
       });

src/app/panels/graphite/axisEditor.html

@@ -0,0 +1,14 @@
+<div class="editor-row">
+
+  <div class="editor-row">
+    <div class="editor-option">
+      <label class="small">Left y-axis label</label>
+      <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-large" ng-model="panel.leftYAxisLabel">
+    </div>
+    <div class="editor-option">
+      <label class="small">Right y-axis label</label>
+      <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-large" ng-model="panel.rightYAxisLabel">
+    </div>
+  </div>
+
+</div>

src/app/panels/graphite/editor.html

@@ -1,17 +1,15 @@
 <div class="editor-row">
 
-	<h5>Graphite Targets</h5>
+	<div ng-repeat="target in panel.targets">
 
-  	<div ng-repeat="target in panel.targets">
-
-  	<div class="row-fluid">
-  		<div class="span12">
-    		<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" />
-    		<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
-    	</div>
-    </div>
+	<div class="row-fluid">
+		<div class="span12">
+  		<input type="text" ng-model="target.target" class="input-large" style="width:95%" ng-model-onblur ng-change="get_data()" bs-typeahead="typeAheadSource" ata-min-length=0 />
+  		<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="position: relative; top: -5px; left: 5px;"></i>
+  	</div>
+  </div>
   </div>
 
-  <button ng-click="add_target(panel.target)" class="btn btn-success" ng-show="editor.index == 1">Add target</button>
+  <a ng-click="add_target(panel.target)"  ng-show="editor.index == 1">Add target</a>
 
 </div>

src/app/panels/graphite/module.html

@@ -100,7 +100,8 @@
   </form>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="img/load_big.gif"></center>
 
-  <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
+  <div histogram-chart class="pointer histogram-chart" params="{{panel}}">
+  </div>
 
   <span ng-show="panel.legend" ng-repeat='series in legend' class="histogram-legend">
       <i class='icon-circle' ng-style="{color: series.color}"></i>
@@ -118,11 +119,6 @@
       <div ng-show="editorTabs[editor.index] == 'General'">
         <div ng-include src="'app/partials/panelgeneral.html'"></div>
       </div>
-
-      <div ng-show="editorTabs[editor.index] == 'Panel'">
-        <div ng-include src="edit_path(panel.type)"></div>
-      </div>
-
       <div ng-repeat="tab in panelMeta.editorTabs" ng-show="editorTabs[editor.index] == tab.title">
         <div ng-include src="tab.src"></div>
       </div>

src/app/panels/graphite/module.js

@@ -47,15 +47,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
         }
       ],
       editorTabs : [
+        {
+          title:'Targets',
+          src:'app/panels/graphite/editor.html'
+        },
+        {
+          title:'Axis labels',
+          src:'app/panels/graphite/axisEditor.html'
+        },
         {
           title:'Style',
           src:'app/panels/graphite/styleEditor.html'
         }
       ],
-      status  : "Stable",
-      description : "A bucketed time series chart of the current query or queries. Uses the "+
-        "Elasticsearch date_histogram facet. If using time stamped indices this panel will query"+
-        " them sequentially to attempt to apply the lighest possible load to your Elasticsearch cluster"
+      status  : "Work in progress",
+      description : " Graphite graphing panel"
     };
 
     // Set and populate defaults
@@ -223,6 +229,10 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
       }
     };
 
+    $scope.typeAheadSource = function (str) {
+      return ["test", "asd", "testing2" + str];
+    };
+
     $scope.remove_panel_from_row = function(row, panel) {
       if ($scope.inEditMode) {
         $rootScope.$emit('fullEditMode', false);
@@ -409,12 +419,21 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
       $scope.$emit('render');
     };
 
+
+    $scope.setEditorTabs = function(panelMeta) {
+      $scope.editorTabs = ['General'];
+      if(!_.isUndefined(panelMeta.editorTabs)) {
+        $scope.editorTabs =  _.union($scope.editorTabs,_.pluck(panelMeta.editorTabs,'title'));
+      }
+      return $scope.editorTabs;
+    };
+
   });
 
   module.directive('histogramChart', function(dashboard, filterSrv) {
     return {
       restrict: 'A',
-      template: '<div></div>',
+      template: '<div> </div>',
       link: function(scope, elem) {
         var data, plot;
 
@@ -560,6 +579,17 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteSrv, RQ) {
 
             plot = $.plot(elem, data, options);
 
+            if (scope.panel.leftYAxisLabel) {
+              elem.css('margin-left', '10px');
+              var yaxisLabel = $("<div class='axisLabel yaxisLabel'></div>")
+                .text(scope.panel.leftYAxisLabel)
+                .appendTo(elem);
+
+              yaxisLabel.css("margin-top", yaxisLabel.width() / 2 - 20);
+            } else if (elem.css('margin-left')) {
+              elem.css('margin-left', '');
+            }
+
           } catch(e) {
             console.log(e);
             // Nothing to do here

src/app/services/keyboardManager.js

@@ -1,9 +1,7 @@
 define([
-  'angular',
-  'underscore',
-  'jquery'
+  'angular'
 ],
-function (angular, _, $) {
+function (angular) {
   'use strict';
 
   var module = angular.module('kibana.services');
@@ -21,7 +19,7 @@ function (angular, _, $) {
       'keyCode':          false
     };
     // Store all keyboard combination shortcuts
-    keyboardManagerService.keyboardEvent = {}
+    keyboardManagerService.keyboardEvent = {};
     // Add a new keyboard combination shortcut
     keyboardManagerService.bind = function (label, callback, opt) {
       var fct, elt, code, k;
@@ -29,7 +27,10 @@ function (angular, _, $) {
       opt   = angular.extend({}, defaultOpt, opt);
       label = label.toLowerCase();
       elt   = opt.target;
-      if(typeof opt.target == 'string') elt = document.getElementById(opt.target);
+
+      if(typeof opt.target === 'string') {
+        elt = document.getElementById(opt.target);
+      }
 
       fct = function (e) {
         e = e || $window.event;
@@ -37,19 +38,37 @@ function (angular, _, $) {
         // Disable event handler when focus input and textarea
         if (opt['inputDisabled']) {
           var elt;
-          if (e.target) elt = e.target;
-          else if (e.srcElement) elt = e.srcElement;
-          if (elt.nodeType == 3) elt = elt.parentNode;
-          if (elt.tagName == 'INPUT' || elt.tagName == 'TEXTAREA') return;
+          if (e.target) {
+            elt = e.target;
+          }
+          else if (e.srcElement) {
+            elt = e.srcElement;
+          }
+
+          if (elt.nodeType === 3) {
+            elt = elt.parentNode;
+          }
+
+          if (elt.tagName === 'INPUT' || elt.tagName === 'TEXTAREA') {
+            return;
+          }
         }
 
         // Find out which key is pressed
-        if (e.keyCode) code = e.keyCode;
-        else if (e.which) code = e.which;
+        if (e.keyCode) {
+          code = e.keyCode;
+        }
+        else if (e.which) {
+          code = e.which;
+        }
         var character = String.fromCharCode(code).toLowerCase();
 
-        if (code == 188) character = ","; // If the user presses , when the type is onkeydown
-        if (code == 190) character = "."; // If the user presses , when the type is onkeydown
+        if (code === 188) {
+          character = ","; // If the user presses , when the type is onkeydown
+        }
+        if (code === 190) {
+          character = "."; // If the user presses , when the type is onkeydown
+        }
 
         var keys = label.split("+");
         // Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
@@ -152,39 +171,47 @@ function (angular, _, $) {
         // Foreach keys in label (split on +)
         for(var i=0, l=keys.length; k=keys[i],i<l; i++) {
           switch (k) {
-            case 'ctrl':
-            case 'control':
-              kp++;
-              modifiers.ctrl.wanted = true;
-              break;
-            case 'shift':
-            case 'alt':
-            case 'meta':
-              kp++;
-              modifiers[k].wanted = true;
-              break;
+          case 'ctrl':
+          case 'control':
+            kp++;
+            modifiers.ctrl.wanted = true;
+            break;
+          case 'shift':
+          case 'alt':
+          case 'meta':
+            kp++;
+            modifiers[k].wanted = true;
+            break;
           }
 
           if (k.length > 1) { // If it is a special key
-            if(special_keys[k] == code) kp++;
+            if(special_keys[k] === code) {
+              kp++;
+            }
           } else if (opt['keyCode']) { // If a specific key is set into the config
-            if (opt['keyCode'] == code) kp++;
+            if (opt['keyCode'] === code) {
+              kp++;
+            }
           } else { // The special keys did not match
-            if(character == k) kp++;
+            if(character === k) {
+              kp++;
+            }
             else {
               if(shift_nums[character] && e.shiftKey) { // Stupid Shift key bug created by using lowercase
                 character = shift_nums[character];
-                if(character == k) kp++;
+                if(character === k) {
+                  kp++;
+                }
               }
             }
           }
         }
 
-        if(kp == keys.length &&
-          modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
-          modifiers.shift.pressed == modifiers.shift.wanted &&
-          modifiers.alt.pressed == modifiers.alt.wanted &&
-          modifiers.meta.pressed == modifiers.meta.wanted) {
+        if(kp === keys.length &&
+          modifiers.ctrl.pressed === modifiers.ctrl.wanted &&
+          modifiers.shift.pressed === modifiers.shift.wanted &&
+          modifiers.alt.pressed === modifiers.alt.wanted &&
+          modifiers.meta.pressed === modifiers.meta.wanted) {
           $timeout(function() {
             callback(e);
           }, 1);
@@ -211,22 +238,40 @@ function (angular, _, $) {
         'event':    opt['type']
       };
       //Attach the function with the event
-      if(elt.addEventListener) elt.addEventListener(opt['type'], fct, false);
-      else if(elt.attachEvent) elt.attachEvent('on' + opt['type'], fct);
-      else elt['on' + opt['type']] = fct;
+      if(elt.addEventListener) {
+        elt.addEventListener(opt['type'], fct, false);
+      }
+      else if(elt.attachEvent) {
+        elt.attachEvent('on' + opt['type'], fct);
+      }
+      else {
+        elt['on' + opt['type']] = fct;
+      }
     };
     // Remove the shortcut - just specify the shortcut and I will remove the binding
     keyboardManagerService.unbind = function (label) {
       label = label.toLowerCase();
+
       var binding = keyboardManagerService.keyboardEvent[label];
-      delete(keyboardManagerService.keyboardEvent[label])
-      if(!binding) return;
+      delete(keyboardManagerService.keyboardEvent[label]);
+
+      if(!binding) {
+        return;
+      }
+
       var type    = binding['event'],
       elt     = binding['target'],
       callback  = binding['callback'];
-      if(elt.detachEvent) elt.detachEvent('on' + type, callback);
-      else if(elt.removeEventListener) elt.removeEventListener(type, callback, false);
-      else elt['on'+type] = false;
+
+      if(elt.detachEvent) {
+        elt.detachEvent('on' + type, callback);
+      }
+      else if(elt.removeEventListener) {
+        elt.removeEventListener(type, callback, false);
+      }
+      else {
+        elt['on'+type] = false;
+      }
     };
     //
     return keyboardManagerService;

src/vendor/bootstrap/less/grafana.less

@@ -40,4 +40,27 @@
   .grafana-search-metric-name {
     color: @blue;
   }
+}
+
+.yaxisLabel {
+  top: 50%;
+  left: -20px;
+  transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -webkit-transform-origin: 0 0;
+}
+
+.axisLabel {
+  color: @textColor;
+  font-size: @fontSizeSmall;
+  position: absolute;
+  text-align: center;
+  font-size: 12px;
 }