mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
feat(tablepanel): worked on cell / value threshold coloring
This commit is contained in:
parent
e1433ebb41
commit
b8e6fcfeae
@ -79,21 +79,18 @@
|
||||
<li>
|
||||
<select class="input-small tight-form-input"
|
||||
ng-model="column.type"
|
||||
ng-options="k as v.text for (k, v) in columnTypes"
|
||||
ng-options="c.value as c.text for c in columnTypes"
|
||||
ng-change="render()"
|
||||
style="width: 150px"
|
||||
></select>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="tight-form" ng-if="column.type === 'date'">
|
||||
<ul class="tight-form-list">
|
||||
<li class="tight-form-item text-right" style="width: 93px">
|
||||
<ul class="tight-form-list" ng-if="column.type === 'date'">
|
||||
<li class="tight-form-item">
|
||||
Format
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-medium tight-form-input" ng-model="column.dateFormat" ng-change="render()" ng-model-onblur>
|
||||
<input type="text" class="input-large tight-form-input" ng-model="column.dateFormat" ng-change="render()" ng-model-onblur>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="clearfix"></div>
|
||||
@ -106,7 +103,7 @@
|
||||
<li>
|
||||
<select class="input-small tight-form-input"
|
||||
ng-model="column.colorMode"
|
||||
ng-options="k as v.text for (k, v) in colorModes"
|
||||
ng-options="c.value as c.text for c in colorModes"
|
||||
ng-change="render()"
|
||||
style="width: 150px"
|
||||
></select>
|
||||
@ -115,7 +112,7 @@
|
||||
Thresholds<tip>Comma seperated values</tip>
|
||||
</li>
|
||||
<li>
|
||||
<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
|
||||
<input type="text" class="input-small tight-form-input" style="width: 150px" ng-model="column.thresholds" ng-blur="render()" placeholder="0,50,80" array-join></input>
|
||||
</li>
|
||||
<li class="tight-form-item" style="width: 60px">
|
||||
Colors
|
||||
|
@ -18,16 +18,17 @@ export function tablePanelEditor() {
|
||||
link: function(scope, elem) {
|
||||
scope.transformers = transformers;
|
||||
scope.unitFormats = kbn.getUnitFormats();
|
||||
scope.colorModes = {
|
||||
'cell': {text: 'Cell'},
|
||||
'value': {text: 'Value'},
|
||||
'row': {text: 'Row'},
|
||||
};
|
||||
scope.columnTypes = {
|
||||
'number': {text: 'Number'},
|
||||
'string': {text: 'String'},
|
||||
'date': {text: 'Date'},
|
||||
};
|
||||
scope.colorModes = [
|
||||
{text: 'Disabled', value: null},
|
||||
{text: 'Cell', value: 'cell'},
|
||||
{text: 'Value', value: 'value'},
|
||||
{text: 'Row', value: 'row'},
|
||||
];
|
||||
scope.columnTypes = [
|
||||
{text: 'Number', value: 'number'},
|
||||
{text: 'String', value: 'string'},
|
||||
{text: 'Date', value: 'date'},
|
||||
];
|
||||
|
||||
scope.updateJsonFieldsMenu = function(data) {
|
||||
scope.jsonFieldsMenu = [];
|
||||
@ -82,8 +83,9 @@ export function tablePanelEditor() {
|
||||
type: 'number',
|
||||
decimals: 2,
|
||||
colors: ["rgba(245, 54, 54, 0.9)", "rgba(237, 129, 40, 0.89)", "rgba(50, 172, 45, 0.97)"],
|
||||
colorMode: 'value',
|
||||
colorMode: null,
|
||||
pattern: '/.*/',
|
||||
thresholds: [],
|
||||
};
|
||||
|
||||
scope.panel.columns.push(angular.copy(columnStyleDefaults));
|
||||
|
@ -6,32 +6,59 @@ import moment = require('moment');
|
||||
|
||||
export class TableRenderer {
|
||||
formaters: any[];
|
||||
colorState: any;
|
||||
|
||||
constructor(private panel, private table, private timezone) {
|
||||
this.formaters = [];
|
||||
this.colorState = {};
|
||||
}
|
||||
|
||||
getColorForValue(value, style) {
|
||||
if (!style.thresholds) { return null; }
|
||||
|
||||
for (var i = style.thresholds.length - 1; i >= 0 ; i--) {
|
||||
if (value >= style.thresholds[i]) {
|
||||
return style.colors[i];
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
createColumnFormater(style) {
|
||||
return (v) => {
|
||||
if (v === null || v === void 0) {
|
||||
return '-';
|
||||
}
|
||||
if (_.isString(v) || !style) {
|
||||
return v;
|
||||
}
|
||||
if (!style) {
|
||||
return v => v;
|
||||
}
|
||||
|
||||
if (style.type === 'date') {
|
||||
if (style.type === 'date') {
|
||||
return v => {
|
||||
if (_.isArray(v)) { v = v[0]; }
|
||||
var date = moment(v);
|
||||
if (this.timezone === 'utc') {
|
||||
date = date.utc();
|
||||
}
|
||||
return date.format(style.dateFormat);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (_.isNumber(v) && style.type === 'number') {
|
||||
let valueFormater = kbn.valueFormats[style.unit];
|
||||
return valueFormater(v, style.decimals);
|
||||
if (style.type === 'number') {
|
||||
let valueFormater = kbn.valueFormats[style.unit];
|
||||
|
||||
return v => {
|
||||
if (v === null || v === void 0) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
if (style.colorMode) {
|
||||
this.colorState[style.colorMode] = this.getColorForValue(v, style);
|
||||
}
|
||||
|
||||
return valueFormater(v, style.decimals, null);
|
||||
};
|
||||
}
|
||||
|
||||
return v => {
|
||||
if (v === null || v === void 0) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
if (_.isArray(v)) {
|
||||
@ -65,8 +92,18 @@ export class TableRenderer {
|
||||
}
|
||||
|
||||
renderCell(columnIndex, value) {
|
||||
var colValue = this.formatColumnValue(columnIndex, value);
|
||||
return '<td>' + colValue + '</td>';
|
||||
var value = this.formatColumnValue(columnIndex, value);
|
||||
var style = '';
|
||||
if (this.colorState.cell) {
|
||||
style = ' style="background-color:' + this.colorState.cell + ';color: white"';
|
||||
this.colorState.cell = null;
|
||||
}
|
||||
else if (this.colorState.value) {
|
||||
style = ' style="color:' + this.colorState.value + '"';
|
||||
this.colorState.value = null;
|
||||
}
|
||||
|
||||
return '<td' + style + '>' + value + '</td>';
|
||||
}
|
||||
|
||||
render(page) {
|
||||
|
@ -6,7 +6,11 @@ import {TableRenderer} from '../renderer';
|
||||
describe('when rendering table', () => {
|
||||
describe('given 2 columns', () => {
|
||||
var table = new TableModel();
|
||||
table.columns = [{text: 'Time'}, {text: 'Value'}];
|
||||
table.columns = [
|
||||
{text: 'Time'},
|
||||
{text: 'Value'},
|
||||
{text: 'Colored'}
|
||||
];
|
||||
|
||||
var panel = {
|
||||
pageSize: 10,
|
||||
@ -15,6 +19,21 @@ describe('when rendering table', () => {
|
||||
pattern: 'Time',
|
||||
type: 'date',
|
||||
format: 'LLL'
|
||||
},
|
||||
{
|
||||
pattern: 'Value',
|
||||
type: 'number',
|
||||
unit: 'ms',
|
||||
decimals: 3,
|
||||
},
|
||||
{
|
||||
pattern: 'Colored',
|
||||
type: 'number',
|
||||
unit: 'none',
|
||||
decimals: 1,
|
||||
colorMode: 'value',
|
||||
thresholds: [0, 50, 80],
|
||||
colors: ['green', 'orange', 'red']
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -26,6 +45,15 @@ describe('when rendering table', () => {
|
||||
expect(html).to.be('<td>2014-01-01T06:06:06+00:00</td>');
|
||||
});
|
||||
|
||||
it('number column should be formated', () => {
|
||||
var html = renderer.renderCell(1, 1230);
|
||||
expect(html).to.be('<td>1.230 s</td>');
|
||||
});
|
||||
|
||||
it('colored cell should have style', () => {
|
||||
var html = renderer.renderCell(2, 55);
|
||||
expect(html).to.be('<td style="color:orange">55.0</td>');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user