root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 250 Packages Projects Releases Wiki Activity

Graph & Singlestat: Users can now set decimal precision for legend and tooltips (override auto precision), Closes #1253

This commit is contained in:
Torkel Ödegaard 2015-03-12 19:36:50 +01:00
parent e78b358643
commit b91b47fc46
8 changed files with 85 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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

42
src/app/components/kbn.js
View File

@ -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");
}
};

18
src/app/panels/graph/axisEditor.html
View File

@ -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>

14
src/app/panels/graph/graph.js
View File

@ -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(); }
}

12
src/app/panels/graph/legend.js
View File

@ -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>'; }

9
src/app/panels/singlestat/editor.html
View File

@ -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>

3
src/app/panels/singlestat/module.js
View File

@ -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);

16
src/test/specs/kbn-format-specs.js
View File

@ -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') };