improve plot inspector behavior on touch devices

src/chart/chart-state.ts

@@ -231,6 +231,7 @@ export interface IChartStateController {
   removeListener: (eventName: string, listener: ChartEventListener) => void;
   showInspector: () => void;
   hideInspector: () => void;
+  toggleInspector: () => void;
   moveInspector: (xOffset: number) => void;
 }
 
@@ -248,6 +249,7 @@ export function makeChartStateController(
     removeListener,
     showInspector,
     hideInspector,
+    toggleInspector,
     moveInspector,
   });
 
@@ -292,12 +294,15 @@ export function makeChartStateController(
     const nextXScale = xScaleChanged ? xScale : state.xScale;
     const nextXOffset = xOffsetChanged ? xOffset : state.xOffset;
     state.setXViewRange(nextXScale, nextXOffset);
+    hideInspector();
     fireEvent('xViewRangeChanged');
     fireEvent('yViewRangeChanged');
   }
 
   function toggleDataSetVisibility(dataSet: IDataSet) {
     state.toggleDataSetVisibility(dataSet);
+    state.setInspectorVisibility(false);
+    hideInspector();
     fireEvent('yViewRangeChanged');
     fireEvent('dataSetVisibilityChanged');
   }
@@ -312,8 +317,14 @@ export function makeChartStateController(
     fireEvent('inspectorVisibilityChanged');
   }
 
+  function toggleInspector() {
+    state.setInspectorVisibility(!state.inspectorIsActive);
+    fireEvent('inspectorVisibilityChanged');
+  }
+
   function moveInspector(xOffset: number) {
     state.moveInspector(xOffset);
+    state.setInspectorVisibility(true);
     fireEvent('moveInspector');
   }
 }

src/chart/plot-area.ts

@@ -12,6 +12,8 @@ export const makePlotArea: ChartComponentFactory<IPlotAreaProps> = function(
 ) {
   const stateController = chartStateController;
   let plotSize: ISize;
+  let touchStartTime: number;
+  const tapThresh = 100;
 
   return {
     render,
@@ -40,13 +42,12 @@ export const makePlotArea: ChartComponentFactory<IPlotAreaProps> = function(
 
   function attachInspectorHandlers(container: HTMLElement) {
     container.addEventListener('mouseenter', handleMouseEnter);
-    container.addEventListener('touchstart', handleMouseEnter);
-
     container.addEventListener('mouseleave', handleMouseLeave);
-    container.addEventListener('touchend', handleMouseLeave);
-    container.addEventListener('touchcancel', handleMouseLeave);
-
     container.addEventListener('mousemove', handleMouseMove);
+
+    container.addEventListener('touchstart', handleTouchStart);
+    container.addEventListener('touchend', handleTouchEnd);
+    container.addEventListener('touchcancel', handleTouchEnd);
     container.addEventListener('touchmove', handleTouchMove);
   }
 
@@ -62,6 +63,17 @@ export const makePlotArea: ChartComponentFactory<IPlotAreaProps> = function(
     moveInspector(evt.offsetX);
   }
 
+  function handleTouchStart() {
+    touchStartTime = Date.now();
+  }
+
+  function handleTouchEnd() {
+    const now = Date.now();
+    if (now - touchStartTime < tapThresh) {
+      stateController.toggleInspector();
+    }
+  }
+
   function handleTouchMove(evt: TouchEvent) {
     if (evt.touches.length !== 1) {
       return;

src/chart/plots-inspector.ts

@@ -166,6 +166,7 @@ export function makePlotsInspector(
   }
 
   function updateInspector() {
+    updateInspectorLineVisibility();
     updateInspectorXCoordinate();
     updateInspectorLine();
     updateInspectorPoints();