update UTM report to use new UTM columns

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 }) => {
+            const total = items.reduce((sum, { views }) => {
-              return +sum + +value;
+              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 }) => ({
+                      data={items.map(({ utm, views }) => ({
-                        x: name,
+                        x: utm,
-                        y: value,
+                        y: views,
-                        z: (value / total) * 100,
+                        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/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/queries/sql/reports/getUTM.ts

@@ -4,6 +4,7 @@ import prisma from '@/lib/prisma';
 import { QueryFilters } from '@/lib/types';
 
 export interface UTMParameters {
+  column: string;
   startDate: Date;
   endDate: Date;
 }
@@ -22,10 +23,10 @@ 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,
@@ -34,14 +35,16 @@ async function relationalQuery(
 
   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 coalesce(${column}, '') != ''
       and event_type = 1
       ${filterQuery}
     group by 1
+    order by 2 desc
     `,
     queryParams,
   );
@@ -52,9 +55,9 @@ 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,
@@ -63,14 +66,16 @@ async function clickhouseQuery(
 
   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 ${column} != ''
       and event_type = 1
       ${filterQuery}
     group by 1
+    order by 2 desc
     `,
     queryParams,
   );