Skip to content

N
nexpie-grafana-theme
Commit c4219ba0 by Torkel Odegaard
Options

Refactoring time formats, Closes #142

parent 47e54b23
Showing with 93 additions and 95 deletions
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";
}
};
......
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('<img src="' + url + '"></img>');
}
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";
}
if (format === 'short') {
axis.tickFormatter = function(val) {
return kbn.shortFormat(val, 1);
};
}
if (format === 'ms') {
axis.tickFormatter = kbn.msFormat;
axis.mode = 'byte';
}
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 = $('<div>');
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 = '<small style="font-size:0.9em;">' +
'<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' +
(item.series.info.alias || item.series.info.query)+
(seriesInfo.alias || seriesInfo.query)+
'</small><br>';
} 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(item.series.info.y_format === 'short') {
value = kbn.shortFormat(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 === '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('<img src="' + url + '"></img>');
}
elem.bind("plotselected", function (event, ranges) {
filterSrv.setTime({
from : moment.utc(ranges.xaxis.from).toDate(),
......
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({
......
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment