Merge branch 'dev' into jajaja

# Conflicts:
#	src/app/api/websites/[websiteId]/metrics/route.ts
#	src/queries/sql/getChannelMetrics.ts

package.json

@@ -70,10 +70,10 @@
     ".next/cache"
   ],
   "dependencies": {
-    "@clickhouse/client": "^1.11.2",
+    "@clickhouse/client": "^1.12.0",
     "@date-fns/utc": "^1.2.0",
-    "@dicebear/collection": "^9.2.1",
+    "@dicebear/collection": "^9.2.3",
-    "@dicebear/core": "^9.2.1",
+    "@dicebear/core": "^9.2.3",
     "@fontsource/inter": "^4.5.15",
     "@hello-pangea/dnd": "^17.0.0",
     "@prisma/adapter-pg": "^6.12.0",
@@ -81,11 +81,11 @@
     "@prisma/extension-read-replicas": "^0.4.1",
     "@react-spring/web": "^9.7.3",
     "@svgr/cli": "^8.1.0",
-    "@tanstack/react-query": "^5.80.10",
+    "@tanstack/react-query": "^5.83.0",
-    "@umami/react-zen": "^0.153.0",
+    "@umami/react-zen": "^0.154.0",
     "@umami/redis-client": "^0.27.0",
-    "bcryptjs": "^2.4.3",
+    "bcryptjs": "^3.0.2",
-    "chalk": "^4.1.1",
+    "chalk": "^5.4.1",
     "chart.js": "^4.5.0",
     "chartjs-adapter-date-fns": "^3.0.0",
     "classnames": "^2.3.1",
@@ -104,27 +104,26 @@
     "ipaddr.js": "^2.0.1",
     "is-ci": "^3.0.1",
     "is-docker": "^3.0.0",
-    "is-localhost-ip": "^1.4.0",
+    "is-localhost-ip": "^2.0.0",
     "isbot": "^5.1.16",
     "jsonwebtoken": "^9.0.2",
     "jszip": "^3.10.1",
     "kafkajs": "^2.1.0",
-    "lucide-react": "^0.517.0",
+    "lucide-react": "^0.526.0",
-    "maxmind": "^4.3.27",
+    "maxmind": "^4.3.28",
     "md5": "^2.3.0",
-    "next": "15.4.3",
+    "next": "15.4.4",
     "node-fetch": "^3.2.8",
     "npm-run-all": "^4.1.5",
     "papaparse": "^5.5.3",
-    "prisma": "6.7.0",
     "pg": "^8.16.3",
     "prisma": "6.12.0",
-    "pure-rand": "^6.1.0",
+    "pure-rand": "^7.0.1",
     "react": "^19.0.0",
     "react-basics": "^0.126.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^4.0.4",
-    "react-intl": "^6.5.5",
+    "react-intl": "^7.1.11",
     "react-simple-maps": "^2.3.0",
     "react-use-measure": "^2.0.4",
     "react-window": "^1.8.6",
@@ -133,12 +132,12 @@
     "serialize-error": "^12.0.0",
     "thenby": "^1.3.4",
     "uuid": "^11.1.0",
-    "zod": "^3.25.67",
+    "zod": "^3.25.76",
-    "zustand": "^5.0.5"
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@formatjs/cli": "^4.2.29",
-    "@netlify/plugin-nextjs": "^5.11.3",
+    "@netlify/plugin-nextjs": "^5.11.6",
     "@rollup/plugin-alias": "^5.0.0",
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
@@ -146,25 +145,25 @@
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-terser": "^0.4.4",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.32",
+    "@types/node": "^22.16.5",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "@types/react-window": "^1.8.8",
-    "@typescript-eslint/eslint-plugin": "^8.34.1",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
-    "@typescript-eslint/parser": "^8.34.1",
+    "@typescript-eslint/parser": "^8.38.0",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cross-env": "^7.0.3",
     "cypress": "^13.6.6",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.25.8",
     "eslint": "^8.33.0",
     "eslint-config-next": "^14.2.30",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-css-modules": "^2.12.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^5.5.3",
     "extract-react-intl-messages": "^4.1.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
@@ -173,7 +172,7 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-import": "^15.1.0",
     "postcss-preset-env": "7.8.3",
-    "prettier": "^2.6.2",
+    "prettier": "^3.6.2",
     "prompts": "2.4.2",
     "rollup": "^3.28.0",
     "rollup-plugin-copy": "^3.4.0",
@@ -183,7 +182,7 @@
     "rollup-plugin-node-externals": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "stylelint": "^15.10.1",
-    "stylelint-config-css-modules": "^4.4.0",
+    "stylelint-config-css-modules": "^4.5.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^14.0.0",
     "tar": "^6.1.2",

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

@@ -1,24 +1,14 @@
-import { z } from 'zod';
-import thenby from 'thenby';
 import { canViewWebsite } from '@/lib/auth';
+import { EVENT_COLUMNS, SESSION_COLUMNS } from '@/lib/constants';
+import { getQueryFilters, parseRequest } from '@/lib/request';
+import { badRequest, json, unauthorized } from '@/lib/response';
 import {
-  SESSION_COLUMNS,
+  getChannelMetrics,
-  EVENT_COLUMNS,
-  SEARCH_DOMAINS,
-  SOCIAL_DOMAINS,
-  EMAIL_DOMAINS,
-  SHOPPING_DOMAINS,
-  VIDEO_DOMAINS,
-  PAID_AD_PARAMS,
-} from '@/lib/constants';
-import { parseRequest, getQueryFilters } from '@/lib/request';
-import { json, unauthorized, badRequest } from '@/lib/response';
-import {
   getEventMetrics,
   getPageviewMetrics,
   getSessionMetrics,
-  getChannelMetrics,
 } from '@/queries';
+import { z } from 'zod';
 import { dateRangeParams, filterParams, searchParams } from '@/lib/schema';
 
 export async function GET(
@@ -90,75 +80,8 @@ export async function GET(
   if (type === 'channel') {
     const data = await getChannelMetrics(websiteId, filters);
 
-    const channels = getChannels(data);
+    return json(data);
-
-    return json(
-      Object.keys(channels)
-        .map(key => ({ x: key, y: channels[key] }))
-        .sort(thenby.firstBy('y', -1)),
-    );
   }
 
   return badRequest();
 }
-
-function getChannels(data: { domain: string; query: string; visitors: number }[]) {
-  const channels = {
-    direct: 0,
-    referral: 0,
-    affiliate: 0,
-    email: 0,
-    sms: 0,
-    organicSearch: 0,
-    organicSocial: 0,
-    organicShopping: 0,
-    organicVideo: 0,
-    paidAds: 0,
-    paidSearch: 0,
-    paidSocial: 0,
-    paidShopping: 0,
-    paidVideo: 0,
-  };
-
-  const match = (value: string) => {
-    return (str: string | RegExp) => {
-      return typeof str === 'string' ? value?.includes(str) : (str as RegExp).test(value);
-    };
-  };
-
-  for (const { domain, query, visitors } of data) {
-    if (!domain && !query) {
-      channels.direct += Number(visitors);
-    }
-
-    const prefix = /utm_medium=(.*cp.*|ppc|retargeting|paid.*)/.test(query) ? 'paid' : 'organic';
-
-    if (PAID_AD_PARAMS.some(match(query))) {
-      channels.paidAds += Number(visitors);
-    } else if (/utm_medium=(referral|app|link)/.test(query)) {
-      channels.referral += Number(visitors);
-    } else if (/utm_medium=affiliate/.test(query)) {
-      channels.affiliate += Number(visitors);
-    } else if (/utm_(source|medium)=sms/.test(query)) {
-      channels.sms += Number(visitors);
-    } else if (SEARCH_DOMAINS.some(match(domain)) || /utm_medium=organic/.test(query)) {
-      channels[`${prefix}Search`] += Number(visitors);
-    } else if (
-      SOCIAL_DOMAINS.some(match(domain)) ||
-      /utm_medium=(social|social-network|social-media|sm|social network|social media)/.test(query)
-    ) {
-      channels[`${prefix}Social`] += Number(visitors);
-    } else if (EMAIL_DOMAINS.some(match(domain)) || /utm_medium=(.*e[-_ ]?mail.*)/.test(query)) {
-      channels.email += Number(visitors);
-    } else if (
-      SHOPPING_DOMAINS.some(match(domain)) ||
-      /utm_campaign=(.*(([^a-df-z]|^)shop|shopping).*)/.test(query)
-    ) {
-      channels[`${prefix}Shopping`] += Number(visitors);
-    } else if (VIDEO_DOMAINS.some(match(domain)) || /utm_medium=(.*video.*)/.test(query)) {
-      channels[`${prefix}Video`] += Number(visitors);
-    }
-  }
-
-  return channels;
-}

src/components/metrics/EventsChart.tsx

@@ -55,7 +55,7 @@ export function EventsChart({ websiteId, focusLabel }: EventsChartProps) {
   }, [focusLabel]);
 
   return (
-    <LoadingPanel isLoading={isLoading} error={error}>
+    <LoadingPanel isLoading={isLoading} error={error} minHeight="400px">
       {chartData && (
         <BarChart
           chartData={chartData}

src/queries/sql/getChannelMetrics.ts

@@ -1,6 +1,15 @@
-import prisma from '@/lib/prisma';
 import clickhouse from '@/lib/clickhouse';
-import { runQuery, CLICKHOUSE, PRISMA } from '@/lib/db';
+import {
+  EMAIL_DOMAINS,
+  EVENT_TYPE,
+  PAID_AD_PARAMS,
+  SEARCH_DOMAINS,
+  SHOPPING_DOMAINS,
+  SOCIAL_DOMAINS,
+  VIDEO_DOMAINS,
+} from '@/lib/constants';
+import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
+import prisma from '@/lib/prisma';
 import { QueryFilters } from '@/lib/types';
 
 export async function getChannelMetrics(...args: [websiteId: string, filters?: QueryFilters]) {
@@ -12,7 +21,11 @@ export async function getChannelMetrics(...args: [websiteId: string, filters?: Q
 
 async function relationalQuery(websiteId: string, filters: QueryFilters) {
   const { rawQuery, parseFilters } = prisma;
-  const { queryParams, filterQuery, cohortQuery, dateQuery } = parseFilters(filters);
+  const { queryParams, filterQuery, cohortQuery, dateQuery } = parseFilters({
+    ...filters,
+    websiteId,
+    eventType: EVENT_TYPE.pageView,
+  });
 
   return rawQuery(
     `
@@ -37,21 +50,59 @@ async function clickhouseQuery(
   filters: QueryFilters,
 ): Promise<{ x: string; y: number }[]> {
   const { rawQuery, parseFilters } = clickhouse;
-  const { queryParams, filterQuery, cohortQuery, dateQuery } = parseFilters(filters);
+  const { queryParams, filterQuery, cohortQuery, dateQuery } = parseFilters({
+    ...filters,
+    websiteId,
+    eventType: EVENT_TYPE.pageView,
+  });
 
   const sql = `
-    select
+    WITH channels as (
-      referrer_domain as domain,
+      select case when multiSearchAny(utm_medium, ['cp', 'ppc', 'retargeting', 'paid']) != 0 then 'paid' else 'organic' end prefix,
-      url_query as query,
+          case
-      uniq(session_id) as visitors
+          when referrer_domain = '' and url_query = '' then 'direct'
-    from website_event
+          when multiSearchAny(url_query, [${toClickHouseStringArray(
-    ${cohortQuery}
+            PAID_AD_PARAMS,
-    where website_id = {websiteId:UUID}
+          )}]) != 0 then 'paidAds'
-    ${filterQuery}
+          when multiSearchAny(utm_medium, ['referral', 'app','link']) != 0 then 'referral'
-    ${dateQuery}
+          when position(utm_medium, 'affiliate') > 0 then 'affiliate'
-    group by 1, 2
+          when position(utm_medium, 'sms') > 0 or position(utm_source, 'sms') > 0 then 'sms'
-    order by visitors desc
+          when multiSearchAny(referrer_domain, [${toClickHouseStringArray(
+            SEARCH_DOMAINS,
+          )}]) != 0 or position(utm_medium, 'organic') > 0 then concat(prefix, 'Search')
+          when multiSearchAny(referrer_domain, [${toClickHouseStringArray(
+            SOCIAL_DOMAINS,
+          )}]) != 0 then concat(prefix, 'Social')
+          when multiSearchAny(referrer_domain, [${toClickHouseStringArray(
+            EMAIL_DOMAINS,
+          )}]) != 0 or position(utm_medium, 'mail') > 0 then 'email'
+          when multiSearchAny(referrer_domain, [${toClickHouseStringArray(
+            SHOPPING_DOMAINS,
+          )}]) != 0 or position(utm_medium, 'shop') > 0 then concat(prefix, 'Shopping')
+          when multiSearchAny(referrer_domain, [${toClickHouseStringArray(
+            VIDEO_DOMAINS,
+          )}]) != 0 or position(utm_medium, 'video') > 0 then concat(prefix, 'Video')
+          else '' end AS x,
+        count(distinct session_id) y
+      from website_event
+      ${cohortQuery}
+      where website_id = {websiteId:UUID}
+        and event_type = {eventType:UInt32}
+        ${dateQuery}
+        ${filterQuery}
+      group by 1, 2
+      order by y desc)
+
+    select x, sum(y) y
+    from channels
+    where x != ''
+    group by x
+    order by y desc;
   `;
 
   return rawQuery(sql, queryParams);
 }
+
+function toClickHouseStringArray(arr: string[]): string {
+  return arr.map(p => `'${p.replace(/'/g, "\\'")}'`).join(', ');
+}