diff --git a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png index dc2a4b9117..e74bf1f00d 100644 Binary files a/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png and b/integration/tests/__image_snapshots__/all-test-ts-baseline-visual-tests-for-all-stories-interactions-cursor-update-action-visually-looks-correct-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-crosshairs-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-crosshairs-1-snap.png new file mode 100644 index 0000000000..244f467bb9 Binary files /dev/null and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-crosshairs-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png index 4691d24938..6200fdb1a8 100644 Binary files a/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png and b/integration/tests/__image_snapshots__/interactions-test-ts-interactions-tooltip-sync-show-synced-tooltips-1-snap.png differ diff --git a/integration/tests/interactions.test.ts b/integration/tests/interactions.test.ts index 5bb2281681..8594846f51 100644 --- a/integration/tests/interactions.test.ts +++ b/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', }, diff --git a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx b/src/chart_types/xy_chart/renderer/dom/crosshair.tsx index 3a10f5f840..b7894f621f 100644 --- a/src/chart_types/xy_chart/renderer/dom/crosshair.tsx +++ b/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 { }, 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, }; }; diff --git a/stories/interactions/16_cursor_update_action.tsx b/stories/interactions/16_cursor_update_action.tsx index f26439fd49..a657d01dc6 100644 --- a/stories/interactions/16_cursor_update_action.tsx +++ b/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 ( <> Number(d).toFixed(2)} /> @@ -77,12 +94,17 @@ export const Example = () => { 0, ); -export const getTooltipTypeKnob = (name = 'tooltip type', defaultValue = TooltipType.VerticalCursor) => +export const getTooltipTypeKnob = ( + name = 'tooltip type', + defaultValue = TooltipType.VerticalCursor, + groupId?: string, +) => select( 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( name, { @@ -92,6 +97,7 @@ export const getPlacementKnob = (name = 'placement', defaultValue?: Placement) = AutoEnd: Placement.AutoEnd, }, defaultValue, + groupId, ); return value || undefined;