mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Singlestat: progress on singlestat panel
This commit is contained in:
parent
bbbcba8b98
commit
2a962bf8fd
@ -347,13 +347,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
|
||||
$scope.render();
|
||||
};
|
||||
|
||||
$scope.toggleEditorHelp = function(index) {
|
||||
if ($scope.editorHelpIndex === index) {
|
||||
$scope.editorHelpIndex = null;
|
||||
return;
|
||||
}
|
||||
$scope.editorHelpIndex = index;
|
||||
};
|
||||
|
||||
panelSrv.init($scope);
|
||||
});
|
||||
|
@ -40,7 +40,9 @@ function (angular, app, _, TimeSeries, kbn) {
|
||||
targets: [{}],
|
||||
cacheTimeout: null,
|
||||
format: 'none',
|
||||
template: '{{avg}} !(avg)',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
valueName: 'avg',
|
||||
thresholds: '',
|
||||
colorBackground: false,
|
||||
colorValue: false,
|
||||
@ -103,7 +105,7 @@ function (angular, app, _, TimeSeries, kbn) {
|
||||
info: { alias: seriesData.target },
|
||||
});
|
||||
|
||||
series.data = series.getFlotPairs('connected');
|
||||
series.flotpairs = series.getFlotPairs('connected');
|
||||
|
||||
return series;
|
||||
};
|
||||
@ -128,15 +130,17 @@ function (angular, app, _, TimeSeries, kbn) {
|
||||
};
|
||||
|
||||
$scope.render = function() {
|
||||
var i, series;
|
||||
var data = {
|
||||
series: $scope.series,
|
||||
stats: []
|
||||
};
|
||||
var data = {};
|
||||
|
||||
for (i = 0; i < data.series.length; i++) {
|
||||
series = data.series[i];
|
||||
if (!$scope.series || $scope.series.length === 0) {
|
||||
data.series = { mainValue: null, datapoints: [] };
|
||||
}
|
||||
else {
|
||||
var series = $scope.series[0];
|
||||
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) {
|
||||
|
@ -18,15 +18,12 @@ function (angular, app, _, kbn, $) {
|
||||
return {
|
||||
link: function(scope, elem) {
|
||||
var data;
|
||||
var valueRegex = /\{\{([a-zA-Z]+)\}\}/g;
|
||||
var smallValueTextRegex = /!(\S+)/g;
|
||||
var $panelContainer = elem.parents('.panel-container');
|
||||
|
||||
scope.$on('render', function() {
|
||||
data = scope.data;
|
||||
data.mainValue = null;
|
||||
|
||||
if (!data || data.series.length === 0) {
|
||||
if (!data || data.flotpairs.length === 0) {
|
||||
elem.html('no data');
|
||||
return;
|
||||
}
|
||||
@ -73,15 +70,8 @@ function (angular, app, _, kbn, $) {
|
||||
return null;
|
||||
}
|
||||
|
||||
function valueTemplateReplaceFunc(match, statType) {
|
||||
var stats = data.series[0].stats;
|
||||
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 getBigValueHtml() {
|
||||
return applyColoringThresholds(data.mainValue, data.mainValueFormated);
|
||||
}
|
||||
|
||||
function addSparkline() {
|
||||
@ -130,10 +120,13 @@ function (angular, app, _, kbn, $) {
|
||||
|
||||
elem.append(plotCanvas);
|
||||
|
||||
data.series[0].color = panel.sparkline.lineColor;
|
||||
var plotSeries = {
|
||||
data: data.flotpairs,
|
||||
color: panel.sparkline.lineColor
|
||||
};
|
||||
|
||||
setTimeout(function() {
|
||||
$.plot(plotCanvas, [data.series[0]], options);
|
||||
$.plot(plotCanvas, [plotSeries], options);
|
||||
}, 10);
|
||||
}
|
||||
|
||||
@ -145,8 +138,7 @@ function (angular, app, _, kbn, $) {
|
||||
|
||||
body += '<div class="stats-panel-value-container">';
|
||||
body += '<span class="stats-panel-value">';
|
||||
var valueHtml = panel.template.replace(valueRegex, valueTemplateReplaceFunc);
|
||||
body += valueHtml.replace(smallValueTextRegex, smallValueTextReplaceFunc);
|
||||
body += getBigValueHtml();
|
||||
body += '</div>';
|
||||
body += '</div>';
|
||||
|
||||
|
@ -1,9 +1,17 @@
|
||||
<div class="editor-row">
|
||||
<div class="section">
|
||||
<h5>Big values</h5>
|
||||
<h5>Big value</h5>
|
||||
<div class="editor-option">
|
||||
<label class="small">Template</label>
|
||||
<input type="text" class="input-xlarge" ng-model="panel.template" ng-blur="render()"></input>
|
||||
<label class="small">Prefix</label>
|
||||
<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 class="section">
|
||||
@ -39,6 +47,9 @@
|
||||
<div class="editor-option">
|
||||
<label class="small">Line color</label>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -99,6 +99,14 @@ function (angular, _) {
|
||||
$scope.get_data();
|
||||
};
|
||||
|
||||
$scope.toggleEditorHelp = function(index) {
|
||||
if ($scope.editorHelpIndex === index) {
|
||||
$scope.editorHelpIndex = null;
|
||||
return;
|
||||
}
|
||||
$scope.editorHelpIndex = index;
|
||||
};
|
||||
|
||||
$scope.toggleFullscreen = function(edit) {
|
||||
$scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id });
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user