Panels redesign.

This commit is contained in:
Mike Cao 2025-03-25 14:47:51 -07:00
parent 7886c3f393
commit f5bc3dc6c2
58 changed files with 530 additions and 733 deletions

View file

@ -4,7 +4,7 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
import { getDayOfWeekAsDate } from '@/lib/date';
import styles from './SessionsWeekly.module.css';
import classNames from 'classnames';
import { Tooltip, TooltipTrigger } from '@umami/react-zen';
import { Focusable, Tooltip, TooltipTrigger } from '@umami/react-zen';
export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const { data, ...props } = useWebsiteSessionsWeeklyQuery(websiteId);
@ -67,12 +67,16 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
return (
<div key={j} className={classNames(styles.cell)}>
{hour > 0 && (
<TooltipTrigger>
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
<Tooltip>{`${formatMessage(labels.visitors)}: ${hour}`}</Tooltip>
<TooltipTrigger delay={0}>
<Focusable>
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</Focusable>
<Tooltip placement="right">{`${formatMessage(
labels.visitors,
)}: ${hour}`}</Tooltip>
</TooltipTrigger>
)}
</div>