[Visualizations] Allow user to understand 'dotted lines' when using 'missing values' in embedded lens visualisations

[roshan-elastic]

📖 Description

Please read the following issue description and solution for context:

• [x] https://github.com/elastic/obs-infraobs-team/issues/1134

When dotted lines show in embedded Lens visualisations, it is not clear to the user why there are there or what they mean. In the Infra UI (e.g. hosts) we use this on all charts so that when users use a duration which leads to a interval which is shorter than the frequency of data collection - they don't see spikey lines like this:

Spikey lines

Instead, we show this:

Gaps filled

We use the following lens config to achieve this:

Why do we use the dotted line?

Without the dotted line, our target user (the SRE) won't be able to see genuine gaps in data (e.g. an outage for an hour). The dotted lines allow them to see when data is being filled in. For example:

Example gap

What's the problem?

The dotted line is not explained in the UI so the user is not able to see why one chart has a dotted line and why another doesn't.

Our workaround

We are adding a link in a popover pointing towards documentation to explain to the user that:

• They will see a dotted line if they use a duration which is short enough so that we need to fill in the missing values to remove spikes
• They will also see a dotted line when there is a genuine gap in data

Sample tooltip

Solution Proposal

The workaround we are doing relies on the user finding our popover, we can't surface it when dotted lines show (as we don't know when it is happening).

• We want the user to be able to easily see why there is a dotted line when there is one (e.g. maybe when they hover on it or maybe it would be immediately apparent in the chart

• We also don't want to share a generic explanation about the dotted lines as it still won't explain why it makes entire lines dotted at short durations - we want to explain the behaviour in a way which makes sense to the context of how we are using it in our UI (e.g. maybe we add a short explanation and a link to our docs)

Note : Sharing a generic explanation if they want to dig more into how it works is fine but we assume that the user doesn't want to learn about lens - they want the simplest explanation of what the dotted lines means in the context of what they are seeing and why they are seeing it (and perhaps they can learn more about the underlying lens functionality in a further link)

[elasticmachine]

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

[dej611]

cc @markov00 @gvnmagni I think this makes sense, in particular when only dotted lines are shown vs both solid and dotted in the same context, as the user has no comparable style to guess the difference. Would you think this should be addressed within the library context or rather at higher level (consumers like Lens, etc...)?

[markov00]

This will probably be addressed by the library that knows these "situations" and can show something in the legend or somewhere else.

[roshan-elastic]

@ninoslavmiskovic - slightly related, have you seen how Grafana handles missing values?

https://grafana.com/docs/grafana/latest/panels-visualizations/visualizations/time-series/#connect-null-values

(thanks @markov00)

Pretty cool and one of our SREs was wondering about a possibility like this...with something like this, we might not need a dotted line (and it would only fill small gaps - unfilled gaps would be self-evident)

[markov00]

Linking relative issues: https://github.com/elastic/kibana/issues/107931