Added byte representation of histogram y-axis

src/app/components/require.config.js

@@ -37,6 +37,8 @@ require.config({
     'jquery.flot.stack':      '../vendor/jquery/jquery.flot.stack',
     'jquery.flot.stack':      '../vendor/jquery/jquery.flot.stack',
     'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent',
     'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent',
     'jquery.flot.time':       '../vendor/jquery/jquery.flot.time',
     'jquery.flot.time':       '../vendor/jquery/jquery.flot.time',
+    'jquery.flot.byte':       '../vendor/jquery/jquery.flot.byte',
+
 
 
     modernizr:                '../vendor/modernizr-2.6.1',
     modernizr:                '../vendor/modernizr-2.6.1',
     elasticjs:                '../vendor/elasticjs/elastic-angular-client',
     elasticjs:                '../vendor/elasticjs/elastic-angular-client',
@@ -66,6 +68,7 @@ require.config({
     // simple dependency declaration
     // simple dependency declaration
     'jquery-ui':            ['jquery'],
     'jquery-ui':            ['jquery'],
     'jquery.flot':          ['jquery'],
     'jquery.flot':          ['jquery'],
+    'jquery.flot.byte':     ['jquery', 'jquery.flot'],
     'jquery.flot.pie':      ['jquery', 'jquery.flot'],
     'jquery.flot.pie':      ['jquery', 'jquery.flot'],
     'jquery.flot.events':   ['jquery', 'jquery.flot'],
     'jquery.flot.events':   ['jquery', 'jquery.flot'],
     'jquery.flot.selection':['jquery', 'jquery.flot'],
     'jquery.flot.selection':['jquery', 'jquery.flot'],

src/app/panels/histogram/editor.html

@@ -17,6 +17,9 @@
         <input type="text" class="input-mini" ng-model="panel.scale">
         <input type="text" class="input-mini" ng-model="panel.scale">
     </div>
     </div>
     <div class="editor-option">
     <div class="editor-option">
+      <label class="small">Bytes <tip>Y-axis as bytes, eg 4 Mib instead of 4000000</tip></label><input type="checkbox" ng-model="panel.y_as_bytes" ng-checked="panel.y_as_bytes">
+    </div>
+    <div class="editor-option">
       <label class="small">Seconds <tip>Normalize intervals to per-second</tip></label><input type="checkbox" ng-model="panel.scaleSeconds" ng-checked="panel.scaleSeconds">
       <label class="small">Seconds <tip>Normalize intervals to per-second</tip></label><input type="checkbox" ng-model="panel.scaleSeconds" ng-checked="panel.scaleSeconds">
     </div>
     </div>
     <div class="editor-option">
     <div class="editor-option">

src/app/panels/histogram/module.js

@@ -39,6 +39,7 @@ define([
   'jquery.flot.events',
   'jquery.flot.events',
   'jquery.flot.selection',
   'jquery.flot.selection',
   'jquery.flot.time',
   'jquery.flot.time',
+  'jquery.flot.byte',
   'jquery.flot.stack',
   'jquery.flot.stack',
   'jquery.flot.stackpercent'
   'jquery.flot.stackpercent'
 ],
 ],
@@ -116,6 +117,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       options       : true,
       options       : true,
       derivative    : false,
       derivative    : false,
       scale         : 1,
       scale         : 1,
+      y_as_bytes    : true,
       tooltip       : {
       tooltip       : {
         value_type: 'cumulative',
         value_type: 'cumulative',
         query_as_alias: true
         query_as_alias: true
@@ -506,7 +508,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               yaxis: {
               yaxis: {
                 show: scope.panel['y-axis'],
                 show: scope.panel['y-axis'],
                 min: scope.panel.grid.min,
                 min: scope.panel.grid.min,
-                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max,
+                max: scope.panel.percentage && scope.panel.stack ? 100 : scope.panel.grid.max
               },
               },
               xaxis: {
               xaxis: {
                 timezone: scope.panel.timezone,
                 timezone: scope.panel.timezone,
@@ -526,6 +528,10 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
               }
               }
             };
             };
 
 
+            if(scope.panel.y_as_bytes) {
+              options.yaxis.mode = "byte";
+            }
+
             if(scope.panel.annotate.enable) {
             if(scope.panel.annotate.enable) {
               options.events = {
               options.events = {
                 levels: 1,
                 levels: 1,

src/vendor/jquery/jquery.flot.byte.js

+(function ($) {
+  "use strict";
+
+  var options = {};
+
+  //Round to nearby lower multiple of base
+  function floorInBase(n, base) {
+    return base * Math.floor(n / base);
+  }
+
+  function init(plot) {
+    plot.hooks.processDatapoints.push(function (plot) {
+      $.each(plot.getAxes(), function(axisName, axis) {
+        var opts = axis.options;
+        if (opts.mode === "byte" || opts.mode === "byteRate") {
+          axis.tickGenerator = function (axis) {
+            var returnTicks = [],
+              tickSize = 2,
+              delta = axis.delta,
+              steps = 0,
+              tickMin = 0,
+              tickVal,
+              tickCount = 0;
+
+            //Set the reference for the formatter
+            if (opts.mode === "byteRate") {
+              axis.rate = true;
+            }
+
+            //Enforce maximum tick Decimals
+            if (typeof opts.tickDecimals === "number") {
+              axis.tickDecimals = opts.tickDecimals;
+            } else {
+              axis.tickDecimals = 2;
+            }
+
+            //Count the steps
+            while (Math.abs(delta) >= 1024) {
+              steps++;
+              delta /= 1024;
+            }
+
+            //Set the tick size relative to the remaining delta
+            while (tickSize <= 1024) {
+              if (delta <= tickSize) {
+                break;
+              }
+              tickSize *= 2;
+            }
+
+            //Tell flot the tickSize we've calculated
+            if (typeof opts.minTickSize !== "undefined" && tickSize < opts.minTickSize) {
+              axis.tickSize = opts.minTickSize;
+            } else {
+              axis.tickSize = tickSize * Math.pow(1024,steps);
+            }
+
+            //Calculate the new ticks
+            tickMin = floorInBase(axis.min, axis.tickSize);
+            do {
+              tickVal = tickMin + (tickCount++) * axis.tickSize;
+              returnTicks.push(tickVal);
+            } while (tickVal < axis.max);
+
+            return returnTicks;
+          };
+
+          axis.tickFormatter = function(size, axis) {
+            var ext, steps = 0;
+
+            while (Math.abs(size) >= 1024) {
+              steps++;
+              size /= 1024;
+            }
+
+
+            switch (steps) {
+              case 0: ext = " B";  break;
+              case 1: ext = " KiB"; break;
+              case 2: ext = " MiB"; break;
+              case 3: ext = " GiB"; break;
+              case 4: ext = " TiB"; break;
+              case 5: ext = " PiB"; break;
+              case 6: ext = " EiB"; break;
+              case 7: ext = " ZiB"; break;
+              case 8: ext = " YiB"; break;
+            }
+
+
+            if (typeof axis.rate !== "undefined") {
+              ext += "/s";
+            }
+
+            return (size.toFixed(axis.tickDecimals) + ext);
+          };
+        }
+      });
+    });
+  }
+
+  $.plot.plugins.push({
+    init: init,
+    options: options,
+    name: "byte",
+    version: "0.1"
+  });
+})(jQuery);
\ No newline at end of file