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

Start work on making tooltip smooth transition instead of immediate position change

Browse Source
This commit is contained in:
Thomas Heartman 2025-08-25 14:24:58 +02:00
parent b071b17dd6
commit d814d9f5c7
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 30 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { Box, Paper, styled, Typography } from '@mui/material';
import type { TooltipItem } from 'chart.js'; import type { TooltipItem } from 'chart.js';
import { Truncator } from 'component/common/Truncator/Truncator'; import { Truncator } from 'component/common/Truncator/Truncator';
import type React from 'react'; import type React from 'react';
import type { FC, VFC } from 'react'; import { useEffect, useState, type FC, type VFC } from 'react';
import { objectId } from 'utils/objectId'; import { objectId } from 'utils/objectId';
export type TooltipState = { export type TooltipState = {
@ -73,23 +73,35 @@ 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, setTop] = useState(0);
sx={(theme) => ({ const [left, setLeft] = useState(0);
top: (tooltip?.caretY || 0) + offset, useEffect(() => {
left: getLeftOffset(tooltip?.caretX, tooltip?.align), if (tooltip) {
width: '1px', setTop(tooltip.caretY + offset);
position: 'absolute', setLeft(getLeftOffset(tooltip.caretX, tooltip.align));
display: tooltip ? 'flex' : 'none', }
pointerEvents: 'none', }, [tooltip]);
zIndex: theme.zIndex.tooltip, return (
flexDirection: 'column', <Box
alignItems: getAlign(tooltip?.align), sx={(theme) => ({
})} top: 0,
> left: 0,
{children} transform: `translate(${left}px, ${top}px)`,
</Box> transition: 'transform 0.3s ease-in-out',
); width: '1px',
position: 'absolute',
display: tooltip ? 'flex' : 'none',
pointerEvents: 'none',
zIndex: theme.zIndex.tooltip,
flexDirection: 'column',
alignItems: getAlign(tooltip?.align),
})}
>
{children}
</Box>
);
};
export const ChartTooltip: VFC<IChartTooltipProps> = ({ tooltip }) => ( export const ChartTooltip: VFC<IChartTooltipProps> = ({ tooltip }) => (
<ChartTooltipContainer tooltip={tooltip}> <ChartTooltipContainer tooltip={tooltip}>