diff --git a/src/chart_types/xy_chart/rendering/utils.ts b/src/chart_types/xy_chart/rendering/utils.ts index d55be7629b..146eb61293 100644 --- a/src/chart_types/xy_chart/rendering/utils.ts +++ b/src/chart_types/xy_chart/rendering/utils.ts @@ -131,7 +131,7 @@ export function isPointOnGeometry( indexedGeometry: BarGeometry | PointGeometry, buffer: MarkBuffer = DEFAULT_HIGHLIGHT_PADDING, ) { - const { x, y } = indexedGeometry; + const { x, y, transform } = indexedGeometry; if (isPointGeometry(indexedGeometry)) { const { radius } = indexedGeometry; const distance = getDistance( @@ -140,8 +140,8 @@ export function isPointOnGeometry( y: yCoordinate, }, { - x, - y, + x: x + transform.x, + y: y + transform.y, }, ); diff --git a/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.test.ts b/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.test.ts new file mode 100644 index 0000000000..42e7b09322 --- /dev/null +++ b/src/chart_types/xy_chart/state/selectors/get_tooltip_values_highlighted_geoms.test.ts @@ -0,0 +1,60 @@ +/* + * Licensed to Elasticsearch B.V. under one or more contributor + * license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright + * ownership. Elasticsearch B.V. licenses this file to you under + * the Apache License, Version 2.0 (the "License"); you may + * not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import { Store } from 'redux'; + +import { MockGlobalSpec, MockSeriesSpec } from '../../../../mocks/specs/specs'; +import { MockStore } from '../../../../mocks/store/store'; +import { ScaleType } from '../../../../scales/constants'; +import { onPointerMove } from '../../../../state/actions/mouse'; +import { GlobalChartState } from '../../../../state/chart_state'; +import { getTooltipInfoAndGeometriesSelector } from './get_tooltip_values_highlighted_geoms'; + +describe('Highlight points', () => { + describe('On Ordinal area chart', () => { + let store: Store; + beforeEach(() => { + store = MockStore.default({ width: 300, height: 300, top: 0, left: 0 }, 'chartId'); + MockStore.addSpecs( + [ + MockGlobalSpec.settingsNoMargins(), + MockSeriesSpec.area({ + data: [ + { x: 0, y: 2 }, + { x: 1, y: 2 }, + { x: 2, y: 3 }, + ], + xScaleType: ScaleType.Ordinal, + }), + ], + store, + ); + }); + it('On ordinal area chart, it should correctly highlight points', () => { + store.dispatch(onPointerMove({ x: 50, y: 100 }, 0)); + const { highlightedGeometries } = getTooltipInfoAndGeometriesSelector(store.getState()); + expect(highlightedGeometries).toHaveLength(1); + }); + it('On ordinal area chart, it should not highlight points if not within the buffer', () => { + store.dispatch(onPointerMove({ x: 5, y: 100 }, 0)); + const { highlightedGeometries } = getTooltipInfoAndGeometriesSelector(store.getState()); + expect(highlightedGeometries).toHaveLength(0); + }); + }); +});