diff --git a/api_docs/charts.json b/api_docs/charts.json
index ba8751304f710..3d023346a4963 100644
--- a/api_docs/charts.json
+++ b/api_docs/charts.json
@@ -229,7 +229,7 @@
", xAccessor: string | number | ",
"AccessorFn",
") => ({ x: selectedRange }: ",
- "XYBrushArea",
+ "XYBrushEvent",
") => ",
{
"pluginId": "charts",
diff --git a/package.json b/package.json
index 97768601ff852..df5e0814a930d 100644
--- a/package.json
+++ b/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",
diff --git a/renovate.json5 b/renovate.json5
index 602b8bc35f4a1..b35e384c3a0e2 100644
--- a/renovate.json5
+++ b/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,
diff --git a/src/plugins/charts/public/static/utils/transform_click_event.ts b/src/plugins/charts/public/static/utils/transform_click_event.ts
index 7fdd59f47988d..d175046b20ebb 100644
--- a/src/plugins/charts/public/static/utils/transform_click_event.ts
+++ b/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));
diff --git a/src/plugins/vis_types/xy/public/vis_component.tsx b/src/plugins/vis_types/xy/public/vis_component.tsx
index f4d566f49602e..6c112d054660a 100644
--- a/src/plugins/vis_types/xy/public/vis_component.tsx
+++ b/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
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
index 589cce26b4d8c..b9a229b656f3f 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx
+++ b/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({
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
index ca162be92cdae..b0d728f003cf5 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/distribution/index.tsx
+++ b/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' });
};
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/trace_samples_tab.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/trace_samples_tab.tsx
index ad629b7a2d132..86f5110cabcc8 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/trace_samples_tab.tsx
+++ b/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 (
{
+ const selectSampleFromChartSelection = (selection: XYBrushEvent) => {
if (selection !== undefined) {
const { x } = selection;
if (Array.isArray(x)) {
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/types.ts b/x-pack/plugins/apm/public/components/app/transaction_details/types.ts
index 1ccb3d01a9b28..c3d2b9648e82a 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/types.ts
+++ b/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[];
}
diff --git a/x-pack/plugins/apm/public/components/shared/charts/helper/helper.ts b/x-pack/plugins/apm/public/components/shared/charts/helper/helper.ts
index d94f2ce8f5c5d..f8a8c37c7af97 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/helper/helper.ts
+++ b/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) {
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx
index b8df4defa18a2..0a2fe451c6b55 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/components/document_count_content/document_count_chart/document_count_chart.tsx
+++ b/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 = ({
[data]
);
- const onBrushEnd: BrushEndListener = ({ x }) => {
+ const onBrushEnd = ({ x }: XYBrushEvent) => {
if (!x) {
return;
}
@@ -117,7 +118,7 @@ export const DocumentCountChart: FC = ({
height: 120,
}}
>
-
+
= ({
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 = ({
};
const config: HeatmapSpec['config'] = {
- onBrushEnd,
grid: {
stroke: {
width:
@@ -338,6 +337,7 @@ export const HeatmapComponent: FC = ({
labelOptions: { maxLines: args.legend.shouldTruncate ? args.legend?.maxLines ?? 1 : 0 },
},
}}
+ onBrushEnd={onBrushEnd}
/>
{
+ 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,
diff --git a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx b/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx
index b4015d0c0eb92..aa30e1f4d0899 100644
--- a/x-pack/plugins/ml/public/application/components/model_snapshots/revert_model_snapshot_flyout/create_calendar.tsx
+++ b/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 = ({
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;
}
diff --git a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx b/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
index 49bd00d888cf8..7c568358b6759 100644
--- a/x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
+++ b/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 = ({
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 = ({
[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 = ({
xDomain={xDomain}
tooltip={tooltipOptions}
debugState={window._echDebugStateFlag ?? false}
+ onBrushEnd={onBrushEnd as BrushEndListener}
/>
{
+export const onBrushEnd = ({ x, history }: { x: BrushEvent['x']; history: History }) => {
if (x) {
const start = x[0];
const end = x[1];
diff --git a/yarn.lock b/yarn.lock
index a6f48f9bd0f5f..2f6728a6713dd 100644
--- a/yarn.lock
+++ b/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"