Import crosshair library, define function that draws crosshair

Author: cmonez

webapp/javascript/components/TimelineChart.jsx

@@ -5,6 +5,7 @@ import "react-dom";
 import ReactFlot from "react-flot";
 import "react-flot/flot/jquery.flot.time.min";
 import "react-flot/flot/jquery.flot.selection.min";
+import "react-flot/flot/jquery.flot.crosshair.min";
 import { bindActionCreators } from "redux";
 import { setDateRange, receiveJSON } from "../redux/actions";
 
@@ -17,6 +18,17 @@ class TimelineChart extends ReactFlot {
         Math.round(ranges.xaxis.to / 1000)
       );
     });
+
+    $(`#${this.props.id}`).bind("plothover", (evt, position) => {
+      if (position) {
+        this.lockCrosshair({
+          x: item.datapoint[0],
+          y: item.datapoint[1],
+        });
+      } else {
+        this.unlockCrosshair();
+      }
+    });
   }
 }