mirror of
https://github.com/umami-software/umami.git
synced 2025-12-06 01:18:00 +01:00
Goals components. Removed some completed reports.
This commit is contained in:
Mike Cao
parent
7662b77ce3
commit
4552256930
39 changed files with 120 additions and 740 deletions
|
|
@ -78,7 +78,7 @@
|
|||
"@react-spring/web": "^9.7.3",
|
||||
"@svgr/cli": "^8.1.0",
|
||||
"@tanstack/react-query": "^5.28.6",
|
||||
"@umami/react-zen": "^0.117.0",
|
||||
"@umami/react-zen": "^0.118.0",
|
||||
"@umami/redis-client": "^0.27.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"chalk": "^4.1.1",
|
||||
|
|
|
|||
10
pnpm-lock.yaml
generated
10
pnpm-lock.yaml
generated
|
|
@ -42,8 +42,8 @@ importers:
|
|||
specifier: ^5.28.6
|
||||
version: 5.76.1(react@19.1.0)
|
||||
'@umami/react-zen':
|
||||
specifier: ^0.117.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))
|
||||
specifier: ^0.118.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':
|
||||
specifier: ^0.27.0
|
||||
version: 0.27.0
|
||||
|
|
@ -3035,8 +3035,8 @@ packages:
|
|||
resolution: {integrity: sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==}
|
||||
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
|
||||
|
||||
'@umami/react-zen@0.117.0':
|
||||
resolution: {integrity: sha512-vo1i25cBpMsAWNHJ4RPFDJzlaH93NXwx8VotmnoAWgP39Yy+fdUwmi+dDXNBOKvWzoHO9BFf0nIYiT16klnR6g==}
|
||||
'@umami/react-zen@0.118.0':
|
||||
resolution: {integrity: sha512-XnaR499ZysBXph+GFEmiHzXOKYWveHMEXMgeMKZqyaXAEU76UTfVJJifgC2MEWMfOxZAyT308EFJh0s4hc/3eA==}
|
||||
|
||||
'@umami/redis-client@0.27.0':
|
||||
resolution: {integrity: sha512-SbHTpxhgeZyTBUSp2zdZM+XUtpsaSL4Tad8QXIEhEtjWhvvfoornyT5kLuyYCVtzSAT4daALeGmOO1z6EE1KcA==}
|
||||
|
|
@ -10860,7 +10860,7 @@ snapshots:
|
|||
'@typescript-eslint/types': 8.32.1
|
||||
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:
|
||||
'@fontsource/jetbrains-mono': 5.2.5
|
||||
'@internationalized/date': 3.8.1
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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',
|
||||
};
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Metadata } from 'next';
|
||||
import { RetentionReportPage } from './RetentionReportPage';
|
||||
|
||||
export default function () {
|
||||
return <RetentionReportPage />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Retention Report',
|
||||
};
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
'use client';
|
||||
import { RevenueReport } from './RevenueReport';
|
||||
|
||||
export function RevenueReportPage() {
|
||||
return <RevenueReport />;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
.container {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { RevenueReportPage } from './RevenueReportPage';
|
||||
import { Metadata } from 'next';
|
||||
|
||||
export default function () {
|
||||
return <RevenueReportPage />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Revenue Report',
|
||||
};
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import { UTMReport } from './UTMReport';
|
||||
|
||||
export function UTMReportPage() {
|
||||
return <UTMReport />;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { Metadata } from 'next';
|
||||
import { UTMReportPage } from './UTMReportPage';
|
||||
|
||||
export default function () {
|
||||
return <UTMReportPage />;
|
||||
}
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Goals Report',
|
||||
};
|
||||
|
|
@ -16,7 +16,7 @@ export function WebsiteDetailsPage({ websiteId }: { websiteId: string }) {
|
|||
|
||||
return (
|
||||
<Column gap>
|
||||
<WebsiteControls websiteId={websiteId} />
|
||||
<WebsiteControls websiteId={websiteId} allowCompare={true} />
|
||||
<Panel>
|
||||
<WebsiteMetricsBar websiteId={websiteId} showFilter={true} showChange={true} />
|
||||
</Panel>
|
||||
|
|
|
|||
|
|
@ -80,12 +80,6 @@ export function WebsiteNav({ websiteId }: { websiteId: string }) {
|
|||
icon: <Icons.Network />,
|
||||
path: '/attribution',
|
||||
},
|
||||
{
|
||||
id: 'reports',
|
||||
label: formatMessage(labels.reports),
|
||||
icon: <Icons.Reports />,
|
||||
path: '/reports',
|
||||
},
|
||||
];
|
||||
|
||||
const selected = links.find(({ path }) => path && pathname.endsWith(path))?.id || 'overview';
|
||||
|
|
|
|||
24
src/app/(main)/websites/[websiteId]/goals/GoalAddButton.tsx
Normal file
24
src/app/(main)/websites/[websiteId]/goals/GoalAddButton.tsx
Normal 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
64
src/app/(main)/websites/[websiteId]/goals/GoalAddForm.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,14 +1,16 @@
|
|||
'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 }) {
|
||||
return (
|
||||
<Column>
|
||||
{websiteId}
|
||||
<Button>Add goal</Button>
|
||||
<Heading>Goal 1</Heading>
|
||||
<Heading>Goal 2</Heading>
|
||||
<Heading>Goal 3</Heading>
|
||||
<WebsiteControls websiteId={websiteId} />
|
||||
<SectionHeader>
|
||||
<GoalAddButton websiteId={websiteId} />
|
||||
</SectionHeader>
|
||||
</Column>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -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',
|
||||
};
|
||||
|
|
@ -7,21 +7,15 @@ export function RevenueTable({ data = [] }) {
|
|||
|
||||
return (
|
||||
<DataTable data={data}>
|
||||
<DataColumn id="currency" label={formatMessage(labels.currency)} align="end">
|
||||
{(row: any) => row.currency}
|
||||
</DataColumn>
|
||||
<DataColumn id="currency" label={formatMessage(labels.total)} align="end">
|
||||
<DataColumn id="currency" label={formatMessage(labels.currency)} align="end" />
|
||||
<DataColumn id="total" label={formatMessage(labels.total)} align="end">
|
||||
{(row: any) => formatLongCurrency(row.sum, row.currency)}
|
||||
</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)}
|
||||
</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>
|
||||
<DataColumn id="count" label={formatMessage(labels.transactions)} align="end" />
|
||||
<DataColumn id="unique_count" label={formatMessage(labels.uniqueCustomers)} align="end" />
|
||||
</DataTable>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import { GridRow } from '@/components/common/GridRow';
|
|||
import { useMessages } from '@/components/hooks';
|
||||
import { SessionsWeekly } from './SessionsWeekly';
|
||||
import { Panel } from '@/components/common/Panel';
|
||||
import { WebsiteControls } from '@/app/(main)/websites/[websiteId]/WebsiteControls';
|
||||
|
||||
export function SessionsPage({ websiteId }) {
|
||||
const [tab, setTab] = useState('activity');
|
||||
|
|
@ -16,6 +17,7 @@ export function SessionsPage({ websiteId }) {
|
|||
|
||||
return (
|
||||
<Column gap="3">
|
||||
<WebsiteControls websiteId={websiteId} />
|
||||
<Panel>
|
||||
<SessionsMetricsBar websiteId={websiteId} />
|
||||
</Panel>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 411 B After Width: | Height: | Size: 391 B |
|
|
@ -10,10 +10,10 @@ export interface EmptyPlaceholderProps {
|
|||
export function EmptyPlaceholder({ message, children }: EmptyPlaceholderProps) {
|
||||
return (
|
||||
<Column alignItems="center" justifyContent="center" gap="5" height="100%" width="100%">
|
||||
<Icon size="xl">
|
||||
<Icon size="xl" fillColor="3" strokeColor="3">
|
||||
<Icons.Logo />
|
||||
</Icon>
|
||||
<Text size="lg">{message}</Text>
|
||||
<Text>{message}</Text>
|
||||
<div>{children}</div>
|
||||
</Column>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export function SectionHeader({
|
|||
icon,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
title?: string;
|
||||
description?: string;
|
||||
icon?: ReactNode;
|
||||
allowEdit?: boolean;
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import { useApi } from '../useApi';
|
|||
import { useFilterParams } from '../useFilterParams';
|
||||
import { UseQueryOptions } from '@tanstack/react-query';
|
||||
|
||||
interface RevenueData {
|
||||
export interface RevenueData {
|
||||
chart: any[];
|
||||
country: any[];
|
||||
total: {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export function LanguageButton() {
|
|||
return (
|
||||
<Button key={value} variant="quiet" onPress={() => handleSelect(value)}>
|
||||
<Text
|
||||
weight={value === locale ? 'bold' : 'normal'}
|
||||
weight={value === locale ? 'bold' : 'medium'}
|
||||
color={value === locale ? undefined : 'muted'}
|
||||
>
|
||||
{label}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export function TeamsButton({
|
|||
</Row>
|
||||
</Button>
|
||||
<Popover placement="bottom start">
|
||||
<Box minWidth={300}>
|
||||
<Box minWidth="300px">
|
||||
<Menu
|
||||
selectionMode="single"
|
||||
selectedKeys={selectedKeys}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export function WebsiteDateFilter({
|
|||
websiteId,
|
||||
showAllTime = true,
|
||||
showButtons = true,
|
||||
allowCompare = true,
|
||||
allowCompare,
|
||||
}: {
|
||||
websiteId: string;
|
||||
compare?: string;
|
||||
|
|
|
|||
|
|
@ -89,6 +89,7 @@ export const labels = defineMessages({
|
|||
deleteTeam: { id: 'label.delete-team', defaultMessage: 'Delete team' },
|
||||
leaveTeam: { id: 'label.leave-team', defaultMessage: 'Leave team' },
|
||||
refresh: { id: 'label.refresh', defaultMessage: 'Refresh' },
|
||||
page: { id: 'label.page', defaultMessage: 'Page' },
|
||||
pages: { id: 'label.pages', defaultMessage: 'Pages' },
|
||||
entry: { id: 'label.entry', defaultMessage: 'Entry path' },
|
||||
exit: { id: 'label.exit', defaultMessage: 'Exit path' },
|
||||
|
|
@ -274,6 +275,7 @@ export const labels = defineMessages({
|
|||
addStep: { id: 'label.add-step', defaultMessage: 'Add step' },
|
||||
goal: { id: 'label.goal', defaultMessage: 'Goal' },
|
||||
goals: { id: 'label.goals', defaultMessage: 'Goals' },
|
||||
addGoal: { id: 'label.add-goal', defaultMessage: 'Add Goal' },
|
||||
goalsDescription: {
|
||||
id: 'label.goals-description',
|
||||
defaultMessage: 'Track your goals for pageviews and events.',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue