From bb52d3539478fcfd41b141de091fc2c948448e2e Mon Sep 17 00:00:00 2001
From: Marco Vettorello <vettorello.marco@gmail.com>
Date: Thu, 5 Dec 2019 18:54:19 +0100
Subject: [PATCH] fix(crosshair): hide horizontal line when the pointer is
 outside chart (#484)

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

fix #483
---
 packages/osd-charts/.playground/playgroud.tsx        |  3 ++-
 .../xy_chart/crosshair/crosshair_line.test.ts        | 12 ++++++++++++
 .../xy_chart/crosshair/crosshair_utils.ts            |  6 +++++-
 .../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 packages/osd-charts/src/chart_types/xy_chart/crosshair/crosshair_line.test.ts

diff --git a/packages/osd-charts/.playground/playgroud.tsx b/packages/osd-charts/.playground/playgroud.tsx
index 778fbcb2afe1..d43d895f3a5c 100644
--- a/packages/osd-charts/.playground/playgroud.tsx
+++ b/packages/osd-charts/.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/packages/osd-charts/src/chart_types/xy_chart/crosshair/crosshair_line.test.ts b/packages/osd-charts/src/chart_types/xy_chart/crosshair/crosshair_line.test.ts
new file mode 100644
index 000000000000..699bdd252a59
--- /dev/null
+++ b/packages/osd-charts/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/packages/osd-charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts b/packages/osd-charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
index 1231469ef9ad..f1ccff6fd930 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/crosshair/crosshair_utils.ts
+++ b/packages/osd-charts/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/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/crosshair.tsx b/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
index fc70dac82fb5..fac0424e9e94 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/renderer/dom/crosshair.tsx
+++ b/packages/osd-charts/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/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_cursor_line.ts b/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_cursor_line.ts
index e727635af442..76aa1898b417 100644
--- a/packages/osd-charts/src/chart_types/xy_chart/state/selectors/get_cursor_line.ts
+++ b/packages/osd-charts/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);