Skip to content

Commit

Permalink
Add coloring for string fields, closes elastic#6537 (elastic#8597)
Browse files Browse the repository at this point in the history 
* elastic#6537 add color formatting for string fields

* elastic#6537 adjust test

* elastic#6537 adjust check

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

* elastic#6537 call the field formatter instead of the toString() function

* elastic#6537 add some tests for coloring string fields

* elastic#6537 better default value for regex field

* [stringify] track field type in params
  • Loading branch information
@marcelhallmann @nreese
marcelhallmann authored and nreese committed Nov 10, 2016
1 parent f2b6f16 commit 72748d2
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 33 deletions.
67 changes: 47 additions & 20 deletions src/ui/public/stringify/__tests__/_color.js
View file
Expand Up @@ -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 changes: 8 additions & 6 deletions src/ui/public/stringify/editors/color.html
View file
Expand Up @@ -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
Expand Down
36 changes: 29 additions & 7 deletions src/ui/public/stringify/types/color.js
View file
Expand Up @@ -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'
};
Expand All @@ -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));
};
Expand All @@ -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 = '';
Expand All @@ -58,5 +79,6 @@ export default function ColorFormatProvider(Private) {
}
};


return _Color;
};

0 comments on commit 72748d2

Please sign in to comment.