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) { ...@@ -505,27 +505,52 @@ function($, _, moment) {
return (size.toFixed(decimals) + ext); 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) { if (size < 1000) {
return size.toFixed(0) + " ms"; return size.toFixed(0) + " ms";
} }
else if (size < 60000) { else if (size < 60000) {
return (size / 1000).toFixed(1) + " s"; return (size / 1000).toFixed(decimals) + " s";
} }
else { 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) { if (size < 1000) {
return size.toFixed(0) + " µs"; return size.toFixed(0) + " µs";
} }
else if (size < 1000000) { else if (size < 1000000) {
return (size / 1000).toFixed(1) + " ms"; return (size / 1000).toFixed(decimals) + " ms";
} }
else { 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, _) { ...@@ -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) { function addGridThresholds(options, panel) {
if (panel.grid.threshold1) { if (panel.grid.threshold1) {
var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null); var limit1 = panel.grid.thresholdLine ? panel.grid.threshold1 : (panel.grid.threshold2 || null);
...@@ -290,18 +248,10 @@ function (angular, $, kbn, moment, _) { ...@@ -290,18 +248,10 @@ function (angular, $, kbn, moment, _) {
function configureAxisMode(axis, format) { function configureAxisMode(axis, format) {
if (format === 'bytes') { if (format === 'bytes') {
axis.mode = "byte"; axis.mode = 'byte';
} }
if (format === 'short') { else if (format !== 'none') {
axis.tickFormatter = function(val) { axis.tickFormatter = kbn.getFormatFunction(format, 1);
return kbn.shortFormat(val, 1);
};
}
if (format === 'ms') {
axis.tickFormatter = kbn.msFormat;
}
if (format === 'µs') {
axis.tickFormatter = kbn.microsFormat;
} }
} }
...@@ -333,28 +283,30 @@ function (angular, $, kbn, moment, _) { ...@@ -333,28 +283,30 @@ function (angular, $, kbn, moment, _) {
var $tooltip = $('<div>'); var $tooltip = $('<div>');
elem.bind("plothover", function (event, pos, item) { elem.bind("plothover", function (event, pos, item) {
var group, value, timestamp; var group, value, timestamp, seriesInfo, format;
if (item) { 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;">' + group = '<small style="font-size:0.9em;">' +
'<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' + '<i class="icon-circle" style="color:'+item.series.color+';"></i>' + ' ' +
(item.series.info.alias || item.series.info.query)+ (seriesInfo.alias || seriesInfo.query)+
'</small><br>'; '</small><br>';
} else { } else {
group = kbn.query_color_dot(item.series.color, 15) + ' '; 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] : if (scope.panel.stack && scope.panel.tooltip.value_type === 'individual') {
item.datapoint[1]; value = item.datapoint[1] - item.datapoint[2];
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(item.series.info.y_format === 'ms') { else {
value = kbn.msFormat(value); value = item.datapoint[1];
} }
value = kbn.getFormatFunction(format, 2)(value);
timestamp = dashboard.current.timezone === 'browser' ? timestamp = dashboard.current.timezone === 'browser' ?
moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') : moment(item.datapoint[0]).format('YYYY-MM-DD HH:mm:ss') :
moment.utc(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, _) { ...@@ -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) { elem.bind("plotselected", function (event, ranges) {
filterSrv.setTime({ filterSrv.setTime({
from : moment.utc(ranges.xaxis.from).toDate(), from : moment.utc(ranges.xaxis.from).toDate(),
......
src/app/panels/graphite/module.js
...@@ -326,8 +326,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) { ...@@ -326,8 +326,7 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
alias: alias, alias: alias,
color: color, color: color,
enable: true, enable: true,
yaxis: yaxis, yaxis: yaxis
y_format: $scope.panel.y_formats[yaxis - 1]
}; };
var series = new timeSeries.ZeroFilled({ var series = new timeSeries.ZeroFilled({
......
src/app/panels/graphite/timeSeries.js
...@@ -54,7 +54,7 @@ function (_, kbn) { ...@@ -54,7 +54,7 @@ function (_, kbn) {
this.info.avg = (this.info.total / result.length); this.info.avg = (this.info.total / result.length);
this.info.current = result[result.length-1][1]; 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.avg = this.info.avg ? formater(this.info.avg) : null;
this.info.current = this.info.current ? formater(this.info.current) : null; this.info.current = this.info.current ? formater(this.info.current) : null;
this.info.min = this.info.min ? formater(this.info.min) : null; this.info.min = this.info.min ? formater(this.info.min) : null;
...@@ -65,25 +65,6 @@ function (_, kbn) { ...@@ -65,25 +65,6 @@ function (_, kbn) {
return result; 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; 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