From 9dc52d8bdfafa50c897dad4473a9869dc6967474 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Thu, 8 Feb 2024 16:13:34 +0000 Subject: [PATCH] Update dependency @elastic/charts to v63 (main) (#175316) ## 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 https://github.com/elastic/elastic-charts/pull/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](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-histogram-aggregation.html#search-aggregations-bucket-histogram-aggregation-extended-bounds) 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 https://github.com/elastic/kibana/issues/153079 This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | [`61.2.0` -> `63.0.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/61.2.0/63.0.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@elastic%2fcharts/63.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@elastic%2fcharts/63.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@elastic%2fcharts/61.2.0/63.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@elastic%2fcharts/61.2.0/63.0.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
elastic/elastic-charts (@​elastic/charts) ### [`v63.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6300-2024-01-24) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v62.0.0...v63.0.0) ##### Features - **legend:** expose extra raw values ([#​2308](https://togithub.com/elastic/elastic-charts/issues/2308)) ([85bfe06](https://togithub.com/elastic/elastic-charts/commit/85bfe0668d66fd24e78f2bba8be4570fa926e94c)) ##### BREAKING CHANGES - **legend:** The `CustomLegend.item` now exposes both the `raw` and the `formatted` version of the extra value. ### [`v62.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6200-2024-01-23) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v61.2.0...v62.0.0) ##### Bug Fixes - **deps:** update dependency [@​elastic/eui](https://togithub.com/elastic/eui) to ^91.3.1 ([#​2286](https://togithub.com/elastic/elastic-charts/issues/2286)) ([d4d7b5d](https://togithub.com/elastic/elastic-charts/commit/d4d7b5db6681ec0c65ef8b7e576f1b5fc8b5433a)) - **deps:** update dependency [@​elastic/eui](https://togithub.com/elastic/eui) to v92 ([#​2290](https://togithub.com/elastic/elastic-charts/issues/2290)) ([cc537fa](https://togithub.com/elastic/elastic-charts/commit/cc537faf43d88acc9abab7e0dac9360bd460b574)) - **legend:** improve last value handling ([#​2115](https://togithub.com/elastic/elastic-charts/issues/2115)) ([9f99447](https://togithub.com/elastic/elastic-charts/commit/9f9944734c4a13bfe9e4ffc9f4c0f39da5f9931f)) ##### 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.
--- --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Marco Vettorello Co-authored-by: Stratoula Kalafateli Co-authored-by: Elena Stoeva --- package.json | 2 +- .../overview/components/sections/logs/logs_section.tsx | 6 +++++- .../common/__snapshots__/external_alert.test.ts.snap | 4 ++++ .../alerts/__snapshots__/alerts_histogram.test.ts.snap | 8 ++++++++ .../lens_attributes/common/alerts/alerts_histogram.ts | 2 ++ .../lens_attributes/common/events.ts | 2 ++ .../lens_attributes/common/external_alert.ts | 2 ++ .../network/__snapshots__/dns_top_domains.test.ts.snap | 4 ++++ .../lens_attributes/network/dns_top_domains.ts | 2 ++ .../public/rule_types/threshold/visualization.tsx | 6 +++++- .../components/common/charts/duration_chart.tsx | 6 +++++- .../models/watch/threshold_watch/build_visualize_query.js | 6 +++++- yarn.lock | 8 ++++---- 13 files changed, 49 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index ccd5182e04a55..4676515b4f889 100644 --- a/package.json +++ b/package.json @@ -101,7 +101,7 @@ "@dnd-kit/utilities": "^2.0.0", "@elastic/apm-rum": "^5.16.0", "@elastic/apm-rum-react": "^2.0.2", - "@elastic/charts": "61.2.0", + "@elastic/charts": "63.0.0", "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.5.1", diff --git a/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx b/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx index 63087aad6dd30..2651cef2191d0 100644 --- a/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx +++ b/x-pack/plugins/observability/public/pages/overview/components/sections/logs/logs_section.tsx @@ -142,7 +142,11 @@ export function LogsSection({ bucketSize }: Props) { showLegend legendPosition={Position.Right} xDomain={{ min, max }} - showLegendExtra + // Please double check if the data passed to the chart contains all the buckets, even the empty ones. + // the showLegendExtra will display the last element of the data array as the default legend value + // and if empty buckets are filtered out you can probably see a value that doesn't correspond + // to the value in the last time bucket visualized. + // showLegendExtra locale={i18n.getLocale()} /> {series && diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap index e8bdc77c7c460..4e26d269ed8ad 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap @@ -41,6 +41,9 @@ Object { "isBucketed": false, "label": "Count of records", "operationType": "count", + "params": Object { + "emptyAsNull": true, + }, "scale": "ratio", "sourceField": "___records___", }, @@ -50,6 +53,7 @@ Object { "label": "@timestamp", "operationType": "date_histogram", "params": Object { + "includeEmptyRows": true, "interval": "auto", }, "scale": "interval", diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/alerts_histogram.test.ts.snap b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/alerts_histogram.test.ts.snap index a48df2b2787e6..5e666cc63c3e9 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/alerts_histogram.test.ts.snap +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/__snapshots__/alerts_histogram.test.ts.snap @@ -50,6 +50,7 @@ Object { "label": "@timestamp", "operationType": "date_histogram", "params": Object { + "includeEmptyRows": true, "interval": "auto", }, "scale": "interval", @@ -60,6 +61,9 @@ Object { "isBucketed": false, "label": "Count of records", "operationType": "count", + "params": Object { + "emptyAsNull": true, + }, "scale": "ratio", "sourceField": "___records___", }, @@ -233,6 +237,7 @@ Object { "label": "@timestamp", "operationType": "date_histogram", "params": Object { + "includeEmptyRows": true, "interval": "auto", }, "scale": "interval", @@ -243,6 +248,9 @@ Object { "isBucketed": false, "label": "Count of records", "operationType": "count", + "params": Object { + "emptyAsNull": true, + }, "scale": "ratio", "sourceField": "___records___", }, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts index 571040b33b378..5fb0630bcca80 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts @@ -70,6 +70,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ( scale: 'interval', params: { interval: 'auto', + includeEmptyRows: true, }, }, 'e09e0380-0740-4105-becc-0a4ca12e3944': { @@ -79,6 +80,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = ( isBucketed: false, scale: 'ratio', sourceField: '___records___', + params: { emptyAsNull: true }, }, '34919782-4546-43a5-b668-06ac934d3acd': { label: `Top values of ${stackByField}`, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts index baa267b9f17b8..8e238ca11b1d7 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/events.ts @@ -71,6 +71,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ( scale: 'interval', params: { interval: 'auto', + includeEmptyRows: true, }, }, 'e09e0380-0740-4105-becc-0a4ca12e3944': { @@ -80,6 +81,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = ( isBucketed: false, scale: 'ratio', sourceField: '___records___', + params: { emptyAsNull: true }, }, '34919782-4546-43a5-b668-06ac934d3acd': { label: `Top values of ${stackByField}`, diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts index 2aa3eab25d105..3baec52d3b8fb 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts @@ -91,6 +91,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ( scale: 'interval', params: { interval: 'auto', + includeEmptyRows: true, }, }, '0a923af2-c880-4aa3-aa93-a0b9c2801f6d': { @@ -100,6 +101,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = ( isBucketed: false, scale: 'ratio', sourceField: '___records___', + params: { emptyAsNull: true }, }, '42334c6e-98d9-47a2-b4cb-a445abb44c93': { label: TOP_VALUE(`${stackByField}`), // could be event.category diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap index 5d7a36ab09e20..19a5eb4f45b71 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap @@ -26,6 +26,9 @@ Object { "isBucketed": false, "label": "Unique count of dns.question.name", "operationType": "unique_count", + "params": Object { + "emptyAsNull": true, + }, "scale": "ratio", "sourceField": "dns.question.name", }, @@ -35,6 +38,7 @@ Object { "label": "@timestamp", "operationType": "date_histogram", "params": Object { + "includeEmptyRows": true, "interval": "auto", }, "scale": "interval", diff --git a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts index f39ad3c2ea30d..39f5d56a3d461 100644 --- a/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts +++ b/x-pack/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts @@ -133,6 +133,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ( scale: 'interval', params: { interval: 'auto', + includeEmptyRows: true, }, }, '2a4d5e20-f570-48e4-b9ab-ff3068919377': { @@ -142,6 +143,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = ( scale: 'ratio', sourceField: 'dns.question.name', isBucketed: false, + params: { emptyAsNull: true }, }, }, columnOrder: [ diff --git a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx index c8996d9fcaa4b..918c87c5d13a8 100644 --- a/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx +++ b/x-pack/plugins/stack_alerts/public/rule_types/threshold/visualization.tsx @@ -269,7 +269,11 @@ export const ThresholdVisualization: React.FunctionComponent = ({ baseTheme={chartsBaseTheme} xDomain={domain} showLegend={!!termField} - showLegendExtra + // Please double check if the data passed to the chart contains all the buckets, even the empty ones. + // the showLegendExtra will display the last element of the data array as the default legend value + // and if empty buckets are filtered out you can probably see a value that doesn't correspond + // to the value in the last time bucket visualized. + // showLegendExtra legendPosition={Position.Bottom} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx index 8e5da4fa970ab..d85654b195c6d 100644 --- a/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx +++ b/x-pack/plugins/uptime/public/legacy_uptime/components/common/charts/duration_chart.tsx @@ -106,7 +106,11 @@ export const DurationChartComponent = ({