m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-06 01:15:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated events page.

Browse Source
This commit is contained in:
Mike Cao 2024-08-07 22:39:36 -07:00
parent 3a97bfe11c
commit c6b8114945
13 changed files with 122 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/(main)/websites/[websiteId]/events/EventsDataTable.tsx
View File

@ -5,7 +5,6 @@ import { ReactNode } from 'react';
export default function EventsDataTable({
websiteId,
children,
}: {
websiteId?: string;
teamId?: string;
@ -13,12 +12,8 @@ export default function EventsDataTable({
}) {
const queryResult = useWebsiteEvents(websiteId);
if (queryResult?.result?.data?.length === 0) {
return children;
}
return (
<DataTable queryResult={queryResult} allowSearch={false}>
<DataTable queryResult={queryResult} allowSearch={true}>
{({ data }) => <EventsTable data={data} />}
</DataTable>
);

42
src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx Normal file
View File

@ -0,0 +1,42 @@
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import { Flexbox } from 'react-basics';
import MetricsBar from 'components/metrics/MetricsBar';
import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks';
import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
import { formatLongNumber } from 'lib/format';
export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
return (
<Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
<MetricCard
value={data?.visitors?.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.visits?.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.pageviews?.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.events?.value}
label={formatMessage(labels.events)}
formatValue={formatLongNumber}
/>
</MetricsBar>
<WebsiteDateFilter websiteId={websiteId} />
</Flexbox>
);
}
export default EventsMetricsBar;

21
src/app/(main)/websites/[websiteId]/events/EventsPage.tsx
View File

@ -1,12 +1,31 @@
'use client';
import WebsiteHeader from '../WebsiteHeader';
import EventsDataTable from './EventsDataTable';
import EventsMetricsBar from './EventsMetricsBar';
import EventsChart from 'components/metrics/EventsChart';
import { GridRow } from 'components/layout/Grid';
import MetricsTable from 'components/metrics/MetricsTable';
import { useMessages } from 'components/hooks';
export default function EventsPage({ websiteId }) {
const { formatMessage, labels } = useMessages();
return (
<>
<WebsiteHeader websiteId={websiteId} />
<EventsDataTable websiteId={websiteId} />
<EventsMetricsBar websiteId={websiteId} />
<GridRow columns="two-one">
<EventsChart websiteId={websiteId} />
<MetricsTable
websiteId={websiteId}
type="event"
title={formatMessage(labels.events)}
metric={formatMessage(labels.actions)}
/>
</GridRow>
<GridRow columns="one">
<EventsDataTable websiteId={websiteId} />
</GridRow>
</>
);
}

52
src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx
View File

@ -1,5 +1,6 @@
import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
import { Flexbox, Loading } from 'react-basics';
import { Flexbox } from 'react-basics';
import MetricsBar from 'components/metrics/MetricsBar';
import MetricCard from 'components/metrics/MetricCard';
import { useMessages } from 'components/hooks';
import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
@ -7,33 +8,32 @@ import { formatLongNumber } from 'lib/format';
export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
const { formatMessage, labels } = useMessages();
const { data, isLoading } = useWebsiteStats(websiteId);
const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
return (
<Flexbox direction="row" justifyContent="space-between" style={{ height: 120 }}>
<Flexbox direction="row">
{isLoading && <Loading icon="dots" />}
{!isLoading && data && (
<>
<MetricCard
value={data.visitors.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.visits.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data.pageviews.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard value={data?.countries?.value} label={formatMessage(labels.countries)} />
</>
)}
</Flexbox>
<Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
<MetricCard
value={data?.visitors?.value}
label={formatMessage(labels.visitors)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.visits?.value}
label={formatMessage(labels.visits)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.pageviews?.value}
label={formatMessage(labels.views)}
formatValue={formatLongNumber}
/>
<MetricCard
value={data?.countries?.value}
label={formatMessage(labels.countries)}
formatValue={formatLongNumber}
/>
</MetricsBar>
<WebsiteDateFilter websiteId={websiteId} />
</Flexbox>
);

2
src/components/common/DataTable.tsx
View File

@ -34,7 +34,7 @@ export function DataTable({
const { page, pageSize, count, data } = result || {};
const { query } = params || {};
const hasData = Boolean(!isLoading && data?.length);
const noResults = Boolean(!isLoading && query && !hasData);
const noResults = Boolean(query && !hasData);
const { router, renderUrl } = useNavigation();
const handleSearch = (query: string) => {

1
src/components/hooks/queries/useWebsiteSessions.ts
View File

@ -15,6 +15,7 @@ export function useWebsiteSessions(websiteId: string, params?: { [key: string]:
...data,
...params,
...filters,
pageSize: 20,
});
},
});

3
src/components/input/DateFilter.module.css Normal file
View File

@ -0,0 +1,3 @@
.dropdown span {
white-space: nowrap;
}

4
src/components/input/DateFilter.tsx
View File

@ -5,6 +5,8 @@ import DatePickerForm from 'components/metrics/DatePickerForm';
import { useLocale, useMessages } from 'components/hooks';
import Icons from 'components/icons';
import { formatDate, parseDateValue } from 'lib/date';
import styles from './DateFilter.module.css';
import classNames from 'classnames';
export interface DateFilterProps {
value: string;
@ -123,7 +125,7 @@ export function DateFilter({
return (
<>
<Dropdown
className={className}
className={classNames(className, styles.dropdown)}
items={options}
renderValue={renderValue}
value={value}

4
src/components/layout/Grid.module.css
View File

@ -27,6 +27,10 @@
padding-inline-end: 0;
}
.col.one {
grid-column: span 6;
}
.col.two {
grid-column: span 3;
}

2
src/components/metrics/MetricsBar.module.css
View File

@ -2,6 +2,8 @@
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
gap: 20px;
width: 100%;
position: relative;
}
@media screen and (max-width: 768px) {

4
src/queries/analytics/events/getWebsiteEvents.ts
View File

@ -26,6 +26,7 @@ async function relationalQuery(websiteId: string, filters: QueryFilters, pagePar
async function clickhouseQuery(websiteId: string, filters: QueryFilters, pageParams?: PageParams) {
const { pagedQuery, parseFilters, getDateStringSQL } = clickhouse;
const { params, dateQuery, filterQuery } = await parseFilters(websiteId, filters);
const { query } = pageParams;
return pagedQuery(
`
@ -46,9 +47,10 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters, pagePar
where website_id = {websiteId:UUID}
${dateQuery}
${filterQuery}
${query ? `and (positionCaseInsensitive(event_name, {query:String}) > 0)` : ''}
order by created_at desc
`,
params,
{ ...params, query },
pageParams,
);
}

22
src/queries/analytics/getWebsiteStats.ts
View File

@ -1,5 +1,4 @@
import clickhouse from 'lib/clickhouse';
import { EVENT_TYPE } from 'lib/constants';
import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
import prisma from 'lib/prisma';
import { QueryFilters } from 'lib/types';
@ -25,7 +24,6 @@ async function relationalQuery(
const { getTimestampDiffSQL, parseFilters, rawQuery } = prisma;
const { filterQuery, joinSession, params } = await parseFilters(websiteId, {
...filters,
eventType: EVENT_TYPE.pageView,
});
return rawQuery(
@ -35,12 +33,15 @@ async function relationalQuery(
count(distinct t.session_id) as "visitors",
count(distinct t.visit_id) as "visits",
count(distinct t.country) as "countries",
count(t.event_name) as "countries",
sum(case when t.event_type = 2 then 1 else 0 end) as "events",
sum(case when t.c = 1 then 1 else 0 end) as "bounces",
sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime",
from (
select
website_event.session_id,
website_event.visit_id,
website_event.event_type,
session.country,
count(*) as "c",
min(website_event.created_at) as "min_time",
@ -49,9 +50,8 @@ async function relationalQuery(
${joinSession}
where website_event.website_id = {{websiteId::uuid}}
and website_event.created_at between {{startDate}} and {{endDate}}
and event_type = {{eventType}}
${filterQuery}
group by 1, 2, 3
group by 1, 2, 3, 4
) as t
`,
params,
@ -67,7 +67,6 @@ async function clickhouseQuery(
const { rawQuery, parseFilters } = clickhouse;
const { filterQuery, params } = await parseFilters(websiteId, {
...filters,
eventType: EVENT_TYPE.pageView,
});
let sql = '';
@ -79,12 +78,14 @@ async function clickhouseQuery(
uniq(t.session_id) as "visitors",
uniq(t.visit_id) as "visits",
uniq(t.country) as "countries",
sum(if(t.c = 1, 1, 0)) as "bounces",
sumIf(1, t.event_type = 2) as "events",
sumIf(1, t.c = 1) as "bounces",
sum(max_time-min_time) as "totaltime"
from (
select
session_id,
visit_id,
event_type,
country,
count(*) c,
min(created_at) min_time,
@ -92,9 +93,8 @@ async function clickhouseQuery(
from website_event
where website_id = {websiteId:UUID}
and created_at between {startDate:DateTime64} and {endDate:DateTime64}
and event_type = {eventType:UInt32}
${filterQuery}
group by session_id, visit_id, country
group by session_id, visit_id, event_type, country
) as t;
`;
} else {
@ -104,12 +104,14 @@ async function clickhouseQuery(
uniq(session_id) as "visitors",
uniq(visit_id) as "visits",
uniq(country) as "countries",
sumIf(1, t.event_type = 2) as "events",
sumIf(1, t.c = 1) as "bounces",
sum(max_time-min_time) as "totaltime"
from (
select
session_id,
visit_id,
event_type,
country,
sum(views) c,
min(min_time) min_time,
@ -117,9 +119,8 @@ async function clickhouseQuery(
from umami.website_event_stats_hourly "website_event"
where website_id = {websiteId:UUID}
and created_at between {startDate:DateTime64} and {endDate:DateTime64}
and event_type = {eventType:UInt32}
${filterQuery}
group by session_id, visit_id, country
group by session_id, visit_id, event_type, country
) as t;
`;
}
@ -133,6 +134,7 @@ async function clickhouseQuery(
bounces: Number(a.bounces),
totaltime: Number(a.totaltime),
countries: Number(a.countries),
events: Number(a.events),
};
});
});

4
src/queries/analytics/sessions/getWebsiteSessions.ts
View File

@ -14,10 +14,12 @@ export async function getWebsiteSessions(
async function relationalQuery(websiteId: string, filters: QueryFilters, pageParams: PageParams) {
const { pagedQuery } = prisma;
const { query } = pageParams;
const where = {
...filters,
id: websiteId,
...prisma.getSearchParameters(query, [{ eventName: 'contains' }, { urlPath: 'contains' }]),
};
return pagedQuery('session', { where }, pageParams);
@ -26,6 +28,7 @@ async function relationalQuery(websiteId: string, filters: QueryFilters, pagePar
async function clickhouseQuery(websiteId: string, filters: QueryFilters, pageParams?: PageParams) {
const { pagedQuery, parseFilters } = clickhouse;
const { params, dateQuery, filterQuery } = await parseFilters(websiteId, filters);
const { query } = pageParams;
return pagedQuery(
`
@ -49,6 +52,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters, pagePar
where website_id = {websiteId:UUID}
${dateQuery}
${filterQuery}
${query ? `and (positionCaseInsensitive(event_name, {query:String}) > 0)` : ''}
group by session_id, website_id, hostname, browser, os, device, screen, language, country, subdivision1, city
order by lastAt desc
`,