Import crosshair library, define function that draws crosshair

grafana · Feb 3, 2021 · 383fcd2 · 383fcd2
1 parent 7bf4ab5
commit 383fcd2
Showing 1 changed file with 12 additions and 0 deletions.
diff --git a/webapp/javascript/components/TimelineChart.jsx b/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();
+      }
+    });
   }
 }