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

[![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) | [`55.0.0` -> `57.0.1`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/55.0.0/57.0.1) | [![age](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/57.0.1/age-slim)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/57.0.1/adoption-slim)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/57.0.1/compatibility-slim/55.0.0)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/57.0.1/confidence-slim/55.0.0)](https://docs.renovatebot.com/merge-confidence/) | --- ### Bug fixes - Fixes #148872 relating to multilayer time axes. - Fixes #158580 relating to heatmap selection with small multiples. --- ### Release Notes <details> <summary>elastic/elastic-charts</summary> ### [`v57.0.1`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#5700-httpsgithubcomelasticelastic-chartscomparev5700v5701-2023-04-19) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v57.0.0...v57.0.1) ##### Bug Fixes * **axes:** start of week label on multilayer time axis ([#2035](https://github.com/elastic/elastic-charts/issues/2035)) ([9711233](9711233cbf)) * **deps:** update dependency @elastic/eui to ^77.2.0 ([#2032](https://github.com/elastic/elastic-charts/issues/2032)) ([93cadcb](93cadcb7ae)) * **deps:** update dependency @elastic/eui to v78 ([#2038](https://github.com/elastic/elastic-charts/issues/2038)) ([3feff2c](3feff2c5bc)) * **deps:** update dependency @elastic/eui to v79 ([#2042](https://github.com/elastic/elastic-charts/issues/2042)) ([8015830](8015830f20)) * **deps:** update dependency @elastic/eui to v80 ([#2047](https://github.com/elastic/elastic-charts/issues/2047)) ([e6042f3](e6042f3da3)) * **heatmap:** brushing selection values ([#2028](https://github.com/elastic/elastic-charts/issues/2028)) ([6a877b4](6a877b431e)) * **heatmap:** wrong axes labels on hover ([#2033](https://github.com/elastic/elastic-charts/issues/2033)) ([045fb03](045fb037a9)) ### [`v57.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#5700-httpsgithubcomelasticelastic-chartscomparev5600v5700-2023-04-19) [Compare Source](82f6750196...v57.0.0) ##### Code Refactoring - enable `noUncheckedIndexedAccess` ([#2006](https://togithub.com/elastic/elastic-charts/issues/2006)) ([f446cca](f446cca169)) ##### BREAKING CHANGES - Enables stricter type option in src and could have unexpected changes. This release is meant to serve as a clean break in case any issues arise. ### [`v56.0.1`](https://togithub.com/elastic/elastic-charts/compare/v56.0.0...82f67501967a1fad80253889462e3aaac724e060) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v56.0.0...82f67501967a1fad80253889462e3aaac724e060) ### [`v56.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#5600-httpsgithubcomelasticelastic-chartscomparev5500v5600-2023-04-18) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v55.0.0...v56.0.0) ##### Bug Fixes - **deps:** update dependency [@elastic/eui](https://togithub.com/elastic/eui) to ^76.4.0 ([#2008](https://togithub.com/elastic/elastic-charts/issues/2008)) ([95176e1](95176e1429)) - **deps:** update dependency [@elastic/eui](https://togithub.com/elastic/eui) to v77 ([#2018](https://togithub.com/elastic/elastic-charts/issues/2018)) ([c079730](c079730dd8)) - **interactions:** brushing over origin coordinates ([#2013](https://togithub.com/elastic/elastic-charts/issues/2013)) ([937feb0](937feb0fcf)) - **tooltip:** custom tooltip header context ([#1989](https://togithub.com/elastic/elastic-charts/issues/1989)) ([1e5b861](1e5b86106f)) ##### Features - **metric:** trend with string value ([#2011](https://togithub.com/elastic/elastic-charts/issues/2011)) ([91d7695](91d76957d8)) ##### BREAKING CHANGES - **tooltip:** The `header` property of `TooltipInfo` type was simplified to `PointerValue` as to include only relevant properties. This change is propagated to all other types using `header` as a `TooltipValue`. The `TooltipInfo.values` used to conditionally pass only highlighted `TooltipValue`s when using a `customTooltip` and now *always* passes all `values`. </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 <nicholas.partridge@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co> Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>
2025-04-24 17:59:23 -04:00 · 2023-06-05 18:11:56 -07:00 · 2023-06-05 18:11:56 -07:00 · be244835e6
commit be244835e6
parent 531129b945
14 changed files with 39 additions and 47 deletions
--- 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": "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",
--- a/x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx
+++ b/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
--- a/x-pack/plugins/infra/public/alerting/common/criterion_preview_chart/criterion_preview_chart.tsx
+++ b/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;
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx
+++ b/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 (
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx
+++ b/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);
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
+++ b/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;
--- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
+++ b/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]
    ),
  };
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx
+++ b/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]
    ),
  };
--- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
+++ b/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[] = [];

--- a/x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx
+++ b/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 }}>
--- a/x-pack/plugins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx
+++ b/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} />,
    []
  );

--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx
+++ b/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);
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx
+++ b/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);
--- a/yarn.lock
+++ b/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"