Added eventBus to trigger and listen plotHandler event (#83435) (#83613)

elastic · Nov 19, 2020 · 32a6200 · 32a6200
1 parent 616d582
commit 32a6200
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git a/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx b/src/plugins/vis_type_timelion/public/components/timelion_vis_component.tsx
@@ -33,6 +33,8 @@ import {
  SERIES_ID_ATTR,
  colors,
  Axis,
+ ACTIVE_CURSOR,
+ eventBus,
 } from '../helpers/panel_utils';
 
 import { Series, Sheet } from '../helpers/timelion_request_handler';
@@ -338,16 +340,40 @@ function TimelionVisComponent({
  });
  }, [legendCaption, legendValueNumbers]);
 
+ const plotHover = useCallback(
+ (pos: Position) => {
+ (plot as CrosshairPlot).setCrosshair(pos);
+ debouncedSetLegendNumbers(pos);
+ },
+ [plot, debouncedSetLegendNumbers]
+ );
+
  const plotHoverHandler = useCallback(
  (event: JQuery.TriggeredEvent, pos: Position) => {
  if (!plot) {
  return;
  }
- (plot as CrosshairPlot).setCrosshair(pos);
- debouncedSetLegendNumbers(pos);
+ plotHover(pos);
+ eventBus.trigger(ACTIVE_CURSOR, [event, pos]);
  },
- [plot, debouncedSetLegendNumbers]
+ [plot, plotHover]
  );
+
+ useEffect(() => {
+ const updateCursor = (_: any, event: JQuery.TriggeredEvent, pos: Position) => {
+ if (!plot) {
+ return;
+ }
+ plotHover(pos);
+ };
+
+ eventBus.on(ACTIVE_CURSOR, updateCursor);
+
+ return () => {
+ eventBus.off(ACTIVE_CURSOR, updateCursor);
+ };
+ }, [plot, plotHover]);
+
  const mouseLeaveHandler = useCallback(() => {
  if (!plot) {
  return;

diff --git a/src/plugins/vis_type_timelion/public/helpers/panel_utils.ts b/src/plugins/vis_type_timelion/public/helpers/panel_utils.ts
@@ -18,6 +18,7 @@
  */
 
 import { cloneDeep, defaults, mergeWith, compact } from 'lodash';
+import $ from 'jquery';
 import moment, { Moment } from 'moment-timezone';
 
 import { TimefilterContract } from 'src/plugins/data/public';
@@ -50,6 +51,9 @@ interface TimeRangeBounds {
  max: Moment | undefined;
 }
 
+export const ACTIVE_CURSOR = 'ACTIVE_CURSOR_TIMELION';
+export const eventBus = $({});
+
 const colors = [
  '#01A4A4',
  '#C66',