[8.9] Update dependency @elastic/charts to v58 (main) (#159082) (#160560

) # Backport This will backport the following commits from `main` to `8.9`: - [Update dependency @elastic/charts to v58 (main) (#159082)](#159082)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) If you want to rebase/retry this PR, check\r\nthis box\r\n\r\n---\r\n\r\nThis PR has been generated by [Mend\r\nRenovate](https://www.mend.io/free-developer-tools/renovate/). View\r\nrepository job log\r\n[here](https://app.renovatebot.com/dashboard#github/elastic/kibana).\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>\r\nCo-authored-by: nickofthyme <nicholas.partridge@elastic.co>\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>\r\nCo-authored-by: Marco Vettorello <marco.vettorello@elastic.co>","sha":"b2c6c71a8db689b5dbf7ee1017071732e09afc18","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:APM","Team:Visualizations","Team:uptime","release_note:skip","auto-backport","apm:cypress-record","v8.9.0"],"number":159082,"url":"https://github.com/elastic/kibana/pull/159082","mergeCommit":{"message":"Update dependency @elastic/charts to v58 (main) (#159082)\n\n[![Mend\r\nRenovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)\r\n\r\nThis PR contains the following updates:\r\n\r\n| Package | Change | Age | Adoption | Passing | Confidence |\r\n|---|---|---|---|---|---|\r\n| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |\r\n[`57.0.1` ->\r\n`58.2.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/57.0.1/58.2.0)\r\n|\r\n[![age](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/age-slim)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![adoption](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![passing](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/compatibility-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![confidence](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/confidence-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n\r\n---\r\n\r\n### Release Notes\r\n\r\n<details>\r\n<summary>elastic/elastic-charts</summary>\r\n\r\n#\r\n[58.2.0](https://github.com/elastic/elastic-charts/compare/v58.1.0...v58.2.0)\r\n(2023-06-23)\r\n\r\n\r\n### Bug Fixes\r\n\r\n* `Chart` component `children` type\r\n([#2071](https://github.com/elastic/elastic-charts/issues/2071))\r\n([525c782](https://github.com/elastic/elastic-charts/commit/525c782829a37e465b03d5aae7a0d697f00bd431))\r\n* **deps:** update dependency @elastic/eui to v82\r\n([#2074](https://github.com/elastic/elastic-charts/issues/2074))\r\n([69a655f](https://github.com/elastic/elastic-charts/commit/69a655f0dac2975ab42b48a48cc19693eaff1021))\r\n\r\n\r\n### Features\r\n\r\n* **flame:** expose search field text and search text change listener\r\n([#2068](https://github.com/elastic/elastic-charts/issues/2068))\r\n([c339947](https://github.com/elastic/elastic-charts/commit/c339947c3963b8ad8124203435f410b34b93cc1e))\r\n* support native chart title and description\r\n([#2002](https://github.com/elastic/elastic-charts/issues/2002))\r\n([341a990](https://github.com/elastic/elastic-charts/commit/341a990c5d1154f36927a91321e4d0c39b44a4be))\r\n\r\n#\r\n[58.1.0](https://github.com/elastic/elastic-charts/compare/v58.0.0...v58.1.0)\r\n(2023-06-08)\r\n\r\n\r\n### Features\r\n\r\n* **flame:** expose search control\r\n([#2064](https://github.com/elastic/elastic-charts/issues/2064))\r\n([011b56b](https://github.com/elastic/elastic-charts/commit/011b56b3f51e2aa1fea8410b4f24e69403635933))\r\n\r\n#\r\n[58.0.0](https://github.com/elastic/elastic-charts/compare/v57.0.1...v58.0.0)\r\n(2023-06-06)\r\n\r\n\r\n### Bug Fixes\r\n\r\n* **axis:** reduce number of y axis ticks on linear scale\r\n([#2005](https://github.com/elastic/elastic-charts/issues/2005))\r\n([0ef828b](https://github.com/elastic/elastic-charts/commit/0ef828b535f69d3a47fa38febd5dd1f5b88a6ce8))\r\n* **deps:** update dependency @elastic/eui to v81\r\n([#2052](https://github.com/elastic/elastic-charts/issues/2052))\r\n([4c55e01](https://github.com/elastic/elastic-charts/commit/4c55e0119e6d0def4340a620899b7ee0e0012b02))\r\n\r\n\r\n### BREAKING CHANGES\r\n\r\n* **axis:** the default number of desired ticks in the Y-Axis was\r\nchanged from `10` to `5`\r\n\r\n</details>\r\n\r\n---\r\n\r\n### Configuration\r\n\r\n📅 **Schedule**: Branch creation - At any time (no schedule defined),\r\nAutomerge - At any time (no schedule defined).\r\n\r\n🚦 **Automerge**: Disabled by config. Please merge this manually once you\r\nare satisfied.\r\n\r\n♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the\r\nrebase/retry checkbox.\r\n\r\n🔕 **Ignore**: Close this PR and you won't be reminded about this update\r\nagain.\r\n\r\n---\r\n\r\n- [ ] If you want to rebase/retry this PR, check\r\nthis box\r\n\r\n---\r\n\r\nThis PR has been generated by [Mend\r\nRenovate](https://www.mend.io/free-developer-tools/renovate/). View\r\nrepository job log\r\n[here](https://app.renovatebot.com/dashboard#github/elastic/kibana).\r\n\r\n\r\n\r\n---------\r\n\r\nCo-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>\r\nCo-authored-by: nickofthyme <nicholas.partridge@elastic.co>\r\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>\r\nCo-authored-by: Marco Vettorello <marco.vettorello@elastic.co>","sha":"b2c6c71a8db689b5dbf7ee1017071732e09afc18"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
elastic · Jun 26, 2023 · a0c8ee7 · a0c8ee7
1 parent 8980aa9
commit a0c8ee7
Show file tree

Hide file tree

Showing 98 changed files with 721 additions and 664 deletions.
diff --git a/package.json b/package.json
@@ -94,7 +94,7 @@
     "@dnd-kit/utilities": "^2.0.0",
     "@elastic/apm-rum": "^5.12.0",
     "@elastic/apm-rum-react": "^1.4.2",
-    "@elastic/charts": "57.0.1",
+    "@elastic/charts": "58.2.0",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
     "@elastic/ems-client": "8.4.0",

diff --git a/...plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx b/...plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx
@@ -13,6 +13,7 @@ import {
   Heatmap,
   GeometryValue,
   XYChartSeriesIdentifier,
+  Tooltip,
 } from '@elastic/charts';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
@@ -287,7 +288,7 @@ describe('HeatmapComponent', function () {
 
   it('defaults on displaying the tooltip', () => {
     const component = shallowWithIntl(<HeatmapComponent {...wrapperProps} />);
-    expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.Follow });
+    expect(component.find(Tooltip).prop('type')).toBe(TooltipType.Follow);
   });
 
   it('hides the legend if the showTooltip is false', async () => {
@@ -296,7 +297,7 @@ describe('HeatmapComponent', function () {
       args: { ...wrapperProps.args, showTooltip: false },
     } as unknown as HeatmapRenderProps;
     const component = mountWithIntl(<HeatmapComponent {...newProps} />);
-    expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.None });
+    expect(component.find(Tooltip).prop('type')).toBe(TooltipType.None);
   });
 
   it('not renders the component if no value accessor is given', () => {

diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
@@ -23,6 +23,7 @@ import {
   ESCalendarIntervalUnit,
   PartialTheme,
   SettingsProps,
+  Tooltip,
 } from '@elastic/charts';
 import type { CustomPaletteState } from '@kbn/charts-plugin/public';
 import { search } from '@kbn/data-plugin/public';
@@ -615,6 +616,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
               splitColumnAccessor={splitChartColumnAccessor}
               splitRowAccessor={splitChartRowAccessor}
             />
+            <Tooltip {...tooltip} />
             <Settings
               onRenderChange={onRenderChange}
               noResults={
@@ -630,7 +632,6 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
               legendSize={LegendSizeToPixels[args.legend.legendSize ?? DEFAULT_LEGEND_SIZE]}
               legendColorPicker={uiState ? LegendColorPickerWrapper : undefined}
               debugState={window._echDebugStateFlag ?? false}
-              tooltip={tooltip}
               theme={[
                 themeOverrides,
                 chartTheme,

diff --git a/...ssion_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap b/...ssion_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap
diff --git a/...t_expressions/expression_partition_vis/public/components/partition_vis_component.test.tsx b/...t_expressions/expression_partition_vis/public/components/partition_vis_component.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { Settings, TooltipType, SeriesIdentifier } from '@elastic/charts';
+import { Settings, TooltipType, SeriesIdentifier, Tooltip } from '@elastic/charts';
 import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
 import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';
@@ -239,14 +239,14 @@ describe('PartitionVisComponent', function () {
 
   it('defaults on displaying the tooltip', () => {
     const component = shallow(<PartitionVisComponent {...wrapperProps} />);
-    expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.Follow });
+    expect(component.find(Tooltip).prop('type')).toBe(TooltipType.Follow);
   });
 
   it('doesnt show the tooltip when the user requests it', () => {
     const newParams = { ...visParams, addTooltip: false };
     const newProps = { ...wrapperProps, visParams: newParams };
     const component = shallow(<PartitionVisComponent {...newProps} />);
-    expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.None });
+    expect(component.find(Tooltip).prop('type')).toBe(TooltipType.None);
   });
 
   it('calls filter callback', () => {

diff --git a/.../chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx b/.../chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
@@ -19,6 +19,7 @@ import {
   SeriesIdentifier,
   PartitionElementEvent,
   SettingsProps,
+  Tooltip,
 } from '@elastic/charts';
 import { useEuiTheme } from '@elastic/eui';
 import type { PaletteRegistry } from '@kbn/coloring';
@@ -497,6 +498,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
                 splitColumnAccessor={splitChartColumnAccessor}
                 splitRowAccessor={splitChartRowAccessor}
               />
+              <Tooltip {...tooltip} />
               <Settings
                 noResults={
                   <VisualizationNoResults chartType={visType} renderComplete={onRenderChange} />
@@ -511,7 +513,6 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
                 legendColorPicker={props.uiState ? LegendColorPickerWrapper : undefined}
                 flatLegend={flatLegend}
                 legendSort={customLegendSort}
-                tooltip={tooltip}
                 showLegendExtra={visParams.showValuesInLegend}
                 onElementClick={([elementEvent]) => {
                   // this cast is safe because we are rendering a partition chart

diff --git a/src/plugins/unified_field_list/public/components/field_stats/field_stats.tsx b/src/plugins/unified_field_list/public/components/field_stats/field_stats.tsx
@@ -31,6 +31,7 @@ import {
   ScaleType,
   Settings,
   TooltipType,
+  Tooltip,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { buildEsQuery, Query, Filter, AggregateQuery } from '@kbn/es-query';
@@ -485,8 +486,8 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
         <div data-test-subj="unifiedFieldStats-timeDistribution">
           <div data-test-subj={`${dataTestSubject}-histogram`}>
             <Chart size={{ height: 200, width: 300 - 32 }}>
+              <Tooltip type={TooltipType.None} />
               <Settings
-                tooltip={{ type: TooltipType.None }}
                 theme={customChartTheme}
                 baseTheme={chartBaseTheme}
                 xDomain={
@@ -535,12 +536,8 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
             data-test-subj={`${dataTestSubject}-histogram`}
             size={{ height: 200, width: '100%' }}
           >
-            <Settings
-              rotation={90}
-              tooltip={{ type: TooltipType.None }}
-              theme={customChartTheme}
-              baseTheme={chartBaseTheme}
-            />
+            <Tooltip type={TooltipType.None} />
+            <Settings rotation={90} theme={customChartTheme} baseTheme={chartBaseTheme} />
 
             <Axis
               id="key"

diff --git a/src/plugins/vis_types/timelion/public/components/series/area.tsx b/src/plugins/vis_types/timelion/public/components/series/area.tsx
@@ -75,7 +75,6 @@ export const AreaSeriesComponent = ({ index, groupId, visData }: AreaSeriesCompo
     xAccessor={0}
     yAccessors={[1]}
     data={visData._hide ? [] : visData.data}
-    sortIndex={index}
     color={visData.color}
     curve={visData.lines?.steps ? CurveType.CURVE_STEP : CurveType.LINEAR}
     stackAccessors={visData.stack ? [0] : undefined}

diff --git a/src/plugins/vis_types/timelion/public/components/series/bar.tsx b/src/plugins/vis_types/timelion/public/components/series/bar.tsx
@@ -47,7 +47,6 @@ export const BarSeriesComponent = ({ index, groupId, visData }: BarSeriesCompone
     xAccessor={0}
     yAccessors={[1]}
     data={visData._hide ? [] : visData.data}
-    sortIndex={index}
     enableHistogramMode={false}
     color={visData.color}
     stackAccessors={visData.stack ? [0] : undefined}

diff --git a/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx b/src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx
@@ -17,6 +17,7 @@ import {
   LegendPositionConfig,
   LayoutDirection,
   Placement,
+  Tooltip,
 } from '@elastic/charts';
 import { EuiTitle } from '@elastic/eui';
 import { RangeFilterParams } from '@kbn/es-query';
@@ -198,6 +199,11 @@ export const TimelionVisComponent = ({
         </EuiTitle>
       )}
       <Chart ref={chartRef} renderer="canvas" size={{ width: '100%' }}>
+        <Tooltip
+          snap={true}
+          headerFormatter={({ value }) => tickFormat(value)}
+          type={TooltipType.VerticalCursor}
+        />
         <Settings
           debugState={window._echDebugStateFlag ?? false}
           onBrushEnd={brushEndListener}
@@ -211,11 +217,6 @@ export const TimelionVisComponent = ({
           }}
           theme={chartTheme}
           baseTheme={chartBaseTheme}
-          tooltip={{
-            snap: true,
-            headerFormatter: ({ value }) => tickFormat(value),
-            type: TooltipType.VerticalCursor,
-          }}
           ariaLabel={ariaLabel}
           ariaUseDefaultSummary={!ariaLabel}
         />