From acf6e36c59caa803580bb0f6db4335d7f2d4155c Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Mon, 3 Aug 2015 14:58:22 -0500 Subject: [PATCH 01/12] [field formats] Initial implementation of conditional coloring --- src/ui/public/stringify/editors/color.html | 34 +++++++++++++ src/ui/public/stringify/register.js | 1 + src/ui/public/stringify/types/Color.js | 59 ++++++++++++++++++++++ 3 files changed, 94 insertions(+) create mode 100644 src/ui/public/stringify/editors/color.html create mode 100644 src/ui/public/stringify/types/Color.js diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html new file mode 100644 index 0000000000000..e950144066d71 --- /dev/null +++ b/src/ui/public/stringify/editors/color.html @@ -0,0 +1,34 @@ +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + + + + + + +
diff --git a/src/ui/public/stringify/register.js b/src/ui/public/stringify/register.js index 678217e8b5ce7..242b5052b16be 100644 --- a/src/ui/public/stringify/register.js +++ b/src/ui/public/stringify/register.js @@ -8,4 +8,5 @@ define(function (require) { fieldFormats.register(require('ui/stringify/types/Percent')); fieldFormats.register(require('ui/stringify/types/String')); fieldFormats.register(require('ui/stringify/types/Source')); + fieldFormats.register(require('ui/stringify/types/Color')); }); diff --git a/src/ui/public/stringify/types/Color.js b/src/ui/public/stringify/types/Color.js new file mode 100644 index 0000000000000..a6fbc060de3ee --- /dev/null +++ b/src/ui/public/stringify/types/Color.js @@ -0,0 +1,59 @@ +define(function (require) { + return function _StringProvider(Private) { + var _ = require('lodash'); + var FieldFormat = Private(require('ui/index_patterns/_field_format/FieldFormat')); + + require('ui/field_format_editor/samples/samples'); + + _.class(_Color).inherits(FieldFormat); + function _Color(params) { + _Color.Super.call(this, params); + } + + _Color.id = 'color'; + _Color.title = 'Color'; + _Color.fieldType = [ + 'number' + ]; + + _Color.editor = { + template: require('ui/stringify/editors/color.html'), + controller($scope) { + $scope.addColor = function () { + $scope.editor.formatParams.colors.push({}); + }; + } + }; + + _Color.sampleInputs = [0, 50, 100, 150, 200]; + + _Color.paramDefaults = { + colors: [{ + range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`, + color: '#000', + backgroundColor: '#FFF' + }] + }; + + _Color.prototype._convert = { + html(val) { + var range = _.findLast(this.param('colors'), function (color) { + const rangeValues = color.range.split(':'); + if (rangeValues.length !== 2) return; + + const start = Number(rangeValues[0]); + const end = Number(rangeValues[1]); + return val >= start && val <= end; + }); + + if (!range) return _.asPrettyString(val); + + const styleColor = range.color ? `color: ${range.color};` : ''; + const styleBackgroundColor = range.backgroundColor ? `background-color: ${range.backgroundColor};` : ''; + return `${_.escape(val)}`; + } + }; + + return _Color; + }; +}); From 3cbe96113258d6b7bd9e135208b025f133ec21aa Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Mon, 3 Aug 2015 15:32:34 -0500 Subject: [PATCH 02/12] [field formats] Add remove button to color format --- src/ui/public/stringify/editors/color.html | 10 ++++++++-- src/ui/public/stringify/types/Color.js | 6 ++++++ 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html index e950144066d71..3e972155a1593 100644 --- a/src/ui/public/stringify/editors/color.html +++ b/src/ui/public/stringify/editors/color.html @@ -1,5 +1,8 @@
+
+
- - + diff --git a/src/ui/public/stringify/types/Color.js b/src/ui/public/stringify/types/Color.js index a6fbc060de3ee..4653eb0e6d065 100644 --- a/src/ui/public/stringify/types/Color.js +++ b/src/ui/public/stringify/types/Color.js @@ -22,6 +22,10 @@ define(function (require) { $scope.addColor = function () { $scope.editor.formatParams.colors.push({}); }; + + $scope.removeColor = function (index) { + $scope.editor.formatParams.colors.splice(index, 1); + }; } }; @@ -38,6 +42,8 @@ define(function (require) { _Color.prototype._convert = { html(val) { var range = _.findLast(this.param('colors'), function (color) { + if (!color.range) return; + const rangeValues = color.range.split(':'); if (rangeValues.length !== 2) return; From d7691a317d3dc5b38ff6fa9d01d0a2ed82bf9af4 Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Mon, 3 Aug 2015 16:56:59 -0500 Subject: [PATCH 03/12] [field formats] Add tests --- src/ui/public/stringify/__tests__/_color.js | 38 +++++++++++++++++++++ src/ui/public/stringify/__tests__/index.js | 1 + src/ui/public/stringify/types/Color.js | 3 +- 3 files changed, 40 insertions(+), 2 deletions(-) create mode 100644 src/ui/public/stringify/__tests__/_color.js diff --git a/src/ui/public/stringify/__tests__/_color.js b/src/ui/public/stringify/__tests__/_color.js new file mode 100644 index 0000000000000..9ca0a7240d14b --- /dev/null +++ b/src/ui/public/stringify/__tests__/_color.js @@ -0,0 +1,38 @@ +describe('Color Format', function () { + var fieldFormats; + var ColorFormat; + var expect = require('expect.js'); + var ngMock = require('ngMock'); + + beforeEach(ngMock.module('kibana')); + beforeEach(ngMock.inject(function (Private) { + fieldFormats = Private(require('ui/registry/field_formats')); + ColorFormat = fieldFormats.getType('color'); + + })); + + it('should add colors if the value is in range', function () { + var colorer = new ColorFormat({ + colors: [{ + range: '100:150', + color: 'blue', + backgroundColor: 'yellow' + }] + }); + expect(colorer.convert(99, 'html')).to.eql('99'); + expect(colorer.convert(100, 'html')).to.eql('100'); + expect(colorer.convert(150, 'html')).to.eql('150'); + expect(colorer.convert(151, 'html')).to.eql('151'); + }); + + it('should not convert invalid ranges', function () { + var colorer = new ColorFormat({ + colors: [{ + range: '100150', + color: 'blue', + backgroundColor: 'yellow' + }] + }); + expect(colorer.convert(99, 'html')).to.eql('99'); + }); +}); diff --git a/src/ui/public/stringify/__tests__/index.js b/src/ui/public/stringify/__tests__/index.js index 4a1cb93ffb721..f3940510a0773 100644 --- a/src/ui/public/stringify/__tests__/index.js +++ b/src/ui/public/stringify/__tests__/index.js @@ -4,4 +4,5 @@ describe('Stringify Component', function () { require('./_source'); require('./_string'); require('./_url'); + require('./_color'); }); diff --git a/src/ui/public/stringify/types/Color.js b/src/ui/public/stringify/types/Color.js index 4653eb0e6d065..cfbd7de3757a2 100644 --- a/src/ui/public/stringify/types/Color.js +++ b/src/ui/public/stringify/types/Color.js @@ -45,10 +45,9 @@ define(function (require) { if (!color.range) return; const rangeValues = color.range.split(':'); - if (rangeValues.length !== 2) return; - const start = Number(rangeValues[0]); const end = Number(rangeValues[1]); + return val >= start && val <= end; }); From 97c0f4a0f80749be8867a4bd9b1daa4049d7f327 Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Tue, 4 Aug 2015 10:26:02 -0500 Subject: [PATCH 04/12] [field formats] Change color variable names --- src/ui/public/stringify/__tests__/_color.js | 8 ++++---- src/ui/public/stringify/editors/color.html | 16 +++++++++------ src/ui/public/stringify/types/Color.js | 22 +++++++++------------ 3 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/ui/public/stringify/__tests__/_color.js b/src/ui/public/stringify/__tests__/_color.js index 9ca0a7240d14b..b8093ab75a3c6 100644 --- a/src/ui/public/stringify/__tests__/_color.js +++ b/src/ui/public/stringify/__tests__/_color.js @@ -15,8 +15,8 @@ describe('Color Format', function () { var colorer = new ColorFormat({ colors: [{ range: '100:150', - color: 'blue', - backgroundColor: 'yellow' + text: 'blue', + background: 'yellow' }] }); expect(colorer.convert(99, 'html')).to.eql('99'); @@ -29,8 +29,8 @@ describe('Color Format', function () { var colorer = new ColorFormat({ colors: [{ range: '100150', - color: 'blue', - backgroundColor: 'yellow' + text: 'blue', + background: 'yellow' }] }); expect(colorer.convert(99, 'html')).to.eql('99'); diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html index 3e972155a1593..f4cf4b0699ee3 100644 --- a/src/ui/public/stringify/editors/color.html +++ b/src/ui/public/stringify/editors/color.html @@ -1,6 +1,6 @@
-
-
@@ -10,25 +10,29 @@
- diff --git a/src/ui/public/stringify/types/Color.js b/src/ui/public/stringify/types/Color.js index cfbd7de3757a2..f700bb08bc621 100644 --- a/src/ui/public/stringify/types/Color.js +++ b/src/ui/public/stringify/types/Color.js @@ -34,27 +34,23 @@ define(function (require) { _Color.paramDefaults = { colors: [{ range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`, - color: '#000', - backgroundColor: '#FFF' + text: '#000000', + background: '#ffffff' }] }; _Color.prototype._convert = { html(val) { - var range = _.findLast(this.param('colors'), function (color) { - if (!color.range) return; - - const rangeValues = color.range.split(':'); - const start = Number(rangeValues[0]); - const end = Number(rangeValues[1]); - - return val >= start && val <= end; + const color = _.findLast(this.param('colors'), ({ range }) => { + if (!range) return; + const [start, end] = range.split(':'); + return val >= Number(start) && val <= Number(end); }); - if (!range) return _.asPrettyString(val); + if (!color) return _.asPrettyString(val); - const styleColor = range.color ? `color: ${range.color};` : ''; - const styleBackgroundColor = range.backgroundColor ? `background-color: ${range.backgroundColor};` : ''; + const styleColor = color.text ? `color: ${color.text};` : ''; + const styleBackgroundColor = color.background ? `background-color: ${color.background};` : ''; return `${_.escape(val)}`; } }; From 003017a40a8fd7e242d58c68443bef3e76b09779 Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Tue, 4 Aug 2015 12:37:00 -0500 Subject: [PATCH 05/12] [field formats] Add color picker --- package.json | 1 + src/ui/public/field_editor/field_editor.js | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index d80217c67011a..7306693970d66 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "Nonsense": "^0.1.2", "angular": "1.2.28", "angular-bindonce": "0.3.1", + "angular-bootstrap-colorpicker": "^3.0.18", "angular-elastic": "2.5.0", "angular-mocks": "1.2.28", "angular-nvd3": "panda01/angular-nvd3#kibana", diff --git a/src/ui/public/field_editor/field_editor.js b/src/ui/public/field_editor/field_editor.js index 415e4b2b10edf..307d47af7ff73 100644 --- a/src/ui/public/field_editor/field_editor.js +++ b/src/ui/public/field_editor/field_editor.js @@ -1,9 +1,11 @@ define(function (require) { require('ui/field_format_editor'); + require('angular-bootstrap-colorpicker'); + require('angular-bootstrap-colorpicker/css/colorpicker.css'); require('ui/modules') - .get('kibana') + .get('kibana', ['colorpicker.module']) .directive('fieldEditor', function (Private, $sce) { var _ = require('lodash'); var fieldFormats = Private(require('ui/registry/field_formats')); From 1608756a359f1792773f8cda33c61de27378225c Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Tue, 4 Aug 2015 12:53:03 -0500 Subject: [PATCH 06/12] [field formats] Add color to test registry --- src/ui/public/stringify/__tests__/_conformance.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/public/stringify/__tests__/_conformance.js b/src/ui/public/stringify/__tests__/_conformance.js index d2488bb89725d..f2be1b24308d8 100644 --- a/src/ui/public/stringify/__tests__/_conformance.js +++ b/src/ui/public/stringify/__tests__/_conformance.js @@ -12,6 +12,7 @@ var formatIds = [ 'ip', 'number', 'percent', + 'color', 'string', 'url', '_source' From fa26f8207ba1d987cba54b0a66090347067f01ed Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Tue, 1 Sep 2015 09:51:11 -0500 Subject: [PATCH 07/12] [field editor] Clone paramDefaults before assigning --- src/ui/public/field_editor/field_editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/public/field_editor/field_editor.js b/src/ui/public/field_editor/field_editor.js index 307d47af7ff73..f62ea74ef1e0a 100644 --- a/src/ui/public/field_editor/field_editor.js +++ b/src/ui/public/field_editor/field_editor.js @@ -80,7 +80,7 @@ define(function (require) { if (!changedFormat || !missingFormat) return; // reset to the defaults, but make sure it's an object - self.formatParams = _.assign({}, getFieldFormatType().paramDefaults); + self.formatParams = _.assign({}, _.cloneDeep(getFieldFormatType().paramDefaults)); }); $scope.$watch('editor.formatParams', function () { From 91356e53dcb87b66cf85d266b9dadbc8adac215f Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Fri, 11 Sep 2015 15:52:08 -0500 Subject: [PATCH 08/12] [field formats] Make sure add button has the correct font --- src/ui/public/stringify/editors/color.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html index f4cf4b0699ee3..9097d7eed4606 100644 --- a/src/ui/public/stringify/editors/color.html +++ b/src/ui/public/stringify/editors/color.html @@ -32,9 +32,9 @@
- Date: Wed, 16 Sep 2015 13:56:36 -0500 Subject: [PATCH 09/12] [field formats] Collapse color selection to one row --- src/ui/public/stringify/editors/color.html | 71 ++++++++++++---------- src/ui/public/stringify/editors/color.less | 17 ++++++ src/ui/public/stringify/types/Color.js | 3 +- 3 files changed, 57 insertions(+), 34 deletions(-) create mode 100644 src/ui/public/stringify/editors/color.less diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html index 9097d7eed4606..f6dc73cd1ebad 100644 --- a/src/ui/public/stringify/editors/color.html +++ b/src/ui/public/stringify/editors/color.html @@ -1,33 +1,44 @@
- -
- - -
-
- - -
-
- - +
+ +
+ + +
+
+ + +
+
+ + +
+
+ +
+ 123456 +
+
+
@@ -37,8 +48,4 @@ Add Color - - -
diff --git a/src/ui/public/stringify/editors/color.less b/src/ui/public/stringify/editors/color.less new file mode 100644 index 0000000000000..e434e853573bb --- /dev/null +++ b/src/ui/public/stringify/editors/color.less @@ -0,0 +1,17 @@ +.editor-color { + display: flex; + position: relative; + > .form-group { + flex: 1 1 1%; + padding-right: 5px; + &:last-child { + padding-right: 0; + } + } +} + +.editor-color-remove { + position: absolute; + right: 0; + top: -10px; +} diff --git a/src/ui/public/stringify/types/Color.js b/src/ui/public/stringify/types/Color.js index f700bb08bc621..701d27ed18772 100644 --- a/src/ui/public/stringify/types/Color.js +++ b/src/ui/public/stringify/types/Color.js @@ -4,6 +4,7 @@ define(function (require) { var FieldFormat = Private(require('ui/index_patterns/_field_format/FieldFormat')); require('ui/field_format_editor/samples/samples'); + require('ui/stringify/editors/color.less'); _.class(_Color).inherits(FieldFormat); function _Color(params) { @@ -29,8 +30,6 @@ define(function (require) { } }; - _Color.sampleInputs = [0, 50, 100, 150, 200]; - _Color.paramDefaults = { colors: [{ range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`, From fee4e0d99c672c31f722655b7dad5af986db87bb Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Thu, 24 Sep 2015 09:31:11 -0500 Subject: [PATCH 10/12] [field format] Lock color version, allow deletion from any position --- package.json | 2 +- src/ui/public/stringify/editors/color.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 34e0c5f6d51de..4ea5353bcb243 100644 --- a/package.json +++ b/package.json @@ -62,7 +62,7 @@ "@spalger/ui-ace": "0.2.3", "angular": "1.2.28", "angular-bindonce": "0.3.1", - "angular-bootstrap-colorpicker": "^3.0.18", + "angular-bootstrap-colorpicker": "3.0.19", "angular-elastic": "2.5.0", "angular-route": "1.2.28", "ansicolors": "0.3.2", diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html index f6dc73cd1ebad..a01a2ea665339 100644 --- a/src/ui/public/stringify/editors/color.html +++ b/src/ui/public/stringify/editors/color.html @@ -1,7 +1,7 @@
-
From f86145fce4b2227c6dc73fb98bdf9e77513581e2 Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Thu, 8 Oct 2015 18:14:33 +0200 Subject: [PATCH 11/12] [field formats] Remove unused require --- src/ui/public/stringify/types/Color.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/public/stringify/types/Color.js b/src/ui/public/stringify/types/Color.js index 701d27ed18772..ab763b7c3f29b 100644 --- a/src/ui/public/stringify/types/Color.js +++ b/src/ui/public/stringify/types/Color.js @@ -3,7 +3,6 @@ define(function (require) { var _ = require('lodash'); var FieldFormat = Private(require('ui/index_patterns/_field_format/FieldFormat')); - require('ui/field_format_editor/samples/samples'); require('ui/stringify/editors/color.less'); _.class(_Color).inherits(FieldFormat); From 822187267805cf40800ec2c59097587d7e06c07b Mon Sep 17 00:00:00 2001 From: Jonathan Budzenski Date: Fri, 9 Oct 2015 17:36:13 +0200 Subject: [PATCH 12/12] [field formats] Use default on all new fields --- src/ui/public/stringify/types/Color.js | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/src/ui/public/stringify/types/Color.js b/src/ui/public/stringify/types/Color.js index ab763b7c3f29b..7578d6218c2e2 100644 --- a/src/ui/public/stringify/types/Color.js +++ b/src/ui/public/stringify/types/Color.js @@ -1,10 +1,15 @@ define(function (require) { return function _StringProvider(Private) { - var _ = require('lodash'); - var FieldFormat = Private(require('ui/index_patterns/_field_format/FieldFormat')); - require('ui/stringify/editors/color.less'); + const _ = require('lodash'); + const FieldFormat = Private(require('ui/index_patterns/_field_format/FieldFormat')); + const DEFAULT_COLOR = { + range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`, + text: '#000000', + background: '#ffffff' + }; + _.class(_Color).inherits(FieldFormat); function _Color(params) { _Color.Super.call(this, params); @@ -20,7 +25,7 @@ define(function (require) { template: require('ui/stringify/editors/color.html'), controller($scope) { $scope.addColor = function () { - $scope.editor.formatParams.colors.push({}); + $scope.editor.formatParams.colors.push(_.cloneDeep(DEFAULT_COLOR)); }; $scope.removeColor = function (index) { @@ -29,12 +34,9 @@ define(function (require) { } }; + _Color.paramDefaults = { - colors: [{ - range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`, - text: '#000000', - background: '#ffffff' - }] + colors: [_.cloneDeep(DEFAULT_COLOR)] }; _Color.prototype._convert = {