Update to insights query.

components/pages/reports/FilterSelectForm.js

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import FieldSelectForm from './FieldSelectForm';
+import FieldFilterForm from './FieldFilterForm';
+
+export default function FilterSelectForm({ fields, onSelect }) {
+  const [field, setField] = useState();
+
+  if (!field) {
+    return <FieldSelectForm fields={fields} onSelect={setField} />;
+  }
+
+  return <FieldFilterForm name={field.name} type={field.type} onSelect={onSelect} />;
+}

components/pages/reports/insights/InsightsParameters.js

@@ -7,9 +7,9 @@ import Icons from 'components/icons';
 import BaseParameters from '../BaseParameters';
 import ParameterList from '../ParameterList';
 import styles from './InsightsParameters.module.css';
-import FieldSelectForm from '../FieldSelectForm';
 import PopupForm from '../PopupForm';
-import FieldFilterForm from '../FieldFilterForm';
+import FilterSelectForm from '../FilterSelectForm';
+import FieldSelectForm from '../FieldSelectForm';
 
 const fieldOptions = [
   { name: 'url', type: 'string' },
@@ -30,17 +30,15 @@ export function InsightsParameters() {
   const { formatMessage, labels } = useMessages();
   const ref = useRef(null);
   const { parameters } = report || {};
-  const { websiteId, dateRange, fields, filters, groups } = parameters || {};
-  const queryEnabled = websiteId && dateRange && fields?.length;
+  const { websiteId, dateRange, filters, groups } = parameters || {};
+  const queryEnabled = websiteId && dateRange && (filters?.length || groups?.length);
 
   const parameterGroups = [
-    { label: formatMessage(labels.fields), group: REPORT_PARAMETERS.fields },
     { label: formatMessage(labels.filters), group: REPORT_PARAMETERS.filters },
     { label: formatMessage(labels.breakdown), group: REPORT_PARAMETERS.groups },
   ];
 
   const parameterData = {
-    fields,
     filters,
     groups,
   };
@@ -73,11 +71,11 @@ export function InsightsParameters() {
           {(close, element) => {
             return (
               <PopupForm element={element} onClose={close}>
-                {group === REPORT_PARAMETERS.fields && (
-                  <FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
-                )}
                 {group === REPORT_PARAMETERS.filters && (
-                  <FieldFilterForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                  <FilterSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
+                )}
+                {group === REPORT_PARAMETERS.groups && (
+                  <FieldSelectForm fields={fieldOptions} onSelect={handleAdd.bind(null, group)} />
                 )}
               </PopupForm>
             );
@@ -100,12 +98,6 @@ export function InsightsParameters() {
               {({ name, value }) => {
                 return (
                   <div className={styles.parameter}>
-                    {group === REPORT_PARAMETERS.fields && (
-                      <>
-                        <div>{name}</div>
-                        <div className={styles.op}>{value}</div>
-                      </>
-                    )}
                     {group === REPORT_PARAMETERS.filters && (
                       <>
                         <div>{name}</div>

lib/constants.ts

@@ -53,7 +53,16 @@ export const FILTER_COLUMNS = {
   eventName: 'event_name',
 };
 
-export const IGNORED_FILTERS = ['startDate', 'endDate', 'timezone', 'unit'];
+export const IGNORED_FILTERS = [
+  'startDate',
+  'endDate',
+  'timezone',
+  'unit',
+  'eventType',
+  'fields',
+  'filters',
+  'groups',
+];
 
 export const COLLECTION_TYPE = {
   event: 'event',

pages/api/reports/insights.ts

@@ -36,13 +36,15 @@ export default async (
       return unauthorized(res);
     }
 
-    const data = await getInsights(websiteId, {
-      startDate: new Date(startDate),
-      endDate: new Date(endDate),
-      fields,
-      filters,
+    const data = await getInsights(
+      websiteId,
+      {
+        ...filters,
+        startDate: new Date(startDate),
+        endDate: new Date(endDate),
+      },
       groups,
-    });
+    );
 
     return ok(res, data);
   }

queries/analytics/reports/getInsights.ts

@@ -4,7 +4,9 @@ import clickhouse from 'lib/clickhouse';
 import { EVENT_TYPE } from 'lib/constants';
 import { QueryFilters } from 'lib/types';
 
-export async function getInsights(...args: [websiteId: string, filters: QueryFilters]) {
+export async function getInsights(
+  ...args: [websiteId: string, filters: QueryFilters, groups: { name: string; type: string }[]]
+) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
@@ -14,6 +16,7 @@ export async function getInsights(...args: [websiteId: string, filters: QueryFil
 async function relationalQuery(
   websiteId: string,
   filters: QueryFilters,
+  groups: { name: string; type: string }[],
 ): Promise<
   {
     x: string;
@@ -46,6 +49,7 @@ async function relationalQuery(
 async function clickhouseQuery(
   websiteId: string,
   filters: QueryFilters,
+  groups: { name: string; type: string }[],
 ): Promise<
   {
     x: string;
@@ -53,7 +57,6 @@ async function clickhouseQuery(
   }[]
 > {
   const { parseFilters, rawQuery } = clickhouse;
-  const { fields } = filters;
   const { filterQuery, params } = await parseFilters(websiteId, {
     ...filters,
     eventType: EVENT_TYPE.pageView,
@@ -62,14 +65,14 @@ async function clickhouseQuery(
   return rawQuery(
     `
     select 
-      ${parseFields(fields)}
+      ${parseFields(groups)}
     from website_event
     where website_id = {websiteId:UUID}
       and created_at between {startDate:DateTime} and {endDate:DateTime}
       and event_type = {eventType:UInt32}
       ${filterQuery}
-    group by ${fields.map(({ name }) => name).join(',')}
-    order by total desc
+    group by ${groups.map(({ name }) => name).join(',')}
+    order by 1 desc
     limit 500
     `,
     params,
@@ -77,22 +80,14 @@ async function clickhouseQuery(
 }
 
 function parseFields(fields) {
-  let count = false;
-  let distinct = false;
+  const query = fields.reduce(
+    (arr, field) => {
+      const { name } = field;
 
-  const query = fields.reduce((arr, field) => {
-    const { name, value } = field;
-
-    if (!count && value === 'total') {
-      count = true;
-      arr = arr.concat(`count(*) as views`);
-    } else if (!distinct && value === 'unique') {
-      distinct = true;
-      //arr = arr.concat(`count(distinct ${name})`);
-    }
-
-    return arr.concat(name);
-  }, []);
+      return arr.concat(name);
+    },
+    ['count(*) as views', 'count(distinct session_id) as visitors'],
+  );
 
   return query.join(',\n');
 }