diff --git a/src/app/components/kbn.js b/src/app/components/kbn.js index 7d04da18f39..52e1f6c1695 100644 --- a/src/app/components/kbn.js +++ b/src/app/components/kbn.js @@ -505,27 +505,52 @@ function($, _, moment) { return (size.toFixed(decimals) + ext); }; - kbn.msFormat = function(size) { + kbn.getFormatFunction = function(formatName, decimals) { + switch(formatName) { + case 'short': + return function(val) { + return kbn.shortFormat(val, decimals); + }; + case 'bytes': + return function(val) { + return kbn.byteFormat(val, decimals); + }; + case 'ms': + return function(val) { + return kbn.msFormat(val, decimals); + }; + case 'µs': + return function(val) { + return kbn.microsFormat(val, decimals); + }; + default: + return function(val) { + return val % 1 === 0 ? val : val.toFixed(decimals); + }; + } + }; + + kbn.msFormat = function(size, decimals) { if (size < 1000) { return size.toFixed(0) + " ms"; } else if (size < 60000) { - return (size / 1000).toFixed(1) + " s"; + return (size / 1000).toFixed(decimals) + " s"; } else { - return (size / 60000).toFixed(1) + " min"; + return (size / 60000).toFixed(decimals) + " min"; } }; - kbn.microsFormat = function(size) { + kbn.microsFormat = function(size, decimals) { if (size < 1000) { return size.toFixed(0) + " µs"; } else if (size < 1000000) { - return (size / 1000).toFixed(1) + " ms"; + return (size / 1000).toFixed(decimals) + " ms"; } else { - return (size / 1000000).toFixed(1) + " s"; + return (size / 1000000).toFixed(decimals) + " s"; } }; diff --git a/src/app/directives/grafanaGraph.js b/src/app/directives/grafanaGraph.js index a2f13b9c27d..545ab351f5f 100644 --- a/src/app/directives/grafanaGraph.js +++ b/src/app/directives/grafanaGraph.js @@ -155,48 +155,6 @@ function (angular, $, kbn, moment, _) { }; } - function render_panel_as_graphite_png(url) { - url += '&width=' + elem.width(); - url += '&height=' + elem.css('height').replace('px', ''); - url += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground - url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter - url += scope.panel.stack ? '&areaMode=stacked' : ''; - url += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : ''; - url += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : ''; - url += scope.panel.legend ? '' : '&hideLegend=true'; - url += scope.panel.grid.min ? '&yMin=' + scope.panel.grid.min : ''; - url += scope.panel.grid.max ? '&yMax=' + scope.panel.grid.max : ''; - url += scope.panel['x-axis'] ? '' : '&hideAxes=true'; - url += scope.panel['y-axis'] ? '' : '&hideYAxis=true'; - - switch(scope.panel.y_formats[0]) { - case 'bytes': - url += '&yUnitSystem=binary'; - break; - case 'short': - url += '&yUnitSystem=si'; - break; - case 'none': - url += '&yUnitSystem=none'; - break; - } - - switch(scope.panel.nullPointMode) { - case 'connected': - url += '&lineMode=connected'; - break; - case 'null': - break; // graphite default lineMode - case 'null as zero': - url += "&drawNullAsZero=true"; - break; - } - - url += scope.panel.steppedLine ? '&lineMode=staircase' : ''; - - elem.html(''); - } - function addGridThresholds(options, panel) { if (panel.grid.threshold1) { var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null); @@ -290,18 +248,10 @@ function (angular, $, kbn, moment, _) { function configureAxisMode(axis, format) { if (format === 'bytes') { - axis.mode = "byte"; + axis.mode = 'byte'; } - if (format === 'short') { - axis.tickFormatter = function(val) { - return kbn.shortFormat(val, 1); - }; - } - if (format === 'ms') { - axis.tickFormatter = kbn.msFormat; - } - if (format === 'µs') { - axis.tickFormatter = kbn.microsFormat; + else if (format !== 'none') { + axis.tickFormatter = kbn.getFormatFunction(format, 1); } } @@ -333,28 +283,30 @@ function (angular, $, kbn, moment, _) { var $tooltip = $('
'); elem.bind("plothover", function (event, pos, item) { - var group, value, timestamp; + var group, value, timestamp, seriesInfo, format; + if (item) { - if (item.series.info.alias || scope.panel.tooltip.query_as_alias) { + seriesInfo = item.series.info; + format = scope.panel.y_formats[seriesInfo.yaxis - 1]; + + if (seriesInfo.alias || scope.panel.tooltip.query_as_alias) { group = '' + '' + ' ' + - (item.series.info.alias || item.series.info.query)+ + (seriesInfo.alias || seriesInfo.query)+ '
'; } else { group = kbn.query_color_dot(item.series.color, 15) + ' '; } - value = (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') ? - item.datapoint[1] - item.datapoint[2] : - item.datapoint[1]; - if(item.series.info.y_format === 'bytes') { - value = kbn.byteFormat(value, 2); + + if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') { + value = item.datapoint[1] - item.datapoint[2]; } - if(item.series.info.y_format === 'short') { - value = kbn.shortFormat(value, 2); - } - if(item.series.info.y_format === 'ms') { - value = kbn.msFormat(value); + else { + value = item.datapoint[1]; } + + value = kbn.getFormatFunction(format, 2)(value); + timestamp = dashboard.current.timezone === 'browser' ? moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') : moment.utc(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss'); @@ -368,6 +320,48 @@ function (angular, $, kbn, moment, _) { } }); + function render_panel_as_graphite_png(url) { + url += '&width=' + elem.width(); + url += '&height=' + elem.css('height').replace('px', ''); + url += '&bgcolor=1f1f1f'; // @grayDarker & @kibanaPanelBackground + url += '&fgcolor=BBBFC2'; // @textColor & @grayLighter + url += scope.panel.stack ? '&areaMode=stacked' : ''; + url += scope.panel.fill !== 0 ? ('&areaAlpha=' + (scope.panel.fill/10).toFixed(1)) : ''; + url += scope.panel.linewidth !== 0 ? '&lineWidth=' + scope.panel.linewidth : ''; + url += scope.panel.legend ? '' : '&hideLegend=true'; + url += scope.panel.grid.min ? '&yMin=' + scope.panel.grid.min : ''; + url += scope.panel.grid.max ? '&yMax=' + scope.panel.grid.max : ''; + url += scope.panel['x-axis'] ? '' : '&hideAxes=true'; + url += scope.panel['y-axis'] ? '' : '&hideYAxis=true'; + + switch(scope.panel.y_formats[0]) { + case 'bytes': + url += '&yUnitSystem=binary'; + break; + case 'short': + url += '&yUnitSystem=si'; + break; + case 'none': + url += '&yUnitSystem=none'; + break; + } + + switch(scope.panel.nullPointMode) { + case 'connected': + url += '&lineMode=connected'; + break; + case 'null': + break; // graphite default lineMode + case 'null as zero': + url += "&drawNullAsZero=true"; + break; + } + + url += scope.panel.steppedLine ? '&lineMode=staircase' : ''; + + elem.html(''); + } + elem.bind("plotselected", function (event, ranges) { filterSrv.setTime({ from : moment.utc(ranges.xaxis.from).toDate(), diff --git a/src/app/panels/graphite/module.js b/src/app/panels/graphite/module.js index ecbccecc511..6c71deea06f 100644 --- a/src/app/panels/graphite/module.js +++ b/src/app/panels/graphite/module.js @@ -326,8 +326,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { alias: alias, color: color, enable: true, - yaxis: yaxis, - y_format: $scope.panel.y_formats[yaxis - 1] + yaxis: yaxis }; var series = new timeSeries.ZeroFilled({ diff --git a/src/app/panels/graphite/timeSeries.js b/src/app/panels/graphite/timeSeries.js index d7a3a38d2d6..ec15f17aaf9 100644 --- a/src/app/panels/graphite/timeSeries.js +++ b/src/app/panels/graphite/timeSeries.js @@ -54,7 +54,7 @@ function (_, kbn) { this.info.avg = (this.info.total / result.length); this.info.current = result[result.length-1][1]; - var formater = getFormater(yFormats[this.yaxis - 1]); + var formater = kbn.getFormatFunction(yFormats[this.yaxis - 1], 2); this.info.avg = this.info.avg ? formater(this.info.avg) : null; this.info.current = this.info.current ? formater(this.info.current) : null; this.info.min = this.info.min ? formater(this.info.min) : null; @@ -65,25 +65,6 @@ function (_, kbn) { return result; }; - function getFormater(yformat) { - switch(yformat) { - case 'bytes': - return kbn.byteFormat; - case 'short': - return kbn.shortFormat; - case 'ms': - return kbn.msFormat; - default: - return function(val) { - if (val % 1 === 0) { - return val; - } - else { - return val.toFixed(2); - } - }; - } - } return ts; }); \ No newline at end of file