Added channel labels.

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

@@ -157,17 +157,17 @@ function getChannels(data: { domain: string; query: string; visitors: number }[]
     direct: 0,
     referral: 0,
     affiliate: 0,
+    email: 0,
     sms: 0,
-    organic_search: 0,
-    organic_social: 0,
-    organic_email: 0,
-    organic_shopping: 0,
-    organic_video: 0,
-    paid_ads: 0,
-    paid_search: 0,
-    paid_social: 0,
-    paid_shopping: 0,
-    paid_video: 0,
+    organicSearch: 0,
+    organicSocial: 0,
+    organicShopping: 0,
+    organicVideo: 0,
+    paidAds: 0,
+    paidSearch: 0,
+    paidSocial: 0,
+    paidShopping: 0,
+    paidVideo: 0,
   };
 
   const match = (value: string) => {
@@ -184,23 +184,23 @@ function getChannels(data: { domain: string; query: string; visitors: number }[]
     const prefix = /utm_medium=(.*cp.*|ppc|retargeting|paid.*)/.test(query) ? 'paid' : 'organic';
 
     if (SEARCH_DOMAINS.some(match(domain)) || /utm_medium=organic/.test(query)) {
-      channels[`${prefix}_search`] += visitors;
+      channels[`${prefix}Search`] += 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`] += visitors;
+      channels[`${prefix}Social`] += visitors;
     } else if (EMAIL_DOMAINS.some(match(domain)) || /utm_medium=(.*e[-_ ]?mail.*)/.test(query)) {
-      channels.organic_email += visitors;
+      channels.email += visitors;
     } else if (
       SHOPPING_DOMAINS.some(match(domain)) ||
       /utm_campaign=(.*(([^a-df-z]|^)shop|shopping).*)/.test(query)
     ) {
-      channels[`${prefix}_shopping`] += visitors;
+      channels[`${prefix}Shopping`] += visitors;
     } else if (VIDEO_DOMAINS.some(match(domain)) || /utm_medium=(.*video.*)/.test(query)) {
-      channels[`${prefix}_video`] += visitors;
+      channels[`${prefix}Video`] += visitors;
     } else if (PAID_AD_PARAMS.some(match(query))) {
-      channels.paid_ads += visitors;
+      channels.paidAds += visitors;
     } else if (/utm_medium=(referral|app|link)/.test(query)) {
       channels.referral += visitors;
     } else if (/utm_medium=affiliate/.test(query)) {

src/components/messages.ts

@@ -281,6 +281,20 @@ export const labels = defineMessages({
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
   channels: { id: 'label.channels', defaultMessage: 'Channels' },
+  direct: { id: 'label.direct', defaultMessage: 'Direct' },
+  referral: { id: 'label.referral', defaultMessage: 'Referral' },
+  affiliate: { id: 'label.affiliate', defaultMessage: 'Affiliate' },
+  email: { id: 'label.email', defaultMessage: 'Email' },
+  sms: { id: 'label.sms', defaultMessage: 'SMS' },
+  organicSearch: { id: 'label.organic-search', defaultMessage: 'Organic search' },
+  organicSocial: { id: 'label.organic-social', defaultMessage: 'Organic social' },
+  organicShopping: { id: 'label.organic-shopping', defaultMessage: 'Organic shopping' },
+  organicVideo: { id: 'label.organic-video', defaultMessage: 'Organic video' },
+  paidAds: { id: 'label.paid-ads', defaultMessage: 'Paid ads' },
+  paidSearch: { id: 'label.paid-search', defaultMessage: 'Paid search' },
+  paidSocial: { id: 'label.paid-social', defaultMessage: 'Paid social' },
+  paidShopping: { id: 'label.paid-shopping', defaultMessage: 'Paid shopping' },
+  paidVideo: { id: 'label.paid-video', defaultMessage: 'Paid video' },
 });
 
 export const messages = defineMessages({

src/components/metrics/ChannelsTable.tsx

@@ -4,11 +4,16 @@ import { useMessages } from '@/components/hooks';
 export function BrowsersTable(props: MetricsTableProps) {
   const { formatMessage, labels } = useMessages();
 
+  const renderLabel = ({ x }) => {
+    return formatMessage(labels[x]);
+  };
+
   return (
     <MetricsTable
       {...props}
       title={formatMessage(labels.channels)}
       type="channel"
+      renderLabel={renderLabel}
       metric={formatMessage(labels.visitors)}
     />
   );

src/queries/sql/getChannelMetrics.ts

@@ -17,9 +17,9 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
   return rawQuery(
     `
     select
-        referrer_domain as domain,
-    referrer_query as query,
-    count(*) as visitors
+      referrer_domain as domain,
+      referrer_query as query,
+      count(distinct session_id) as visitors
     from website_event
     where website_id = {websiteId:UUID}
         ${filterQuery}