From 08f9adaddf3074d789bd9c090724de9a9bbac40e Mon Sep 17 00:00:00 2001 From: Mike Cao Date: Sat, 23 Aug 2025 03:05:21 -0700 Subject: [PATCH] Updated expanded view. Some style fixes. --- .../websites/[websiteId]/WebsiteChart.tsx | 8 +- .../[websiteId]/WebsiteExpandedView.tsx | 191 +++++++++++------- .../websites/[websiteId]/WebsitePage.tsx | 2 +- .../websites/[websiteId]/WebsitePanels.tsx | 12 +- src/components/common/FilterLink.tsx | 10 +- src/components/common/SideMenu.tsx | 13 +- src/components/messages.ts | 3 +- src/components/metrics/MetricLabel.tsx | 10 +- .../metrics/MetricsExpandedTable.tsx | 6 +- src/components/metrics/MetricsTable.tsx | 4 +- src/lib/constants.ts | 4 +- src/queries/sql/events/getEventMetrics.ts | 14 +- .../pageviews/getPageviewExpandedMetrics.ts | 2 +- 13 files changed, 164 insertions(+), 115 deletions(-) diff --git a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx index 620f9f20..743b4f62 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteChart.tsx @@ -47,13 +47,7 @@ export function WebsiteChart({ }, [data, startDate, endDate, unit]); return ( - + - - - {items.map(({ id, label, path }) => { - return ( - - {label} - - ); - })} - + + diff --git a/src/app/(main)/websites/[websiteId]/WebsitePage.tsx b/src/app/(main)/websites/[websiteId]/WebsitePage.tsx index 0b8b1c59..f32d3a13 100644 --- a/src/app/(main)/websites/[websiteId]/WebsitePage.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsitePage.tsx @@ -29,7 +29,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) { - + diff --git a/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx b/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx index 1d8f89d3..b7358649 100644 --- a/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsitePanels.tsx @@ -24,11 +24,11 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) { {formatMessage(labels.pages)} - {formatMessage(labels.pages)} + {formatMessage(labels.path)} {formatMessage(labels.entry)} {formatMessage(labels.exit)} - + @@ -47,10 +47,14 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) { {formatMessage(labels.channels)} - + - + diff --git a/src/components/common/FilterLink.tsx b/src/components/common/FilterLink.tsx index 982c0c3b..69e225b9 100644 --- a/src/components/common/FilterLink.tsx +++ b/src/components/common/FilterLink.tsx @@ -1,6 +1,6 @@ import { HTMLAttributes, ReactNode, useState } from 'react'; import Link from 'next/link'; -import { Icon, Row } from '@umami/react-zen'; +import { Icon, Row, Text } from '@umami/react-zen'; import { useMessages, useNavigation } from '@/components/hooks'; import { ExternalLink } from '@/components/icons'; @@ -31,9 +31,11 @@ export function FilterLink({ type, value, label, externalUrl, icon }: FilterLink {icon} {!value && `(${label || formatMessage(labels.unknown)})`} {value && ( - - {label || value} - + + + {label || value} + + )} {externalUrl && showLink && ( diff --git a/src/components/common/SideMenu.tsx b/src/components/common/SideMenu.tsx index 2ded54f8..c92eeb56 100644 --- a/src/components/common/SideMenu.tsx +++ b/src/components/common/SideMenu.tsx @@ -1,3 +1,4 @@ +import { ReactNode } from 'react'; import { Text, Heading, @@ -7,15 +8,16 @@ import { Row, Column, NavMenuGroup, + NavMenuProps, } from '@umami/react-zen'; import Link from 'next/link'; -export interface SideMenuProps { +export interface SideMenuProps extends NavMenuProps { items: { label: string; items: { id: string; label: string; icon?: any; path: string }[] }[]; title?: string; selectedKey?: string; allowMinimize?: boolean; - children?: React.ReactNode; + children?: ReactNode; } export function SideMenu({ @@ -24,6 +26,7 @@ export function SideMenu({ selectedKey, allowMinimize, children, + ...props }: SideMenuProps) { return ( {title} )} - - {items?.map(({ label, items }) => { + + {items?.map(({ label, items }, index) => { return ( ); - case 'grouped': + case 'domain': if (label === 'Other') { return `(${formatMessage(labels.other)})`; } else { + const name = GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name; + + if (!name) { + return null; + } + return ( - {GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name} + {name} ); } diff --git a/src/components/metrics/MetricsExpandedTable.tsx b/src/components/metrics/MetricsExpandedTable.tsx index f49cba36..f90f1b70 100644 --- a/src/components/metrics/MetricsExpandedTable.tsx +++ b/src/components/metrics/MetricsExpandedTable.tsx @@ -70,7 +70,11 @@ export function MetricsExpandedTable({ {items && ( - {row => } + {row => ( + + + + )} {row => row?.['visitors']?.toLocaleString()} diff --git a/src/components/metrics/MetricsTable.tsx b/src/components/metrics/MetricsTable.tsx index 0e545008..f65b6321 100644 --- a/src/components/metrics/MetricsTable.tsx +++ b/src/components/metrics/MetricsTable.tsx @@ -55,8 +55,8 @@ export function MetricsTable({ return []; }, [data, dataFilter, limit, type]); - const renderLabel = (data: any) => { - return ; + const renderLabel = (row: any) => { + return ; }; return ( diff --git a/src/lib/constants.ts b/src/lib/constants.ts index 759690b6..f2e9175c 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -34,7 +34,7 @@ export const EVENT_COLUMNS = [ 'entry', 'exit', 'referrer', - 'grouped', + 'domain', 'title', 'query', 'event', @@ -63,7 +63,7 @@ export const FILTER_COLUMNS = { entry: 'url_path', exit: 'url_path', referrer: 'referrer_domain', - grouped: 'referrer_domain', + domain: 'referrer_domain', hostname: 'hostname', title: 'page_title', query: 'url_query', diff --git a/src/queries/sql/events/getEventMetrics.ts b/src/queries/sql/events/getEventMetrics.ts index 4ecfe2d5..6966bc2e 100644 --- a/src/queries/sql/events/getEventMetrics.ts +++ b/src/queries/sql/events/getEventMetrics.ts @@ -4,21 +4,21 @@ import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db'; import prisma from '@/lib/prisma'; import { QueryFilters } from '@/lib/types'; -export interface WebsiteEventMetricParameters { +export interface EventMetricParameters { type: string; limit?: string; offset?: string; } -export interface WebsiteEventMetricData { +export interface EventMetricData { x: string; t: string; y: number; } export async function getEventMetrics( - ...args: [websiteId: string, parameters: WebsiteEventMetricParameters, filters: QueryFilters] -): Promise { + ...args: [websiteId: string, parameters: EventMetricParameters, filters: QueryFilters] +): Promise { return runQuery({ [PRISMA]: () => relationalQuery(...args), [CLICKHOUSE]: () => clickhouseQuery(...args), @@ -27,7 +27,7 @@ export async function getEventMetrics( async function relationalQuery( websiteId: string, - parameters: WebsiteEventMetricParameters, + parameters: EventMetricParameters, filters: QueryFilters, ) { const { type, limit = 500, offset = 0 } = parameters; @@ -63,9 +63,9 @@ async function relationalQuery( async function clickhouseQuery( websiteId: string, - parameters: WebsiteEventMetricParameters, + parameters: EventMetricParameters, filters: QueryFilters, -): Promise { +): Promise { const { type, limit = 500, offset = 0 } = parameters; const column = FILTER_COLUMNS[type] || type; const { rawQuery, parseFilters } = clickhouse; diff --git a/src/queries/sql/pageviews/getPageviewExpandedMetrics.ts b/src/queries/sql/pageviews/getPageviewExpandedMetrics.ts index 3d0e2f8c..d9d76776 100644 --- a/src/queries/sql/pageviews/getPageviewExpandedMetrics.ts +++ b/src/queries/sql/pageviews/getPageviewExpandedMetrics.ts @@ -111,7 +111,7 @@ async function clickhouseQuery( if (column === 'referrer_domain') { excludeDomain = `and referrer_domain != hostname and referrer_domain != ''`; - if (type === 'grouped') { + if (type === 'domain') { column = toClickHouseGroupedReferrer(GROUPED_DOMAINS); } }