feat(brush): show crosshair cursor when brush enabled (#243)

Author: emmacunningham

src/components/_container.scss

@@ -13,3 +13,7 @@
     }
   }
 }
+
+.echChart--isBrushEnabled {
+  cursor: crosshair;
+}

src/components/react_canvas/reactive_chart.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { inject, observer } from 'mobx-react';
 import React from 'react';
 import { Layer, Rect, Stage } from 'react-konva';
@@ -376,6 +377,10 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
       clipHeight: chartDimensions.height,
     };
 
+    const className = classNames({
+      'echChart--isBrushEnabled': this.props.chartStore!.isCrosshairCursorVisible.get(),
+    });
+
     return (
       <div
         style={{
@@ -395,6 +400,7 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
         onClick={() => {
           this.props.chartStore!.handleChartClick();
         }}
+        className={className}
       >
         <Stage
           width={parentDimensions.width}

src/state/chart_state.test.ts

@@ -836,4 +836,34 @@ describe('Chart Store', () => {
     expectedTooltipValues.set('seriesKey', 123);
     expect(store.legendItemTooltipValues.get()).toEqual(expectedTooltipValues);
   });
+  describe('can determine if crosshair cursor is visible', () => {
+    const brushEndListener = (): void => {
+      return;
+    };
+
+    beforeEach(() => {
+      store.xScale = new ScaleContinuous(ScaleType.Linear, [0, 100], [0, 100]);
+    });
+
+    test('when cursor is outside of chart bounds', () => {
+      store.cursorPosition.x = -1;
+      store.cursorPosition.y = -1;
+      store.onBrushEndListener = brushEndListener;
+      expect(store.isCrosshairCursorVisible.get()).toBe(false);
+    });
+
+    test('when cursor is within chart bounds and brush enabled', () => {
+      store.cursorPosition.x = 10;
+      store.cursorPosition.y = 10;
+      store.onBrushEndListener = brushEndListener;
+      expect(store.isCrosshairCursorVisible.get()).toBe(true);
+    });
+
+    test('when cursor is within chart bounds and brush disabled', () => {
+      store.cursorPosition.x = 10;
+      store.cursorPosition.y = 10;
+      store.onBrushEndListener = undefined;
+      expect(store.isCrosshairCursorVisible.get()).toBe(false);
+    });
+  });
 });

src/state/chart_state.ts

@@ -221,6 +221,20 @@ export class ChartStore {
     this.computeChart();
   });
 
+  /**
+   * determine if crosshair cursor should be visible based on cursor position and brush enablement
+   */
+  isCrosshairCursorVisible = computed(() => {
+    const xPos = this.cursorPosition.x;
+    const yPos = this.cursorPosition.y;
+
+    if (yPos < 0 || xPos < 0) {
+      return false;
+    }
+
+    return this.isBrushEnabled();
+  });
+
   /**
    * x and y values are relative to the container.
    */