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: fine tuning colors

Browse Source
This commit is contained in:
Torkel Ödegaard 2014-10-17 10:36:04 -04:00
parent 7c4d1b7b01
commit 956d93e871
2 changed files with 109 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,6 +44,12 @@ function (angular, app, _, TimeSeries, kbn) {
avg: true,
template: '{{value}} {{func}}'
},
coloring: {
thresholds: '',
background: false,
value: false,
colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"]
},
table: {
show: true,
}
@ -51,6 +57,7 @@ function (angular, app, _, TimeSeries, kbn) {
_.defaults($scope.panel, _d);
_.defaults($scope.panel.stats, _d.stats);
_.defaults($scope.panel.coloring, _d.coloring);
$scope.init = function() {
panelSrv.init($scope);
@ -115,6 +122,25 @@ function (angular, app, _, TimeSeries, kbn) {
return series;
};
$scope.setColoring = function(options) {
if (options.background) {
$scope.panel.coloring.value = false;
$scope.panel.coloring.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
}
else {
$scope.panel.coloring.background = false;
$scope.panel.coloring.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
}
$scope.render();
};
$scope.invertColorOrder = function() {
var tmp = $scope.panel.coloring.colors[0];
$scope.panel.coloring.colors[0] = $scope.panel.coloring.colors[2];
$scope.panel.coloring.colors[2] = tmp;
$scope.render();
};
$scope.render = function() {
var i, series;
var data = {
@ -127,6 +153,12 @@ function (angular, app, _, TimeSeries, kbn) {
series.updateLegendValues(kbn.valueFormats[$scope.panel.format], 2, -7);
}
data.thresholds = $scope.panel.coloring.thresholds.split(',').map(function(strVale) {
return Number(strVale.trim());
});
data.colorMap = $scope.panel.coloring.colors;
$scope.data = data;
$scope.$emit('render');
};
@ -144,6 +176,7 @@ function (angular, app, _, TimeSeries, kbn) {
scope.$on('render', function() {
data = scope.data;
data.mainValue = null;
if (!data || data.series.length === 0) {
elem.html('no data');
@ -153,10 +186,33 @@ function (angular, app, _, TimeSeries, kbn) {
render();
});
function applyColoringThresholds(value, valueString) {
if (!scope.panel.coloring.value) {
return valueString;
}
var color = getColorForValue(value);
if (color) {
return '<span style="color:' + color + '">'+ valueString + '</span>';
}
return valueString;
}
function getColorForValue(value) {
for (var i = data.thresholds.length - 1; i >= 0 ; i--) {
if (value > data.thresholds[i]) {
return data.colorMap[i];
}
}
return null;
}
function valueTemplateReplaceFunc(match, statType) {
var stats = data.series[0].stats;
var value = scope.formatValue(stats[statType]);
return value;
data.mainValue = stats[statType];
var valueFormated = scope.formatValue(data.mainValue);
return applyColoringThresholds(data.mainValue, valueFormated);
}
function smallValueTextReplaceFunc(match, text) {
@ -177,6 +233,21 @@ function (angular, app, _, TimeSeries, kbn) {
body += '</div>';
}
if (panel.coloring.background && data.mainValue) {
var color = getColorForValue(data.mainValue);
if (color) {
elem.parents('.panel-container').css('background-color', color);
if (scope.fullscreen) {
elem.css('background-color', color);
} else {
elem.css('background-color', '');
}
}
} else {
elem.parents('.panel-container').css('background-color', '');
elem.css('background-color', '');
}
if (panel.table.show) {
body += '<table class="stats-panel-table">';
body += '<tr>';

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

@ -18,28 +18,44 @@
<select class="input-small" ng-model="panel.format" ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']" ng-change="render()"></select>
</div>
</div>
</div>
<div class="editor-row">
<div class="section">
<h5>Series options</h5>
<div class="grafana-target" ng-repeat="series in data.series">
<div class="grafana-target-inner">
<ul class="grafana-segment-list">
<li class="grafana-target-segment">
<i class="icon-eye-open" ng-click="hideSeries(series)"></i>
</li>
<li class="grafana-target-segment">
{{series.info.alias}}
</li>
<li class="grafana-target-segment">
</li>
</ul>
<div class="clearfix"></div>
</div>
<h5>Coloring</h5>
<editor-opt-bool text="Background" model="panel.coloring.background" change="setColoring({background: true})"></editor-opt-bool>
<editor-opt-bool text="Value" model="panel.coloring.value" change="setColoring({value: true})"></editor-opt-bool>
<div class="editor-option">
<label class="small">Thresholds</label>
<input type="text" class="input-large" ng-model="panel.coloring.thresholds" ng-blur="render()"></input>
</div>
<div class="editor-option">
<label class="small">Color</label>
<spectrum-picker ng-model="panel.coloring.colors[0]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="panel.coloring.colors[1]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="panel.coloring.colors[2]" ng-change="render()" ></spectrum-picker>
<a class="pointer" ng-click="invertColorOrder()">invert order</a>
</div>
</div>
</div>
<!-- <div class="editor&#45;row"> -->
<!-- <div class="section"> -->
<!-- <h5>Series options</h5> -->
<!-- <div class="grafana&#45;target" ng&#45;repeat="series in data.series"> -->
<!-- <div class="grafana&#45;target&#45;inner"> -->
<!-- <ul class="grafana&#45;segment&#45;list"> -->
<!-- <li class="grafana&#45;target&#45;segment"> -->
<!-- <i class="icon&#45;eye&#45;open" ng&#45;click="hideSeries(series)"></i> -->
<!-- </li> -->
<!-- -->
<!-- <li class="grafana&#45;target&#45;segment"> -->
<!-- {{series.info.alias}} -->
<!-- </li> -->
<!-- -->
<!-- <li class="grafana&#45;target&#45;segment"> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<!-- -->