fix(crosshair): hide horizontal line when the pointer is outside chart

.playground/playgroud.tsx

@@ -13,6 +13,7 @@ import {
   AnnotationDomainTypes,
   BarSeries,
   RectAnnotation,
+  TooltipType,
 } from '../src';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
 export class Playground extends React.Component {
@@ -49,7 +50,7 @@ export class Playground extends React.Component {
         <button onClick={this.onSnapshot}>Snapshot</button>
         <div className="chart">
           <Chart ref={this.chartRef}>
-            <Settings theme={LIGHT_THEME} showLegend={true} />
+            <Settings theme={LIGHT_THEME} showLegend={true} tooltip={TooltipType.Crosshairs} />
             <Axis
               id={getAxisId('time')}
               position={Position.Bottom}

src/chart_types/xy_chart/crosshair/crosshair_line.test.ts

@@ -0,0 +1,12 @@
+import { getCursorLinePosition } from './crosshair_utils';
+
+describe('Crosshair line position', () => {
+  it('shuld not compute line position for outside pointer coordinates', () => {
+    const linePos = getCursorLinePosition(0, { width: 100, height: 100, left: 0, top: 0 }, { x: -1, y: -1 });
+    expect(linePos).toBeUndefined();
+  });
+  it('shuld compute line position for inside pointer coordinates', () => {
+    const linePos = getCursorLinePosition(0, { width: 100, height: 100, left: 0, top: 0 }, { x: 50, y: 50 });
+    expect(linePos).toBeDefined();
+  });
+});

src/chart_types/xy_chart/crosshair/crosshair_utils.ts

@@ -57,7 +57,11 @@ export function getCursorLinePosition(
   chartRotation: Rotation,
   chartDimensions: Dimensions,
   projectedPointerPosition: { x: number; y: number },
-): Dimensions {
+): Dimensions | undefined {
+  const { x, y } = projectedPointerPosition;
+  if (x < 0 || y < 0) {
+    return void 0;
+  }
   const { left, top, width, height } = chartDimensions;
   const isHorizontalRotated = isHorizontalRotation(chartRotation);
   if (isHorizontalRotated) {

src/chart_types/xy_chart/renderer/dom/crosshair.tsx

@@ -18,7 +18,7 @@ interface CrosshairProps {
   theme: Theme;
   chartRotation: Rotation;
   cursorBandPosition?: Dimensions;
-  cursorLinePosition: Dimensions;
+  cursorLinePosition?: Dimensions;
   tooltipType: TooltipType;
 }
 
@@ -100,8 +100,6 @@ const mapStateToProps = (state: GlobalChartState): CrosshairProps => {
     return {
       theme: LIGHT_THEME,
       chartRotation: 0,
-      cursorBandPosition: { top: 0, left: 0, width: 0, height: 0 },
-      cursorLinePosition: { top: 0, left: 0, width: 0, height: 0 },
       tooltipType: TooltipType.None,
     };
   }

src/chart_types/xy_chart/state/selectors/get_cursor_line.ts

@@ -4,10 +4,11 @@ import { getSettingsSpecSelector } from '../../../../state/selectors/get_setting
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
 import { getProjectedPointerPositionSelector } from './get_projected_pointer_position';
 import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { Dimensions } from '../../../../utils/dimensions';
 
 export const getCursorLinePositionSelector = createCachedSelector(
   [computeChartDimensionsSelector, getSettingsSpecSelector, getProjectedPointerPositionSelector],
-  (chartDimensions, settingsSpec, projectedPointerPosition) => {
+  (chartDimensions, settingsSpec, projectedPointerPosition): Dimensions | undefined => {
     return getCursorLinePosition(settingsSpec.rotation, chartDimensions.chartDimensions, projectedPointerPosition);
   },
 )(getChartIdSelector);