From 7a7ca0949b065ca45217927fe2cbe358f19fe64c Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Thu, 5 Dec 2019 12:44:53 +0100
Subject: [PATCH] fix(crosshair): hide horizontal line when the pointer is
 outside chart

This commit fix the visibility of the crosshair horizontal line, hiding
it when the pointer projected position is outside the chart area.

fix #483
---
 .playground/playgroud.tsx                            |  3 ++-
 .../xy_chart/crosshair/crosshair_line.test.ts        | 12 ++++++++++++
 .../xy_chart/crosshair/crosshair_utils.ts            |  6 +++++-
 src/chart_types/xy_chart/renderer/dom/crosshair.tsx  |  4 +---
 .../xy_chart/state/selectors/get_cursor_line.ts      |  3 ++-
 5 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 src/chart_types/xy_chart/crosshair/crosshair_line.test.ts

diff --git a/.playground/playgroud.tsx b/.playground/playgroud.tsx
index 778fbcb2afe..d43d895f3a5 100644
--- a/.playground/playgroud.tsx
+++ b/.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}
diff --git a/src/chart_types/xy_chart/crosshair/crosshair_line.test.ts b/src/chart_types/xy_chart/crosshair/crosshair_line.test.ts
new file mode 100644
index 00000000000..699bdd252a5
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/chart_types/xy_chart/crosshair/crosshair_utils.ts b/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
index 1231469ef9a..f1ccff6fd93 100644
--- a/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
+++ b/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) {
diff --git a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx b/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
index fc70dac82fb..fac0424e9e9 100644
--- a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
+++ b/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,
     };
   }
diff --git a/src/chart_types/xy_chart/state/selectors/get_cursor_line.ts b/src/chart_types/xy_chart/state/selectors/get_cursor_line.ts
index e727635af44..76aa1898b41 100644
--- a/src/chart_types/xy_chart/state/selectors/get_cursor_line.ts
+++ b/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);