[APM] Instances Latency Distribution scatterplot/bubble chart

[smith]

(Part of the new APM service overview. See #81135 for more.)

• Implement the scatterplot as shown in the mocks for [APM] Service overview [META] #81135.
• May be blocked by the availability of a scatterplot in Elastic Charts (see Scatterplot elastic-charts#502.)
• No interactivity (brushing to select instances, linking, etc.) is necessary to implement, but if we decide to add those please open a new issue before closing this one.

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[smith]

On elastic/elastic-charts#502 @markov00 showed how this is currently possible using bubble charts:

• https://codesandbox.io/s/suspicious-galileo-k3nzs?file=/src/App.tsx
• https://elastic.github.io/elastic-charts/?path=/story/bubble-chart-alpha--simple

[sorenlouv]

@smith What's the difference between scatterplot and bubble charts? Should we still ask the elastic charts team to work on scatter plot so we can transition to that for 7.12?

[smith]

@sqren

What's the difference between scatterplot and bubble charts?

@markov00 answered on Slack:

Actually, the bubble chart is just a variation of the scatterplot, but since we derived the bubble chart implementation from a Line chart implementation where few aspect are not conceived for scatterplots:

• we can represent data that spans between multiple cartesian quadrants but our axes system doesn’t allows us the rendering of the cartesian origin)
• having log scale on X axis is not currently possible
• the current interaction strategy (tooltip) is not great for that chart type yet
• rendering different markers instead of just circles

We'll have one quadrant, linear scales, regular tooltips, and just circles, so it looks like the bubble chart is sufficient for our purposes.