Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(replays): Memory Chart Tooltip Overflow #38746

Merged
merged 12 commits into from
Sep 15, 2022
Merged

fix(replays): Memory Chart Tooltip Overflow #38746

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0c9c7b5
fix(replays): portal memory chart tooltips
danecando Sep 13, 2022
719cf9c
fix(replays): adds missing style property
danecando Sep 13, 2022
30663ee
fix(replays): moved portal tooltip styling into baseChart
danecando Sep 13, 2022
e0b2248
fix(replays): updated to make typescript happy
danecando Sep 13, 2022
603c192
fix(replays): fixes comments
danecando Sep 13, 2022
42d86c2
Merge remote-tracking branch 'upstream/master' into fix/replays/37238…
danecando Sep 13, 2022
34cad72
Merge remote-tracking branch 'upstream/master' into fix/replays/37238…
danecando Sep 14, 2022
418d4fc
fix(replays): adds new chartId prop to tooltip
danecando Sep 14, 2022
8f0546d
Merge remote-tracking branch 'upstream/master' into fix/replays/37238…
danecando Sep 14, 2022
97a4c65
fix(replays): add comment for chartId prop
danecando Sep 14, 2022
e910743
Merge remote-tracking branch 'upstream/master' into fix/replays/37238…
danecando Sep 14, 2022
d7afd2e
Merge remote-tracking branch 'upstream/master' into fix/replays/37238…
danecando Sep 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 96 additions & 1 deletion static/app/components/charts/baseChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import 'echarts/lib/component/toolbox';
import 'zrender/lib/svg/svg';

import {forwardRef, useMemo} from 'react';
import {useTheme} from '@emotion/react';
import {Global, useTheme} from '@emotion/react';
import styled from '@emotion/styled';
import type {
AxisPointerComponentOption,
Expand Down Expand Up @@ -465,6 +465,8 @@ function BaseChartUnwrapped({
: undefined;
const bucketSize = seriesData ? seriesData[1][0] - seriesData[0][0] : undefined;

const isTooltipPortalled = tooltip?.appendToBody;

const tooltipOrNone =
tooltip !== null
? Tooltip({
Expand All @@ -474,6 +476,9 @@ function BaseChartUnwrapped({
utc,
bucketSize,
...tooltip,
className: isTooltipPortalled
? `${tooltip?.className ?? ''} chart-tooltip-portal`
: tooltip?.className,
})
: undefined;

Expand Down Expand Up @@ -538,6 +543,7 @@ function BaseChartUnwrapped({

return (
<ChartContainer autoHeightResize={autoHeightResize} data-test-id={dataTestId}>
{isTooltipPortalled && <Global styles={getPortalledTooltipStyles(theme)} />}
<ReactEchartsCore
ref={forwardedRef}
echarts={echarts}
Expand Down Expand Up @@ -662,6 +668,95 @@ const ChartContainer = styled('div')<{autoHeightResize: boolean}>`
}
`;

// Global styles to inject with the chart. (for portalled tooltips)
const getPortalledTooltipStyles = (
theme: Theme
): Record<string, Record<string, string | number>> => ({
'.chart-tooltip-portal .tooltip-series, .chart-tooltip-portal .tooltip-date': {
danecando marked this conversation as resolved.
Show resolved Hide resolved
color: theme.subText,
fontFamily: theme.text.family,
fontVariantNumeric: 'tabular-nums',
padding: `${space(1)} ${space(2)}`,
borderRadius: `${theme.borderRadius} ${theme.borderRadius} 0 0`,
},
'.chart-tooltip-portal .tooltip-series': {
borderBottom: 'none',
},
'.chart-tooltip-portal .tooltip-series-solo': {
borderRadius: theme.borderRadius,
},
'.chart-tooltip-portal .tooltip-label': {
marginRight: space(1),
},
'.chart-tooltip-portal .tooltip-label strong': {
fontWeight: 'normal',
color: theme.textColor,
},
'.chart-tooltip-portal .tooltip-label-indent': {
marginLeft: '18px',
},
'.chart-tooltip-portal .tooltip-series > div': {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'baseline',
},
'.chart-tooltip-portal .tooltip-date': {
borderTop: `solid 1px ${theme.innerBorder}`,
textAlign: 'center',
position: 'relative',
width: 'auto',
borderRadius: theme.borderRadiusBottom,
},
'.chart-tooltip-portal .tooltip-arrow': {
top: '100%',
left: '50%',
position: 'absolute',
pointerEvents: 'none',
borderLeft: '8px solid transparent',
borderRight: '8px solid transparent',
borderTop: `8px solid ${theme.backgroundElevated}`,
marginLeft: '-8px',
},
'.chart-tooltip-portal .tooltip-arrow:before': {
content: '""',
borderLeft: '8px solid transparent',
borderRight: '8px solid transparent',
borderTop: `8px solid ${theme.translucentBorder}`,
position: 'absolute',
top: '-7px',
left: '-8px',
zIndex: -1,
},
'.chart-tooltip-portal .tooltip-description': {
color: theme.white,
borderRadius: theme.borderRadius,
background: '#000',
opacity: 0.9,
padding: '5px 10px',
position: 'relative',
fontWeight: 'bold',
fontSize: theme.fontSizeSmall,
lineHeight: 1.4,
fontFamily: theme.text.family,
maxWidth: 230,
minWidth: 230,
whiteSpace: 'normal',
textAlign: 'center',
},
'.chart-tooltip-portal .tooltip-description:after': {
content: '""',
position: 'absolute',
top: '100%',
left: '50%',
width: 0,
height: 0,
borderLeft: '5px solid transparent',
borderRight: '5px solid transparent',
borderTop: '5px solid #000',
transform: 'translateX(-50%)',
},
});

const BaseChart = forwardRef<ReactEchartsRef, Props>((props, ref) => (
<BaseChartUnwrapped forwardedRef={ref} {...props} />
));
Expand Down
2 changes: 2 additions & 0 deletions static/app/views/replays/detail/memoryChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,9 @@ function MemoryChart({
right: space(1),
}),
tooltip: Tooltip({
appendToBody: true,
trigger: 'axis',
renderMode: 'html',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does this do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the type def for the tooltips says the renderMode should be html if using appendToBody

    /**
     * 'auto': use html by default, and use non-html if `document` is not defined
     * 'html': use html for tooltip
     * 'richText': use canvas, svg, and etc. for tooltip
     */
    renderMode?: 'auto' | TooltipRenderMode;
    /**
     * If append popup dom to document.body
     * Only available when renderMode is html
     */
    appendToBody?: boolean;
    /**
     * specified class name of tooltip dom
     * Only available when renderMode is html
     */
    className?: string;
    ```

formatter: values => {
const seriesTooltips = values.map(
value => `
Expand Down