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: [{}], targets: [{}],
cacheTimeout: null, cacheTimeout: null,
format: 'none', format: 'none',
avg: true, stats: {
stats: true, show: true,
table: true, avg: true,
template: '{{value}} {{func}}'
},
table: {
show: true,
}
}; };
_.defaults($scope.panel, _d); _.defaults($scope.panel, _d);
_.defaults($scope.panel.stats, _d.stats);
$scope.init = function() { $scope.init = function() {
panelSrv.init($scope); panelSrv.init($scope);
@ -121,19 +127,6 @@ function (angular, app, _, TimeSeries, kbn) {
series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7); 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.data = data;
$scope.$emit('render'); $scope.$emit('render');
}; };
@ -146,8 +139,9 @@ function (angular, app, _, TimeSeries, kbn) {
return { return {
link: function(scope, elem) { link: function(scope, elem) {
var data; var data;
var valueRegex = /\{\{([a-zA-Z]+)\}\}/g;
var smallValueTextRegex = /!(\S+)/g;
console.log('asd');
scope.$on('render', function() { scope.$on('render', function() {
data = scope.data; data = scope.data;
@ -159,20 +153,31 @@ function (angular, app, _, TimeSeries, kbn) {
render(); 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() { function render() {
var panel = scope.panel;
var body = ''; var body = '';
var i, series; var i, series;
if (scope.panel.stats) { if (panel.stats.show) {
body += '<div class="stats-panel-value-container">'; body += '<div class="stats-panel-value-container">';
for (i = 0; i < scope.data.stats.length; i++) { body += '<span class="stats-panel-value">';
body += '<span class="stats-panel-value">' + data.stats[i].value + '</span>'; var valueHtml = panel.stats.template.replace(valueRegex, valueTemplateReplaceFunc);
body += ' <span class="stats-panel-func">(' + data.stats[i].func + ')</span>'; body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc);
} body += '</div>';
body += '</div>'; body += '</div>';
} }
if (scope.panel.table) { if (panel.table.show) {
body += '<table class="stats-panel-table">'; body += '<table class="stats-panel-table">';
body += '<tr>'; body += '<tr>';
body += '<th></th><th>avg</th><th>min</th><th>max</th><th>current</th><th>total</th>'; 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="editor-row">
<div class="section"> <div class="section">
<h5>Main options</h5> <h5>Main options</h5>
<editor-opt-bool text="Show table" model="panel.table" 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" change="render()"></editor-opt-bool> <editor-opt-bool text="Show big values" model="panel.stats.show" change="render()"></editor-opt-bool>
</div> </div>
<div class="section" ng-if="panel.stats"> <div class="section" ng-if="panel.stats">
<h5>Big values</h5> <h5>Big values</h5>
<editor-opt-bool text="Avg" model="panel.avg" change="render()"></editor-opt-bool> <div class="editor-option">
<editor-opt-bool text="Min" model="panel.min" change="render()"></editor-opt-bool> <label class="small">Template</label>
<editor-opt-bool text="Max" model="panel.max" change="render()"></editor-opt-bool> <input type="text" class="input-large" ng-model="panel.stats.template" ng-blur="render()"></input>
<editor-opt-bool text="Total" model="panel.total" change="render()"></editor-opt-bool> </div>
<editor-opt-bool text="Current" model="panel.current" change="render()"></editor-opt-bool>
</div> </div>
<div class="section"> <div class="section">
<h5>Formats</h5> <h5>Formats</h5>

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

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