Merge pull request #238 from maage/bits-y-axis-format

Fixes #148 add bits format for Y-Axis

src/app/components/kbn.js

@@ -458,6 +458,53 @@ function($, _, moment) {
     return (size.toFixed(decimals) + ext);
   };
 
+  kbn.bitFormat = function(size, decimals) {
+    var ext, steps = 0;
+
+    if(_.isUndefined(decimals)) {
+      decimals = 2;
+    } else if (decimals === 0) {
+      decimals = undefined;
+    }
+
+    while (Math.abs(size) >= 1024) {
+      steps++;
+      size /= 1024;
+    }
+
+    switch (steps) {
+    case 0:
+      ext = " b";
+      break;
+    case 1:
+      ext = " Kb";
+      break;
+    case 2:
+      ext = " Mb";
+      break;
+    case 3:
+      ext = " Gb";
+      break;
+    case 4:
+      ext = " Tb";
+      break;
+    case 5:
+      ext = " Pb";
+      break;
+    case 6:
+      ext = " Eb";
+      break;
+    case 7:
+      ext = " Zb";
+      break;
+    case 8:
+      ext = " Yb";
+      break;
+    }
+
+    return (size.toFixed(decimals) + ext);
+  };
+
   kbn.shortFormat = function(size, decimals) {
     var ext, steps = 0;
 
@@ -515,6 +562,10 @@ function($, _, moment) {
       return function(val) {
         return kbn.byteFormat(val, decimals);
       };
+    case 'bits':
+      return function(val) {
+        return kbn.bitFormat(val, decimals);
+      };
     case 'ms':
       return function(val) {
         return kbn.msFormat(val, decimals);

src/app/directives/grafanaGraph.js

@@ -336,6 +336,9 @@ function (angular, $, kbn, moment, _) {
           case 'bytes':
             url += '&yUnitSystem=binary';
             break;
+          case 'bits':
+            url += '&yUnitSystem=binary';
+            break;
           case 'short':
             url += '&yUnitSystem=si';
             break;

src/app/panels/graphite/axisEditor.html

@@ -10,11 +10,11 @@
     </div>
     <div class="editor-option">
       <label class="small">Left Y 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', 'ms', 'µs']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y_formats[0]" ng-options="f for f in ['none','short','bytes', 'bits', 'ms', 'µs']" ng-change="render()"></select>
     </div>
     <div class="editor-option">
       <label class="small">Right Y 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', 'ms', 'µs']" ng-change="render()"></select>
+      <select class="input-small" ng-model="panel.y_formats[1]" ng-options="f for f in ['none','short','bytes', 'bits', 'ms', 'µs']" ng-change="render()"></select>
     </div>
 
     <div class="editor-option">
@@ -102,4 +102,4 @@
 
   </div>
 
-</div>
+</div>

src/app/panels/graphite/module.js

@@ -84,7 +84,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
        */
       scale         : 1,
       /** @scratch /panels/histogram/3
-       * y_formats :: 'none','bytes','short', 'ms'
+       * y_formats :: 'none','bytes','bits','short', 'ms'
        */
       y_formats    : ['short', 'short'],
       /** @scratch /panels/histogram/5