[Lens] [Discuss] Which formatters should Lens support?

[wylieconlon]

Lens should allow users to set a formatter for a specific aggregation or metric. It already uses the default field formatters provided from the index pattern if those data points are set, and those defaults should allow overriding.

This issue is to discuss how Lens should let users format data.

In Kibana today, formatters have a type and potentially some extra arguments. For example, the number formatter takes a format string. The date formatter also takes a format string.

For reference, here are the current formatting options for index patterns in Kibana:

[cchaos]

No matter which ones we use out of the box, they should easily just be a single select with the option to customize (show the formatter input).

[wylieconlon]

For specifically numeric formatting, we could also look at how TSVB does it, which is to have a list of format options followed by "custom"

Also, date formatting has its own issues and I have a separate issue to talk about one of the potential improvements: #51227

[elasticmachine]

Pinging @elastic/kibana-app (Team:KibanaApp)

[wylieconlon]

I think it would be really nice to have a "level of precision" display for numbers and percentages

[AlonaNadler]

As the first phase (7.6), I suggest having specific selection of formatters only for the metric visualized (not for the axis) without the ability to go custom using selected formatters.

These will include several options that will likely fit 80%+ of the needs:

• Bytes
• Currency $ (yeah I know there are other currencies)
• Percentage "0.00"% - with two characters after the decimal point
• Thousands 104,000 -> 104K
• Millions 10M or 0.2M
• Single decimal point '0.0'
• double decimal point '0.00'
• rounded 5.67-> 6

Next step after 7.6
Allow users to add custom formatters whether using numeraljs

[wylieconlon]

I like the idea of taking specific common formatters and putting them in a dropdown menu. That will help with a lot of the common cases.

Currency and numbers already use the format:number:defaultLocale advanced setting to do formatting of currency, separators, and k/m/b/t abbreviations. So for example when I set it from en-US to en-GB the currency changes from $ to £.

So two questions:

• Should Lens allow users to select a specific locale for their formatter? It gives us a lot of flexibility, and is one of the features we have considered everywhere: New numeral field formatter #39211

• What happens to the default formatters that are in Kibana today? Do you want to hide them? For example, the default number formatters show 3 digits in the fraction part of the number- do you want 1, 2, and 3 to be options?

[cchaos]

Should Lens allow users to select a specific locale for their formatter? It gives us a lot of flexibility, and is one of the features we have considered everywhere.

I could see this being a chart-wide option not a per-dimension configuration. Though if the index pattern has this information stored in it, we should use that as default.

Example

A user can change the whole locale for the entire chart in the chart settings (yet to be implemented)

Which then the options for currency formatting for the dimension would inherit via the "Auto" option, or the user can manually select any other currency for that dimension.

[AlonaNadler]

What happens to the default formatters that are in Kibana today? Do you want to hide them? For example, the default number formatters show 3 digits in the fraction part of the number- do you want 1, 2, and 3 to be options?

The existing default formatters are good. Three-digit is a good default when there is a fraction. if users want to see more/less characters after the decimal point they can change it by selecting one of the formatters:

• Single decimal point '0.0'
• Double decimal point '0.00'
• Rounded 5.67-> 6

Regarding local I'm thinking not in the first phase here. Depends on the requests we will get, we can add it later or have that as part of the ability to customize using numerals or other library

[wylieconlon]

An update on this: I have been working on the pre-requisite change to let users have access to these formatters for any index pattern, and then we can use those formatters in Lens too.

The new formatters will let users choose the number of decimal places for numbers and percentages. They also support locale selection and currency selection from a list, and there is a new "short number" formatter for thousands/millions.

Given the designs above, it seems like we prefer showing users a limited set of options in a single menu, instead of having extra dropdowns appear conditionally. To compare, which do you prefer?

• Default number
• Default number with 0 decimal places
• Default number with 1 decimal place
• Default number with 2 decimal places
• Percent
• Percent with 0 decimal places
• Percent with 1 decimal place
• Percent with 2 decimal places
• Short number
• Bytes
• Currency (USD)
• Currency (Euro)
• Currency (Japanese Yen)
• Currency (Other)
  • List of currencies appears conditionally

vs

• Default number
  • Number of decimal places appears conditionally
• Percent
  • Number of decimal places appears conditionally
• Short number
• Bytes
• Currency
  • List of currencies appears conditionally

Which is preferable?

#39211

[AlonaNadler]

If we can make option two on time for 7.6 (if not I prefer to set a limit number of formats and move on) then let's go with option two, which is be more flexible.

For option two these are the groups the way I see them with the default and the configuration options which becomes available once the format is selected

Format	Default	Conditional options	Comments
Number (default)	1 decimal point	Decimal point
Percentage	2 decimal point	Decimal point
Short number	1 decimal point	Decimal point
Currency	2 decimal point	Decimal point, currency	5 currencies; USD, Euro, British pound, Chinese Yuan, Japanese Yen
Duration	TBD

The number is our default formating option, by default in the popup users see the format drop-down with the number selected and next to it the decimal point ranges from 0-6.

Quick ugly mockup with the options and examples for the drop down and default state

This is @cchaos much nicer mockup suggestion

The mock-up require to create a new styling tab which can complicate the implementation

[cchaos]

I think individual currencies can still be displayed in the full Format list just with a specific heading. As shown here:

What this also shows is the top 5 currencies that @AlonaNadler mentioned and an eventual "More" button. Once we are able to add more currencies, we can just have a "More button" which will then be the full list of global currencies.

Decimals can apply to any of the formats above therefore it is it's own field though visually grouped with Format:

Simple clickable prototype

[wylieconlon]

I'm going to close this issue because I think we have made a decision about the general approach to how Lens will use formatters. In summary: Lens defines a custom set of formatters which use the Field Formatters as an implementation detail. To give an example of how this works:

1. The user chooses Value Format -> Number

2. The datasource will emit a new expression lens_format_column columnId="a" format="number" decimals=2

3. When the expression runs, it changes the formatHint property on the kibana datatable. For this case, we would set the formatHint to: { id: 'number', params: { pattern: '0,0.00' } }

4. Every Lens visualization is using formatHint for display already, so the customized formatHint will show a number with commas and 2 decimal places.