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

22
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 { Truncator } from 'component/common/Truncator/Truncator';
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';
export type TooltipState = {
@ -73,11 +73,22 @@ const getLeftOffset = (caretX = 0, align?: 'left' | 'right' | 'center') => {
export const ChartTooltipContainer: FC<IChartTooltipProps> = ({
tooltip,
children,
}) => (
}) => {
const [top, setTop] = useState(0);
const [left, setLeft] = useState(0);
useEffect(() => {
if (tooltip) {
setTop(tooltip.caretY + offset);
setLeft(getLeftOffset(tooltip.caretX, tooltip.align));
}
}, [tooltip]);
return (
<Box
sx={(theme) => ({
top: (tooltip?.caretY || 0) + offset,
left: getLeftOffset(tooltip?.caretX, tooltip?.align),
top: 0,
left: 0,
transform: `translate(${left}px, ${top}px)`,
transition: 'transform 0.3s ease-in-out',
width: '1px',
position: 'absolute',
display: tooltip ? 'flex' : 'none',
@ -89,7 +100,8 @@ export const ChartTooltipContainer: FC<IChartTooltipProps> = ({
>
{children}
</Box>
);
);
};
export const ChartTooltip: VFC<IChartTooltipProps> = ({ tooltip }) => (
<ChartTooltipContainer tooltip={tooltip}>