Update dependency @elastic/charts to v63 (main)

[renovate]

Note about @elastic/charts BREAKING CHANGE

In version 62.0.0 we introduced a breaking change in time-series charts: the default "extra" legend value now represents the last data point in the passed data array. It doesn't try to reconcile anymore the data computed domain with a passed domain in Settings.xDomain but instead it renders directly the last element of the passed array.
The reasons for this change can be found at elastic/elastic-charts#2115 or can be asked directly to our #charts slack channel

There are a couple of implementations in Kibana that use both the showLegendExtra in the chart configuration. I've commented them out so that the owner teams can help me fix this breaking change if necessary.

In general, the fix requires that the data passed to the chart contains all the buckets, even empty buckets with null/zeros should be passed. To achieve this, your ES query you should provide the extended_bounds settings in the data histogram agg and use a min_doc_count:0. If that doesn't work, please ping me and we can find an alternative solution.

This should not limit the query performance, generating empty date buckets on the server side has a similar or even less performance impact than what we were doing on the client side to calculate every missing bucket, to fillup the chart in particular situations.

Please double-check your queries/data fetches and push a commit to this PR or ping me with the updated data fetch strategy.

fix #153079

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@elastic/charts	61.2.0 -> 63.0.0

---

Release Notes

elastic/elastic-charts (@​elastic/charts)

v63.0.0

Compare Source

Features

• legend: expose extra raw values (#​2308) (85bfe06)

BREAKING CHANGES

• legend: The CustomLegend.item now exposes both the raw and the formatted version of the extra value.

v62.0.0

Compare Source

Bug Fixes

• deps: update dependency @​elastic/eui to ^91.3.1 (#​2286) (d4d7b5d)
• deps: update dependency @​elastic/eui to v92 (#​2290) (cc537fa)
• legend: improve last value handling (#​2115) (9f99447)

BREAKING CHANGES

• legend: In cartesian charts, the default legend value now represents the data points that coincide with the latest datum in the X domain. Please consider passing every data point, even the empty ones (like empty buckets/bins/etc) if your x data domain doesn't fully cover a custom x domain passed to the chart configuration.

---

[renovate]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

[elasticmachine]

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

[elasticmachine]

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

[elasticmachine]

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

[stratoula]

@markov00 nice!! As this PR will close this can you also add it on the description? #153079

[stratoula]

/ci

[crespocarlos]

While testing the change in infra UI, I noticed that the legend no longer shows the bucket value when hovering over the chart:

extralegend_disabled.mov

If I enable the showLegendExtra back, the value shows up, but the legend is truncated and hard to read.

extralegend_enabled.mov

For comparison, this is how it's currently rendered:

current_behaviour.mov

Is this change part of this update?

[markov00]

Hey @crespocarlos

If I enable the showLegendExtra back, the value shows up, but the legend is truncated and hard to read.

Correct, I've commented out the showLegendExtra just to ping you, so it should be reenabled if you want to see that data by default.
You are also correct in the fact that now the legend could be shorter and hard to read. We can probably find an elastic-charts workaround for this, but I believe, in your case, the best option is to find a valid legend size in pixel better and configure it in the Settings.legendSize prop. Since you have more than one chart above the other, using a common size there also ensures a bit more vertical alignment across both charts. If that doesn't satisfy your charts option/design I can provide different solutions within elastic-charts trying to solve this.

[markov00]

@crespocarlos Actually, this was the behaviour also before this change, I've checked with an older version of elastic-charts and that was exactly how the legend behaves in such a situation.
I've created an issue to fix that on our end elastic/elastic-charts#2322 but for now I believe we can live with that issue.
I kindly ask you to double check instead the following:
if you are not hovering over the chart, the legend should show the value of the last bucket in the time series. If the legend shows a value but this doesn't represent the last bucket but one earlier because you don't have data in the last bucket, you should change, as described in the PR description, the way you fetch the data to get a dataset with all buckets including the empty ones

[crespocarlos]

@markov00 I've tested it as you suggested and it looks good. I didn't see any odd behaviour after enabling the showLegendExtra on the file owned by Obs UX Infra Services.

[ElenaStoeva]

Thanks for the PR @markov00! I updated the request for fetching data for the chart in Watcher (8e84c98). Tested locally the changes and it LGTM!

[markov00]

if I'm not wrong the query for this chart is built in buildLogOverviewAggregations from x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts and this doesn't contain the min_doc_count:0 and the extended_bounds. Turning this off for now, but can be turned as soon as the query builder is fixed

[angorayc]

Hi, an observation about the value in each legend grouping, not sure if it's to do with this PR.
I think the previous behaviour makes more sense to me, are we able to keep the previous behaviour?

Before - - it shows nothing when not interacting with visualizations.

In this PR - it shows 0 when not interacting with visualizations. Would like to know how do we come up with the value 0 in each group here? As it's a time range we are using for querying, I'd a bit confuse about the value in each legend grouping.

Screen.Recording.2024-02-07.at.18.02.43.mov

[angorayc]

Thanks for the upgrade 👍

[kibana-ci]

💔 Build Failed

• Buildkite Build
• Commit: 91b0298
• Interpreting CI Failures

Failed CI Steps

• FTR Configs #1
• Defend Workflows Cypress Tests on Serverless #2

Test Failures

• [job] [logs] FTR Configs #1 / APM API tests transactions/latency_overall_distribution.spec.ts trial 8.0.0 "after all" hook: runAfter in "8.0.0"

Metrics [docs]

Async chunks

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

id	before	after	diff
observability	637.3KB	637.2KB	-19.0B
securitySolution	11.4MB	11.4MB	+572.0B
stackAlerts	82.2KB	82.1KB	-19.0B
uptime	458.4KB	458.4KB	-19.0B
total			+515.0B

Page load bundle

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

id	before	after	diff
kbnUiSharedDeps-npmDll	6.2MB	6.2MB	-109.0B

History

• 💛 Build #192040 was flaky f16ebdd
• 💔 Build #191978 failed e260429
• 💔 Build #189839 failed bcbfb00
• 💔 Build #189596 failed 0abcf94
• 💔 Build #189546 failed 2dc6e08

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

cc @markov00