Update metric tables when filtering on referrer

Signed-off-by: Kevin Decherf <kevin@kdecherf.com>

components/metrics/MetricsTable.js

@@ -30,7 +30,7 @@ export default function MetricsTable({
   const {
     resolve,
     router,
-    query: { url },
+    query: { url, referrer },
   } = usePageQuery();
 
   const { data, loading, error } = useFetch(
@@ -41,12 +41,13 @@ export default function MetricsTable({
         start_at: +startDate,
         end_at: +endDate,
         url,
+        referrer,
       },
       onDataLoad,
       delay: DEFAULT_ANIMATION_DURATION,
       headers: { [TOKEN_HEADER]: shareToken?.token },
     },
-    [modified],
+    [modified, url, referrer],
   );
 
   const filteredData = useMemo(() => {

lib/queries.js

@@ -444,10 +444,11 @@ 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 } = filters;
+  const { domain, url, referrer } = filters;
 
   let domainFilter = '';
   let urlFilter = '';
+  let refFilter = '';
 
   if (domain) {
     domainFilter = `and referrer not like $${params.length + 1} and referrer not like '/%'`;
@@ -459,6 +460,11 @@ export function getPageviewMetrics(website_id, start_at, end_at, field, table, f
     params.push(decodeURIComponent(url));
   }
 
+  if (referrer) {
+    refFilter = `and referrer like $${params.length + 1}`;
+    params.push(`%${decodeURIComponent(referrer)}%`);
+  }
+
   return rawQuery(
     `
     select ${field} x, count(*) y
@@ -467,6 +473,7 @@ export function getPageviewMetrics(website_id, start_at, end_at, field, table, f
     and created_at between $2 and $3
     ${domainFilter}
     ${urlFilter}
+    ${refFilter}
     group by 1
     order by 2 desc
     `,

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

@@ -30,7 +30,7 @@ export default async (req, res) => {
       return unauthorized(res);
     }
 
-    const { id, type, start_at, end_at, url } = req.query;
+    const { id, type, start_at, end_at, url, referrer } = req.query;
 
     const websiteId = +id;
     const startDate = new Date(+start_at);
@@ -75,6 +75,7 @@ export default async (req, res) => {
         {
           domain,
           url: type !== 'url' && url,
+          referrer: referrer,
         },
       );