Update dependency @elastic/charts to v57.0.1 (main)

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": "55.0.0",
+    "@elastic/charts": "57.0.1",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
     "@elastic/ems-client": "8.4.0",

x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx

@@ -17,18 +17,13 @@ import {
   Position,
   ScaleType,
   Settings,
-  TooltipValue,
-  TooltipValueFormatter,
+  TooltipHeaderFormatter,
 } from '@elastic/charts';
 
 import { MetricDistributionChartTooltipHeader } from './metric_distribution_chart_tooltip_header';
 import { kibanaFieldFormat } from '../../../utils';
 import { useDataVizChartTheme } from '../../hooks';
 
-interface ChartTooltipValue extends TooltipValue {
-  skipHeader?: boolean;
-}
-
 export interface MetricDistributionChartData {
   x: number;
   y: number;
@@ -66,7 +61,7 @@ export const MetricDistributionChart: FC<Props> = ({
 
   const theme = useDataVizChartTheme();
 
-  const headerFormatter: TooltipValueFormatter = (tooltipData: ChartTooltipValue) => {
+  const headerFormatter: TooltipHeaderFormatter = (tooltipData) => {
     const xValue = tooltipData.value;
     const chartPoint: MetricDistributionChartData | undefined = chartData.find(
       (data) => data.x === xValue

x-pack/plugins/infra/public/alerting/common/criterion_preview_chart/criterion_preview_chart.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { niceTimeFormatter, TooltipValue } from '@elastic/charts';
+import { niceTimeFormatter, TooltipProps } from '@elastic/charts';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import { EuiLoadingChart, EuiText } from '@elastic/eui';
@@ -17,9 +17,8 @@ import { GetLogAlertsChartPreviewDataSuccessResponsePayload } from '../../../../
 
 type Series = GetLogAlertsChartPreviewDataSuccessResponsePayload['data']['series'];
 
-export const tooltipProps = {
-  headerFormatter: (tooltipValue: TooltipValue) =>
-    moment(tooltipValue.value).format('Y-MM-DD HH:mm:ss'),
+export const tooltipProps: TooltipProps = {
+  headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss'),
 };
 
 export const NUM_BUCKETS = 20;

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx

@@ -13,7 +13,7 @@ import {
   Position,
   Settings,
   TickFormatter,
-  TooltipValue,
+  TooltipProps,
 } from '@elastic/charts';
 import moment from 'moment';
 import React from 'react';
@@ -59,9 +59,8 @@ export const ChartSection = ({
 }: Props) => {
   const isDarkMode = useIsDarkMode();
   const metrics = series.map((chartSeries) => chartSeries.metric);
-  const tooltipProps = {
-    headerFormatter: (tooltipValue: TooltipValue) =>
-      moment(tooltipValue.value).format('Y-MM-DD HH:mm:ss.SSS'),
+  const tooltipProps: TooltipProps = {
+    headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS'),
   };
 
   return (

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts';
+import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipProps } from '@elastic/charts';
 import {
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
@@ -95,9 +95,8 @@ const ProcessChart = ({ timeseries, color, label }: ProcessChartProps) => {
 
   const yAxisFormatter = createFormatter('percent');
 
-  const tooltipProps = {
-    headerFormatter: (tooltipValue: TooltipValue) =>
-      moment(tooltipValue.value).format('Y-MM-DD HH:mm:ss.SSS'),
+  const tooltipProps: TooltipProps = {
+    headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS'),
   };
 
   const dataDomain = calculateDomain(timeseries, [chartMetric], false);

x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx

@@ -16,12 +16,12 @@ import {
   Chart,
   Settings,
   Position,
-  TooltipValue,
   niceTimeFormatter,
   ElementClickListener,
   RectAnnotation,
   RectAnnotationDatum,
   XYChartElementEvent,
+  TooltipProps,
 } from '@elastic/charts';
 import { EuiFlexItem } from '@elastic/eui';
 import { EuiFlexGroup } from '@elastic/eui';
@@ -123,9 +123,8 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
   }, [timeseries]);
 
   const isDarkMode = useIsDarkMode();
-  const tooltipProps = {
-    headerFormatter: (tooltipValue: TooltipValue) =>
-      moment(tooltipValue.value).format('Y-MM-DD HH:mm:ss.SSS'),
+  const tooltipProps: TooltipProps = {
+    headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS'),
   };
 
   const dataDomain = timeseries ? calculateDomain(timeseries, [chartMetric], false) : null;

x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx

@@ -14,8 +14,8 @@ import {
   niceTimeFormatter,
   Position,
   Settings,
-  TooltipValue,
   BrushEndListener,
+  TooltipProps,
 } from '@elastic/charts';
 import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
 import { useIsDarkMode } from '../../../../hooks/use_is_dark_mode';
@@ -75,9 +75,9 @@ export const ChartSectionVis = ({
     },
     [onChangeRangeTime, isLiveStreaming, stopLiveStreaming]
   );
-  const tooltipProps = {
-    headerFormatter: useCallback(
-      (data: TooltipValue) => moment(data.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
+  const tooltipProps: TooltipProps = {
+    headerFormatter: useCallback<NonNullable<TooltipProps['headerFormatter']>>(
+      ({ value }) => moment(value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
       [dateFormat]
     ),
   };

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx

@@ -12,7 +12,7 @@ import {
   niceTimeFormatter,
   Position,
   Settings,
-  TooltipValue,
+  TooltipProps,
 } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiToolTip } from '@elastic/eui';
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
@@ -82,9 +82,9 @@ export const MetricsExplorerChart = ({
       ? niceTimeFormatter([firstRow.timestamp, lastRow.timestamp])
       : (value: number) => `${value}`;
   }, [series.rows]);
-  const tooltipProps = {
-    headerFormatter: useCallback(
-      (data: TooltipValue) => moment(data.value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
+  const tooltipProps: TooltipProps = {
+    headerFormatter: useCallback<NonNullable<TooltipProps['headerFormatter']>>(
+      ({ value }) => moment(value).format(dateFormat || 'Y-MM-DD HH:mm:ss.SSS'),
       [dateFormat]
     ),
   };

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -18,6 +18,7 @@ import {
   BrushEndListener,
   Chart,
   ElementClickListener,
+  CustomTooltip,
   Heatmap,
   HeatmapBrushEvent,
   HeatmapElementEvent,
@@ -80,7 +81,7 @@ export function isViewBySwimLaneData(arg: any): arg is ViewBySwimLaneData {
  * Provides a custom tooltip for the anomaly swim lane chart.
  */
 const SwimLaneTooltip =
-  (fieldName?: string): FC<{ values: TooltipValue[] }> =>
+  (fieldName?: string): CustomTooltip =>
   ({ values }) => {
     const tooltipData: TooltipValue[] = [];
 

x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx

@@ -17,7 +17,7 @@ import {
   Tooltip,
   XYChartElementEvent,
   TooltipContainer,
-  TooltipInfo,
+  CustomTooltip,
 } from '@elastic/charts';
 import { EuiPanel } from '@elastic/eui';
 import { keyBy } from 'lodash';
@@ -57,7 +57,7 @@ export function StackedBarChart({
 
   const { chartsBaseTheme, chartsTheme } = useProfilingChartsTheme();
 
-  function CustomTooltipWithSubChart(props: TooltipInfo) {
+  const CustomTooltipWithSubChart: CustomTooltip = () => {
     if (!highlightedSample) {
       return null;
     }
@@ -90,7 +90,7 @@ export function StackedBarChart({
         </EuiPanel>
       </TooltipContainer>
     );
-  }
+  };
 
   return (
     <Chart size={{ height }}>

x-pack/plugins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo, useCallback } from 'react';
-import type { TooltipValue } from '@elastic/charts';
+import type { TooltipHeaderFormatter } from '@elastic/charts';
 import {
   Chart,
   LineSeries,
@@ -80,8 +80,8 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
   const timeZone = useTimeZone();
 
   const dataTimeFormatter = useMemo(() => histogramDateTimeFormatter([from, to]), [from, to]);
-  const headerFormatter = useCallback(
-    (tooltip: TooltipValue) => <PreferenceFormattedDate value={tooltip.value} />,
+  const headerFormatter = useCallback<TooltipHeaderFormatter>(
+    ({ value }) => <PreferenceFormattedDate value={value} />,
     []
   );
 

x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx

@@ -16,8 +16,8 @@ import {
   ScaleType,
   Settings,
   TickFormatter,
-  TooltipInfo,
   TooltipContainer,
+  CustomTooltip,
 } from '@elastic/charts';
 import { useEuiTheme } from '@elastic/eui';
 import { useChartTheme } from '../../../../../../hooks/use_chart_theme';
@@ -36,7 +36,7 @@ const getChartHeight = (data: WaterfallData): number => {
   return noOfXBars * BAR_HEIGHT;
 };
 
-const Tooltip = (tooltipInfo: TooltipInfo) => {
+const Tooltip: CustomTooltip = (tooltipInfo) => {
   const { data, sidebarItems } = useWaterfallContext();
   return useMemo(() => {
     const sidebarItem = sidebarItems?.find((item) => item.index === tooltipInfo.header?.value);

x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx

@@ -16,8 +16,8 @@ import {
   ScaleType,
   Settings,
   TickFormatter,
-  TooltipInfo,
   TooltipContainer,
+  CustomTooltip,
 } from '@elastic/charts';
 import { BAR_HEIGHT } from './constants';
 import { useChartTheme } from '../../../../../hooks/use_chart_theme';
@@ -34,7 +34,7 @@ const getChartHeight = (data: WaterfallData): number => {
   return noOfXBars * BAR_HEIGHT;
 };
 
-const Tooltip = (tooltipInfo: TooltipInfo) => {
+const Tooltip: CustomTooltip = (tooltipInfo) => {
   const { data, sidebarItems } = useWaterfallContext();
   return useMemo(() => {
     const sidebarItem = sidebarItems?.find((item) => item.index === tooltipInfo.header?.value);

yarn.lock

@@ -1469,10 +1469,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@55.0.0":
-  version "55.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-55.0.0.tgz#df9a4e9b0a84a613f103011d99f120cb528c4dc9"
-  integrity sha512-a4UIieTi04CPHxfwztDe36xoPFkp+I4tRPXWXobv/aG/zTd4AwruRyL981RiV2Tv8Mrc5jpCJFgfadNoPrL3pg==
+"@elastic/charts@57.0.1":
+  version "57.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-57.0.1.tgz#c48209f11be8984310dd366f8ead6d8c04720402"
+  integrity sha512-+wVSMjZIk5oAfslRKpcmpVGgT4qbf3IGtp4rQEUVTIMAJiYv6m5optVmQvg+n/JkR9/k/SVobtW1WylIKzQi9w==
   dependencies:
     "@popperjs/core" "^2.4.0"
     bezier-easing "^2.1.0"