watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-06 01:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Updated expanded view. Some style fixes.

Browse source
This commit is contained in:
Mike Cao 2025-08-23 03:05:21 -07:00
parent c8fe93dd9d
commit 08f9adaddf
13 changed files with 164 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/(main)/websites/[websiteId]/WebsiteChart.tsx
View file

@ -47,13 +47,7 @@ export function WebsiteChart({
}, [data, startDate, endDate, unit]); }, [data, startDate, endDate, unit]);
return ( return (
<LoadingPanel <LoadingPanel data={data} isFetching={isFetching} isLoading={isLoading} error={error}>
data={data}
isFetching={isFetching}
isLoading={isLoading}
error={error}
minHeight="520px"
>
<PageviewsChart <PageviewsChart
key={value} key={value}
data={chartData} data={chartData}

191
src/app/(main)/websites/[websiteId]/WebsiteExpandedView.tsx
View file

@ -1,7 +1,7 @@
import Link from 'next/link'; import { Grid, Column } from '@umami/react-zen';
import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks'; import { useMessages, useNavigation } from '@/components/hooks';
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable'; import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
import { SideMenu } from '@/components/common/SideMenu';
export function WebsiteExpandedView({ export function WebsiteExpandedView({
websiteId, websiteId,
@ -18,94 +18,131 @@ export function WebsiteExpandedView({
const items = [ const items = [
{ {
id: 'path',
label: formatMessage(labels.pages), label: formatMessage(labels.pages),
path: updateParams({ view: 'path' }), items: [
{
id: 'path',
label: formatMessage(labels.path),
path: updateParams({ view: 'path' }),
},
{
id: 'entry',
label: formatMessage(labels.entry),
path: updateParams({ view: 'entry' }),
},
{
id: 'exit',
label: formatMessage(labels.exit),
path: updateParams({ view: 'exit' }),
},
{
id: 'title',
label: formatMessage(labels.title),
path: updateParams({ view: 'title' }),
},
{
id: 'query',
label: formatMessage(labels.query),
path: updateParams({ view: 'query' }),
},
],
}, },
{ {
id: 'referrer', label: formatMessage(labels.sources),
label: formatMessage(labels.referrers), items: [
path: updateParams({ view: 'referrer' }), {
id: 'referrer',
label: formatMessage(labels.referrers),
path: updateParams({ view: 'referrer' }),
},
{
id: 'channel',
label: formatMessage(labels.channels),
path: updateParams({ view: 'channel' }),
},
{
id: 'domain',
label: formatMessage(labels.domain),
path: updateParams({ view: 'domain' }),
},
],
}, },
{ {
id: 'channel', label: formatMessage(labels.location),
label: formatMessage(labels.channels), items: [
path: updateParams({ view: 'channel' }), {
id: 'country',
label: formatMessage(labels.countries),
path: updateParams({ view: 'country' }),
},
{
id: 'region',
label: formatMessage(labels.regions),
path: updateParams({ view: 'region' }),
},
{
id: 'city',
label: formatMessage(labels.cities),
path: updateParams({ view: 'city' }),
},
],
}, },
{ {
id: 'browser', label: formatMessage(labels.environment),
label: formatMessage(labels.browsers), items: [
path: updateParams({ view: 'browser' }), {
id: 'browser',
label: formatMessage(labels.browsers),
path: updateParams({ view: 'browser' }),
},
{
id: 'os',
label: formatMessage(labels.os),
path: updateParams({ view: 'os' }),
},
{
id: 'device',
label: formatMessage(labels.devices),
path: updateParams({ view: 'device' }),
},
{
id: 'language',
label: formatMessage(labels.languages),
path: updateParams({ view: 'language' }),
},
{
id: 'screen',
label: formatMessage(labels.screens),
path: updateParams({ view: 'screen' }),
},
],
}, },
{ {
id: 'os', label: formatMessage(labels.other),
label: formatMessage(labels.os), items: [
path: updateParams({ view: 'os' }), {
}, id: 'event',
{ label: formatMessage(labels.events),
id: 'device', path: updateParams({ view: 'event' }),
label: formatMessage(labels.devices), },
path: updateParams({ view: 'device' }), {
}, id: 'hostname',
{ label: formatMessage(labels.hostname),
id: 'country', path: updateParams({ view: 'hostname' }),
label: formatMessage(labels.countries), },
path: updateParams({ view: 'country' }), {
}, id: 'tag',
{ label: formatMessage(labels.tags),
id: 'region', path: updateParams({ view: 'tag' }),
label: formatMessage(labels.regions), },
path: updateParams({ view: 'region' }), ],
},
{
id: 'city',
label: formatMessage(labels.cities),
path: updateParams({ view: 'city' }),
},
{
id: 'language',
label: formatMessage(labels.languages),
path: updateParams({ view: 'language' }),
},
{
id: 'screen',
label: formatMessage(labels.screens),
path: updateParams({ view: 'screen' }),
},
{
id: 'event',
label: formatMessage(labels.events),
path: updateParams({ view: 'event' }),
},
{
id: 'query',
label: formatMessage(labels.queryParameters),
path: updateParams({ view: 'query' }),
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
path: updateParams({ view: 'hostname' }),
},
{
id: 'tag',
label: formatMessage(labels.tags),
path: updateParams({ view: 'tag' }),
}, },
]; ];
return ( return (
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden"> <Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
<Column gap="6" width="200px" border="right" paddingRight="3"> <Column gap="6" border="right" paddingRight="3">
<NavMenu position="sticky" top="0"> <SideMenu items={items} selectedKey={view} />
{items.map(({ id, label, path }) => {
return (
<Link key={id} href={path}>
<NavMenuItem isSelected={id === view}>{label}</NavMenuItem>
</Link>
);
})}
</NavMenu>
</Column> </Column>
<Column overflow="hidden"> <Column overflow="hidden">
<MetricsExpandedTable <MetricsExpandedTable
@ -113,8 +150,6 @@ export function WebsiteExpandedView({
type={view} type={view}
websiteId={websiteId} websiteId={websiteId}
onClose={onClose} onClose={onClose}
allowSearch
allowDownload
/> />
</Column> </Column>
</Grid> </Grid>

2
src/app/(main)/websites/[websiteId]/WebsitePage.tsx
View file

@ -29,7 +29,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
<Column gap> <Column gap>
<WebsiteControls websiteId={websiteId} allowCompare={true} /> <WebsiteControls websiteId={websiteId} allowCompare={true} />
<WebsiteMetricsBar websiteId={websiteId} showChange={true} /> <WebsiteMetricsBar websiteId={websiteId} showChange={true} />
<Panel> <Panel minHeight="520px">
<WebsiteChart websiteId={websiteId} compareMode={compare} /> <WebsiteChart websiteId={websiteId} compareMode={compare} />
</Panel> </Panel>
<WebsitePanels websiteId={websiteId} /> <WebsitePanels websiteId={websiteId} />

12
src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
View file

@ -24,11 +24,11 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
<Heading size="2">{formatMessage(labels.pages)}</Heading> <Heading size="2">{formatMessage(labels.pages)}</Heading>
<Tabs> <Tabs>
<TabList> <TabList>
<Tab id="page">{formatMessage(labels.pages)}</Tab> <Tab id="path">{formatMessage(labels.path)}</Tab>
<Tab id="entry">{formatMessage(labels.entry)}</Tab> <Tab id="entry">{formatMessage(labels.entry)}</Tab>
<Tab id="exit">{formatMessage(labels.exit)}</Tab> <Tab id="exit">{formatMessage(labels.exit)}</Tab>
</TabList> </TabList>
<TabPanel id="page"> <TabPanel id="path">
<MetricsTable type="path" title={formatMessage(labels.path)} {...tableProps} /> <MetricsTable type="path" title={formatMessage(labels.path)} {...tableProps} />
</TabPanel> </TabPanel>
<TabPanel id="entry"> <TabPanel id="entry">
@ -47,10 +47,14 @@ export function WebsitePanels({ websiteId }: { websiteId: string }) {
<Tab id="channel">{formatMessage(labels.channels)}</Tab> <Tab id="channel">{formatMessage(labels.channels)}</Tab>
</TabList> </TabList>
<TabPanel id="referrer"> <TabPanel id="referrer">
<MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} /> <MetricsTable
type="referrer"
title={formatMessage(labels.referrer)}
{...tableProps}
/>
</TabPanel> </TabPanel>
<TabPanel id="channel"> <TabPanel id="channel">
<MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} /> <MetricsTable type="channel" title={formatMessage(labels.channel)} {...tableProps} />
</TabPanel> </TabPanel>
</Tabs> </Tabs>
</Panel> </Panel>

10
src/components/common/FilterLink.tsx
View file

@ -1,6 +1,6 @@
import { HTMLAttributes, ReactNode, useState } from 'react'; import { HTMLAttributes, ReactNode, useState } from 'react';
import Link from 'next/link'; 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 { useMessages, useNavigation } from '@/components/hooks';
import { ExternalLink } from '@/components/icons'; import { ExternalLink } from '@/components/icons';
@ -31,9 +31,11 @@ export function FilterLink({ type, value, label, externalUrl, icon }: FilterLink
{icon} {icon}
{!value && `(${label || formatMessage(labels.unknown)})`} {!value && `(${label || formatMessage(labels.unknown)})`}
{value && ( {value && (
<Link href={updateParams({ [type]: `eq.${value}` })} replace> <Text title={label || value} truncate>
{label || value} <Link href={updateParams({ [type]: `eq.${value}` })} replace>
</Link> {label || value}
</Link>
</Text>
)} )}
{externalUrl && showLink && ( {externalUrl && showLink && (
<a href={externalUrl} target="_blank" rel="noreferrer noopener"> <a href={externalUrl} target="_blank" rel="noreferrer noopener">

13
src/components/common/SideMenu.tsx
View file

@ -1,3 +1,4 @@
import { ReactNode } from 'react';
import { import {
Text, Text,
Heading, Heading,
@ -7,15 +8,16 @@ import {
Row, Row,
Column, Column,
NavMenuGroup, NavMenuGroup,
NavMenuProps,
} from '@umami/react-zen'; } from '@umami/react-zen';
import Link from 'next/link'; 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 }[] }[]; items: { label: string; items: { id: string; label: string; icon?: any; path: string }[] }[];
title?: string; title?: string;
selectedKey?: string; selectedKey?: string;
allowMinimize?: boolean; allowMinimize?: boolean;
children?: React.ReactNode; children?: ReactNode;
} }
export function SideMenu({ export function SideMenu({
@ -24,6 +26,7 @@ export function SideMenu({
selectedKey, selectedKey,
allowMinimize, allowMinimize,
children, children,
...props
}: SideMenuProps) { }: SideMenuProps) {
return ( return (
<Column <Column
@ -42,12 +45,12 @@ export function SideMenu({
<Heading size="1">{title}</Heading> <Heading size="1">{title}</Heading>
</Row> </Row>
)} )}
<NavMenu muteItems={false} gap="6"> <NavMenu muteItems={false} gap="6" {...props}>
{items?.map(({ label, items }) => { {items?.map(({ label, items }, index) => {
return ( return (
<NavMenuGroup <NavMenuGroup
title={label} title={label}
key={label} key={`${label}${index}`}
gap="1" gap="1"
allowMinimize={allowMinimize} allowMinimize={allowMinimize}
marginBottom="3" marginBottom="3"

3
src/components/messages.ts
View file

@ -94,6 +94,7 @@ export const labels = defineMessages({
entry: { id: 'label.entry', defaultMessage: 'Entry' }, entry: { id: 'label.entry', defaultMessage: 'Entry' },
exit: { id: 'label.exit', defaultMessage: 'Exit' }, exit: { id: 'label.exit', defaultMessage: 'Exit' },
referrers: { id: 'label.referrers', defaultMessage: 'Referrers' }, referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
screen: { id: 'label.screen', defaultMessage: 'Screen' },
screens: { id: 'label.screens', defaultMessage: 'Screens' }, screens: { id: 'label.screens', defaultMessage: 'Screens' },
browsers: { id: 'label.browsers', defaultMessage: 'Browsers' }, browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
os: { id: 'label.os', defaultMessage: 'OS' }, os: { id: 'label.os', defaultMessage: 'OS' },
@ -301,6 +302,7 @@ export const labels = defineMessages({
lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' }, lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' }, firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
properties: { id: 'label.properties', defaultMessage: 'Properties' }, properties: { id: 'label.properties', defaultMessage: 'Properties' },
channel: { id: 'label.channel', defaultMessage: 'Channel' },
channels: { id: 'label.channels', defaultMessage: 'Channels' }, channels: { id: 'label.channels', defaultMessage: 'Channels' },
sources: { id: 'label.sources', defaultMessage: 'Sources' }, sources: { id: 'label.sources', defaultMessage: 'Sources' },
medium: { id: 'label.medium', defaultMessage: 'Medium' }, medium: { id: 'label.medium', defaultMessage: 'Medium' },
@ -355,7 +357,6 @@ export const labels = defineMessages({
audience: { id: 'label.audience', defaultMessage: 'Audience' }, audience: { id: 'label.audience', defaultMessage: 'Audience' },
invalidUrl: { id: 'label.invalid-url', defaultMessage: 'Invalid URL' }, invalidUrl: { id: 'label.invalid-url', defaultMessage: 'Invalid URL' },
environment: { id: 'label.environment', defaultMessage: 'Environment' }, environment: { id: 'label.environment', defaultMessage: 'Environment' },
weekly: { id: 'label.weekly', defaultMessage: 'Weekly' },
}); });
export const messages = defineMessages({ export const messages = defineMessages({

10
src/components/metrics/MetricLabel.tsx
View file

@ -115,14 +115,20 @@ export function MetricLabel({ type, data }: MetricLabelProps) {
/> />
); );
case 'grouped': case 'domain':
if (label === 'Other') { if (label === 'Other') {
return `(${formatMessage(labels.other)})`; return `(${formatMessage(labels.other)})`;
} else { } else {
const name = GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name;
if (!name) {
return null;
}
return ( return (
<Row alignItems="center" gap="3"> <Row alignItems="center" gap="3">
<Favicon domain={label} /> <Favicon domain={label} />
{GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name} {name}
</Row> </Row>
); );
} }

6
src/components/metrics/MetricsExpandedTable.tsx
View file

@ -70,7 +70,11 @@ export function MetricsExpandedTable({
{items && ( {items && (
<DataTable data={items}> <DataTable data={items}>
<DataColumn id="label" label={title} width="2fr" align="start"> <DataColumn id="label" label={title} width="2fr" align="start">
{row => <MetricLabel type={type} data={row} />} {row => (
<Row overflow="hidden">
<MetricLabel type={type} data={row} />
</Row>
)}
</DataColumn> </DataColumn>
<DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end"> <DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
{row => row?.['visitors']?.toLocaleString()} {row => row?.['visitors']?.toLocaleString()}

4
src/components/metrics/MetricsTable.tsx
View file

@ -55,8 +55,8 @@ export function MetricsTable({
return []; return [];
}, [data, dataFilter, limit, type]); }, [data, dataFilter, limit, type]);
const renderLabel = (data: any) => { const renderLabel = (row: any) => {
return <MetricLabel type={type} data={data} />; return <MetricLabel type={type} data={row} />;
}; };
return ( return (

4
src/lib/constants.ts
View file

@ -34,7 +34,7 @@ export const EVENT_COLUMNS = [
'entry', 'entry',
'exit', 'exit',
'referrer', 'referrer',
'grouped', 'domain',
'title', 'title',
'query', 'query',
'event', 'event',
@ -63,7 +63,7 @@ export const FILTER_COLUMNS = {
entry: 'url_path', entry: 'url_path',
exit: 'url_path', exit: 'url_path',
referrer: 'referrer_domain', referrer: 'referrer_domain',
grouped: 'referrer_domain', domain: 'referrer_domain',
hostname: 'hostname', hostname: 'hostname',
title: 'page_title', title: 'page_title',
query: 'url_query', query: 'url_query',

14
src/queries/sql/events/getEventMetrics.ts
View file

@ -4,21 +4,21 @@ import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
import prisma from '@/lib/prisma'; import prisma from '@/lib/prisma';
import { QueryFilters } from '@/lib/types'; import { QueryFilters } from '@/lib/types';
export interface WebsiteEventMetricParameters { export interface EventMetricParameters {
type: string; type: string;
limit?: string; limit?: string;
offset?: string; offset?: string;
} }
export interface WebsiteEventMetricData { export interface EventMetricData {
x: string; x: string;
t: string; t: string;
y: number; y: number;
} }
export async function getEventMetrics( export async function getEventMetrics(
...args: [websiteId: string, parameters: WebsiteEventMetricParameters, filters: QueryFilters] ...args: [websiteId: string, parameters: EventMetricParameters, filters: QueryFilters]
): Promise<WebsiteEventMetricData[]> { ): Promise<EventMetricData[]> {
return runQuery({ return runQuery({
[PRISMA]: () => relationalQuery(...args), [PRISMA]: () => relationalQuery(...args),
[CLICKHOUSE]: () => clickhouseQuery(...args), [CLICKHOUSE]: () => clickhouseQuery(...args),
@ -27,7 +27,7 @@ export async function getEventMetrics(
async function relationalQuery( async function relationalQuery(
websiteId: string, websiteId: string,
parameters: WebsiteEventMetricParameters, parameters: EventMetricParameters,
filters: QueryFilters, filters: QueryFilters,
) { ) {
const { type, limit = 500, offset = 0 } = parameters; const { type, limit = 500, offset = 0 } = parameters;
@ -63,9 +63,9 @@ async function relationalQuery(
async function clickhouseQuery( async function clickhouseQuery(
websiteId: string, websiteId: string,
parameters: WebsiteEventMetricParameters, parameters: EventMetricParameters,
filters: QueryFilters, filters: QueryFilters,
): Promise<WebsiteEventMetricData[]> { ): Promise<EventMetricData[]> {
const { type, limit = 500, offset = 0 } = parameters; const { type, limit = 500, offset = 0 } = parameters;
const column = FILTER_COLUMNS[type] || type; const column = FILTER_COLUMNS[type] || type;
const { rawQuery, parseFilters } = clickhouse; const { rawQuery, parseFilters } = clickhouse;

2
src/queries/sql/pageviews/getPageviewExpandedMetrics.ts
View file

@ -111,7 +111,7 @@ async function clickhouseQuery(
if (column === 'referrer_domain') { if (column === 'referrer_domain') {
excludeDomain = `and referrer_domain != hostname and referrer_domain != ''`; excludeDomain = `and referrer_domain != hostname and referrer_domain != ''`;
if (type === 'grouped') { if (type === 'domain') {
column = toClickHouseGroupedReferrer(GROUPED_DOMAINS); column = toClickHouseGroupedReferrer(GROUPED_DOMAINS);
} }
} }