watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-06 13:47:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Updated reports.

Browse source
This commit is contained in:
Mike Cao 2025-06-08 22:21:28 -07:00
parent 28e872f219
commit 01bd21c5b4
75 changed files with 1373 additions and 980 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -32,7 +32,7 @@ export function WebsiteFilterButton({
return (
<DialogTrigger>
<Button variant="quiet">
<Button variant="outline">
<Icon>
<ListFilter />
</Icon>

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

@ -9,7 +9,7 @@ export function WebsiteHeader() {
const website = useWebsite();
return (
<PageHeader title={website.name} icon={<Favicon domain={website.domain} />}>
<PageHeader title={website.name} icon={<Favicon domain={website.domain} />} showBorder={false}>
<Row alignItems="center" gap>
<ActiveUsers websiteId={website.id} />
<Button>

18
src/app/(main)/websites/[websiteId]/WebsiteLayout.tsx
View file

@ -1,24 +1,18 @@
'use client';
import { ReactNode } from 'react';
import { Grid, Column } from '@umami/react-zen';
import { Column } from '@umami/react-zen';
import { WebsiteProvider } from './WebsiteProvider';
import { WebsiteNav } from '@/app/(main)/websites/[websiteId]/WebsiteNav';
import { PageBody } from '@/components/common/PageBody';
import { WebsiteHeader } from '@/app/(main)/websites/[websiteId]/WebsiteHeader';
import { WebsiteHeader } from './WebsiteHeader';
import { WebsiteTabs } from './WebsiteTabs';
export function WebsiteLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
return (
<WebsiteProvider websiteId={websiteId}>
<PageBody>
<Column gap="6">
<WebsiteHeader />
<Grid columns="auto 1fr" justifyContent="center" gap="6" width="100%">
<Column position="sticky" top="20px" alignSelf="flex-start" width="200px">
<WebsiteNav websiteId={websiteId} />
</Column>
<Column>{children}</Column>
</Grid>
</Column>
<WebsiteHeader />
<WebsiteTabs />
<Column>{children}</Column>
</PageBody>
</WebsiteProvider>
);

64
src/app/(main)/websites/[websiteId]/WebsiteTabs.tsx Normal file
View file

@ -0,0 +1,64 @@
import { Tabs, TabList, Tab, Icon, Text, Row } from '@umami/react-zen';
import { useWebsite } from '@/components/hooks/useWebsite';
import { useMessages, useNavigation } from '@/components/hooks';
import { Clock, Eye, Lightning, User, ChartPie } from '@/components/icons';
export function WebsiteTabs() {
const website = useWebsite();
const { pathname, renderTeamUrl } = useNavigation();
const { formatMessage, labels } = useMessages();
const links = [
{
id: 'overview',
label: formatMessage(labels.overview),
icon: <Eye />,
path: '',
},
{
id: 'events',
label: formatMessage(labels.events),
icon: <Lightning />,
path: '/events',
},
{
id: 'sessions',
label: formatMessage(labels.users),
icon: <User />,
path: '/sessions',
},
{
id: 'realtime',
label: formatMessage(labels.realtime),
icon: <Clock />,
path: '/realtime',
},
{
id: 'reports',
label: formatMessage(labels.reports),
icon: <ChartPie />,
path: '/reports',
},
];
const selectedKey = links.find(({ path }) => path && pathname.includes(path))?.id || 'overview';
return (
<Row marginBottom="6">
<Tabs selectedKey={selectedKey}>
<TabList>
{links.map(({ id, label, icon, path }) => {
return (
<Tab key={id} id={id} href={renderTeamUrl(`/websites/${website.id}${path}`)}>
<Row alignItems="center" gap>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</Row>
</Tab>
);
})}
</TabList>
</Tabs>
</Row>
);
}

31
src/app/(main)/websites/[websiteId]/realtime/RealtimeHome.tsx
View file

@ -1,31 +0,0 @@
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { PageBody } from '@/components/common/PageBody';
import { SectionHeader } from '@/components/common/SectionHeader';
import { useApi, useMessages } from '@/components/hooks';
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
export function RealtimeHome() {
const { formatMessage, labels, messages } = useMessages();
const { get, useQuery } = useApi();
const router = useRouter();
const { data, isLoading, error } = useQuery({
queryKey: ['websites:me'],
queryFn: () => get('/me/websites'),
});
useEffect(() => {
if (data?.length) {
router.push(`realtime/${data[0].id}`);
}
}, [data, router]);
return (
<PageBody isLoading={isLoading || data?.length > 0} error={error}>
<SectionHeader title={formatMessage(labels.realtime)} />
{data?.length === 0 && (
<EmptyPlaceholder message={formatMessage(messages.noWebsitesConfigured)} />
)}
</PageBody>
);
}

15
src/app/(main)/websites/[websiteId]/reports/ReportsLayout.tsx Normal file
View file

@ -0,0 +1,15 @@
'use client';
import { ReactNode } from 'react';
import { Grid, Column } from '@umami/react-zen';
import { ReportsNav } from './ReportsNav';
export function ReportsLayout({ websiteId, children }: { websiteId: string; children: ReactNode }) {
return (
<Grid columns="200px 1fr" gap="6">
<Column>
<ReportsNav websiteId={websiteId} />
</Column>
<Column minWidth="0">{children}</Column>
</Grid>
);
}

81
src/app/(main)/websites/[websiteId]/reports/ReportsNav.tsx Normal file
View file

@ -0,0 +1,81 @@
import { Row, NavMenu, NavMenuItem, Icon, Text } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { Funnel, Lightbulb, Magnet, Money, Network, Path, Tag, Target } from '@/components/icons';
import Link from 'next/link';
export function ReportsNav({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { pathname, renderTeamUrl } = useNavigation();
const links = [
{
id: 'goals',
label: formatMessage(labels.goals),
icon: <Target />,
path: '/goals',
},
{
id: 'funnel',
label: formatMessage(labels.funnels),
icon: <Funnel />,
path: '/funnels',
},
{
id: 'journeys',
label: formatMessage(labels.journeys),
icon: <Path />,
path: '/journeys',
},
{
id: 'retention',
label: formatMessage(labels.retention),
icon: <Magnet />,
path: '/retention',
},
{
id: 'utm',
label: formatMessage(labels.utm),
icon: <Tag />,
path: '/utm',
},
{
id: 'revenue',
label: formatMessage(labels.revenue),
icon: <Money />,
path: '/revenue',
},
{
id: 'attribution',
label: formatMessage(labels.attribution),
icon: <Network />,
path: '/attribution',
},
{
id: 'insights',
label: formatMessage(labels.insights),
icon: <Lightbulb />,
path: '/insights',
},
];
const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'goals';
return (
<NavMenu highlightColor="3">
{links.map(({ id, label, icon, path }) => {
const isSelected = selected === id;
return (
<Link key={id} href={renderTeamUrl(`/websites/${websiteId}/reports${path}`)}>
<NavMenuItem isSelected={isSelected}>
<Row alignItems="center" gap>
<Icon>{icon}</Icon>
<Text>{label}</Text>
</Row>
</NavMenuItem>
</Link>
);
})}
</NavMenu>
);
}

0
src/app/(main)/websites/[websiteId]/goals/Goal.tsx → src/app/(main)/websites/[websiteId]/reports/attribution/Goal.tsx
View file

0
src/app/(main)/websites/[websiteId]/goals/GoalAddButton.tsx → src/app/(main)/websites/[websiteId]/reports/attribution/GoalAddButton.tsx
View file

0
src/app/(main)/websites/[websiteId]/goals/GoalEditForm.tsx → src/app/(main)/websites/[websiteId]/reports/attribution/GoalEditForm.tsx
View file

2
src/app/(main)/websites/[websiteId]/goals/GoalsPage.tsx → src/app/(main)/websites/[websiteId]/reports/attribution/GoalsPage.tsx
View file

@ -3,7 +3,7 @@ import { Grid, Loading } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { Goal } from './Goal';
import { GoalAddButton } from './GoalAddButton';
import { WebsiteControls } from '../WebsiteControls';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { useDateRange, useReportsQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';

0
src/app/(main)/websites/[websiteId]/goals/page.tsx → src/app/(main)/websites/[websiteId]/reports/attribution/page.tsx
View file

0
src/app/(main)/websites/[websiteId]/funnels/Funnel.tsx → src/app/(main)/websites/[websiteId]/reports/funnels/Funnel.tsx
View file

0
src/app/(main)/websites/[websiteId]/funnels/FunnelAddButton.tsx → src/app/(main)/websites/[websiteId]/reports/funnels/FunnelAddButton.tsx
View file

0
src/app/(main)/websites/[websiteId]/funnels/FunnelEditForm.tsx → src/app/(main)/websites/[websiteId]/reports/funnels/FunnelEditForm.tsx
View file

12
src/app/(main)/websites/[websiteId]/funnels/FunnelsPage.tsx → src/app/(main)/websites/[websiteId]/reports/funnels/FunnelsPage.tsx
View file

@ -1,9 +1,9 @@
'use client';
import { Grid, Loading } from '@umami/react-zen';
import { Grid, Column } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { Funnel } from './Funnel';
import { FunnelAddButton } from './FunnelAddButton';
import { WebsiteControls } from '../WebsiteControls';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { useDateRange, useReportsQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';
@ -14,12 +14,8 @@ export function FunnelsPage({ websiteId }: { websiteId: string }) {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
if (!result) {
return <Loading position="page" />;
}
return (
<>
<Column gap>
<WebsiteControls websiteId={websiteId} />
<LoadingPanel isEmpty={!result?.data} isLoading={!result}>
<SectionHeader>
@ -33,6 +29,6 @@ export function FunnelsPage({ websiteId }: { websiteId: string }) {
))}
</Grid>
</LoadingPanel>
</>
</Column>
);
}

0
src/app/(main)/websites/[websiteId]/funnels/page.tsx → src/app/(main)/websites/[websiteId]/reports/funnels/page.tsx
View file

98
src/app/(main)/websites/[websiteId]/reports/goals/Goal.tsx Normal file
View file

@ -0,0 +1,98 @@
import { Grid, Row, Column, Text, Icon, ProgressBar, Dialog } from '@umami/react-zen';
import { ReportEditButton } from '@/components/input/ReportEditButton';
import { useMessages, useResultQuery } from '@/components/hooks';
import { File, Lightning, User } from '@/components/icons';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { formatLongNumber } from '@/lib/format';
import { GoalEditForm } from './GoalEditForm';
export interface GoalProps {
id: string;
name: string;
type: string;
parameters: {
name: string;
type: string;
value: string;
};
websiteId: string;
startDate: Date;
endDate: Date;
}
export type GoalData = { num: number; total: number };
export function Goal({ id, name, type, parameters, websiteId, startDate, endDate }: GoalProps) {
const { formatMessage, labels } = useMessages();
const { data, error, isLoading } = useResultQuery<GoalData>(type, {
websiteId,
dateRange: {
startDate,
endDate,
},
parameters,
});
const isPage = parameters?.type === 'page';
return (
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
<Grid gap>
<Grid columns="1fr auto" gap>
<Column gap>
<Row>
<Text size="4" weight="bold">
{name}
</Text>
</Row>
</Column>
<Column>
<ReportEditButton id={id} name={name} type={type}>
{({ close }) => {
return (
<Dialog
title={formatMessage(labels.goal)}
variant="modal"
style={{ minHeight: 300, minWidth: 400 }}
>
<GoalEditForm id={id} websiteId={websiteId} onClose={close} />
</Dialog>
);
}}
</ReportEditButton>
</Column>
</Grid>
<Row alignItems="center" justifyContent="space-between" gap>
<Text color="muted">
{formatMessage(isPage ? labels.viewedPage : labels.triggeredEvent)}
</Text>
<Text color="muted">{formatMessage(labels.conversionRate)}</Text>
</Row>
<Row alignItems="center" justifyContent="space-between" gap>
<Row alignItems="center" gap>
<Icon>{parameters.type === 'page' ? <File /> : <Lightning />}</Icon>
<Text>{parameters.value}</Text>
</Row>
<Row alignItems="center" gap>
<Icon>
<User />
</Icon>
<Text title={`${data?.num} / ${data?.total}`}>{`${formatLongNumber(
data?.num,
)} / ${formatLongNumber(data?.total)}`}</Text>
</Row>
</Row>
<Row alignItems="center" gap="6">
<ProgressBar
value={data?.num || 0}
minValue={0}
maxValue={data?.total || 1}
style={{ width: '100%' }}
/>
<Text weight="bold" size="7">
{data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
</Text>
</Row>
</Grid>
</LoadingPanel>
);
}

28
src/app/(main)/websites/[websiteId]/reports/goals/GoalAddButton.tsx Normal file
View file

@ -0,0 +1,28 @@
import { Button, DialogTrigger, Dialog, Icon, Text, Modal } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { GoalEditForm } from './GoalEditForm';
import { Plus } from '@/components/icons';
export function GoalAddButton({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
return (
<DialogTrigger>
<Button variant="primary">
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(labels.goal)}</Text>
</Button>
<Modal>
<Dialog
variant="modal"
title={formatMessage(labels.goal)}
style={{ minHeight: 375, minWidth: 400 }}
>
{({ close }) => <GoalEditForm websiteId={websiteId} onClose={close} />}
</Dialog>
</Modal>
</DialogTrigger>
);
}

114
src/app/(main)/websites/[websiteId]/reports/goals/GoalEditForm.tsx Normal file
View file

@ -0,0 +1,114 @@
import {
Form,
FormField,
TextField,
Grid,
FormButtons,
FormSubmitButton,
Button,
RadioGroup,
Radio,
Text,
Icon,
Loading,
} from '@umami/react-zen';
import { useApi, useMessages, useModified, useReportQuery } from '@/components/hooks';
import { File, Lightning } from '@/components/icons';
export function GoalEditForm({
id,
websiteId,
onSave,
onClose,
}: {
id?: string;
websiteId: string;
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { touch } = useModified();
const { post, useMutation } = useApi();
const { data } = useReportQuery(id);
const { mutate, error, isPending } = useMutation({
mutationFn: (params: any) => post(`/reports${id ? `/${id}` : ''}`, params),
});
const handleSubmit = async ({ name, ...parameters }) => {
mutate(
{ ...data, id, name, type: 'goal', websiteId, parameters },
{
onSuccess: async () => {
if (id) touch(`report:${id}`);
touch('reports:goal');
onSave?.();
onClose?.();
},
},
);
};
if (id && !data) {
return <Loading position="page" />;
}
const defaultValues = {
name: data?.name || '',
type: data?.parameters?.type || 'page',
value: data?.parameters?.value || '',
};
return (
<Form onSubmit={handleSubmit} error={error?.message} defaultValues={defaultValues}>
{({ watch }) => {
const watchType = watch('type');
return (
<>
<FormField
name="name"
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormField>
<FormField
name="type"
label={formatMessage(labels.type)}
rules={{ required: formatMessage(labels.required) }}
>
<RadioGroup orientation="horizontal" variant="box">
<Grid columns="1fr 1fr" flexGrow={1} gap>
<Radio value="page">
<Icon>
<File />
</Icon>
<Text>{formatMessage(labels.page)}</Text>
</Radio>
<Radio value="event">
<Icon>
<Lightning />
</Icon>
<Text>{formatMessage(labels.event)}</Text>
</Radio>
</Grid>
</RadioGroup>
</FormField>
<FormField
name="value"
label={formatMessage(watchType === 'event' ? labels.eventName : labels.path)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormField>
<FormButtons>
<Button onPress={onClose} isDisabled={isPending}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton>{formatMessage(labels.save)}</FormSubmitButton>
</FormButtons>
</>
);
}}
</Form>
);
}

34
src/app/(main)/websites/[websiteId]/reports/goals/GoalsPage.tsx Normal file
View file

@ -0,0 +1,34 @@
'use client';
import { Grid, Column } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { Goal } from './Goal';
import { GoalAddButton } from './GoalAddButton';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { useDateRange, useReportsQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';
export function GoalsPage({ websiteId }: { websiteId: string }) {
const { result } = useReportsQuery({ websiteId, type: 'goal' });
const {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
return (
<Column gap>
<WebsiteControls websiteId={websiteId} />
<LoadingPanel isEmpty={!result?.data} isLoading={!result}>
<SectionHeader>
<GoalAddButton websiteId={websiteId} />
</SectionHeader>
<Grid columns="1fr 1fr" gap>
{result?.data?.map((report: any) => (
<Panel key={report.id}>
<Goal {...report} reportId={report.id} startDate={startDate} endDate={endDate} />
</Panel>
))}
</Grid>
</LoadingPanel>
</Column>
);
}

12
src/app/(main)/websites/[websiteId]/reports/goals/page.tsx Normal file
View file

@ -0,0 +1,12 @@
import { Metadata } from 'next';
import { GoalsPage } from './GoalsPage';
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
return <GoalsPage websiteId={websiteId} />;
}
export const metadata: Metadata = {
title: 'Goals',
};

98
src/app/(main)/websites/[websiteId]/reports/insights/Goal.tsx Normal file
View file

@ -0,0 +1,98 @@
import { Grid, Row, Column, Text, Icon, ProgressBar, Dialog } from '@umami/react-zen';
import { ReportEditButton } from '@/components/input/ReportEditButton';
import { useMessages, useResultQuery } from '@/components/hooks';
import { File, Lightning, User } from '@/components/icons';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { formatLongNumber } from '@/lib/format';
import { GoalEditForm } from './GoalEditForm';
export interface GoalProps {
id: string;
name: string;
type: string;
parameters: {
name: string;
type: string;
value: string;
};
websiteId: string;
startDate: Date;
endDate: Date;
}
export type GoalData = { num: number; total: number };
export function Goal({ id, name, type, parameters, websiteId, startDate, endDate }: GoalProps) {
const { formatMessage, labels } = useMessages();
const { data, error, isLoading } = useResultQuery<GoalData>(type, {
websiteId,
dateRange: {
startDate,
endDate,
},
parameters,
});
const isPage = parameters?.type === 'page';
return (
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
<Grid gap>
<Grid columns="1fr auto" gap>
<Column gap>
<Row>
<Text size="4" weight="bold">
{name}
</Text>
</Row>
</Column>
<Column>
<ReportEditButton id={id} name={name} type={type}>
{({ close }) => {
return (
<Dialog
title={formatMessage(labels.goal)}
variant="modal"
style={{ minHeight: 300, minWidth: 400 }}
>
<GoalEditForm id={id} websiteId={websiteId} onClose={close} />
</Dialog>
);
}}
</ReportEditButton>
</Column>
</Grid>
<Row alignItems="center" justifyContent="space-between" gap>
<Text color="muted">
{formatMessage(isPage ? labels.viewedPage : labels.triggeredEvent)}
</Text>
<Text color="muted">{formatMessage(labels.conversionRate)}</Text>
</Row>
<Row alignItems="center" justifyContent="space-between" gap>
<Row alignItems="center" gap>
<Icon>{parameters.type === 'page' ? <File /> : <Lightning />}</Icon>
<Text>{parameters.value}</Text>
</Row>
<Row alignItems="center" gap>
<Icon>
<User />
</Icon>
<Text title={`${data?.num} / ${data?.total}`}>{`${formatLongNumber(
data?.num,
)} / ${formatLongNumber(data?.total)}`}</Text>
</Row>
</Row>
<Row alignItems="center" gap="6">
<ProgressBar
value={data?.num || 0}
minValue={0}
maxValue={data?.total || 1}
style={{ width: '100%' }}
/>
<Text weight="bold" size="7">
{data?.total ? Math.round((+data?.num / +data?.total) * 100) : '0'}%
</Text>
</Row>
</Grid>
</LoadingPanel>
);
}

28
src/app/(main)/websites/[websiteId]/reports/insights/GoalAddButton.tsx Normal file
View file

@ -0,0 +1,28 @@
import { Button, DialogTrigger, Dialog, Icon, Text, Modal } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { GoalEditForm } from './GoalEditForm';
import { Plus } from '@/components/icons';
export function GoalAddButton({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
return (
<DialogTrigger>
<Button variant="primary">
<Icon>
<Plus />
</Icon>
<Text>{formatMessage(labels.goal)}</Text>
</Button>
<Modal>
<Dialog
variant="modal"
title={formatMessage(labels.goal)}
style={{ minHeight: 375, minWidth: 400 }}
>
{({ close }) => <GoalEditForm websiteId={websiteId} onClose={close} />}
</Dialog>
</Modal>
</DialogTrigger>
);
}

114
src/app/(main)/websites/[websiteId]/reports/insights/GoalEditForm.tsx Normal file
View file

@ -0,0 +1,114 @@
import {
Form,
FormField,
TextField,
Grid,
FormButtons,
FormSubmitButton,
Button,
RadioGroup,
Radio,
Text,
Icon,
Loading,
} from '@umami/react-zen';
import { useApi, useMessages, useModified, useReportQuery } from '@/components/hooks';
import { File, Lightning } from '@/components/icons';
export function GoalEditForm({
id,
websiteId,
onSave,
onClose,
}: {
id?: string;
websiteId: string;
onSave?: () => void;
onClose?: () => void;
}) {
const { formatMessage, labels } = useMessages();
const { touch } = useModified();
const { post, useMutation } = useApi();
const { data } = useReportQuery(id);
const { mutate, error, isPending } = useMutation({
mutationFn: (params: any) => post(`/reports${id ? `/${id}` : ''}`, params),
});
const handleSubmit = async ({ name, ...parameters }) => {
mutate(
{ ...data, id, name, type: 'goal', websiteId, parameters },
{
onSuccess: async () => {
if (id) touch(`report:${id}`);
touch('reports:goal');
onSave?.();
onClose?.();
},
},
);
};
if (id && !data) {
return <Loading position="page" />;
}
const defaultValues = {
name: data?.name || '',
type: data?.parameters?.type || 'page',
value: data?.parameters?.value || '',
};
return (
<Form onSubmit={handleSubmit} error={error?.message} defaultValues={defaultValues}>
{({ watch }) => {
const watchType = watch('type');
return (
<>
<FormField
name="name"
label={formatMessage(labels.name)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormField>
<FormField
name="type"
label={formatMessage(labels.type)}
rules={{ required: formatMessage(labels.required) }}
>
<RadioGroup orientation="horizontal" variant="box">
<Grid columns="1fr 1fr" flexGrow={1} gap>
<Radio value="page">
<Icon>
<File />
</Icon>
<Text>{formatMessage(labels.page)}</Text>
</Radio>
<Radio value="event">
<Icon>
<Lightning />
</Icon>
<Text>{formatMessage(labels.event)}</Text>
</Radio>
</Grid>
</RadioGroup>
</FormField>
<FormField
name="value"
label={formatMessage(watchType === 'event' ? labels.eventName : labels.path)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormField>
<FormButtons>
<Button onPress={onClose} isDisabled={isPending}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton>{formatMessage(labels.save)}</FormSubmitButton>
</FormButtons>
</>
);
}}
</Form>
);
}

38
src/app/(main)/websites/[websiteId]/reports/insights/GoalsPage.tsx Normal file
View file

@ -0,0 +1,38 @@
'use client';
import { Grid, Loading } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { Goal } from './Goal';
import { GoalAddButton } from './GoalAddButton';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { useDateRange, useReportsQuery } from '@/components/hooks';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Panel } from '@/components/common/Panel';
export function GoalsPage({ websiteId }: { websiteId: string }) {
const { result } = useReportsQuery({ websiteId, type: 'goal' });
const {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
if (!result) {
return <Loading position="page" />;
}
return (
<>
<WebsiteControls websiteId={websiteId} />
<LoadingPanel isEmpty={!result?.data} isLoading={!result}>
<SectionHeader>
<GoalAddButton websiteId={websiteId} />
</SectionHeader>
<Grid columns="1fr 1fr" gap>
{result?.data?.map((report: any) => (
<Panel key={report.id}>
<Goal {...report} reportId={report.id} startDate={startDate} endDate={endDate} />
</Panel>
))}
</Grid>
</LoadingPanel>
</>
);
}

12
src/app/(main)/websites/[websiteId]/reports/insights/page.tsx Normal file
View file

@ -0,0 +1,12 @@
import { Metadata } from 'next';
import { GoalsPage } from './GoalsPage';
export default async function ({ params }: { params: Promise<{ websiteId: string }> }) {
const { websiteId } = await params;
return <GoalsPage websiteId={websiteId} />;
}
export const metadata: Metadata = {
title: 'Goals',
};

0
src/app/(main)/websites/[websiteId]/journeys/Journey.module.css → src/app/(main)/websites/[websiteId]/reports/journeys/Journey.module.css
View file

2
src/app/(main)/websites/[websiteId]/journeys/Journey.tsx → src/app/(main)/websites/[websiteId]/reports/journeys/Journey.tsx
View file

@ -166,7 +166,7 @@ export function Journey({
};
return (
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error}>
<LoadingPanel isEmpty={!data} isLoading={isLoading} error={error} height="100%">
<div className={styles.container}>
<div className={styles.view}>
{columns.map(({ visitorCount, nodes }, columnIndex) => {

2
src/app/(main)/websites/[websiteId]/journeys/JourneysPage.tsx → src/app/(main)/websites/[websiteId]/reports/journeys/JourneysPage.tsx
View file

@ -19,7 +19,7 @@ export function JourneysPage({ websiteId }: { websiteId: string }) {
const [endStep, setEndStep] = useState('');
return (
<Column gap="6">
<Column gap>
<WebsiteControls websiteId={websiteId} />
<Grid columns="repeat(3, 1fr)" gap>
<Select

0
src/app/(main)/websites/[websiteId]/journeys/page.tsx → src/app/(main)/websites/[websiteId]/reports/journeys/page.tsx
View file

21
src/app/(main)/websites/[websiteId]/reports/layout.tsx Normal file
View file

@ -0,0 +1,21 @@
import { Metadata } from 'next';
import { ReportsLayout } from './ReportsLayout';
export default async function ({
children,
params,
}: {
children: any;
params: Promise<{ websiteId: string }>;
}) {
const { websiteId } = await params;
return <ReportsLayout websiteId={websiteId}>{children}</ReportsLayout>;
}
export const metadata: Metadata = {
title: {
template: '%s | Umami',
default: 'Websites | Umami',
},
};

3
src/app/(main)/websites/[websiteId]/reports/page.tsx Normal file
View file

@ -0,0 +1,3 @@
import GoalsPage from './goals/page';
export default GoalsPage;

123
src/app/(main)/websites/[websiteId]/reports/retention/Retention.tsx Normal file
View file

@ -0,0 +1,123 @@
import { ReactNode } from 'react';
import { Grid, Row, Column, Text, Loading, Icon } from '@umami/react-zen';
import { Empty } from '@/components/common/Empty';
import { Users } from '@/components/icons';
import { useMessages, useLocale, useResultQuery } from '@/components/hooks';
import { formatDate } from '@/lib/date';
import { formatLongNumber } from '@/lib/format';
import { Panel } from '@/components/common/Panel';
import { LoadingPanel } from '@/components/common/LoadingPanel';
const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
export interface RetentionProps {
websiteId: string;
startDate: Date;
endDate: Date;
days?: number[];
}
export function Retention({ websiteId, days = DAYS, startDate, endDate }: RetentionProps) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { data, error, isLoading } = useResultQuery<any>('retention', {
websiteId,
dateRange: {
startDate,
endDate,
},
});
if (isLoading) {
return <Loading position="page" />;
}
if (!data) {
return <Empty />;
}
const rows = data.reduce((arr: any[], row: { date: any; visitors: any; day: any }) => {
const { date, visitors, day } = row;
if (day === 0) {
return arr.concat({
date,
visitors,
records: days
.reduce((arr, day) => {
arr[day] = data.find(x => x.date === date && x.day === day);
return arr;
}, [])
.filter(n => n),
});
}
return arr;
}, []);
const totalDays = rows.length;
return (
<LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
<Panel allowFullscreen height="900px">
<Column gap="1" width="100%" overflow="auto">
<Grid
columns="120px repeat(10, 100px)"
alignItems="center"
gap="1"
height="50px"
autoFlow="column"
>
<Column>
<Text weight="bold">{formatMessage(labels.cohort)}</Text>
</Column>
{days.map(n => (
<Column key={n}>
<Text weight="bold" align="center" wrap="nowrap">
{formatMessage(labels.day)} {n}
</Text>
</Column>
))}
</Grid>
{rows.map(({ date, visitors, records }: any, rowIndex: number) => {
return (
<Grid key={rowIndex} columns="120px repeat(10, 100px)" gap="1" autoFlow="column">
<Column justifyContent="center" gap="1">
<Text weight="bold">{formatDate(date, 'PP', locale)}</Text>
<Row alignItems="center" gap>
<Icon>
<Users />
</Icon>
<Text>{formatLongNumber(visitors)}</Text>
</Row>
</Column>
{days.map(day => {
if (totalDays - rowIndex < day) {
return null;
}
const percentage = records.filter(a => a.day === day)[0]?.percentage;
return (
<Cell key={day}>{percentage ? `${Number(percentage).toFixed(2)}%` : ''}</Cell>
);
})}
</Grid>
);
})}
</Column>
</Panel>
</LoadingPanel>
);
}
const Cell = ({ children }: { children: ReactNode }) => {
return (
<Column
justifyContent="center"
alignItems="center"
width="100px"
height="100px"
backgroundColor="2"
borderRadius
>
{children}
</Column>
);
};

12
src/app/(main)/websites/[websiteId]/retention/RetentionPage.tsx → src/app/(main)/websites/[websiteId]/reports/retention/RetentionPage.tsx
View file

@ -1,16 +1,18 @@
'use client';
import { Column } from '@umami/react-zen';
import { RetentionTable } from './RetentionTable';
import { Retention } from './Retention';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { Panel } from '@/components/common/Panel';
import { useDateRange } from '@/components/hooks';
export function RetentionPage({ websiteId }: { websiteId: string }) {
const {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
return (
<Column gap>
<WebsiteControls websiteId={websiteId} />
<Panel>
<RetentionTable websiteId={websiteId} />
</Panel>
<Retention websiteId={websiteId} startDate={startDate} endDate={endDate} />
</Column>
);
}

0
src/app/(main)/websites/[websiteId]/retention/page.tsx → src/app/(main)/websites/[websiteId]/reports/retention/page.tsx
View file

200
src/app/(main)/websites/[websiteId]/reports/revenue/Revenue.tsx Normal file
View file

@ -0,0 +1,200 @@
import { useState } from 'react';
import { Grid, Select, ListItem } from '@umami/react-zen';
import classNames from 'classnames';
import { colord } from 'colord';
import { BarChart } from '@/components/charts/BarChart';
import { PieChart } from '@/components/charts/PieChart';
import { TypeIcon } from '@/components/common/TypeIcon';
import { useCountryNames, useLocale, useMessages, useResultQuery } from '@/components/hooks';
import { ListTable } from '@/components/metrics/ListTable';
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
import { renderDateLabels } from '@/lib/charts';
import { CHART_COLORS, CURRENCIES } from '@/lib/constants';
import { formatLongCurrency, formatLongNumber } from '@/lib/format';
import { useCallback, useMemo } from 'react';
import { Panel } from '@/components/common/Panel';
import { Column } from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { parseDateRange } from '@/lib/date';
export interface RevenueProps {
websiteId: string;
startDate: Date;
endDate: Date;
}
export function Revenue({ websiteId, startDate, endDate }: RevenueProps) {
const [currency, setCurrency] = useState('USD');
const [search, setSearch] = useState('');
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { countryNames } = useCountryNames(locale);
const { unit } = parseDateRange({ startDate, endDate }, locale);
const { data, error, isLoading } = useResultQuery<any>('revenue', {
websiteId,
dateRange: {
startDate,
endDate,
},
parameters: {
currency,
},
});
const isEmpty = !Object.keys(data || {})?.length;
const renderCountryName = useCallback(
({ x: code }) => (
<span className={classNames(locale)}>
<TypeIcon type="country" value={code?.toLowerCase()} />
{countryNames[code]}
</span>
),
[countryNames, locale],
);
const chartData = useMemo(() => {
if (!data) return [];
const map = (data.chart as any[]).reduce((obj, { x, t, y }) => {
if (!obj[x]) {
obj[x] = [];
}
obj[x].push({ x: t, y });
return obj;
}, {});
return {
datasets: Object.keys(map).map((key, index) => {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
return {
label: key,
data: map[key],
lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
}),
};
}, [data]);
const countryData = useMemo(() => {
if (!data) return [];
const labels = data.country.map(({ name }) => name);
const datasets = [
{
data: data.country.map(({ value }) => value),
backgroundColor: CHART_COLORS,
borderWidth: 0,
},
];
return { labels, datasets };
}, [data]);
const metricData = useMemo(() => {
if (!data) return [];
const { sum, count, unique_count } = data.total;
return [
{
value: sum,
label: formatMessage(labels.total),
formatValue: n => formatLongCurrency(n, currency),
},
{
value: count ? sum / count : 0,
label: formatMessage(labels.average),
formatValue: n => formatLongCurrency(n, currency),
},
{
value: count,
label: formatMessage(labels.transactions),
formatValue: formatLongNumber,
},
{
value: unique_count,
label: formatMessage(labels.uniqueCustomers),
formatValue: formatLongNumber,
},
] as any;
}, [data, locale]);
return (
<Column gap>
<Grid columns="280px" gap>
<Select
items={CURRENCIES}
label={formatMessage(labels.currency)}
value={currency}
defaultValue={currency}
onChange={setCurrency}
listProps={{ style: { maxHeight: '300px' } }}
onSearch={setSearch}
allowSearch
>
{CURRENCIES.map(({ id, name }) => {
if (search && !`${id}${name}`.toLowerCase().includes(search)) {
return null;
}
return (
<ListItem key={id} id={id}>
{id} &mdash; {name}
</ListItem>
);
}).filter(n => n)}
</Select>
</Grid>
<LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
<Column gap>
<Panel>
<MetricsBar isFetched={!!data}>
{metricData?.map(({ label, value, formatValue }) => {
return (
<MetricCard key={label} value={value} label={label} formatValue={formatValue} />
);
})}
</MetricsBar>
</Panel>
{data && (
<>
<Panel>
<BarChart
minDate={startDate}
maxDate={endDate}
data={chartData}
unit={unit}
stacked={true}
currency={currency}
renderXLabel={renderDateLabels(unit, locale)}
isLoading={isLoading}
/>
</Panel>
<Panel>
<Grid columns="1fr 1fr">
<ListTable
metric={formatMessage(labels.country)}
data={data?.country.map(({ name, value }) => ({
x: name,
y: Number(value),
z: (value / data?.total.sum) * 100,
}))}
renderLabel={renderCountryName}
/>
<PieChart type="doughnut" data={countryData} />
</Grid>
</Panel>
</>
)}
</Column>
</LoadingPanel>
</Column>
);
}

9
src/app/(main)/websites/[websiteId]/revenue/RevenuePage.tsx → src/app/(main)/websites/[websiteId]/reports/revenue/RevenuePage.tsx
View file

@ -1,13 +1,18 @@
'use client';
import { Column } from '@umami/react-zen';
import { RevenueView } from './RevenueView';
import { Revenue } from './Revenue';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { useDateRange } from '@/components/hooks';
export function RevenuePage({ websiteId }: { websiteId: string }) {
const {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
return (
<Column gap>
<WebsiteControls websiteId={websiteId} allowCompare={false} />
<RevenueView websiteId={websiteId} />
<Revenue websiteId={websiteId} startDate={startDate} endDate={endDate} />
</Column>
);
}

0
src/app/(main)/websites/[websiteId]/revenue/RevenueTable.tsx → src/app/(main)/websites/[websiteId]/reports/revenue/RevenueTable.tsx
View file

2
src/app/(main)/websites/[websiteId]/revenue/page.tsx → src/app/(main)/websites/[websiteId]/reports/revenue/page.tsx
View file

@ -8,5 +8,5 @@ export default async function ({ params }: { params: Promise<{ websiteId: string
}
export const metadata: Metadata = {
title: 'Revenue UTM Parameters',
title: 'Revenue',
};

81
src/app/(main)/websites/[websiteId]/reports/utm/UTM.tsx Normal file
View file

@ -0,0 +1,81 @@
import { Grid, Column, Heading, Text } from '@umami/react-zen';
import { firstBy } from 'thenby';
import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
import { useResultQuery } from '@/components/hooks';
import { PieChart } from '@/components/charts/PieChart';
import { ListTable } from '@/components/metrics/ListTable';
import { useMessages } from '@/components/hooks';
import { Panel } from '@/components/common/Panel';
import { LoadingPanel } from '@/components/common/LoadingPanel';
export interface UTMProps {
websiteId: string;
startDate: Date;
endDate: Date;
}
export function UTM({ websiteId, startDate, endDate }: UTMProps) {
const { formatMessage, labels } = useMessages();
const { data, error, isLoading } = useResultQuery<any>('utm', {
websiteId,
dateRange: {
startDate,
endDate,
},
});
const isEmpty = !Object.keys(data || {})?.length;
return (
<LoadingPanel isEmpty={isEmpty} isLoading={isLoading} error={error}>
<Column gap>
{UTM_PARAMS.map(param => {
const items = toArray(data?.[param]);
const chartData = {
labels: items.map(({ name }) => name),
datasets: [
{
data: items.map(({ value }) => value),
backgroundColor: CHART_COLORS,
borderWidth: 0,
},
],
};
const total = items.reduce((sum, { value }) => {
return +sum + +value;
}, 0);
return (
<Panel key={param}>
<Grid columns="1fr 1fr">
<Column>
<Heading>
<Text transform="capitalize">{param.replace(/^utm_/, '')}</Text>
</Heading>
<ListTable
metric={formatMessage(labels.views)}
data={items.map(({ name, value }) => ({
x: name,
y: value,
z: (value / total) * 100,
}))}
/>
</Column>
<Column>
<PieChart type="doughnut" data={chartData} />
</Column>
</Grid>
</Panel>
);
})}
</Column>
</LoadingPanel>
);
}
function toArray(data: { [key: string]: number } = {}) {
return Object.keys(data)
.map(key => {
return { name: key, value: data[key] };
})
.sort(firstBy('value', -1));
}

9
src/app/(main)/websites/[websiteId]/utm/UTMPage.tsx → src/app/(main)/websites/[websiteId]/reports/utm/UTMPage.tsx
View file

@ -1,13 +1,18 @@
'use client';
import { Column } from '@umami/react-zen';
import { UTMView } from './UTMView';
import { useDateRange } from '@/components/hooks';
import { UTM } from './UTM';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
export function UTMPage({ websiteId }: { websiteId: string }) {
const {
dateRange: { startDate, endDate },
} = useDateRange(websiteId);
return (
<Column gap>
<WebsiteControls websiteId={websiteId} allowCompare={false} />
<UTMView websiteId={websiteId} />
<UTM websiteId={websiteId} startDate={startDate} endDate={endDate} />
</Column>
);
}

0
src/app/(main)/websites/[websiteId]/utm/page.tsx → src/app/(main)/websites/[websiteId]/reports/utm/page.tsx
View file

103
src/app/(main)/websites/[websiteId]/retention/RetentionTable.tsx
View file

@ -1,103 +0,0 @@
import { ReactNode } from 'react';
import { Grid, Row, Column, Text, Loading, Icon } from '@umami/react-zen';
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
import { Users } from '@/components/icons';
import { useMessages, useLocale, useRetentionQuery } from '@/components/hooks';
import { formatDate } from '@/lib/date';
import { formatLongNumber } from '@/lib/format';
const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
export function RetentionTable({ websiteId, days = DAYS }: { websiteId: string; days?: number[] }) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { data: x, isLoading } = useRetentionQuery(websiteId);
const data = x as any;
if (isLoading) {
return <Loading position="page" />;
}
if (!data) {
return <EmptyPlaceholder />;
}
const rows = data.reduce((arr: any[], row: { date: any; visitors: any; day: any }) => {
const { date, visitors, day } = row;
if (day === 0) {
return arr.concat({
date,
visitors,
records: days
.reduce((arr, day) => {
arr[day] = data.find(x => x.date === date && x.day === day);
return arr;
}, [])
.filter(n => n),
});
}
return arr;
}, []);
const totalDays = rows.length;
return (
<Column gap="1">
<Grid
columns="120px repeat(auto-fit, 100px)"
alignItems="center"
gap="1"
height="50px"
autoFlow="column"
>
<Column>
<Text weight="bold">{formatMessage(labels.cohort)}</Text>
</Column>
{days.map(n => (
<Column key={n}>
<Text weight="bold" align="center">
{formatMessage(labels.day)} {n}
</Text>
</Column>
))}
</Grid>
{rows.map(({ date, visitors, records }: any, rowIndex: number) => {
return (
<Grid key={rowIndex} columns="120px repeat(auto-fit, 100px)" gap="1" autoFlow="column">
<Column justifyContent="center" gap="1">
<Text weight="bold">{formatDate(date, 'PP', locale)}</Text>
<Row alignItems="center" gap>
<Icon>
<Users />
</Icon>
<Text>{formatLongNumber(visitors)}</Text>
</Row>
</Column>
{days.map(day => {
if (totalDays - rowIndex < day) {
return null;
}
const percentage = records.filter(a => a.day === day)[0]?.percentage;
return <Cell key={day}>{percentage ? `${Number(percentage).toFixed(2)}%` : ''}</Cell>;
})}
</Grid>
);
})}
</Column>
);
}
const Cell = ({ children }: { children: ReactNode }) => {
return (
<Column
justifyContent="center"
alignItems="center"
width="100px"
height="100px"
backgroundColor="2"
borderRadius
>
{children}
</Column>
);
};

169
src/app/(main)/websites/[websiteId]/revenue/RevenueView.tsx
View file

@ -1,169 +0,0 @@
import classNames from 'classnames';
import { colord } from 'colord';
import { BarChart } from '@/components/charts/BarChart';
import { PieChart } from '@/components/charts/PieChart';
import { TypeIcon } from '@/components/common/TypeIcon';
import {
useCountryNames,
useLocale,
useMessages,
useRevenueQuery,
useDateRange,
} from '@/components/hooks';
import { GridRow } from '@/components/common/GridRow';
import { ListTable } from '@/components/metrics/ListTable';
import { MetricCard } from '@/components/metrics/MetricCard';
import { MetricsBar } from '@/components/metrics/MetricsBar';
import { renderDateLabels } from '@/lib/charts';
import { CHART_COLORS } from '@/lib/constants';
import { formatLongCurrency, formatLongNumber } from '@/lib/format';
import { useCallback, useMemo } from 'react';
import { RevenueTable } from './RevenueTable';
import { Panel } from '@/components/common/Panel';
import { Column } from '@umami/react-zen';
export interface RevenueViewProps {
websiteId: string;
isLoading?: boolean;
}
export function RevenueView({ websiteId, isLoading }: RevenueViewProps) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { countryNames } = useCountryNames(locale);
const { data } = useRevenueQuery(websiteId);
const currency = 'USD';
const { dateRange } = useDateRange(websiteId);
const renderCountryName = useCallback(
({ x: code }) => (
<span className={classNames(locale)}>
<TypeIcon type="country" value={code?.toLowerCase()} />
{countryNames[code]}
</span>
),
[countryNames, locale],
);
const chartData = useMemo(() => {
if (!data) return [];
const map = (data.chart as any[]).reduce((obj, { x, t, y }) => {
if (!obj[x]) {
obj[x] = [];
}
obj[x].push({ x: t, y });
return obj;
}, {});
return {
datasets: Object.keys(map).map((key, index) => {
const color = colord(CHART_COLORS[index % CHART_COLORS.length]);
return {
label: key,
data: map[key],
lineTension: 0,
backgroundColor: color.alpha(0.6).toRgbString(),
borderColor: color.alpha(0.7).toRgbString(),
borderWidth: 1,
};
}),
};
}, [data]);
const countryData = useMemo(() => {
if (!data) return [];
const labels = data.country.map(({ name }) => name);
const datasets = [
{
data: data.country.map(({ value }) => value),
backgroundColor: CHART_COLORS,
borderWidth: 0,
},
];
return { labels, datasets };
}, [data]);
const metricData = useMemo(() => {
if (!data) return [];
const { sum, count, unique_count } = data.total;
return [
{
value: sum,
label: formatMessage(labels.total),
formatValue: n => formatLongCurrency(n, currency),
},
{
value: count ? sum / count : 0,
label: formatMessage(labels.average),
formatValue: n => formatLongCurrency(n, currency),
},
{
value: count,
label: formatMessage(labels.transactions),
formatValue: formatLongNumber,
},
{
value: unique_count,
label: formatMessage(labels.uniqueCustomers),
formatValue: formatLongNumber,
},
] as any;
}, [data, locale]);
return (
<>
<Column gap>
<Panel>
<MetricsBar isFetched={!!data}>
{metricData?.map(({ label, value, formatValue }) => {
return (
<MetricCard key={label} value={value} label={label} formatValue={formatValue} />
);
})}
</MetricsBar>
</Panel>
{data && (
<>
<Panel>
<BarChart
minDate={dateRange?.startDate}
maxDate={dateRange?.endDate}
data={chartData}
unit={dateRange?.unit}
stacked={true}
currency={currency}
renderXLabel={renderDateLabels(dateRange?.unit, locale)}
isLoading={isLoading}
/>
</Panel>
<Panel>
<GridRow layout="two">
<ListTable
metric={formatMessage(labels.country)}
data={data?.country.map(({ name, value }) => ({
x: name,
y: Number(value),
z: (value / data?.total.sum) * 100,
}))}
renderLabel={renderCountryName}
/>
<PieChart type="doughnut" data={countryData} />
</GridRow>
</Panel>
</>
)}
<Panel>
<RevenueTable data={data?.table} />
</Panel>
</Column>
</>
);
}

74
src/app/(main)/websites/[websiteId]/utm/UTMView.tsx
View file

@ -1,74 +0,0 @@
import { Column, Heading, Text, Loading } from '@umami/react-zen';
import { firstBy } from 'thenby';
import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
import { useUTMQuery } from '@/components/hooks';
import { PieChart } from '@/components/charts/PieChart';
import { ListTable } from '@/components/metrics/ListTable';
import { useMessages } from '@/components/hooks';
import { Panel } from '@/components/common/Panel';
import { GridRow } from '@/components/common/GridRow';
function toArray(data: { [key: string]: number } = {}) {
return Object.keys(data)
.map(key => {
return { name: key, value: data[key] };
})
.sort(firstBy('value', -1));
}
export function UTMView({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading } = useUTMQuery(websiteId);
if (isLoading) {
return <Loading position="page" />;
}
if (!data) {
return null;
}
return (
<Column gap>
{UTM_PARAMS.map(param => {
const items = toArray(data[param]);
const chartData = {
labels: items.map(({ name }) => name),
datasets: [
{
data: items.map(({ value }) => value),
backgroundColor: CHART_COLORS,
borderWidth: 0,
},
],
};
const total = items.reduce((sum, { value }) => {
return +sum + +value;
}, 0);
return (
<Panel key={param}>
<GridRow layout="two">
<Column>
<Heading>
<Text transform="capitalize">{param.replace(/^utm_/, '')}</Text>
</Heading>
<ListTable
metric={formatMessage(labels.views)}
data={items.map(({ name, value }) => ({
x: name,
y: value,
z: (value / total) * 100,
}))}
/>
</Column>
<Column>
<PieChart type="doughnut" data={chartData} />
</Column>
</GridRow>
</Panel>
);
})}
</Column>
);
}

42
src/app/api/reports/insights/route.ts
View file

@ -1,41 +1,11 @@
import { z } from 'zod';
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { parseRequest } from '@/lib/request';
import { getInsights } from '@/queries';
import { reportParms } from '@/lib/schema';
function convertFilters(filters: any[]) {
return filters.reduce((obj, filter) => {
obj[filter.name] = filter;
return obj;
}, {});
}
import { reportResultSchema } from '@/lib/schema';
export async function POST(request: Request) {
const schema = z.object({
...reportParms,
fields: z
.array(
z.object({
name: z.string(),
type: z.string(),
label: z.string(),
}),
)
.min(1),
filters: z.array(
z.object({
name: z.string(),
type: z.string(),
operator: z.string(),
value: z.string(),
}),
),
});
const { auth, body, error } = await parseRequest(request, schema);
const { auth, body, error } = await parseRequest(request, reportResultSchema);
if (error) {
return error();
@ -60,3 +30,11 @@ export async function POST(request: Request) {
return json(data);
}
function convertFilters(filters: any[]) {
return filters.reduce((obj, filter) => {
obj[filter.name] = filter;
return obj;
}, {});
}

12
src/app/api/reports/retention/route.ts
View file

@ -1,17 +1,11 @@
import { z } from 'zod';
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { parseRequest } from '@/lib/request';
import { getRetention } from '@/queries';
import { reportParms, timezoneParam } from '@/lib/schema';
import { reportResultSchema } from '@/lib/schema';
export async function POST(request: Request) {
const schema = z.object({
...reportParms,
timezone: timezoneParam,
});
const { auth, body, error } = await parseRequest(request, schema);
const { auth, body, error } = await parseRequest(request, reportResultSchema);
if (error) {
return error();
@ -20,7 +14,6 @@ export async function POST(request: Request) {
const {
websiteId,
dateRange: { startDate, endDate },
timezone,
} = body;
if (!(await canViewWebsite(auth, websiteId))) {
@ -30,7 +23,6 @@ export async function POST(request: Request) {
const data = await getRetention(websiteId, {
startDate: new Date(startDate),
endDate: new Date(endDate),
timezone,
});
return json(data);

35
src/app/api/reports/revenue/route.ts
View file

@ -1,40 +1,11 @@
import { z } from 'zod';
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { parseRequest } from '@/lib/request';
import { reportParms, timezoneParam } from '@/lib/schema';
import { reportResultSchema } from '@/lib/schema';
import { getRevenue } from '@/queries/sql/reports/getRevenue';
import { getRevenueValues } from '@/queries/sql/reports/getRevenueValues';
export async function GET(request: Request) {
const { auth, query, error } = await parseRequest(request);
if (error) {
return error();
}
const { websiteId, startDate, endDate } = query;
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const data = await getRevenueValues(websiteId, {
startDate: new Date(startDate),
endDate: new Date(endDate),
});
return json(data);
}
export async function POST(request: Request) {
const schema = z.object({
currency: z.string(),
...reportParms,
timezone: timezoneParam,
});
const { auth, body, error } = await parseRequest(request, schema);
const { auth, body, error } = await parseRequest(request, reportResultSchema);
if (error) {
return error();
@ -43,7 +14,6 @@ export async function POST(request: Request) {
const {
websiteId,
currency,
timezone,
dateRange: { startDate, endDate, unit },
} = body;
@ -55,7 +25,6 @@ export async function POST(request: Request) {
startDate: new Date(startDate),
endDate: new Date(endDate),
unit,
timezone,
currency,
});

12
src/app/api/reports/utm/route.ts
View file

@ -1,16 +1,11 @@
import { z } from 'zod';
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { parseRequest } from '@/lib/request';
import { getUTM } from '@/queries';
import { reportParms } from '@/lib/schema';
import { reportResultSchema } from '@/lib/schema';
export async function POST(request: Request) {
const schema = z.object({
...reportParms,
});
const { auth, body, error } = await parseRequest(request, schema);
const { auth, body, error } = await parseRequest(request, reportResultSchema);
if (error) {
return error();
@ -18,7 +13,7 @@ export async function POST(request: Request) {
const {
websiteId,
dateRange: { startDate, endDate, timezone },
dateRange: { startDate, endDate },
} = body;
if (!(await canViewWebsite(auth, websiteId))) {
@ -28,7 +23,6 @@ export async function POST(request: Request) {
const data = await getUTM(websiteId, {
startDate: new Date(startDate),
endDate: new Date(endDate),
timezone,
});
return json(data);

42
src/app/api/websites/[websiteId]/retention/route.ts
View file

@ -1,42 +0,0 @@
import { z } from 'zod';
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { getRequestDateRange, parseRequest } from '@/lib/request';
import { getRetention } from '@/queries';
import { filterParams, timezoneParam, unitParam } from '@/lib/schema';
export async function GET(
request: Request,
{ params }: { params: Promise<{ websiteId: string }> },
) {
const schema = z.object({
startAt: z.coerce.number().int(),
endAt: z.coerce.number().int(),
unit: unitParam,
timezone: timezoneParam,
...filterParams,
});
const { auth, query, error } = await parseRequest(request, schema);
if (error) {
return error();
}
const { websiteId } = await params;
const { timezone } = query;
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const { startDate, endDate } = await getRequestDateRange(query);
const data = await getRetention(websiteId, {
startDate,
endDate,
timezone,
});
return json(data);
}

67
src/app/api/websites/[websiteId]/revenue/route.ts
View file

@ -1,67 +0,0 @@
import { z } from 'zod';
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { getRequestDateRange, parseRequest } from '@/lib/request';
import { filterParams, unitParam, timezoneParam } from '@/lib/schema';
import { getRevenue } from '@/queries/sql/reports/getRevenue';
import { getRevenueValues } from '@/queries/sql/reports/getRevenueValues';
export async function __GET(request: Request) {
const { auth, query, error } = await parseRequest(request);
if (error) {
return error();
}
const { websiteId, startDate, endDate } = query;
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const data = await getRevenueValues(websiteId, {
startDate: new Date(startDate),
endDate: new Date(endDate),
});
return json(data);
}
export async function GET(
request: Request,
{ params }: { params: Promise<{ websiteId: string }> },
) {
const schema = z.object({
currency: z.string(),
startAt: z.coerce.number().int(),
endAt: z.coerce.number().int(),
unit: unitParam,
timezone: timezoneParam,
...filterParams,
});
const { auth, query, error } = await parseRequest(request, schema);
if (error) {
return error();
}
const { websiteId } = await params;
const { currency, timezone, unit } = query;
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const { startDate, endDate } = await getRequestDateRange(query);
const data = await getRevenue(websiteId, {
startDate,
endDate,
unit,
timezone,
currency,
});
return json(data);
}

42
src/app/api/websites/[websiteId]/utm/route.ts
View file

@ -1,42 +0,0 @@
import { z } from 'zod';
import { canViewWebsite } from '@/lib/auth';
import { unauthorized, json } from '@/lib/response';
import { getRequestDateRange, parseRequest } from '@/lib/request';
import { getUTM } from '@/queries';
import { filterParams, timezoneParam, unitParam } from '@/lib/schema';
export async function GET(
request: Request,
{ params }: { params: Promise<{ websiteId: string }> },
) {
const schema = z.object({
startAt: z.coerce.number().int(),
endAt: z.coerce.number().int(),
unit: unitParam,
timezone: timezoneParam,
...filterParams,
});
const { auth, query, error } = await parseRequest(request, schema);
if (error) {
return error();
}
const { websiteId } = await params;
const { timezone } = query;
if (!(await canViewWebsite(auth, websiteId))) {
return unauthorized();
}
const { startDate, endDate } = await getRequestDateRange(query);
const data = await getUTM(websiteId, {
startDate,
endDate,
timezone,
});
return json(data);
}