diff --git a/src/app/components/require.config.js b/src/app/components/require.config.js index 29a320f10c8..e987b4cbf73 100644 --- a/src/app/components/require.config.js +++ b/src/app/components/require.config.js @@ -37,6 +37,8 @@ require.config({ 'jquery.flot.stack': '../vendor/jquery/jquery.flot.stack', 'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent', 'jquery.flot.time': '../vendor/jquery/jquery.flot.time', + 'jquery.flot.byte': '../vendor/jquery/jquery.flot.byte', + modernizr: '../vendor/modernizr-2.6.1', elasticjs: '../vendor/elasticjs/elastic-angular-client', @@ -66,6 +68,7 @@ require.config({ // simple dependency declaration 'jquery-ui': ['jquery'], 'jquery.flot': ['jquery'], + 'jquery.flot.byte': ['jquery', 'jquery.flot'], 'jquery.flot.pie': ['jquery', 'jquery.flot'], 'jquery.flot.events': ['jquery', 'jquery.flot'], 'jquery.flot.selection':['jquery', 'jquery.flot'], diff --git a/src/app/panels/histogram/editor.html b/src/app/panels/histogram/editor.html index 15490701bb4..d3192e6914d 100644 --- a/src/app/panels/histogram/editor.html +++ b/src/app/panels/histogram/editor.html @@ -16,6 +16,9 @@ +
+ +
diff --git a/src/app/panels/histogram/module.js b/src/app/panels/histogram/module.js index 6d33242c17b..5abcee6e12f 100644 --- a/src/app/panels/histogram/module.js +++ b/src/app/panels/histogram/module.js @@ -39,6 +39,7 @@ define([ 'jquery.flot.events', 'jquery.flot.selection', 'jquery.flot.time', + 'jquery.flot.byte', 'jquery.flot.stack', 'jquery.flot.stackpercent' ], @@ -116,6 +117,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { options : true, derivative : false, scale : 1, + y_as_bytes : true, tooltip : { value_type: 'cumulative', query_as_alias: true @@ -506,7 +508,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { yaxis: { show: scope.panel['y-axis'], 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: { 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) { options.events = { levels: 1, diff --git a/src/vendor/jquery/jquery.flot.byte.js b/src/vendor/jquery/jquery.flot.byte.js new file mode 100644 index 00000000000..063e0750327 --- /dev/null +++ b/src/vendor/jquery/jquery.flot.byte.js @@ -0,0 +1,107 @@ +(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