Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

Merge 89bb5c23f2 into 3bb317ad6d

Browse Source
This commit is contained in:
Thomas Heartman 2025-09-24 14:23:38 +02:00 committed by GitHub
commit e22d67c968
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/component/insights/components/LineChart/ChartTooltip/ChartTooltip.tsx
View File

@ -46,18 +46,6 @@ const StyledLabelIcon = styled('span')(({ theme }) => ({
const offset = 16; const offset = 16;
const getAlign = (align?: 'left' | 'right' | 'center') => {
if (align === 'left') {
return 'flex-start';
}
if (align === 'right') {
return 'flex-end';
}
return 'center';
};
const getLeftOffset = (caretX = 0, align?: 'left' | 'right' | 'center') => { const getLeftOffset = (caretX = 0, align?: 'left' | 'right' | 'center') => {
if (align === 'left') { if (align === 'left') {
return caretX + offset; return caretX + offset;
@ -73,23 +61,29 @@ const getLeftOffset = (caretX = 0, align?: 'left' | 'right' | 'center') => {
export const ChartTooltipContainer: FC<IChartTooltipProps> = ({ export const ChartTooltipContainer: FC<IChartTooltipProps> = ({
tooltip, tooltip,
children, children,
}) => ( }) => {
<Box const top = tooltip?.caretY ?? 0 + offset;
sx={(theme) => ({ const left = getLeftOffset(tooltip?.caretX, tooltip?.align);
top: (tooltip?.caretY || 0) + offset, return (
left: getLeftOffset(tooltip?.caretX, tooltip?.align), <Box
width: '1px', sx={(theme) => ({
position: 'absolute', top: 0,
display: tooltip ? 'flex' : 'none', left: 0,
pointerEvents: 'none', transform: `translate(${left}px, ${top}px)`,
zIndex: theme.zIndex.tooltip, transition: 'transform 0.2s ease-in-out',
flexDirection: 'column', width: '1px',
alignItems: getAlign(tooltip?.align), position: 'absolute',
})} display: tooltip ? 'flex' : 'none',
> pointerEvents: 'none',
{children} zIndex: theme.zIndex.tooltip,
</Box> flexDirection: 'column',
); alignItems: 'center',
})}
>
{children}
</Box>
);
};
export const ChartTooltip: VFC<IChartTooltipProps> = ({ tooltip }) => ( export const ChartTooltip: VFC<IChartTooltipProps> = ({ tooltip }) => (
<ChartTooltipContainer tooltip={tooltip}> <ChartTooltipContainer tooltip={tooltip}>