IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

StatsPanel: made big values template based

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-10-16 13:44:52 -04:00
parent 0a97a2435b
commit 7c4d1b7b01
3 changed files with 36 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/app/panels/stats/module.js
View File

@ -39,12 +39,18 @@ function (angular, app, _, TimeSeries, kbn) {
targets: [{}],
cacheTimeout: null,
format: 'none',
avg: true,
stats: true,
table: true,
stats: {
show: true,
avg: true,
template: '{{value}} {{func}}'
},
table: {
show: true,
}
};
_.defaults($scope.panel, _d);
_.defaults($scope.panel.stats, _d.stats);
$scope.init = function() {
panelSrv.init($scope);
@ -121,19 +127,6 @@ function (angular, app, _, TimeSeries, kbn) {
series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7);
}
var main = data.series[0];
if ($scope.panel.avg) {
data.stats.push({ value: $scope.formatValue(main.stats.avg), func: 'avg' });
}
if ($scope.panel.total) {
data.stats.push({ value: $scope.formatValue(main.stats.total), func: 'total' });
}
if ($scope.panel.current) {
data.stats.push({ value: $scope.formatValue(main.stats.current), func: 'current' });
}
$scope.data = data;
$scope.$emit('render');
};
@ -146,8 +139,9 @@ function (angular, app, _, TimeSeries, kbn) {
return {
link: function(scope, elem) {
var data;
var valueRegex = /\{\{([a-zA-Z]+)\}\}/g;
var smallValueTextRegex = /!(\S+)/g;
console.log('asd');
scope.$on('render', function() {
data = scope.data;
@ -159,20 +153,31 @@ function (angular, app, _, TimeSeries, kbn) {
render();
});
function valueTemplateReplaceFunc(match, statType) {
var stats = data.series[0].stats;
var value = scope.formatValue(stats[statType]);
return value;
}
function smallValueTextReplaceFunc(match, text) {
return '<span class="stats-panel-value-small">' + text + '</span>';
}
function render() {
var panel = scope.panel;
var body = '';
var i, series;
if (scope.panel.stats) {
if (panel.stats.show) {
body += '<div class="stats-panel-value-container">';
for (i = 0; i < scope.data.stats.length; i++) {
body += '<span class="stats-panel-value">' + data.stats[i].value + '</span>';
body += ' <span class="stats-panel-func">(' + data.stats[i].func + ')</span>';
}
body += '<span class="stats-panel-value">';
var valueHtml = panel.stats.template.replace(valueRegex, valueTemplateReplaceFunc);
body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc);
body += '</div>';
body += '</div>';
}
if (scope.panel.table) {
if (panel.table.show) {
body += '<table class="stats-panel-table">';
body += '<tr>';
body += '<th></th><th>avg</th><th>min</th><th>max</th><th>current</th><th>total</th>';

13
src/app/panels/stats/statsEditor.html
View File

@ -1,16 +1,15 @@
<div class="editor-row">
<div class="section">
<h5>Main options</h5>
<editor-opt-bool text="Show table" model="panel.table" change="render()"></editor-opt-bool>
<editor-opt-bool text="Show big values" model="panel.stats" change="render()"></editor-opt-bool>
<editor-opt-bool text="Show table" model="panel.table.show" change="render()"></editor-opt-bool>
<editor-opt-bool text="Show big values" model="panel.stats.show" change="render()"></editor-opt-bool>
</div>
<div class="section" ng-if="panel.stats">
<h5>Big values</h5>
<editor-opt-bool text="Avg" model="panel.avg" change="render()"></editor-opt-bool>
<editor-opt-bool text="Min" model="panel.min" change="render()"></editor-opt-bool>
<editor-opt-bool text="Max" model="panel.max" change="render()"></editor-opt-bool>
<editor-opt-bool text="Total" model="panel.total" change="render()"></editor-opt-bool>
<editor-opt-bool text="Current" model="panel.current" change="render()"></editor-opt-bool>
<div class="editor-option">
<label class="small">Template</label>
<input type="text" class="input-large" ng-model="panel.stats.template" ng-blur="render()"></input>
</div>
</div>
<div class="section">
<h5>Formats</h5>

4
src/css/less/stats-panel.less
View File

@ -12,8 +12,8 @@
padding-left: 20px;
}
.stats-panel-func {
font-size: 1.5em;
.stats-panel-value-small {
font-size: 50%;
}
.stats-panel-table {