Update dependency @elastic/charts to v19.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/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]