Skip to content

Commit

Permalink
fix(tooltip): allow explicit boundary element (opensearch-project#1049)
Browse files Browse the repository at this point in the history
  • Loading branch information
nickofthyme authored Mar 4, 2021
1 parent aa1cecf commit 118c2b5
Show file tree
Hide file tree
Showing 9 changed files with 146 additions and 13 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.
24 changes: 24 additions & 0 deletions packages/osd-charts/integration/tests/interactions.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,30 @@ describe('Interactions', () => {
{ left: 120, bottom: 80 },
);
});

describe.each([
// TODO: find why these vrt don't position tooltip wrt boundary
// ['Root', 'root', 7],
// ['Red', 'red', 6],
// ['White', 'white', 5],
// ['Blue', 'blue', 3],
['Chart', 'chart', 2],
])('Boundary - %s', (_, boundary, groups) => {
it('should contain tooltip inside boundary near top', async () => {
await common.expectChartWithMouseAtUrlToMatchScreenshot(
`http://localhost:9001/?path=/story/bar-chart--tooltip-boundary&knob-Boundary Element=${boundary}&knob-Groups=${groups}&knob-Show axes=false`,
{ left: 100, top: 20 },
{ screenshotSelector: 'body' },
);
});
it('should contain tooltip inside boundary near bottom', async () => {
await common.expectChartWithMouseAtUrlToMatchScreenshot(
`http://localhost:9001/?path=/story/bar-chart--tooltip-boundary&knob-Boundary Element=${boundary}&knob-Groups=${groups}&knob-Show axes=false`,
{ left: 100, bottom: 20 },
{ screenshotSelector: 'body' },
);
});
});
});

describe('brushing', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export const AnnotationTooltip = ({ state, chartRef, chartId, onScroll, zIndex }
return {
...rest,
placement: placement ?? Placement.Right,
boundary: boundary === 'chart' && chartRef.current ? chartRef.current : undefined,
boundary: boundary === 'chart' ? chartRef.current ?? undefined : boundary,
};
}, [state?.tooltipSettings, chartRef]);

Expand Down
2 changes: 1 addition & 1 deletion packages/osd-charts/src/components/tooltip/tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ const TooltipComponent = ({
(rotation === 0 || rotation === 180
? [Placement.Right, Placement.Left, Placement.Top, Placement.Bottom]
: [Placement.Top, Placement.Bottom, Placement.Right, Placement.Left]),
boundary: boundary === 'chart' && chartRef.current ? chartRef.current : undefined,
boundary: boundary === 'chart' ? chartRef.current ?? undefined : boundary,
};
}, [settings, chartRef, rotation]);

Expand Down
101 changes: 101 additions & 0 deletions packages/osd-charts/stories/bar/55_tooltip_boundary.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* Licensed to Elasticsearch B.V. under one or more contributor
* license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright
* ownership. Elasticsearch B.V. licenses this file to you under
* the Apache License, Version 2.0 (the "License"); you may
* not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/

import { boolean, number, select } from '@storybook/addon-knobs';
import React, { useRef } from 'react';

import { Axis, BarSeries, Chart, Position, ScaleType, Settings, TooltipProps } from '../../src';
import { getRandomNumberGenerator, SeededDataGenerator } from '../../src/mocks/utils';
import { SB_KNOBS_PANEL } from '../utils/storybook';

const dg = new SeededDataGenerator();
const rng = getRandomNumberGenerator();

export const Example = () => {
const showAxes = boolean('Show axes', false);
const groups = number('Groups', 5, { min: 2, max: 20, step: 1 });
const data = dg.generateGroupedSeries(4, groups).map((d) => {
return {
...d,
y1: rng(0, 20),
y2: rng(0, 20),
g1: `dog ${d.g}`,
g2: `cat ${d.g}`,
};
});
const red = useRef<HTMLDivElement | null>(null);
const white = useRef<HTMLDivElement | null>(null);
const blue = useRef<HTMLDivElement | null>(null);
const boundaryMap: Record<string, TooltipProps['boundary'] | null> = {
default: undefined,
red: red.current,
white: white.current,
blue: blue.current,
chart: 'chart',
root: document.getElementById('story-root'),
};
const boundarySting = select<string>(
'Boundary Element',
{
Default: 'default',
'Root (blanchedalmond)': 'root',
Red: 'red',
White: 'white',
Blue: 'blue',
Chart: 'chart',
},
'default',
);
const boundary = boundaryMap[boundarySting] ?? undefined;

return (
<div ref={red} style={{ backgroundColor: 'red', padding: 30, height: '100%' }}>
<div ref={white} style={{ backgroundColor: 'white', padding: 30, height: '100%' }}>
<div ref={blue} style={{ backgroundColor: 'blue', padding: 30, height: '100%' }}>
<Chart className="story-chart">
<Settings tooltip={{ boundary }} />
<Axis id="bottom" hide={!showAxes} position={Position.Bottom} title="Bottom axis" showOverlappingTicks />
<Axis
id="left"
hide={!showAxes}
title="Left axis"
position={Position.Left}
tickFormat={(d: any) => Number(d).toFixed(2)}
/>
<BarSeries
id="bars"
xScaleType={ScaleType.Ordinal}
yScaleType={ScaleType.Linear}
xAccessor="x"
yAccessors={['y1', 'y2']}
splitSeriesAccessors={['g1', 'g2']}
data={data}
/>
</Chart>
</div>
</div>
</div>
);
};

Example.story = {
parameters: {
options: { selectedPanel: SB_KNOBS_PANEL },
},
};
1 change: 1 addition & 0 deletions packages/osd-charts/stories/bar/bars.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,4 +83,5 @@ export { Example as testDiscover } from './43_test_discover';
export { Example as testSingleHistogramBarChart } from './44_test_single_histogram';
export { Example as testMinHeightPositiveAndNegativeValues } from './46_test_min_height';
export { Example as testTooltipAndRotation } from './48_test_tooltip';
export { Example as tooltipBoundary } from './55_tooltip_boundary';
export { Example as testDualYAxis } from './49_test_dual_axis';
29 changes: 18 additions & 11 deletions packages/osd-charts/stories/utils/knobs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -209,17 +209,24 @@ export const getFallbackPlacementsKnob = (): Placement[] | undefined => {
return knob;
};

export const getBoundaryKnob = () =>
// @ts-ignore
select<TooltipProps['boundary']>(
'Boundary Element',
{
Chart: 'chart',
'Document Body': document.body,
Default: undefined,
},
undefined,
);
const boundaryMap: Record<string, TooltipProps['boundary'] | null> = {
default: undefined,
chart: 'chart',
};

export const getBoundaryKnob = () => {
const boundaryString =
select<string>(
'Boundary Element',
{
Default: 'default',
Chart: 'chart',
},
'default',
) ?? '';

return boundaryMap[boundaryString] ?? undefined;
};

export const getVerticalTextAlignmentKnob = (group?: string) =>
select<VerticalAlignment | undefined>(
Expand Down

0 comments on commit 118c2b5

Please sign in to comment.