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

Refactored tables.

Browse source
This commit is contained in:
Mike Cao 2025-08-23 01:12:37 -07:00
parent 600a3d28c3
commit c8fe93dd9d
56 changed files with 643 additions and 1038 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -82,7 +82,7 @@
"@react-spring/web": "^9.7.3",
"@svgr/cli": "^8.1.0",
"@tanstack/react-query": "^5.83.0",
"@umami/react-zen": "^0.163.0",
"@umami/react-zen": "^0.164.0",
"@umami/redis-client": "^0.27.0",
"bcryptjs": "^3.0.2",
"chalk": "^5.4.1",

10
pnpm-lock.yaml generated
View file

@ -45,8 +45,8 @@ importers:
specifier: ^5.83.0
version: 5.85.3(react@19.1.1)
'@umami/react-zen':
specifier: ^0.163.0
version: 0.163.0(@babel/core@7.28.3)(@types/react@19.1.10)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))
specifier: ^0.164.0
version: 0.164.0(@babel/core@7.28.3)(@types/react@19.1.10)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))
'@umami/redis-client':
specifier: ^0.27.0
version: 0.27.0
@ -2549,8 +2549,8 @@ packages:
resolution: {integrity: sha512-W8FQi6kEh2e8zVhQ0eeRnxdvIoOkAp/CPAahcNio6nO9dsIwb9b34z90KOlheoyuVf6LSOEdjlkxSkapNEc+4A==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@umami/react-zen@0.163.0':
resolution: {integrity: sha512-H+Z7sADljnBdzRQdOUIHXKphiPkzHKTLTNtBf/VbylzXg5A61e+OYoDG37eOkR+JFU9+KmJnF+zOiXyA33LW0A==}
'@umami/react-zen@0.164.0':
resolution: {integrity: sha512-z27uy0W3ZL0MH2cdVuu0c4guInHJQC2rYcAXxwxOAdEMtkzWym9ODfK3v5ihqS6oct+6er/bS1yVJ8gNnRvXDw==}
'@umami/redis-client@0.27.0':
resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
@ -9849,7 +9849,7 @@ snapshots:
'@typescript-eslint/types': 8.39.1
eslint-visitor-keys: 4.2.1
'@umami/react-zen@0.163.0(@babel/core@7.28.3)(@types/react@19.1.10)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))':
'@umami/react-zen@0.164.0(@babel/core@7.28.3)(@types/react@19.1.10)(babel-plugin-react-compiler@19.1.0-rc.2)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.1))':
dependencies:
'@fontsource/jetbrains-mono': 5.2.6
'@internationalized/date': 3.8.2

6
src/app/(main)/SideNav.tsx
View file

@ -13,7 +13,7 @@ import {
LayoutDashboard,
Link as LinkIcon,
Logo,
Grid2X2,
Pixel,
Settings,
PanelLeft,
} from '@/components/icons';
@ -21,6 +21,7 @@ import { useMessages, useNavigation, useGlobalState } from '@/components/hooks';
import { TeamsButton } from '@/components/input/TeamsButton';
import { PanelButton } from '@/components/input/PanelButton';
import { ProfileButton } from '@/components/input/ProfileButton';
import { LanguageButton } from '@/components/input/LanguageButton';
export function SideNav(props: SidebarProps) {
const { formatMessage, labels } = useMessages();
@ -52,7 +53,7 @@ export function SideNav(props: SidebarProps) {
id: 'pixels',
label: formatMessage(labels.pixels),
path: '/pixels',
icon: <Grid2X2 />,
icon: <Pixel />,
},
];
@ -97,6 +98,7 @@ export function SideNav(props: SidebarProps) {
<ProfileButton />
{!isCollapsed && !hasNav && (
<Row>
<LanguageButton />
<ThemeButton />
</Row>
)}

4
src/app/(main)/links/[linkId]/LinkHeader.tsx
View file

@ -1,7 +1,7 @@
import { useLink, useMessages, useSlug } from '@/components/hooks';
import { PageHeader } from '@/components/common/PageHeader';
import { Icon, Text } from '@umami/react-zen';
import { ExternalLink } from '@/components/icons';
import { ExternalLink, Link } from '@/components/icons';
import { LinkButton } from '@/components/common/LinkButton';
export function LinkHeader() {
@ -10,7 +10,7 @@ export function LinkHeader() {
const link = useLink();
return (
<PageHeader title={link.name} description={link.url}>
<PageHeader title={link.name} description={link.url} icon={<Link />}>
<LinkButton href={getSlugUrl(link.slug)} target="_blank">
<Icon>
<ExternalLink />

83
src/app/(main)/links/[linkId]/LinkPage.tsx
View file

@ -6,25 +6,9 @@ import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
import { LinkMetricsBar } from '@/app/(main)/links/[linkId]/LinkMetricsBar';
import { LinkControls } from '@/app/(main)/links/[linkId]/LinkControls';
import { Grid, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
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 { ChannelsTable } from '@/components/metrics/ChannelsTable';
import { RegionsTable } from '@/components/metrics/RegionsTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { SessionsWeekly } from '@/app/(main)/websites/[websiteId]/sessions/SessionsWeekly';
import { useMessages } from '@/components/hooks';
import { LinkPanels } from '@/app/(main)/links/[linkId]/LinkPanels';
export function LinkPage({ linkId }: { linkId: string }) {
const { formatMessage, labels } = useMessages();
const tableProps = { websiteId: linkId, limit: 10, allowDownload: false };
const rowProps = { minHeight: 570 };
return (
<LinkProvider linkId={linkId}>
<PageBody gap>
@ -34,70 +18,7 @@ export function LinkPage({ linkId }: { linkId: string }) {
<Panel>
<WebsiteChart websiteId={linkId} />
</Panel>
<Grid gap>
<GridRow layout="one" {...rowProps}>
<Panel>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
<Tab id="channel">{formatMessage(labels.channels)}</Tab>
</TabList>
<TabPanel id="referrer">
<ReferrersTable {...tableProps} />
</TabPanel>
<TabPanel id="channel">
<ChannelsTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two-one" {...rowProps}>
<Panel gridColumn="span 2" noPadding>
<WorldMap websiteId={linkId} />
</Panel>
<Panel>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>
<Tab id="region">{formatMessage(labels.regions)}</Tab>
<Tab id="city">{formatMessage(labels.cities)}</Tab>
</TabList>
<TabPanel id="country">
<CountriesTable {...tableProps} />
</TabPanel>
<TabPanel id="region">
<RegionsTable {...tableProps} />
</TabPanel>
<TabPanel id="city">
<CitiesTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
<Tab id="os">{formatMessage(labels.os)}</Tab>
<Tab id="device">{formatMessage(labels.devices)}</Tab>
</TabList>
<TabPanel id="browser">
<BrowsersTable {...tableProps} />
</TabPanel>
<TabPanel id="os">
<OSTable {...tableProps} />
</TabPanel>
<TabPanel id="device">
<DevicesTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<SessionsWeekly websiteId={linkId} />
</Panel>
</GridRow>
</Grid>
<LinkPanels linkId={linkId} />
</PageBody>
</LinkProvider>
);

83
src/app/(main)/links/[linkId]/LinkPanels.tsx Normal file
View file

@ -0,0 +1,83 @@
import { Grid, Tabs, Tab, TabList, TabPanel, Heading } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { Panel } from '@/components/common/Panel';
import { WorldMap } from '@/components/metrics/WorldMap';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { useMessages } from '@/components/hooks';
export function LinkPanels({ linkId }: { linkId: string }) {
const { formatMessage, labels } = useMessages();
const tableProps = {
websiteId: linkId,
limit: 10,
allowDownload: false,
showMore: true,
metric: formatMessage(labels.visitors),
};
const rowProps = { minHeight: 570 };
return (
<Grid gap="3">
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.sources)}</Heading>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
<Tab id="channel">{formatMessage(labels.channels)}</Tab>
</TabList>
<TabPanel id="referrer">
<MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} />
</TabPanel>
<TabPanel id="channel">
<MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.environment)}</Heading>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
<Tab id="os">{formatMessage(labels.os)}</Tab>
<Tab id="device">{formatMessage(labels.devices)}</Tab>
</TabList>
<TabPanel id="browser">
<MetricsTable type="browser" title={formatMessage(labels.browser)} {...tableProps} />
</TabPanel>
<TabPanel id="os">
<MetricsTable type="os" title={formatMessage(labels.os)} {...tableProps} />
</TabPanel>
<TabPanel id="device">
<MetricsTable type="device" title={formatMessage(labels.device)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel noPadding>
<WorldMap websiteId={linkId} />
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.location)}</Heading>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>
<Tab id="region">{formatMessage(labels.regions)}</Tab>
<Tab id="city">{formatMessage(labels.cities)}</Tab>
</TabList>
<TabPanel id="country">
<MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
</TabPanel>
<TabPanel id="region">
<MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
</TabPanel>
<TabPanel id="city">
<MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
</Grid>
);
}

4
src/app/(main)/pixels/[pixelId]/PixelHeader.tsx
View file

@ -1,7 +1,7 @@
import { usePixel, useMessages, useSlug } from '@/components/hooks';
import { PageHeader } from '@/components/common/PageHeader';
import { Icon, Text } from '@umami/react-zen';
import { ExternalLink } from '@/components/icons';
import { ExternalLink, Pixel } from '@/components/icons';
import { LinkButton } from '@/components/common/LinkButton';
export function PixelHeader() {
@ -10,7 +10,7 @@ export function PixelHeader() {
const pixel = usePixel();
return (
<PageHeader title={pixel.name} description={pixel.url}>
<PageHeader title={pixel.name} description={pixel.url} icon={<Pixel />}>
<LinkButton href={getSlugUrl(pixel.slug)} target="_blank">
<Icon>
<ExternalLink />

83
src/app/(main)/pixels/[pixelId]/PixelPage.tsx
View file

@ -6,25 +6,9 @@ import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
import { PixelMetricsBar } from '@/app/(main)/pixels/[pixelId]/PixelMetricsBar';
import { PixelControls } from '@/app/(main)/pixels/[pixelId]/PixelControls';
import { Grid, Tab, TabList, TabPanel, Tabs } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
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 { useMessages } from '@/components/hooks';
import { ChannelsTable } from '@/components/metrics/ChannelsTable';
import { RegionsTable } from '@/components/metrics/RegionsTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { SessionsWeekly } from '@/app/(main)/websites/[websiteId]/sessions/SessionsWeekly';
import { PixelPanels } from '@/app/(main)/pixels/[pixelId]/PixelPanels';
export function PixelPage({ pixelId }: { pixelId: string }) {
const { formatMessage, labels } = useMessages();
const tableProps = { websiteId: pixelId, limit: 10, allowDownload: false };
const rowProps = { minHeight: 570 };
return (
<PixelProvider pixelId={pixelId}>
<PageBody gap>
@ -34,70 +18,7 @@ export function PixelPage({ pixelId }: { pixelId: string }) {
<Panel>
<WebsiteChart websiteId={pixelId} />
</Panel>
<Grid gap>
<GridRow layout="one" {...rowProps}>
<Panel>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
<Tab id="channel">{formatMessage(labels.channels)}</Tab>
</TabList>
<TabPanel id="referrer">
<ReferrersTable {...tableProps} />
</TabPanel>
<TabPanel id="channel">
<ChannelsTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two-one" {...rowProps}>
<Panel gridColumn="span 2" noPadding>
<WorldMap websiteId={pixelId} />
</Panel>
<Panel>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>
<Tab id="region">{formatMessage(labels.regions)}</Tab>
<Tab id="city">{formatMessage(labels.cities)}</Tab>
</TabList>
<TabPanel id="country">
<CountriesTable {...tableProps} />
</TabPanel>
<TabPanel id="region">
<RegionsTable {...tableProps} />
</TabPanel>
<TabPanel id="city">
<CitiesTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
<Tab id="os">{formatMessage(labels.os)}</Tab>
<Tab id="device">{formatMessage(labels.devices)}</Tab>
</TabList>
<TabPanel id="browser">
<BrowsersTable {...tableProps} />
</TabPanel>
<TabPanel id="os">
<OSTable {...tableProps} />
</TabPanel>
<TabPanel id="device">
<DevicesTable {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<SessionsWeekly websiteId={pixelId} />
</Panel>
</GridRow>
</Grid>
<PixelPanels pixelId={pixelId} />
</PageBody>
</PixelProvider>
);

83
src/app/(main)/pixels/[pixelId]/PixelPanels.tsx Normal file
View file

@ -0,0 +1,83 @@
import { Grid, Tabs, Tab, TabList, TabPanel, Heading } from '@umami/react-zen';
import { GridRow } from '@/components/common/GridRow';
import { Panel } from '@/components/common/Panel';
import { WorldMap } from '@/components/metrics/WorldMap';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { useMessages } from '@/components/hooks';
export function PixelPanels({ pixelId }: { pixelId: string }) {
const { formatMessage, labels } = useMessages();
const tableProps = {
websiteId: pixelId,
limit: 10,
allowDownload: false,
showMore: true,
metric: formatMessage(labels.visitors),
};
const rowProps = { minHeight: 570 };
return (
<Grid gap="3">
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.sources)}</Heading>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
<Tab id="channel">{formatMessage(labels.channels)}</Tab>
</TabList>
<TabPanel id="referrer">
<MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} />
</TabPanel>
<TabPanel id="channel">
<MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.environment)}</Heading>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
<Tab id="os">{formatMessage(labels.os)}</Tab>
<Tab id="device">{formatMessage(labels.devices)}</Tab>
</TabList>
<TabPanel id="browser">
<MetricsTable type="browser" title={formatMessage(labels.browser)} {...tableProps} />
</TabPanel>
<TabPanel id="os">
<MetricsTable type="os" title={formatMessage(labels.os)} {...tableProps} />
</TabPanel>
<TabPanel id="device">
<MetricsTable type="device" title={formatMessage(labels.device)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel noPadding>
<WorldMap websiteId={pixelId} />
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.location)}</Heading>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>
<Tab id="region">{formatMessage(labels.regions)}</Tab>
<Tab id="city">{formatMessage(labels.cities)}</Tab>
</TabList>
<TabPanel id="country">
<MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
</TabPanel>
<TabPanel id="region">
<MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
</TabPanel>
<TabPanel id="city">
<MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
</Grid>
);
}

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

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

46
src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx
View file

@ -1,42 +1,12 @@
import { Grid, Heading, Column, Row, NavMenu, NavMenuItem, Text } from '@umami/react-zen';
import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { CountriesTable } from '@/components/metrics/CountriesTable';
import { DevicesTable } from '@/components/metrics/DevicesTable';
import { EventsTable } from '@/components/metrics/EventsTable';
import { LanguagesTable } from '@/components/metrics/LanguagesTable';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { OSTable } from '@/components/metrics/OSTable';
import { PagesTable } from '@/components/metrics/PagesTable';
import { QueryParametersTable } from '@/components/metrics/QueryParametersTable';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { RegionsTable } from '@/components/metrics/RegionsTable';
import { ScreenTable } from '@/components/metrics/ScreenTable';
import { TagsTable } from '@/components/metrics/TagsTable';
import { getCompareDate } from '@/lib/date';
import { formatNumber } from '@/lib/format';
import { useState } from 'react';
import { Panel } from '@/components/common/Panel';
import { DateDisplay } from '@/components/common/DateDisplay';
const views = {
path: PagesTable,
title: PagesTable,
referrer: ReferrersTable,
browser: BrowsersTable,
os: OSTable,
device: DevicesTable,
screen: ScreenTable,
country: CountriesTable,
region: RegionsTable,
city: CitiesTable,
language: LanguagesTable,
event: EventsTable,
query: QueryParametersTable,
tag: TagsTable,
};
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
const [data] = useState([]);
@ -46,7 +16,6 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
updateParams,
query: { view },
} = useNavigation();
const Component: typeof MetricsTable = views[view || 'path'] || (() => null);
const items = [
{
@ -121,7 +90,7 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
},
];
const renderChange = ({ x, y }) => {
const renderChange = ({ label: x, count: y }) => {
const prev = data.find(d => d.x === x)?.y;
const value = y - prev;
const change = Math.abs(((y - prev) / prev) * 100);
@ -163,15 +132,22 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
<Heading size="1">{formatMessage(labels.previous)}</Heading>
<DateDisplay startDate={startDate} endDate={endDate} />
</Row>
<Component websiteId={websiteId} limit={20} showMore={false} params={params} />
<MetricsTable
websiteId={websiteId}
type={view}
limit={20}
showMore={false}
params={params}
/>
</Column>
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="1"> {formatMessage(labels.current)}</Heading>
<DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
</Row>
<Component
<MetricsTable
websiteId={websiteId}
type={view}
limit={20}
showMore={false}
renderChange={renderChange}

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

@ -1,43 +1,7 @@
import Link from 'next/link';
import { Grid, Column, NavMenu, NavMenuItem } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { CountriesTable } from '@/components/metrics/CountriesTable';
import { DevicesTable } from '@/components/metrics/DevicesTable';
import { EventsTable } from '@/components/metrics/EventsTable';
import { HostnamesTable } from '@/components/metrics/HostnamesTable';
import { LanguagesTable } from '@/components/metrics/LanguagesTable';
import { OSTable } from '@/components/metrics/OSTable';
import { PagesTable } from '@/components/metrics/PagesTable';
import { QueryParametersTable } from '@/components/metrics/QueryParametersTable';
import { ReferrersTable } from '@/components/metrics/ReferrersTable';
import { RegionsTable } from '@/components/metrics/RegionsTable';
import { ScreenTable } from '@/components/metrics/ScreenTable';
import { TagsTable } from '@/components/metrics/TagsTable';
import { ChannelsTable } from '@/components/metrics/ChannelsTable';
import Link from 'next/link';
const views = {
path: PagesTable,
entry: PagesTable,
exit: PagesTable,
title: PagesTable,
referrer: ReferrersTable,
grouped: ReferrersTable,
hostname: HostnamesTable,
browser: BrowsersTable,
os: OSTable,
device: DevicesTable,
screen: ScreenTable,
country: CountriesTable,
region: RegionsTable,
city: CitiesTable,
language: LanguagesTable,
event: EventsTable,
query: QueryParametersTable,
tag: TagsTable,
channel: ChannelsTable,
};
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
export function WebsiteExpandedView({
websiteId,
@ -130,8 +94,6 @@ export function WebsiteExpandedView({
},
];
const DetailsComponent = views[view] || (() => null);
return (
<Grid columns="auto 1fr" gap="6" height="100%" overflow="hidden">
<Column gap="6" width="200px" border="right" paddingRight="3">
@ -146,15 +108,13 @@ export function WebsiteExpandedView({
</NavMenu>
</Column>
<Column overflow="hidden">
<DetailsComponent
<MetricsExpandedTable
title={formatMessage(labels[view])}
type={view}
websiteId={websiteId}
animate={false}
virtualize={true}
itemCount={25}
allowFilter={true}
allowSearch={true}
isExpanded={true}
onClose={onClose}
allowSearch
allowDownload
/>
</Column>
</Grid>

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

@ -5,7 +5,7 @@ import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from './WebsiteChart';
import { WebsiteExpandedView } from './WebsiteExpandedView';
import { WebsiteMetricsBar } from './WebsiteMetricsBar';
import { WebsiteTableView } from './WebsiteTableView';
import { WebsitePanels } from './WebsitePanels';
import { WebsiteControls } from './WebsiteControls';
export function WebsitePage({ websiteId }: { websiteId: string }) {
@ -32,7 +32,7 @@ export function WebsitePage({ websiteId }: { websiteId: string }) {
<Panel>
<WebsiteChart websiteId={websiteId} compareMode={compare} />
</Panel>
<WebsiteTableView websiteId={websiteId} />
<WebsitePanels websiteId={websiteId} />
<Modal isOpen={!!view} onOpenChange={handleOpenChange} isDismissable>
<Dialog style={{ maxWidth: 1320, width: '100vw', height: 'calc(100vh - 40px)' }}>
{({ close }) => {

54
src/app/(main)/websites/[websiteId]/WebsiteTableView.tsx → src/app/(main)/websites/[websiteId]/WebsitePanels.tsx
View file

@ -1,28 +1,27 @@
import { Grid, Tabs, Tab, TabList, TabPanel } from '@umami/react-zen';
import { Grid, Tabs, Tab, TabList, TabPanel, Heading, Row } 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';
import { BrowsersTable } from '@/components/metrics/BrowsersTable';
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 { MetricsTable } from '@/components/metrics/MetricsTable';
import { WeeklyTraffic } from '@/components/metrics/WeeklyTraffic';
import { useMessages } from '@/components/hooks';
import { ChannelsTable } from '@/components/metrics/ChannelsTable';
import { RegionsTable } from '@/components/metrics/RegionsTable';
import { CitiesTable } from '@/components/metrics/CitiesTable';
import { SessionsWeekly } from '@/app/(main)/websites/[websiteId]/sessions/SessionsWeekly';
export function WebsiteTableView({ websiteId }: { websiteId: string }) {
export function WebsitePanels({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const tableProps = { websiteId, limit: 10, allowDownload: false };
const tableProps = {
websiteId,
limit: 10,
allowDownload: false,
showMore: true,
metric: formatMessage(labels.visitors),
};
const rowProps = { minHeight: 570 };
return (
<Grid gap="3">
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.pages)}</Heading>
<Tabs>
<TabList>
<Tab id="page">{formatMessage(labels.pages)}</Tab>
@ -30,27 +29,28 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
<Tab id="exit">{formatMessage(labels.exit)}</Tab>
</TabList>
<TabPanel id="page">
<PagesTable type="path" {...tableProps} />
<MetricsTable type="path" title={formatMessage(labels.path)} {...tableProps} />
</TabPanel>
<TabPanel id="entry">
<PagesTable type="entry" {...tableProps} />
<MetricsTable type="entry" title={formatMessage(labels.path)} {...tableProps} />
</TabPanel>
<TabPanel id="exit">
<PagesTable type="exit" {...tableProps} />
<MetricsTable type="exit" title={formatMessage(labels.path)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.sources)}</Heading>
<Tabs>
<TabList>
<Tab id="referrer">{formatMessage(labels.referrers)}</Tab>
<Tab id="channel">{formatMessage(labels.channels)}</Tab>
</TabList>
<TabPanel id="referrer">
<ReferrersTable {...tableProps} />
<MetricsTable type="referrer" title={formatMessage(labels.domain)} {...tableProps} />
</TabPanel>
<TabPanel id="channel">
<ChannelsTable {...tableProps} />
<MetricsTable type="channel" title={formatMessage(labels.type)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
@ -60,6 +60,7 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
<WorldMap websiteId={websiteId} />
</Panel>
<Panel>
<Heading size="2">{formatMessage(labels.location)}</Heading>
<Tabs>
<TabList>
<Tab id="country">{formatMessage(labels.countries)}</Tab>
@ -67,19 +68,20 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
<Tab id="city">{formatMessage(labels.cities)}</Tab>
</TabList>
<TabPanel id="country">
<CountriesTable {...tableProps} />
<MetricsTable type="country" title={formatMessage(labels.country)} {...tableProps} />
</TabPanel>
<TabPanel id="region">
<RegionsTable {...tableProps} />
<MetricsTable type="region" title={formatMessage(labels.region)} {...tableProps} />
</TabPanel>
<TabPanel id="city">
<CitiesTable {...tableProps} />
<MetricsTable type="city" title={formatMessage(labels.city)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
</GridRow>
<GridRow layout="two" {...rowProps}>
<Panel>
<Heading size="2">{formatMessage(labels.environment)}</Heading>
<Tabs>
<TabList>
<Tab id="browser">{formatMessage(labels.browsers)}</Tab>
@ -87,18 +89,20 @@ export function WebsiteTableView({ websiteId }: { websiteId: string }) {
<Tab id="device">{formatMessage(labels.devices)}</Tab>
</TabList>
<TabPanel id="browser">
<BrowsersTable {...tableProps} />
<MetricsTable type="browser" title={formatMessage(labels.browser)} {...tableProps} />
</TabPanel>
<TabPanel id="os">
<OSTable {...tableProps} />
<MetricsTable type="os" title={formatMessage(labels.os)} {...tableProps} />
</TabPanel>
<TabPanel id="device">
<DevicesTable {...tableProps} />
<MetricsTable type="device" title={formatMessage(labels.device)} {...tableProps} />
</TabPanel>
</Tabs>
</Panel>
<Panel>
<SessionsWeekly websiteId={websiteId} />
<Heading size="2">{formatMessage(labels.traffic)}</Heading>
<Row border="bottom" marginBottom="4" />
<WeeklyTraffic websiteId={websiteId} />
</Panel>
</GridRow>
</Grid>

9
src/app/(main)/websites/[websiteId]/cohorts/CohortsTable.tsx
View file

@ -5,10 +5,11 @@ import { DateDistance } from '@/components/common/DateDistance';
import { filtersObjectToArray } from '@/lib/params';
import { CohortEditButton } from '@/app/(main)/websites/[websiteId]/cohorts/CohortEditButton';
import { CohortDeleteButton } from '@/app/(main)/websites/[websiteId]/cohorts/CohortDeleteButton';
import Link from 'next/link';
export function CohortsTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { websiteId } = useNavigation();
const { websiteId, renderUrl } = useNavigation();
if (data.length === 0) {
return <Empty />;
@ -16,7 +17,11 @@ export function CohortsTable({ data = [] }) {
return (
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)} />
<DataColumn id="name" label={formatMessage(labels.name)}>
{(row: any) => (
<Link href={renderUrl(`/websites/${websiteId}?cohort=${row.id}`)}>{row.name}</Link>
)}
</DataColumn>
<DataColumn id="created" label={formatMessage(labels.created)}>
{(row: any) => <DateDistance date={new Date(row.createdAt)} />}
</DataColumn>

6
src/app/(main)/websites/[websiteId]/events/EventProperties.tsx
View file

@ -100,9 +100,9 @@ const EventValues = ({ websiteId, eventName, propertyName }) => {
const tableData = useMemo(() => {
if (!propertyName || !values || propertySum === 0) return [];
return values.map(({ value, total }) => ({
x: value,
y: total,
z: 100 * (total / propertySum),
label: value,
count: total,
percent: 100 * (total / propertySum),
}));
}, [propertyName, values, propertySum]);

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

@ -1,6 +1,6 @@
'use client';
import { TabList, Tab, Tabs, TabPanel, Column } from '@umami/react-zen';
import { EventsTable } from '@/components/metrics/EventsTable';
import { MetricsTable } from '@/components/metrics/MetricsTable';
import { useState, Key } from 'react';
import { EventsDataTable } from './EventsDataTable';
import { Panel } from '@/components/common/Panel';
@ -13,14 +13,9 @@ import { getItem, setItem } from '@/lib/storage';
const KEY_NAME = 'umami.events.tab';
export function EventsPage({ websiteId }) {
const [label, setLabel] = useState(null);
const [tab, setTab] = useState(getItem(KEY_NAME) || 'chart');
const { formatMessage, labels } = useMessages();
const handleLabelClick = (value: string) => {
setLabel(value !== label ? value : '');
};
const handleSelect = (value: Key) => {
setItem(KEY_NAME, value);
setTab(value);
@ -42,14 +37,13 @@ export function EventsPage({ websiteId }) {
<TabPanel id="chart">
<Column gap="6">
<Column border="bottom" paddingBottom="6">
<EventsChart websiteId={websiteId} focusLabel={label} />
<EventsChart websiteId={websiteId} />
</Column>
<EventsTable
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
onLabelClick={handleLabelClick}
/>
</Column>
</TabPanel>

9
src/app/(main)/websites/[websiteId]/segments/SegmentsTable.tsx
View file

@ -5,10 +5,11 @@ import { DateDistance } from '@/components/common/DateDistance';
import { filtersObjectToArray } from '@/lib/params';
import { SegmentEditButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentEditButton';
import { SegmentDeleteButton } from '@/app/(main)/websites/[websiteId]/segments/SegmentDeleteButton';
import Link from 'next/link';
export function SegmentsTable({ data = [] }) {
const { formatMessage, labels } = useMessages();
const { websiteId } = useNavigation();
const { websiteId, renderUrl } = useNavigation();
if (data.length === 0) {
return <Empty />;
@ -16,7 +17,11 @@ export function SegmentsTable({ data = [] }) {
return (
<DataTable data={data}>
<DataColumn id="name" label={formatMessage(labels.name)} />
<DataColumn id="name" label={formatMessage(labels.name)}>
{(row: any) => (
<Link href={renderUrl(`/websites/${websiteId}?segment=${row.id}`)}>{row.name}</Link>
)}
</DataColumn>
<DataColumn id="created" label={formatMessage(labels.created)}>
{(row: any) => <DateDistance date={new Date(row.createdAt)} />}
</DataColumn>

6
src/app/(main)/websites/[websiteId]/sessions/SessionProperties.tsx
View file

@ -71,9 +71,9 @@ const SessionValues = ({ websiteId, propertyName }) => {
const tableData = useMemo(() => {
if (!propertyName || !data || propertySum === 0) return [];
return data.map(({ value, total }) => ({
x: value,
y: total,
z: 100 * (total / propertySum),
label: value,
count: total,
percent: 100 * (total / propertySum),
}));
}, [propertyName, data, propertySum]);

13
src/app/(main)/websites/[websiteId]/settings/WebsiteTransferForm.tsx
View file

@ -11,9 +11,9 @@ import {
Text,
} from '@umami/react-zen';
import {
useApi,
useLoginQuery,
useMessages,
useUpdateQuery,
useUserTeamsQuery,
useWebsite,
} from '@/components/hooks';
@ -32,10 +32,7 @@ export function WebsiteTransferForm({
const website = useWebsite();
const [teamId, setTeamId] = useState<string>(null);
const { formatMessage, labels, messages } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error } = useMutation({
mutationFn: (data: any) => post(`/websites/${websiteId}/transfer`, data),
});
const { mutate, error, isPending } = useUpdateQuery(`/websites/${websiteId}/transfer`);
const { data: teams, isLoading } = useUserTeamsQuery(user.id);
const isTeamWebsite = !!website?.teamId;
@ -92,7 +89,11 @@ export function WebsiteTransferForm({
</FormField>
<FormButtons>
<Button onPress={onClose}>{formatMessage(labels.cancel)}</Button>
<FormSubmitButton variant="primary" isDisabled={!isTeamWebsite && !teamId}>
<FormSubmitButton
variant="primary"
isPending={isPending}
isDisabled={!isTeamWebsite && !teamId}
>
{formatMessage(labels.transfer)}
</FormSubmitButton>
</FormButtons>

4
src/app/api/websites/[websiteId]/sessions/weekly/route.ts
View file

@ -3,7 +3,7 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
import { unauthorized, json } from '@/lib/response';
import { canViewWebsite } from '@/validations';
import { pagingParams, timezoneParam } from '@/lib/schema';
import { getWebsiteSessionsWeekly } from '@/queries';
import { getWeeklyTraffic } from '@/queries';
export async function GET(
request: Request,
@ -30,7 +30,7 @@ export async function GET(
const filters = await getQueryFilters(query, websiteId);
const data = await getWebsiteSessionsWeekly(websiteId, filters);
const data = await getWeeklyTraffic(websiteId, filters);
return json(data);
}

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

@ -1,54 +1,47 @@
import { ReactNode } from 'react';
import classNames from 'classnames';
import { HTMLAttributes, ReactNode, useState } from 'react';
import Link from 'next/link';
import { Icon } from '@umami/react-zen';
import { Icon, Row } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { ExternalLink } from '@/components/icons';
import styles from './FilterLink.module.css';
export interface FilterLinkProps {
id: string;
export interface FilterLinkProps extends HTMLAttributes<HTMLDivElement> {
type: string;
value: string;
label?: string;
icon?: ReactNode;
externalUrl?: string;
className?: string;
children?: ReactNode;
}
export function FilterLink({
id,
value,
label,
externalUrl,
children,
className,
}: FilterLinkProps) {
export function FilterLink({ type, value, label, externalUrl, icon }: FilterLinkProps) {
const [showLink, setShowLink] = useState(false);
const { formatMessage, labels } = useMessages();
const { updateParams, query } = useNavigation();
const active = query[id] !== undefined;
const selected = query[id] === value;
const active = query[type] !== undefined;
const selected = query[type] === value;
return (
<div
className={classNames(styles.row, className, {
[styles.inactive]: active && !selected,
[styles.active]: active && selected,
})}
<Row
alignItems="center"
gap
fontWeight={active && selected ? 'bold' : undefined}
color={active && !selected ? 'muted' : undefined}
onMouseOver={() => setShowLink(true)}
onMouseOut={() => setShowLink(false)}
>
{children}
{icon}
{!value && `(${label || formatMessage(labels.unknown)})`}
{value && (
<Link href={updateParams({ [id]: `eq.${value}` })} className={styles.label} replace>
<Link href={updateParams({ [type]: `eq.${value}` })} replace>
{label || value}
</Link>
)}
{externalUrl && (
<a className={styles.link} href={externalUrl} target="_blank" rel="noreferrer noopener">
<Icon className={styles.icon}>
{externalUrl && showLink && (
<a href={externalUrl} target="_blank" rel="noreferrer noopener">
<Icon color="muted">
<ExternalLink />
</Icon>
</a>
)}
</div>
</Row>
);
}

2
src/components/common/LoadingPanel.tsx
View file

@ -30,7 +30,7 @@ export function LoadingPanel({
return (
<>
{/* Show loading spinner only if no data exists */}
{(isLoading || isFetching) && !data && (
{(isLoading || isFetching) && (
<Column position="relative" height="100%" {...props}>
<Loading icon={loadingIcon} position="page" />
</Column>

6
src/components/common/PageHeader.tsx
View file

@ -28,7 +28,11 @@ export function PageHeader({
>
<Column>
<Row alignItems="center" gap="3">
{icon && <Icon size="md">{icon}</Icon>}
{icon && (
<Icon size="md" color="muted">
{icon}
</Icon>
)}
{title && <Heading size="4">{title}</Heading>}
</Row>
{description && <Text color="muted">{description}</Text>}

2
src/components/hooks/index.ts
View file

@ -50,7 +50,7 @@ export * from './queries/useWebsiteSegmentsQuery';
export * from './queries/useWebsiteSessionQuery';
export * from './queries/useWebsiteSessionStatsQuery';
export * from './queries/useWebsiteSessionsQuery';
export * from './queries/useWebsiteSessionsWeeklyQuery';
export * from './queries/useWeeklyTrafficQuery';
export * from './queries/useWebsiteStatsQuery';
export * from './queries/useWebsiteValuesQuery';
export * from './queries/useWebsitesQuery';

5
src/components/hooks/queries/useWebsiteSessionsWeeklyQuery.ts → src/components/hooks/queries/useWeeklyTrafficQuery.ts
View file

@ -3,10 +3,7 @@ import { useModified } from '../useModified';
import { useDateParameters } from '../useDateParameters';
import { useFilterParameters } from '@/components/hooks/useFilterParameters';
export function useWebsiteSessionsWeeklyQuery(
websiteId: string,
params?: Record<string, string | number>,
) {
export function useWeeklyTrafficQuery(websiteId: string, params?: Record<string, string | number>) {
const { get, useQuery } = useApi();
const { modified } = useModified(`sessions`);
const date = useDateParameters(websiteId);

7
src/components/hooks/useRegionNames.ts
View file

@ -9,7 +9,12 @@ export function useRegionNames(locale: string) {
return regions[regionCode];
}
const region = regionCode.includes('-') ? regionCode : `${countryCode}-${regionCode}`;
if (!regionCode) {
return null;
}
const region = regionCode?.includes('-') ? regionCode : `${countryCode}-${regionCode}`;
return regions[region] ? `${regions[region]}, ${countryNames[countryCode]}` : region;
};

2
src/components/icons.ts
View file

@ -17,7 +17,7 @@ export {
FileJson,
FileText,
Globe,
Grid2X2,
Grid2X2 as Pixel,
KeyRound,
LayoutDashboard,
Link,

22
src/components/input/FilterBar.tsx
View file

@ -78,16 +78,18 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
</Row>
<Row alignItems="center">
<DialogTrigger>
<TooltipTrigger delay={0}>
<Button variant="zero">
<Icon>
<Bookmark />
</Icon>
</Button>
<Tooltip>
<Text>{formatMessage(labels.saveSegment)}</Text>
</Tooltip>
</TooltipTrigger>
{!!filters.length && (
<TooltipTrigger delay={0}>
<Button variant="zero">
<Icon>
<Bookmark />
</Icon>
</Button>
<Tooltip>
<Text>{formatMessage(labels.saveSegment)}</Text>
</Tooltip>
</TooltipTrigger>
)}
<Modal>
<Dialog title={formatMessage(labels.segment)} style={{ width: 400 }}>
{({ close }) => {

6
src/components/messages.ts
View file

@ -91,8 +91,8 @@ export const labels = defineMessages({
refresh: { id: 'label.refresh', defaultMessage: 'Refresh' },
page: { id: 'label.page', defaultMessage: 'Page' },
pages: { id: 'label.pages', defaultMessage: 'Pages' },
entry: { id: 'label.entry', defaultMessage: 'Entry path' },
exit: { id: 'label.exit', defaultMessage: 'Exit path' },
entry: { id: 'label.entry', defaultMessage: 'Entry' },
exit: { id: 'label.exit', defaultMessage: 'Exit' },
referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
screens: { id: 'label.screens', defaultMessage: 'Screens' },
browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
@ -354,6 +354,8 @@ export const labels = defineMessages({
destinationUrl: { id: 'label.destination-url', defaultMessage: 'Destination URL' },
audience: { id: 'label.audience', defaultMessage: 'Audience' },
invalidUrl: { id: 'label.invalid-url', defaultMessage: 'Invalid URL' },
environment: { id: 'label.environment', defaultMessage: 'Environment' },
weekly: { id: 'label.weekly', defaultMessage: 'Weekly' },
});
export const messages = defineMessages({

28
src/components/metrics/BrowsersTable.tsx
View file

@ -1,28 +0,0 @@
import { FilterLink } from '@/components/common/FilterLink';
import { MetricsTable, MetricsTableProps } from '@/components/metrics/MetricsTable';
import { useMessages } from '@/components/hooks';
import { useFormat } from '@/components/hooks';
import { TypeIcon } from '@/components/common/TypeIcon';
export function BrowsersTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const { formatBrowser } = useFormat();
function renderLink({ x: browser }) {
return (
<FilterLink id="browser" value={browser} label={formatBrowser(browser)}>
<TypeIcon type="browser" value={browser} />
</FilterLink>
);
}
return (
<MetricsTable
{...props}
title={formatMessage(labels.browsers)}
type="browser"
metric={formatMessage(labels.visitors)}
renderLabel={renderLink}
/>
);
}

20
src/components/metrics/ChannelsTable.tsx
View file

@ -1,20 +0,0 @@
import { MetricsTable, MetricsTableProps } from '@/components/metrics/MetricsTable';
import { useMessages } from '@/components/hooks';
export function ChannelsTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const renderLabel = ({ x }) => {
return formatMessage(labels[x]);
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.channels)}
type="channel"
renderLabel={renderLabel}
metric={formatMessage(labels.visitors)}
/>
);
}

37
src/components/metrics/CitiesTable.tsx
View file

@ -1,37 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { emptyFilter } from '@/lib/filters';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages } from '@/components/hooks';
import { useFormat } from '@/components/hooks';
export function CitiesTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const { formatCity } = useFormat();
const renderLink = ({ x: city, country }) => {
return (
<FilterLink id="city" value={city} label={formatCity(city, country)}>
{country && (
<img
src={`${process.env.basePath || ''}/images/country/${
country?.toLowerCase() || 'xx'
}.png`}
alt={country}
/>
)}
</FilterLink>
);
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.cities)}
type="city"
metric={formatMessage(labels.visitors)}
dataFilter={emptyFilter}
renderLabel={renderLink}
searchFormattedValues={true}
/>
);
}

17
src/components/metrics/CountriesTable.tsx
View file

@ -3,17 +3,22 @@ import { useCountryNames } from '@/components/hooks';
import { useLocale, useMessages, useFormat } from '@/components/hooks';
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { TypeIcon } from '@/components/common/TypeIcon';
import { MetricsExpandedTable } from '@/components/metrics/MetricsExpandedTable';
export function CountriesTable({ ...props }: MetricsTableProps) {
export interface CountriesTableProps extends MetricsTableProps {
isExpanded?: boolean;
}
export function CountriesTable({ isExpanded, ...props }: CountriesTableProps) {
const { locale } = useLocale();
const { countryNames } = useCountryNames(locale);
const { formatMessage, labels } = useMessages();
const { formatCountry } = useFormat();
const renderLink = ({ x: code }) => {
const renderLabel = ({ label: code }) => {
return (
<FilterLink
id="country"
type="country"
value={(countryNames[code] && code) || code}
label={formatCountry(code)}
>
@ -22,13 +27,15 @@ export function CountriesTable({ ...props }: MetricsTableProps) {
);
};
const Component = isExpanded ? MetricsExpandedTable : MetricsTable;
return (
<MetricsTable
<Component
{...props}
title={formatMessage(labels.countries)}
type="country"
metric={formatMessage(labels.visitors)}
renderLabel={renderLink}
renderLabel={renderLabel}
searchFormattedValues={true}
/>
);

29
src/components/metrics/DevicesTable.tsx
View file

@ -1,29 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages } from '@/components/hooks';
import { useFormat } from '@/components/hooks';
import { TypeIcon } from '@/components/common/TypeIcon';
export function DevicesTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const { formatDevice } = useFormat();
function renderLink({ x: device }) {
return (
<FilterLink id="device" value={labels[device] && device} label={formatDevice(device)}>
<TypeIcon type="device" value={device?.toLowerCase()} />
</FilterLink>
);
}
return (
<MetricsTable
{...props}
title={formatMessage(labels.devices)}
type="device"
metric={formatMessage(labels.visitors)}
renderLabel={renderLink}
searchFormattedValues={true}
/>
);
}

33
src/components/metrics/EventsTable.tsx
View file

@ -1,33 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { useMessages } from '@/components/hooks';
export interface EventsTableProps extends MetricsTableProps {
onLabelClick?: (value: string) => void;
}
export function EventsTable({ onLabelClick, ...props }: EventsTableProps) {
const { formatMessage, labels } = useMessages();
const renderLabel = ({ x: label }) => {
if (onLabelClick) {
return (
<div onClick={() => onLabelClick(label)} style={{ cursor: 'pointer' }}>
{label}
</div>
);
}
return label;
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.events)}
type="event"
metric={formatMessage(labels.actions)}
renderLabel={renderLabel}
allowDownload={false}
/>
);
}

33
src/components/metrics/HostnamesTable.tsx
View file

@ -1,33 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages } from '@/components/hooks';
import { Flexbox } from '@umami/react-zen';
export function HostnamesTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const renderLink = ({ x: hostname }) => {
return (
<Flexbox alignItems="center">
<FilterLink
id="hostname"
value={hostname}
externalUrl={`https://${hostname}`}
label={!hostname && formatMessage(labels.none)}
/>
</Flexbox>
);
};
return (
<>
<MetricsTable
{...props}
title={formatMessage(labels.hostname)}
type="hostname"
metric={formatMessage(labels.visitors)}
renderLabel={renderLink}
/>
</>
);
}

25
src/components/metrics/LanguagesTable.tsx
View file

@ -1,25 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { useLocale } from '@/components/hooks';
import { useMessages } from '@/components/hooks';
import { useFormat } from '@/components/hooks';
export function LanguagesTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { formatLanguage } = useFormat();
const renderLabel = ({ x }) => {
return <div className={locale}>{formatLanguage(x)}</div>;
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.languages)}
type="language"
metric={formatMessage(labels.visitors)}
renderLabel={renderLabel}
searchFormattedValues={true}
/>
);
}

7
src/components/metrics/ListExpandedTable.module.css
View file

@ -1,7 +0,0 @@
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 300px;
display: block;
}

3
src/components/metrics/ListExpandedTable.tsx
View file

@ -2,7 +2,6 @@ import { useMessages } from '@/components/hooks';
import { formatShortTime } from '@/lib/format';
import { DataColumn, DataTable } from '@umami/react-zen';
import { ReactNode } from 'react';
import styles from './ListExpandedTable.module.css';
export interface ListExpandedTableProps {
data?: any[];
@ -15,7 +14,7 @@ export function ListExpandedTable({ data = [], title, renderLabel }: ListExpande
return (
<DataTable data={data}>
<DataColumn id="label" label={title} align="start" className={styles.truncate}>
<DataColumn id="label" label={title} align="start">
{row =>
renderLabel
? renderLabel({ x: row?.['name'], country: row?.['country'] }, Number(row.id))

20
src/components/metrics/ListTable.tsx
View file

@ -9,13 +9,19 @@ import { formatLongCurrency, formatLongNumber } from '@/lib/format';
const ITEM_SIZE = 30;
interface ListData {
label: string;
count: number;
percent: number;
}
export interface ListTableProps {
data?: any[];
data?: ListData[];
title?: string;
metric?: string;
className?: string;
renderLabel?: (row: any, index: number) => ReactNode;
renderChange?: (row: any, index: number) => ReactNode;
renderLabel?: (data: ListData, index: number) => ReactNode;
renderChange?: (data: ListData, index: number) => ReactNode;
animate?: boolean;
virtualize?: boolean;
showPercentage?: boolean;
@ -37,14 +43,14 @@ export function ListTable({
}: ListTableProps) {
const { formatMessage, labels } = useMessages();
const getRow = (row: { x: any; y: any; z: any }, index: number) => {
const { x: label, y: value, z: percent } = row || {};
const getRow = (row: ListData, index: number) => {
const { label, count, percent } = row;
return (
<AnimatedRow
key={label}
key={`${label}${index}`}
label={renderLabel ? renderLabel(row, index) : (label ?? formatMessage(labels.unknown))}
value={value}
value={count}
percent={percent}
animate={animate && !virtualize}
showPercentage={showPercentage}

149
src/components/metrics/MetricLabel.tsx Normal file
View file

@ -0,0 +1,149 @@
import { Row } from '@umami/react-zen';
import {
useCountryNames,
useLocale,
useMessages,
useRegionNames,
useFormat,
} from '@/components/hooks';
import { FilterLink } from '@/components/common/FilterLink';
import { TypeIcon } from '@/components/common/TypeIcon';
import { Favicon } from '@/components/common/Favicon';
import { GROUPED_DOMAINS } from '@/lib/constants';
export interface MetricLabelProps {
type: string;
data: any;
onClick?: () => void;
}
export function MetricLabel({ type, data }: MetricLabelProps) {
const { formatMessage, labels } = useMessages();
const { formatValue, formatCity } = useFormat();
const { locale } = useLocale();
const { countryNames } = useCountryNames(locale);
const { getRegionName } = useRegionNames(locale);
const { label, country, domain } = data;
const isType = ['browser', 'country', 'device', 'os'].includes(type);
switch (type) {
case 'browser':
return (
<FilterLink
type="browser"
value={label}
label={formatValue(label, 'browser')}
icon={<TypeIcon type="browser" value={label} />}
/>
);
case 'channel':
return formatMessage(labels[label]);
case 'city':
return (
<FilterLink
type="city"
value={label}
label={formatCity(label, country)}
icon={
country && (
<img
src={`${process.env.basePath || ''}/images/country/${
country?.toLowerCase() || 'xx'
}.png`}
alt={country}
/>
)
}
/>
);
case 'region':
return (
<FilterLink
type="region"
value={label}
label={getRegionName(label, country)}
icon={<TypeIcon type="country" value={country} />}
/>
);
case 'country':
return (
<FilterLink
type="country"
value={(countryNames[label] && label) || label}
label={formatValue(label, 'country')}
icon={<TypeIcon type="country" value={label} />}
/>
);
case 'path':
case 'entry':
case 'exit':
return (
<FilterLink
type={type === 'entry' || type === 'exit' ? 'path' : type}
value={label}
label={!label && formatMessage(labels.none)}
externalUrl={
domain ? `${domain?.startsWith('http') ? domain : `https://${domain}`}${label}` : null
}
/>
);
case 'device':
return (
<FilterLink
type="device"
value={labels[label] && label}
label={formatValue(label, 'device')}
icon={<TypeIcon type="device" value={label?.toLowerCase()} />}
/>
);
case 'referrer':
return (
<FilterLink
type="referrer"
value={label}
externalUrl={`https://${label}`}
label={!label && formatMessage(labels.none)}
icon={<Favicon domain={label} />}
/>
);
case 'grouped':
if (label === 'Other') {
return `(${formatMessage(labels.other)})`;
} else {
return (
<Row alignItems="center" gap="3">
<Favicon domain={label} />
{GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name}
</Row>
);
}
case 'language':
return formatValue(label, 'language');
default:
return (
<FilterLink
type={type}
value={label}
icon={
isType && (
<TypeIcon
type={type as 'browser' | 'country' | 'device' | 'os'}
value={label?.toLowerCase()?.replaceAll(/\W/g, '-')}
/>
)
}
/>
);
}
}

106
src/components/metrics/MetricsExpandedTable.tsx Normal file
View file

@ -0,0 +1,106 @@
import { ReactNode, useState } from 'react';
import { Button, Column, DataColumn, DataTable, Icon, Row, SearchField } from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { useMessages, useWebsiteExpandedMetricsQuery } from '@/components/hooks';
import { Close } from '@/components/icons';
import { DownloadButton } from '@/components/input/DownloadButton';
import { formatShortTime } from '@/lib/format';
import { MetricLabel } from '@/components/metrics/MetricLabel';
export interface MetricsExpandedTableProps {
websiteId: string;
type?: string;
title?: string;
dataFilter?: (data: any) => any;
onSearch?: (search: string) => void;
params?: { [key: string]: any };
allowSearch?: boolean;
allowDownload?: boolean;
renderLabel?: (row: any, index: number) => ReactNode;
onClose?: () => void;
children?: ReactNode;
}
export function MetricsExpandedTable({
websiteId,
type,
title,
params,
allowSearch = true,
allowDownload = true,
onClose,
children,
}: MetricsExpandedTableProps) {
const [search, setSearch] = useState('');
const { formatMessage, labels } = useMessages();
const isType = ['browser', 'country', 'device', 'os'].includes(type);
const { data, isLoading, isFetching, error } = useWebsiteExpandedMetricsQuery(websiteId, {
type,
search: isType ? undefined : search,
...params,
});
const items = data?.map(({ name, ...props }) => ({ label: name, ...props }));
return (
<>
<Row alignItems="center" paddingBottom="3">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
<Row justifyContent="flex-end" flexGrow={1} gap>
{children}
{allowDownload && <DownloadButton filename={type} data={data} />}
{onClose && (
<Button onPress={onClose} variant="quiet">
<Icon>
<Close />
</Icon>
</Button>
)}
</Row>
</Row>
<LoadingPanel
data={data}
isFetching={isFetching}
isLoading={isLoading}
error={error}
height="100%"
>
<Column overflowY="auto" minHeight="0" height="100%" paddingRight="3" overflow="hidden">
{items && (
<DataTable data={items}>
<DataColumn id="label" label={title} width="2fr" align="start">
{row => <MetricLabel type={type} data={row} />}
</DataColumn>
<DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
{row => row?.['visitors']?.toLocaleString()}
</DataColumn>
<DataColumn id="visits" label={formatMessage(labels.visits)} align="end">
{row => row?.['visits']?.toLocaleString()}
</DataColumn>
<DataColumn id="pageviews" label={formatMessage(labels.views)} align="end">
{row => row?.['pageviews']?.toLocaleString()}
</DataColumn>
<DataColumn id="bounceRate" label={formatMessage(labels.bounceRate)} align="end">
{row => {
const n = (Math.min(row?.['visits'], row?.['bounces']) / row?.['visits']) * 100;
return Math.round(+n) + '%';
}}
</DataColumn>
<DataColumn
id="visitDuration"
label={formatMessage(labels.visitDuration)}
align="end"
>
{row => {
const n = (row?.['totaltime'] / row?.['visits']) * 100;
return `${+n < 0 ? '-' : ''}${formatShortTime(Math.abs(~~n), ['m', 's'], ' ')}`;
}}
</DataColumn>
</DataTable>
)}
</Column>
</LoadingPanel>
</>
);
}

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

@ -1,37 +1,20 @@
import { ReactNode, useMemo, useState } from 'react';
import { Button, Column, Icon, Row, SearchField, Text } from '@umami/react-zen';
import { useMemo } from 'react';
import { Icon, Row, Text } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import {
useFormat,
useMessages,
useNavigation,
useWebsiteExpandedMetricsQuery,
useWebsiteMetricsQuery,
} from '@/components/hooks';
import { Close, Maximize } from '@/components/icons';
import { DownloadButton } from '@/components/input/DownloadButton';
import { DEFAULT_ANIMATION_DURATION } from '@/lib/constants';
import { useMessages, useNavigation, useWebsiteMetricsQuery } from '@/components/hooks';
import { Maximize } from '@/components/icons';
import { percentFilter } from '@/lib/filters';
import { ListExpandedTable, ListExpandedTableProps } from './ListExpandedTable';
import { ListTable, ListTableProps } from './ListTable';
import { MetricLabel } from '@/components/metrics/MetricLabel';
export interface MetricsTableProps extends ListTableProps {
websiteId: string;
type?: string;
type: string;
dataFilter?: (data: any) => any;
limit?: number;
delay?: number;
onSearch?: (search: string) => void;
allowSearch?: boolean;
searchFormattedValues?: boolean;
showMore?: boolean;
params?: { [key: string]: any };
allowDownload?: boolean;
isExpanded?: boolean;
onClose?: () => void;
children?: ReactNode;
params?: Record<string, any>;
}
export function MetricsTable({
@ -39,50 +22,17 @@ export function MetricsTable({
type,
dataFilter,
limit,
delay = null,
allowSearch = false,
searchFormattedValues = false,
showMore = true,
showMore = false,
params,
allowDownload = true,
isExpanded = false,
onClose,
children,
...props
}: MetricsTableProps) {
const [search, setSearch] = useState('');
const { formatValue } = useFormat();
const { updateParams } = useNavigation();
const { formatMessage, labels } = useMessages();
const expandedQuery = useWebsiteExpandedMetricsQuery(
websiteId,
{
type,
search: searchFormattedValues ? undefined : search,
...params,
},
{
retryDelay: delay || DEFAULT_ANIMATION_DURATION,
enabled: isExpanded,
},
);
const query = useWebsiteMetricsQuery(
websiteId,
{
type,
limit,
search: searchFormattedValues ? undefined : search,
...params,
},
{
retryDelay: delay || DEFAULT_ANIMATION_DURATION,
enabled: !isExpanded,
},
);
const { data, isLoading, isFetching, error } = isExpanded ? expandedQuery : query;
const { data, isLoading, isFetching, error } = useWebsiteMetricsQuery(websiteId, {
type,
limit,
...params,
});
const filteredData = useMemo(() => {
if (data) {
@ -98,23 +48,16 @@ export function MetricsTable({
}
}
if (searchFormattedValues && search) {
items = items.filter(({ x, ...data }) => {
const value = formatValue(x, type, data);
return value?.toLowerCase().includes(search.toLowerCase());
});
}
items = percentFilter(items);
return items;
return items.map(({ x, y, z, ...props }) => ({ label: x, count: y, percent: z, ...props }));
}
return [];
}, [data, dataFilter, search, limit, formatValue, type]);
}, [data, dataFilter, limit, type]);
const downloadData = isExpanded ? data : filteredData;
const hasActions = data && (allowSearch || allowDownload || onClose || children);
const renderLabel = (data: any) => {
return <MetricLabel type={type} data={data} />;
};
return (
<LoadingPanel
@ -124,37 +67,7 @@ export function MetricsTable({
error={error}
height="100%"
>
{hasActions && (
<Row alignItems="center" paddingBottom="3">
{allowSearch && <SearchField value={search} onSearch={setSearch} delay={300} />}
<Row justifyContent="flex-end" flexGrow={1} gap>
{children}
{allowDownload && <DownloadButton filename={type} data={downloadData} />}
{onClose && (
<Button onPress={onClose} variant="quiet">
<Icon>
<Close />
</Icon>
</Button>
)}
</Row>
</Row>
)}
<Column
overflowY="auto"
minHeight="0"
height="100%"
paddingRight="3"
overflow="hidden"
flexGrow={1}
>
{data &&
(isExpanded ? (
<ListExpandedTable {...(props as ListExpandedTableProps)} data={data} />
) : (
<ListTable {...(props as ListTableProps)} data={filteredData} />
))}
</Column>
{data && <ListTable {...props} data={filteredData} renderLabel={renderLabel} />}
{showMore && limit && (
<Row justifyContent="center">
<LinkButton href={updateParams({ view: type })} variant="quiet">

27
src/components/metrics/OSTable.tsx
View file

@ -1,27 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages, useFormat } from '@/components/hooks';
import { TypeIcon } from '@/components/common/TypeIcon';
export function OSTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const { formatOS } = useFormat();
function renderLink({ x: os }) {
return (
<FilterLink id="os" value={os} label={formatOS(os)}>
<TypeIcon type="os" value={os?.toLowerCase()?.replaceAll(/\W/g, '-')} />
</FilterLink>
);
}
return (
<MetricsTable
{...props}
type="os"
title={formatMessage(labels.os)}
metric={formatMessage(labels.visitors)}
renderLabel={renderLink}
/>
);
}

67
src/components/metrics/PagesTable.tsx
View file

@ -1,67 +0,0 @@
import { FilterButtons } from '@/components/input/FilterButtons';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages, useNavigation, useWebsite } from '@/components/hooks';
import { emptyFilter } from '@/lib/filters';
import { MetricsTable, MetricsTableProps } from './MetricsTable';
export interface PagesTableProps extends MetricsTableProps {
type: string;
allowFilter?: boolean;
}
export function PagesTable({ type, allowFilter, ...props }: PagesTableProps) {
const { router, updateParams } = useNavigation();
const { formatMessage, labels } = useMessages();
const { domain } = useWebsite();
const handleChange = (id: any) => {
router.push(updateParams({ view: id }));
};
const buttons = [
{
id: 'path',
label: formatMessage(labels.path),
},
{
id: 'entry',
label: formatMessage(labels.entry),
},
{
id: 'exit',
label: formatMessage(labels.exit),
},
{
id: 'title',
label: formatMessage(labels.title),
},
];
const renderLink = ({ x }) => {
return (
<FilterLink
id={type === 'entry' || type === 'exit' ? 'path' : type}
value={x}
label={!x && formatMessage(labels.none)}
externalUrl={
type !== 'title'
? `${domain.startsWith('http') ? domain : `https://${domain}`}${x}`
: null
}
/>
);
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.pages)}
type={type}
metric={formatMessage(labels.visitors)}
dataFilter={emptyFilter}
renderLabel={renderLink}
>
{allowFilter && <FilterButtons items={buttons} value={type} onChange={handleChange} />}
</MetricsTable>
);
}

16
src/components/metrics/QueryParametersTable.module.css
View file

@ -1,16 +0,0 @@
.item {
display: inline-flex;
align-items: center;
line-height: 26px;
}
.param {
padding: 0 8px;
color: var(--primary-color);
background: var(--blue100);
border-radius: 4px;
}
.value {
padding: 0 8px;
}

66
src/components/metrics/QueryParametersTable.tsx
View file

@ -1,66 +0,0 @@
import { useState } from 'react';
import { Row, Text } from '@umami/react-zen';
import { FilterButtons } from '@/components/input/FilterButtons';
import { emptyFilter, paramFilter } from '@/lib/filters';
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { useMessages } from '@/components/hooks';
const FILTER_COMBINED = 'filter-combined';
const FILTER_RAW = 'filter-raw';
const filters = {
[FILTER_RAW]: emptyFilter,
[FILTER_COMBINED]: [emptyFilter, paramFilter],
};
export function QueryParametersTable({
allowFilter,
...props
}: { allowFilter?: boolean } & MetricsTableProps) {
const [filter, setFilter] = useState(FILTER_COMBINED);
const { formatMessage, labels } = useMessages();
const buttons = [
{
id: FILTER_COMBINED,
label: formatMessage(labels.filterCombined),
},
{ id: FILTER_RAW, label: formatMessage(labels.filterRaw) },
];
const renderLabel = ({ x, p, v }) => {
return (
<Row alignItems="center" maxWidth="600px" gap>
{filter === FILTER_RAW ? (
<Text truncate title={x}>
{x}
</Text>
) : (
<>
<Text color="primary" weight="bold">
{p}
</Text>
<Text truncate title={v}>
{v}
</Text>
</>
)}
</Row>
);
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.query)}
type="query"
metric={formatMessage(labels.views)}
dataFilter={filters[filter]}
renderLabel={renderLabel}
delay={0}
isExpanded={false}
>
{allowFilter && <FilterButtons items={buttons} value={filter} onChange={setFilter} />}
</MetricsTable>
);
}

75
src/components/metrics/ReferrersTable.tsx
View file

@ -1,75 +0,0 @@
import { Favicon } from '@/components/common/Favicon';
import { FilterButtons } from '@/components/input/FilterButtons';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages, useNavigation } from '@/components/hooks';
import { GROUPED_DOMAINS } from '@/lib/constants';
import { emptyFilter } from '@/lib/filters';
import { Row } from '@umami/react-zen';
import { MetricsTable, MetricsTableProps } from './MetricsTable';
export interface ReferrersTableProps extends MetricsTableProps {
allowFilter?: boolean;
}
export function ReferrersTable({ allowFilter, ...props }: ReferrersTableProps) {
const {
router,
updateParams,
query: { view = 'referrer' },
} = useNavigation();
const { formatMessage, labels } = useMessages();
const handleSelect = (key: any) => {
router.push(updateParams({ view: key }));
};
const buttons = [
{
id: 'referrer',
label: formatMessage(labels.domain),
},
{
id: 'grouped',
label: formatMessage(labels.grouped),
},
];
const renderLink = ({ x: referrer }) => {
if (view === 'grouped') {
if (referrer === 'Other') {
return `(${formatMessage(labels.other)})`;
} else {
return (
<Row alignItems="center" gap="3">
<Favicon domain={referrer} />
{GROUPED_DOMAINS.find(({ domain }) => domain === referrer)?.name}
</Row>
);
}
}
return (
<FilterLink
id="referrer"
value={referrer}
externalUrl={`https://${referrer}`}
label={!referrer && formatMessage(labels.none)}
>
<Favicon domain={referrer} />
</FilterLink>
);
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.referrers)}
type={view}
metric={formatMessage(labels.visitors)}
dataFilter={emptyFilter}
renderLabel={renderLink}
>
{allowFilter && <FilterButtons items={buttons} value={view} onChange={handleSelect} />}
</MetricsTable>
);
}

31
src/components/metrics/RegionsTable.tsx
View file

@ -1,31 +0,0 @@
import { FilterLink } from '@/components/common/FilterLink';
import { emptyFilter } from '@/lib/filters';
import { useMessages, useLocale, useRegionNames } from '@/components/hooks';
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { TypeIcon } from '@/components/common/TypeIcon';
export function RegionsTable(props: MetricsTableProps) {
const { locale } = useLocale();
const { formatMessage, labels } = useMessages();
const { getRegionName } = useRegionNames(locale);
const renderLink = ({ x: code, country }) => {
return (
<FilterLink id="region" value={code} label={getRegionName(code, country)}>
<TypeIcon type="country" value={country?.toLowerCase()} />
</FilterLink>
);
};
return (
<MetricsTable
{...props}
title={formatMessage(labels.regions)}
type="region"
metric={formatMessage(labels.visitors)}
dataFilter={emptyFilter}
renderLabel={renderLink}
searchFormattedValues={true}
/>
);
}

15
src/components/metrics/ScreenTable.tsx
View file

@ -1,15 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { useMessages } from '@/components/hooks';
export function ScreenTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
return (
<MetricsTable
{...props}
title={formatMessage(labels.screens)}
type="screen"
metric={formatMessage(labels.visitors)}
/>
);
}

28
src/components/metrics/TagsTable.tsx
View file

@ -1,28 +0,0 @@
import { MetricsTable, MetricsTableProps } from './MetricsTable';
import { FilterLink } from '@/components/common/FilterLink';
import { useMessages } from '@/components/hooks';
import { Flexbox } from '@umami/react-zen';
export function TagsTable(props: MetricsTableProps) {
const { formatMessage, labels } = useMessages();
const renderLink = ({ x: tag }) => {
return (
<Flexbox alignItems="center">
<FilterLink id="tag" value={tag} label={!tag && formatMessage(labels.none)} />
</Flexbox>
);
};
return (
<>
<MetricsTable
{...props}
title={formatMessage(labels.tags)}
type="tag"
metric={formatMessage(labels.views)}
renderLabel={renderLink}
/>
</>
);
}

28
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx → src/components/metrics/WeeklyTraffic.tsx
View file

@ -1,12 +1,12 @@
import { Row, Grid, Text } from '@umami/react-zen';
import { format, startOfDay, addHours } from 'date-fns';
import { useLocale, useMessages, useWebsiteSessionsWeeklyQuery } from '@/components/hooks';
import { useLocale, useMessages, useWeeklyTrafficQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { getDayOfWeekAsDate } from '@/lib/date';
import { Focusable, Tooltip, TooltipTrigger } from '@umami/react-zen';
export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const { data, isLoading, error } = useWebsiteSessionsWeeklyQuery(websiteId);
export function WeeklyTraffic({ websiteId }: { websiteId: string }) {
const { data, isLoading, error } = useWeeklyTrafficQuery(websiteId);
const { dateLocale } = useLocale();
const { labels, formatMessage } = useMessages();
const { weekStartsOn } = dateLocale.options;
@ -40,19 +40,19 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
<Grid columns="repeat(8, 1fr)" gap>
{data && (
<>
<Grid rows="repeat(25, 20px)" gap="1">
<Grid rows="repeat(25, 16px)" gap="1">
<Row>&nbsp;</Row>
{Array(24)
.fill(null)
.map((_, i) => {
const label = format(addHours(startOfDay(new Date()), i), 'p', {
const label = format(addHours(startOfDay(new Date()), i), 'haaa', {
locale: dateLocale,
})
.replace(/\D00 ?/, '')
.toLowerCase();
});
return (
<Row key={i} justifyContent="flex-end">
<Text color="muted">{label}</Text>
<Text color="muted" size="2">
{label}
</Text>
</Row>
);
})}
@ -61,7 +61,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
const day = data[index];
return (
<Grid
rows="repeat(24, 20px)"
rows="repeat(24, 16px)"
justifyContent="center"
alignItems="center"
key={index}
@ -81,15 +81,15 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
alignItems="center"
justifyContent="center"
backgroundColor="2"
width="20px"
height="20px"
width="16px"
height="16px"
borderRadius="full"
style={{ margin: '0 auto' }}
>
<Row
backgroundColor="primary"
width="20px"
height="20px"
width="16px"
height="16px"
borderRadius="full"
style={{ opacity: pct, transform: `scale(${pct})` }}
/>

4
src/lang/en-US.json
View file

@ -86,13 +86,13 @@
"label.email": "Email",
"label.enable-share-url": "Enable share URL",
"label.end-step": "End Step",
"label.entry": "Entry path",
"label.entry": "Entry page",
"label.event": "Event",
"label.event-data": "Event data",
"label.event-name": "Event name",
"label.events": "Events",
"label.exists": "Exists",
"label.exit": "Exit path",
"label.exit": "Exit page",
"label.false": "False",
"label.field": "Field",
"label.fields": "Fields",

2
src/queries/index.ts
View file

@ -35,7 +35,6 @@ export * from '@/queries/sql/sessions/getSessionMetrics';
export * from '@/queries/sql/sessions/getSessionExpandedMetrics';
export * from '@/queries/sql/sessions/getWebsiteSessions';
export * from '@/queries/sql/sessions/getWebsiteSessionStats';
export * from '@/queries/sql/sessions/getWebsiteSessionsWeekly';
export * from '@/queries/sql/sessions/getSessionActivity';
export * from '@/queries/sql/sessions/getSessionStats';
export * from '@/queries/sql/sessions/saveSessionData';
@ -47,3 +46,4 @@ export * from '@/queries/sql/getRealtimeData';
export * from '@/queries/sql/getValues';
export * from '@/queries/sql/getWebsiteDateRange';
export * from '@/queries/sql/getWebsiteStats';
export * from '@/queries/sql/getWeeklyTraffic';

4
src/queries/sql/sessions/getWebsiteSessionsWeekly.ts → src/queries/sql/getWeeklyTraffic.ts
View file

@ -4,9 +4,7 @@ import { runQuery, PRISMA, CLICKHOUSE } from '@/lib/db';
import { QueryFilters } from '@/lib/types';
import { EVENT_COLUMNS } from '@/lib/constants';
export async function getWebsiteSessionsWeekly(
...args: [websiteId: string, filters: QueryFilters]
) {
export async function getWeeklyTraffic(...args: [websiteId: string, filters: QueryFilters]) {
return runQuery({
[PRISMA]: () => relationalQuery(...args),
[CLICKHOUSE]: () => clickhouseQuery(...args),