From 98d934c8a4507c790906495cd0b5a0eba3ccdc56 Mon Sep 17 00:00:00 2001
From: Jo De Boeck <deboeck.jo@gmail.com>
Date: Tue, 11 Nov 2014 19:20:06 +0200
Subject: [PATCH 01/19] Add mbytes and kbytes y_formats

Usefull when input data is stored in kbytes or mbytes
---
 src/app/components/kbn.js            | 2 ++
 src/app/panels/graph/axisEditor.html | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js
index 567e7c78f23..a9fe6c08f5b 100644
--- a/src/app/components/kbn.js
+++ b/src/app/components/kbn.js
@@ -362,6 +362,8 @@ function($, _, moment) {
 
   kbn.valueFormats.bits = kbn.formatFuncCreator(1024, [' b', ' Kib', ' Mib', ' Gib', ' Tib', ' Pib', ' Eib', ' Zib', ' Yib']);
   kbn.valueFormats.bytes = kbn.formatFuncCreator(1024, [' B', ' KiB', ' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']);
+  kbn.valueFormats.kbytes = kbn.formatFuncCreator(1024, [' KiB', ' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']);
+  kbn.valueFormats.mbytes = kbn.formatFuncCreator(1024, [' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']);
   kbn.valueFormats.bps = kbn.formatFuncCreator(1000, [' bps', ' Kbps', ' Mbps', ' Gbps', ' Tbps', ' Pbps', ' Ebps', ' Zbps', ' Ybps']);
   kbn.valueFormats.short = kbn.formatFuncCreator(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Qaudr', ' Quint', ' Sext', ' Sept']);
   kbn.valueFormats.none = kbn.toFixed;
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 7c1b3d73b04..6f6c5b45dae 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -4,7 +4,7 @@
     <h5>Left Y Axis</h5>
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'kbytes', 'mbytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
       </div>
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
@@ -23,7 +23,7 @@
     <h5>Right Y Axis</h5>
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'kbytes', 'mbytes', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
       </div>
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>

From a77c33d9b7c6960bd31f517361f5fdf20bcd6ba0 Mon Sep 17 00:00:00 2001
From: chrono <chrono@open-resource.org>
Date: Fri, 14 Nov 2014 14:19:55 +0100
Subject: [PATCH 02/19] Added J,W & eV to unit formatting

---
 src/app/components/kbn.js             | 3 +++
 src/app/panels/graph/axisEditor.html  | 4 ++--
 src/app/panels/graph/graph.js         | 9 +++++++++
 src/app/panels/singlestat/editor.html | 3 +--
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js
index ecef4bd164e..5e2a30fb3da 100644
--- a/src/app/components/kbn.js
+++ b/src/app/components/kbn.js
@@ -364,6 +364,9 @@ function($, _, moment) {
   kbn.valueFormats.bytes = kbn.formatFuncCreator(1024, [' B', ' KiB', ' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']);
   kbn.valueFormats.bps = kbn.formatFuncCreator(1000, [' bps', ' Kbps', ' Mbps', ' Gbps', ' Tbps', ' Pbps', ' Ebps', ' Zbps', ' Ybps']);
   kbn.valueFormats.short = kbn.formatFuncCreator(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Qaudr', ' Quint', ' Sext', ' Sept']);
+  kbn.valueFormats.joule = kbn.formatFuncCreator(1000, [' J', ' kJ', ' MJ', 'GJ', 'TJ', 'PJ', 'EJ', 'ZJ', 'YJ']);
+  kbn.valueFormats.watt = kbn.formatFuncCreator(1000, [' W', ' kW', ' MW', 'GW', 'TW', 'PW', 'EW', 'ZW', 'YW']);
+  kbn.valueFormats.ev = kbn.formatFuncCreator(1000, [' eV', ' keV', ' MeV', 'GeV', 'TeV', 'PeV', 'EeV', 'ZeV', 'YeV']);
   kbn.valueFormats.none = kbn.toFixed;
 
   kbn.valueFormats.ms = function(size, decimals, scaledDecimals) {
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 7c1b3d73b04..6951caac287 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -4,7 +4,7 @@
     <h5>Left Y Axis</h5>
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
       </div>
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
@@ -23,7 +23,7 @@
     <h5>Right Y Axis</h5>
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
       </div>
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="icon-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>
diff --git a/src/app/panels/graph/graph.js b/src/app/panels/graph/graph.js
index e0ddfc76402..d38f11be3c3 100755
--- a/src/app/panels/graph/graph.js
+++ b/src/app/panels/graph/graph.js
@@ -402,6 +402,15 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
           case 'short':
             url += '&yUnitSystem=si';
             break;
+          case 'joule':
+            url += '&yUnitSystem=si';
+            break;
+          case 'watt':
+            url += '&yUnitSystem=si';
+            break;
+          case 'ev':
+            url += '&yUnitSystem=si';
+            break;
           case 'none':
             url += '&yUnitSystem=none';
             break;
diff --git a/src/app/panels/singlestat/editor.html b/src/app/panels/singlestat/editor.html
index 885b1f20077..1e34243ca29 100644
--- a/src/app/panels/singlestat/editor.html
+++ b/src/app/panels/singlestat/editor.html
@@ -35,7 +35,7 @@
     <h5>Formats</h5>
 		<div class="editor-option">
 			<label class="small">Unit format</label>
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
 		</div>
 	</div>
 	<div class="section">
@@ -73,4 +73,3 @@
 </div>
 
 </div>
-

From 16f7f68636202d658337cee06ab57dbd319e480a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Fri, 9 Jan 2015 09:37:42 +0100
Subject: [PATCH 03/19] Plugins: fixed broken example panel plugin, Fixes #1318

---
 src/plugins/custom.panel.example/module.js | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/plugins/custom.panel.example/module.js b/src/plugins/custom.panel.example/module.js
index d04d8fca959..8ed4a450533 100644
--- a/src/plugins/custom.panel.example/module.js
+++ b/src/plugins/custom.panel.example/module.js
@@ -2,9 +2,9 @@ define([
   'angular',
   'app',
   'lodash',
-  'require',
+  'components/panelmeta',
 ],
-function (angular, app, _) {
+function (angular, app, _, PanelMeta) {
   'use strict';
 
   var module = angular.module('grafana.panels.custom', []);
@@ -12,9 +12,9 @@ function (angular, app, _) {
 
   module.controller('CustomPanelCtrl', function($scope, panelSrv) {
 
-    $scope.panelMeta = {
-      description : "Example plugin panel",
-    };
+    $scope.panelMeta = new PanelMeta({
+      description : "A static text panel that can use plain text, markdown, or (sanitized) HTML"
+    });
 
     // set and populate defaults
     var _d = {
@@ -22,10 +22,6 @@ function (angular, app, _) {
 
     _.defaults($scope.panel, _d);
 
-    $scope.init = function() {
-      panelSrv.init($scope);
-    };
-
-    $scope.init();
+    panelSrv.init($scope);
   });
 });

From 4edf0c976871974192ea1a5b6f52a1adf3e4ee6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Fri, 9 Jan 2015 16:28:58 +0100
Subject: [PATCH 04/19] Fixed alert popup close icon

---
 src/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.html b/src/index.html
index 84e7787b83d..779c54d7ef0 100644
--- a/src/index.html
+++ b/src/index.html
@@ -27,7 +27,7 @@
 		<div class="page-alert-list">
 			<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
 				<button type="button" class="alert-close" ng-click="dashAlerts.clear(alert)">
-					<i class="icon-remove-sign"></i>
+					<i class="fa fa-times-circle"></i>
 				</button>
 				<div class="alert-title">{{alert.title}}</div>
 				<div ng-bind-html='alert.text'></div>

From 92c3d801893bf67de31ef953382fb77a5873ba9d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sat, 10 Jan 2015 12:49:35 +0100
Subject: [PATCH 05/19] SingleStatPanel: You can now use template variables in
 pre & postfix, Closes #1321

---
 CHANGELOG.md                                 | 1 +
 src/app/panels/singlestat/singleStatPanel.js | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0331dfd5d95..578156a0229 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Enhancements**
 - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions
 - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts
+- [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix
 
 **Fixes**
 - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
diff --git a/src/app/panels/singlestat/singleStatPanel.js b/src/app/panels/singlestat/singleStatPanel.js
index 01ecfe2499d..80e3fa1391d 100644
--- a/src/app/panels/singlestat/singleStatPanel.js
+++ b/src/app/panels/singlestat/singleStatPanel.js
@@ -11,7 +11,7 @@ function (angular, app, _, $) {
   var module = angular.module('grafana.panels.singlestat', []);
   app.useModule(module);
 
-  module.directive('singlestatPanel', function($location, linkSrv, $timeout) {
+  module.directive('singlestatPanel', function($location, linkSrv, $timeout, templateSrv) {
 
     return {
       link: function(scope, elem) {
@@ -63,6 +63,7 @@ function (angular, app, _, $) {
         }
 
         function getSpan(className, fontSize, value)  {
+          value = templateSrv.replace(value);
           return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
             value + '</span>';
         }

From ccbe055e5b482edea8f65005b6d12477ae986c94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Sun, 11 Jan 2015 20:04:33 +0100
Subject: [PATCH 06/19] Graph: Added right y axis label setting and graph
 support, Closes #599

---
 CHANGELOG.md                         |  1 +
 src/app/panels/graph/axisEditor.html |  6 +++-
 src/app/panels/graph/graph.js        | 50 +++++++++++++++++-----------
 src/css/less/grafana.less            | 23 -------------
 src/css/less/graph.less              | 41 +++++++++++++++++++++++
 5 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 578156a0229..c0c5802ccef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions
 - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts
 - [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix
+- [Issue #599](https://github.com/grafana/grafana/issues/599).   Graph: Added right y axis label setting and graph support
 
 **Fixes**
 - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 36353464324..9965d7ff2f2 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -16,7 +16,7 @@
       </div>
       <div class="editor-option">
         <label class="small">Label</label>
-        <input ng-change="get_data()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
+        <input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
       </div>
   </div>
   <div class="section">
@@ -32,6 +32,10 @@
       <div class="editor-option">
         <label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
         <input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
+      </div>
+			<div class="editor-option">
+        <label class="small">Label</label>
+        <input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
       </div>
   </div>
 </div>
diff --git a/src/app/panels/graph/graph.js b/src/app/panels/graph/graph.js
index 62fd543d0e8..48bd68c9483 100755
--- a/src/app/panels/graph/graph.js
+++ b/src/app/panels/graph/graph.js
@@ -109,9 +109,9 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
           }
         }
 
-        function updateLegendValues(plot) {
+        function drawHook(plot) {
+          // Update legend values
           var yaxis = plot.getYAxes();
-
           for (var i = 0; i < data.length; i++) {
             var series = data[i];
             var axis = yaxis[series.yaxis - 1];
@@ -124,6 +124,29 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
             series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2);
             if(!scope.$$phase) { scope.$digest(); }
           }
+
+          // add left axis labels
+          if (scope.panel.leftYAxisLabel) {
+            var yaxisLabel = $("<div class='axisLabel left-yaxis-label'></div>")
+              .text(scope.panel.leftYAxisLabel)
+              .appendTo(elem);
+
+            yaxisLabel.css("margin-top", yaxisLabel.width() / 2);
+          }
+
+          // add right axis labels
+          if (scope.panel.rightYAxisLabel) {
+            var rightLabel = $("<div class='axisLabel right-yaxis-label'></div>")
+              .text(scope.panel.rightYAxisLabel)
+              .appendTo(elem);
+
+            rightLabel.css("margin-top", rightLabel.width() / 2);
+          }
+        }
+
+        function processOffsetHook(plot, gridMargin) {
+          if (scope.panel.leftYAxisLabel) { gridMargin.left = 20; }
+          if (scope.panel.rightYAxisLabel) { gridMargin.right = 20; }
         }
 
         // Function for rendering panel
@@ -137,7 +160,10 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
 
           // Populate element
           var options = {
-            hooks: { draw: [updateLegendValues] },
+            hooks: {
+              draw: [drawHook],
+              processOffset: [processOffsetHook],
+            },
             legend: { show: false },
             series: {
               stackpercent: panel.stack ? panel.percentage : false,
@@ -173,7 +199,8 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
               backgroundColor: null,
               borderWidth: 0,
               hoverable: true,
-              color: '#c8c8c8'
+              color: '#c8c8c8',
+              margin: { left: 0, right: 0 },
             },
             selection: {
               mode: "x",
@@ -213,8 +240,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
             } catch (e) {
               console.log('flotcharts error', e);
             }
-
-            addAxisLabels();
           }
 
           if (shouldDelayDraw(panel)) {
@@ -317,19 +342,6 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
           };
         }
 
-        function addAxisLabels() {
-          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', '');
-          }
-        }
-
         function configureAxisOptions(data, options) {
           var defaults = {
             position: 'left',
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index edaa639a897..d5dad2c7920 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -87,29 +87,6 @@
   }
 }
 
-.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;
-}
-
 .dashboard-fullscreen {
   .main-view-container {
     overflow: hidden;
diff --git a/src/css/less/graph.less b/src/css/less/graph.less
index d6856f5bbf9..5ad38283689 100644
--- a/src/css/less/graph.less
+++ b/src/css/less/graph.less
@@ -228,3 +228,44 @@
     text-align: right;
   }
 }
+
+.left-yaxis-label {
+  top: 50%;
+  left: -5px;
+  transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -webkit-transform: rotate(-90deg);
+  transform-origin: left top;
+  -o-transform-origin: left top;
+  -ms-transform-origin: left top;
+  -moz-transform-origin: left top;
+  -webkit-transform-origin: left top;
+}
+
+.right-yaxis-label {
+  top: 50%;
+  right: -5px;
+
+  -webkit-transform: rotate(90deg);
+  -webkit-transform-origin: right top;
+  -moz-transform: rotate(90deg);
+  -moz-transform-origin: right top;
+  -ms-transform: rotate(90deg);
+  -ms-transform-origin: right top;
+  -o-transform: rotate(90deg);
+  -o-transform-origin: right top;
+  transform: rotate(90deg);
+  transform-origin: right top;
+}
+
+
+.axisLabel {
+  color: @textColor;
+  font-size: @fontSizeSmall;
+  position: absolute;
+  text-align: center;
+  font-size: 12px;
+}
+

From 09a0ef2013eecb12864b71ea324e645576049a56 Mon Sep 17 00:00:00 2001
From: Ties Bos <ties@gainspeed.com>
Date: Sun, 11 Jan 2015 22:19:59 -0800
Subject: [PATCH 07/19] Add Bps support, much like bps

---
 src/app/components/kbn.js             | 1 +
 src/app/panels/graph/axisEditor.html  | 4 ++--
 src/app/panels/graph/graph.js         | 3 +++
 src/app/panels/singlestat/editor.html | 2 +-
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js
index aedfbb90f17..63c785b9ff5 100644
--- a/src/app/components/kbn.js
+++ b/src/app/components/kbn.js
@@ -363,6 +363,7 @@ function($, _, moment) {
   kbn.valueFormats.bits = kbn.formatFuncCreator(1024, [' b', ' Kib', ' Mib', ' Gib', ' Tib', ' Pib', ' Eib', ' Zib', ' Yib']);
   kbn.valueFormats.bytes = kbn.formatFuncCreator(1024, [' B', ' KiB', ' MiB', ' GiB', ' TiB', ' PiB', ' EiB', ' ZiB', ' YiB']);
   kbn.valueFormats.bps = kbn.formatFuncCreator(1000, [' bps', ' Kbps', ' Mbps', ' Gbps', ' Tbps', ' Pbps', ' Ebps', ' Zbps', ' Ybps']);
+  kbn.valueFormats.Bps = kbn.formatFuncCreator(1000, [' Bps', ' KBps', ' MBps', ' GBps', ' TBps', ' PBps', ' EBps', ' ZBps', ' YBps']);
   kbn.valueFormats.short = kbn.formatFuncCreator(1000, ['', ' K', ' Mil', ' Bil', ' Tri', ' Qaudr', ' Quint', ' Sext', ' Sept']);
   kbn.valueFormats.none = kbn.toFixed;
 
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 9965d7ff2f2..45282baaa11 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -4,7 +4,7 @@
     <h5>Left Y Axis</h5>
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
       </div>
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
@@ -23,7 +23,7 @@
     <h5>Right Y Axis</h5>
        <div class="editor-option">
         <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+        <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
       </div>
       <div class="editor-option">
         <label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>
diff --git a/src/app/panels/graph/graph.js b/src/app/panels/graph/graph.js
index 48bd68c9483..b4934a7354c 100755
--- a/src/app/panels/graph/graph.js
+++ b/src/app/panels/graph/graph.js
@@ -418,6 +418,9 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
           case 'bps':
             url += '&yUnitSystem=si';
             break;
+          case 'Bps':
+            url += '&yUnitSystem=si';
+            break;
           case 'short':
             url += '&yUnitSystem=si';
             break;
diff --git a/src/app/panels/singlestat/editor.html b/src/app/panels/singlestat/editor.html
index 2460571a4b3..6c83c5ab821 100644
--- a/src/app/panels/singlestat/editor.html
+++ b/src/app/panels/singlestat/editor.html
@@ -39,7 +39,7 @@
     <h5>Formats</h5>
 		<div class="editor-option">
 			<label class="small">Unit format</label>
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
+			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
 		</div>
 	</div>
 </div>

From 93fb02509b75d42ccc73b4e9f530f3a0ac941cd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 09:27:20 +0100
Subject: [PATCH 08/19] Removed flicker when refreshing a singlestat panel with
 spark line

---
 src/app/panels/singlestat/singleStatPanel.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/panels/singlestat/singleStatPanel.js b/src/app/panels/singlestat/singleStatPanel.js
index 80e3fa1391d..49c248bc5cd 100644
--- a/src/app/panels/singlestat/singleStatPanel.js
+++ b/src/app/panels/singlestat/singleStatPanel.js
@@ -134,9 +134,7 @@ function (angular, app, _, $) {
             color: panel.sparkline.lineColor
           };
 
-          setTimeout(function() {
-            $.plot(plotCanvas, [plotSeries], options);
-          }, 10);
+          $.plot(plotCanvas, [plotSeries], options);
         }
 
         function render() {

From 3dc30e4d8bf896e9dcf3d8e7744e7a32939da2d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 12:55:19 +0100
Subject: [PATCH 09/19] Major reworking of the graph axis editor tab

---
 src/app/components/kbn.js                   |  28 +++
 src/app/directives/dropdown.typeahead.js    |  51 +++--
 src/app/panels/graph/axisEditor.html        | 240 +++++++++++++-------
 src/app/panels/graph/module.js              |   6 +
 src/app/panels/graph/seriesOverridesCtrl.js |  17 +-
 src/app/panels/graph/styleEditor.html       |   2 +-
 src/app/panels/singlestat/editor.html       |   8 +-
 7 files changed, 228 insertions(+), 124 deletions(-)

diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js
index 234c4db122e..2885d3806b3 100644
--- a/src/app/components/kbn.js
+++ b/src/app/components/kbn.js
@@ -485,5 +485,33 @@ function($, _, moment) {
     return new RegExp(match[1], match[2]);
   };
 
+  kbn.getUnitFormats = function() {
+    return [
+      {
+        text: 'none',
+        submenu: [
+          {text: 'none' , value: 'none'},
+          {text: 'short', value: 'short'},
+        ]
+      },
+      {
+        text: 'duration',
+        submenu: [
+          {text: 'nanoseconds (ns)' , value: 'ns'},
+          {text: 'microseconds (µs)', value: 'µs'},
+          {text: 'milliseconds (ms)', value: 'ms'},
+        ]
+      },
+      {
+        text: 'data',
+        submenu: [
+          {text: 'bit', value: 'bit'},
+          {text: 'bytes', value: 'bytes'},
+          {text: 'kilobytes', value: 'kbytes'},
+        ]
+      },
+    ];
+  };
+
   return kbn;
 });
diff --git a/src/app/directives/dropdown.typeahead.js b/src/app/directives/dropdown.typeahead.js
index f46de052c06..e62663fee8f 100644
--- a/src/app/directives/dropdown.typeahead.js
+++ b/src/app/directives/dropdown.typeahead.js
@@ -17,35 +17,47 @@ function (angular, app, _, $) {
 
       var buttonTemplate = '<a  class="grafana-target-segment grafana-target-function dropdown-toggle"' +
                               ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
-                              ' data-placement="top"><i class="icon-plus"></i></a>';
+                              ' data-placement="top"><i class="fa fa-plus"></i></a>';
 
       return {
         scope: {
-          "menuItems": "=dropdownTypeahead",
-          "dropdownTypeaheadOnSelect": "&dropdownTypeaheadOnSelect"
+          menuItems: "=dropdownTypeahead",
+          dropdownTypeaheadOnSelect: "&dropdownTypeaheadOnSelect",
+          model: '=ngModel'
         },
-        link: function($scope, elem) {
+        link: function($scope, elem, attrs) {
           var $input = $(inputTemplate);
           var $button = $(buttonTemplate);
           $input.appendTo(elem);
           $button.appendTo(elem);
 
-          var typeaheadValues = _.reduce($scope.menuItems, function(memo, value) {
-            _.each(value.submenu, function(item) {
+          if (attrs.linkText) {
+            $button.html(attrs.linkText);
+          }
+
+          if (attrs.ngModel) {
+            $scope.$watch('model', function(newValue) {
+              _.each($scope.menuItems, function(item){
+                _.each(item.submenu, function(subItem) {
+                  if (subItem.value === newValue) {
+                    $button.html(subItem.text);
+                  }
+                });
+              });
+            });
+          }
+
+          var typeaheadValues = _.reduce($scope.menuItems, function(memo, value, index) {
+            _.each(value.submenu, function(item, subIndex) {
+              item.click = 'menuItemSelected(' + index + ',' + subIndex + ')';
               memo.push(value.text + ' ' + item.text);
             });
             return memo;
           }, []);
 
-          $scope.menuItemSelected = function(optionIndex, valueIndex) {
-            var option = $scope.menuItems[optionIndex];
-            var result = {
-              $item: option.submenu[valueIndex],
-              $optionIndex: optionIndex,
-              $valueIndex: valueIndex
-            };
-
-            $scope.dropdownTypeaheadOnSelect(result);
+          $scope.menuItemSelected = function(index, subIndex) {
+            var item = $scope.menuItems[index];
+            $scope.dropdownTypeaheadOnSelect({$item: item, $subItem: item.submenu[subIndex]});
           };
 
           $input.attr('data-provide', 'typeahead');
@@ -55,12 +67,11 @@ function (angular, app, _, $) {
             items: 10,
             updater: function (value) {
               var result = {};
-              _.each($scope.menuItems, function(menuItem, optionIndex) {
-                _.each(menuItem.submenu, function(submenuItem, valueIndex) {
+              _.each($scope.menuItems, function(menuItem) {
+                _.each(menuItem.submenu, function(submenuItem) {
                   if (value === (menuItem.text + ' ' + submenuItem.text)) {
-                    result.$item  = submenuItem;
-                    result.$optionIndex = optionIndex;
-                    result.$valueIndex = valueIndex;
+                    result.$item = menuItem;
+                    result.$subItem = submenuItem;
                   }
                 });
               });
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index c042ec11903..e9ac2e5a325 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -1,90 +1,160 @@
 
 <div class="editor-row">
   <div class="section">
-    <h5>Left Y Axis</h5>
-       <div class="editor-option">
-        <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'kbytes', 'mbytes', 'bits', 'bps', 'Bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
-      </div>
-      <div class="editor-option">
-        <label class="small">Min / <a ng-click="toggleGridMinMax('leftMin')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.leftMin)"></i></a></label>
-        <input type="number" class="input-small" ng-model="panel.grid.leftMin" ng-change="render()" ng-model-onblur />
-      </div>
-      <div class="editor-option">
-        <label class="small">Max / <a ng-click="toggleGridMinMax('leftMax')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.leftMax)"></i></a></label>
-        <input type="number" class="input-small" ng-model="panel.grid.leftMax" ng-change="render()" ng-model-onblur />
-      </div>
-      <div class="editor-option">
-        <label class="small">Label</label>
-        <input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.leftYAxisLabel">
-      </div>
-  </div>
-  <div class="section">
-    <h5>Right Y Axis</h5>
-       <div class="editor-option">
-        <label class="small">Format <tip>Y-axis formatting</tip></label>
-        <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'kbytes', 'mbytes', 'bits', 'bps', 'Bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
-      </div>
-      <div class="editor-option">
-        <label class="small">Min / <a ng-click="toggleGridMinMax('rightMin')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMin)"></i></a></label>
-        <input type="number" class="input-small" ng-model="panel.grid.rightMin" ng-change="render()" ng-model-onblur />
-      </div>
-      <div class="editor-option">
-        <label class="small">Max / <a ng-click="toggleGridMinMax('rightMax')">Auto <i class="fa fa-star" ng-show="_.isNull(panel.grid.rightMax)"></i></a></label>
-        <input type="number" class="input-small" ng-model="panel.grid.rightMax" ng-change="render()" ng-model-onblur />
-      </div>
-			<div class="editor-option">
-        <label class="small">Label</label>
-        <input ng-change="render()" ng-model-onblur placeholder="" type="text" class="input-medium" ng-model="panel.rightYAxisLabel">
-      </div>
-  </div>
-</div>
-
-
-<div class="editor-row">
-  <div class="section">
-    <h5>Legend styles</h5>
-		<editor-opt-bool text="Show" model="panel.legend.show" change="get_data();"></editor-opt-bool>
-		<editor-opt-bool text="Values" model="panel.legend.values" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Table" model="panel.legend.alignAsTable" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Right side" model="panel.legend.rightSide" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Hide empty" model="panel.legend.hideEmpty" tip="Hides series with only null values" change="render()"></editor-opt-bool>
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Left Y Axis</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Unit
+					</li>
+					<li class="dropdown" style="width: 150px;"
+						ng-model="panel.y_formats[0]"
+						dropdown-typeahead="unitFormats"
+						dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
+					</li>
+					<li class="grafana-target-segment">
+						&nbsp;&nbsp; Grid Max
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+					</li>
+					<li class="grafana-target-segment">
+						Min
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+					</li>
+					<li class="grafana-target-segment">
+						Label
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input" value="">
+					</li>
+					<li class="grafana-target-segment">
+						Show
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Right Y Axis</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Unit
+					</li>
+					<li class="dropdown" style="width: 150px"
+						ng-model="panel.y_formats[1]"
+						dropdown-typeahead="unitFormats"
+						dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
+					</li>
+					<li class="grafana-target-segment">
+						&nbsp;&nbsp; Grid Max
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+					</li>
+					<li class="grafana-target-segment">
+						Min
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+					</li>
+					<li class="grafana-target-segment">
+						Label
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input" value="">
+					</li>
+					<li class="grafana-target-segment">
+						Show
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+		</div>
 	</div>
-
-  <div class="section" ng-if="panel.legend.values">
-    <h5>Legend values</h5>
-		<editor-opt-bool text="Min" model="panel.legend.min" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Max" model="panel.legend.max" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Current" model="panel.legend.current" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Total" model="panel.legend.total" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Avg" model="panel.legend.avg" change="render()"></editor-opt-bool>
-  </div>
-
-  <div class="section">
-    <h5>Grid thresholds</h5>
-    <div class="editor-option">
-      <label class="small">Level1</label>
-      <input type="number" class="input-small" ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur />
-    </div>
-    <div class="editor-option">
-      <label class="small">Color</label>
-      <spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
-    </div>
-    <div class="editor-option">
-      <label class="small">Level2</label>
-      <input type="number" class="input-small" ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur />
-    </div>
-    <div class="editor-option">
-      <label class="small">Color</label>
-      <spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
-    </div>
-		<editor-opt-bool text="Line mode" model="panel.grid.thresholdLine" change="render()"></editor-opt-bool>
-  </div>
-
-  <div class="section">
-    <h5>Show Axes</h5>
-		<editor-opt-bool text="X-Axis" model="panel['x-axis']" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Y-axis" model="panel['y-axis']" change="render()"></editor-opt-bool>
-  </div>
-
 </div>
+
+<div class="editor-row" style="margin-top: 20px">
+	<div class="section">
+	<div class="grafana-target">
+		<div class="grafana-target-inner">
+			<ul class="grafana-segment-list">
+				<li class="grafana-target-segment" style="width: 90px">
+					<strong>Thresholds</strong>
+				</li>
+				<li class="grafana-target-segment">
+					Level 1
+				</li>
+				<li>
+					<input type="text" class="input-small grafana-target-segment-input">
+				</li>
+				<li class="grafana-target-segment">
+					<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="grafana-target-segment">
+					Level 2
+				</li>
+				<li>
+					<input type="text" class="input-small grafana-target-segment-input">
+				</li>
+				<li class="grafana-target-segment">
+					<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+				</li>
+				<li class="grafana-target-segment">
+					Line mode
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+	</div>
+</div>
+
+<div class="editor-row" style="margin-top: 20px">
+	<div class="section">
+	<div class="grafana-target">
+		<div class="grafana-target-inner">
+			<ul class="grafana-segment-list">
+				<li class="grafana-target-segment" style="width: 90px">
+					<strong>Legend</strong>
+				</li>
+				<li class="grafana-target-segment">
+					Show: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Table: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Right side: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Hide empty: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Min: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Max: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Avg: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Total: <input type="checkbox">
+				</li>
+				<li class="grafana-target-segment">
+					Current: <input type="checkbox">
+				</li>
+			</ul>
+			<div class="clearfix"></div>
+		</div>
+	</div>
+	</div>
+</div>
+
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js
index a1ae2bf2b4f..f05c609bdb1 100644
--- a/src/app/panels/graph/module.js
+++ b/src/app/panels/graph/module.js
@@ -104,6 +104,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
 
     $scope.hiddenSeries = {};
     $scope.seriesList = [];
+    $scope.unitFormats = kbn.getUnitFormats();
+
+    $scope.setUnitFormat = function(axis, subItem) {
+      $scope.panel.y_formats[axis] = subItem.value;
+      $scope.render();
+    };
 
     $scope.updateTimeRange = function () {
       $scope.range = timeSrv.timeRange();
diff --git a/src/app/panels/graph/seriesOverridesCtrl.js b/src/app/panels/graph/seriesOverridesCtrl.js
index 04d66ee5e73..80fb2ead6c2 100644
--- a/src/app/panels/graph/seriesOverridesCtrl.js
+++ b/src/app/panels/graph/seriesOverridesCtrl.js
@@ -20,26 +20,21 @@ define([
       option.index = $scope.overrideMenu.length;
       option.values = values;
 
-      option.submenu = _.map(values, function(value, index) {
-        return {
-          text: String(value),
-          click: 'menuItemSelected(' + option.index + ',' + index + ')'
-        };
+      option.submenu = _.map(values, function(value) {
+        return { text: String(value), value: value };
       });
 
       $scope.overrideMenu.push(option);
     };
 
-    $scope.setOverride = function(optionIndex, valueIndex) {
-      var option = $scope.overrideMenu[optionIndex];
-      var value = option.values[valueIndex];
-      $scope.override[option.propertyName] = value;
+    $scope.setOverride = function(item, subItem) {
+      $scope.override[item.propertyName] = subItem.value;
 
       // automatically disable lines for this series and the fill bellow to series
       // can be removed by the user if they still want lines
-      if (option.propertyName === 'fillBelowTo') {
+      if (item.propertyName === 'fillBelowTo') {
         $scope.override['lines'] = false;
-        $scope.addSeriesOverride({ alias: value, lines: false });
+        $scope.addSeriesOverride({ alias: subItem.value, lines: false });
       }
 
       $scope.updateCurrentOverrides();
diff --git a/src/app/panels/graph/styleEditor.html b/src/app/panels/graph/styleEditor.html
index 77eb933f855..f58fbab5c51 100644
--- a/src/app/panels/graph/styleEditor.html
+++ b/src/app/panels/graph/styleEditor.html
@@ -89,7 +89,7 @@
 							{{option.name}}: {{option.value}}
 						</li>
 
-						<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($optionIndex, $valueIndex)">
+						<li class="dropdown" dropdown-typeahead="overrideMenu" dropdown-typeahead-on-select="setOverride($item, $subItem)">
 						</li>
 
 					</ul>
diff --git a/src/app/panels/singlestat/editor.html b/src/app/panels/singlestat/editor.html
index e1d4646aa67..1381038f10c 100644
--- a/src/app/panels/singlestat/editor.html
+++ b/src/app/panels/singlestat/editor.html
@@ -39,13 +39,7 @@
     <h5>Formats</h5>
 		<div class="editor-option">
 			<label class="small">Unit format</label>
-<<<<<<< HEAD
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
-||||||| merged common ancestors
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
-=======
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
->>>>>>> 09a0ef2013eecb12864b71ea324e645576049a56
+			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
 		</div>
 	</div>
 </div>

From 3a27b610d5f2146169ce17e3469d80a8953b331b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 13:42:16 +0100
Subject: [PATCH 10/19] Added all unit formats to new unit selector, #1331

---
 src/app/components/kbn.js            | 19 ++++++++++++++++++-
 src/app/panels/graph/axisEditor.html |  6 +++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js
index 2885d3806b3..80a2b976f6e 100644
--- a/src/app/components/kbn.js
+++ b/src/app/components/kbn.js
@@ -492,6 +492,7 @@ function($, _, moment) {
         submenu: [
           {text: 'none' , value: 'none'},
           {text: 'short', value: 'short'},
+          {text: 'percent', value: 'percent'},
         ]
       },
       {
@@ -500,16 +501,32 @@ function($, _, moment) {
           {text: 'nanoseconds (ns)' , value: 'ns'},
           {text: 'microseconds (µs)', value: 'µs'},
           {text: 'milliseconds (ms)', value: 'ms'},
+          {text: 'seconds (s)', value: 's'},
         ]
       },
       {
         text: 'data',
         submenu: [
-          {text: 'bit', value: 'bit'},
+          {text: 'bits', value: 'bits'},
           {text: 'bytes', value: 'bytes'},
           {text: 'kilobytes', value: 'kbytes'},
         ]
       },
+      {
+        text: 'data rate',
+        submenu: [
+          {text: 'bits/sec', value: 'bps'},
+          {text: 'bytes/sec', value: 'Bps'},
+        ]
+      },
+      {
+        text: 'energy',
+        submenu: [
+          {text: 'watt', value: 'watt'},
+          {text: 'joule', value: 'joule'},
+          {text: 'eV', value: 'ev'},
+        ]
+      },
     ];
   };
 
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index e9ac2e5a325..90e3f5c9a68 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -10,7 +10,7 @@
 					<li class="grafana-target-segment">
 						Unit
 					</li>
-					<li class="dropdown" style="width: 150px;"
+					<li class="dropdown" style="width: 140px;"
 						ng-model="panel.y_formats[0]"
 						dropdown-typeahead="unitFormats"
 						dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
@@ -47,7 +47,7 @@
 					<li class="grafana-target-segment">
 						Unit
 					</li>
-					<li class="dropdown" style="width: 150px"
+					<li class="dropdown" style="width: 140px"
 						ng-model="panel.y_formats[1]"
 						dropdown-typeahead="unitFormats"
 						dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
@@ -104,7 +104,7 @@
 					<input type="text" class="input-small grafana-target-segment-input">
 				</li>
 				<li class="grafana-target-segment">
-					<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+					<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
 				</li>
 				<li class="grafana-target-segment">
 					Line mode

From c39f9ed2f31b5d8a1ec4dabb342d4a4e3f984e6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 14:00:30 +0100
Subject: [PATCH 11/19] More work on refactoring and changing graph axis edit
 view, #1331

---
 src/app/directives/dropdown.typeahead.js    |  2 +-
 src/app/directives/ngModelOnBlur.js         | 12 +++++++++++
 src/app/panels/graph/axisEditor.html        | 22 +++++++++++++++------
 src/app/panels/graph/module.js              |  5 -----
 src/test/specs/seriesOverridesCtrl-specs.js |  8 +-------
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/app/directives/dropdown.typeahead.js b/src/app/directives/dropdown.typeahead.js
index e62663fee8f..56203ee3c6f 100644
--- a/src/app/directives/dropdown.typeahead.js
+++ b/src/app/directives/dropdown.typeahead.js
@@ -37,7 +37,7 @@ function (angular, app, _, $) {
 
           if (attrs.ngModel) {
             $scope.$watch('model', function(newValue) {
-              _.each($scope.menuItems, function(item){
+              _.each($scope.menuItems, function(item) {
                 _.each(item.submenu, function(subItem) {
                   if (subItem.value === newValue) {
                     $button.html(subItem.text);
diff --git a/src/app/directives/ngModelOnBlur.js b/src/app/directives/ngModelOnBlur.js
index 0e9d94a282e..1aea09f9dc8 100644
--- a/src/app/directives/ngModelOnBlur.js
+++ b/src/app/directives/ngModelOnBlur.js
@@ -22,5 +22,17 @@ function (angular) {
           });
         }
       };
+    })
+    .directive('emptyToNull', function () {
+      return {
+        restrict: 'A',
+        require: 'ngModel',
+        link: function (scope, elm, attrs, ctrl) {
+          ctrl.$parsers.push(function (viewValue) {
+            if(viewValue === "") { return null; }
+            return viewValue;
+          });
+        }
+      };
     });
 });
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 90e3f5c9a68..151f40f264d 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -19,19 +19,24 @@
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+					   	empty-to-null ng-model="panel.grid.leftMax"
+							ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						Min
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+					  	empty-to-null ng-model="panel.grid.leftMin"
+							ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" value="">
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						Show
@@ -56,19 +61,24 @@
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+					   	empty-to-null ng-model="panel.grid.rightMax"
+							ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						Min
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto">
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+					  	empty-to-null ng-model="panel.grid.rightMin"
+							ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" value="">
+						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						Show
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js
index f05c609bdb1..5fbc3a76e6b 100644
--- a/src/app/panels/graph/module.js
+++ b/src/app/panels/graph/module.js
@@ -268,11 +268,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
       $scope.render();
     };
 
-    $scope.toggleGridMinMax = function(key) {
-      $scope.panel.grid[key] = _.toggle($scope.panel.grid[key], null, 0);
-      $scope.render();
-    };
-
     $scope.addSeriesOverride = function(override) {
       $scope.panel.seriesOverrides.push(override || {});
     };
diff --git a/src/test/specs/seriesOverridesCtrl-specs.js b/src/test/specs/seriesOverridesCtrl-specs.js
index 0542e613a34..ec7cc70159c 100644
--- a/src/test/specs/seriesOverridesCtrl-specs.js
+++ b/src/test/specs/seriesOverridesCtrl-specs.js
@@ -16,15 +16,9 @@ define([
       ctx.scope.render = function() {};
     });
 
-    describe('Controller should init overrideMenu', function() {
-      it('click should include option and value index', function() {
-        expect(ctx.scope.overrideMenu[1].submenu[1].click).to.be('menuItemSelected(1,1)');
-      });
-    });
-
     describe('When setting an override', function() {
       beforeEach(function() {
-        ctx.scope.setOverride(1, 0);
+        ctx.scope.setOverride({propertyName: 'lines'}, {value: true});
       });
 
       it('should set override property', function() {

From a1e39ce24daf16591c44145c460d140e9dd598f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 14:31:15 +0100
Subject: [PATCH 12/19] Fixed show/hide axis toggles, #1331

---
 src/app/directives/arrayJoin.js      |   1 +
 src/app/panels/graph/axisEditor.html | 184 +++++++++++++++------------
 src/css/less/forms.less              |   2 +-
 3 files changed, 102 insertions(+), 85 deletions(-)

diff --git a/src/app/directives/arrayJoin.js b/src/app/directives/arrayJoin.js
index 9f0900d880d..a2b5fbe59dd 100644
--- a/src/app/directives/arrayJoin.js
+++ b/src/app/directives/arrayJoin.js
@@ -31,4 +31,5 @@ function (angular, app, _) {
         }
       };
     });
+
 });
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 151f40f264d..3bc49e3a1f0 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -5,7 +5,7 @@
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
 					<li class="grafana-target-segment" style="width: 90px">
-						<strong>Left Y Axis</strong>
+						<strong>Left Y</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Unit
@@ -38,16 +38,13 @@
 						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
-					<li class="grafana-target-segment">
-						Show
-					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
 					<li class="grafana-target-segment" style="width: 90px">
-						<strong>Right Y Axis</strong>
+						<strong>Right Y</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Unit
@@ -80,8 +77,105 @@
 						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Show Axis</strong>
+					</li>
 					<li class="grafana-target-segment">
-						Show
+						X-Axis&nbsp;
+						<input class="cr1" id="hideXAxis" type="checkbox"
+								ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
+						<label for="hideXAxis" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Y-Axis&nbsp;
+						<input class="cr1" id="hideYAxis" type="checkbox"
+						    ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
+						<label for="hideYAxis" class="cr1"></label>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+
+		</div>
+	</div>
+</div>
+
+<div class="editor-row" style="margin-top: 20px">
+	<div class="section">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Thresholds</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Level 1
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input">
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment">
+						Level 2
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input">
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment">
+						Line mode
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+
+		</div>
+	</div>
+</div>
+
+<div class="editor-row" style="margin-top: 20px">
+	<div class="section">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 90px">
+						<strong>Legend</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Show: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Table: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Right side: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Hide empty: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Min: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Max: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Avg: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Total: <input type="checkbox">
+					</li>
+					<li class="grafana-target-segment">
+						Current: <input type="checkbox">
 					</li>
 				</ul>
 				<div class="clearfix"></div>
@@ -90,81 +184,3 @@
 	</div>
 </div>
 
-<div class="editor-row" style="margin-top: 20px">
-	<div class="section">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment" style="width: 90px">
-					<strong>Thresholds</strong>
-				</li>
-				<li class="grafana-target-segment">
-					Level 1
-				</li>
-				<li>
-					<input type="text" class="input-small grafana-target-segment-input">
-				</li>
-				<li class="grafana-target-segment">
-					<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
-				</li>
-				<li class="grafana-target-segment">
-					Level 2
-				</li>
-				<li>
-					<input type="text" class="input-small grafana-target-segment-input">
-				</li>
-				<li class="grafana-target-segment">
-					<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
-				</li>
-				<li class="grafana-target-segment">
-					Line mode
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-	</div>
-	</div>
-</div>
-
-<div class="editor-row" style="margin-top: 20px">
-	<div class="section">
-	<div class="grafana-target">
-		<div class="grafana-target-inner">
-			<ul class="grafana-segment-list">
-				<li class="grafana-target-segment" style="width: 90px">
-					<strong>Legend</strong>
-				</li>
-				<li class="grafana-target-segment">
-					Show: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Table: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Right side: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Hide empty: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Min: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Max: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Avg: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Total: <input type="checkbox">
-				</li>
-				<li class="grafana-target-segment">
-					Current: <input type="checkbox">
-				</li>
-			</ul>
-			<div class="clearfix"></div>
-		</div>
-	</div>
-	</div>
-</div>
-
diff --git a/src/css/less/forms.less b/src/css/less/forms.less
index e1affd09ae9..5018b9329da 100644
--- a/src/css/less/forms.less
+++ b/src/css/less/forms.less
@@ -15,7 +15,7 @@ input[type="checkbox"]+.cr1 {
   height: 19px;
   clear: none;
   text-indent: 2px;
-  margin-top: 4px;
+  margin: 0;
   padding: 0 0 0 20px;
   vertical-align:middle;
   background: url(@checkboxImageUrl) left top no-repeat;

From d6f9ff34ce828a18969415d3c8357f6e98e5c2d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 15:37:22 +0100
Subject: [PATCH 13/19] More work on new grap axis & grid edit tab, #1331

---
 .../features/annotations/partials/editor.html |   4 +-
 .../graphite/partials/query.editor.html       |  98 ++++++++--------
 src/app/panels/graph/axisEditor.html          | 111 ++++++++++++------
 src/css/less/grafana.less                     |   7 +-
 4 files changed, 130 insertions(+), 90 deletions(-)

diff --git a/src/app/features/annotations/partials/editor.html b/src/app/features/annotations/partials/editor.html
index b6118f15d63..14208dc2ab2 100644
--- a/src/app/features/annotations/partials/editor.html
+++ b/src/app/features/annotations/partials/editor.html
@@ -53,7 +53,7 @@
 					<label class="small">Datasource</label>
 					<select ng-model="currentAnnotation.datasource" ng-options="f.name as f.name for f in datasources" ng-change="datasourceChanged()"></select>
 				</div>
-				<div class="editor-option">
+				<div class="editor-option text-center">
 					<label class="small">Icon color</label>
 					<spectrum-picker ng-model="currentAnnotation.iconColor"></spectrum-picker>
 				</div>
@@ -62,7 +62,7 @@
 					<select class="input-mini" ng-model="currentAnnotation.iconSize" ng-options="f for f in [7,8,9,10,13,15,17,20,25,30]"></select>
 				</div>
 				<editor-opt-bool text="Grid line" model="currentAnnotation.showLine"></editor-opt-bool>
-				<div class="editor-option">
+				<div class="editor-option text-center">
 					<label class="small">Line color</label>
 					<spectrum-picker ng-model="currentAnnotation.lineColor"></spectrum-picker>
 				</div>
diff --git a/src/app/features/graphite/partials/query.editor.html b/src/app/features/graphite/partials/query.editor.html
index 8857ab83983..9487106ecdf 100755
--- a/src/app/features/graphite/partials/query.editor.html
+++ b/src/app/features/graphite/partials/query.editor.html
@@ -7,66 +7,68 @@
         ng-init="init()">
 
     <div class="grafana-target-inner">
-      <ul class="grafana-target-controls">
-        <li ng-show="parserError">
+      <ul class="grafana-segment-list pull-right">
+        <li ng-show="parserError" class="grafana-target-segment">
           <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
             <i class="fa fa-warning"></i>
           </a>
         </li>
-        <li>
+        <li class="grafana-target-segment">
           <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
             <i class="fa fa-pencil"></i>
           </a>
         </li>
-        <li class="dropdown">
-          <a  class="pointer dropdown-toggle"
-              data-toggle="dropdown"
-              tabindex="1">
-            <i class="fa fa-bars"></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="moveMetricQuery($index, $index-1)">
-                Move up
-              </a>
-            </li>
-						<li role="menuitem">
-							<a  tabindex="1"
-                  ng-click="moveMetricQuery($index, $index+1)">
-                Move down
-              </a>
-            </li>
-          </ul>
-        </li>
-        <li>
-          <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
-            <i class="fa fa-remove"></i>
-          </a>
-        </li>
-      </ul>
+        <li class="grafana-target-segment">
+					<div class="dropdown">
+						<a  class="pointer dropdown-toggle"
+							data-toggle="dropdown"
+							tabindex="1">
+							<i class="fa fa-bars"></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="moveMetricQuery($index, $index-1)">
+									Move up
+								</a>
+							</li>
+							<li role="menuitem">
+								<a  tabindex="1"
+									ng-click="moveMetricQuery($index, $index+1)">
+									Move down
+								</a>
+							</li>
+						</ul>
+					</div>
+				</li>
+				<li class="grafana-target-segment last">
+					<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+						<i class="fa fa-remove"></i>
+					</a>
+				</li>
+			</ul>
 
-      <ul class="grafana-segment-list">
+			<ul class="grafana-segment-list">
 				<li class="grafana-target-segment" style="min-width: 15px; text-align: center">
 					{{targetLetters[$index]}}
-        </li>
-        <li>
-          <a  class="grafana-target-segment"
-              ng-click="target.hide = !target.hide; get_data();"
-              role="menuitem">
-            <i class="fa fa-eye"></i>
-          </a>
-        </li>
-      </ul>
+				</li>
+				<li>
+					<a  class="grafana-target-segment"
+						ng-click="target.hide = !target.hide; get_data();"
+						role="menuitem">
+						<i class="fa fa-eye"></i>
+					</a>
+				</li>
+			</ul>
 
-      <input  type="text"
-              class="grafana-target-text-input span10"
+			<input  type="text"
+			class="grafana-target-text-input span10"
               ng-model="target.target"
               focus-me="showTextEditor"
               spellcheck='false'
diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 3bc49e3a1f0..6af8cb5c25a 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -1,10 +1,10 @@
 
 <div class="editor-row">
-  <div class="section">
+	<div class="section" style="margin-bottom: 20px">
 		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Left Y</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -19,7 +19,7 @@
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					   	empty-to-null ng-model="panel.grid.leftMax"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -27,7 +27,7 @@
 						Min
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	empty-to-null ng-model="panel.grid.leftMin"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -35,7 +35,7 @@
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="text" class="input-small grafana-target-segment-input"
 					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
@@ -43,7 +43,7 @@
 			</div>
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Right Y</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -58,7 +58,7 @@
 						&nbsp;&nbsp; Grid Max
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					   	empty-to-null ng-model="panel.grid.rightMax"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -66,7 +66,7 @@
 						Min
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="number" class="input-small grafana-target-segment-input" placeholder="auto"
 					  	empty-to-null ng-model="panel.grid.rightMin"
 							ng-change="render()" ng-model-onblur>
 					</li>
@@ -74,15 +74,20 @@
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input" placeholder="auto"
+						<input type="text" class="input-small grafana-target-segment-input"
 					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-			<div class="grafana-target-inner">
-				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+		</div>
+	</div>
+
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+		<div class="grafana-target-inner">
+			<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Show Axis</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -100,24 +105,17 @@
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-
-		</div>
-	</div>
-</div>
-
-<div class="editor-row" style="margin-top: 20px">
-	<div class="section">
-		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Thresholds</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Level 1
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input">
+						<input type="number" class="input-small grafana-target-segment-input"
+					  	ng-model="panel.grid.threshold1" ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						<spectrum-picker ng-model="panel.grid.threshold1Color" ng-change="render()" ></spectrum-picker>
@@ -126,56 +124,93 @@
 						Level 2
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input">
+						<input type="number" class="input-small grafana-target-segment-input"
+					  	ng-model="panel.grid.threshold2" ng-change="render()" ng-model-onblur>
 					</li>
 					<li class="grafana-target-segment">
 						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
 					</li>
 					<li class="grafana-target-segment">
-						Line mode
+						Line mode&nbsp;
+						<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
+								ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
+						<label for="panel.grid.thresholdLine" class="cr1"></label>
+
 					</li>
 				</ul>
 				<div class="clearfix"></div>
 			</div>
-
 		</div>
 	</div>
 </div>
 
-<div class="editor-row" style="margin-top: 20px">
+<div class="editor-row">
 	<div class="section">
 		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 90px">
+					<li class="grafana-target-segment" style="width: 100px">
 						<strong>Legend</strong>
 					</li>
 					<li class="grafana-target-segment">
-						Show: <input type="checkbox">
+						Show&nbsp;
+						<input class="cr1" id="panel.legend.show" type="checkbox"
+						    ng-model="panel.legend.show" ng-checked="panel.legend.show" ng-change="render()">
+						<label for="panel.legend.show" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Table: <input type="checkbox">
+						Table&nbsp;
+						<input class="cr1" id="panel.legend.alignAsTable" type="checkbox"
+						    ng-model="panel.legend.alignAsTable" ng-checked="panel.legend.alignAsTable" ng-change="render()">
+						<label for="panel.legend.alignAsTable" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Right side: <input type="checkbox">
+						Right side&nbsp;
+						<input class="cr1" id="panel.legend.rightSide" type="checkbox"
+						    ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
+						<label for="panel.legend.rightSide" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Hide empty: <input type="checkbox">
+						Hide empty&nbsp;
+						<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
+						    ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
+						<label for="panel.legend.hideEmpty" class="cr1"></label>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+		</div>
+	</div>
+	<div class="section">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 100px">
+						<strong>Legend values</strong>
 					</li>
 					<li class="grafana-target-segment">
-						Min: <input type="checkbox">
+						Min&nbsp;
+						<input class="cr1" id="panel.legend.min" type="checkbox"
+						    ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render()">
+						<label for="panel.legend.min" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Max: <input type="checkbox">
+						Max&nbsp;
+						<input class="cr1" id="panel.legend.max" type="checkbox"
+						    ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render()">
+						<label for="panel.legend.max" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Avg: <input type="checkbox">
+						Avg&nbsp;
+						<input class="cr1" id="panel.legend.avg" type="checkbox"
+						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render()">
+						<label for="panel.legend.avg" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
-						Total: <input type="checkbox">
-					</li>
-					<li class="grafana-target-segment">
-						Current: <input type="checkbox">
+						Current&nbsp;
+						<input class="cr1" id="panel.legend.current" type="checkbox"
+						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render()">
+						<label for="panel.legend.total" class="cr1"></label>
 					</li>
 				</ul>
 				<div class="clearfix"></div>
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index d5dad2c7920..6038356fafb 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -122,7 +122,6 @@
 .grafana-segment-list {
   list-style: none;
   margin: 0;
-  margin-right: 90px;
   >li {
     float: left;
   }
@@ -168,6 +167,9 @@
     padding: 8px 15px;
   }
 
+  &.last {
+    border-right: none;
+  }
 }
 
 .grafana-target-segment-icon {
@@ -243,7 +245,7 @@ input[type=text].grafana-target-text-input {
   border-right: 1px solid @grafanaTargetSegmentBorder;
 }
 
-input[type=text].grafana-target-segment-input {
+[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
   border: none;
   border-right: 1px solid @grafanaTargetSegmentBorder;
   margin: 0px;
@@ -347,6 +349,7 @@ select.grafana-target-segment-input {
   background: inherit;
   border: none;
   color: inherit;
+  padding: 0;
 }
 
 .sp-replacer:hover, .sp-replacer.sp-active {

From 66631da1c76a67877a6dfe03934358b805932e34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 15:47:47 +0100
Subject: [PATCH 14/19] Some last polish to thew new axis editor view, #1331

---
 src/app/panels/graph/axisEditor.html | 28 ++++++++++++++--------------
 src/css/less/grafana.less            |  3 +++
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 6af8cb5c25a..5190dd4a56a 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -4,13 +4,13 @@
 		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 100px">
+					<li class="grafana-target-segment" style="width: 80px">
 						<strong>Left Y</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Unit
 					</li>
-					<li class="dropdown" style="width: 140px;"
+					<li class="dropdown" style="width: 130px;"
 						ng-model="panel.y_formats[0]"
 						dropdown-typeahead="unitFormats"
 						dropdown-typeahead-on-select="setUnitFormat(0, $subItem)">
@@ -35,7 +35,7 @@
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input"
+						<input type="text" class="input-small grafana-target-segment-input last"
 					  	ng-model="panel.leftYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
@@ -43,13 +43,13 @@
 			</div>
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 100px">
+					<li class="grafana-target-segment" style="width: 80px">
 						<strong>Right Y</strong>
 					</li>
 					<li class="grafana-target-segment">
 						Unit
 					</li>
-					<li class="dropdown" style="width: 140px"
+					<li class="dropdown" style="width: 130px"
 						ng-model="panel.y_formats[1]"
 						dropdown-typeahead="unitFormats"
 						dropdown-typeahead-on-select="setUnitFormat(1, $subItem)">
@@ -74,7 +74,7 @@
 						Label
 					</li>
 					<li>
-						<input type="text" class="input-small grafana-target-segment-input"
+						<input type="text" class="input-small grafana-target-segment-input last"
 					  	ng-model="panel.rightYAxisLabel" ng-change="render()" ng-model-onblur>
 					</li>
 				</ul>
@@ -87,7 +87,7 @@
 		<div class="grafana-target">
 		<div class="grafana-target-inner">
 			<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 100px">
+					<li class="grafana-target-segment" style="width: 80px">
 						<strong>Show Axis</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -96,7 +96,7 @@
 								ng-model="panel['x-axis']" ng-checked="panel['x-axis']" ng-change="render()">
 						<label for="hideXAxis" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="grafana-target-segment last">
 						Y-Axis&nbsp;
 						<input class="cr1" id="hideYAxis" type="checkbox"
 						    ng-model="panel['y-axis']" ng-checked="panel['y-axis']" ng-change="render()">
@@ -107,7 +107,7 @@
 			</div>
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 100px">
+					<li class="grafana-target-segment" style="width: 80px">
 						<strong>Thresholds</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -130,7 +130,7 @@
 					<li class="grafana-target-segment">
 						<spectrum-picker ng-model="panel.grid.threshold2Color" ng-change="render()" ></spectrum-picker>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="grafana-target-segment last">
 						Line mode&nbsp;
 						<input class="cr1" id="panel.grid.thresholdLine" type="checkbox"
 								ng-model="panel.grid.thresholdLine" ng-checked="panel.grid.thresholdLine" ng-change="render()">
@@ -149,7 +149,7 @@
 		<div class="grafana-target">
 			<div class="grafana-target-inner">
 				<ul class="grafana-segment-list">
-					<li class="grafana-target-segment" style="width: 100px">
+					<li class="grafana-target-segment" style="width: 80px">
 						<strong>Legend</strong>
 					</li>
 					<li class="grafana-target-segment">
@@ -170,8 +170,8 @@
 						    ng-model="panel.legend.rightSide" ng-checked="panel.legend.rightSide" ng-change="render()">
 						<label for="panel.legend.rightSide" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
-						Hide empty&nbsp;
+					<li class="grafana-target-segment last">
+						<span bs-tooltip="'Hides series with only null values'">Hide empty&nbsp;<span>
 						<input class="cr1" id="panel.legend.hideEmpty" type="checkbox"
 						    ng-model="panel.legend.hideEmpty" ng-checked="panel.legend.hideEmpty" ng-change="render()">
 						<label for="panel.legend.hideEmpty" class="cr1"></label>
@@ -206,7 +206,7 @@
 						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render()">
 						<label for="panel.legend.avg" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment">
+					<li class="grafana-target-segment last">
 						Current&nbsp;
 						<input class="cr1" id="panel.legend.current" type="checkbox"
 						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render()">
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index 6038356fafb..fb6e85ac99c 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -251,6 +251,9 @@ input[type=text].grafana-target-text-input {
   margin: 0px;
   border-radius: 0;
   padding: 8px 4px;
+  &.last {
+    border-right: none;
+  }
 }
 
 input[type=checkbox].grafana-target-option-checkbox {

From a3da11c5bc001ce5dde69a2af976b9667fa73227 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 15:59:22 +0100
Subject: [PATCH 15/19] Fixed legend values check, got rid of the legend values
 checkbox, #1331

---
 src/app/panels/graph/axisEditor.html | 16 +++++++++++-----
 src/app/panels/graph/module.js       |  6 ++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app/panels/graph/axisEditor.html b/src/app/panels/graph/axisEditor.html
index 5190dd4a56a..a851038b91e 100644
--- a/src/app/panels/graph/axisEditor.html
+++ b/src/app/panels/graph/axisEditor.html
@@ -191,25 +191,31 @@
 					<li class="grafana-target-segment">
 						Min&nbsp;
 						<input class="cr1" id="panel.legend.min" type="checkbox"
-						    ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="render()">
+						    ng-model="panel.legend.min" ng-checked="panel.legend.min" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.min" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
 						Max&nbsp;
 						<input class="cr1" id="panel.legend.max" type="checkbox"
-						    ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="render()">
+						    ng-model="panel.legend.max" ng-checked="panel.legend.max" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.max" class="cr1"></label>
 					</li>
 					<li class="grafana-target-segment">
 						Avg&nbsp;
 						<input class="cr1" id="panel.legend.avg" type="checkbox"
-						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="render()">
+						    ng-model="panel.legend.avg" ng-checked="panel.legend.avg" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.avg" class="cr1"></label>
 					</li>
-					<li class="grafana-target-segment last">
+					<li class="grafana-target-segment">
 						Current&nbsp;
 						<input class="cr1" id="panel.legend.current" type="checkbox"
-						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="render()">
+						    ng-model="panel.legend.current" ng-checked="panel.legend.current" ng-change="legendValuesOptionChanged()">
+						<label for="panel.legend.current" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment last">
+						Total&nbsp;
+						<input class="cr1" id="panel.legend.total" type="checkbox"
+						    ng-model="panel.legend.total" ng-checked="panel.legend.total" ng-change="legendValuesOptionChanged()">
 						<label for="panel.legend.total" class="cr1"></label>
 					</li>
 				</ul>
diff --git a/src/app/panels/graph/module.js b/src/app/panels/graph/module.js
index 5fbc3a76e6b..7fde36b475f 100644
--- a/src/app/panels/graph/module.js
+++ b/src/app/panels/graph/module.js
@@ -283,6 +283,12 @@ function (angular, app, $, _, kbn, moment, TimeSeries, PanelMeta) {
       $scope.get_data();
     };
 
+    $scope.legendValuesOptionChanged = function() {
+      var legend = $scope.panel.legend;
+      legend.values = legend.min || legend.max || legend.avg || legend.current || legend.total;
+      $scope.render();
+    };
+
     $scope.exportCsv = function() {
       kbn.exportSeriesListToCsv($scope.seriesList);
     };

From 4544f794719f11589226b3ad88d160f63ff3d1fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 16:18:35 +0100
Subject: [PATCH 16/19] Fixed influxdb and opentsdb editors to use latest
 markup and css, #1331

---
 src/app/features/influxdb/funcEditor.js       |  2 +-
 .../influxdb/partials/query.editor.html       | 56 ++++++++++---------
 .../opentsdb/partials/query.editor.html       | 38 +++++++------
 src/css/less/grafana.less                     | 31 ----------
 4 files changed, 50 insertions(+), 77 deletions(-)

diff --git a/src/app/features/influxdb/funcEditor.js b/src/app/features/influxdb/funcEditor.js
index b96ed301d4d..d072a1fa2c4 100644
--- a/src/app/features/influxdb/funcEditor.js
+++ b/src/app/features/influxdb/funcEditor.js
@@ -133,4 +133,4 @@ function (angular, _, $) {
 
     });
 
-});
\ No newline at end of file
+});
diff --git a/src/app/features/influxdb/partials/query.editor.html b/src/app/features/influxdb/partials/query.editor.html
index a960b364e5e..e93cb232b28 100644
--- a/src/app/features/influxdb/partials/query.editor.html
+++ b/src/app/features/influxdb/partials/query.editor.html
@@ -8,22 +8,24 @@
 
     <div class="grafana-target-inner-wrapper">
       <div class="grafana-target-inner">
-        <ul class="grafana-target-controls">
-          <li class="dropdown">
-            <a class="pointer dropdown-toggle"
-               data-toggle="dropdown"
-               tabindex="1">
-              <i class="fa fa-bars"></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="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
-							<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
-							<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
-							<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
-						</ul>
+				<ul class="grafana-segment-list pull-right">
+					<li class="grafana-target-segment">
+						<div class="dropdown">
+							<a class="pointer dropdown-toggle"
+								data-toggle="dropdown"
+								tabindex="1">
+								<i class="fa fa-bars"></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="showQuery()" ng-hide="target.rawQuery">Raw query mode</a></li>
+								<li role="menuitem"><a tabindex="1" ng-click="hideQuery()" ng-show="target.rawQuery">Query editor mode</a></li>
+								<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index-1)">Move up </a></li>
+								<li role="menuitem"><a tabindex="1" ng-click="moveMetricQuery($index, $index+1)">Move down</a></li>
+							</ul>
+						</div>
 					</li>
-					<li>
+					<li class="grafana-target-segment last">
 						<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
 							<i class="fa fa-remove"></i>
 						</a>
@@ -42,7 +44,7 @@
 				<ul class="grafana-segment-list" ng-show="target.rawQuery">
 					<li>
 						<input type="text"
-               class="grafana-target-text-input span10"
+               class="grafana-target-segment-input span10"
                ng-model="target.query"
                placeholder="select ..."
                focus-me="target.rawQuery"
@@ -60,7 +62,7 @@
 					</li>
           <li>
             <input type="text"
-                   class="grafana-target-text-input span8"
+                   class="grafana-target-segment-input span8"
                    ng-model="target.series"
                    spellcheck='false'
                    bs-typeahead="listSeries"
@@ -76,7 +78,7 @@
 					</li>
 
 					<li>
-						<input type="text" class="input-medium grafana-target-text-input" ng-model="target.alias"
+						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias"
 						spellcheck='false' placeholder="alias" ng-blur="get_data()">
 					</li>
 
@@ -89,14 +91,14 @@
 				<!-- Raw Query mode  -->
 				<ul class="grafana-segment-list" ng-show="target.rawQuery">
 					<li class="grafana-target-segment">
-						<i class="fa eye invisible"></i>
+						<i class="fa fa-eye invisible"></i>
 					</li>
 					<li class="grafana-target-segment">
             alias
           </li>
           <li>
             <input type="text"
-                   class="input-medium grafana-target-text-input"
+                   class="input-medium grafana-target-segment-input"
                    ng-model="target.alias"
                    spellcheck='false'
                    placeholder="alias"
@@ -106,7 +108,7 @@
 						group by time
 					</li>
 					<li>
-						<input type="text" class="input-mini grafana-target-text-input" ng-model="target.interval"
+						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
 									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
 									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
 									 ng-model-onblur ng-change="get_data()" >
@@ -122,7 +124,7 @@
 						select
 					</li>
 					<li class="dropdown">
-						<span influxdb-func-editor class="grafana-target-segment">
+						<span influxdb-func-editor class="grafana-target-segment grafana-target-function">
 						</span>
 					</li>
 
@@ -130,7 +132,7 @@
 						where
 					</li>
 					<li>
-						<input type="text" class="input-medium grafana-target-text-input" ng-model="target.condition"
+						<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition"
 									 bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
 					</li>
 
@@ -138,18 +140,18 @@
 						group by time
 					</li>
 					<li>
-						<input type="text" class="input-mini grafana-target-text-input" ng-model="target.interval"
+						<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval"
 									 spellcheck='false' placeholder="{{interval}}" data-placement="right"
 									 bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
 									 ng-model-onblur ng-change="get_data()" >
 					</li>
 
 					<li class="grafana-target-segment">
-							<i class="fa fa-plus"></i>
+						and
 					</li>
 
 					<li>
-						<input type="text" class="input-small grafana-target-text-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
+						<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
 									 placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
 					</li>
 
@@ -190,7 +192,7 @@
 					group by time
 				</li>
 				<li>
-					<input type="text" class="input-medium grafana-target-text-input" ng-model="panel.interval" ng-blur="get_data();"
+					<input type="text" class="input-medium grafana-target-segment-input" ng-model="panel.interval" ng-blur="get_data();"
 					       spellcheck='false' placeholder="example: >10s">
 				</li>
 				<li class="grafana-target-segment">
diff --git a/src/app/features/opentsdb/partials/query.editor.html b/src/app/features/opentsdb/partials/query.editor.html
index f06904f5d2d..e2f6f995dac 100644
--- a/src/app/features/opentsdb/partials/query.editor.html
+++ b/src/app/features/opentsdb/partials/query.editor.html
@@ -7,24 +7,26 @@
 
     <div class="grafana-target-inner-wrapper">
       <div class="grafana-target-inner">
-        <ul class="grafana-target-controls">
-          <li class="dropdown">
-            <a  class="pointer dropdown-toggle"
-                data-toggle="dropdown"
-                tabindex="1">
-              <i class="fa fa-bars"></i>
-            </a>
-            <ul class="dropdown-menu pull-right" role="menu">
-              <li role="menuitem">
-                <a  tabindex="1"
-                    ng-click="duplicate()">
-                  Duplicate
-                </a>
-              </li>
-            </ul>
-          </li>
-          <li>
-            <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
+				<ul class="grafana-segment-list pull-right">
+					<li class="grafana-target-segment">
+						<div class="dropdown">
+							<a  class="pointer dropdown-toggle"
+								data-toggle="dropdown"
+								tabindex="1">
+								<i class="fa fa-bars"></i>
+							</a>
+							<ul class="dropdown-menu pull-right" role="menu">
+								<li role="menuitem">
+									<a  tabindex="1"
+										ng-click="duplicate()">
+										Duplicate
+									</a>
+								</li>
+							</ul>
+						</div>
+					</li>
+					<li class="grafana-target-segment last">
+						<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
               <i class="fa fa-remove"></i>
             </a>
           </li>
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index fb6e85ac99c..450f553bfc2 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -203,37 +203,6 @@ input[type=text].grafana-function-param-input {
   padding: 0;
 }
 
-.grafana-target-controls {
-  float: right;
-  list-style: none;
-  margin: 0;
-  text-align: right;
-
-  >li {
-    display: inline-block;
-    white-space: nowrap;
-  }
-
-  .fa {
-    position: relative;
-    top: 8px;
-  }
-
-  a {
-    padding: 8px 7px;
-    color: @grafanaTargetColor;
-    font-size: 16px;
-
-    .grafana-target-hidden & {
-      color: @grafanaTargetColorHide;
-    }
-
-    &:hover, &:focus {
-      text-decoration: none;
-    }
-  }
-}
-
 input[type=text].grafana-target-text-input {
   padding: 8px 7px;
   border: none;

From 1e9c51072acbc5b525cffdd39b7a11624837f115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 16:24:44 +0100
Subject: [PATCH 17/19] Added new units to dropdown in singlestat options, need
 to add new unit selector to singlestat panel, #1331

---
 src/app/panels/singlestat/editor.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/panels/singlestat/editor.html b/src/app/panels/singlestat/editor.html
index 1381038f10c..285479a675f 100644
--- a/src/app/panels/singlestat/editor.html
+++ b/src/app/panels/singlestat/editor.html
@@ -39,7 +39,7 @@
     <h5>Formats</h5>
 		<div class="editor-option">
 			<label class="small">Unit format</label>
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'Bps', bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
+			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'kbytes', 'bits', 'Bps', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
 		</div>
 	</div>
 </div>

From cc21c66b3a128ea680be2e491cb89f8da90b2677 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 17:02:58 +0100
Subject: [PATCH 18/19] Updated design of singlestat options view, it now uses
 the new unit format selector, #1331

---
 src/app/panels/singlestat/editor.html | 264 +++++++++++++++++---------
 src/app/panels/singlestat/module.js   |   6 +
 src/css/less/grafana.less             |   3 +
 3 files changed, 179 insertions(+), 94 deletions(-)

diff --git a/src/app/panels/singlestat/editor.html b/src/app/panels/singlestat/editor.html
index 285479a675f..17e94f317f5 100644
--- a/src/app/panels/singlestat/editor.html
+++ b/src/app/panels/singlestat/editor.html
@@ -1,113 +1,189 @@
 <div class="editor-row">
-	<div class="section">
-    <h5>Big value</h5>
-		<div class="editor-option">
-			<label class="small">Prefix</label>
-			<input type="text" class="input-small" ng-model="panel.prefix" ng-blur="render()"></input>
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Big value</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Prefix
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input"
+					  	ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
+					</li>
+					<li class="grafana-target-segment">
+						Value
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
+					</li>
+					<li class="grafana-target-segment">
+						Postfix
+					</li>
+					<li>
+						<input type="text" class="input-small grafana-target-segment-input last"
+					  	ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Font size</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Prefix
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+					</li>
+					<li class="grafana-target-segment">
+						Value
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+					</li>
+					<li class="grafana-target-segment">
+						Postfix
+					</li>
+					<li>
+						<select class="input-small grafana-target-segment-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Unit</strong>
+					</li>
+					<li class="dropdown" style="width: 130px;"
+						ng-model="panel.format"
+						dropdown-typeahead="unitFormats"
+						dropdown-typeahead-on-select="setUnitFormat($subItem)">
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
-		<div class="editor-option">
-			<label class="small">Value</label>
-			<select class="input-small" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
-		</div>
-		<div class="editor-option">
-			<label class="small">Postfix</label>
-			<input type="text" class="input-small" ng-model="panel.postfix" ng-blur="render()" ng-trim="false"></input>
-		</div>
-    <div class="editor-option">
-      <label class="small">Null point mode<tip>Define how null values should handled, connected = ignored</tip></label>
-      <select class="input-medium" ng-model="panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="get_data()"></select>
-    </div>
 	</div>
+</div>
 
-	<div class="section">
-    <h5>Big value font size</h5>
-		<div class="editor-option">
-			<label class="small">Prefix</label>
-			<select class="input-mini" style="width: 75px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
+<div class="editor-row">
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Coloring</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Background&nbsp;
+						<input class="cr1" id="panel.colorBackground" type="checkbox"
+						    ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
+						<label for="panel.colorBackground" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Value&nbsp;
+						<input class="cr1" id="panel.colorValue" type="checkbox"
+						    ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
+						<label for="panel.colorValue" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Thresholds<tip>Comma seperated values</tip>
+					</li>
+					<li>
+						<input type="text" class="input-large grafana-target-segment-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
+					</li>
+					<li class="grafana-target-segment">
+						Colors
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
+						<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment last">
+						<a class="pointer" ng-click="invertColorOrder()">invert order</a>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
-		<div class="editor-option">
-			<label class="small">Value</label>
-			<select class="input-mini" style="width: 75px;" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-		</div>
-		<div class="editor-option">
-			<label class="small">Postfix</label>
-			<select class="input-mini" style="width: 75px;" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
-		</div>
 	</div>
-
-	<div class="section">
-    <h5>Formats</h5>
-		<div class="editor-option">
-			<label class="small">Unit format</label>
-			<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'kbytes', 'bits', 'Bps', 'bps', 's', 'ms', 'µs', 'ns', 'percent', 'joule', 'watt', 'ev']" ng-change="render()"></select>
-		</div>
-	</div>
 </div>
 
 <div class="editor-row">
-	<div class="section">
-    <h5>Coloring</h5>
-		<editor-opt-bool text="Background" model="panel.colorBackground" change="setColoring({background: true})"></editor-opt-bool>
-		<editor-opt-bool text="Value" model="panel.colorValue" change="setColoring({value: true})"></editor-opt-bool>
-		<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue">
-			<label class="small">Thresholds<tip>Comma seperated values</tip></label>
-			<input type="text" class="input-large" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
-		</div>
-		<div class="editor-option" ng-show="panel.colorBackground || panel.colorValue">
-      <label class="small">Colors</label>
-      <spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
-      <spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
-			<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
-			<a class="pointer" ng-click="invertColorOrder()">invert order</a>
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment" style="width: 80px">
+						<strong>Spark lines</strong>
+					</li>
+					<li class="grafana-target-segment">
+						Show&nbsp;
+						<input class="cr1" id="panel.sparkline.show" type="checkbox"
+						    ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
+						<label for="panel.sparkline.show" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Background mode&nbsp;
+						<input class="cr1" id="panel.sparkline.full" type="checkbox"
+						    ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
+						<label for="panel.sparkline.full" class="cr1"></label>
+					</li>
+					<li class="grafana-target-segment">
+						Line Color
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
+					</li>
+					<li class="grafana-target-segment">
+						Fill Color
+					</li>
+					<li class="grafana-target-segment">
+						<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
+					</li>
+				</ul>
+				<div class="clearfix"></div>
+			</div>
 		</div>
 	</div>
-
-	<div class="section">
-		<h5>Spark lines</h5>
-		<editor-opt-bool text="Spark line" model="panel.sparkline.show" change="render()"></editor-opt-bool>
-		<editor-opt-bool text="Background mode" model="panel.sparkline.full" change="render()"></editor-opt-bool>
-		<div class="editor-option">
-			<label class="small">Line color</label>
-			<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
-		</div>
-		<div class="editor-option">
-			<label class="small">Fill color</label>
-			<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
-		</div>
-	</div>
 </div>
 
 <div class="editor-row">
-	<div class="section">
-		<h5>Value to text mapping</h5>
-		<div class="editor-option">
-			<label class="small">Specify mappings</label>
-			<div class="grafana-target">
-				<div class="grafana-target-inner">
-					<ul class="grafana-segment-list">
-						<li class="grafana-target-segment"  ng-repeat-start="map in panel.valueMaps">
-							<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
-						</li>
-
-						<li>
-							<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()">
-						</li>
-						<li class="grafana-target-segment">
-							<i class="fa fa-arrow-right"></i>
-						</li>
-						<li ng-repeat-end>
-							<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()">
-						</li>
+	<div class="section" style="margin-bottom: 20px">
+		<div class="grafana-target">
+			<div class="grafana-target-inner">
+				<ul class="grafana-segment-list">
+					<li class="grafana-target-segment">
+						<strong>Value to text mapping</strong>
+					</li>
+					<li class="grafana-target-segment"  ng-repeat-start="map in panel.valueMaps">
+						<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
+					</li>
+					<li>
+						<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()">
+					</li>
+					<li class="grafana-target-segment">
+						<i class="fa fa-arrow-right"></i>
+					</li>
+					<li ng-repeat-end>
+						<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()">
+					</li>
 
-						<li>
-							<a class="pointer grafana-target-segment" ng-click="addValueMap();">
-								<i class="fa fa-plus"></i>
-							</a>
-						</li>
+					<li>
+						<a class="pointer grafana-target-segment" ng-click="addValueMap();">
+							<i class="fa fa-plus"></i>
+						</a>
+					</li>
 
-					</ul>
-					<div class="clearfix"></div>
-				</div>
+				</ul>
+				<div class="clearfix"></div>
 			</div>
 		</div>
 	</div>
diff --git a/src/app/panels/singlestat/module.js b/src/app/panels/singlestat/module.js
index 3568cc53c64..75e657094ef 100644
--- a/src/app/panels/singlestat/module.js
+++ b/src/app/panels/singlestat/module.js
@@ -57,6 +57,12 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
     };
 
     _.defaults($scope.panel, _d);
+    $scope.unitFormats = kbn.getUnitFormats();
+
+    $scope.setUnitFormat = function(subItem) {
+      $scope.panel.format = subItem.value;
+      $scope.render();
+    };
 
     $scope.init = function() {
       panelSrv.init($scope);
diff --git a/src/css/less/grafana.less b/src/css/less/grafana.less
index 450f553bfc2..ecb66db6f22 100644
--- a/src/css/less/grafana.less
+++ b/src/css/less/grafana.less
@@ -236,6 +236,9 @@ select.grafana-target-segment-input {
   border-radius: 0;
   height: 36px;
   padding: 8px 5px;
+  &.last {
+    border-right: none;
+  }
 }
 
 .grafana-target .dropdown {

From 14e1bc870291fe24e3a2ec575e626bb5265e5cf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel.odegaard@gmail.com>
Date: Mon, 12 Jan 2015 17:05:43 +0100
Subject: [PATCH 19/19] Graph & Singlestat: New axis/unit format selector and
 more units (kbytes, Joule, Watt, eV), and new design for graph axis & grid
 tab and single stat options tab views, #1331

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c0c5802ccef..6c82ce61a35 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,8 @@
 # 2.0.0 (unreleased)
 
+**New features**
+- [Issue #1331](https://github.com/grafana/grafana/issues/1331). Graph & Singlestat: New axis/unit format selector and more units (kbytes, Joule, Watt, eV), and new design for graph axis & grid tab and single stat options tab views
+
 **Enhancements**
 - [Issue #1297](https://github.com/grafana/grafana/issues/1297). Graphite: Added cumulative and minimumBelow graphite functions
 - [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts