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

Use opacity instead of rendering and unrendering the tooltip.

Browse Source
This commit is contained in:
Thomas Heartman 2025-08-28 13:52:45 +02:00
parent d814d9f5c7
commit 89bb5c23f2
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
1 changed files with 5 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
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 { useEffect, useState, type FC, type VFC } from 'react'; import type { FC, VFC } from 'react';
import { objectId } from 'utils/objectId'; import { objectId } from 'utils/objectId';
export type TooltipState = { export type TooltipState = {
@ -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;
@ -74,28 +62,22 @@ export const ChartTooltipContainer: FC<IChartTooltipProps> = ({
tooltip, tooltip,
children, children,
}) => { }) => {
const [top, setTop] = useState(0); const top = tooltip?.caretY ?? 0 + offset;
const [left, setLeft] = useState(0); const left = getLeftOffset(tooltip?.caretX, tooltip?.align);
useEffect(() => {
if (tooltip) {
setTop(tooltip.caretY + offset);
setLeft(getLeftOffset(tooltip.caretX, tooltip.align));
}
}, [tooltip]);
return ( return (
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
top: 0, top: 0,
left: 0, left: 0,
transform: `translate(${left}px, ${top}px)`, transform: `translate(${left}px, ${top}px)`,
transition: 'transform 0.3s ease-in-out', transition: 'transform 0.2s ease-in-out',
width: '1px', width: '1px',
position: 'absolute', position: 'absolute',
display: tooltip ? 'flex' : 'none', display: tooltip ? 'flex' : 'none',
pointerEvents: 'none', pointerEvents: 'none',
zIndex: theme.zIndex.tooltip, zIndex: theme.zIndex.tooltip,
flexDirection: 'column', flexDirection: 'column',
alignItems: getAlign(tooltip?.align), alignItems: 'center',
})} })}
> >
{children} {children}