Skip to content

Commit

Permalink
feat: show crosshair for external pointer events (opensearch-project#817
Browse files Browse the repository at this point in the history
)
  • Loading branch information
nickofthyme authored Sep 15, 2020
1 parent ade8d8b commit 1721514
Show file tree
Hide file tree
Showing 7 changed files with 53 additions and 12 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 11 additions & 2 deletions packages/osd-charts/integration/tests/interactions.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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 = {
Expand Down Expand Up @@ -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,
};
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
*/

import { action } from '@storybook/addon-actions';
import { boolean } from '@storybook/addon-knobs';
import React from 'react';

import {
Expand All @@ -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 = () => {
Expand All @@ -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)} />
Expand All @@ -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
Expand Down
10 changes: 8 additions & 2 deletions packages/osd-charts/stories/utils/knobs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
{
Expand All @@ -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) =>
Expand All @@ -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,
{
Expand All @@ -92,6 +97,7 @@ export const getPlacementKnob = (name = 'placement', defaultValue?: Placement) =
AutoEnd: Placement.AutoEnd,
},
defaultValue,
groupId,
);

return value || undefined;
Expand Down

0 comments on commit 1721514

Please sign in to comment.