Merge remote-tracking branch 'origin/dev' into dev

This commit is contained in:
Mike Cao 2024-03-26 17:31:37 -07:00
commit 4ee7deafdd
6 changed files with 71 additions and 45 deletions

View File

@ -21,11 +21,12 @@ export function WebsiteMetricsBar({
const { ref, isSticky } = useSticky({ enabled: sticky });
const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
const { pageviews, uniques, bounces, totaltime } = data || {};
const num = Math.min(data && uniques.value, data && bounces.value);
const { views, visitors, visits, bounces, totaltime } = data || {};
const num = Math.min(data && visitors.value, data && bounces.value);
const diffs = data && {
pageviews: pageviews.value - pageviews.change,
uniques: uniques.value - uniques.change,
views: views.value - views.change,
visitors: visitors.value - visitors.change,
visits: visits.value - visits.change,
bounces: bounces.value - bounces.change,
totaltime: totaltime.value - totaltime.change,
};
@ -39,25 +40,39 @@ export function WebsiteMetricsBar({
})}
>
<MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
{pageviews && uniques && (
{views && visitors && (
<>
<MetricCard
label={formatMessage(labels.views)}
value={pageviews.value}
change={pageviews.change}
value={views.value}
change={views.change}
/>
<MetricCard
label={formatMessage(labels.visitors)}
value={uniques.value}
change={uniques.change}
value={visitors.value}
change={visitors.change}
/>
<MetricCard
label={formatMessage(labels.visits)}
value={visits.value}
change={visits.change}
/>
<MetricCard
label={formatMessage(labels.viewsPerVisit)}
value={visits.value ? views.value / visits.value : 0}
change={
visits.value && visits.change
? views.value / visits.value - diffs.views / diffs.visits
: 0
}
/>
<MetricCard
label={formatMessage(labels.bounceRate)}
value={uniques.value ? (num / uniques.value) * 100 : 0}
value={visitors.value ? (num / visitors.value) * 100 : 0}
change={
uniques.value && uniques.change
? (num / uniques.value) * 100 -
(Math.min(diffs.uniques, diffs.bounces) / diffs.uniques) * 100 || 0
visitors.value && visitors.change
? (num / visitors.value) * 100 -
(Math.min(diffs.visitors, diffs.bounces) / diffs.visitors) * 100 || 0
: 0
}
format={n => Number(n).toFixed(0) + '%'}
@ -66,14 +81,12 @@ export function WebsiteMetricsBar({
<MetricCard
label={formatMessage(labels.averageVisitTime)}
value={
totaltime.value && pageviews.value
? totaltime.value / (pageviews.value - bounces.value)
: 0
totaltime.value && views.value ? totaltime.value / (views.value - bounces.value) : 0
}
change={
totaltime.value && pageviews.value
? (diffs.totaltime / (diffs.pageviews - diffs.bounces) -
totaltime.value / (pageviews.value - bounces.value)) *
totaltime.value && views.value
? (diffs.totaltime / (diffs.views - diffs.bounces) -
totaltime.value / (views.value - bounces.value)) *
-1 || 0
: 0
}

View File

@ -100,6 +100,7 @@ export const labels = defineMessages({
queryParameters: { id: 'label.query-parameters', defaultMessage: 'Query parameters' },
back: { id: 'label.back', defaultMessage: 'Back' },
visitors: { id: 'label.visitors', defaultMessage: 'Visitors' },
visits: { id: 'label.visits', defaultMessage: 'Visits' },
filterCombined: { id: 'label.filter-combined', defaultMessage: 'Combined' },
filterRaw: { id: 'label.filter-raw', defaultMessage: 'Raw' },
views: { id: 'label.views', defaultMessage: 'Views' },
@ -127,6 +128,7 @@ export const labels = defineMessages({
pageViews: { id: 'label.page-views', defaultMessage: 'Page views' },
uniqueVisitors: { id: 'label.unique-visitors', defaultMessage: 'Unique visitors' },
bounceRate: { id: 'label.bounce-rate', defaultMessage: 'Bounce rate' },
viewsPerVisit: { id: 'label.views-per-visit', defaultMessage: 'Views per visit' },
averageVisitTime: { id: 'label.average-visit-time', defaultMessage: 'Average visit time' },
desktop: { id: 'label.desktop', defaultMessage: 'Desktop' },
laptop: { id: 'label.laptop', defaultMessage: 'Laptop' },

View File

@ -12,7 +12,7 @@ export function salt() {
return hash(secret(), ROTATING_SALT);
}
export function sessionSalt() {
export function visitSalt() {
const ROTATING_SALT = hash(startOfHour(new Date()).toUTCString());
return hash(secret(), ROTATING_SALT);

View File

@ -1,4 +1,4 @@
import { isUuid, secret, sessionSalt, uuid } from 'lib/crypto';
import { isUuid, secret, uuid, visitSalt } from 'lib/crypto';
import { getClientInfo } from 'lib/detect';
import { parseToken } from 'next-basics';
import { NextApiRequestCollect } from 'pages/api/send';
@ -68,7 +68,7 @@ export async function findSession(req: NextApiRequestCollect): Promise<{
await getClientInfo(req, payload);
const sessionId = uuid(websiteId, hostname, ip, userAgent);
const visitId = uuid(sessionId, sessionSalt());
const visitId = uuid(sessionId, visitSalt());
// Clickhouse does not require session lookup
if (clickhouse.enabled) {

View File

@ -1,7 +1,7 @@
import ipaddr from 'ipaddr.js';
import { isbot } from 'isbot';
import { COLLECTION_TYPE, HOSTNAME_REGEX, IP_REGEX } from 'lib/constants';
import { secret, sessionSalt, uuid } from 'lib/crypto';
import { secret, visitSalt, uuid } from 'lib/crypto';
import { getIpAddress } from 'lib/detect';
import { useCors, useSession, useValidate } from 'lib/middleware';
import { CollectionType, YupRequest } from 'lib/types';
@ -98,7 +98,7 @@ export default async (req: NextApiRequestCollect, res: NextApiResponse) => {
// expire visitId after 30 minutes
session.visitId =
!!session.iat && Math.floor(new Date().getTime() / 1000) - session.iat > 1800
? uuid(session.id, sessionSalt())
? uuid(session.id, visitSalt())
: session.visitId;
session.iat = Math.floor(new Date().getTime() / 1000);

View File

@ -1,19 +1,27 @@
import prisma from 'lib/prisma';
import clickhouse from 'lib/clickhouse';
import { runQuery, CLICKHOUSE, PRISMA } from 'lib/db';
import { EVENT_TYPE } from 'lib/constants';
import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
import prisma from 'lib/prisma';
import { QueryFilters } from 'lib/types';
export async function getWebsiteStats(...args: [websiteId: string, filters: QueryFilters]) {
export async function getWebsiteStats(
...args: [websiteId: string, filters: QueryFilters]
): Promise<
{ views: number; visitors: number; visits: number; bounces: number; totaltime: number }[]
> {
return runQuery({
[PRISMA]: () => relationalQuery(...args),
[CLICKHOUSE]: () => clickhouseQuery(...args),
});
}
async function relationalQuery(websiteId: string, filters: QueryFilters) {
const { getDateQuery, getAddIntervalQuery, getTimestampDiffQuery, parseFilters, rawQuery } =
prisma;
async function relationalQuery(
websiteId: string,
filters: QueryFilters,
): Promise<
{ views: number; visitors: number; visits: number; bounces: number; totaltime: number }[]
> {
const { getTimestampDiffQuery, parseFilters, rawQuery } = prisma;
const { filterQuery, joinSession, params } = await parseFilters(websiteId, {
...filters,
eventType: EVENT_TYPE.pageView,
@ -22,16 +30,15 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
return rawQuery(
`
select
sum(t.c) as "pageviews",
count(distinct t.session_id) as "uniques",
sum(t.c) as "views",
count(distinct t.session_id) as "visitors",
count(distinct t.visit_id) as "visits",
sum(case when t.c = 1 then 1 else 0 end) as "bounces",
sum(case when t.max_time < ${getAddIntervalQuery('t.min_time', '1 hour')}
then ${getTimestampDiffQuery('t.min_time', 't.max_time')}
else 0 end) as "totaltime"
sum(${getTimestampDiffQuery('t.min_time', 't.max_time')}) as "totaltime"
from (
select
website_event.session_id,
${getDateQuery('website_event.created_at', 'hour')},
website_event.visit_id,
count(*) as "c",
min(website_event.created_at) as "min_time",
max(website_event.created_at) as "max_time"
@ -53,8 +60,10 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
async function clickhouseQuery(
websiteId: string,
filters: QueryFilters,
): Promise<{ pageviews: number; uniques: number; bounces: number; totaltime: number }[]> {
const { rawQuery, getDateQuery, parseFilters } = clickhouse;
): Promise<
{ views: number; visitors: number; visits: number; bounces: number; totaltime: number }[]
> {
const { rawQuery, parseFilters } = clickhouse;
const { filterQuery, params } = await parseFilters(websiteId, {
...filters,
eventType: EVENT_TYPE.pageView,
@ -63,14 +72,15 @@ async function clickhouseQuery(
return rawQuery(
`
select
sum(t.c) as "pageviews",
count(distinct t.session_id) as "uniques",
sum(t.c) as "views",
count(distinct t.session_id) as "visitors",
count(distinct t.visit_id) as "visits",
sum(if(t.c = 1, 1, 0)) as "bounces",
sum(if(max_time < min_time + interval 1 hour, max_time-min_time, 0)) as "totaltime"
sum(max_time-min_time) as "totaltime"
from (
select
session_id,
${getDateQuery('created_at', 'hour')} time_series,
visit_id,
count(*) c,
min(created_at) min_time,
max(created_at) max_time
@ -79,15 +89,16 @@ async function clickhouseQuery(
and created_at between {startDate:DateTime64} and {endDate:DateTime64}
and event_type = {eventType:UInt32}
${filterQuery}
group by session_id, time_series
group by session_id, visit_id
) as t;
`,
params,
).then(a => {
return Object.values(a).map(a => {
return {
pageviews: Number(a.pageviews),
uniques: Number(a.uniques),
views: Number(a.views),
visitors: Number(a.visitors),
visits: Number(a.visits),
bounces: Number(a.bounces),
totaltime: Number(a.totaltime),
};