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

New compare page.

Browse source
This commit is contained in:
Mike Cao 2025-08-23 22:21:25 -07:00
parent 08f9adaddf
commit 3f167e05ba
17 changed files with 151 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/app/(main)/links/[linkId]/LinkControls.tsx
View file

@ -10,12 +10,10 @@ export function LinkControls({
allowFilter = true,
allowDateFilter = true,
allowMonthFilter,
allowCompare,
allowDownload = false,
}: {
linkId: string;
allowFilter?: boolean;
allowCompare?: boolean;
allowDateFilter?: boolean;
allowMonthFilter?: boolean;
allowDownload?: boolean;
@ -24,13 +22,7 @@ export function LinkControls({
<Column gap>
<Row alignItems="center" justifyContent="space-between" gap="3">
{allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
{allowDateFilter && (
<WebsiteDateFilter
websiteId={websiteId}
allowCompare={allowCompare}
showAllTime={false}
/>
)}
{allowDateFilter && <WebsiteDateFilter websiteId={websiteId} showAllTime={false} />}
{allowDownload && <ExportButton websiteId={websiteId} />}
{allowMonthFilter && <WebsiteMonthSelect websiteId={websiteId} />}
</Row>

10
src/app/(main)/pixels/[pixelId]/PixelControls.tsx
View file

@ -10,12 +10,10 @@ export function PixelControls({
allowFilter = true,
allowDateFilter = true,
allowMonthFilter,
allowCompare,
allowDownload = false,
}: {
pixelId: string;
allowFilter?: boolean;
allowCompare?: boolean;
allowDateFilter?: boolean;
allowMonthFilter?: boolean;
allowDownload?: boolean;
@ -24,13 +22,7 @@ export function PixelControls({
<Column gap>
<Row alignItems="center" justifyContent="space-between" gap="3">
{allowFilter ? <WebsiteFilterButton websiteId={websiteId} /> : <div />}
{allowDateFilter && (
<WebsiteDateFilter
websiteId={websiteId}
allowCompare={allowCompare}
showAllTime={false}
/>
)}
{allowDateFilter && <WebsiteDateFilter websiteId={websiteId} showAllTime={false} />}
{allowDownload && <ExportButton websiteId={websiteId} />}
{allowMonthFilter && <WebsiteMonthSelect websiteId={websiteId} />}
</Row>

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

@ -11,7 +11,7 @@ export function UTMPage({ websiteId }: { websiteId: string }) {
return (
<Column gap>
<WebsiteControls websiteId={websiteId} allowCompare={false} />
<WebsiteControls websiteId={websiteId} />
<UTM websiteId={websiteId} startDate={startDate} endDate={endDate} />
</Column>
);

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

@ -9,7 +9,7 @@ export function WebsiteChart({
compareMode,
}: {
websiteId: string;
compareMode?: string;
compareMode?: boolean;
}) {
const { dateRange, dateCompare } = useDateRange(websiteId);
const { startDate, endDate, unit, value } = dateRange;

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

@ -10,15 +10,15 @@ export function WebsiteControls({
allowFilter = true,
allowDateFilter = true,
allowMonthFilter,
allowCompare,
allowDownload = false,
allowCompare = false,
}: {
websiteId: string;
allowFilter?: boolean;
allowCompare?: boolean;
allowDateFilter?: boolean;
allowMonthFilter?: boolean;
allowDownload?: boolean;
allowCompare?: boolean;
}) {
return (
<Column gap>

14
src/app/(main)/websites/[websiteId]/WebsiteNav.tsx
View file

@ -13,6 +13,7 @@ import {
Network,
ChartPie,
UserPlus,
Compare,
} from '@/components/icons';
import { useMessages, useNavigation } from '@/components/hooks';
import { SideMenu } from '@/components/common/SideMenu';
@ -22,7 +23,8 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { pathname, renderUrl, teamId } = useNavigation();
const renderPath = (path: string) => renderUrl(`/websites/${websiteId}${path}`);
const renderPath = (path: string) =>
renderUrl(`/websites/${websiteId}${path}`, { event: undefined });
const items = [
{
@ -52,6 +54,12 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
icon: <Clock />,
path: renderPath('/realtime'),
},
{
id: 'compare',
label: formatMessage(labels.compare),
icon: <Compare />,
path: renderPath('/compare'),
},
{
id: 'breakdown',
label: formatMessage(labels.breakdown),
@ -132,8 +140,8 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
];
const selectedKey =
items.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path))?.id ||
'overview';
items.flatMap(e => e.items).find(({ path }) => path && pathname.endsWith(path.split('?')[0]))
?.id || 'overview';
return (
<SideMenu items={items} selectedKey={selectedKey} allowMinimize={false}>

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

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

20
src/app/(main)/websites/[websiteId]/compare/ComparePage.tsx Normal file
View file

@ -0,0 +1,20 @@
'use client';
import { Column } from '@umami/react-zen';
import { CompareTables } from './CompareTables';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
import { WebsiteMetricsBar } from '@/app/(main)/websites/[websiteId]/WebsiteMetricsBar';
import { Panel } from '@/components/common/Panel';
import { WebsiteChart } from '@/app/(main)/websites/[websiteId]/WebsiteChart';
export function ComparePage({ websiteId }: { websiteId: string }) {
return (
<Column gap>
<WebsiteControls websiteId={websiteId} allowCompare={true} />
<WebsiteMetricsBar websiteId={websiteId} showChange={true} />
<Panel minHeight="520px">
<WebsiteChart websiteId={websiteId} compareMode={true} />
</Panel>
<CompareTables websiteId={websiteId} />
</Column>
);
}

116
src/app/(main)/websites/[websiteId]/WebsiteCompareTables.tsx → src/app/(main)/websites/[websiteId]/compare/CompareTables.tsx
View file

@ -1,26 +1,27 @@
import { Grid, Heading, Column, Row, NavMenu, NavMenuItem, Text } from '@umami/react-zen';
import { useState } from 'react';
import { Grid, Heading, Column, Row, Select, ListItem } from '@umami/react-zen';
import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { MetricsTable } from '@/components/metrics/MetricsTable';
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';
import { ChangeLabel } from '@/components/metrics/ChangeLabel';
import { getCompareDate } from '@/lib/date';
import { formatNumber } from '@/lib/format';
export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
const [data] = useState([]);
export function CompareTables({ websiteId }: { websiteId: string }) {
const [data, setData] = useState([]);
const { dateRange, dateCompare } = useDateRange(websiteId);
const { formatMessage, labels } = useMessages();
const {
router,
updateParams,
query: { view },
query: { view = 'path' },
} = useNavigation();
const items = [
{
id: 'path',
label: formatMessage(labels.pages),
label: formatMessage(labels.path),
path: updateParams({ view: 'path' }),
},
{
@ -73,11 +74,6 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
label: formatMessage(labels.events),
path: updateParams({ view: 'event' }),
},
{
id: 'query',
label: formatMessage(labels.queryParameters),
path: updateParams({ view: 'query' }),
},
{
id: 'hostname',
label: formatMessage(labels.hostname),
@ -90,7 +86,8 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
},
];
const renderChange = ({ label: x, count: y }) => {
const renderChange = props => {
const { label: x, count: y } = props;
const prev = data.find(d => d.x === x)?.y;
const value = y - prev;
const change = Math.abs(((y - prev) / prev) * 100);
@ -104,6 +101,10 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
);
};
const handleChange = id => {
router.push(updateParams({ view: id }));
};
const { startDate, endDate } = getCompareDate(
dateCompare,
dateRange.startDate,
@ -116,44 +117,53 @@ export function WebsiteCompareTables({ websiteId }: { websiteId: string }) {
};
return (
<Panel>
<Grid columns={{ xs: '1fr', lg: '200px 1fr 1fr' }} gap="6">
<NavMenu>
{items.map(({ id, label }) => {
return (
<NavMenuItem key={id}>
<Text>{label}</Text>
</NavMenuItem>
);
})}
</NavMenu>
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="1">{formatMessage(labels.previous)}</Heading>
<DateDisplay startDate={startDate} endDate={endDate} />
</Row>
<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>
<MetricsTable
websiteId={websiteId}
type={view}
limit={20}
showMore={false}
renderChange={renderChange}
/>
</Column>
</Grid>
</Panel>
<>
<Row width="300px">
<Select
items={items}
label={formatMessage(labels.compare)}
value={view}
defaultValue={view}
onChange={handleChange}
>
{items.map(({ id, label }) => (
<ListItem key={id} id={id}>
{label}
</ListItem>
))}
</Select>
</Row>
<Panel>
<Grid columns={{ xs: '1fr', lg: '1fr 1fr' }} gap="6">
<Column gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="2">{formatMessage(labels.previous)}</Heading>
<DateDisplay startDate={startDate} endDate={endDate} />
</Row>
<MetricsTable
websiteId={websiteId}
type={view}
limit={20}
showMore={false}
params={params}
onDataLoad={setData}
/>
</Column>
<Column border="left" paddingLeft="6" gap="6">
<Row alignItems="center" justifyContent="space-between">
<Heading size="2"> {formatMessage(labels.current)}</Heading>
<DateDisplay startDate={dateRange.startDate} endDate={dateRange.endDate} />
</Row>
<MetricsTable
websiteId={websiteId}
type={view}
limit={20}
showMore={false}
renderChange={renderChange}
/>
</Column>
</Grid>
</Panel>
</>
);
}

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

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

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

@ -43,7 +43,7 @@ export function EventsPage({ websiteId }) {
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
metric={formatMessage(labels.count)}
/>
</Column>
</TabPanel>

20
src/app/(main)/websites/[websiteId]/segments/SegmentEditForm.tsx
View file

@ -11,8 +11,9 @@ import {
import { subMonths, endOfDay } from 'date-fns';
import { FieldFilters } from '@/components/input/FieldFilters';
import { useState } from 'react';
import { useApi, useMessages, useModified, useWebsiteSegmentQuery } from '@/components/hooks';
import { useMessages, useUpdateQuery, useWebsiteSegmentQuery } from '@/components/hooks';
import { filtersArrayToObject } from '@/lib/params';
import { messages } from '@/components/messages';
export function SegmentEditForm({
segmentId,
@ -32,24 +33,23 @@ export function SegmentEditForm({
const { data } = useWebsiteSegmentQuery(websiteId, segmentId);
const { formatMessage, labels } = useMessages();
const [currentFilters, setCurrentFilters] = useState(filters);
const { touch } = useModified();
const startDate = subMonths(endOfDay(new Date()), 6);
const endDate = endOfDay(new Date());
const { post, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) =>
post(`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`, {
...data,
type: 'segment',
}),
});
const { mutate, error, isPending, touch, toast } = useUpdateQuery(
`/websites/${websiteId}/segments${segmentId ? `/${segmentId}` : ''}`,
{
...data,
type: 'segment',
},
);
const handleSubmit = async (data: any) => {
mutate(
{ ...data, parameters: filtersArrayToObject(currentFilters) },
{
onSuccess: async () => {
toast(formatMessage(messages.saved));
touch('segments');
onSave?.();
onClose?.();

3
src/components/hooks/useFields.ts
View file

@ -5,10 +5,8 @@ export function useFields() {
const fields = [
{ name: 'path', type: 'string', label: formatMessage(labels.path) },
// { name: 'cohort', type: 'string', label: formatMessage(labels.cohort) },
{ name: 'title', type: 'string', label: formatMessage(labels.pageTitle) },
{ name: 'referrer', type: 'string', label: formatMessage(labels.referrer) },
//{ name: 'query', type: 'string', label: formatMessage(labels.query) },
{ name: 'browser', type: 'string', label: formatMessage(labels.browser) },
{ name: 'os', type: 'string', label: formatMessage(labels.os) },
{ name: 'device', type: 'string', label: formatMessage(labels.device) },
@ -17,6 +15,7 @@ export function useFields() {
{ name: 'city', type: 'string', label: formatMessage(labels.city) },
{ name: 'hostname', type: 'string', label: formatMessage(labels.hostname) },
{ name: 'tag', type: 'string', label: formatMessage(labels.tag) },
{ name: 'event', type: 'string', label: formatMessage(labels.event) },
];
return { fields };

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

@ -27,10 +27,11 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
router,
updateParams,
replaceParams,
query: { segment },
query: { segment, cohort },
} = useNavigation();
const { filters, operatorLabels } = useFilters();
const { data, isLoading } = useWebsiteSegmentQuery(websiteId, segment);
const canSave = filters.length > 0 && !segment && !cohort;
const handleCloseFilter = (param: string) => {
router.push(updateParams({ [param]: undefined }));
@ -78,7 +79,7 @@ export function FilterBar({ websiteId }: { websiteId: string }) {
</Row>
<Row alignItems="center">
<DialogTrigger>
{!!filters.length && (
{canSave && (
<TooltipTrigger delay={0}>
<Button variant="zero">
<Icon>

45
src/components/input/WebsiteDateFilter.tsx
View file

@ -1,37 +1,30 @@
import {
Button,
Icon,
Row,
Text,
Select,
ListItem,
TooltipTrigger,
Tooltip,
} from '@umami/react-zen';
import { Button, Icon, Row, Text, Select, ListItem } from '@umami/react-zen';
import { isAfter } from 'date-fns';
import { Chevron, Close, Compare } from '@/components/icons';
import { Chevron } from '@/components/icons';
import { useDateRange, useMessages, useNavigation } from '@/components/hooks';
import { DateFilter } from './DateFilter';
export interface WebsiteDateFilterProps {
websiteId: string;
compare?: string;
showAllTime?: boolean;
showButtons?: boolean;
allowCompare?: boolean;
}
export function WebsiteDateFilter({
websiteId,
showAllTime = true,
showButtons = true,
allowCompare,
}: {
websiteId: string;
compare?: string;
showAllTime?: boolean;
showButtons?: boolean;
allowCompare?: boolean;
}) {
}: WebsiteDateFilterProps) {
const { dateRange } = useDateRange(websiteId);
const { value, startDate, endDate } = dateRange;
const { formatMessage, labels } = useMessages();
const {
router,
updateParams,
query: { compare, offset = 0 },
query: { compare = 'prev', offset = 0 },
} = useNavigation();
const isAllTime = value === 'all';
const isCustomRange = value.startsWith('range');
@ -50,10 +43,6 @@ export function WebsiteDateFilter({
router.push(updateParams({ compare }));
};
const handleCompare = () => {
router.push(updateParams({ compare: compare ? undefined : 'prev' }));
};
return (
<Row gap>
{showButtons && !isAllTime && !isCustomRange && (
@ -78,7 +67,7 @@ export function WebsiteDateFilter({
showAllTime={showAllTime}
renderDate={+offset !== 0}
/>
{!isAllTime && compare && (
{allowCompare && !isAllTime && (
<Row alignItems="center" gap>
<Text weight="bold">VS</Text>
<Row width="200px">
@ -93,14 +82,6 @@ export function WebsiteDateFilter({
</Row>
</Row>
)}
{!isAllTime && allowCompare && (
<TooltipTrigger delay={0}>
<Button variant="quiet" onPress={handleCompare}>
<Icon fillColor>{compare ? <Close /> : <Compare />}</Icon>
</Button>
<Tooltip>{formatMessage(compare ? labels.cancel : labels.compareDates)}</Tooltip>
</TooltipTrigger>
)}
</Row>
);
}

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

@ -1,4 +1,4 @@
import { useMemo } from 'react';
import { useEffect, useMemo } from 'react';
import { Icon, Row, Text } from '@umami/react-zen';
import { LinkButton } from '@/components/common/LinkButton';
import { LoadingPanel } from '@/components/common/LoadingPanel';
@ -15,6 +15,7 @@ export interface MetricsTableProps extends ListTableProps {
limit?: number;
showMore?: boolean;
params?: Record<string, any>;
onDataLoad?: (data: any) => void;
}
export function MetricsTable({
@ -24,6 +25,7 @@ export function MetricsTable({
limit,
showMore = false,
params,
onDataLoad,
...props
}: MetricsTableProps) {
const { updateParams } = useNavigation();
@ -55,6 +57,12 @@ export function MetricsTable({
return [];
}, [data, dataFilter, limit, type]);
useEffect(() => {
if (data) {
onDataLoad?.(data);
}
}, [data]);
const renderLabel = (row: any) => {
return <MetricLabel type={type} data={row} />;
};

1
src/lib/request.ts
View file

@ -116,5 +116,6 @@ export async function getQueryFilters(
orderBy: params?.orderBy,
sortDescending: params?.sortDescending,
search: params?.search,
compare: params?.compare,
};
}