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](elastic/elastic-charts#2035)) ([9711233](elastic/elastic-charts@9711233)) * **deps:** update dependency @elastic/eui to ^77.2.0 ([#2032](elastic/elastic-charts#2032)) ([93cadcb](elastic/elastic-charts@93cadcb)) * **deps:** update dependency @elastic/eui to v78 ([#2038](elastic/elastic-charts#2038)) ([3feff2c](elastic/elastic-charts@3feff2c)) * **deps:** update dependency @elastic/eui to v79 ([#2042](elastic/elastic-charts#2042)) ([8015830](elastic/elastic-charts@8015830)) * **deps:** update dependency @elastic/eui to v80 ([#2047](elastic/elastic-charts#2047)) ([e6042f3](elastic/elastic-charts@e6042f3)) * **heatmap:** brushing selection values ([#2028](elastic/elastic-charts#2028)) ([6a877b4](elastic/elastic-charts@6a877b4)) * **heatmap:** wrong axes labels on hover ([#2033](elastic/elastic-charts#2033)) ([045fb03](elastic/elastic-charts@045fb03)) ### [`v57.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#5700-httpsgithubcomelasticelastic-chartscomparev5600v5700-2023-04-19) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/82f67501967a1fad80253889462e3aaac724e060...v57.0.0) ##### Code Refactoring - enable `noUncheckedIndexedAccess` ([#2006](https://togithub.com/elastic/elastic-charts/issues/2006)) ([f446cca](https://togithub.com/elastic/elastic-charts/commit/f446cca1691bbe5d7608845b65ea555f74e0f6af)) ##### 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](https://togithub.com/elastic/elastic-charts/commit/95176e14294b36fce983f53c6c5f278da24f50b1)) - **deps:** update dependency [@elastic/eui](https://togithub.com/elastic/eui) to v77 ([#2018](https://togithub.com/elastic/elastic-charts/issues/2018)) ([c079730](https://togithub.com/elastic/elastic-charts/commit/c079730dd849c34f71608df36938560566ba19d3)) - **interactions:** brushing over origin coordinates ([#2013](https://togithub.com/elastic/elastic-charts/issues/2013)) ([937feb0](https://togithub.com/elastic/elastic-charts/commit/937feb0fcf1a11c473e45dfb0da36443660e98be)) - **tooltip:** custom tooltip header context ([#1989](https://togithub.com/elastic/elastic-charts/issues/1989)) ([1e5b861](https://togithub.com/elastic/elastic-charts/commit/1e5b86106ff4c72e5a59b074e0472023ecc68164)) ##### Features - **metric:** trend with string value ([#2011](https://togithub.com/elastic/elastic-charts/issues/2011)) ([91d7695](https://togithub.com/elastic/elastic-charts/commit/91d76957d88d25e93904f73b845c47d411f4ce32)) ##### 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 <[email protected]> Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]> Co-authored-by: Nick Partridge <[email protected]>
elastic · Jun 6, 2023 · be24483 · be24483
1 parent 531129b
commit be24483
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 47 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": "55.0.0",
+    "@elastic/charts": "57.0.1",
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.4.0",

diff --git a/...components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx b/...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

diff --git a/.../plugins/infra/public/alerting/common/criterion_preview_chart/criterion_preview_chart.tsx b/.../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;

diff --git a/...ublic/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx b/...ublic/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 (

diff --git a/...ages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx b/...ages/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);

diff --git 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;

diff --git 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]
     ),
   };

diff --git 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]
     ),
   };

diff --git 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[] = [];
 

diff --git 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 }}>

diff --git a/...ins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx b/...ins/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} />,
     []
   );
 

diff --git a/...etics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx b/...etics/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);

diff --git a/.../legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx b/.../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);

diff --git 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"