[Charts] Multi-layer time axis (opt-out only)

[nickofthyme]

Summary

This PR introduce the multi-layer time axis in Discover, Lens, Visualize, TSVB.
It adds visualization:useLegacyTimeAxis advanced settings under charts plugin to toggle legacy time axis.

The new multi-layer time axis is introduced in @elastic/charts https://elastic.github.io/elastic-charts/?path=/story/area-chart--timeslip and was demoed as part of the Kibana Demo Days.

It is the outcome of the research done in elastic/elastic-charts#1310 related to improve the time axis solving the following problems:

• sparse time labels that can be far apart
• unclear where time point is on the label (the middle)
• difficult / tedious to read due to redundant information and small fonts
• resolution is not explicit (is it hours of days or days themselves)

There can be some subsequent fix PR related to that, that DRY up the code a bit and introduce small changes in the colors.

TO REVIEWERS: this change can have some issues that we are promptly collecting here elastic/elastic-charts#1442 and fixing in the next weeks. If the case we can't fix all the issues before nov 15 we are going to switch on the visualization:useLegacyTimeAxis switch.

[markov00]

@elasticmachine merge upstream

[elasticmachine]

Pinging @elastic/datavis (Feature:ElasticCharts)

[markov00]

I've marked the PR ready to review because it looks like the CI is timing out on the ciGroup6 multiple times
https://buildkite.com/elastic/kibana-pull-request/builds/1985#
but this looks like an issue not related to the changes

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 2545fd9
• Storybooks Preview

Test Failures

• [job] [logs] OSS CI Group #2 / embeddable explorer dashboard container pie charts

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
charts	253	254	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
discover	340.0KB	340.4KB	+480.0B
lens	1.0MB	1.0MB	+700.0B
visTypeTimeseries	485.3KB	485.8KB	+504.0B
visTypeXy	61.8KB	62.2KB	+452.0B
total			+2.1KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
charts	59.0KB	59.1KB	+85.0B
discover	22.9KB	23.0KB	+136.0B
kbnUiSharedDeps-npmDll	5.0MB	5.1MB	+90.3KB
lens	39.2KB	39.4KB	+136.0B
visTypeTimeseries	14.8KB	14.9KB	+136.0B
visTypeXy	40.1KB	40.4KB	+240.0B
total			+91.0KB

Unknown metric groups

API count

id	before	after	diff
charts	285	286	+1

History

• 💔 Build #1946 failed 6af5d3c
• 💔 Build #1877 failed f83b61c
• 💔 Build #1857 failed 6ef7758
• 💔 Build #1824 failed 63dea54
• 💔 Build #1539 failed 0545050

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

[flash1293]

Still waiting for bootstrap, but some notes:
For other settings like this we add the "deprecated" label to the advanced setting from the start to signal we want to get rid of it eventually:

We should probably do this here as well.

Is there a reason timelion is excluded? This PR changes a test for some reason (maybe some change of behavior in legacy tick placement) but none of the code.

[markov00]

For other settings like this we add the "deprecated" label to the advanced setting from the start to signal we want to get rid of it eventually

Sure we can add the deprecation label but we don't have a specific version yet where we like to remove this option.
@ghudgins ideas?

Is there a reason timelion is excluded? This PR changes a test for some reason (maybe some change of behavior in legacy tick placement) but none of the code.

The issue with timelion is that it doesn't have a great set of defaults, in combination with the multi-layer time axis can create confusion and misleading charts. One example is the size of the bars: timelion doesn't show bar histograms, but it uses small thin bars of 6px by default. The bars are rendered always between the starting point and the end point, but when the size is reduced so much, the bar looks centered in the middle of the bin and the user can misunderstand that the x value is in the middle, not at the beginning.
This also helps the phasing out of Timelion from kibana :)

[ThomThomson]

Dashboard snapshot testing tolerance change LGTM! Code review only.

[dej611]

I've logged few questions and bugs in the elastic-chart linked issue.

One bug is relative to Visualize normal bar chart not enabling the new time axis.
The other bug is relative to some offset in Vertical bar chart in Lens (probably with partial data?)

[flash1293]

Sure we can add the deprecation label but we don't have a specific version yet where we like to remove this option.

We just changed the tooltip for pie chart to "in a future version" because it wasn't decided yet. I think we can do the same here.

[kibanamachine]

💔 Backport failed

The backport operation could not be completed due to the following error:
There are no branches to backport to. Aborting.

The backport PRs will be merged automatically after passing CI.

To backport manually run:
node scripts/backport --pr 115853

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 115853 or prevent reminders by adding the backport:skip label.

[kibanamachine]

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 115853 or prevent reminders by adding the backport:skip label.