Ability to specify number pattern to color format

src/ui/public/stringify/__tests__/_color.js

@@ -1,6 +1,7 @@
 import expect from 'expect.js';
 import ngMock from 'ng_mock';
 import RegistryFieldFormatsProvider from 'ui/registry/field_formats';
+
 describe('Color Format', function () {
   let fieldFormats;
   let ColorFormat;
@@ -63,4 +64,42 @@ describe('Color Format', function () {
       expect(converter('a', 'html')).to.eql('a');
     });
   });
+
+
+  it('should take into account numerical format', function () {
+    let colorer = new ColorFormat({
+      colors: [{
+        range: '100:150',
+        text: 'blue',
+        background: 'yellow'
+      }]
+      //,
+      // pattern: '0,0.[000]'
+    });
+    expect(colorer.convert(99.5555, 'html')).to.eql('99.556');
+    expect(colorer.convert(100.5555, 'html')).to.eql('<span style="color: blue;background-color: yellow;">100.556</span>');
+    expect(colorer.convert(149.5555, 'html')).to.eql('<span style="color: blue;background-color: yellow;">149.556</span>');
+    expect(colorer.convert(151.5555, 'html')).to.eql('151.556');
+
+  });
+
+  it('should take into account custom numerical format', function () {
+    let colorer = new ColorFormat({
+      colors: [{
+        range: '100:150',
+        text: 'blue',
+        background: 'yellow'
+      }],
+      pattern: '0,0.[00]'
+    });
+    expect(colorer.convert(99.5555, 'html')).to.eql('99.56');
+    expect(colorer.convert(100.5555, 'html')).to.eql('<span style="color: blue;background-color: yellow;">100.56</span>');
+    expect(colorer.convert(149.5555, 'html')).to.eql('<span style="color: blue;background-color: yellow;">149.56</span>');
+    expect(colorer.convert(151.5555, 'html')).to.eql('151.56');
+
+  });
+
+
+
+
 });

src/ui/public/stringify/editors/color.html

@@ -1,4 +1,6 @@
 <div class="form-group">
+  <field-editor-numeral></field-editor-numeral>
+
   <div ng-repeat="color in editor.formatParams.colors">
     <div class="editor-color">
       <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">
@@ -49,5 +51,4 @@
       <span class="sr-only">Add Color</span>
       <i aria-hidden="true" class="fa fa-plus"></i> Add Color
   </button>
-
 </div>

src/ui/public/stringify/types/_numeral.js

@@ -3,6 +3,7 @@ import 'ui/field_format_editor/numeral/numeral';
 import IndexPatternsFieldFormatProvider from 'ui/index_patterns/_field_format/field_format';
 import BoundToConfigObjProvider from 'ui/bound_to_config_obj';
 export default function AbstractNumeralFormatProvider(Private) {
+
   const FieldFormat = Private(IndexPatternsFieldFormatProvider);
   const BoundToConfigObj = Private(BoundToConfigObjProvider);
   const numeral = require('numeral')();
@@ -26,6 +27,7 @@ export default function AbstractNumeralFormatProvider(Private) {
 
 
   Numeral.factory = function (opts) {
+
     _.class(Class).inherits(Numeral);
     function Class(params) {
       Class.Super.call(this, params);

src/ui/public/stringify/types/color.js

@@ -1,19 +1,21 @@
 import 'ui/stringify/editors/color.less';
 import _ from 'lodash';
-import IndexPatternsFieldFormatProvider from 'ui/index_patterns/_field_format/field_format';
 import colorTemplate from 'ui/stringify/editors/color.html';
-export default function ColorFormatProvider(Private) {
+import StringifyTypesNumeralProvider from 'ui/stringify/types/_numeral';
+import BoundToConfigObjProvider from 'ui/bound_to_config_obj';
 
-  const FieldFormat = Private(IndexPatternsFieldFormatProvider);
-  const convertTemplate = _.template('<span style="<%- style %>"><%- val %></span>');
+export default function ColorFormatProvider(Private) {
+  const Numeral = Private(StringifyTypesNumeralProvider);
+  const BoundToConfigObj = Private(BoundToConfigObjProvider);
+
   const DEFAULT_COLOR = {
     range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`,
     regex: '<insert regex>',
     text: '#000000',
     background: '#ffffff'
   };
 
-  _.class(_Color).inherits(FieldFormat);
+  _.class(_Color).inherits(Numeral);
   function _Color(params) {
     _Color.Super.call(this, params);
   }
@@ -42,11 +44,10 @@ export default function ColorFormatProvider(Private) {
     }
   };
 
-
-  _Color.paramDefaults = {
-    fieldType: null, // populated by editor, see controller below
-    colors: [_.cloneDeep(DEFAULT_COLOR)]
-  };
+  _Color.paramDefaults = new BoundToConfigObj({
+    colors: [_.cloneDeep(DEFAULT_COLOR)],
+    pattern: '=format:color:defaultPattern'
+  });
 
   _Color.prototype.findColorRuleForVal = function (val) {
     switch (this.param('fieldType')) {
@@ -69,13 +70,20 @@ export default function ColorFormatProvider(Private) {
 
   _Color.prototype._convert = {
     html(val) {
-      const color = this.findColorRuleForVal(val);
-      if (!color) return _.asPrettyString(val);
+      const color = _.findLast(this.param('colors'), ({ range }) => {
+        if (!range) return;
+        const [start, end] = range.split(':');
+        return val >= Number(start) && val <= Number(end);
+      });
+
+      const formattedValue = Numeral.prototype._convert.call(this, val);
+      if (!color) {
+        return formattedValue;
+      }
 
-      let style = '';
-      if (color.text) style += `color: ${color.text};`;
-      if (color.background) style += `background-color: ${color.background};`;
-      return convertTemplate({ val, style });
+      const styleColor = color.text ? `color: ${color.text};` : '';
+      const styleBackgroundColor = color.background ? `background-color: ${color.background};` : '';
+      return `<span style="${styleColor}${styleBackgroundColor}">${formattedValue}</span>`;
     }
   };
 

src/ui/settings/defaults.js

@@ -186,6 +186,11 @@ export default function defaultSettingsProvider() {
       value: '0,0.[000]',
       description: 'Default <a href="http://numeraljs.com/" target="_blank">numeral format</a> for the "number" format'
     },
+    'format:color:defaultPattern': {
+      type: 'string',
+      value: '0,0.[000]',
+      description: 'Default <a href="http://numeraljs.com/" target="_blank">numeral format</a> for the "color" format'
+    },
     'format:bytes:defaultPattern': {
       type: 'string',
       value: '0,0.[000]b',