Skip to content

N
nexpie-grafana-theme
Commit 2a962bf8 by Torkel Ödegaard
Options

Singlestat: progress on singlestat panel

parent bbbcba8b
Showing with 44 additions and 36 deletions
src/app/panels/graph/module.js
...@@ -347,13 +347,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) { ...@@ -347,13 +347,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
$scope.render(); $scope.render();
}; };
$scope.toggleEditorHelp = function(index) {
if ($scope.editorHelpIndex === index) {
$scope.editorHelpIndex = null;
return;
}
$scope.editorHelpIndex = index;
};
panelSrv.init($scope); panelSrv.init($scope);
}); });
......
src/app/panels/stats/module.js
...@@ -40,7 +40,9 @@ function (angular, app, _, TimeSeries, kbn) { ...@@ -40,7 +40,9 @@ function (angular, app, _, TimeSeries, kbn) {
targets: [{}], targets: [{}],
cacheTimeout: null, cacheTimeout: null,
format: 'none', format: 'none',
template: '{{avg}} !(avg)', prefix: '',
postfix: '',
valueName: 'avg',
thresholds: '', thresholds: '',
colorBackground: false, colorBackground: false,
colorValue: false, colorValue: false,
...@@ -103,7 +105,7 @@ function (angular, app, _, TimeSeries, kbn) { ...@@ -103,7 +105,7 @@ function (angular, app, _, TimeSeries, kbn) {
info: { alias: seriesData.target }, info: { alias: seriesData.target },
}); });
series.data = series.getFlotPairs('connected'); series.flotpairs = series.getFlotPairs('connected');
return series; return series;
}; };
...@@ -128,15 +130,17 @@ function (angular, app, _, TimeSeries, kbn) { ...@@ -128,15 +130,17 @@ function (angular, app, _, TimeSeries, kbn) {
}; };
$scope.render = function() { $scope.render = function() {
var i, series; var data = {};
var data = {
series: $scope.series,
stats: []
};
for (i = 0; i < data.series.length; i++) { if (!$scope.series || $scope.series.length === 0) {
series = data.series[i]; data.series = { mainValue: null, datapoints: [] };
}
else {
var series = $scope.series[0];
series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7); series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7);
data.mainValue = series.stats[$scope.panel.valueName];
data.mainValueFormated = $scope.formatValue(data.mainValue);
data.flotpairs = series.flotpairs;
} }
data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) { data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) {
......
src/app/panels/stats/statsDirective.js
...@@ -18,15 +18,12 @@ function (angular, app, _, kbn, $) { ...@@ -18,15 +18,12 @@ function (angular, app, _, 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;
var $panelContainer = elem.parents('.panel-container'); var $panelContainer = elem.parents('.panel-container');
scope.$on('render', function() { scope.$on('render', function() {
data = scope.data; data = scope.data;
data.mainValue = null;
if (!data || data.series.length === 0) { if (!data || data.flotpairs.length === 0) {
elem.html('no data'); elem.html('no data');
return; return;
} }
...@@ -73,15 +70,8 @@ function (angular, app, _, kbn, $) { ...@@ -73,15 +70,8 @@ function (angular, app, _, kbn, $) {
return null; return null;
} }
function valueTemplateReplaceFunc(match, statType) { function getBigValueHtml() {
var stats = data.series[0].stats; return applyColoringThresholds(data.mainValue, data.mainValueFormated);
data.mainValue = stats[statType];
var valueFormated = scope.formatValue(data.mainValue);
return applyColoringThresholds(data.mainValue, valueFormated);
}
function smallValueTextReplaceFunc(match, text) {
return '<span class="stats-panel-value-small">' + text + '</span>';
} }
function addSparkline() { function addSparkline() {
...@@ -130,10 +120,13 @@ function (angular, app, _, kbn, $) { ...@@ -130,10 +120,13 @@ function (angular, app, _, kbn, $) {
elem.append(plotCanvas); elem.append(plotCanvas);
data.series[0].color = panel.sparkline.lineColor; var plotSeries = {
data: data.flotpairs,
color: panel.sparkline.lineColor
};
setTimeout(function() { setTimeout(function() {
$.plot(plotCanvas, [data.series[0]], options); $.plot(plotCanvas, [plotSeries], options);
}, 10); }, 10);
} }
...@@ -145,8 +138,7 @@ function (angular, app, _, kbn, $) { ...@@ -145,8 +138,7 @@ function (angular, app, _, kbn, $) {
body += '<div class="stats-panel-value-container">'; body += '<div class="stats-panel-value-container">';
body += '<span class="stats-panel-value">'; body += '<span class="stats-panel-value">';
var valueHtml = panel.template.replace(valueRegex, valueTemplateReplaceFunc); body += getBigValueHtml();
body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc);
body += '</div>'; body += '</div>';
body += '</div>'; body += '</div>';
......
src/app/panels/stats/statsEditor.html
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<h5>Big values</h5> <h5>Big value</h5>
<div class="editor-option"> <div class="editor-option">
<label class="small">Template</label> <label class="small">Prefix</label>
<input type="text" class="input-xlarge" ng-model="panel.template" ng-blur="render()"></input> <input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
</div>
<div class="editor-option">
<label class="small">Value</label>
<select class="input-small" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
</div>
<div class="editor-option">
<label class="small">Postfix</label>
<input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
...@@ -39,6 +47,9 @@ ...@@ -39,6 +47,9 @@
<div class="editor-option"> <div class="editor-option">
<label class="small">Line color</label> <label class="small">Line color</label>
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
</div>
<div class="editor-option">
<label class="small">Fill color</label>
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
</div> </div>
</div> </div>
......
src/app/services/panelSrv.js
...@@ -99,6 +99,14 @@ function (angular, _) { ...@@ -99,6 +99,14 @@ function (angular, _) {
$scope.get_data(); $scope.get_data();
}; };
$scope.toggleEditorHelp = function(index) {
if ($scope.editorHelpIndex === index) {
$scope.editorHelpIndex = null;
return;
}
$scope.editorHelpIndex = index;
};
$scope.toggleFullscreen = function(edit) { $scope.toggleFullscreen = function(edit) {
$scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id }); $scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id });
}; };
......
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