mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(panels): upgradede singlestat panel
This commit is contained in:
Torkel Ödegaard
parent
57d22fb93f
commit
97ac81aa9c
@ -123,6 +123,7 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
|
||||
panels[panel.Id] = map[string]interface{}{
|
||||
"module": panel.Module,
|
||||
"name": panel.Name,
|
||||
"id": panel.Id,
|
||||
"info": panel.Info,
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,6 +16,7 @@ function panelEditorTab(dynamicDirectiveSrv) {
|
||||
directive: scope => {
|
||||
var pluginId = scope.ctrl.pluginId;
|
||||
var tabIndex = scope.index;
|
||||
console.log('tab plugnId:', pluginId);
|
||||
|
||||
return Promise.resolve({
|
||||
name: `panel-editor-tab-${pluginId}${tabIndex}`,
|
||||
|
||||
@ -3,240 +3,233 @@
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
import kbn from 'app/core/utils/kbn';
|
||||
import PanelMeta from 'app/features/panel/panel_meta2';
|
||||
import TimeSeries from '../../../core/time_series2';
|
||||
import {MetricsPanelCtrl} from '../../../features/panel/panel';
|
||||
|
||||
export class SingleStatCtrl {
|
||||
// Set and populate defaults
|
||||
var panelDefaults = {
|
||||
links: [],
|
||||
datasource: null,
|
||||
maxDataPoints: 100,
|
||||
interval: null,
|
||||
targets: [{}],
|
||||
cacheTimeout: null,
|
||||
format: 'none',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
nullText: null,
|
||||
valueMaps: [
|
||||
{ value: 'null', op: '=', text: 'N/A' }
|
||||
],
|
||||
nullPointMode: 'connected',
|
||||
valueName: 'avg',
|
||||
prefixFontSize: '50%',
|
||||
valueFontSize: '80%',
|
||||
postfixFontSize: '50%',
|
||||
thresholds: '',
|
||||
colorBackground: false,
|
||||
colorValue: false,
|
||||
colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
|
||||
sparkline: {
|
||||
show: false,
|
||||
full: false,
|
||||
lineColor: 'rgb(31, 120, 193)',
|
||||
fillColor: 'rgba(31, 118, 189, 0.18)',
|
||||
}
|
||||
};
|
||||
|
||||
export class SingleStatCtrl extends MetricsPanelCtrl {
|
||||
series: any[];
|
||||
data: any[];
|
||||
fontSizes: any[];
|
||||
unitFormats: any[];
|
||||
|
||||
/** @ngInject */
|
||||
constructor($scope, panelSrv, panelHelper) {
|
||||
$scope.panelMeta = new PanelMeta({
|
||||
panelName: 'Singlestat',
|
||||
editIcon: "fa fa-dashboard",
|
||||
fullscreen: true,
|
||||
metricsEditor: true
|
||||
constructor($scope, $injector) {
|
||||
super($scope, $injector);
|
||||
_.defaults(this.panel, panelDefaults);
|
||||
}
|
||||
|
||||
|
||||
initEditMode() {
|
||||
this.icon = "fa fa-dashboard";
|
||||
this.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
|
||||
|
||||
this.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html');
|
||||
this.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html');
|
||||
|
||||
this.unitFormats = kbn.getUnitFormats();
|
||||
}
|
||||
|
||||
setUnitFormat(subItem) {
|
||||
this.panel.format = subItem.value;
|
||||
this.render();
|
||||
}
|
||||
|
||||
refreshData(datasource) {
|
||||
return this.issueQueries(datasource)
|
||||
.then(this.dataHandler.bind(this))
|
||||
.catch(err => {
|
||||
this.series = [];
|
||||
this.render();
|
||||
throw err;
|
||||
});
|
||||
}
|
||||
|
||||
loadSnapshot(snapshotData) {
|
||||
this.updateTimeRange();
|
||||
this.dataHandler(snapshotData);
|
||||
}
|
||||
|
||||
dataHandler(results) {
|
||||
this.series = _.map(results.data, this.seriesHandler.bind(this));
|
||||
this.render();
|
||||
}
|
||||
|
||||
seriesHandler(seriesData) {
|
||||
var series = new TimeSeries({
|
||||
datapoints: seriesData.datapoints,
|
||||
alias: seriesData.target,
|
||||
});
|
||||
|
||||
$scope.fontSizes = ['20%', '30%','50%','70%','80%','100%', '110%', '120%', '150%', '170%', '200%'];
|
||||
series.flotpairs = series.getFlotPairs(this.panel.nullPointMode);
|
||||
return series;
|
||||
}
|
||||
|
||||
$scope.panelMeta.addEditorTab('Options', 'app/plugins/panel/singlestat/editor.html');
|
||||
$scope.panelMeta.addEditorTab('Time range', 'app/features/panel/partials/panelTime.html');
|
||||
setColoring(options) {
|
||||
if (options.background) {
|
||||
this.panel.colorValue = false;
|
||||
this.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
|
||||
} else {
|
||||
this.panel.colorBackground = false;
|
||||
this.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
|
||||
}
|
||||
this.render();
|
||||
}
|
||||
|
||||
// Set and populate defaults
|
||||
var _d = {
|
||||
links: [],
|
||||
datasource: null,
|
||||
maxDataPoints: 100,
|
||||
interval: null,
|
||||
targets: [{}],
|
||||
cacheTimeout: null,
|
||||
format: 'none',
|
||||
prefix: '',
|
||||
postfix: '',
|
||||
nullText: null,
|
||||
valueMaps: [
|
||||
{ value: 'null', op: '=', text: 'N/A' }
|
||||
],
|
||||
nullPointMode: 'connected',
|
||||
valueName: 'avg',
|
||||
prefixFontSize: '50%',
|
||||
valueFontSize: '80%',
|
||||
postfixFontSize: '50%',
|
||||
thresholds: '',
|
||||
colorBackground: false,
|
||||
colorValue: false,
|
||||
colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
|
||||
sparkline: {
|
||||
show: false,
|
||||
full: false,
|
||||
lineColor: 'rgb(31, 120, 193)',
|
||||
fillColor: 'rgba(31, 118, 189, 0.18)',
|
||||
invertColorOrder() {
|
||||
var tmp = this.panel.colors[0];
|
||||
this.panel.colors[0] = this.panel.colors[2];
|
||||
this.panel.colors[2] = tmp;
|
||||
this.render();
|
||||
}
|
||||
|
||||
getDecimalsForValue(value) {
|
||||
if (_.isNumber(this.panel.decimals)) {
|
||||
return {decimals: this.panel.decimals, scaledDecimals: null};
|
||||
}
|
||||
|
||||
var delta = value / 2;
|
||||
var dec = -Math.floor(Math.log(delta) / Math.LN10);
|
||||
|
||||
var magn = Math.pow(10, -dec),
|
||||
norm = delta / magn, // norm is between 1.0 and 10.0
|
||||
size;
|
||||
|
||||
if (norm < 1.5) {
|
||||
size = 1;
|
||||
} else if (norm < 3) {
|
||||
size = 2;
|
||||
// special case for 2.5, requires an extra decimal
|
||||
if (norm > 2.25) {
|
||||
size = 2.5;
|
||||
++dec;
|
||||
}
|
||||
};
|
||||
} else if (norm < 7.5) {
|
||||
size = 5;
|
||||
} else {
|
||||
size = 10;
|
||||
}
|
||||
|
||||
_.defaults($scope.panel, _d);
|
||||
size *= magn;
|
||||
|
||||
$scope.unitFormats = kbn.getUnitFormats();
|
||||
// reduce starting decimals if not needed
|
||||
if (Math.floor(value) === value) { dec = 0; }
|
||||
|
||||
$scope.setUnitFormat = function(subItem) {
|
||||
$scope.panel.format = subItem.value;
|
||||
$scope.render();
|
||||
};
|
||||
var result: any = {};
|
||||
result.decimals = Math.max(0, dec);
|
||||
result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2;
|
||||
|
||||
$scope.init = function() {
|
||||
panelSrv.init($scope);
|
||||
};
|
||||
return result;
|
||||
}
|
||||
|
||||
$scope.refreshData = function(datasource) {
|
||||
panelHelper.updateTimeRange($scope);
|
||||
render() {
|
||||
var data: any = {};
|
||||
this.setValues(data);
|
||||
|
||||
return panelHelper.issueMetricQuery($scope, datasource)
|
||||
.then($scope.dataHandler, function(err) {
|
||||
$scope.series = [];
|
||||
$scope.render();
|
||||
throw err;
|
||||
});
|
||||
};
|
||||
data.thresholds = this.panel.thresholds.split(',').map(function(strVale) {
|
||||
return Number(strVale.trim());
|
||||
});
|
||||
|
||||
$scope.loadSnapshot = function(snapshotData) {
|
||||
panelHelper.updateTimeRange($scope);
|
||||
$scope.dataHandler(snapshotData);
|
||||
};
|
||||
data.colorMap = this.panel.colors;
|
||||
|
||||
$scope.dataHandler = function(results) {
|
||||
$scope.series = _.map(results.data, $scope.seriesHandler);
|
||||
$scope.render();
|
||||
};
|
||||
this.data = data;
|
||||
this.broadcastRender();
|
||||
}
|
||||
|
||||
$scope.seriesHandler = function(seriesData) {
|
||||
var series = new TimeSeries({
|
||||
datapoints: seriesData.datapoints,
|
||||
alias: seriesData.target,
|
||||
});
|
||||
setValues(data) {
|
||||
data.flotpairs = [];
|
||||
|
||||
series.flotpairs = series.getFlotPairs($scope.panel.nullPointMode);
|
||||
if (this.series.length > 1) {
|
||||
this.inspector.error = new Error();
|
||||
this.inspector.error.message = 'Multiple Series Error';
|
||||
this.inspector.error.data = 'Metric query returns ' + this.series.length +
|
||||
' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify(this.series);
|
||||
throw this.inspector.error;
|
||||
}
|
||||
|
||||
return series;
|
||||
};
|
||||
if (this.series && this.series.length > 0) {
|
||||
var lastPoint = _.last(this.series[0].datapoints);
|
||||
var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
|
||||
|
||||
$scope.setColoring = function(options) {
|
||||
if (options.background) {
|
||||
$scope.panel.colorValue = false;
|
||||
$scope.panel.colors = ['rgba(71, 212, 59, 0.4)', 'rgba(245, 150, 40, 0.73)', 'rgba(225, 40, 40, 0.59)'];
|
||||
if (_.isString(lastValue)) {
|
||||
data.value = 0;
|
||||
data.valueFormated = lastValue;
|
||||
data.valueRounded = 0;
|
||||
} else {
|
||||
$scope.panel.colorBackground = false;
|
||||
$scope.panel.colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
|
||||
data.value = this.series[0].stats[this.panel.valueName];
|
||||
data.flotpairs = this.series[0].flotpairs;
|
||||
|
||||
var decimalInfo = this.getDecimalsForValue(data.value);
|
||||
var formatFunc = kbn.valueFormats[this.panel.format];
|
||||
data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
|
||||
data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
|
||||
}
|
||||
$scope.render();
|
||||
};
|
||||
}
|
||||
|
||||
$scope.invertColorOrder = function() {
|
||||
var tmp = $scope.panel.colors[0];
|
||||
$scope.panel.colors[0] = $scope.panel.colors[2];
|
||||
$scope.panel.colors[2] = tmp;
|
||||
$scope.render();
|
||||
};
|
||||
|
||||
$scope.getDecimalsForValue = function(value) {
|
||||
if (_.isNumber($scope.panel.decimals)) {
|
||||
return { decimals: $scope.panel.decimals, scaledDecimals: null };
|
||||
}
|
||||
|
||||
var delta = value / 2;
|
||||
var dec = -Math.floor(Math.log(delta) / Math.LN10);
|
||||
|
||||
var magn = Math.pow(10, -dec),
|
||||
norm = delta / magn, // norm is between 1.0 and 10.0
|
||||
size;
|
||||
|
||||
if (norm < 1.5) {
|
||||
size = 1;
|
||||
} else if (norm < 3) {
|
||||
size = 2;
|
||||
// special case for 2.5, requires an extra decimal
|
||||
if (norm > 2.25) {
|
||||
size = 2.5;
|
||||
++dec;
|
||||
}
|
||||
} else if (norm < 7.5) {
|
||||
size = 5;
|
||||
} else {
|
||||
size = 10;
|
||||
}
|
||||
|
||||
size *= magn;
|
||||
|
||||
// reduce starting decimals if not needed
|
||||
if (Math.floor(value) === value) { dec = 0; }
|
||||
|
||||
var result: any = {};
|
||||
result.decimals = Math.max(0, dec);
|
||||
result.scaledDecimals = result.decimals - Math.floor(Math.log(size) / Math.LN10) + 2;
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
$scope.render = function() {
|
||||
var data: any = {};
|
||||
|
||||
$scope.setValues(data);
|
||||
|
||||
data.thresholds = $scope.panel.thresholds.split(',').map(function(strVale) {
|
||||
return Number(strVale.trim());
|
||||
});
|
||||
|
||||
data.colorMap = $scope.panel.colors;
|
||||
|
||||
$scope.data = data;
|
||||
$scope.$broadcast('render');
|
||||
};
|
||||
|
||||
$scope.setValues = function(data) {
|
||||
data.flotpairs = [];
|
||||
|
||||
if ($scope.series.length > 1) {
|
||||
$scope.inspector.error = new Error();
|
||||
$scope.inspector.error.message = 'Multiple Series Error';
|
||||
$scope.inspector.error.data = 'Metric query returns ' + $scope.series.length +
|
||||
' series. Single Stat Panel expects a single series.\n\nResponse:\n'+JSON.stringify($scope.series);
|
||||
throw $scope.inspector.error;
|
||||
}
|
||||
|
||||
if ($scope.series && $scope.series.length > 0) {
|
||||
var lastPoint = _.last($scope.series[0].datapoints);
|
||||
var lastValue = _.isArray(lastPoint) ? lastPoint[0] : null;
|
||||
|
||||
if (_.isString(lastValue)) {
|
||||
data.value = 0;
|
||||
data.valueFormated = lastValue;
|
||||
data.valueRounded = 0;
|
||||
} else {
|
||||
data.value = $scope.series[0].stats[$scope.panel.valueName];
|
||||
data.flotpairs = $scope.series[0].flotpairs;
|
||||
|
||||
var decimalInfo = $scope.getDecimalsForValue(data.value);
|
||||
var formatFunc = kbn.valueFormats[$scope.panel.format];
|
||||
data.valueFormated = formatFunc(data.value, decimalInfo.decimals, decimalInfo.scaledDecimals);
|
||||
data.valueRounded = kbn.roundValue(data.value, decimalInfo.decimals);
|
||||
}
|
||||
}
|
||||
|
||||
// check value to text mappings
|
||||
for (var i = 0; i < $scope.panel.valueMaps.length; i++) {
|
||||
var map = $scope.panel.valueMaps[i];
|
||||
// special null case
|
||||
if (map.value === 'null') {
|
||||
if (data.value === null || data.value === void 0) {
|
||||
data.valueFormated = map.text;
|
||||
return;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
// value/number to text mapping
|
||||
var value = parseFloat(map.value);
|
||||
if (value === data.value) {
|
||||
// check value to text mappings
|
||||
for (var i = 0; i < this.panel.valueMaps.length; i++) {
|
||||
var map = this.panel.valueMaps[i];
|
||||
// special null case
|
||||
if (map.value === 'null') {
|
||||
if (data.value === null || data.value === void 0) {
|
||||
data.valueFormated = map.text;
|
||||
return;
|
||||
}
|
||||
continue;
|
||||
}
|
||||
|
||||
if (data.value === null || data.value === void 0) {
|
||||
data.valueFormated = "no value";
|
||||
// value/number to text mapping
|
||||
var value = parseFloat(map.value);
|
||||
if (value === data.value) {
|
||||
data.valueFormated = map.text;
|
||||
return;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
$scope.removeValueMap = function(map) {
|
||||
var index = _.indexOf($scope.panel.valueMaps, map);
|
||||
$scope.panel.valueMaps.splice(index, 1);
|
||||
$scope.render();
|
||||
};
|
||||
if (data.value === null || data.value === void 0) {
|
||||
data.valueFormated = "no value";
|
||||
}
|
||||
};
|
||||
|
||||
$scope.addValueMap = function() {
|
||||
$scope.panel.valueMaps.push({value: '', op: '=', text: '' });
|
||||
};
|
||||
|
||||
$scope.init();
|
||||
removeValueMap(map) {
|
||||
var index = _.indexOf(this.panel.valueMaps, map);
|
||||
this.panel.valueMaps.splice(index, 1);
|
||||
this.render();
|
||||
};
|
||||
|
||||
addValueMap() {
|
||||
this.panel.valueMaps.push({value: '', op: '=', text: '' });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -10,20 +10,20 @@
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-small tight-form-input"
|
||||
ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
|
||||
ng-model="ctrl.panel.prefix" ng-change="ctrl.render()" ng-model-onblur>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Value
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
|
||||
<select class="input-small tight-form-input" ng-model="ctrl.panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="ctrl.render()"></select>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Postfix
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-small tight-form-input last"
|
||||
ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
|
||||
ng-model="ctrl.panel.postfix" ng-change="ctrl.render()" ng-model-onblur>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@ -37,19 +37,19 @@
|
||||
Prefix
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-small tight-form-input" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
<select class="input-small tight-form-input" ng-model="ctrl.panel.prefixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Value
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
<select class="input-small tight-form-input" ng-model="ctrl.panel.valueFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Postfix
|
||||
</li>
|
||||
<li>
|
||||
<select class="input-small tight-form-input last" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
|
||||
<select class="input-small tight-form-input last" ng-model="ctrl.panel.postfixFontSize" ng-options="f for f in ctrl.fontSizes" ng-change="ctrl.render()"></select>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@ -60,16 +60,16 @@
|
||||
<strong>Unit</strong>
|
||||
</li>
|
||||
<li class="dropdown" style="width: 266px;"
|
||||
ng-model="panel.format"
|
||||
dropdown-typeahead="unitFormats"
|
||||
dropdown-typeahead-on-select="setUnitFormat($subItem)">
|
||||
ng-model="ctrl.panel.format"
|
||||
dropdown-typeahead="ctrl.unitFormats"
|
||||
dropdown-typeahead-on-select="ctrl.setUnitFormat($subItem)">
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Decimals
|
||||
</li>
|
||||
<li>
|
||||
<input type="number" class="input-small tight-form-input last" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
|
||||
ng-model="panel.decimals" ng-change="render()" ng-model-onblur>
|
||||
ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@ -86,32 +86,32 @@
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Background
|
||||
<input class="cr1" id="panel.colorBackground" type="checkbox"
|
||||
ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
|
||||
<label for="panel.colorBackground" class="cr1"></label>
|
||||
<input class="cr1" id="ctrl.panel.colorBackground" type="checkbox"
|
||||
ng-model="ctrl.panel.colorBackground" ng-checked="ctrl.panel.colorBackground" ng-change="ctrl.render()">
|
||||
<label for="ctrl.panel.colorBackground" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Value
|
||||
<input class="cr1" id="panel.colorValue" type="checkbox"
|
||||
ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
|
||||
<label for="panel.colorValue" class="cr1"></label>
|
||||
<input class="cr1" id="ctrl.panel.colorValue" type="checkbox"
|
||||
ng-model="ctrl.panel.colorValue" ng-checked="ctrl.panel.colorValue" ng-change="ctrl.render()">
|
||||
<label for="ctrl.panel.colorValue" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Thresholds<tip>Define two threshold values<br /> 50,80 will produce: <50 = Green, 50:80 = Yellow, >80 = Red</tip>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="50,80"></input>
|
||||
<input type="text" class="input-large tight-form-input" ng-model="ctrl.panel.thresholds" ng-blur="ctrl.render()" placeholder="50,80"></input>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Colors
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="ctrl.panel.colors[0]" ng-change="ctrl.render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="ctrl.panel.colors[1]" ng-change="ctrl.render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="ctrl.panel.colors[2]" ng-change="ctrl.render()" ></spectrum-picker>
|
||||
</li>
|
||||
<li class="tight-form-item last">
|
||||
<a class="pointer" ng-click="invertColorOrder()">invert order</a>
|
||||
<a class="pointer" ng-click="ctrl.invertColorOrder()">invert order</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@ -128,27 +128,27 @@
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Show
|
||||
<input class="cr1" id="panel.sparkline.show" type="checkbox"
|
||||
ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
|
||||
<label for="panel.sparkline.show" class="cr1"></label>
|
||||
<input class="cr1" id="ctrl.panel.sparkline.show" type="checkbox"
|
||||
ng-model="ctrl.panel.sparkline.show" ng-checked="ctrl.panel.sparkline.show" ng-change="ctrl.render()">
|
||||
<label for="ctrl.panel.sparkline.show" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Background mode
|
||||
<input class="cr1" id="panel.sparkline.full" type="checkbox"
|
||||
ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
|
||||
<label for="panel.sparkline.full" class="cr1"></label>
|
||||
<input class="cr1" id="ctrl.panel.sparkline.full" type="checkbox"
|
||||
ng-model="ctrl.panel.sparkline.full" ng-checked="ctrl.panel.sparkline.full" ng-change="ctrl.render()">
|
||||
<label for="ctrl.panel.sparkline.full" class="cr1"></label>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Line Color
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="ctrl.panel.sparkline.lineColor" ng-change="ctrl.render()" ></spectrum-picker>
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
Fill Color
|
||||
</li>
|
||||
<li class="tight-form-item last">
|
||||
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
|
||||
<spectrum-picker ng-model="ctrl.panel.sparkline.fillColor" ng-change="ctrl.render()" ></spectrum-picker>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@ -163,21 +163,21 @@
|
||||
<li class="tight-form-item">
|
||||
<strong>Value to text mapping</strong>
|
||||
</li>
|
||||
<li class="tight-form-item" ng-repeat-start="map in panel.valueMaps">
|
||||
<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
|
||||
<li class="tight-form-item" ng-repeat-start="map in ctrl.panel.valueMaps">
|
||||
<i class="fa fa-remove pointer" ng-click="ctrl.removeValueMap(map)"></i>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="render()">
|
||||
<input type="text" ng-model="ctrl.map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="ctrl.render()">
|
||||
</li>
|
||||
<li class="tight-form-item">
|
||||
<i class="fa fa-arrow-right"></i>
|
||||
</li>
|
||||
<li ng-repeat-end>
|
||||
<input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="render()">
|
||||
<input type="text" placeholder="text" ng-model="ctrl.map.text" class="input-mini tight-form-input" ng-blur="ctrl.render()">
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="pointer tight-form-item last" ng-click="addValueMap();">
|
||||
<a class="pointer tight-form-item last" ng-click="ctrl.addValueMap();">
|
||||
<i class="fa fa-plus"></i>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<grafana-panel>
|
||||
<div class="singlestat-panel"></div>
|
||||
<div class="clearfix"></div>
|
||||
</grafana-panel>
|
||||
<div class="singlestat-panel">
|
||||
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
|
||||
@ -2,221 +2,226 @@
|
||||
|
||||
import _ from 'lodash';
|
||||
import $ from 'jquery';
|
||||
import angular from 'angular';
|
||||
import 'jquery.flot';
|
||||
import {SingleStatCtrl} from './controller';
|
||||
import {PanelDirective} from '../../../features/panel/panel';
|
||||
|
||||
angular.module('grafana.directives').directive('singleStatPanel', singleStatPanel);
|
||||
|
||||
function singleStatPanel($location, linkSrv, $timeout, templateSrv) {
|
||||
'use strict';
|
||||
return {
|
||||
controller: SingleStatCtrl,
|
||||
templateUrl: 'app/plugins/panel/singlestat/module.html',
|
||||
link: function(scope, elem) {
|
||||
var data, panel, linkInfo, $panelContainer;
|
||||
var firstRender = true;
|
||||
class SingleStatPanel extends PanelDirective {
|
||||
templateUrl = 'app/plugins/panel/singlestat/module.html';
|
||||
controller = SingleStatCtrl;
|
||||
|
||||
scope.$on('render', function() {
|
||||
if (firstRender) {
|
||||
var inner = elem.find('.singlestat-panel');
|
||||
if (inner.length) {
|
||||
elem = inner;
|
||||
$panelContainer = elem.parents('.panel-container');
|
||||
firstRender = false;
|
||||
hookupDrilldownLinkTooltip();
|
||||
}
|
||||
}
|
||||
/** @ngInject */
|
||||
constructor(private $location, private linkSrv, private $timeout, private templateSrv) {
|
||||
super();
|
||||
}
|
||||
|
||||
render();
|
||||
scope.panelRenderingComplete();
|
||||
});
|
||||
link(scope, elem, attrs, ctrl) {
|
||||
var $location = this.$location;
|
||||
var linkSrv = this.linkSrv;
|
||||
var $timeout = this.$timeout;
|
||||
var panel = ctrl.panel;
|
||||
var templateSrv = this.templateSrv;
|
||||
var data, linkInfo, $panelContainer;
|
||||
var firstRender = true;
|
||||
|
||||
function setElementHeight() {
|
||||
try {
|
||||
var height = scope.height || panel.height || scope.row.height;
|
||||
if (_.isString(height)) {
|
||||
height = parseInt(height.replace('px', ''), 10);
|
||||
}
|
||||
|
||||
height -= 5; // padding
|
||||
height -= panel.title ? 24 : 9; // subtract panel title bar
|
||||
|
||||
elem.css('height', height + 'px');
|
||||
|
||||
return true;
|
||||
} catch (e) { // IE throws errors sometimes
|
||||
return false;
|
||||
scope.$on('render', function() {
|
||||
if (firstRender) {
|
||||
var inner = elem.find('.singlestat-panel');
|
||||
if (inner.length) {
|
||||
elem = inner;
|
||||
$panelContainer = elem.parents('.panel-container');
|
||||
firstRender = false;
|
||||
hookupDrilldownLinkTooltip();
|
||||
}
|
||||
}
|
||||
|
||||
function applyColoringThresholds(value, valueString) {
|
||||
if (!panel.colorValue) {
|
||||
return valueString;
|
||||
render();
|
||||
ctrl.renderingCompleted();
|
||||
});
|
||||
|
||||
function setElementHeight() {
|
||||
try {
|
||||
var height = scope.height || panel.height || ctrl.row.height;
|
||||
if (_.isString(height)) {
|
||||
height = parseInt(height.replace('px', ''), 10);
|
||||
}
|
||||
|
||||
var color = getColorForValue(data, value);
|
||||
if (color) {
|
||||
return '<span style="color:' + color + '">'+ valueString + '</span>';
|
||||
}
|
||||
height -= 5; // padding
|
||||
height -= panel.title ? 24 : 9; // subtract panel title bar
|
||||
|
||||
elem.css('height', height + 'px');
|
||||
|
||||
return true;
|
||||
} catch (e) { // IE throws errors sometimes
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
function applyColoringThresholds(value, valueString) {
|
||||
if (!panel.colorValue) {
|
||||
return valueString;
|
||||
}
|
||||
|
||||
function getSpan(className, fontSize, value) {
|
||||
value = templateSrv.replace(value);
|
||||
return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
|
||||
value + '</span>';
|
||||
var color = getColorForValue(data, value);
|
||||
if (color) {
|
||||
return '<span style="color:' + color + '">'+ valueString + '</span>';
|
||||
}
|
||||
|
||||
function getBigValueHtml() {
|
||||
var body = '<div class="singlestat-panel-value-container">';
|
||||
return valueString;
|
||||
}
|
||||
|
||||
if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, scope.panel.prefix); }
|
||||
function getSpan(className, fontSize, value) {
|
||||
value = templateSrv.replace(value);
|
||||
return '<span class="' + className + '" style="font-size:' + fontSize + '">' +
|
||||
value + '</span>';
|
||||
}
|
||||
|
||||
var value = applyColoringThresholds(data.valueRounded, data.valueFormated);
|
||||
body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
|
||||
function getBigValueHtml() {
|
||||
var body = '<div class="singlestat-panel-value-container">';
|
||||
|
||||
if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); }
|
||||
if (panel.prefix) { body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.prefix); }
|
||||
|
||||
body += '</div>';
|
||||
var value = applyColoringThresholds(data.valueRounded, data.valueFormated);
|
||||
body += getSpan('singlestat-panel-value', panel.valueFontSize, value);
|
||||
|
||||
return body;
|
||||
if (panel.postfix) { body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.postfix); }
|
||||
|
||||
body += '</div>';
|
||||
|
||||
return body;
|
||||
}
|
||||
|
||||
function addSparkline() {
|
||||
var width = elem.width() + 20;
|
||||
var height = elem.height() || 100;
|
||||
|
||||
var plotCanvas = $('<div></div>');
|
||||
var plotCss: any = {};
|
||||
plotCss.position = 'absolute';
|
||||
|
||||
if (panel.sparkline.full) {
|
||||
plotCss.bottom = '5px';
|
||||
plotCss.left = '-5px';
|
||||
plotCss.width = (width - 10) + 'px';
|
||||
var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5;
|
||||
plotCss.height = (height - dynamicHeightMargin) + 'px';
|
||||
} else {
|
||||
plotCss.bottom = "0px";
|
||||
plotCss.left = "-5px";
|
||||
plotCss.width = (width - 10) + 'px';
|
||||
plotCss.height = Math.floor(height * 0.25) + "px";
|
||||
}
|
||||
|
||||
function addSparkline() {
|
||||
var panel = scope.panel;
|
||||
var width = elem.width() + 20;
|
||||
var height = elem.height() || 100;
|
||||
plotCanvas.css(plotCss);
|
||||
|
||||
var plotCanvas = $('<div></div>');
|
||||
var plotCss: any = {};
|
||||
plotCss.position = 'absolute';
|
||||
|
||||
if (panel.sparkline.full) {
|
||||
plotCss.bottom = '5px';
|
||||
plotCss.left = '-5px';
|
||||
plotCss.width = (width - 10) + 'px';
|
||||
var dynamicHeightMargin = height <= 100 ? 5 : (Math.round((height/100)) * 15) + 5;
|
||||
plotCss.height = (height - dynamicHeightMargin) + 'px';
|
||||
} else {
|
||||
plotCss.bottom = "0px";
|
||||
plotCss.left = "-5px";
|
||||
plotCss.width = (width - 10) + 'px';
|
||||
plotCss.height = Math.floor(height * 0.25) + "px";
|
||||
}
|
||||
|
||||
plotCanvas.css(plotCss);
|
||||
|
||||
var options = {
|
||||
legend: { show: false },
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
fill: 1,
|
||||
lineWidth: 1,
|
||||
fillColor: panel.sparkline.fillColor,
|
||||
},
|
||||
var options = {
|
||||
legend: { show: false },
|
||||
series: {
|
||||
lines: {
|
||||
show: true,
|
||||
fill: 1,
|
||||
lineWidth: 1,
|
||||
fillColor: panel.sparkline.fillColor,
|
||||
},
|
||||
yaxes: { show: false },
|
||||
xaxis: {
|
||||
show: false,
|
||||
mode: "time",
|
||||
min: scope.range.from.valueOf(),
|
||||
max: scope.range.to.valueOf(),
|
||||
},
|
||||
grid: { hoverable: false, show: false },
|
||||
};
|
||||
},
|
||||
yaxes: { show: false },
|
||||
xaxis: {
|
||||
show: false,
|
||||
mode: "time",
|
||||
min: ctrl.range.from.valueOf(),
|
||||
max: ctrl.range.to.valueOf(),
|
||||
},
|
||||
grid: { hoverable: false, show: false },
|
||||
};
|
||||
|
||||
elem.append(plotCanvas);
|
||||
elem.append(plotCanvas);
|
||||
|
||||
var plotSeries = {
|
||||
data: data.flotpairs,
|
||||
color: panel.sparkline.lineColor
|
||||
};
|
||||
var plotSeries = {
|
||||
data: data.flotpairs,
|
||||
color: panel.sparkline.lineColor
|
||||
};
|
||||
|
||||
$.plot(plotCanvas, [plotSeries], options);
|
||||
}
|
||||
$.plot(plotCanvas, [plotSeries], options);
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (!scope.data) { return; }
|
||||
function render() {
|
||||
if (!ctrl.data) { return; }
|
||||
|
||||
data = scope.data;
|
||||
panel = scope.panel;
|
||||
data = ctrl.data;
|
||||
setElementHeight();
|
||||
|
||||
setElementHeight();
|
||||
var body = getBigValueHtml();
|
||||
|
||||
var body = getBigValueHtml();
|
||||
|
||||
if (panel.colorBackground && !isNaN(data.valueRounded)) {
|
||||
var color = getColorForValue(data, data.valueRounded);
|
||||
if (color) {
|
||||
$panelContainer.css('background-color', color);
|
||||
if (scope.fullscreen) {
|
||||
elem.css('background-color', color);
|
||||
} else {
|
||||
elem.css('background-color', '');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$panelContainer.css('background-color', '');
|
||||
elem.css('background-color', '');
|
||||
}
|
||||
|
||||
elem.html(body);
|
||||
|
||||
if (panel.sparkline.show) {
|
||||
addSparkline();
|
||||
}
|
||||
|
||||
elem.toggleClass('pointer', panel.links.length > 0);
|
||||
|
||||
if (panel.links.length > 0) {
|
||||
linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], scope.panel.scopedVars);
|
||||
} else {
|
||||
linkInfo = null;
|
||||
}
|
||||
}
|
||||
|
||||
function hookupDrilldownLinkTooltip() {
|
||||
// drilldown link tooltip
|
||||
var drilldownTooltip = $('<div id="tooltip" class="">hello</div>"');
|
||||
|
||||
elem.mouseleave(function() {
|
||||
if (panel.links.length === 0) { return;}
|
||||
drilldownTooltip.detach();
|
||||
});
|
||||
|
||||
elem.click(function(evt) {
|
||||
if (!linkInfo) { return; }
|
||||
// ignore title clicks in title
|
||||
if ($(evt).parents('.panel-header').length > 0) { return; }
|
||||
|
||||
if (linkInfo.target === '_blank') {
|
||||
var redirectWindow = window.open(linkInfo.href, '_blank');
|
||||
redirectWindow.location;
|
||||
return;
|
||||
}
|
||||
|
||||
if (linkInfo.href.indexOf('http') === 0) {
|
||||
window.location.href = linkInfo.href;
|
||||
if (panel.colorBackground && !isNaN(data.valueRounded)) {
|
||||
var color = getColorForValue(data, data.valueRounded);
|
||||
if (color) {
|
||||
$panelContainer.css('background-color', color);
|
||||
if (scope.fullscreen) {
|
||||
elem.css('background-color', color);
|
||||
} else {
|
||||
$timeout(function() {
|
||||
$location.url(linkInfo.href);
|
||||
});
|
||||
elem.css('background-color', '');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
$panelContainer.css('background-color', '');
|
||||
elem.css('background-color', '');
|
||||
}
|
||||
|
||||
drilldownTooltip.detach();
|
||||
});
|
||||
elem.html(body);
|
||||
|
||||
elem.mousemove(function(e) {
|
||||
if (!linkInfo) { return;}
|
||||
if (panel.sparkline.show) {
|
||||
addSparkline();
|
||||
}
|
||||
|
||||
drilldownTooltip.text('click to go to: ' + linkInfo.title);
|
||||
drilldownTooltip.place_tt(e.pageX+20, e.pageY-15);
|
||||
});
|
||||
elem.toggleClass('pointer', panel.links.length > 0);
|
||||
|
||||
if (panel.links.length > 0) {
|
||||
linkInfo = linkSrv.getPanelLinkAnchorInfo(panel.links[0], panel.scopedVars);
|
||||
} else {
|
||||
linkInfo = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function hookupDrilldownLinkTooltip() {
|
||||
// drilldown link tooltip
|
||||
var drilldownTooltip = $('<div id="tooltip" class="">hello</div>"');
|
||||
|
||||
elem.mouseleave(function() {
|
||||
if (panel.links.length === 0) { return;}
|
||||
drilldownTooltip.detach();
|
||||
});
|
||||
|
||||
elem.click(function(evt) {
|
||||
if (!linkInfo) { return; }
|
||||
// ignore title clicks in title
|
||||
if ($(evt).parents('.panel-header').length > 0) { return; }
|
||||
|
||||
if (linkInfo.target === '_blank') {
|
||||
var redirectWindow = window.open(linkInfo.href, '_blank');
|
||||
redirectWindow.location;
|
||||
return;
|
||||
}
|
||||
|
||||
if (linkInfo.href.indexOf('http') === 0) {
|
||||
window.location.href = linkInfo.href;
|
||||
} else {
|
||||
$timeout(function() {
|
||||
$location.url(linkInfo.href);
|
||||
});
|
||||
}
|
||||
|
||||
drilldownTooltip.detach();
|
||||
});
|
||||
|
||||
elem.mousemove(function(e) {
|
||||
if (!linkInfo) { return;}
|
||||
|
||||
drilldownTooltip.text('click to go to: ' + linkInfo.title);
|
||||
drilldownTooltip.place_tt(e.pageX+20, e.pageY-15);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getColorForValue(data, value) {
|
||||
@ -226,7 +231,12 @@ function getColorForValue(data, value) {
|
||||
}
|
||||
}
|
||||
|
||||
console.log('first');
|
||||
return _.first(data.colorMap);
|
||||
}
|
||||
|
||||
export {singleStatPanel as panel, getColorForValue};
|
||||
export {
|
||||
SingleStatPanel,
|
||||
SingleStatPanel as Panel,
|
||||
getColorForValue
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user