Kibana: Remove external dependency on Numeral.js

Created on 7 Oct 2016  路  5Comments  路  Source: elastic/kibana

We currently rely on numeral.js for number formatting (http://numeraljs.com/) and expose their pattern syntax to users in the field formatter settings

Remove this explicit external dependency. This would mean:

  • we explicitly document the pattern syntax API supported by Kibana
  • we maintain a test suite for it

This does not mean we need to remove numeral.js as an internal dependency, just that we take ownership of the pattern syntax.

See comments by @epixa here https://github.com/elastic/kibana/issues/8565#issuecomment-252271158.

FieldFormatters AppServices enhancement technical debt

Most helpful comment

I've done a lot of work to see if it's possible to replace numeral with Intl.NumberFormat, and the short answer is that it's blocked until 8.0 for various reasons. https://github.com/elastic/kibana/pull/53972

The short-term approach that I am taking instead is like you are suggesting here, to provide interfaces that express the same configuration as numeral, but in a way that doesn't depend on the library and can be changed later. So for example, the configuration { id: 'percent', minDecimals: 3 } might translate to the numeral pattern 0,0.000% but is also doable using Intl.NumberFormat({ style: 'percent', minimumFractionDigits: 3 }).

I have started implementing this in Lens in this future-facing way, but I think it's time to start discussing the deprecation plan for other apps. https://github.com/elastic/kibana/pull/56253

All 5 comments

Just to add to this, the NumeralJS lib seems to be stale,

  • Last commit 18 months ago
  • 104 open pull requests

With how deeply NumeralJS is integrated into Kibana now, there's going to be a lot more effort than before in adding "en-ie" (Ireland, Euro) as an option and setting its value.

It's not a showstopper, just added effort for us.

Pinging @elastic/kibana-app

I've done a lot of work to see if it's possible to replace numeral with Intl.NumberFormat, and the short answer is that it's blocked until 8.0 for various reasons. https://github.com/elastic/kibana/pull/53972

The short-term approach that I am taking instead is like you are suggesting here, to provide interfaces that express the same configuration as numeral, but in a way that doesn't depend on the library and can be changed later. So for example, the configuration { id: 'percent', minDecimals: 3 } might translate to the numeral pattern 0,0.000% but is also doable using Intl.NumberFormat({ style: 'percent', minimumFractionDigits: 3 }).

I have started implementing this in Lens in this future-facing way, but I think it's time to start discussing the deprecation plan for other apps. https://github.com/elastic/kibana/pull/56253

Pinging @elastic/kibana-app-arch (Team:AppArch)

Numeral.js patterns are a useful and concise abstraction, and the fact that we have been asking users to type them for years shows this. But Numeral has bugs and limitations, and it's time for us to go beyond. This comment will summarize the current state of things and talk about a plan.

Useful features of Numeral

  • Some users have become familiar with the syntax
  • Has the ability to choose decimal places, significant digits, scientific/accounting display
  • Bytes formatting scales the magnitude automatically

Limitations of Numeral

What needs to change?

a. @elastic/kibana-app-arch now owns field formatters and should take over maintenance.
b. The way Kibana uses numeral is not like a standalone library. We should move it into kibana/packages.
c. Because the way we use numeral is custom, we need to write Kibana documentation for formatting that we support. We should stop linking to 3rd-party docs. https://github.com/elastic/numeral-js/issues/16
d. Backwards compatible pattern API, forward-facing API. This is how another Numeral fork did it, Numbro

Other related issue: https://github.com/elastic/kibana/issues/39211

Was this page helpful?
0 / 5 - 0 ratings

Related issues

LukeMathWalker picture LukeMathWalker  路  3Comments

tbragin picture tbragin  路  3Comments

Ginja picture Ginja  路  3Comments

timmolter picture timmolter  路  3Comments

snide picture snide  路  3Comments