watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-14 01:25:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Goals components. Removed some completed reports.

Browse source
This commit is contained in:
Mike Cao 2025-05-25 08:58:38 -07:00
parent 7662b77ce3
commit 4552256930
39 changed files with 120 additions and 740 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -78,7 +78,7 @@
"@react-spring/web": "^9.7.3", "@react-spring/web": "^9.7.3",
"@svgr/cli": "^8.1.0", "@svgr/cli": "^8.1.0",
"@tanstack/react-query": "^5.28.6", "@tanstack/react-query": "^5.28.6",
"@umami/react-zen": "^0.117.0", "@umami/react-zen": "^0.118.0",
"@umami/redis-client": "^0.27.0", "@umami/redis-client": "^0.27.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"chalk": "^4.1.1", "chalk": "^4.1.1",

10
pnpm-lock.yaml generated
View file

@ -42,8 +42,8 @@ importers:
specifier: ^5.28.6 specifier: ^5.28.6
version: 5.76.1(react@19.1.0) version: 5.76.1(react@19.1.0)
'@umami/react-zen': '@umami/react-zen':
specifier: ^0.117.0 specifier: ^0.118.0
version: 0.117.0(@babel/core@7.27.1)(@types/react@19.1.4)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0)) version: 0.118.0(@babel/core@7.27.1)(@types/react@19.1.4)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))
'@umami/redis-client': '@umami/redis-client':
specifier: ^0.27.0 specifier: ^0.27.0
version: 0.27.0 version: 0.27.0
@ -3035,8 +3035,8 @@ packages:
resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==} resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@umami/react-zen@0.117.0': '@umami/react-zen@0.118.0':
resolution: {integrity: sha512-vo1i25cBpMsAWNHJ4RPFDJzlaH93NXwx8VotmnoAWgP39Yy+fdUwmi+dDXNBOKvWzoHO9BFf0nIYiT16klnR6g==} resolution: {integrity: sha512-XnaR499ZysBXph+GFEmiHzXOKYWveHMEXMgeMKZqyaXAEU76UTfVJJifgC2MEWMfOxZAyT308EFJh0s4hc/3eA==}
'@umami/redis-client@0.27.0': '@umami/redis-client@0.27.0':
resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==} resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
@ -10860,7 +10860,7 @@ snapshots:
'@typescript-eslint/types': 8.32.1 '@typescript-eslint/types': 8.32.1
eslint-visitor-keys: 4.2.0 eslint-visitor-keys: 4.2.0
'@umami/react-zen@0.117.0(@babel/core@7.27.1)(@types/react@19.1.4)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))': '@umami/react-zen@0.118.0(@babel/core@7.27.1)(@types/react@19.1.4)(immer@9.0.21)(use-sync-external-store@1.5.0(react@19.1.0))':
dependencies: dependencies:
'@fontsource/jetbrains-mono': 5.2.5 '@fontsource/jetbrains-mono': 5.2.5
'@internationalized/date': 3.8.1 '@internationalized/date': 3.8.1

33
src/app/(main)/reports/retention/RetentionParameters.tsx
View file

@ -1,33 +0,0 @@
import { useMessages, useReport } from '@/components/hooks';
import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
export function RetentionParameters() {
const { report, runReport, isRunning } = useReport();
const { formatMessage, labels } = useMessages();
const { id, parameters } = report || {};
const { websiteId, dateRange } = parameters || {};
const queryDisabled = !websiteId || !dateRange;
const handleSubmit = (data: any, e: any) => {
e.stopPropagation();
e.preventDefault();
if (!queryDisabled) {
runReport(data);
}
};
return (
<Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<BaseParameters showDateSelect={false} allowWebsiteSelect={!id} />
<FormButtons>
<FormSubmitButton variant="primary" isDisabled={queryDisabled} isLoading={isRunning}>
{formatMessage(labels.runQuery)}
</FormSubmitButton>
</FormButtons>
</Form>
);
}

10
src/app/(main)/reports/retention/RetentionReport.module.css
View file

@ -1,10 +0,0 @@
.filters {
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--base400);
border-radius: var(--border-radius);
line-height: 32px;
padding: 10px;
overflow: hidden;
}

33
src/app/(main)/reports/retention/RetentionReport.tsx
View file

@ -1,33 +0,0 @@
import { RetentionTable } from './RetentionTable';
import { RetentionParameters } from './RetentionParameters';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
import { parseDateRange } from '@/lib/date';
import { endOfMonth, startOfMonth } from 'date-fns';
const defaultParameters = {
type: REPORT_TYPES.retention,
parameters: {
dateRange: parseDateRange(
`range:${startOfMonth(new Date()).getTime()}:${endOfMonth(new Date()).getTime()}`,
),
},
};
export function RetentionReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Icons.Magnet />} />
<ReportMenu>
<RetentionParameters />
</ReportMenu>
<ReportBody>
<RetentionTable />
</ReportBody>
</Report>
);
}

11
src/app/(main)/reports/retention/RetentionReportPage.tsx
View file

@ -1,11 +0,0 @@
'use client';
import { Metadata } from 'next';
import { RetentionReport } from './RetentionReport';
export function RetentionReportPage() {
return <RetentionReport />;
}
export const metadata: Metadata = {
title: 'Retention Report',
};

52
src/app/(main)/reports/retention/RetentionTable.module.css
View file

@ -1,52 +0,0 @@
.table {
display: flex;
flex-direction: column;
}
.header {
font-weight: 700;
}
.row {
display: flex;
flex-direction: row;
gap: 1px;
margin-bottom: 1px;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
background: var(--blue200);
border-radius: var(--border-radius);
}
.date {
display: flex;
align-items: center;
min-width: 160px;
}
.visitors {
display: flex;
align-items: center;
min-width: 80px;
}
.day {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
text-align: center;
font-size: var(--font-size-sm);
font-weight: 400;
}
.empty {
background: var(--blue100);
}

75
src/app/(main)/reports/retention/RetentionTable.tsx
View file

@ -1,75 +0,0 @@
import classNames from 'classnames';
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
import { useMessages, useLocale, useReport } from '@/components/hooks';
import { formatDate } from '@/lib/date';
import styles from './RetentionTable.module.css';
const DAYS = [1, 2, 3, 4, 5, 6, 7, 14, 21, 28];
export function RetentionTable({ days = DAYS }) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { report } = useReport();
const { data } = report || {};
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 (
<>
<div className={styles.table}>
<div className={classNames(styles.row, styles.header)}>
<div className={styles.date}>{formatMessage(labels.date)}</div>
<div className={styles.visitors}>{formatMessage(labels.visitors)}</div>
{days.map(n => (
<div key={n} className={styles.day}>
{formatMessage(labels.day)} {n}
</div>
))}
</div>
{rows.map(({ date, visitors, records }, rowIndex) => {
return (
<div key={rowIndex} className={styles.row}>
<div className={styles.date}>{formatDate(date, 'PP', locale)}</div>
<div className={styles.visitors}>{visitors}</div>
{days.map(day => {
if (totalDays - rowIndex < day) {
return null;
}
const percentage = records.filter(a => a.day === day)[0]?.percentage;
return (
<div
key={day}
className={classNames(styles.cell, { [styles.empty]: !percentage })}
>
{percentage ? `${Number(percentage).toFixed(2)}%` : ''}
</div>
);
})}
</div>
);
})}
</div>
</>
);
}

10
src/app/(main)/reports/retention/page.tsx
View file

@ -1,10 +0,0 @@
import { Metadata } from 'next';
import { RetentionReportPage } from './RetentionReportPage';
export default function () {
return <RetentionReportPage />;
}
export const metadata: Metadata = {
title: 'Retention Report',
};

45
src/app/(main)/reports/revenue/RevenueParameters.tsx
View file

@ -1,45 +0,0 @@
import { useMessages, useReport } from '@/components/hooks';
import { useRevenueValuesQuery } from '@/components/hooks/queries/useRevenueValuesQuery';
import { Select, Form, FormButtons, FormField, ListItem, FormSubmitButton } from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
export function RevenueParameters() {
const { report, runReport, isRunning } = useReport();
const { formatMessage, labels } = useMessages();
const { id, parameters } = report || {};
const { websiteId, dateRange } = parameters || {};
const queryEnabled = websiteId && dateRange;
const { data: values = [] } = useRevenueValuesQuery(
websiteId,
dateRange?.startDate,
dateRange?.endDate,
);
const handleSubmit = (data: any, e: any) => {
e.stopPropagation();
e.preventDefault();
runReport(data);
};
return (
<Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
<FormField
label={formatMessage(labels.currency)}
name="currency"
rules={{ required: formatMessage(labels.required) }}
>
<Select items={values.map(item => item.currency)}>
{(item: any) => <ListItem key={item}>{item}</ListItem>}
</Select>
</FormField>
<FormButtons>
<FormSubmitButton variant="primary" isDisabled={!queryEnabled} isLoading={isRunning}>
{formatMessage(labels.runQuery)}
</FormSubmitButton>
</FormButtons>
</Form>
);
}

27
src/app/(main)/reports/revenue/RevenueReport.tsx
View file

@ -1,27 +0,0 @@
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
import { Report } from '../[reportId]/Report';
import { ReportBody } from '../[reportId]/ReportBody';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { RevenueParameters } from './RevenueParameters';
import { RevenueView } from './RevenueView';
const defaultParameters = {
type: REPORT_TYPES.revenue,
parameters: {},
};
export function RevenueReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Icons.Money />} />
<ReportMenu>
<RevenueParameters />
</ReportMenu>
<ReportBody>
<RevenueView />
</ReportBody>
</Report>
);
}

6
src/app/(main)/reports/revenue/RevenueReportPage.tsx
View file

@ -1,6 +0,0 @@
'use client';
import { RevenueReport } from './RevenueReport';
export function RevenueReportPage() {
return <RevenueReport />;
}

34
src/app/(main)/reports/revenue/RevenueTable.tsx
View file

@ -1,34 +0,0 @@
import { EmptyPlaceholder } from '@/components/common/EmptyPlaceholder';
import { useMessages, useReport } from '@/components/hooks';
import { DataColumn, DataTable } from '@umami/react-zen';
import { formatLongCurrency } from '@/lib/format';
export function RevenueTable() {
const { report } = useReport();
const { formatMessage, labels } = useMessages();
const { data } = report || {};
if (!data) {
return <EmptyPlaceholder />;
}
return (
<DataTable data={data.table || []}>
<DataColumn id="currency" label={formatMessage(labels.currency)} align="end">
{(row: any) => row.currency}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.total)} align="end">
{(row: any) => formatLongCurrency(row.sum, row.currency)}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.average)} align="end">
{(row: any) => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.transactions)} align="end">
{(row: any) => row.count}
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.uniqueCustomers)} align="end">
{(row: any) => row.unique_count}
</DataColumn>
</DataTable>
);
}

11
src/app/(main)/reports/revenue/RevenueView.module.css
View file

@ -1,11 +0,0 @@
.container {
display: grid;
gap: 20px;
margin-bottom: 40px;
}
.row {
display: flex;
align-items: center;
gap: 10px;
}

153
src/app/(main)/reports/revenue/RevenueView.tsx
View file

@ -1,153 +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, useReport } 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 styles from './RevenueView.module.css';
export interface RevenueViewProps {
isLoading?: boolean;
}
export function RevenueView({ isLoading }: RevenueViewProps) {
const { formatMessage, labels } = useMessages();
const { locale } = useLocale();
const { countryNames } = useCountryNames(locale);
const { report } = useReport();
const {
data,
parameters: { dateRange, currency },
} = report || {};
const showTable = data?.table.length > 1;
const renderCountryName = useCallback(
({ x: code }) => (
<span className={classNames(locale, styles.row)}>
<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 (
<>
<div className={styles.container}>
<MetricsBar isFetched={data}>
{metricData?.map(({ label, value, formatValue }) => {
return <MetricCard key={label} value={value} label={label} formatValue={formatValue} />;
})}
</MetricsBar>
{data && (
<>
<BarChart
minDate={dateRange?.startDate}
maxDate={dateRange?.endDate}
data={chartData}
unit={dateRange?.unit}
stacked={true}
currency={currency}
renderXLabel={renderDateLabels(dateRange?.unit, locale)}
isLoading={isLoading}
/>
<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>
</>
)}
{showTable && <RevenueTable />}
</div>
</>
);
}

10
src/app/(main)/reports/revenue/page.tsx
View file

@ -1,10 +0,0 @@
import { RevenueReportPage } from './RevenueReportPage';
import { Metadata } from 'next';
export default function () {
return <RevenueReportPage />;
}
export const metadata: Metadata = {
title: 'Revenue Report',
};

32
src/app/(main)/reports/utm/UTMParameters.tsx
View file

@ -1,32 +0,0 @@
import { useMessages, useReport } from '@/components/hooks';
import { Form, FormButtons, FormSubmitButton } from '@umami/react-zen';
import { BaseParameters } from '../[reportId]/BaseParameters';
export function UTMParameters() {
const { report, runReport, isRunning } = useReport();
const { formatMessage, labels } = useMessages();
const { id, parameters } = report || {};
const { websiteId, dateRange } = parameters || {};
const queryDisabled = !websiteId || !dateRange;
const handleSubmit = (data: any, e: any) => {
e.stopPropagation();
e.preventDefault();
if (!queryDisabled) {
runReport(data);
}
};
return (
<Form values={parameters} onSubmit={handleSubmit} preventSubmit={true}>
<BaseParameters showDateSelect={true} allowWebsiteSelect={!id} />
<FormButtons>
<FormSubmitButton variant="primary" isDisabled={queryDisabled} isLoading={isRunning}>
{formatMessage(labels.runQuery)}
</FormSubmitButton>
</FormButtons>
</Form>
);
}

28
src/app/(main)/reports/utm/UTMReport.tsx
View file

@ -1,28 +0,0 @@
'use client';
import { Report } from '../[reportId]/Report';
import { ReportHeader } from '../[reportId]/ReportHeader';
import { ReportMenu } from '../[reportId]/ReportMenu';
import { ReportBody } from '../[reportId]/ReportBody';
import { UTMParameters } from './UTMParameters';
import { UTMView } from './UTMView';
import { Icons } from '@/components/icons';
import { REPORT_TYPES } from '@/lib/constants';
const defaultParameters = {
type: REPORT_TYPES.utm,
parameters: {},
};
export function UTMReport({ reportId }: { reportId?: string }) {
return (
<Report reportId={reportId} defaultParameters={defaultParameters}>
<ReportHeader icon={<Icons.Tag />} />
<ReportMenu>
<UTMParameters />
</ReportMenu>
<ReportBody>
<UTMView />
</ReportBody>
</Report>
);
}

5
src/app/(main)/reports/utm/UTMReportPage.tsx
View file

@ -1,5 +0,0 @@
import { UTMReport } from './UTMReport';
export function UTMReportPage() {
return <UTMReport />;
}

14
src/app/(main)/reports/utm/UTMView.module.css
View file

@ -1,14 +0,0 @@
.title {
font-size: 24px;
line-height: 36px;
font-weight: 700;
}
.row {
display: grid;
grid-template-columns: 50% 50%;
gap: 20px;
border-bottom: 1px solid var(--base300);
padding-bottom: 30px;
margin-bottom: 30px;
}

65
src/app/(main)/reports/utm/UTMView.tsx
View file

@ -1,65 +0,0 @@
import { firstBy } from 'thenby';
import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
import { useReport } from '@/components/hooks';
import { PieChart } from '@/components/charts/PieChart';
import { ListTable } from '@/components/metrics/ListTable';
import styles from './UTMView.module.css';
import { useMessages } from '@/components/hooks';
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() {
const { formatMessage, labels } = useMessages();
const { report } = useReport();
const { data } = report || {};
if (!data) {
return null;
}
return (
<div>
{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 (
<div key={param} className={styles.row}>
<div>
<div className={styles.title}>{param.replace(/^utm_/, '')}</div>
<ListTable
metric={formatMessage(labels.views)}
data={items.map(({ name, value }) => ({
x: name,
y: value,
z: (value / total) * 100,
}))}
/>
</div>
<div>
<PieChart type="doughnut" data={chartData} />
</div>
</div>
);
})}
</div>
);
}

10
src/app/(main)/reports/utm/page.tsx
View file

@ -1,10 +0,0 @@
import { Metadata } from 'next';
import { UTMReportPage } from './UTMReportPage';
export default function () {
return <UTMReportPage />;
}
export const metadata: Metadata = {
title: 'Goals Report',
};

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

@ -16,7 +16,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
return ( return (
<Column gap> <Column gap>
<WebsiteControls websiteId={websiteId} /> <WebsiteControls websiteId={websiteId} allowCompare={true} />
<Panel> <Panel>
<WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} /> <WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
</Panel> </Panel>

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

@ -80,12 +80,6 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
icon: <Icons.Network />, icon: <Icons.Network />,
path: '/attribution', path: '/attribution',
}, },
{
id: 'reports',
label: formatMessage(labels.reports),
icon: <Icons.Reports />,
path: '/reports',
},
]; ];
const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'overview'; const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'overview';

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

@ -0,0 +1,24 @@
import { Button, MenuTrigger, Dialog, Icon, Text, Modal } from '@umami/react-zen';
import { useMessages } from '@/components/hooks';
import { GoalAddForm } from './GoalAddForm';
import { Icons } from '@/components/icons';
export function GoalAddButton({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
return (
<MenuTrigger>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.addGoal)}</Text>
</Button>
<Modal>
<Dialog variant="modal" title={formatMessage(labels.addGoal)}>
{({ close }) => <GoalAddForm websiteId={websiteId} onClose={close} />}
</Dialog>
</Modal>
</MenuTrigger>
);
}

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

@ -0,0 +1,64 @@
import {
Form,
FormField,
TextField,
Select,
FormButtons,
FormSubmitButton,
Button,
} from '@umami/react-zen';
import { useApi, useMessages } from '@/components/hooks';
export function GoalAddForm({ onSave, onClose }: { onSave?: () => void; onClose?: () => void }) {
const { formatMessage, labels } = useMessages();
const { post, useMutation } = useApi();
const { mutate, error, isPending } = useMutation({
mutationFn: (data: any) => post('/websites', { ...data }),
});
const handleSubmit = async (data: any) => {
mutate(data, {
onSuccess: async () => {
onSave?.();
onClose?.();
},
});
};
const items = [
{ id: 'page', label: formatMessage(labels.page) },
{ id: 'event', label: formatMessage(labels.event) },
];
return (
<Form onSubmit={handleSubmit} error={error?.message}>
<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) }}
>
<Select items={items} defaultValue="page" />
</FormField>
<FormField
name="value"
label={formatMessage(labels.value)}
rules={{ required: formatMessage(labels.required) }}
>
<TextField />
</FormField>
<FormButtons>
<Button onPress={onClose} isDisabled={isPending}>
{formatMessage(labels.cancel)}
</Button>
<FormSubmitButton isDisabled={false}>{formatMessage(labels.add)}</FormSubmitButton>
</FormButtons>
</Form>
);
}

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

@ -1,14 +1,16 @@
'use client'; 'use client';
import { Column, Button, Heading } from '@umami/react-zen'; import { Column } from '@umami/react-zen';
import { SectionHeader } from '@/components/common/SectionHeader';
import { GoalAddButton } from './GoalAddButton';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
export function GoalsPage({ websiteId }: { websiteId: string }) { export function GoalsPage({ websiteId }: { websiteId: string }) {
return ( return (
<Column> <Column>
{websiteId} <WebsiteControls websiteId={websiteId} />
<Button>Add goal</Button> <SectionHeader>
<Heading>Goal 1</Heading> <GoalAddButton websiteId={websiteId} />
<Heading>Goal 2</Heading> </SectionHeader>
<Heading>Goal 3</Heading>
</Column> </Column>
); );
} }

26
src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx
View file

@ -1,26 +0,0 @@
'use client';
import Link from 'next/link';
import { Button, Flexbox, Icon, Icons, Text } from '@umami/react-zen';
import { useMessages, useNavigation } from '@/components/hooks';
import { ReportsDataTable } from '@/app/(main)/reports/ReportsDataTable';
export function WebsiteReportsPage({ websiteId }) {
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useNavigation();
return (
<>
<Flexbox alignItems="center" justifyContent="end">
<Link href={renderTeamUrl('/reports/create')}>
<Button variant="primary">
<Icon>
<Icons.Plus />
</Icon>
<Text>{formatMessage(labels.createReport)}</Text>
</Button>
</Link>
</Flexbox>
<ReportsDataTable websiteId={websiteId} />
</>
);
}

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

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

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

@ -7,21 +7,15 @@ export function RevenueTable({ data = [] }) {
return ( return (
<DataTable data={data}> <DataTable data={data}>
<DataColumn id="currency" label={formatMessage(labels.currency)} align="end"> <DataColumn id="currency" label={formatMessage(labels.currency)} align="end" />
{(row: any) => row.currency} <DataColumn id="total" label={formatMessage(labels.total)} align="end">
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.total)} align="end">
{(row: any) => formatLongCurrency(row.sum, row.currency)} {(row: any) => formatLongCurrency(row.sum, row.currency)}
</DataColumn> </DataColumn>
<DataColumn id="currency" label={formatMessage(labels.average)} align="end"> <DataColumn id="average" label={formatMessage(labels.average)} align="end">
{(row: any) => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)} {(row: any) => formatLongCurrency(row.count ? row.sum / row.count : 0, row.currency)}
</DataColumn> </DataColumn>
<DataColumn id="currency" label={formatMessage(labels.transactions)} align="end"> <DataColumn id="count" label={formatMessage(labels.transactions)} align="end" />
{(row: any) => row.count} <DataColumn id="unique_count" label={formatMessage(labels.uniqueCustomers)} align="end" />
</DataColumn>
<DataColumn id="currency" label={formatMessage(labels.uniqueCustomers)} align="end">
{(row: any) => row.unique_count}
</DataColumn>
</DataTable> </DataTable>
); );
} }

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

@ -9,6 +9,7 @@ import { GridRow } from '@/components/common/GridRow';
import { useMessages } from '@/components/hooks'; import { useMessages } from '@/components/hooks';
import { SessionsWeekly } from './SessionsWeekly'; import { SessionsWeekly } from './SessionsWeekly';
import { Panel } from '@/components/common/Panel'; import { Panel } from '@/components/common/Panel';
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
export function SessionsPage({ websiteId }) { export function SessionsPage({ websiteId }) {
const [tab, setTab] = useState('activity'); const [tab, setTab] = useState('activity');
@ -16,6 +17,7 @@ export function SessionsPage({ websiteId }) {
return ( return (
<Column gap="3"> <Column gap="3">
<WebsiteControls websiteId={websiteId} />
<Panel> <Panel>
<SessionsMetricsBar websiteId={websiteId} /> <SessionsMetricsBar websiteId={websiteId} />
</Panel> </Panel>

2
src/assets/logo.svg
View file

@ -1 +1 @@
<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11"><circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11"><circle cx="214.15" cy="181" r="171" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 411 B

After

Width:  |  Height:  |  Size: 391 B

Before After
Before After

4
src/components/common/EmptyPlaceholder.tsx
View file

@ -10,10 +10,10 @@ export interface EmptyPlaceholderProps {
export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) { export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) {
return ( return (
<Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%"> <Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
<Icon size="xl"> <Icon size="xl" fillColor="3" strokeColor="3">
<Icons.Logo /> <Icons.Logo />
</Icon> </Icon>
<Text size="lg">{message}</Text> <Text>{message}</Text>
<div>{children}</div> <div>{children}</div>
</Column> </Column>
); );

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

@ -7,7 +7,7 @@ export function SectionHeader({
icon, icon,
children, children,
}: { }: {
title: string; title?: string;
description?: string; description?: string;
icon?: ReactNode; icon?: ReactNode;
allowEdit?: boolean; allowEdit?: boolean;

2
src/components/hooks/queries/useRevenueQuery.ts
View file

@ -2,7 +2,7 @@ import { useApi } from '../useApi';
import { useFilterParams } from '../useFilterParams'; import { useFilterParams } from '../useFilterParams';
import { UseQueryOptions } from '@tanstack/react-query'; import { UseQueryOptions } from '@tanstack/react-query';
interface RevenueData { export interface RevenueData {
chart: any[]; chart: any[];
country: any[]; country: any[];
total: { total: {

2
src/components/input/LanguageButton.tsx
View file

@ -25,7 +25,7 @@ export function LanguageButton() {
return ( return (
<Button key={value} variant="quiet" onPress={() => handleSelect(value)}> <Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
<Text <Text
weight={value === locale ? 'bold' : 'normal'} weight={value === locale ? 'bold' : 'medium'}
color={value === locale ? undefined : 'muted'} color={value === locale ? undefined : 'muted'}
> >
{label} {label}

2
src/components/input/TeamsButton.tsx
View file

@ -52,7 +52,7 @@ export function TeamsButton({
</Row> </Row>
</Button> </Button>
<Popover placement="bottom start"> <Popover placement="bottom start">
<Box minWidth={300}> <Box minWidth="300px">
<Menu <Menu
selectionMode="single" selectionMode="single"
selectedKeys={selectedKeys} selectedKeys={selectedKeys}

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

@ -19,7 +19,7 @@ export function WebsiteDateFilter({
websiteId, websiteId,
showAllTime = true, showAllTime = true,
showButtons = true, showButtons = true,
allowCompare = true, allowCompare,
}: { }: {
websiteId: string; websiteId: string;
compare?: string; compare?: string;

2
src/components/messages.ts
View file

@ -89,6 +89,7 @@ export const labels = defineMessages({
deleteTeam: { id: 'label.delete-team', defaultMessage: 'Delete team' }, deleteTeam: { id: 'label.delete-team', defaultMessage: 'Delete team' },
leaveTeam: { id: 'label.leave-team', defaultMessage: 'Leave team' }, leaveTeam: { id: 'label.leave-team', defaultMessage: 'Leave team' },
refresh: { id: 'label.refresh', defaultMessage: 'Refresh' }, refresh: { id: 'label.refresh', defaultMessage: 'Refresh' },
page: { id: 'label.page', defaultMessage: 'Page' },
pages: { id: 'label.pages', defaultMessage: 'Pages' }, pages: { id: 'label.pages', defaultMessage: 'Pages' },
entry: { id: 'label.entry', defaultMessage: 'Entry path' }, entry: { id: 'label.entry', defaultMessage: 'Entry path' },
exit: { id: 'label.exit', defaultMessage: 'Exit path' }, exit: { id: 'label.exit', defaultMessage: 'Exit path' },
@ -274,6 +275,7 @@ export const labels = defineMessages({
addStep: { id: 'label.add-step', defaultMessage: 'Add step' }, addStep: { id: 'label.add-step', defaultMessage: 'Add step' },
goal: { id: 'label.goal', defaultMessage: 'Goal' }, goal: { id: 'label.goal', defaultMessage: 'Goal' },
goals: { id: 'label.goals', defaultMessage: 'Goals' }, goals: { id: 'label.goals', defaultMessage: 'Goals' },
addGoal: { id: 'label.add-goal', defaultMessage: 'Add Goal' },
goalsDescription: { goalsDescription: {
id: 'label.goals-description', id: 'label.goals-description',
defaultMessage: 'Track your goals for pageviews and events.', defaultMessage: 'Track your goals for pageviews and events.',