Updated filter processing logic.

components/metrics/BrowsersTable.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
-import MetricsTable from './MetricsTable';
-import { browserFilter } from 'lib/filters';
-import FilterLink from '../common/FilterLink';
+import FilterLink from 'components/common/FilterLink';
+import MetricsTable from 'components/metrics/MetricsTable';
+import { BROWSERS } from 'lib/constants';
 
 export default function BrowsersTable({ websiteId, ...props }) {
   function renderLink({ x: browser }) {
-    return <FilterLink id="browser" value={browser} />;
+    return <FilterLink id="browser" value={browser} label={BROWSERS[browser] || browser} />;
   }
 
   return (
@@ -16,7 +16,6 @@ export default function BrowsersTable({ websiteId, ...props }) {
       type="browser"
       metric={<FormattedMessage id="metrics.visitors" defaultMessage="Visitors" />}
       websiteId={websiteId}
-      dataFilter={browserFilter}
       renderLabel={renderLink}
     />
   );

lib/filters.js

@@ -1,4 +1,3 @@
-import { BROWSERS } from './constants';
 import { removeTrailingSlash, removeWWW, getDomainName } from './url';
 
 export const urlFilter = (data, { raw }) => {
@@ -113,8 +112,6 @@ export const refFilter = (data, { domain, domainOnly, raw }) => {
   return Object.keys(map).map(key => ({ x: key, y: map[key], w: links[key] }));
 };
 
-export const browserFilter = data => data.map(({ x, y }) => ({ x: BROWSERS[x] ?? x, y }));
-
 export const eventTypeFilter = (data, types) => {
   if (!types || types.length === 0) {
     return data;

lib/queries.js

@@ -109,6 +109,28 @@ export function getFilterQuery(table, filters = {}, params = []) {
   return query.join('\n');
 }
 
+export function parseFilters(table, filters = {}, params = []) {
+  const { domain, url, referrer, os, browser, device, country, event_type } = filters;
+
+  const pageviewFilters = { domain, url, referrer };
+  const sessionFilters = { os, browser, device, country };
+  const eventFilters = { event_type };
+
+  return {
+    pageviewFilters,
+    sessionFilters,
+    eventFilters,
+    event: { event_type },
+    joinSession:
+      os || browser || device || country
+        ? `inner join session on ${table}.session_id = session.session_id`
+        : '',
+    pageviewQuery: getFilterQuery('pageview', pageviewFilters, params),
+    sessionQuery: getFilterQuery('session', sessionFilters, params),
+    eventQuery: getFilterQuery('event', eventFilters, params),
+  };
+}
+
 export async function runQuery(query) {
   return query.catch(e => {
     throw e;
@@ -399,12 +421,7 @@ export async function getEvents(websites, start_at) {
 
 export function getWebsiteStats(website_id, start_at, end_at, filters = {}) {
   const params = [website_id, start_at, end_at];
-  const { url, referrer, os, browser, device, country } = filters;
-
-  const joinSession =
-    os || browser || device || country
-      ? 'inner join session on session.session_id = pageview.session_id'
-      : '';
+  const { pageviewQuery, sessionQuery, joinSession } = parseFilters('pageview', filters, params);
 
   return rawQuery(
     `
@@ -421,8 +438,8 @@ export function getWebsiteStats(website_id, start_at, end_at, filters = {}) {
            ${joinSession}
          where pageview.website_id=$1
          and pageview.created_at between $2 and $3
-         ${getFilterQuery('pageview', { url, referrer }, params)}
-         ${getFilterQuery('session', { os, browser, device, country }, params)}
+         ${pageviewQuery}
+         ${sessionQuery}
          group by 1, 2
      ) t
     `,
@@ -440,11 +457,7 @@ export function getPageviewStats(
   filters = {},
 ) {
   const params = [website_id, start_at, end_at];
-  const { url, referrer, os, browser, device, country } = filters;
-  const joinSession =
-    os || browser || device || country
-      ? 'inner join session on session.session_id = pageview.session_id'
-      : '';
+  const { pageviewQuery, sessionQuery, joinSession } = parseFilters('pageview', filters, params);
 
   return rawQuery(
     `
@@ -454,8 +467,8 @@ export function getPageviewStats(
       ${joinSession}
     where pageview.website_id=$1
     and pageview.created_at between $2 and $3
-    ${getFilterQuery('pageview', { url, referrer }, params)}
-    ${getFilterQuery('session', { os, browser, device, country }, params)}
+    ${pageviewQuery}
+    ${sessionQuery}
     group by 1
     order by 1
     `,
@@ -465,11 +478,7 @@ export function getPageviewStats(
 
 export function getSessionMetrics(website_id, start_at, end_at, field, filters = {}) {
   const params = [website_id, start_at, end_at];
-  const { url, referrer, os, browser, device, country } = filters;
-  const joinSession =
-    os || browser || device || country
-      ? 'inner join session on session.session_id = pageview.session_id'
-      : '';
+  const { pageviewQuery, sessionQuery, joinSession } = parseFilters('pageview', filters, params);
 
   return rawQuery(
     `
@@ -481,8 +490,8 @@ export function getSessionMetrics(website_id, start_at, end_at, field, filters =
         ${joinSession}
       where pageview.website_id=$1
       and pageview.created_at between $2 and $3
-      ${getFilterQuery('pageview', { url, referrer }, params)}
-      ${getFilterQuery('session', { os, browser, device, country }, params)}
+      ${pageviewQuery}
+      ${sessionQuery}
     )
     group by 1
     order by 2 desc
@@ -493,11 +502,8 @@ export function getSessionMetrics(website_id, start_at, end_at, field, filters =
 
 export function getPageviewMetrics(website_id, start_at, end_at, field, table, filters = {}) {
   const params = [website_id, start_at, end_at];
-  const { domain, url, referrer, os, browser, device, country } = filters;
-  const joinSession =
-    (os || browser || device || country) && table === 'pageview'
-      ? 'inner join session on session.session_id = pageview.session_id'
-      : '';
+  console.log({ table, filters });
+  const { pageviewQuery, sessionQuery, joinSession } = parseFilters(table, filters, params);
 
   return rawQuery(
     `
@@ -506,8 +512,8 @@ export function getPageviewMetrics(website_id, start_at, end_at, field, table, f
       ${joinSession}
     where ${table}.website_id=$1
     and ${table}.created_at between $2 and $3
-    ${getFilterQuery(table, { domain, url, referrer }, params)}
-    ${joinSession && getFilterQuery('session', { os, browser, device, country }, params)}
+    ${pageviewQuery}
+    ${joinSession && sessionQuery}
     group by 1
     order by 2 desc
     `,

pages/api/website/[id]/metrics.js

@@ -78,22 +78,18 @@ export default async (req, res) => {
         domain = website.domain;
       }
 
-      const data = await getPageviewMetrics(
-        websiteId,
-        startDate,
-        endDate,
-        getColumn(type),
-        getTable(type),
-        {
-          domain,
-          url: type !== 'url' ? url : undefined,
-          referrer: type !== 'referrer' ? referrer : undefined,
-          os: type !== 'os' ? os : undefined,
-          browser: type !== 'browser' ? browser : undefined,
-          device: type !== 'device' ? device : undefined,
-          country: type !== 'country' ? country : undefined,
-        },
-      );
+      const column = getColumn(type);
+      const table = getTable(type);
+
+      const data = await getPageviewMetrics(websiteId, startDate, endDate, column, table, {
+        domain,
+        url: type !== 'url' ? url : undefined,
+        referrer: type !== 'referrer' ? referrer : undefined,
+        os: type !== 'os' ? os : undefined,
+        browser: type !== 'browser' ? browser : undefined,
+        device: type !== 'device' ? device : undefined,
+        country: type !== 'country' ? country : undefined,
+      });
 
       return ok(res, data);
     }