Update dependency @elastic/charts to v36 (master)

api_docs/charts.json

@@ -229,7 +229,7 @@
           ", xAccessor: string | number | ",
           "AccessorFn",
           ") => ({ x: selectedRange }: ",
-          "XYBrushArea",
+          "XYBrushEvent",
           ") => ",
           {
             "pluginId": "charts",

package.json

@@ -94,7 +94,7 @@
     "@babel/runtime": "^7.12.5",
     "@elastic/apm-rum": "^5.9.1",
     "@elastic/apm-rum-react": "^1.3.1",
-    "@elastic/charts": "34.2.1",
+    "@elastic/charts": "36.0.0",
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.20",
     "@elastic/ems-client": "7.15.0",

renovate.json5

@@ -37,7 +37,7 @@
       {
         groupName: '@elastic/charts',
         packageNames: ['@elastic/charts'],
-        reviewers: ['markov00', 'nickofthyme'],
+        reviewers: ['team:datavis'],
         matchBaseBranches: ['master'],
         labels: ['release_note:skip', 'v8.0.0', 'v7.16.0', 'auto-backport'],
         enabled: true,

src/plugins/charts/public/static/utils/transform_click_event.ts

@@ -9,7 +9,7 @@
 import {
   XYChartSeriesIdentifier,
   GeometryValue,
-  XYBrushArea,
+  XYBrushEvent,
   Accessor,
   AccessorFn,
   Datum,
@@ -261,7 +261,7 @@ export const getFilterFromSeriesFn =
  */
 export const getBrushFromChartBrushEventFn =
   (table: Datatable, xAccessor: Accessor | AccessorFn) =>
-  ({ x: selectedRange }: XYBrushArea): BrushTriggerEvent => {
+  ({ x: selectedRange }: XYBrushEvent): BrushTriggerEvent => {
     const [start, end] = selectedRange ?? [0, 0];
     const range: [number, number] = [start, end];
     const column = table.columns.findIndex(({ id }) => validateAccessorId(id, xAccessor));

src/plugins/vis_types/xy/public/vis_component.tsx

@@ -19,6 +19,7 @@ import {
   ScaleType,
   AccessorFn,
   Accessor,
+  XYBrushEvent,
 } from '@elastic/charts';
 
 import { compact } from 'lodash';
@@ -130,8 +131,8 @@ const VisComponent = (props: VisComponentProps) => {
       isInterval: boolean
     ): BrushEndListener | undefined => {
       if (xAccessor !== null && isInterval) {
-        return (brushArea) => {
-          const event = getBrushFromChartBrushEventFn(visData, xAccessor)(brushArea);
+        return (brushEvent) => {
+          const event = getBrushFromChartBrushEventFn(visData, xAccessor)(brushEvent as XYBrushEvent);
           props.fireEvent(event);
         };
       }
@@ -367,7 +368,7 @@ const VisComponent = (props: VisComponentProps) => {
             splitSeriesAccessors,
             splitChartColumnAccessor ?? splitChartRowAccessor
           )}
-          onBrushEnd={handleBrush(visData, xAccessor, 'interval' in config.aspects.x.params)}
+          onBrushEnd={handleBrush(visData, xAccessor, 'interval' in config.aspects.x.params) as BrushEndListener}
           onRenderChange={onRenderChange}
           legendAction={
             config.aspects.series && (config.aspects.series?.length ?? 0) > 0

x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx

@@ -21,6 +21,7 @@ import {
   LIGHT_THEME,
   Fit,
   Position,
+  XYBrushEvent,
 } from '@elastic/charts';
 import {
   EUI_CHARTS_THEME_DARK,
@@ -64,7 +65,7 @@ export function PageLoadDistChart({
   percentileRange,
 }: Props) {
   const [breakdownLoading, setBreakdownLoading] = useState(false);
-  const onBrushEnd: BrushEndListener = ({ x }) => {
+  const onBrushEnd = ({ x }: XYBrushEvent) => {
     if (!x) {
       return;
     }
@@ -100,7 +101,7 @@ export function PageLoadDistChart({
           <Settings
             baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
             theme={euiChartTheme.theme}
-            onBrushEnd={onBrushEnd}
+            onBrushEnd={onBrushEnd as BrushEndListener}
             tooltip={tooltipProps}
             showLegend
           />

x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useEffect } from 'react';
-import { BrushEndListener, XYBrushArea } from '@elastic/charts';
+import { BrushEndListener, BrushEvent } from '@elastic/charts';
 import {
   EuiBadge,
   EuiFlexGroup,
@@ -126,9 +126,7 @@ export function TransactionDistribution({
 
   const trackApmEvent = useUiTracker({ app: 'apm' });
 
-  const onTrackedChartSelection: BrushEndListener = (
-    brushArea: XYBrushArea
-  ) => {
+  const onTrackedChartSelection: BrushEndListener = (brushArea: BrushEvent) => {
     onChartSelection(brushArea);
     trackApmEvent({ metric: 'transaction_distribution_chart_selection' });
   };

x-pack/plugins/apm/public/components/app/transaction_details/trace_samples_tab.tsx

@@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n';
 
 import { TransactionDistribution } from './distribution';
 import type { TabContentProps } from './types';
+import { BrushEndListener } from '@elastic/charts';
 
 function TraceSamplesTab({
   selectSampleFromChartSelection,
@@ -21,7 +22,7 @@ function TraceSamplesTab({
 }: TabContentProps) {
   return (
     <TransactionDistribution
-      onChartSelection={selectSampleFromChartSelection}
+      onChartSelection={selectSampleFromChartSelection as BrushEndListener}
       onClearSelection={clearChartSelection}
       selection={
         sampleRangeFrom !== undefined && sampleRangeTo !== undefined

x-pack/plugins/apm/public/components/app/transaction_details/transaction_details_tabs.tsx

@@ -10,7 +10,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { omit } from 'lodash';
 import { useHistory } from 'react-router-dom';
 
-import { XYBrushArea } from '@elastic/charts';
+import { XYBrushEvent } from '@elastic/charts';
 import { EuiPanel, EuiSpacer, EuiTabs, EuiTab } from '@elastic/eui';
 
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
@@ -48,7 +48,7 @@ export function TransactionDetailsTabs() {
     environment,
   });
 
-  const selectSampleFromChartSelection = (selection: XYBrushArea) => {
+  const selectSampleFromChartSelection = (selection: XYBrushEvent) => {
     if (selection !== undefined) {
       const { x } = selection;
       if (Array.isArray(x)) {

x-pack/plugins/apm/public/components/app/transaction_details/types.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { XYBrushArea } from '@elastic/charts';
+import { XYBrushEvent } from '@elastic/charts';
 
 import type { TraceSample } from '../../../hooks/use_transaction_trace_samples_fetcher';
 
@@ -14,6 +14,6 @@ export interface TabContentProps {
   onFilter: () => void;
   sampleRangeFrom?: number;
   sampleRangeTo?: number;
-  selectSampleFromChartSelection: (selection: XYBrushArea) => void;
+  selectSampleFromChartSelection: (selection: XYBrushEvent) => void;
   traceSamples: TraceSample[];
 }

x-pack/plugins/apm/public/components/shared/charts/helper/helper.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { XYBrushArea } from '@elastic/charts';
+import { BrushEvent } from '@elastic/charts';
 import { History } from 'history';
 import { Coordinate, TimeSeries } from '../../../../../typings/timeseries';
 import { fromQuery, toQuery } from '../../Links/url_helpers';
@@ -14,7 +14,7 @@ export const onBrushEnd = ({
   x,
   history,
 }: {
-  x: XYBrushArea['x'];
+  x: BrushEvent['x'];
   history: History;
 }) => {
   if (x) {

x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx

@@ -19,6 +19,7 @@ import {
   Position,
   ScaleType,
   Settings,
+  XYBrushEvent,
   XYChartElementEvent,
 } from '@elastic/charts';
 import moment from 'moment';
@@ -91,7 +92,7 @@ export const DocumentCountChart: FC<Props> = ({
     [data]
   );
 
-  const onBrushEnd: BrushEndListener = ({ x }) => {
+  const onBrushEnd = ({ x }: XYBrushEvent) => {
     if (!x) {
       return;
     }
@@ -117,7 +118,7 @@ export const DocumentCountChart: FC<Props> = ({
           height: 120,
         }}
       >
-        <Settings xDomain={xDomain} onBrushEnd={onBrushEnd} onElementClick={onElementClick} />
+        <Settings xDomain={xDomain} onBrushEnd={onBrushEnd as BrushEndListener} onElementClick={onElementClick} />
         <Axis
           id="bottom"
           position={Position.Bottom}

x-pack/plugins/lens/public/heatmap_visualization/chart_component.tsx

@@ -10,7 +10,7 @@ import {
   Chart,
   ElementClickListener,
   Heatmap,
-  HeatmapBrushEvent,
+  BrushEvent,
   HeatmapElementEvent,
   HeatmapSpec,
   ScaleType,
@@ -221,7 +221,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
     onClickValue(context);
   }) as ElementClickListener;
 
-  const onBrushEnd = (e: HeatmapBrushEvent) => {
+  const onBrushEnd = (e: BrushEvent) => {
     const { x, y } = e;
 
     const xAxisFieldName = xAxisColumn.meta.field;
@@ -270,7 +270,6 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
   };
 
   const config: HeatmapSpec['config'] = {
-    onBrushEnd,
     grid: {
       stroke: {
         width:
@@ -338,6 +337,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = ({
             labelOptions: { maxLines: args.legend.shouldTruncate ? args.legend?.maxLines ?? 1 : 0 },
           },
         }}
+        onBrushEnd={onBrushEnd}
       />
       <Heatmap
         id={tableId}

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

@@ -28,15 +28,14 @@ import {
   CurveType,
   LegendPositionConfig,
   LabelOverflowConstraint,
+  XYBrushEvent,
 } from '@elastic/charts';
-import { I18nProvider } from '@kbn/i18n/react';
 import type {
   ExpressionRenderDefinition,
   Datatable,
   DatatableRow,
 } from 'src/plugins/expressions/public';
 import { IconType } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import { RenderMode } from 'src/plugins/expressions';
 import type { ILensInterpreterRenderHandlers, LensFilterEvent, LensBrushEvent } from '../types';
 import type { LensMultiTable, FormatFactory } from '../../common';
@@ -59,6 +58,8 @@ import { getAxesConfiguration, GroupsConfiguration, validateExtent } from './axe
 import { getColorAssignments } from './color_assignment';
 import { getXDomain, XyEndzones } from './x_domain';
 import { getLegendAction } from './get_legend_action';
+import { i18n } from '@kbn/i18n';
+import { I18nProvider } from '@kbn/i18n/react';
 import { ThresholdAnnotations } from './expression_thresholds';
 
 declare global {
@@ -457,7 +458,7 @@ export function XYChart({
     onClickValue(context);
   };
 
-  const brushHandler: BrushEndListener = ({ x }) => {
+  const brushHandler = ({ x }: XYBrushEvent) => {
     if (!x) {
       return;
     }
@@ -521,7 +522,7 @@ export function XYChart({
         allowBrushingLastHistogramBucket={Boolean(isTimeViz)}
         rotation={shouldRotate ? 90 : 0}
         xDomain={xDomain}
-        onBrushEnd={interactive ? brushHandler : undefined}
+        onBrushEnd={interactive ? brushHandler as BrushEndListener: undefined }
         onElementClick={interactive ? clickHandler : undefined}
         legendAction={getLegendAction(
           filteredLayers,

x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx

@@ -9,7 +9,7 @@ import React, { FC, Fragment, useCallback, memo } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
-import { XYBrushArea } from '@elastic/charts';
+import { XYBrushEvent, BrushEvent } from '@elastic/charts';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -57,7 +57,7 @@ export const CreateCalendar: FC<Props> = ({
   const { euiTheme } = useCurrentEuiTheme();
 
   const onBrushEnd = useCallback(
-    ({ x }: XYBrushArea) => {
+    ({ x }: XYBrushEvent) => {
       if (x && x.length === 2) {
         const end = x[1] < minSelectableTimeStamp ? null : x[1];
         if (end !== null) {
@@ -252,7 +252,7 @@ interface ChartProps {
   eventRateData: LineChartPoint[];
   anomalies: Anomaly[];
   loading: boolean;
-  onBrushEnd(area: XYBrushArea): void;
+  onBrushEnd(area: BrushEvent): void;
   overlayRanges: Array<{ start: number; end: number }>;
   overlayColor: string;
 }

x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx

@@ -28,6 +28,7 @@ import {
   HeatmapBrushEvent,
   Position,
   ScaleType,
+  BrushEndListener,
 } from '@elastic/charts';
 import moment from 'moment';
 
@@ -286,16 +287,6 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
     if (!showSwimlane) return {};
 
     const config: HeatmapSpec['config'] = {
-      onBrushEnd: (e: HeatmapBrushEvent) => {
-        if (!e.cells.length) return;
-
-        onCellsSelection({
-          lanes: e.y as string[],
-          times: e.x.map((v) => (v as number) / 1000) as [number, number],
-          type: swimlaneType,
-          viewByFieldName: swimlaneData.fieldName,
-        });
-      },
       grid: {
         cellHeight: {
           min: CELL_HEIGHT,
@@ -374,6 +365,17 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
     [swimlaneType, swimlaneData?.fieldName, swimlaneData?.interval, onCellsSelection]
   ) as ElementClickListener;
 
+  const onBrushEnd = (e: HeatmapBrushEvent) => {
+    if (!e.cells.length) return;
+
+    onCellsSelection({
+      lanes: e.y as string[],
+      times: e.x!.map((v) => (v as number) / 1000) as [number, number],
+      type: swimlaneType,
+      viewByFieldName: swimlaneData.fieldName,
+    });
+  };
+
   const tooltipOptions: TooltipSettings = useMemo(
     () => ({
       placement: 'auto',
@@ -427,6 +429,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
                         xDomain={xDomain}
                         tooltip={tooltipOptions}
                         debugState={window._echDebugStateFlag ?? false}
+                        onBrushEnd={onBrushEnd as BrushEndListener}
                       />
 
                       <Heatmap

x-pack/plugins/observability/public/components/app/section/helper.ts

@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import { XYBrushArea } from '@elastic/charts';
+import { BrushEvent } from '@elastic/charts';
 import { History } from 'history';
 import { fromQuery, toQuery } from '../../../utils/url';
 
-export const onBrushEnd = ({ x, history }: { x: XYBrushArea['x']; history: History }) => {
+export const onBrushEnd = ({ x, history }: { x: BrushEvent['x']; history: History }) => {
   if (x) {
     const start = x[0];
     const end = x[1];

yarn.lock

@@ -1365,10 +1365,10 @@
   dependencies:
     object-hash "^1.3.0"
 
-"@elastic/charts@34.2.1":
-  version "34.2.1"
-  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-34.2.1.tgz#90ac2a32cb47b371f5d814c9181e59aa3d55c029"
-  integrity sha512-C4qERgrcobaTDH2QLmdog0sM5FhWQot6QdsDTFASsSuWtj+a5Ujvex1tlBgiwcuIDP/1OY/tvWhiod8YhmAomg==
+"@elastic/charts@36.0.0":
+  version "36.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-36.0.0.tgz#dcb9c0edd5e3a031ce90e1d94f2c3fd42325a882"
+  integrity sha512-IR3jBBis8tuW6BIgGe7lIL8UerRMe81EOMVdfKybtxTuyLSK/XfjYf5cd7kIQHjHLIvrBkkoc2LGlGuIKBxr7A==
   dependencies:
     "@popperjs/core" "^2.4.0"
     chroma-js "^2.1.0"