refactor: onBrushEnd breaking changes

Author: markov00

src/legacy/core_plugins/kibana/public/discover/np_ready/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/legacy/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/legacy/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/legacy/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(),

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(