feat: show crosshair for external pointer events (opensearch-project#817

)

packages/osd-charts/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',
         },

packages/osd-charts/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,
   };
 };
 

packages/osd-charts/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

packages/osd-charts/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;