watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-08 14:47:14 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Fixed issue with hover tooltips.

Browse source
This commit is contained in:
Mike Cao 2023-06-15 20:15:31 -07:00
parent 2b13002f1b
commit ab0838e272
20 changed files with 50 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/common/HoverTooltip.js
View file

@ -18,9 +18,9 @@ export function HoverTooltip({ children }) {
}, []);
return (
<div className={styles.tooltip} style={{ left: position.x, top: position.y - 16 }}>
<Tooltip position="top" action="none" label={children} />
</div>
<Tooltip className={styles.tooltip} style={{ left: position.x, top: position.y }}>
{children}
</Tooltip>
);
}

39
components/common/HoverTooltip.module.css
View file

@ -1,43 +1,6 @@
.chart {
position: relative;
}
.tooltip {
position: fixed;
pointer-events: none;
z-index: var(--z-index-popup);
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-size: var(--font-size-xs);
font-weight: 600;
}
.metric {
display: flex;
justify-content: center;
align-items: center;
font-size: var(--font-size-sm);
font-weight: 600;
}
.dot {
position: relative;
overflow: hidden;
border-radius: 100%;
margin-right: 8px;
background: var(--base50);
}
.color {
width: 10px;
height: 10px;
transform: translate(-50%, calc(-100% - 5px));
}

6
components/common/WorldMap.js
View file

@ -14,7 +14,7 @@ import styles from './WorldMap.module.css';
export function WorldMap({ data, className }) {
const { basePath } = useRouter();
const [tooltip, setTooltip] = useState();
const [tooltip, setTooltipPopup] = useState();
const { theme, colors } = useTheme();
const { locale } = useLocale();
const countryNames = useCountryNames(locale);
@ -40,7 +40,7 @@ export function WorldMap({ data, className }) {
function handleHover(code) {
if (code === 'AQ') return;
const country = metrics?.find(({ x }) => x === code);
setTooltip(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`);
setTooltipPopup(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`);
}
return (
@ -69,7 +69,7 @@ export function WorldMap({ data, className }) {
pressed: { outline: 'none' },
}}
onMouseOver={() => handleHover(code)}
onMouseOut={() => setTooltip(null)}
onMouseOut={() => setTooltipPopup(null)}
/>
);
});