Merge branch 'dev' of https://github.com/umami-software/umami into dev

db/clickhouse/schema.sql

@@ -57,7 +57,7 @@ CREATE TABLE umami.event_data
     event_name String,
     data_key String,
     string_value Nullable(String),
-    number_value Nullable(Decimal64(22, 4)),
+    number_value Nullable(Decimal(22, 4)),
     date_value Nullable(DateTime('UTC')),
     data_type UInt32,
     created_at DateTime('UTC'),
@@ -73,7 +73,7 @@ CREATE TABLE umami.session_data
     session_id UUID,
     data_key String,
     string_value Nullable(String),
-    number_value Nullable(Decimal64(22, 4)),
+    number_value Nullable(Decimal(22, 4)),
     date_value Nullable(DateTime('UTC')),
     data_type UInt32,
     distinct_id String,

src/app/(main)/websites/[websiteId]/(reports)/utm/UTM.tsx

@@ -1,12 +1,10 @@
-import { Grid, Column, Heading, Text } from '@umami/react-zen';
-import { firstBy } from 'thenby';
-import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
-import { useResultQuery } from '@/components/hooks';
 import { PieChart } from '@/components/charts/PieChart';
-import { ListTable } from '@/components/metrics/ListTable';
-import { useMessages } from '@/components/hooks';
-import { Panel } from '@/components/common/Panel';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
+import { Panel } from '@/components/common/Panel';
+import { useMessages, useResultQuery } from '@/components/hooks';
+import { ListTable } from '@/components/metrics/ListTable';
+import { CHART_COLORS, UTM_PARAMS } from '@/lib/constants';
+import { Column, Grid, Heading, Text } from '@umami/react-zen';
 
 export interface UTMProps {
   websiteId: string;
@@ -27,19 +25,19 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
       {data && (
         <Column gap>
           {UTM_PARAMS.map(param => {
-            const items = toArray(data?.[param]);
+            const items = data?.[param];
             const chartData = {
-              labels: items.map(({ name }) => name),
+              labels: items.map(({ utm }) => utm),
               datasets: [
                 {
-                  data: items.map(({ value }) => value),
+                  data: items.map(({ views }) => views),
                   backgroundColor: CHART_COLORS,
                   borderWidth: 0,
                 },
               ],
             };
-            const total = items.reduce((sum, { value }) => {
-              return +sum + +value;
+            const total = items.reduce((sum, { views }) => {
+              return +sum + +views;
             }, 0);
 
             return (
@@ -51,10 +49,10 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
                     </Heading>
                     <ListTable
                       metric={formatMessage(labels.views)}
-                      data={items.map(({ name, value }) => ({
-                        x: name,
-                        y: value,
-                        z: (value / total) * 100,
+                      data={items.map(({ utm, views }) => ({
+                        x: utm,
+                        y: views,
+                        z: (views / total) * 100,
                       }))}
                     />
                   </Column>
@@ -70,11 +68,3 @@ export function UTM({ websiteId, startDate, endDate }: UTMProps) {
     </LoadingPanel>
   );
 }
-
-function toArray(data: Record<string, number> = {}) {
-  return Object.keys(data)
-    .map(key => {
-      return { name: key, value: data[key] };
-    })
-    .sort(firstBy('value', -1));
-}

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

@@ -10,7 +10,7 @@ export function WebsiteLayout({ websiteId, children }: { websiteId: string; chil
   return (
     <WebsiteProvider websiteId={websiteId}>
       <Grid columns="auto 1fr" width="100%" height="100%">
-        <Column height="100%" border="right" backgroundColor>
+        <Column height="100%" border="right" backgroundColor marginRight="2">
           <WebsiteNav websiteId={websiteId} />
         </Column>
         <PageBody gap>

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

@@ -36,7 +36,7 @@ export function EventProperties({ websiteId }: { websiteId: string }) {
       gap="6"
     >
       {data && (
-        <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" gap>
+        <Grid columns="repeat(auto-fill, minmax(300px, 1fr))" marginBottom="3" gap>
           <Select
             label={formatMessage(labels.event)}
             value={eventName}

src/app/api/reports/utm/route.ts

@@ -3,6 +3,7 @@ import { unauthorized, json } from '@/lib/response';
 import { getQueryFilters, parseRequest, setWebsiteDate } from '@/lib/request';
 import { getUTM, UTMParameters } from '@/queries';
 import { reportResultSchema } from '@/lib/schema';
+import { UTM_PARAMS } from '@/lib/constants';
 
 export async function POST(request: Request) {
   const { auth, body, error } = await parseRequest(request, reportResultSchema);
@@ -20,7 +21,17 @@ export async function POST(request: Request) {
   const filters = await getQueryFilters(body.filters, websiteId);
   const parameters = await setWebsiteDate(websiteId, body.parameters);
 
-  const data = await getUTM(websiteId, parameters as UTMParameters, filters);
+  const data = {
+    utm_source: [],
+    utm_medium: [],
+    utm_campaign: [],
+    utm_term: [],
+    utm_content: [],
+  };
+
+  for (const key of UTM_PARAMS) {
+    data[key] = await getUTM(websiteId, { column: key, ...parameters } as UTMParameters, filters);
+  }
 
   return json(data);
 }

src/app/api/websites/[websiteId]/metrics/expanded/route.ts

@@ -62,7 +62,7 @@ export async function GET(
   }
 
   if (type === 'channel') {
-    const data = await getChannelExpandedMetrics(websiteId, { limit, offset }, filters);
+    const data = await getChannelExpandedMetrics(websiteId, filters);
 
     return json(data);
   }

src/queries/sql/events/getEventMetrics.ts

@@ -58,7 +58,7 @@ async function relationalQuery(
     limit ${limit}
     offset ${offset}
     `,
-    queryParams,
+    { ...queryParams, ...parameters },
   );
 }
 
@@ -80,15 +80,15 @@ async function clickhouseQuery(
     `select ${column} x,
             count(*) as y
      from website_event
-              ${cohortQuery}
+      ${cohortQuery}
      where website_id = {websiteId:UUID}
-       and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-         ${filterQuery}
+        and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+        ${filterQuery}
      group by x
      order by y desc
          limit ${limit}
      offset ${offset}
     `,
-    queryParams,
+    { ...queryParams, ...parameters },
   );
 }

src/queries/sql/getChannelExpandedMetrics.ts

@@ -27,7 +27,7 @@ export interface ChannelExpandedMetricsData {
 }
 
 export async function getChannelExpandedMetrics(
-  ...args: [websiteId: string, parameters: ChannelExpandedMetricsParameters, filters?: QueryFilters]
+  ...args: [websiteId: string, filters?: QueryFilters]
 ): Promise<ChannelExpandedMetricsData[]> {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
@@ -37,7 +37,6 @@ export async function getChannelExpandedMetrics(
 
 async function relationalQuery(
   websiteId: string,
-  parameters: ChannelExpandedMetricsParameters,
   filters: QueryFilters,
 ): Promise<ChannelExpandedMetricsData[]> {
   const { rawQuery, parseFilters } = prisma;
@@ -79,16 +78,14 @@ async function relationalQuery(
     group by x
     order by y desc;
     `,
-    { ...queryParams, ...parameters },
+    queryParams,
   );
 }
 
 async function clickhouseQuery(
   websiteId: string,
-  parameters: ChannelExpandedMetricsParameters,
   filters: QueryFilters,
 ): Promise<ChannelExpandedMetricsData[]> {
-  const { limit = 500, offset = 0 } = parameters;
   const { rawQuery, parseFilters } = clickhouse;
   const { queryParams, filterQuery, cohortQuery } = parseFilters({
     ...filters,
@@ -145,11 +142,9 @@ async function clickhouseQuery(
       group by prefix, name, session_id, visit_id
     ) as t
     group by name 
-    order by visitors desc, visits desc
-    limit ${limit}
-    offset ${offset}
+    order by visitors desc, visits desc;
     `,
-    { ...queryParams, ...parameters },
+    queryParams,
   );
 }
 

src/queries/sql/pageviews/getPageviewMetrics.ts

@@ -86,7 +86,7 @@ async function relationalQuery(
     limit ${limit}
     offset ${offset}
     `,
-    queryParams,
+    { ...queryParams, ...parameters },
   );
 }
 
@@ -184,5 +184,5 @@ async function clickhouseQuery(
     `;
   }
 
-  return rawQuery(sql, queryParams);
+  return rawQuery(sql, { ...queryParams, ...parameters });
 }

src/queries/sql/reports/getUTM.ts

@@ -1,9 +1,11 @@
 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';
 
 export interface UTMParameters {
+  column: string;
   startDate: Date;
   endDate: Date;
 }
@@ -22,26 +24,28 @@ async function relationalQuery(
   parameters: UTMParameters,
   filters: QueryFilters,
 ) {
-  const { startDate, endDate } = parameters;
+  const { column, startDate, endDate } = parameters;
   const { parseFilters, rawQuery } = prisma;
 
-  const { filterQuery, queryParams } = parseFilters({
+  const { filterQuery, cohortQuery, queryParams } = parseFilters({
     ...filters,
     websiteId,
     startDate,
     endDate,
+    eventType: EVENT_TYPE.pageView,
   });
 
   return rawQuery(
     `
-    select url_query, count(*) as "num"
+    select ${column} utm, count(*) as views
     from website_event
+    ${cohortQuery}
     where website_id = {{websiteId::uuid}}
       and created_at between {{startDate}} and {{endDate}}
-      and coalesce(url_query, '') != ''
-      and event_type = 1
+      and coalesce(${column}, '') != ''
       ${filterQuery}
     group by 1
+    order by 2 desc
     `,
     queryParams,
   );
@@ -52,25 +56,27 @@ async function clickhouseQuery(
   parameters: UTMParameters,
   filters: QueryFilters,
 ) {
-  const { startDate, endDate } = parameters;
+  const { column, startDate, endDate } = parameters;
   const { parseFilters, rawQuery } = clickhouse;
-  const { filterQuery, queryParams } = parseFilters({
+  const { filterQuery, cohortQuery, queryParams } = parseFilters({
     ...filters,
     websiteId,
     startDate,
     endDate,
+    eventType: EVENT_TYPE.pageView,
   });
 
   return rawQuery(
     `
-    select url_query, count(*) as "num"
+    select ${column} utm, count(*) as views
     from website_event
+    ${cohortQuery}
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-      and url_query != ''
-      and event_type = 1
+      and ${column} != ''
       ${filterQuery}
     group by 1
+    order by 2 desc
     `,
     queryParams,
   );

src/queries/sql/sessions/getSessionStats.ts

@@ -81,6 +81,7 @@ async function clickhouseQuery(
         ${getDateSQL('website_event.created_at', unit, timezone)} as t,
         uniq(session_id) as y
       from website_event_stats_hourly as website_event
+      ${cohortQuery}
       where website_id = {websiteId:UUID}
         and created_at between {startDate:DateTime64} and {endDate:DateTime64}
         ${filterQuery}