github/umami
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

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',
};