Skip to content

Commit

Permalink
[stringify] track field type in params
Browse files Browse the repository at this point in the history
  • Loading branch information
spalger committed Oct 27, 2016
1 parent b583db7 commit c84a61b
Show file tree
Hide file tree
Showing 4 changed files with 71 additions and 69 deletions.
6 changes: 1 addition & 5 deletions src/ui/public/directives/rows.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,7 @@ module.directive('kbnRows', function ($compile, $rootScope, getAppState, Private
if (contents.type === 'bucket' && contents.aggConfig.getField() && contents.aggConfig.getField().filterable) {
$cell = createAggConfigResultCell(contents);
}

let formatter = contents.aggConfig.fieldFormatter('html');
contents = formatter(contents.value,
contents.aggConfig.params && contents.aggConfig.params.field && contents.aggConfig.params.field.type);

contents = contents.toString('html');
}

if (_.isObject(contents)) {
Expand Down
90 changes: 45 additions & 45 deletions src/ui/public/stringify/__tests__/_color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,58 +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');
});
let converter = colorer.getConverterFor('html');
let field = {type:'number'};
expect(converter(99, field)).to.eql('99');
expect(converter(100, field)).to.eql('<span style="color: blue;background-color: yellow;">100</span>');
expect(converter(150, field)).to.eql('<span style="color: blue;background-color: yellow;">150</span>');
expect(converter(151, field)).to.eql('151');
});

it('should not convert invalid ranges', function () {
let colorer = new ColorFormat({
colors: [{
range: '100150',
text: 'blue',
background: 'yellow'
}]
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');
});
let converter = colorer.getConverterFor('html');
let field = {type:'number'};
expect(converter(99, field)).to.eql('99');
});

it('should add colors if the regex matches', function () {
let colorer = new ColorFormat({
colors: [{
regex: 'A.*',
text: 'blue',
background: 'yellow'
}]
});
let converter = colorer.getConverterFor('html');
let field = {type:'string'};
expect(converter('B', field)).to.eql('B');
expect(converter('AAA', field)).to.eql('<span style="color: blue;background-color: yellow;">AAA</span>');
expect(converter('AB', field)).to.eql('<span style="color: blue;background-color: yellow;">AB</span>');
expect(converter('a', field)).to.eql('a');
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'
}]
});

// field is 'string' in case the code is triggered via vizualization (data table)
field = 'string';
expect(converter('B', field)).to.eql('B');
expect(converter('AAA', field)).to.eql('<span style="color: blue;background-color: yellow;">AAA</span>');
expect(converter('AB', field)).to.eql('<span style="color: blue;background-color: yellow;">AB</span>');
expect(converter('a', field)).to.eql('a');
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');
});
});
});
12 changes: 4 additions & 8 deletions src/ui/public/stringify/editors/color.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,18 +4,14 @@
<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" ng-if="'number' === editor.field.type ">
<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="'string' === editor.field.type">
<label>Regex</label>
<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">
Expand Down
32 changes: 21 additions & 11 deletions src/ui/public/stringify/types/color.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,17 @@ export default function ColorFormatProvider(Private) {
_Color.id = 'color';
_Color.title = 'Color';
_Color.fieldType = [
'number', 'string'
'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 @@ -39,27 +44,32 @@ export default function ColorFormatProvider(Private) {


_Color.paramDefaults = {
fieldType: null, // populated by editor, see controller below
colors: [_.cloneDeep(DEFAULT_COLOR)]
};

_Color.prototype._convert = {
html(val, field) {

var color;
if (field.type === 'string' || field === 'string') {
color = _.findLast(this.param('colors'), (colorParam) => {
_Color.prototype.findColorRuleForVal = function (val) {
switch (this.param('fieldType')) {
case 'string':
return _.findLast(this.param('colors'), (colorParam) => {
return new RegExp(colorParam.regex).test(val);
});
}

else {
color = _.findLast(this.param('colors'), ({ range }) => {
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 = this.findColorRuleForVal(val);
if (!color) return _.asPrettyString(val);

let style = '';
Expand Down

0 comments on commit c84a61b

Please sign in to comment.