Skip to content

N
nexpie-grafana-theme
Commit b91b47fc by Torkel Ödegaard
Options

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
Showing with 77 additions and 22 deletions
CHANGELOG.md
...@@ -15,6 +15,7 @@ ...@@ -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 #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 #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 #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** **Fixes**
- [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query - [Issue #1298](https://github.com/grafana/grafana/issues/1298). InfluxDB: Fix handling of empty array in templating variable query
......
src/app/components/kbn.js
...@@ -343,7 +343,7 @@ function($, _, moment) { ...@@ -343,7 +343,7 @@ function($, _, moment) {
if (steps >= limit) { return "NA"; } if (steps >= limit) { return "NA"; }
} }
if (steps > 0) { if (steps > 0 && scaledDecimals !== null) {
decimals = scaledDecimals + (3 * steps); decimals = scaledDecimals + (3 * steps);
} }
...@@ -400,6 +400,14 @@ function($, _, moment) { ...@@ -400,6 +400,14 @@ function($, _, moment) {
kbn.valueFormats.velocitymph = function(value, decimals) { return kbn.toFixed(value, decimals) + ' mph'; }; 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.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) { kbn.valueFormats.ms = function(size, decimals, scaledDecimals) {
if (size === null) { return ""; } if (size === null) { return ""; }
...@@ -408,22 +416,22 @@ function($, _, moment) { ...@@ -408,22 +416,22 @@ function($, _, moment) {
} }
// Less than 1 min // Less than 1 min
else if (Math.abs(size) < 60000) { 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 // Less than 1 hour, devide in minutes
else if (Math.abs(size) < 3600000) { 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 // Less than one day, devide in hours
else if (Math.abs(size) < 86400000) { 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 // Less than one year, devide in days
else if (Math.abs(size) < 31536000000) { 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) { kbn.valueFormats.s = function(size, decimals, scaledDecimals) {
...@@ -434,22 +442,22 @@ function($, _, moment) { ...@@ -434,22 +442,22 @@ function($, _, moment) {
} }
// Less than 1 hour, devide in minutes // Less than 1 hour, devide in minutes
else if (Math.abs(size) < 3600) { 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 // Less than one day, devide in hours
else if (Math.abs(size) < 86400) { 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 // Less than one week, devide in days
else if (Math.abs(size) < 604800) { 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 // Less than one year, devide in week
else if (Math.abs(size) < 31536000) { 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) { kbn.valueFormats['µs'] = function(size, decimals, scaledDecimals) {
...@@ -459,10 +467,10 @@ function($, _, moment) { ...@@ -459,10 +467,10 @@ function($, _, moment) {
return kbn.toFixed(size, decimals) + " µs"; return kbn.toFixed(size, decimals) + " µs";
} }
else if (Math.abs(size) < 1000000) { else if (Math.abs(size) < 1000000) {
return kbn.toFixed(size / 1000, scaledDecimals + 3) + " ms"; return kbn.toFixedScaled(size / 1000, decimals, scaledDecimals, 3, " ms");
} }
else { else {
return kbn.toFixed(size / 1000000, scaledDecimals + 6) + " s"; return kbn.toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, " s");
} }
}; };
...@@ -473,16 +481,16 @@ function($, _, moment) { ...@@ -473,16 +481,16 @@ function($, _, moment) {
return kbn.toFixed(size, decimals) + " ns"; return kbn.toFixed(size, decimals) + " ns";
} }
else if (Math.abs(size) < 1000000) { 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) { 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){ else if (Math.abs(size) < 60000000000){
return kbn.toFixed(size / 1000000000, scaledDecimals + 9) + " s"; return kbn.toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, " s");
} }
else { else {
return kbn.toFixed(size / 60000000000, scaledDecimals + 12) + " m"; return kbn.toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, " min");
} }
}; };
......
src/app/panels/graph/axisEditor.html
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
<div class="section"> <div class="section">
<div class="tight-form last"> <div class="tight-form last">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 110px">
<strong>Legend</strong> <strong>Legend</strong>
</li> </li>
<li class="tight-form-item"> <li class="tight-form-item">
...@@ -176,7 +176,7 @@ ...@@ -176,7 +176,7 @@
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<div class="tight-form last"> <div class="tight-form">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item" style="width: 100px"> <li class="tight-form-item" style="width: 100px">
<strong>Legend values</strong> <strong>Legend values</strong>
...@@ -214,6 +214,20 @@ ...@@ -214,6 +214,20 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</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>
</div> </div>
src/app/panels/graph/graph.js
...@@ -113,11 +113,17 @@ function (angular, $, kbn, moment, _, GraphTooltip) { ...@@ -113,11 +113,17 @@ function (angular, $, kbn, moment, _, GraphTooltip) {
var axis = yaxis[series.yaxis - 1]; var axis = yaxis[series.yaxis - 1];
var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 1]]; var formater = kbn.valueFormats[scope.panel.y_formats[series.yaxis - 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 // legend and tooltip gets one more decimal precision
// than graph legend ticks // than graph legend ticks
var tickDecimals = (axis.tickDecimals || -1) + 1; 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(); } if(!scope.$$phase) { scope.$digest(); }
} }
......
src/app/panels/graph/legend.js
...@@ -143,13 +143,13 @@ function (angular, app, _, kbn, $) { ...@@ -143,13 +143,13 @@ function (angular, app, _, kbn, $) {
html += '<a>' + series.label + '</a>'; html += '<a>' + series.label + '</a>';
html += '</div>'; html += '</div>';
if (panel.legend.values) {
var avg = series.formatValue(series.stats.avg); var avg = series.formatValue(series.stats.avg);
var current = series.formatValue(series.stats.current); var current = series.formatValue(series.stats.current);
var min = series.formatValue(series.stats.min); var min = series.formatValue(series.stats.min);
var max = series.formatValue(series.stats.max); var max = series.formatValue(series.stats.max);
var total = series.formatValue(series.stats.total); var total = series.formatValue(series.stats.total);
if (panel.legend.values) {
if (panel.legend.min) { html += '<div class="graph-legend-value min">' + min + '</div>'; } 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.max) { html += '<div class="graph-legend-value max">' + max + '</div>'; }
if (panel.legend.avg) { html += '<div class="graph-legend-value avg">' + avg + '</div>'; } if (panel.legend.avg) { html += '<div class="graph-legend-value avg">' + avg + '</div>'; }
......
src/app/panels/singlestat/editor.html
...@@ -59,11 +59,18 @@ ...@@ -59,11 +59,18 @@
<li class="tight-form-item" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Unit</strong> <strong>Unit</strong>
</li> </li>
<li class="dropdown" style="width: 130px;" <li class="dropdown" style="width: 119px;"
ng-model="panel.format" ng-model="panel.format"
dropdown-typeahead="unitFormats" dropdown-typeahead="unitFormats"
dropdown-typeahead-on-select="setUnitFormat($subItem)"> dropdown-typeahead-on-select="setUnitFormat($subItem)">
</li> </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> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
......
src/app/panels/singlestat/module.js
...@@ -123,6 +123,9 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) { ...@@ -123,6 +123,9 @@ function (angular, app, _, TimeSeries, kbn, PanelMeta) {
}; };
$scope.getDecimalsForValue = function(value) { $scope.getDecimalsForValue = function(value) {
if ($scope.panel.decimals) {
return { decimals: $scope.panel.decimals, scaledDecimals: null };
}
var delta = value / 2; var delta = value / 2;
var dec = -Math.floor(Math.log(delta) / Math.LN10); var dec = -Math.floor(Math.log(delta) / Math.LN10);
......
src/test/specs/kbn-format-specs.js
...@@ -37,6 +37,22 @@ define([ ...@@ -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() { describe('calculateInterval', function() {
it('1h 100 resultion', function() { it('1h 100 resultion', function() {
var range = { from: kbn.parseDate('now-1h'), to: kbn.parseDate('now') }; 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