[Lens] Review How We Present Empty, Null, Undefined Values

[MichaelMarcialis]

Currently in Lens, it can be difficult to distinguish actual empty, null, and undefined values from their string counterparts. For example:

• We display (empty) to represent an empty value. However, this is nearly indistinguishable from an actual string value of "(empty)". The only visual indicator is the use of subdued text color.
• We display - to represent a null value. This is indistinguishable from an actual string value of "-".

Here's a helpful POC, provided by @nickofthyme, below shows the example values in code form and string form.

Should we reconsider how we are presenting these values in Lens visualizations? Should they be visually offset (italics, icon, color, etc.) in some way that indicates they are not simply a string value? As part of the forthcoming addition of color-by-term support to tables, we are planning to identify these special values with a prefixed asterisk icon, italic font, and accompanying descriptive text in the color mapping interface. Should we take a similar approach in our visualizations? Or perhaps indicate the values with an EuiCode component? Or leave as is? Assuming we do wish to make changes, we should also ensure that other Kibana apps (such as Discover) take the same approach for consistency.

CCing @nickofthyme, @teresaalvarezsoler.

[elasticmachine]

Pinging @elastic/kibana-visualizations (Team:Visualizations)

[dej611]

Possibly related issues: https://github.com/elastic/kibana/issues/156714, https://github.com/elastic/kibana/issues/115761