Merge remote-tracking branch 'origin/dev' into dev

components/pages/reports/funnel/FunnelReport.js

@@ -6,9 +6,10 @@ import ReportHeader from '../ReportHeader';
 import ReportMenu from '../ReportMenu';
 import ReportBody from '../ReportBody';
 import Funnel from 'assets/funnel.svg';
+import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
-  type: 'funnel',
+  type: REPORT_TYPES.funnel,
   parameters: { window: 60, urls: [] },
 };
 

components/pages/reports/insights/InsightsParameters.js

@@ -119,7 +119,7 @@ export function InsightsParameters() {
                     <div className={styles.parameter}>
                       {id === 'fields' && (
                         <>
-                          <div>{label}</div>
+                          <div>{fieldOptions.find(f => f.name === name)?.label}</div>
                         </>
                       )}
                       {id === 'filters' && (

components/pages/reports/insights/InsightsReport.js

@@ -5,10 +5,11 @@ import ReportBody from '../ReportBody';
 import InsightsParameters from './InsightsParameters';
 import InsightsTable from './InsightsTable';
 import Lightbulb from 'assets/lightbulb.svg';
+import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
-  type: 'insights',
+  type: REPORT_TYPES.insights,
-  parameters: { fields: [], filters: [], groups: [] },
+  parameters: { fields: [], filters: [] },
 };
 
 export default function InsightsReport({ reportId }) {

components/pages/reports/insights/InsightsTable.js

@@ -31,10 +31,15 @@ export function InsightsTable() {
           </GridColumn>
         );
       })}
-      <GridColumn name="visitors" label={formatMessage(labels.visitors)} width="100px">
+      <GridColumn
+        name="visitors"
+        label={formatMessage(labels.visitors)}
+        width="100px"
+        alignment="end"
+      >
         {row => row.visitors.toLocaleString()}
       </GridColumn>
-      <GridColumn name="views" label={formatMessage(labels.views)} width="100px">
+      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" alignment="end">
         {row => row.views.toLocaleString()}
       </GridColumn>
     </GridTable>

hooks/useFilters.js

@@ -1,32 +1,40 @@
 import { useMessages } from 'hooks';
+import { OPERATORS } from 'lib/constants';
 
 export function useFilters() {
   const { formatMessage, labels } = useMessages();
 
   const filterLabels = {
-    eq: formatMessage(labels.is),
+    [OPERATORS.equals]: formatMessage(labels.is),
-    neq: formatMessage(labels.isNot),
+    [OPERATORS.notEquals]: formatMessage(labels.isNot),
-    s: formatMessage(labels.isSet),
+    [OPERATORS.set]: formatMessage(labels.isSet),
-    ns: formatMessage(labels.isNotSet),
+    [OPERATORS.notSet]: formatMessage(labels.isNotSet),
-    c: formatMessage(labels.contains),
+    [OPERATORS.contains]: formatMessage(labels.contains),
-    dnc: formatMessage(labels.doesNotContain),
+    [OPERATORS.doesNotContain]: formatMessage(labels.doesNotContain),
-    t: formatMessage(labels.true),
+    [OPERATORS.true]: formatMessage(labels.true),
-    f: formatMessage(labels.false),
+    [OPERATORS.false]: formatMessage(labels.false),
-    gt: formatMessage(labels.greaterThan),
+    [OPERATORS.greaterThan]: formatMessage(labels.greaterThan),
-    lt: formatMessage(labels.lessThan),
+    [OPERATORS.lessThan]: formatMessage(labels.lessThan),
-    gte: formatMessage(labels.greaterThanEquals),
+    [OPERATORS.greaterThanEquals]: formatMessage(labels.greaterThanEquals),
-    lte: formatMessage(labels.lessThanEquals),
+    [OPERATORS.lessThanEquals]: formatMessage(labels.lessThanEquals),
-    be: formatMessage(labels.before),
+    [OPERATORS.before]: formatMessage(labels.before),
-    af: formatMessage(labels.after),
+    [OPERATORS.after]: formatMessage(labels.after),
   };
 
   const typeFilters = {
-    string: ['eq', 'neq'],
+    string: [OPERATORS.equals, OPERATORS.notEquals],
-    array: ['c', 'dnc'],
+    array: [OPERATORS.contains, OPERATORS.doesNotContain],
-    boolean: ['t', 'f'],
+    boolean: [OPERATORS.true, OPERATORS.false],
-    number: ['eq', 'neq', 'gt', 'lt', 'gte', 'lte'],
+    number: [
-    date: ['be', 'af'],
+      OPERATORS.equals,
-    uuid: ['eq'],
+      OPERATORS.notEquals,
+      OPERATORS.greaterThan,
+      OPERATORS.lessThan,
+      OPERATORS.greaterThanEquals,
+      OPERATORS.lessThanEquals,
+    ],
+    date: [OPERATORS.before, OPERATORS.after],
+    uuid: [OPERATORS.equals],
   };
 
   const getFilters = type => {

lib/clickhouse.ts

@@ -3,7 +3,7 @@ import dateFormat from 'dateformat';
 import debug from 'debug';
 import { CLICKHOUSE } from 'lib/db';
 import { QueryFilters, QueryOptions } from './types';
-import { FILTER_COLUMNS } from './constants';
+import { FILTER_COLUMNS, OPERATORS } from './constants';
 import { loadWebsite } from './load';
 import { maxDate } from './date';
 
@@ -63,17 +63,29 @@ function getDateFormat(date) {
   return `'${dateFormat(date, 'UTC:yyyy-mm-dd HH:MM:ss')}'`;
 }
 
+function mapFilter(column, operator, name) {
+  switch (operator) {
+    case OPERATORS.equals:
+      return `${column} = {${name}:String}`;
+    case OPERATORS.notEquals:
+      return `${column} != {${name}:String}`;
+    default:
+      return '';
+  }
+}
+
 function getFilterQuery(filters: QueryFilters = {}, options: QueryOptions = {}) {
-  const query = Object.keys(filters).reduce((arr, key) => {
+  const query = Object.keys(filters).reduce((arr, name) => {
-    const filter = filters[key];
+    const value = filters[name];
-    const column = FILTER_COLUMNS[key] ?? options?.columns?.[key];
+    const operator = value?.filter ?? OPERATORS.equals;
+    const column = FILTER_COLUMNS[name] ?? options?.columns?.[name];
 
-    if (filter !== undefined && column) {
+    if (value !== undefined && column) {
-      arr.push(`and ${column} = {${key}:String}`);
+      arr.push(`and ${mapFilter(column, operator, name)}`);
-    }
 
-    if (key === 'referrer') {
+      if (name === 'referrer') {
-      arr.push('and referrer_domain != {websiteDomain:String}');
+        arr.push('and referrer_domain != {websiteDomain:String}');
+      }
     }
 
     return arr;
@@ -82,11 +94,7 @@ function getFilterQuery(filters: QueryFilters = {}, options: QueryOptions = {})
   return query.join('\n');
 }
 
-async function parseFilters(
+async function parseFilters(websiteId: string, filters: QueryFilters = {}, options?: QueryOptions) {
-  websiteId: string,
-  filters: QueryFilters & { [key: string]: any } = {},
-  options?: QueryOptions,
-) {
   const website = await loadWebsite(websiteId);
 
   return {

lib/constants.ts

@@ -92,6 +92,23 @@ export const DATA_TYPE = {
   array: 5,
 } as const;
 
+export const OPERATORS = {
+  equals: 'eq',
+  notEquals: 'neq',
+  set: 's',
+  notSet: 'ns',
+  contains: 'c',
+  doesNotContain: 'dnc',
+  true: 't',
+  false: 'f',
+  greaterThan: 'gt',
+  lessThan: 'lt',
+  greaterThanEquals: 'gte',
+  lessThanEquals: 'lte',
+  before: 'bf',
+  after: 'af',
+} as const;
+
 export const DATA_TYPES = {
   [DATA_TYPE.string]: 'string',
   [DATA_TYPE.number]: 'number',
@@ -100,6 +117,12 @@ export const DATA_TYPES = {
   [DATA_TYPE.array]: 'array',
 };
 
+export const REPORT_TYPES = {
+  funnel: 'funnel',
+  insights: 'insights',
+  retention: 'retention',
+} as const;
+
 export const REPORT_PARAMETERS = {
   fields: 'fields',
   filters: 'filters',

lib/prisma.ts

@@ -1,7 +1,7 @@
 import prisma from '@umami/prisma-client';
 import moment from 'moment-timezone';
 import { MYSQL, POSTGRESQL, getDatabaseType } from 'lib/db';
-import { FILTER_COLUMNS, SESSION_COLUMNS } from './constants';
+import { FILTER_COLUMNS, SESSION_COLUMNS, OPERATORS } from './constants';
 import { loadWebsite } from './load';
 import { maxDate } from './date';
 import { QueryFilters, QueryOptions, SearchFilter } from './types';
@@ -67,15 +67,27 @@ function getTimestampIntervalQuery(field: string): string {
   }
 }
 
+function mapFilter(column, operator, name) {
+  switch (operator) {
+    case OPERATORS.equals:
+      return `${column} = {{${name}}}`;
+    case OPERATORS.notEquals:
+      return `${column} != {{${name}}}`;
+    default:
+      return '';
+  }
+}
+
 function getFilterQuery(filters: QueryFilters = {}, options: QueryOptions = {}): string {
-  const query = Object.keys(filters).reduce((arr, key) => {
+  const query = Object.keys(filters).reduce((arr, name) => {
-    const filter = filters[key];
+    const value = filters[name];
-    const column = FILTER_COLUMNS[key] ?? options?.columns?.[key];
+    const operator = value?.filter ?? OPERATORS.equals;
+    const column = FILTER_COLUMNS[name] ?? options?.columns?.[name];
 
-    if (filter !== undefined && column) {
+    if (value !== undefined && column) {
-      arr.push(`and ${column}={{${key}}}`);
+      arr.push(`and ${mapFilter(column, operator, name)}`);
 
-      if (key === 'referrer') {
+      if (name === 'referrer') {
         arr.push(
           'and (website_event.referrer_domain != {{websiteDomain}} or website_event.referrer_domain is null)',
         );
@@ -88,11 +100,17 @@ function getFilterQuery(filters: QueryFilters = {}, options: QueryOptions = {}):
   return query.join('\n');
 }
 
-async function parseFilters(
+function normalizeFilters(filters = {}) {
-  websiteId,
+  return Object.keys(filters).reduce((obj, key) => {
-  filters: QueryFilters & { [key: string]: any } = {},
+    const value = filters[key];
-  options: QueryOptions = {},
+
-) {
+    obj[key] = value?.value ?? value;
+
+    return obj;
+  }, {});
+}
+
+async function parseFilters(websiteId, filters: QueryFilters = {}, options: QueryOptions = {}) {
   const website = await loadWebsite(websiteId);
 
   return {
@@ -102,7 +120,7 @@ async function parseFilters(
         : '',
     filterQuery: getFilterQuery(filters, options),
     params: {
-      ...filters,
+      ...normalizeFilters(filters),
       websiteId,
       startDate: maxDate(filters.startDate, website.resetAt),
       websiteDomain: website.domain,

pages/api/reports/insights.ts

@@ -16,6 +16,14 @@ export interface InsightsRequestBody {
   groups: { name: string; type: string }[];
 }
 
+function convertFilters(filters) {
+  return filters.reduce((obj, { name, ...value }) => {
+    obj[name] = value;
+
+    return obj;
+  }, {});
+}
+
 export default async (
   req: NextApiRequestQueryBody<any, InsightsRequestBody>,
   res: NextApiResponse,
@@ -36,7 +44,7 @@ export default async (
     }
 
     const data = await getInsights(websiteId, fields, {
-      ...filters,
+      ...convertFilters(filters),
       startDate: new Date(startDate),
       endDate: new Date(endDate),
     });

queries/analytics/reports/getInsights.ts

@@ -1,7 +1,7 @@
 import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
 import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
-import { EVENT_TYPE, SESSION_COLUMNS } from 'lib/constants';
+import { EVENT_TYPE, FILTER_COLUMNS, SESSION_COLUMNS } from 'lib/constants';
 import { QueryFilters } from 'lib/types';
 
 export async function getInsights(
@@ -91,7 +91,7 @@ function parseFields(fields) {
     (arr, field) => {
       const { name } = field;
 
-      return arr.concat(name);
+      return arr.concat(`${FILTER_COLUMNS[name]} as "${name}"`);
     },
     ['count(*) as views', 'count(distinct website_event.session_id) as visitors'],
   );
@@ -103,5 +103,5 @@ function parseGroupBy(fields) {
   if (!fields.length) {
     return '';
   }
-  return `group by ${fields.map(({ name }) => name).join(',')}`;
+  return `group by ${fields.map(({ name }) => FILTER_COLUMNS[name]).join(',')}`;
 }