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}}
);
}