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

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | [`57.0.1` -> `58.2.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/57.0.1/58.2.0) | [![age](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/compatibility-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/confidence-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>elastic/elastic-charts</summary> # [58.2.0](elastic/elastic-charts@v58.1.0...v58.2.0) (2023-06-23) ### Bug Fixes * `Chart` component `children` type ([#2071](elastic/elastic-charts#2071)) ([525c782](elastic/elastic-charts@525c782)) * **deps:** update dependency @elastic/eui to v82 ([#2074](elastic/elastic-charts#2074)) ([69a655f](elastic/elastic-charts@69a655f)) ### Features * **flame:** expose search field text and search text change listener ([#2068](elastic/elastic-charts#2068)) ([c339947](elastic/elastic-charts@c339947)) * support native chart title and description ([#2002](elastic/elastic-charts#2002)) ([341a990](elastic/elastic-charts@341a990)) # [58.1.0](elastic/elastic-charts@v58.0.0...v58.1.0) (2023-06-08) ### Features * **flame:** expose search control ([#2064](elastic/elastic-charts#2064)) ([011b56b](elastic/elastic-charts@011b56b)) # [58.0.0](elastic/elastic-charts@v57.0.1...v58.0.0) (2023-06-06) ### Bug Fixes * **axis:** reduce number of y axis ticks on linear scale ([#2005](elastic/elastic-charts#2005)) ([0ef828b](elastic/elastic-charts@0ef828b)) * **deps:** update dependency @elastic/eui to v81 ([#2052](elastic/elastic-charts#2052)) ([4c55e01](elastic/elastic-charts@4c55e01)) ### BREAKING CHANGES * **axis:** the default number of desired ticks in the Y-Axis was changed from `10` to `5` </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/elastic/kibana).  --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: nickofthyme <[email protected]> Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Nick Partridge <[email protected]> Co-authored-by: Marco Vettorello <[email protected]>
elastic · Jun 26, 2023 · b2c6c71 · b2c6c71
1 parent 5728bfa
commit b2c6c71
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/[email protected]",
     "@elastic/ems-client": "8.4.0",

diff --git a/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx b/packages/kbn-unified-field-list/src/components/field_stats/field_stats.tsx
@@ -27,6 +27,7 @@ import {
   ScaleType,
   Settings,
   TooltipType,
+  Tooltip,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import { buildEsQuery, Query, Filter, AggregateQuery } from '@kbn/es-query';
@@ -481,8 +482,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={
@@ -531,12 +532,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/...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/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}
         />