From 1d24e23a34389e91857215b1725a7324b78fc6b3 Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sun, 6 Apr 2025 08:13:55 -0700 Subject: [PATCH] Updated grid layouts. Fixed chart tooltip. --- package.json | 2 +- pnpm-lock.yaml | 22 ++++----- .../websites/[websiteId]/WebsiteHeader.tsx | 4 +- .../websites/[websiteId]/WebsiteTableView.tsx | 47 ++++++------------- src/components/charts/BarChart.tsx | 22 ++++----- src/components/charts/Chart.tsx | 6 +-- src/components/common/GridRow.tsx | 18 +++++-- src/components/common/TypeIcon.tsx | 6 +-- src/components/input/TeamsButton.tsx | 16 ++----- 9 files changed, 64 insertions(+), 79 deletions(-) diff --git a/package.json b/package.json index d7cdf1cd..2808907c 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ "@react-spring/web": "^9.7.5", "@tanstack/react-query": "^5.68.0", "@umami/prisma-client": "^0.16.0", - "@umami/react-zen": "^0.77.0", + "@umami/react-zen": "^0.79.0", "@umami/redis-client": "^0.27.0", "bcryptjs": "^2.4.3", "chalk": "^4.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3bc058b1..969e2c03 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -45,8 +45,8 @@ importers: specifier: ^0.16.0 version: 0.16.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))(@prisma/extension-read-replicas@0.4.0(@prisma/client@6.5.0(prisma@6.5.0(typescript@5.8.2))(typescript@5.8.2))) '@umami/react-zen': - specifier: ^0.77.0 - version: 0.77.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.0.0)) + specifier: ^0.79.0 + version: 0.79.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.0.0)) '@umami/redis-client': specifier: ^0.27.0 version: 0.27.0 @@ -2961,8 +2961,8 @@ packages: '@prisma/client': ^4.8.0 '@prisma/extension-read-replicas': ^0.3.0 - '@umami/react-zen@0.77.0': - resolution: {integrity: sha512-tdoPdCMfPOhBMEiGXZ62zfTG8qjto7Ii+mWXNX2qdPjZ+SP5AB8wnQpqIGiXoUZUnP41iWw0GS97sTZq3xeEBQ==} + '@umami/react-zen@0.79.0': + resolution: {integrity: sha512-qumZSV/dWvtq7iR7QwxEO5emE/jzgI5uPP5Y1E9S+MMGnJRhD5gQ1TvURf+jYAlTuiPubLysu6U3nKYmPNJxUg==} '@umami/redis-client@0.27.0': resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==} @@ -3329,8 +3329,8 @@ packages: caniuse-lite@1.0.30001702: resolution: {integrity: sha512-LoPe/D7zioC0REI5W73PeR1e1MLCipRGq/VkovJnd6Df+QVqT+vT33OXCp8QUd7kA7RZrHWxb1B36OQKI/0gOA==} - caniuse-lite@1.0.30001709: - resolution: {integrity: sha512-NgL3vUTnDrPCZ3zTahp4fsugQ4dc7EKTSzwQDPEel6DMoMnfH2jhry9n2Zm8onbSR+f/QtKHFOA+iAQu4kbtWA==} + caniuse-lite@1.0.30001712: + resolution: {integrity: sha512-MBqPpGYYdQ7/hfKiet9SCI+nmN5/hp4ZzveOJubl5DTAMa5oggjAuoi0Z4onBpKPFI2ePGnQuQIzF3VxDjDJig==} caseless@0.12.0: resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==} @@ -10646,7 +10646,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@umami/react-zen@0.77.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.0.0))': + '@umami/react-zen@0.79.0(@babel/core@7.26.9)(@types/react@19.0.10)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.0.0))': dependencies: '@fontsource/jetbrains-mono': 5.2.5 '@react-aria/focus': 3.20.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -11120,13 +11120,13 @@ snapshots: caniuse-api@3.0.0: dependencies: browserslist: 4.24.4 - caniuse-lite: 1.0.30001709 + caniuse-lite: 1.0.30001712 lodash.memoize: 4.1.2 lodash.uniq: 4.5.0 caniuse-lite@1.0.30001702: {} - caniuse-lite@1.0.30001709: {} + caniuse-lite@1.0.30001712: {} caseless@0.12.0: {} @@ -13667,7 +13667,7 @@ snapshots: '@swc/counter': 0.1.3 '@swc/helpers': 0.5.15 busboy: 1.6.0 - caniuse-lite: 1.0.30001709 + caniuse-lite: 1.0.30001712 postcss: 8.4.31 react: 19.0.0 react-dom: 19.0.0(react@19.0.0) @@ -13692,7 +13692,7 @@ snapshots: '@swc/counter': 0.1.3 '@swc/helpers': 0.5.15 busboy: 1.6.0 - caniuse-lite: 1.0.30001709 + caniuse-lite: 1.0.30001712 postcss: 8.4.31 react: 19.1.0 react-dom: 19.1.0(react@19.1.0) diff --git a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx index 9f33d0a3..eafa6d32 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx @@ -10,15 +10,17 @@ import { WebsiteMenu } from '@/app/(main)/websites/[websiteId]/WebsiteMenu'; import { WebsiteCompareBar } from '@/app/(main)/websites/[websiteId]/WebsiteCompareBar'; export function WebsiteHeader({ + websiteId, showFilter = true, allowEdit = true, }: { + websiteId: string; showFilter?: boolean; allowEdit?: boolean; compareMode?: boolean; }) { const website = useWebsite(); - const { id: websiteId, name, domain } = website || {}; + const { name, domain } = website || {}; return ( diff --git a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx index acd268c8..7395213d 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx @@ -1,4 +1,5 @@ import { Grid } from '@umami/react-zen'; +import { GridRow } from '@/components/common/GridRow'; import { Panel } from '@/components/common/Panel'; import { PagesTable } from '@/components/metrics/PagesTable'; import { ReferrersTable } from '@/components/metrics/ReferrersTable'; @@ -7,57 +8,37 @@ import { OSTable } from '@/components/metrics/OSTable'; import { DevicesTable } from '@/components/metrics/DevicesTable'; import { WorldMap } from '@/components/metrics/WorldMap'; import { CountriesTable } from '@/components/metrics/CountriesTable'; -import { EventsTable } from '@/components/metrics/EventsTable'; -import { EventsChart } from '@/components/metrics/EventsChart'; -import { usePathname } from 'next/navigation'; export function WebsiteTableView({ websiteId }: { websiteId: string }) { - const pathname = usePathname(); - const tableProps = { - websiteId, - limit: 10, - }; - const isSharePage = pathname.includes('/share/'); - return ( - + - + - + - - + + - + - + - + - - - + + + - + - - {isSharePage && ( - - - - - - - - - )} + ); } diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx index 026bc322..bc4ac6d3 100644 --- a/src/components/charts/BarChart.tsx +++ b/src/components/charts/BarChart.tsx @@ -82,19 +82,19 @@ export function BarChart(props: BarChartProps) { const handleTooltip = ({ tooltip }: { tooltip: any }) => { const { opacity } = tooltip; - setTooltip( - opacity ? : null, - ); + setTooltip(opacity ? tooltip : null); }; return ( - + <> + + {tooltip && } + ); } diff --git a/src/components/charts/Chart.tsx b/src/components/charts/Chart.tsx index e47ea3cd..9890b3ae 100644 --- a/src/components/charts/Chart.tsx +++ b/src/components/charts/Chart.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, useEffect, useMemo, ReactNode, HTMLAttributes } from 'react'; +import { useState, useRef, useEffect, useMemo, HTMLAttributes } from 'react'; import { Loading } from '@umami/react-zen'; import ChartJS, { LegendItem, ChartOptions } from 'chart.js/auto'; import { Legend } from '@/components/metrics/Legend'; @@ -14,7 +14,6 @@ export interface ChartProps extends HTMLAttributes { onUpdate?: (chart: any) => void; onTooltip?: (model: any) => void; chartOptions?: ChartOptions; - tooltip?: ReactNode; } export function Chart({ @@ -27,7 +26,6 @@ export function Chart({ onUpdate, onTooltip, chartOptions, - tooltip, ...props }: ChartProps) { const canvas = useRef(null); @@ -53,6 +51,7 @@ export function Chart({ }, tooltip: { enabled: false, + intersect: true, external: onTooltip, }, }, @@ -139,7 +138,6 @@ export function Chart({ - {tooltip} ); } diff --git a/src/components/common/GridRow.tsx b/src/components/common/GridRow.tsx index 9546651d..b49ddbf9 100644 --- a/src/components/common/GridRow.tsx +++ b/src/components/common/GridRow.tsx @@ -2,10 +2,20 @@ import { Grid } from '@umami/react-zen'; const LAYOUTS = { one: { columns: '1fr' }, - two: { columns: { xs: '1fr', sm: '1fr', md: '1fr 1fr', lg: '1fr 1fr' } }, - three: { columns: { xs: '1fr', sm: '1fr', md: '1fr 1fr 1fr', lg: '1fr 2fr' } }, - 'one-two': { columns: { xs: '1fr', sm: '1fr', md: '1fr 2fr', lg: '1fr 2fr' } }, - 'two-one': { columns: { xs: '1fr', sm: '1fr', md: '2fr 1fr', lg: '2fr 1fr', xl: '2fr 1fr' } }, + two: { + columns: { + xs: '1fr', + md: 'repeat(auto-fill, minmax(600px, 1fr))', + }, + }, + three: { + columns: { + xs: '1fr', + md: 'repeat(auto-fill, minmax(400px, 1fr))', + }, + }, + 'one-two': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } }, + 'two-one': { columns: { xs: '1fr', lg: 'repeat(3, 1fr)' } }, }; export function GridRow(props: { diff --git a/src/components/common/TypeIcon.tsx b/src/components/common/TypeIcon.tsx index 39505265..746d6593 100644 --- a/src/components/common/TypeIcon.tsx +++ b/src/components/common/TypeIcon.tsx @@ -13,9 +13,9 @@ export function TypeIcon({ return ( { e.currentTarget.src = `${process.env.basePath || ''}/images/${type}/unknown.png`; }} diff --git a/src/components/input/TeamsButton.tsx b/src/components/input/TeamsButton.tsx index c1eb453c..aea6d8a9 100644 --- a/src/components/input/TeamsButton.tsx +++ b/src/components/input/TeamsButton.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { Key } from 'react'; import { useRouter } from 'next/navigation'; import { Text, @@ -30,16 +30,10 @@ export function TeamsButton({ const { teamId } = useNavigation(); const router = useRouter(); const team = result?.data?.find(({ id }) => id === teamId); - const [selectedKeys, setSelectedKeys] = useState(new Set([teamId || user.id])); + const selectedKeys = new Set([teamId || user.id]); - const handleSelect = (keys: Set) => { - if (keys.size > 0) { - const [id] = [...keys]; - - router.push(id === user.id ? '/dashboard' : `/teams/${id}/dashboard`); - - setSelectedKeys(keys); - } + const handleSelect = (id: Key) => { + router.push(id === user.id ? '/dashboard' : `/teams/${id}/dashboard`); }; if (!result?.count) { @@ -63,7 +57,7 @@ export function TeamsButton({ selectionMode="single" selectedKeys={selectedKeys} autoFocus="last" - onSelectionChange={keys => handleSelect(keys as Set)} + onAction={handleSelect} >