Update dependency @elastic/charts to v19.1.2 (#64759)

* build: upgrade @elastic/charts to 19.0.0

* refactor: onBrushEnd breaking changes

* fix: missing onBrushEnd argument changes

* fix: update ech to 19.1.1

* fix: lens onBrushEnd breaking changes

* update to 19.1.2

package.json

@@ -122,7 +122,7 @@
     "@babel/core": "^7.9.0",
     "@babel/register": "^7.9.0",
     "@elastic/apm-rum": "^5.1.1",
-    "@elastic/charts": "18.4.2",
+    "@elastic/charts": "19.1.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.8.0",
     "@elastic/eui": "22.3.0",

packages/kbn-ui-shared-deps/package.json

@@ -9,7 +9,7 @@
     "kbn:watch": "node scripts/build --watch"
   },
   "dependencies": {
-    "@elastic/charts": "18.4.2",
+    "@elastic/charts": "19.1.2",
     "@elastic/eui": "22.3.0",
     "@kbn/i18n": "1.0.0",
     "abortcontroller-polyfill": "^1.4.0",

src/plugins/discover/public/application/angular/directives/histogram.tsx

@@ -39,6 +39,7 @@ import {
   TooltipType,
   ElementClickListener,
   XYChartElementEvent,
+  BrushEndListener,
 } from '@elastic/charts';
 
 import { i18n } from '@kbn/i18n';
@@ -143,13 +144,12 @@ export class DiscoverHistogram extends Component<DiscoverHistogramProps, Discove
     }
   }
 
-  public onBrushEnd = (min: number, max: number) => {
-    const range = {
-      from: min,
-      to: max,
-    };
-
-    this.props.timefilterUpdateHandler(range);
+  public onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [from, to] = x;
+    this.props.timefilterUpdateHandler({ from, to });
   };
 
   public onElementClick = (xInterval: number): ElementClickListener => ([elementData]) => {

src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js

@@ -100,13 +100,21 @@ export const TimeSeries = ({
   const { colors } = getChartsSetup();
   colors.mappedColors.mapKeys(series.filter(({ color }) => !color).map(({ label }) => label));
 
+  const onBrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [min, max] = x;
+    onBrush(min, max);
+  };
+
   return (
     <Chart ref={chartRef} renderer="canvas" className={classes}>
       <Settings
         showLegend={legend}
         showLegendExtra={true}
         legendPosition={legendPosition}
-        onBrushEnd={onBrush}
+        onBrushEnd={onBrushEndListener}
         animateData={false}
         onPointerUpdate={handleCursorUpdate}
         theme={

x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/chart.tsx

@@ -15,6 +15,7 @@ import {
   LIGHT_THEME,
   DARK_THEME,
   RectAnnotation,
+  BrushEndListener,
 } from '@elastic/charts';
 import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
@@ -53,8 +54,12 @@ export const AnomaliesChart: React.FunctionComponent<{
     [dateFormat]
   );
 
-  const handleBrushEnd = useCallback(
-    (startTime: number, endTime: number) => {
+  const handleBrushEnd = useCallback<BrushEndListener>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [startTime, endTime] = x;
       setTimeRange({
         endTime,
         startTime,

x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx

@@ -11,6 +11,7 @@ import {
   niceTimeFormatter,
   Settings,
   TooltipValue,
+  BrushEndListener,
   LIGHT_THEME,
   DARK_THEME,
 } from '@elastic/charts';
@@ -43,8 +44,12 @@ export const LogEntryRateBarChart: React.FunctionComponent<{
     [dateFormat]
   );
 
-  const handleBrushEnd = useCallback(
-    (startTime: number, endTime: number) => {
+  const handleBrushEnd = useCallback<BrushEndListener>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [startTime, endTime] = x;
       setTimeRange({
         endTime,
         startTime,

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

@@ -6,7 +6,15 @@
 import React, { useCallback, useMemo } from 'react';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
-import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts';
+import {
+  Axis,
+  Chart,
+  niceTimeFormatter,
+  Position,
+  Settings,
+  TooltipValue,
+  BrushEndListener,
+} from '@elastic/charts';
 import { EuiPageContentBody } from '@elastic/eui';
 import { getChartTheme } from '../../metrics_explorer/components/helpers/get_chart_theme';
 import { SeriesChart } from './series_chart';
@@ -45,8 +53,12 @@ export const ChartSectionVis = ({
     () => (metric != null ? niceTimeFormatter(getMaxMinTimestamp(metric)) : undefined),
     [metric]
   );
-  const handleTimeChange = useCallback(
-    (from: number, to: number) => {
+  const handleTimeChange = useCallback<BrushEndListener>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [from, to] = x;
       if (onChangeRangeTime) {
         if (isLiveStreaming && stopLiveStreaming) {
           stopLiveStreaming();

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

@@ -7,7 +7,15 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { EuiTitle, EuiToolTip, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipValue } from '@elastic/charts';
+import {
+  Axis,
+  Chart,
+  niceTimeFormatter,
+  Position,
+  Settings,
+  TooltipValue,
+  BrushEndListener,
+} from '@elastic/charts';
 import { first, last } from 'lodash';
 import moment from 'moment';
 import { MetricsExplorerSeries } from '../../../../../common/http_api/metrics_explorer';
@@ -58,7 +66,11 @@ export const MetricsExplorerChart = ({
   const isDarkMode = useUiSetting<boolean>('theme:darkMode');
   const { metrics } = options;
   const [dateFormat] = useKibanaUiSetting('dateFormat');
-  const handleTimeChange = (from: number, to: number) => {
+  const handleTimeChange: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [from, to] = x;
     onTimeChange(moment(from).toISOString(), moment(to).toISOString());
   };
   const dateFormatter = useMemo(

x-pack/plugins/infra/types/eui_experimental.d.ts

@@ -1,70 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-declare module '@elastic/eui/lib/experimental' {
-  import { CommonProps } from '@elastic/eui/src/components/common';
-  export type EuiSeriesChartProps = CommonProps & {
-    xType?: string;
-    stackBy?: string;
-    statusText?: string;
-    yDomain?: number[];
-    showCrosshair?: boolean;
-    showDefaultAxis?: boolean;
-    enableSelectionBrush?: boolean;
-    crosshairValue?: number;
-    onSelectionBrushEnd?: (args: any) => void;
-    onCrosshairUpdate?: (crosshairValue: number) => void;
-    animateData?: boolean;
-    marginLeft?: number;
-  };
-  export const EuiSeriesChart: React.FC<EuiSeriesChartProps>;
-
-  type EuiSeriesProps = CommonProps & {
-    data: Array<{ x: number; y: number; y0?: number }>;
-    lineSize?: number;
-    name: string;
-    color?: string;
-    marginLeft?: number;
-  };
-  export const EuiLineSeries: React.FC<EuiSeriesProps>;
-  export const EuiAreaSeries: React.FC<EuiSeriesProps>;
-  export const EuiBarSeries: React.FC<EuiSeriesProps>;
-
-  type EuiYAxisProps = CommonProps & {
-    tickFormat: (value: number) => string;
-    marginLeft?: number;
-  };
-  export const EuiYAxis: React.FC<EuiYAxisProps>;
-
-  type EuiXAxisProps = CommonProps & {
-    tickFormat?: (value: number) => string;
-    marginLeft?: number;
-  };
-  export const EuiXAxis: React.FC<EuiXAxisProps>;
-
-  export interface EuiDataPoint {
-    seriesIndex: number;
-    x: number;
-    y: number;
-    originalValues: {
-      x: number;
-      y: number;
-      x0?: number;
-    };
-  }
-
-  export interface EuiFormattedValue {
-    title: any;
-    value: any;
-  }
-  type EuiCrosshairXProps = CommonProps & {
-    marginLeft?: number;
-    seriesNames: string[];
-    titleFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue | undefined;
-    itemsFormat?: (dataPoints: EuiDataPoint[]) => EuiFormattedValue[];
-  };
-  export const EuiCrosshairX: React.FC<EuiCrosshairXProps>;
-}

x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx

@@ -609,7 +609,7 @@ describe('xy_expression', () => {
       wrapper
         .find(Settings)
         .first()
-        .prop('onBrushEnd')!(1585757732783, 1585758880838);
+        .prop('onBrushEnd')!({ x: [1585757732783, 1585758880838] });
 
       expect(executeTriggerActions).toHaveBeenCalledWith('SELECT_RANGE_TRIGGER', {
         data: {

x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx

@@ -277,7 +277,11 @@ export function XYChart({
         theme={chartTheme}
         rotation={shouldRotate ? 90 : 0}
         xDomain={xDomain}
-        onBrushEnd={(min: number, max: number) => {
+        onBrushEnd={({ x }) => {
+          if (!x) {
+            return;
+          }
+          const [min, max] = x;
           // in the future we want to make it also for histogram
           if (!xAxisColumn || !isTimeViz) {
             return;

x-pack/plugins/siem/public/components/charts/common.tsx

@@ -15,6 +15,7 @@ import {
   SettingsSpecProps,
   TickFormatter,
   Position,
+  BrushEndListener,
 } from '@elastic/charts';
 import React, { useMemo } from 'react';
 import styled from 'styled-components';
@@ -27,7 +28,7 @@ export const defaultChartWidth = '100%';
 const chartDefaultRotation: Rotation = 0;
 const chartDefaultRendering: Rendering = 'canvas';
 
-export type UpdateDateRange = (min: number, max: number) => void;
+export type UpdateDateRange = BrushEndListener;
 
 export interface ChartData {
   x?: number | string | null;

x-pack/plugins/siem/public/components/matrix_histogram/index.tsx

@@ -108,11 +108,15 @@ export const MatrixHistogramComponent: React.FC<MatrixHistogramProps &
         from: startDate,
         legendPosition,
         to: endDate,
-        onBrushEnd: (min: number, max: number) => {
+        onBrushEnd: ({ x }) => {
+          if (!x) {
+            return;
+          }
+          const [from, to] = x;
           dispatchSetAbsoluteRangeDatePicker({
             id: setAbsoluteRangeDatePickerTarget,
-            from: min,
-            to: max,
+            from,
+            to,
           });
         },
         yTickFormatter,

x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/index.tsx

@@ -12,6 +12,7 @@ import { isEmpty } from 'lodash/fp';
 import uuid from 'uuid';
 
 import { DEFAULT_NUMBER_FORMAT } from '../../../../../common/constants';
+import { UpdateDateRange } from '../../../../components/charts/common';
 import { LegendItem } from '../../../../components/charts/draggable_legend_item';
 import { escapeDataProviderId } from '../../../../components/drag_and_drop/helpers';
 import { HeaderSection } from '../../../../components/header_section';
@@ -70,7 +71,7 @@ interface SignalsHistogramPanelProps {
   stackByOptions?: SignalsHistogramOption[];
   title?: string;
   to: number;
-  updateDateRange: (min: number, max: number) => void;
+  updateDateRange: UpdateDateRange;
 }
 
 const getHistogramOption = (fieldName: string): MatrixHistogramOption => ({

x-pack/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx

@@ -15,7 +15,7 @@ import {
 import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
-import { useTheme } from '../../../../components/charts/common';
+import { useTheme, UpdateDateRange } from '../../../../components/charts/common';
 import { histogramDateTimeFormatter } from '../../../../components/utils';
 import { DraggableLegend } from '../../../../components/charts/draggable_legend';
 import { LegendItem } from '../../../../components/charts/draggable_legend_item';
@@ -32,7 +32,7 @@ interface HistogramSignalsProps {
   loading: boolean;
   to: number;
   data: HistogramData[];
-  updateDateRange: (min: number, max: number) => void;
+  updateDateRange: UpdateDateRange;
 }
 export const SignalsHistogram = React.memo<HistogramSignalsProps>(
   ({

x-pack/plugins/siem/public/pages/detection_engine/detection_engine.tsx

@@ -13,6 +13,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { GlobalTime } from '../../containers/global_time';
 import { indicesExistOrDataTemporarilyUnavailable, WithSource } from '../../containers/source';
 import { AlertsTable } from '../../components/alerts_viewer/alerts_table';
+import { UpdateDateRange } from '../../components/charts/common';
 import { FiltersGlobal } from '../../components/filters_global';
 import {
   getDetectionEngineTabUrl,
@@ -77,8 +78,12 @@ export const DetectionEnginePageComponent: React.FC<PropsFromRedux> = ({
 
   const [lastSignals] = useSignalInfo({});
 
-  const updateDateRangeCallback = useCallback(
-    (min: number, max: number) => {
+  const updateDateRangeCallback = useCallback<UpdateDateRange>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [min, max] = x;
       setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
     },
     [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/detection_engine/rules/details/index.tsx

@@ -22,6 +22,7 @@ import { Redirect, useParams } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
 import { connect, ConnectedProps } from 'react-redux';
 
+import { UpdateDateRange } from '../../../../components/charts/common';
 import { FiltersGlobal } from '../../../../components/filters_global';
 import { FormattedDate } from '../../../../components/formatted_date';
 import {
@@ -209,8 +210,12 @@ export const RuleDetailsPageComponent: FC<PropsFromRedux> = ({
     signalIndexName,
   ]);
 
-  const updateDateRangeCallback = useCallback(
-    (min: number, max: number) => {
+  const updateDateRangeCallback = useCallback<UpdateDateRange>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [min, max] = x;
       setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
     },
     [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/hosts/details/details_tabs.tsx

@@ -7,6 +7,7 @@
 import React, { useCallback } from 'react';
 import { Route, Switch } from 'react-router-dom';
 
+import { UpdateDateRange } from '../../../components/charts/common';
 import { scoreIntervalToDateTime } from '../../../components/ml/score/score_interval_to_datetime';
 import { Anomaly } from '../../../components/ml/types';
 import { HostsTableType } from '../../../store/hosts/model';
@@ -50,8 +51,12 @@ export const HostDetailsTabs = React.memo<HostDetailsTabsProps>(
       [setAbsoluteRangeDatePicker]
     );
 
-    const updateDateRange = useCallback(
-      (min: number, max: number) => {
+    const updateDateRange = useCallback<UpdateDateRange>(
+      ({ x }) => {
+        if (!x) {
+          return;
+        }
+        const [min, max] = x;
         setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
       },
       [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/hosts/details/index.tsx

@@ -9,6 +9,7 @@ import React, { useEffect, useCallback, useMemo } from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 
+import { UpdateDateRange } from '../../../components/charts/common';
 import { FiltersGlobal } from '../../../components/filters_global';
 import { HeaderPage } from '../../../components/header_page';
 import { LastEventTime } from '../../../components/last_event_time';
@@ -68,8 +69,12 @@ const HostDetailsComponent = React.memo<HostDetailsProps & PropsFromRedux>(
       detailName,
     ]);
     const getFilters = () => [...hostDetailsPageFilters, ...filters];
-    const narrowDateRange = useCallback(
-      (min: number, max: number) => {
+    const narrowDateRange = useCallback<UpdateDateRange>(
+      ({ x }) => {
+        if (!x) {
+          return;
+        }
+        const [min, max] = x;
         setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
       },
       [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/hosts/hosts.tsx

@@ -10,6 +10,7 @@ import { connect, ConnectedProps } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 
 import { useParams } from 'react-router-dom';
+import { UpdateDateRange } from '../../components/charts/common';
 import { FiltersGlobal } from '../../components/filters_global';
 import { HeaderPage } from '../../components/header_page';
 import { LastEventTime } from '../../components/last_event_time';
@@ -61,8 +62,12 @@ export const HostsComponent = React.memo<HostsComponentProps & PropsFromRedux>(
       }
       return filters;
     }, [tabName, filters]);
-    const narrowDateRange = useCallback(
-      (min: number, max: number) => {
+    const narrowDateRange = useCallback<UpdateDateRange>(
+      ({ x }) => {
+        if (!x) {
+          return;
+        }
+        const [min, max] = x;
         setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
       },
       [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/hosts/hosts_tabs.tsx

@@ -13,6 +13,7 @@ import { Anomaly } from '../../components/ml/types';
 import { HostsTableType } from '../../store/hosts/model';
 import { AnomaliesQueryTabBody } from '../../containers/anomalies/anomalies_query_tab_body';
 import { AnomaliesHostTable } from '../../components/ml/tables/anomalies_host_table';
+import { UpdateDateRange } from '../../components/charts/common';
 
 import {
   HostsQueryTabBody,
@@ -55,8 +56,12 @@ export const HostsTabs = memo<HostsTabsProps>(
         },
         [setAbsoluteRangeDatePicker]
       ),
-      updateDateRange: useCallback(
-        (min: number, max: number) => {
+      updateDateRange: useCallback<UpdateDateRange>(
+        ({ x }) => {
+          if (!x) {
+            return;
+          }
+          const [min, max] = x;
           setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
         },
         [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/network/navigation/network_routes.tsx

@@ -22,6 +22,7 @@ import { NetworkRoutesProps, NetworkRouteType } from './types';
 import { TlsQueryTabBody } from './tls_query_tab_body';
 import { Anomaly } from '../../../components/ml/types';
 import { NetworkAlertsQueryTabBody } from './alerts_query_tab_body';
+import { UpdateDateRange } from '../../../components/charts/common';
 
 export const NetworkRoutes = React.memo<NetworkRoutesProps>(
   ({
@@ -46,8 +47,12 @@ export const NetworkRoutes = React.memo<NetworkRoutesProps>(
       },
       [setAbsoluteRangeDatePicker]
     );
-    const updateDateRange = useCallback(
-      (min: number, max: number) => {
+    const updateDateRange = useCallback<UpdateDateRange>(
+      ({ x }) => {
+        if (!x) {
+          return;
+        }
+        const [min, max] = x;
         setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
       },
       [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/network/network.tsx

@@ -11,6 +11,7 @@ import { useParams } from 'react-router-dom';
 import { StickyContainer } from 'react-sticky';
 
 import { esQuery } from '../../../../../../src/plugins/data/public';
+import { UpdateDateRange } from '../../components/charts/common';
 import { EmbeddedMap } from '../../components/embeddables/embedded_map';
 import { FiltersGlobal } from '../../components/filters_global';
 import { HeaderPage } from '../../components/header_page';
@@ -61,8 +62,12 @@ const NetworkComponent = React.memo<NetworkComponentProps & PropsFromRedux>(
       return filters;
     }, [tabName, filters]);
 
-    const narrowDateRange = useCallback(
-      (min: number, max: number) => {
+    const narrowDateRange = useCallback<UpdateDateRange>(
+      ({ x }) => {
+        if (!x) {
+          return;
+        }
+        const [min, max] = x;
         setAbsoluteRangeDatePicker({ id: 'global', from: min, to: max });
       },
       [setAbsoluteRangeDatePicker]

x-pack/plugins/siem/public/pages/overview/signals_by_category/index.tsx

@@ -14,6 +14,7 @@ import { Filter, IIndexPattern, Query } from '../../../../../../../src/plugins/d
 import { inputsModel } from '../../../store';
 import { InputsModelId } from '../../../store/inputs/constants';
 import * as i18n from '../translations';
+import { UpdateDateRange } from '../../../components/charts/common';
 
 const DEFAULT_QUERY: Query = { query: '', language: 'kuery' };
 const DEFAULT_STACK_BY = 'signal.rule.threat.tactic.name';
@@ -52,8 +53,12 @@ const SignalsByCategoryComponent: React.FC<Props> = ({
   to,
 }) => {
   const { signalIndexName } = useSignalIndex();
-  const updateDateRangeCallback = useCallback(
-    (min: number, max: number) => {
+  const updateDateRangeCallback = useCallback<UpdateDateRange>(
+    ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [min, max] = x;
       setAbsoluteRangeDatePicker({ id: setAbsoluteRangeDatePickerTarget, from: min, to: max });
     },
     [setAbsoluteRangeDatePicker]

x-pack/plugins/uptime/public/components/common/charts/duration_chart.tsx

@@ -8,7 +8,15 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import moment from 'moment';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { Axis, Chart, Position, timeFormatter, Settings, SeriesIdentifier } from '@elastic/charts';
+import {
+  Axis,
+  Chart,
+  Position,
+  timeFormatter,
+  Settings,
+  SeriesIdentifier,
+  BrushEndListener,
+} from '@elastic/charts';
 import { getChartDateLabel } from '../../../lib/helper';
 import { LocationDurationLine } from '../../../../common/types';
 import { DurationLineSeriesList } from './duration_line_series_list';
@@ -51,7 +59,11 @@ export const DurationChartComponent = ({
 
   const [hiddenLegends, setHiddenLegends] = useState<string[]>([]);
 
-  const onBrushEnd = (minX: number, maxX: number) => {
+  const onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [minX, maxX] = x;
     updateUrlParams({
       dateRangeStart: moment(minX).toISOString(),
       dateRangeEnd: moment(maxX).toISOString(),

x-pack/plugins/uptime/public/components/common/charts/monitor_bar_series.tsx

@@ -12,6 +12,7 @@ import {
   Settings,
   Position,
   timeFormatter,
+  BrushEndListener,
 } from '@elastic/charts';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
@@ -42,7 +43,11 @@ export const MonitorBarSeries = ({ histogramSeries }: MonitorBarSeriesProps) =>
   const [getUrlParams, updateUrlParams] = useUrlParams();
   const { absoluteDateRangeStart, absoluteDateRangeEnd } = getUrlParams();
 
-  const onBrushEnd = (min: number, max: number) => {
+  const onBrushEnd: BrushEndListener = ({ x }) => {
+    if (!x) {
+      return;
+    }
+    const [min, max] = x;
     updateUrlParams({
       dateRangeStart: moment(min).toISOString(),
       dateRangeEnd: moment(max).toISOString(),

x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx

@@ -4,7 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Axis, BarSeries, Chart, Position, Settings, timeFormatter } from '@elastic/charts';
+import {
+  Axis,
+  BarSeries,
+  Chart,
+  Position,
+  Settings,
+  timeFormatter,
+  BrushEndListener,
+} from '@elastic/charts';
 import { EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
@@ -79,7 +87,11 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
       defaultMessage: 'Up',
     });
 
-    const onBrushEnd = (min: number, max: number) => {
+    const onBrushEnd: BrushEndListener = ({ x }) => {
+      if (!x) {
+        return;
+      }
+      const [min, max] = x;
       updateUrlParams({
         dateRangeStart: moment(min).toISOString(),
         dateRangeEnd: moment(max).toISOString(),

yarn.lock

@@ -1262,10 +1262,10 @@
   dependencies:
     "@elastic/apm-rum-core" "^5.2.0"
 
-"@elastic/charts@18.4.2":
-  version "18.4.2"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-18.4.2.tgz#7d3c40dca8a7a701fb7227382191b84d36d8b32a"
-  integrity sha512-fmEDRUeFEtVWGurafhp/5bHBypOjdXiRXY074tCqnez43hA2iA4v1KrZL8tPFlMePgc/kpZf9wb8aEwxlfWumw==
+"@elastic/charts@19.1.2":
+  version "19.1.2"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-19.1.2.tgz#b78730eb11bdcb4fcf17b213411bc48ae9cb770d"
+  integrity sha512-Qu4Sgp9Uh5Ic7Te3mCi19wlt8qw9Io8+MmCwpeyUi0TeGCPEIrpHp+aL9JkP+qTQJk+oCrJcjeXo2MhzcwOdCw==
   dependencies:
     classnames "^2.2.6"
     d3-array "^1.2.4"