Modification of Color field formatter

[JaimeCr]

Hi,

I'm trying to create a new field formatter for Kibana 5.4.1 that somehow mixes the "Color" and "Number" formatters. Specifically, I want to have a Color formatter that also rounds the numbers to three decimal points, in order to avoid huge numbers when calculating aggregations such as averages. To do that, I have slightly changed the "_convert" function in Color.js file under "/opt/kibana/src/ui/public/stringify/types", adding a substring function call:

_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);
});
if (!color) return _.asPrettyString(val);

    // Substring the value before formatting it
    val = val.substring(0,3);
    const styleColor = color.text ? `color: ${color.text};` : '';
    const styleBackgroundColor = color.background ? `background-color: ${color.background};` : '';
    return `<span style="${styleColor}${styleBackgroundColor}">${_.escape(val)}</span>`;
  }
};

However, after modifying the file and reloading the page and index, the field format remains the same (the numbers are colored (after configuring the formatter) but not rounded. Am I missing something here?

Any help would be greatly appreciated.

[ppisljar (Peter Pisljar)]

are you using production version if kibana? its very possible that the bundles were not rebuild and you are still running old code, you should try the dev version (https://github.com/elastic/kibana)

not sure about the code, would need to dive into it deeper to give you any valuable feedback

[JaimeCr]

Thanks for your feedback, @ppisljar. I'm not using the development version. Is there any way to rebuild the bundles using the stable 5.4.1 version?

[ppisljar (Peter Pisljar)]

you could try removing optimize/bundles/* ... but im. not sure if it work

[JaimeCr]

Thanks for your help @ppisljar. It worked deleting that folder and restarting Kibana.

I modified the _convert function, using Math.round. The code of the modified function is:

_Color.prototype._convert = {
html(val) {
const color = this.findColorRuleForVal(val);

  // Added line of code. Rounds to up to 2 decimal points
  val = Math.round(val * 100) / 100

  if (!color) return _.asPrettyString(val);

  let style = '';
  if (color.text) style += `color: ${color.text};`;
  if (color.background) style += `background-color: ${color.background};`;
  return convertTemplate({ val, style });
}

};