From bab94866cd98ca8101b238918b9408a496f9798a Mon Sep 17 00:00:00 2001 From: Thomas Neirynck Date: Thu, 6 Oct 2016 18:38:33 -0400 Subject: [PATCH] Add ability to specify number pattern when color formatting --- src/ui/public/stringify/__tests__/_color.js | 39 +++++++++++++++++++++ src/ui/public/stringify/editors/color.html | 3 +- src/ui/public/stringify/types/_numeral.js | 2 ++ src/ui/public/stringify/types/color.js | 25 ++++++++----- src/ui/settings/defaults.js | 5 +++ 5 files changed, 64 insertions(+), 10 deletions(-) diff --git a/src/ui/public/stringify/__tests__/_color.js b/src/ui/public/stringify/__tests__/_color.js index f48823ea3d5e1..00f083fa71704 100644 --- a/src/ui/public/stringify/__tests__/_color.js +++ b/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; @@ -36,4 +37,42 @@ describe('Color Format', function () { }); expect(colorer.convert(99, 'html')).to.eql('99'); }); + + + 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('100.556'); + expect(colorer.convert(149.5555, 'html')).to.eql('149.556'); + 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('100.56'); + expect(colorer.convert(149.5555, 'html')).to.eql('149.56'); + expect(colorer.convert(151.5555, 'html')).to.eql('151.56'); + + }); + + + + }); diff --git a/src/ui/public/stringify/editors/color.html b/src/ui/public/stringify/editors/color.html index a01a2ea665339..5bceb3481d550 100644 --- a/src/ui/public/stringify/editors/color.html +++ b/src/ui/public/stringify/editors/color.html @@ -1,4 +1,6 @@
+ +
-
diff --git a/src/ui/public/stringify/types/_numeral.js b/src/ui/public/stringify/types/_numeral.js index ee55f155b4341..346aeae59d25d 100644 --- a/src/ui/public/stringify/types/_numeral.js +++ b/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) { + let FieldFormat = Private(IndexPatternsFieldFormatProvider); let BoundToConfigObj = Private(BoundToConfigObjProvider); let 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); diff --git a/src/ui/public/stringify/types/color.js b/src/ui/public/stringify/types/color.js index cdd316e7cb139..112a8bf51539e 100644 --- a/src/ui/public/stringify/types/color.js +++ b/src/ui/public/stringify/types/color.js @@ -1,17 +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'; +import StringifyTypesNumeralProvider from 'ui/stringify/types/_numeral'; +import BoundToConfigObjProvider from 'ui/bound_to_config_obj'; + export default function ColorFormatProvider(Private) { - const FieldFormat = Private(IndexPatternsFieldFormatProvider); + const Numeral = Private(StringifyTypesNumeralProvider); + const BoundToConfigObj = Private(BoundToConfigObjProvider); + const DEFAULT_COLOR = { range: `${Number.NEGATIVE_INFINITY}:${Number.POSITIVE_INFINITY}`, text: '#000000', background: '#ffffff' }; - _.class(_Color).inherits(FieldFormat); + _.class(_Color).inherits(Numeral); function _Color(params) { _Color.Super.call(this, params); } @@ -35,10 +39,10 @@ export default function ColorFormatProvider(Private) { } }; - - _Color.paramDefaults = { - colors: [_.cloneDeep(DEFAULT_COLOR)] - }; + _Color.paramDefaults = new BoundToConfigObj({ + colors: [_.cloneDeep(DEFAULT_COLOR)], + pattern: '=format:color:defaultPattern' + }); _Color.prototype._convert = { html(val) { @@ -48,11 +52,14 @@ export default function ColorFormatProvider(Private) { return val >= Number(start) && val <= Number(end); }); - if (!color) return _.asPrettyString(val); + const formattedValue = Numeral.prototype._convert.call(this, val); + if (!color) { + return formattedValue; + } const styleColor = color.text ? `color: ${color.text};` : ''; const styleBackgroundColor = color.background ? `background-color: ${color.background};` : ''; - return `${_.escape(val)}`; + return `${formattedValue}`; } }; diff --git a/src/ui/settings/defaults.js b/src/ui/settings/defaults.js index 0ff0c27d2989c..d48669bd7c1a8 100644 --- a/src/ui/settings/defaults.js +++ b/src/ui/settings/defaults.js @@ -186,6 +186,11 @@ export default function defaultSettingsProvider() { value: '0,0.[000]', description: 'Default numeral format for the "number" format' }, + 'format:color:defaultPattern': { + type: 'string', + value: '0,0.[000]', + description: 'Default numeral format for the "color" format' + }, 'format:bytes:defaultPattern': { type: 'string', value: '0,0.[000]b',