feat: show crosshair for external pointer events (#817)

integration/tests/interactions.test.ts

@@ -220,8 +220,17 @@ describe('Interactions', () => {
  describe('Tooltip sync', () => {
  it('show synced tooltips', async () => {
  await common.expectChartWithMouseAtUrlToMatchScreenshot(
- 'http://localhost:9001/?path=/story/interactions--cursor-update-action',
- { left: 180, top: 80 },
+ 'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=true&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left',
+ { right: 120, top: 80 },
+ {
+ screenshotSelector: '#story-root',
+ },
+ );
+ });
+ it('show synced crosshairs', async () => {
+ await common.expectChartWithMouseAtUrlToMatchScreenshot(
+ 'http://localhost:9001/?path=/story/interactions--cursor-update-action&knob-local%20tooltip%20type_Top%20Chart=vertical&knob-local%20tooltip%20type_Bottom%20Chart=vertical&knob-enable%20external%20tooltip_Top%20Chart=true&knob-enable%20external%20tooltip_Bottom%20Chart=false&knob-external%20tooltip%20placement_Top%20Chart=left&knob-external%20tooltip%20placement_Bottom%20Chart=left',
+ { right: 120, top: 80 },
  {
  screenshotSelector: '#story-root',
  },

src/chart_types/xy_chart/renderer/dom/crosshair.tsx

@@ -41,11 +41,13 @@ interface CrosshairProps {
  cursorBandPosition?: Dimensions;
  cursorLinePosition?: Dimensions;
  tooltipType: TooltipType;
+ fromExternalEvent?: boolean;
 }
 
-function canRenderBand(type: TooltipType, visible: boolean) {
- return visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor);
+function canRenderBand(type: TooltipType, visible: boolean, fromExternalEvent?: boolean) {
+ return visible && (type === TooltipType.Crosshairs || type === TooltipType.VerticalCursor || fromExternalEvent);
 }
+
 function canRenderHelpLine(type: TooltipType, visible: boolean) {
  return visible && type === TooltipType.Crosshairs;
 }
@@ -60,9 +62,10 @@ class CrosshairComponent extends React.Component<CrosshairProps> {
  },
  cursorBandPosition,
  tooltipType,
+ fromExternalEvent,
  } = this.props;
 
- if (!cursorBandPosition || !canRenderBand(tooltipType, band.visible)) {
+ if (!cursorBandPosition || !canRenderBand(tooltipType, band.visible, fromExternalEvent)) {
  return null;
  }
  const style: CSSProperties = {
@@ -126,14 +129,15 @@ const mapStateToProps = (state: GlobalChartState): CrosshairProps => {
  }
  const settings = getSettingsSpecSelector(state);
  const cursorBandPosition = getCursorBandPositionSelector(state);
-
  const tooltipType = getTooltipType(settings, cursorBandPosition?.fromExternalEvent);
+
  return {
  theme: getChartThemeSelector(state),
  chartRotation: getChartRotationSelector(state),
  cursorBandPosition,
  cursorLinePosition: getCursorLinePositionSelector(state),
  tooltipType,
+ fromExternalEvent: cursorBandPosition?.fromExternalEvent,
  };
 };
 

stories/interactions/16_cursor_update_action.tsx

@@ -18,6 +18,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
+import { boolean } from '@storybook/addon-knobs';
 import React from 'react';
 
 import {
@@ -30,9 +31,11 @@ import {
  PointerEvent,
  Placement,
  niceTimeFormatter,
+ TooltipType,
 } from '../../src';
 import { KIBANA_METRICS } from '../../src/utils/data_samples/test_dataset_kibana';
 import { palettes } from '../../src/utils/themes/colors';
+import { getTooltipTypeKnob, getPlacementKnob } from '../utils/knobs';
 import { SB_SOURCE_PANEL } from '../utils/storybook';
 
 export const Example = () => {
@@ -50,17 +53,31 @@ export const Example = () => {
  const { data } = KIBANA_METRICS.metrics.kibana_os_load[0];
  const data1 = KIBANA_METRICS.metrics.kibana_os_load[0].data;
  const data2 = KIBANA_METRICS.metrics.kibana_os_load[1].data;
+
+ const group1 = 'Top Chart';
+ const group2 = 'Bottom Chart';
+
+ const topType = getTooltipTypeKnob('local tooltip type', TooltipType.VerticalCursor, group1);
+ const bottomType = getTooltipTypeKnob('local tooltip type', TooltipType.VerticalCursor, group2);
+ const topVisible = boolean('enable external tooltip', true, group1);
+ const bottomVisible = boolean('enable external tooltip', true, group2);
+ const topPlacement = getPlacementKnob('external tooltip placement', Placement.Left, group1);
+ const bottomPlacement = getPlacementKnob('external tooltip placement', Placement.Left, group2);
+
  return (
  <>
  <Chart className="story-chart" ref={ref1} size={{ height: '50%' }} id="chart1">
  <Settings
  onPointerUpdate={pointerUpdate}
- externalPointerEvents={{ tooltip: { visible: true, boundary: 'chart' } }}
+ externalPointerEvents={{
+ tooltip: { visible: topVisible, placement: topPlacement },
+ }}
+ tooltip={{ type: topType }}
  />
  <Axis
  id="bottom"
  position={Position.Bottom}
- title="External tooltip VISIBLE"
+ title={`External tooltip visible: ${topVisible} - boundary: scroll parent`}
  tickFormat={niceTimeFormatter([data[0][0], data[data.length - 1][0]])}
  />
  <Axis id="left2" position={Position.Left} tickFormat={(d: any) => Number(d).toFixed(2)} />
@@ -77,12 +94,17 @@ export const Example = () => {
  <Chart className="story-chart" ref={ref2} size={{ height: '50%' }} id="chart2">
  <Settings
  onPointerUpdate={pointerUpdate}
- externalPointerEvents={{ tooltip: { visible: true, placement: Placement.Left } }}
+ tooltip={{
+ type: bottomType,
+ }}
+ externalPointerEvents={{
+ tooltip: { visible: bottomVisible, placement: bottomPlacement, boundary: 'chart' },
+ }}
  />
  <Axis
  id="bottom"
  position={Position.Bottom}
- title="External tooltip VISIBLE - boundary => chart"
+ title={`External tooltip visible: ${bottomVisible} - boundary: chart`}
  tickFormat={niceTimeFormatter([data[0][0], data[data.length - 1][0]])}
  />
  <Axis

stories/utils/knobs.ts

@@ -46,7 +46,11 @@ export const getChartRotationKnob = () =>
  0,
  );
 
-export const getTooltipTypeKnob = (name = 'tooltip type', defaultValue = TooltipType.VerticalCursor) =>
+export const getTooltipTypeKnob = (
+ name = 'tooltip type',
+ defaultValue = TooltipType.VerticalCursor,
+ groupId?: string,
+) =>
  select<TooltipType>(
  name,
  {
@@ -56,6 +60,7 @@ export const getTooltipTypeKnob = (name = 'tooltip type', defaultValue = Tooltip
  None: TooltipType.None,
  },
  defaultValue,
+ groupId,
  );
 
 export const getPositionKnob = (name = 'chartRotation', defaultValue = Position.Right) =>
@@ -70,7 +75,7 @@ export const getPositionKnob = (name = 'chartRotation', defaultValue = Position.
  defaultValue,
  );
 
-export const getPlacementKnob = (name = 'placement', defaultValue?: Placement) => {
+export const getPlacementKnob = (name = 'placement', defaultValue?: Placement, groupId?: string) => {
  const value = select<Placement | undefined>(
  name,
  {
@@ -92,6 +97,7 @@ export const getPlacementKnob = (name = 'placement', defaultValue?: Placement) =
  AutoEnd: Placement.AutoEnd,
  },
  defaultValue,
+ groupId,
  );
 
  return value || undefined;