add sessionstats query for performance, countries, events values

src/app/(main)/websites/[websiteId]/events/EventsMetricsBar.tsx

@@ -1,14 +1,14 @@
-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 useWebsiteSessionStats from 'components/hooks/queries/useWebsiteSessionStats';
+import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
+import MetricCard from 'components/metrics/MetricCard';
+import MetricsBar from 'components/metrics/MetricsBar';
 import { formatLongNumber } from 'lib/format';
+import { Flexbox } from 'react-basics';
 
 export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
 
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>
@@ -28,6 +28,11 @@ export function EventsMetricsBar({ websiteId }: { websiteId: string }) {
           label={formatMessage(labels.views)}
           formatValue={formatLongNumber}
         />
+        <MetricCard
+          value={data?.events?.value}
+          label={formatMessage(labels.events)}
+          formatValue={formatLongNumber}
+        />
       </MetricsBar>
       <WebsiteDateFilter websiteId={websiteId} />
     </Flexbox>

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

@@ -1,14 +1,14 @@
-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 useWebsiteSessionStats from 'components/hooks/queries/useWebsiteSessionStats';
+import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
+import MetricCard from 'components/metrics/MetricCard';
+import MetricsBar from 'components/metrics/MetricsBar';
 import { formatLongNumber } from 'lib/format';
+import { Flexbox } from 'react-basics';
 
 export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useWebsiteStats(websiteId);
+  const { data, isLoading, isFetched, error } = useWebsiteSessionStats(websiteId);
 
   return (
     <Flexbox direction="row" justifyContent="space-between" style={{ minHeight: 120 }}>

src/components/hooks/queries/useWebsiteSessionStats.ts

@@ -0,0 +1,16 @@
+import { useApi } from './useApi';
+import { useFilterParams } from '../useFilterParams';
+
+export function useWebsiteSessionStats(websiteId: string, options?: { [key: string]: string }) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['sessions:stats', { websiteId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/sessions/stats`, { ...params }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}
+
+export default useWebsiteSessionStats;

src/pages/api/websites/[websiteId]/sessions/stats.ts

@@ -0,0 +1,84 @@
+import { canViewWebsite } from 'lib/auth';
+import { useAuth, useCors, useValidate } from 'lib/middleware';
+import { getRequestDateRange, getRequestFilters } from 'lib/request';
+import { NextApiRequestQueryBody, WebsiteStats } from 'lib/types';
+import { NextApiResponse } from 'next';
+import { methodNotAllowed, ok, unauthorized } from 'next-basics';
+import { getWebsiteSessionStats } from 'queries/analytics/sessions/getWebsiteSessionStats';
+import * as yup from 'yup';
+
+export interface WebsiteSessionStatsRequestQuery {
+  websiteId: string;
+  startAt: number;
+  endAt: number;
+  url?: string;
+  referrer?: string;
+  title?: string;
+  query?: string;
+  event?: string;
+  host?: string;
+  os?: string;
+  browser?: string;
+  device?: string;
+  country?: string;
+  region?: string;
+  city?: string;
+}
+
+const schema = {
+  GET: yup.object().shape({
+    websiteId: yup.string().uuid().required(),
+    startAt: yup.number().required(),
+    endAt: yup.number().required(),
+    url: yup.string(),
+    referrer: yup.string(),
+    title: yup.string(),
+    query: yup.string(),
+    event: yup.string(),
+    host: yup.string(),
+    os: yup.string(),
+    browser: yup.string(),
+    device: yup.string(),
+    country: yup.string(),
+    region: yup.string(),
+    city: yup.string(),
+  }),
+};
+
+export default async (
+  req: NextApiRequestQueryBody<WebsiteSessionStatsRequestQuery>,
+  res: NextApiResponse<WebsiteStats>,
+) => {
+  await useCors(req, res);
+  await useAuth(req, res);
+  await useValidate(schema, req, res);
+
+  const { websiteId } = req.query;
+
+  if (req.method === 'GET') {
+    if (!(await canViewWebsite(req.auth, websiteId))) {
+      return unauthorized(res);
+    }
+
+    const { startDate, endDate } = await getRequestDateRange(req);
+
+    const filters = getRequestFilters(req);
+
+    const metrics = await getWebsiteSessionStats(websiteId, {
+      ...filters,
+      startDate,
+      endDate,
+    });
+
+    const stats = Object.keys(metrics[0]).reduce((obj, key) => {
+      obj[key] = {
+        value: Number(metrics[0][key]) || 0,
+      };
+      return obj;
+    }, {});
+
+    return ok(res, stats);
+  }
+
+  return methodNotAllowed(res);
+};

src/queries/analytics/getWebsiteStats.ts

@@ -1,4 +1,5 @@
 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';
@@ -24,6 +25,7 @@ async function relationalQuery(
   const { getTimestampDiffSQL, parseFilters, rawQuery } = prisma;
   const { filterQuery, joinSession, params } = await parseFilters(websiteId, {
     ...filters,
+    eventType: EVENT_TYPE.pageView,
   });
 
   return rawQuery(
@@ -32,14 +34,12 @@ async function relationalQuery(
       sum(t.c) as "pageviews",
       count(distinct t.session_id) as "visitors",
       count(distinct t.visit_id) as "visits",
-      count(distinct t.country) as "countries",
       sum(case when t.c = 1 then 1 else 0 end) as "bounces",
-      sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime",
+      sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime"
     from (
       select
         website_event.session_id,
         website_event.visit_id,
-        session.country,
         count(*) as "c",
         min(website_event.created_at) as "min_time",
         max(website_event.created_at) as "max_time"
@@ -47,8 +47,9 @@ 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
     ) as t
     `,
     params,
@@ -64,6 +65,7 @@ async function clickhouseQuery(
   const { rawQuery, parseFilters } = clickhouse;
   const { filterQuery, params } = await parseFilters(websiteId, {
     ...filters,
+    eventType: EVENT_TYPE.pageView,
   });
 
   let sql = '';
@@ -74,22 +76,21 @@ async function clickhouseQuery(
       sum(t.c) as "pageviews",
       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.c = 1) as "bounces",
       sum(max_time-min_time) as "totaltime"
     from (
       select
         session_id,
         visit_id,
-        country,
         count(*) c,
         min(created_at) min_time,
         max(created_at) max_time
       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
     ) as t;
     `;
   } else {
@@ -98,22 +99,20 @@ async function clickhouseQuery(
       sum(t.c) as "pageviews",
       uniq(session_id) as "visitors",
       uniq(visit_id) as "visits",
-      uniq(country) as "countries",
       sumIf(1, t.c = 1) as "bounces",
       sum(max_time-min_time) as "totaltime"
-    from (
+    from (select
-      select
+            session_id,
-          session_id,
+            visit_id,
-          visit_id,
+            sum(views) c,
-          country,
+            min(min_time) min_time,
-          sum(views) c,
+            max(max_time) max_time
-          min(min_time) min_time,
+        from umami.website_event_stats_hourly "website_event"
-          max(max_time) max_time
+    where website_id = {websiteId:UUID}
-      from umami.website_event_stats_hourly "website_event"
+      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-      where website_id = {websiteId:UUID}
+      and event_type = {eventType:UInt32}
-        and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+      ${filterQuery}
-        ${filterQuery}
+      group by session_id, visit_id
-      group by session_id, visit_id, country
     ) as t;
     `;
   }
@@ -126,8 +125,6 @@ async function clickhouseQuery(
         visits: Number(a.visits),
         bounces: Number(a.bounces),
         totaltime: Number(a.totaltime),
-        countries: Number(a.countries),
-        events: Number(a.events),
       };
     });
   });

src/queries/analytics/sessions/getWebsiteSessionStats.ts

@@ -0,0 +1,82 @@
+import clickhouse from 'lib/clickhouse';
+import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
+import prisma from 'lib/prisma';
+import { QueryFilters } from 'lib/types';
+
+export async function getWebsiteSessionStats(
+  ...args: [websiteId: string, filters: QueryFilters]
+): Promise<
+  { pageviews: number; visitors: number; visits: number; countries: number; events: number }[]
+> {
+  return runQuery({
+    [PRISMA]: () => relationalQuery(...args),
+    [CLICKHOUSE]: () => clickhouseQuery(...args),
+  });
+}
+
+async function relationalQuery(
+  websiteId: string,
+  filters: QueryFilters,
+): Promise<
+  { pageviews: number; visitors: number; visits: number; countries: number; events: number }[]
+> {
+  const { parseFilters, rawQuery } = prisma;
+  const { filterQuery, params } = await parseFilters(websiteId, {
+    ...filters,
+  });
+
+  return rawQuery(
+    `
+    select
+      count(*) as "pageviews",
+      count(distinct t.session_id) as "visitors",
+      count(distinct t.visit_id) as "visits",
+      count(distinct t.country) as "countries",
+      sum(case when event_type = 2 then 1 else 0 end) as "events"
+    from website_event
+    join session on website_event.session_id = session.session_id
+    where website_event.website_id = {{websiteId::uuid}}
+      and website_event.created_at between {{startDate}} and {{endDate}}
+      ${filterQuery}
+    `,
+    params,
+  );
+}
+
+async function clickhouseQuery(
+  websiteId: string,
+  filters: QueryFilters,
+): Promise<
+  { pageviews: number; visitors: number; visits: number; countries: number; events: number }[]
+> {
+  const { rawQuery, parseFilters } = clickhouse;
+  const { filterQuery, params } = await parseFilters(websiteId, {
+    ...filters,
+  });
+
+  return rawQuery(
+    `
+    select
+      sum(views) as "pageviews",
+      uniq(session_id) as "visitors",
+      uniq(visit_id) as "visits",
+      uniq(country) as "countries",
+      sum(length(event_name)) as "events"
+    from umami.website_event_stats_hourly "website_event"
+    where website_id = {websiteId:UUID}
+        and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+        ${filterQuery}
+    `,
+    params,
+  ).then(result => {
+    return Object.values(result).map((a: any) => {
+      return {
+        pageviews: Number(a.pageviews),
+        visitors: Number(a.visitors),
+        visits: Number(a.visits),
+        countries: Number(a.countries),
+        events: Number(a.events),
+      };
+    });
+  });
+}