Commit b91b47fc by Torkel Ödegaard

Graph & Singlestat: Users can now set decimal precision for legend and tooltips…

Graph & Singlestat: Users can now set decimal precision for legend and tooltips (override auto precision), Closes #1253
parent e78b3586
......@@ -15,6 +15,7 @@
- [Issue #1296](https://github.com/grafana/grafana/issues/1296). InfluxDB: Auto escape column names with special characters. Thanks @steven-aerts
- [Issue #1321](https://github.com/grafana/grafana/issues/1321). SingleStatPanel: You can now use template variables in pre & postfix
- [Issue #599](https://github.com/grafana/grafana/issues/599). Graph: Added right y axis label setting and graph support
- [Issue #1253](https://github.com/grafana/grafana/issues/1253). Graph & Singlestat: Users can now set decimal precision for legend and tooltips (override auto precision)
**Fixes**
- [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
......
......@@ -343,7 +343,7 @@ function($, _, moment) {
if (steps >= limit) { return "NA"; }
}
if (steps > 0) {
if (steps > 0 && scaledDecimals !== null) {
decimals = scaledDecimals + (3 * steps);
}
......@@ -400,6 +400,14 @@ function($, _, moment) {
kbn.valueFormats.velocitymph = function(value, decimals) { return kbn.toFixed(value, decimals) + ' mph'; };
kbn.valueFormats.velocityknot = function(value, decimals) { return kbn.toFixed(value, decimals) + ' kn'; };
kbn.toFixedScaled = function(value, decimals, scaledDecimals, additionalDecimals, ext) {
if (scaledDecimals === null) {
return kbn.toFixed(value, decimals) + ext;
} else {
return kbn.toFixed(value, scaledDecimals + additionalDecimals) + ext;
}
};
kbn.valueFormats.ms = function(size, decimals, scaledDecimals) {
if (size === null) { return ""; }
......@@ -408,22 +416,22 @@ function($, _, moment) {
}
// Less than 1 min
else if (Math.abs(size) < 60000) {
return kbn.toFixed(size / 1000, scaledDecimals + 3) + " s";
return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, " s");
}
// Less than 1 hour, devide in minutes
else if (Math.abs(size) < 3600000) {
return kbn.toFixed(size / 60000, scaledDecimals + 5) + " min";
return kbn.toFixedScaled(size / 60000, decimals, scaledDecimals, 5, " min");
}
// Less than one day, devide in hours
else if (Math.abs(size) < 86400000) {
return kbn.toFixed(size / 3600000, scaledDecimals + 7) + " hour";
return kbn.toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, " hour");
}
// Less than one year, devide in days
else if (Math.abs(size) < 31536000000) {
return kbn.toFixed(size / 86400000, scaledDecimals + 8) + " day";
return kbn.toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, " day");
}
return kbn.toFixed(size / 31536000000, scaledDecimals + 10) + " year";
return kbn.toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, " year");
};
kbn.valueFormats.s = function(size, decimals, scaledDecimals) {
......@@ -434,22 +442,22 @@ function($, _, moment) {
}
// Less than 1 hour, devide in minutes
else if (Math.abs(size) < 3600) {
return kbn.toFixed(size / 60, scaledDecimals + 1) + " min";
return kbn.toFixedScaled(size / 60, decimals, scaledDecimals, 1, " min");
}
// Less than one day, devide in hours
else if (Math.abs(size) < 86400) {
return kbn.toFixed(size / 3600, scaledDecimals + 4) + " hour";
return kbn.toFixedScaled(size / 3600, decimals, scaledDecimals, 4, " hour");
}
// Less than one week, devide in days
else if (Math.abs(size) < 604800) {
return kbn.toFixed(size / 86400, scaledDecimals + 5) + " day";
return kbn.toFixedScaled(size / 86400, decimals, scaledDecimals, 5, " day");
}
// Less than one year, devide in week
else if (Math.abs(size) < 31536000) {
return kbn.toFixed(size / 604800, scaledDecimals + 6) + " week";
return kbn.toFixedScaled(size / 604800, decimals, scaledDecimals, 6, " week");
}
return kbn.toFixed(size / 3.15569e7, scaledDecimals + 7) + " year";
return kbn.toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, " year");
};
kbn.valueFormats['µs'] = function(size, decimals, scaledDecimals) {
......@@ -459,10 +467,10 @@ function($, _, moment) {
return kbn.toFixed(size, decimals) + " µs";
}
else if (Math.abs(size) < 1000000) {
return kbn.toFixed(size / 1000, scaledDecimals + 3) + " ms";
return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, " ms");
}
else {
return kbn.toFixed(size / 1000000, scaledDecimals + 6) + " s";
return kbn.toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, " s");
}
};
......@@ -473,16 +481,16 @@ function($, _, moment) {
return kbn.toFixed(size, decimals) + " ns";
}
else if (Math.abs(size) < 1000000) {
return kbn.toFixed(size / 1000, scaledDecimals + 3) + " µs";
return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, " µs");
}
else if (Math.abs(size) < 1000000000) {
return kbn.toFixed(size / 1000000, scaledDecimals + 6) + " ms";
return kbn.toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, " ms");
}
else if (Math.abs(size) < 60000000000){
return kbn.toFixed(size / 1000000000, scaledDecimals + 9) + " s";
return kbn.toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, " s");
}
else {
return kbn.toFixed(size / 60000000000, scaledDecimals + 12) + " m";
return kbn.toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, " min");
}
};
......
......@@ -144,7 +144,7 @@
<div class="section">
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<li class="tight-form-item" style="width: 110px">
<strong>Legend</strong>
</li>
<li class="tight-form-item">
......@@ -176,7 +176,7 @@
</div>
</div>
<div class="section">
<div class="tight-form last">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
<strong>Legend values</strong>
......@@ -214,6 +214,20 @@
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px">
<strong>Decimals</strong>
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
ng-model="panel.decimals" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
......@@ -113,11 +113,17 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
var axis = yaxis[series.yaxis - 1];
var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]];
// legend and tooltip gets one more decimal precision
// than graph legend ticks
var tickDecimals = (axis.tickDecimals || -1) + 1;
// decimal override
if (scope.panel.decimals) {
series.updateLegendValues(formater, scope.panel.decimals, null);
} else {
// auto decimals
// legend and tooltip gets one more decimal precision
// than graph legend ticks
var tickDecimals = (axis.tickDecimals || -1) + 1;
series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2);
}
series.updateLegendValues(formater, tickDecimals, axis.scaledDecimals + 2);
if(!scope.$$phase) { scope.$digest(); }
}
......
......@@ -143,13 +143,13 @@ function (angular, app, _, kbn, $) {
html += '<a>' + series.label + '</a>';
html += '</div>';
var avg = series.formatValue(series.stats.avg);
var current = series.formatValue(series.stats.current);
var min = series.formatValue(series.stats.min);
var max = series.formatValue(series.stats.max);
var total = series.formatValue(series.stats.total);
if (panel.legend.values) {
var avg = series.formatValue(series.stats.avg);
var current = series.formatValue(series.stats.current);
var min = series.formatValue(series.stats.min);
var max = series.formatValue(series.stats.max);
var total = series.formatValue(series.stats.total);
if (panel.legend.min) { html += '<div class="graph-legend-value min">' + min + '</div>'; }
if (panel.legend.max) { html += '<div class="graph-legend-value max">' + max + '</div>'; }
if (panel.legend.avg) { html += '<div class="graph-legend-value avg">' + avg + '</div>'; }
......
......@@ -59,11 +59,18 @@
<li class="tight-form-item" style="width: 80px">
<strong>Unit</strong>
</li>
<li class="dropdown" style="width: 130px;"
<li class="dropdown" style="width: 119px;"
ng-model="panel.format"
dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat($subItem)">
</li>
<li class="tight-form-item">
Decimals
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
ng-model="panel.decimals" ng-change="render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
</div>
......
......@@ -123,6 +123,9 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
};
$scope.getDecimalsForValue = function(value) {
if ($scope.panel.decimals) {
return { decimals: $scope.panel.decimals, scaledDecimals: null };
}
var delta = value / 2;
var dec = -Math.floor(Math.log(delta) / Math.LN10);
......
......@@ -37,6 +37,22 @@ define([
});
});
describe('kbn ms format when scaled decimals is null do not use it', function() {
it('should use specified decimals', function() {
var str = kbn.valueFormats['ms'](10000086.123, 1, null);
expect(str).to.be('2.8 hour');
});
});
describe('kbn kbytes format when scaled decimals is null do not use it', function() {
it('should use specified decimals', function() {
var str = kbn.valueFormats['kbytes'](10000000, 3, null);
expect(str).to.be('9.537 GiB');
});
});
describe('calculateInterval', function() {
it('1h 100 resultion', function() {
var range = { from: kbn.parseDate('now-1h'), to: kbn.parseDate('now') };
......
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