Commit 7ff8931d by Torkel Ödegaard

SingleStatPanel: added font size options for value, prefix and postfix, #951

parent 2a962bf8
......@@ -32,7 +32,11 @@ function (angular) {
};
input.spectrum(options);
scope.$on('$destroy', function() {
input.spectrum('destroy');
});
}
};
});
});
\ No newline at end of file
});
......@@ -347,7 +347,6 @@ function (angular, app, $, _, kbn, moment, TimeSeries) {
$scope.render();
};
panelSrv.init($scope);
});
......
......@@ -43,6 +43,9 @@ function (angular, app, _, TimeSeries, kbn) {
prefix: '',
postfix: '',
valueName: 'avg',
prefixFontSize: '50%',
valueFontSize: '100%',
postfixFontSize: '50%',
thresholds: '',
colorBackground: false,
colorValue: false,
......
......@@ -17,11 +17,12 @@ function (angular, app, _, kbn, $) {
return {
link: function(scope, elem) {
var data;
var data, panel;
var $panelContainer = elem.parents('.panel-container');
scope.$on('render', function() {
data = scope.data;
panel = scope.panel;
if (!data || data.flotpairs.length === 0) {
elem.html('no data');
......@@ -33,12 +34,12 @@ function (angular, app, _, kbn, $) {
function setElementHeight() {
try {
var height = scope.height || scope.panel.height || scope.row.height;
var height = scope.height || panel.height || scope.row.height;
if (_.isString(height)) {
height = parseInt(height.replace('px', ''), 10);
}
height -= scope.panel.title ? 24 : 9; // subtract panel title bar
height -= panel.title ? 24 : 9; // subtract panel title bar
elem.css('height', height + 'px');
......@@ -49,7 +50,7 @@ function (angular, app, _, kbn, $) {
}
function applyColoringThresholds(value, valueString) {
if (!scope.panel.colorValue) {
if (!panel.colorValue) {
return valueString;
}
......@@ -70,8 +71,24 @@ function (angular, app, _, kbn, $) {
return null;
}
function getSpan(className, fontSize, value) {
return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
value + '</span>';
}
function getBigValueHtml() {
return applyColoringThresholds(data.mainValue, data.mainValueFormated);
var body = '<div class="stats-panel-value-container">';
if (panel.prefix) { body += getSpan('stats-panel-prefix', panel.prefixFontSize, scope.panel.prefix); }
var value = applyColoringThresholds(data.mainValue, data.mainValueFormated);
body += getSpan('stats-panel-value', panel.valueFontSize, value);
if (panel.postfix) { body += getSpan('stats-panel-postfix', panel.postfixFontSize, panel.postfix); }
body += '</div>';
return body;
}
function addSparkline() {
......@@ -134,13 +151,7 @@ function (angular, app, _, kbn, $) {
setElementHeight();
var panel = scope.panel;
var body = '';
body += '<div class="stats-panel-value-container">';
body += '<span class="stats-panel-value">';
body += getBigValueHtml();
body += '</div>';
body += '</div>';
var body = getBigValueHtml();
if (panel.colorBackground && data.mainValue) {
var color = getColorForValue(data.mainValue);
......
......@@ -3,7 +3,7 @@
<h5>Big value</h5>
<div class="editor-option">
<label class="small">Prefix</label>
<input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
<input type="text" class="input-small" ng-model="panel.prefix" ng-blur="render()"></input>
</div>
<div class="editor-option">
<label class="small">Value</label>
......@@ -11,9 +11,26 @@
</div>
<div class="editor-option">
<label class="small">Postfix</label>
<input type="text" class="input-medium" ng-model="panel.prefix" ng-blur="render()"></input>
<input type="text" class="input-small" ng-model="panel.postfix" ng-blur="render()" ng-trim="false"></input>
</div>
</div>
<div class="section">
<h5>Big value font size</h5>
<div class="editor-option">
<label class="small">Prefix</label>
<select class="input-mini" style="width: 75px;" ng-model="panel.prefixFontSize" ng-options="f for f in ['30%','50%','70%','80%','100%']" ng-change="render()"></select>
</div>
<div class="editor-option">
<label class="small">Value</label>
<select class="input-mini" style="width: 75px;" ng-model="panel.valueFontSize" ng-options="f for f in ['30%','50%','70%','80%','100%', '110%', '120%']" ng-change="render()"></select>
</div>
<div class="editor-option">
<label class="small">Postfix</label>
<select class="input-mini" style="width: 75px;" ng-model="panel.postfixFontSize" ng-options="f for f in ['30%','50%','70%','80%','100%']" ng-change="render()"></select>
</div>
</div>
<div class="section">
<h5>Formats</h5>
<div class="editor-option">
......
......@@ -11,19 +11,12 @@
text-align: center;
position: relative;
z-index: 1;
}
.stats-panel-value {
font-size: 3em;
font-weight: bold;
}
.stats-panel-value:not(:first-child) {
padding-left: 20px;
}
.stats-panel-value-small {
font-size: 50%;
.stats-panel-prefix {
padding-right: 20px;
}
.stats-panel-table {
......
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