github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

Backport PR #8597 - Add color formatter for string fields

Browse source 
---------

**Commit 1:**
#6537 add color formatting for string fields

* Original sha: ca87c488a0
* Authored by Marcel Hallmann <marcel.hallmann@six-group.com> on 2016-09-29T12:53:19Z

**Commit 2:**
#6537 adjust test

* Original sha: 23e2ce19ae
* Authored by marcelhallmann <marcelhallmann@gmx.ch> on 2016-10-05T08:21:24Z

**Commit 3:**
Merge remote-tracking branch 'upstream/master'

* Original sha: bdf66fbabc
* Authored by Marcel Hallmann <marcel.hallmann@six-group.com> on 2016-10-07T11:19:00Z

**Commit 4:**
#6537 adjust check

* Original sha: a4bf798e29
* Authored by Marcel Hallmann <marcelhallmann@gmx.ch> on 2016-10-08T17:58:51Z

**Commit 5:**
#6537 add simple check to enable coloring in viz (data table), too

* Original sha: e67f6ebf5c
* Authored by Marcel Hallmann <marcelhallmann@gmx.ch> on 2016-10-08T18:01:12Z

**Commit 6:**
#6537 call the field formatter instead of the toString() function

* Original sha: 7dc7fd5b57
* Authored by Marcel Hallmann <marcelhallmann@gmx.ch> on 2016-10-08T18:47:39Z

**Commit 7:**
#6537 add some tests for coloring string fields

* Original sha: 9733fe5661
* Authored by Marcel Hallmann <marcelhallmann@gmx.ch> on 2016-10-08T18:48:46Z

**Commit 8:**
#6537 better default value for regex field

* Original sha: fed9df2946
* Authored by Marcel Hallmann <marcelhallmann@gmx.ch> on 2016-10-08T19:13:40Z

**Commit 9:**
Merge branch 'master' of github.com:elastic/kibana into pr/8597

* Original sha: b583db71f8
* Authored by spalger <email@spalger.com> on 2016-10-27T19:31:25Z

**Commit 10:**
[stringify] track field type in params

* Original sha: c84a61b503
* Authored by spalger <email@spalger.com> on 2016-10-27T21:04:19Z
This commit is contained in:
jasper 2016-10-28 11:51:42 -04:00 • committed by Spencer
parent 8d26546ebc
commit f2e3528498
3 changed files with 84 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/ui/public/stringify/__tests__/_color.js
View file

@ -9,31 +9,58 @@ describe('Color Format', function () {
beforeEach(ngMock.inject(function (Private) {
fieldFormats = Private(RegistryFieldFormatsProvider);
ColorFormat = fieldFormats.getType('color');
}));
it('should add colors if the value is in range', function () {
let colorer = new ColorFormat({
colors: [{
range: '100:150',
text: 'blue',
background: 'yellow'
}]
context('field is a number', () => {
it('should add colors if the value is in range', function () {
let colorer = new ColorFormat({
fieldType: 'number',
colors: [{
range: '100:150',
text: 'blue',
background: 'yellow'
}]
});
expect(colorer.convert(99, 'html')).to.eql('99');
expect(colorer.convert(100, 'html')).to.eql('<span style="color: blue;background-color: yellow;">100</span>');
expect(colorer.convert(150, 'html')).to.eql('<span style="color: blue;background-color: yellow;">150</span>');
expect(colorer.convert(151, 'html')).to.eql('151');
});
it('should not convert invalid ranges', function () {
let colorer = new ColorFormat({
fieldType: 'number',
colors: [{
range: '100150',
text: 'blue',
background: 'yellow'
}]
});
expect(colorer.convert(99, 'html')).to.eql('99');
});
expect(colorer.convert(99, 'html')).to.eql('99');
expect(colorer.convert(100, 'html')).to.eql('<span style="color: blue;background-color: yellow;">100</span>');
expect(colorer.convert(150, 'html')).to.eql('<span style="color: blue;background-color: yellow;">150</span>');
expect(colorer.convert(151, 'html')).to.eql('151');
});
it('should not convert invalid ranges', function () {
let colorer = new ColorFormat({
colors: [{
range: '100150',
text: 'blue',
background: 'yellow'
}]
context('field is a string', () => {
it('should add colors if the regex matches', function () {
let colorer = new ColorFormat({
fieldType: 'string',
colors: [{
regex: 'A.*',
text: 'blue',
background: 'yellow'
}]
});
let converter = colorer.getConverterFor('html');
expect(converter('B', 'html')).to.eql('B');
expect(converter('AAA', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AAA</span>');
expect(converter('AB', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AB</span>');
expect(converter('a', 'html')).to.eql('a');
expect(converter('B', 'html')).to.eql('B');
expect(converter('AAA', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AAA</span>');
expect(converter('AB', 'html')).to.eql('<span style="color: blue;background-color: yellow;">AB</span>');
expect(converter('a', 'html')).to.eql('a');
});
expect(colorer.convert(99, 'html')).to.eql('99');
});
});

14
src/ui/public/stringify/editors/color.html
View file

@ -4,16 +4,18 @@
<button ng-if="editor.formatParams.colors.length > 1" aria-label="Remove Color" ng-click="removeColor($index)" tooltip="Remove Color" tooltip-append-to-body="true" type="button" class="btn btn-xs btn-danger editor-color-remove">
<i aria-hidden="true" class="fa fa-times"></i>
</button>
<div class="form-group">
<label>Range
<small>
(min:max)
</small>
</label>
<div class="form-group" ng-if="editor.formatParams.fieldType === 'number'">
<label>Range <small>(min:max)</small></label>
<input
ng-model="color.range"
class="form-control">
</div>
<div class="form-group" ng-if="editor.formatParams.fieldType === 'string'">
<label>Pattern <small>(regular expression)</small></label>
<input
ng-model="color.regex"
class="form-control">
</div>
<div class="form-group">
<label>Font Color</label>
<input

36
src/ui/public/stringify/types/color.js
View file

@ -8,6 +8,7 @@ export default function ColorFormatProvider(Private) {
const convertTemplate = _.template('<span style="<%- style %>"><%- val %></span>');
const DEFAULT_COLOR = {
range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`,
regex: '<insert regex>',
text: '#000000',
background: '#ffffff'
};
@ -20,12 +21,17 @@ export default function ColorFormatProvider(Private) {
_Color.id = 'color';
_Color.title = 'Color';
_Color.fieldType = [
'number'
'number',
'string'
];
_Color.editor = {
template: colorTemplate,
controller($scope) {
$scope.$watch('editor.field.type', type => {
$scope.editor.formatParams.fieldType = type;
});
$scope.addColor = function () {
$scope.editor.formatParams.colors.push(_.cloneDeep(DEFAULT_COLOR));
};
@ -38,17 +44,32 @@ export default function ColorFormatProvider(Private) {
_Color.paramDefaults = {
fieldType: null, // populated by editor, see controller below
colors: [_.cloneDeep(DEFAULT_COLOR)]
};
_Color.prototype.findColorRuleForVal = function (val) {
switch (this.param('fieldType')) {
case 'string':
return _.findLast(this.param('colors'), (colorParam) => {
return new RegExp(colorParam.regex).test(val);
});
case 'number':
return _.findLast(this.param('colors'), ({ range }) => {
if (!range) return;
const [start, end] = range.split(':');
return val >= Number(start) && val <= Number(end);
});
default:
return null;
}
};
_Color.prototype._convert = {
html(val) {
const color = _.findLast(this.param('colors'), ({ range }) => {
if (!range) return;
const [start, end] = range.split(':');
return val >= Number(start) && val <= Number(end);
});
const color = this.findColorRuleForVal(val);
if (!color) return _.asPrettyString(val);
let style = '';
@ -58,5 +79,6 @@ export default function ColorFormatProvider(Private) {
}
};
return _Color;
};