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 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](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 #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 <details> <summary>elastic/elastic-charts (@elastic/charts)</summary> ### [`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. </details> --- --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Marco Vettorello <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]> Co-authored-by: Elena Stoeva <[email protected]>
elastic · Feb 8, 2024 · 086c469 · 086c469
1 parent 3e4f1ed
commit 086c469
Show file tree

Hide file tree

Showing 13 changed files with 49 additions and 9 deletions.
diff --git 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/[email protected]",
     "@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
@@ -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/...ts/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap b/...ts/visualization_actions/lens_attributes/common/__snapshots__/external_alert.test.ts.snap
diff --git a/...ization_actions/lens_attributes/common/alerts/__snapshots__/alerts_histogram.test.ts.snap b/...ization_actions/lens_attributes/common/alerts/__snapshots__/alerts_histogram.test.ts.snap
diff --git a/...common/components/visualization_actions/lens_attributes/common/alerts/alerts_histogram.ts b/...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/..._solution/public/common/components/visualization_actions/lens_attributes/common/events.ts b/..._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/...n/public/common/components/visualization_actions/lens_attributes/common/external_alert.ts b/...n/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/.../visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap b/.../visualization_actions/lens_attributes/network/__snapshots__/dns_top_domains.test.ts.snap
diff --git a/...public/common/components/visualization_actions/lens_attributes/network/dns_top_domains.ts b/...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
@@ -269,7 +269,11 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
               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
@@ -106,7 +106,11 @@ export const DurationChartComponent = ({
           <Settings
             xDomain={{ min, max }}
             showLegend
-            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.Right}
             onBrushEnd={onBrushEnd}
             onLegendItemClick={legendToggleVisibility}

diff --git a/x-pack/plugins/watcher/server/models/watch/threshold_watch/build_visualize_query.js b/x-pack/plugins/watcher/server/models/watch/threshold_watch/build_visualize_query.js
@@ -112,7 +112,11 @@ export function buildVisualizeQuery(watch, visualizeOptions, kibanaVersion) {
     date_histogram: {
       field: watch.timeField,
       time_zone: visualizeOptions.timezone,
-      min_doc_count: 1,
+      min_doc_count: 0,
+      extended_bounds: {
+        min: visualizeOptions.rangeFrom,
+        max: visualizeOptions.rangeTo,
+      },
     },
   };
 

diff --git a/yarn.lock b/yarn.lock
@@ -1658,10 +1658,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@61.2.0":
-  version "61.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.2.0.tgz#fa065b85324d5660e4b6355390cca8699ef0d6ff"
-  integrity sha512-LBmZ+6wSR9/BCR+go5eIBy51Jpxr0cbK/a7vslZNYIGCdpHsWxGZgcqG3KgshFxOmUvcP7kj9LEEmeCTEGhbUQ==
+"@elastic/charts@63.0.0":
+  version "63.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-63.0.0.tgz#c7f54cd60a1a59a28b5654886392e05a10fd67b8"
+  integrity sha512-nvLg/qFJXYuKOdTDYj3iuwJ/X4zhkHdIB91yezd7fo+YvpBRiAUzJfc6Dpy6M5JkmGwx7Dq8zjGt6mO8ngOhog==
   dependencies:
     "@popperjs/core" "^2.11.8"
     bezier-easing "^2.1.0"