From a9ba2504d7e12c6af3c7da990f66267c2e8236c3 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Thu, 13 Mar 2025 17:52:45 -0700 Subject: [PATCH] Use FloatingTooltip from zen. --- package.json | 4 +- pnpm-lock.yaml | 79 ++----------------- src/components/charts/BarChart.tsx | 2 +- src/components/charts/BarChartTooltip.tsx | 35 ++++---- src/components/charts/Chart.tsx | 9 +-- src/components/common/HoverTooltip.module.css | 6 -- src/components/common/HoverTooltip.tsx | 25 ------ src/components/input/LogoutButton.tsx | 22 ------ src/components/metrics/WorldMap.tsx | 4 +- 9 files changed, 37 insertions(+), 149 deletions(-) delete mode 100644 src/components/common/HoverTooltip.module.css delete mode 100644 src/components/common/HoverTooltip.tsx delete mode 100644 src/components/input/LogoutButton.tsx diff --git a/package.json b/package.json index 6adb1de2..cfe45369 100644 --- a/package.json +++ b/package.json @@ -195,6 +195,8 @@ "prisma", "sharp" ], - "overrides": {} + "overrides": { + "@umami/react-zen": "link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen" + } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b011c21c..1c05b369 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,9 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + '@umami/react-zen': link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen + importers: .: @@ -45,8 +48,8 @@ importers: specifier: ^0.14.0 version: 0.14.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.4.1(prisma@6.4.1(typescript@5.8.2))(typescript@5.8.2))) '@umami/react-zen': - specifier: ^0.63.0 - version: 0.63.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0)) + specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen + version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen '@umami/redis-client': specifier: ^0.26.0 version: 0.26.0 @@ -173,6 +176,9 @@ importers: react-window: specifier: ^1.8.11 version: 1.8.11(react-dom@19.0.0(react@19.0.0))(react@19.0.0) + react-zen: + specifier: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen + version: link:C:/Users/mike/AppData/Local/pnpm/global/5/node_modules/@umami/react-zen request-ip: specifier: ^3.3.0 version: 3.3.0 @@ -1493,9 +1499,6 @@ packages: '@fontsource/inter@4.5.15': resolution: {integrity: sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q==} - '@fontsource/jetbrains-mono@5.2.5': - resolution: {integrity: sha512-TPZ9b/uq38RMdrlZZkl0RwN8Ju9JxuqMETrw76pUQFbGtE1QbwQaNsLlnUrACNNBNbd0NZRXiJJSkC8ajPgbew==} - '@formatjs/cli@4.8.4': resolution: {integrity: sha512-zZI8QYVl5CHaT6j9OHjS+0mMnWzopBVH0un4n5b4IhIJRzIKnxwFTkxBp5Ifqj6FntrwzIGqP+D6v8u7MPYsmw==} hasBin: true @@ -2937,9 +2940,6 @@ packages: '@prisma/client': ^4.8.0 '@prisma/extension-read-replicas': ^0.3.0 - '@umami/react-zen@0.63.0': - resolution: {integrity: sha512-D6oK6p5JFcaEYz7+CEuxZ9/wlPsUlLlNm7NX/7zFXScR3TqkAUgYRBV4cIFHsA7tLSrzR7BvUEA00FcL432Pfw==} - '@umami/redis-client@0.26.0': resolution: {integrity: sha512-j2vxb1gYF5zfk7BkrHgau2MwKsB5ijbQh2w1WoIvbP41cqTMsFm/zUrjhZ0cP1ZxR/riQR1AWxKmqNggYRZ5eA==} @@ -6199,11 +6199,6 @@ packages: peerDependencies: react: ^16.8.0 || ^17 || ^18 || ^19 - react-icons@5.5.0: - resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==} - peerDependencies: - react: '*' - react-intl@7.1.6: resolution: {integrity: sha512-TgyzN0GJDILl4EIjbBWJddp+zRMx7IrYXeeUBwDisXfuglJaafAUVYYTx9wTWMRJrm2LubaCeH3L68mIPTmUYA==} peerDependencies: @@ -7245,24 +7240,6 @@ packages: react: optional: true - zustand@5.0.3: - resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==} - engines: {node: '>=12.20.0'} - peerDependencies: - '@types/react': '>=18.0.0' - immer: '>=9.0.6' - react: '>=18.0.0' - use-sync-external-store: '>=1.2.0' - peerDependenciesMeta: - '@types/react': - optional: true - immer: - optional: true - react: - optional: true - use-sync-external-store: - optional: true - snapshots: '@ampproject/remapping@2.3.0': @@ -8458,8 +8435,6 @@ snapshots: '@fontsource/inter@4.5.15': {} - '@fontsource/jetbrains-mono@5.2.5': {} - '@formatjs/cli@4.8.4(ts-jest@29.2.6(@babel/core@7.26.9)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.26.9))(esbuild@0.25.0)(jest@29.7.0(@types/node@22.13.9)(ts-node@10.9.2(@types/node@22.13.9)(typescript@5.8.2)))(typescript@5.8.2))': dependencies: '@formatjs/icu-messageformat-parser': 2.1.0 @@ -10529,33 +10504,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@umami/react-zen@0.63.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.4.0(react@19.0.0))': - dependencies: - '@fontsource/jetbrains-mono': 5.2.5 - '@react-aria/focus': 3.19.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - '@react-spring/web': 9.7.5(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - classnames: 2.5.1 - glob: 10.3.10 - lucide-react: 0.475.0(react@19.0.0) - next: 15.2.1(@babel/core@7.26.9)(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - react: 19.0.0 - react-aria-components: 1.6.0(react-dom@19.0.0(react@19.0.0))(react@19.0.0) - react-dom: 19.0.0(react@19.0.0) - react-hook-form: 7.54.2(react@19.0.0) - react-icons: 5.5.0(react@19.0.0) - thenby: 1.3.4 - zustand: 5.0.3(@types/react@19.0.10)(immer@9.0.21)(react@19.0.0)(use-sync-external-store@1.4.0(react@19.0.0)) - transitivePeerDependencies: - - '@babel/core' - - '@opentelemetry/api' - - '@playwright/test' - - '@types/react' - - babel-plugin-macros - - babel-plugin-react-compiler - - immer - - sass - - use-sync-external-store - '@umami/redis-client@0.26.0': dependencies: debug: 4.4.0(supports-color@8.1.1) @@ -14375,10 +14323,6 @@ snapshots: dependencies: react: 19.0.0 - react-icons@5.5.0(react@19.0.0): - dependencies: - react: 19.0.0 - react-intl@7.1.6(react@19.0.0)(typescript@5.8.2): dependencies: '@formatjs/ecma402-abstract': 2.3.3 @@ -15600,10 +15544,3 @@ snapshots: '@types/react': 19.0.10 immer: 9.0.21 react: 19.0.0 - - zustand@5.0.3(@types/react@19.0.10)(immer@9.0.21)(react@19.0.0)(use-sync-external-store@1.4.0(react@19.0.0)): - optionalDependencies: - '@types/react': 19.0.10 - immer: 9.0.21 - react: 19.0.0 - use-sync-external-store: 1.4.0(react@19.0.0) diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx index 1ad8ed21..cd27cb85 100644 --- a/src/components/charts/BarChart.tsx +++ b/src/components/charts/BarChart.tsx @@ -1,8 +1,8 @@ +import { useMemo, useState } from 'react'; import { BarChartTooltip } from '@/components/charts/BarChartTooltip'; import { Chart, ChartProps } from '@/components/charts/Chart'; import { useTheme } from '@/components/hooks'; import { renderNumberLabels } from '@/lib/charts'; -import { useMemo, useState } from 'react'; export interface BarChartProps extends ChartProps { unit: string; diff --git a/src/components/charts/BarChartTooltip.tsx b/src/components/charts/BarChartTooltip.tsx index 45f4a067..9919fab5 100644 --- a/src/components/charts/BarChartTooltip.tsx +++ b/src/components/charts/BarChartTooltip.tsx @@ -1,7 +1,7 @@ import { useLocale } from '@/components/hooks'; import { formatDate } from '@/lib/date'; import { formatLongCurrency, formatLongNumber } from '@/lib/format'; -import { Flexbox, StatusLight } from '@umami/react-zen'; +import { Column, Row, StatusLight, FloatingTooltip, TooltipBubble } from '@umami/react-zen'; const formats = { millisecond: 'T', @@ -20,18 +20,25 @@ export function BarChartTooltip({ tooltip, unit, currency }) { const { labelColors, dataPoints } = tooltip; return ( - -
- {formatDate(new Date(dataPoints[0].raw.d || dataPoints[0].raw.x), formats[unit], locale)} -
-
- - {currency - ? formatLongCurrency(dataPoints[0].raw.y, currency) - : formatLongNumber(dataPoints[0].raw.y)}{' '} - {dataPoints[0].dataset.label} - -
- + + + + + {formatDate( + new Date(dataPoints[0].raw.d || dataPoints[0].raw.x), + formats[unit], + locale, + )} + + + + {currency + ? formatLongCurrency(dataPoints[0].raw.y, currency) + : `${formatLongNumber(dataPoints[0].raw.y)} ${dataPoints[0].dataset.label}`} + + + + + ); } diff --git a/src/components/charts/Chart.tsx b/src/components/charts/Chart.tsx index bcdb9cb7..54e82e92 100644 --- a/src/components/charts/Chart.tsx +++ b/src/components/charts/Chart.tsx @@ -2,7 +2,6 @@ import { useState, useRef, useEffect, useMemo, ReactNode } from 'react'; import { Loading } from '@umami/react-zen'; import classNames from 'classnames'; import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto'; -import { HoverTooltip } from '@/components/common/HoverTooltip'; import { Legend } from '@/components/metrics/Legend'; import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants'; import styles from './Chart.module.css'; @@ -34,7 +33,7 @@ export function Chart({ className, chartOptions, }: ChartProps) { - const canvas = useRef(); + const canvas = useRef(null); const chart = useRef(null); const [legendItems, setLegendItems] = useState([]); @@ -143,11 +142,7 @@ export function Chart({ - {tooltip && ( - -
{tooltip}
- - )} + {tooltip} ); } diff --git a/src/components/common/HoverTooltip.module.css b/src/components/common/HoverTooltip.module.css deleted file mode 100644 index c4bb76ea..00000000 --- a/src/components/common/HoverTooltip.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.tooltip { - position: fixed; - pointer-events: none; - z-index: var(--z-index-popup); - transform: translate(-50%, calc(-100% - 5px)); -} diff --git a/src/components/common/HoverTooltip.tsx b/src/components/common/HoverTooltip.tsx deleted file mode 100644 index 1d26a83e..00000000 --- a/src/components/common/HoverTooltip.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { ReactNode, useEffect, useState } from 'react'; -import { Tooltip } from '@umami/react-zen'; -import styles from './HoverTooltip.module.css'; - -export function HoverTooltip({ children }: { children: ReactNode }) { - const [position, setPosition] = useState({ x: -1000, y: -1000 }); - - useEffect(() => { - const handler = e => { - setPosition({ x: e.clientX, y: e.clientY }); - }; - - document.addEventListener('mousemove', handler); - - return () => { - document.removeEventListener('mousemove', handler); - }; - }, []); - - return ( - - {children} - - ); -} diff --git a/src/components/input/LogoutButton.tsx b/src/components/input/LogoutButton.tsx deleted file mode 100644 index add0eff9..00000000 --- a/src/components/input/LogoutButton.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Button, Icon, Icons, TooltipPopup } from '@umami/react-zen'; -import Link from 'next/link'; -import { useMessages } from '@/components/hooks'; - -export function LogoutButton({ - tooltipPosition = 'top', -}: { - tooltipPosition?: 'top' | 'bottom' | 'left' | 'right'; -}) { - const { formatMessage, labels } = useMessages(); - return ( - - - - - - ); -} diff --git a/src/components/metrics/WorldMap.tsx b/src/components/metrics/WorldMap.tsx index 2ea028e0..f6582013 100644 --- a/src/components/metrics/WorldMap.tsx +++ b/src/components/metrics/WorldMap.tsx @@ -2,7 +2,6 @@ import { useState, useMemo, HTMLAttributes } from 'react'; import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps'; import classNames from 'classnames'; import { colord } from 'colord'; -import { HoverTooltip } from '@/components/common/HoverTooltip'; import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants'; import { useDateRange, useTheme, useWebsiteMetrics } from '@/components/hooks'; import { useCountryNames } from '@/components/hooks'; @@ -11,6 +10,7 @@ import { useMessages } from '@/components/hooks'; import { formatLongNumber } from '@/lib/format'; import { percentFilter } from '@/lib/filters'; import styles from './WorldMap.module.css'; +import { FloatingTooltip } from '@umami/react-zen'; export function WorldMap({ websiteId, @@ -104,7 +104,7 @@ export function WorldMap({ - {tooltip && {tooltip}} + {tooltip && {tooltip}} ); }