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

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",

src/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', () => {

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,

src/plugins/chart_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', () => {

src/plugins/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

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"

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}

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}

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}
         />