Merge branch 'dev' of https://github.com/umami-software/umami into dev

src/app/(main)/reports/goals/GoalsAddForm.tsx

@@ -6,27 +6,48 @@ import styles from './GoalsAddForm.module.css';
 export function GoalsAddForm({
   type: defaultType = 'url',
   value: defaultValue = '',
+  property: defaultProperty = '',
+  operator: defaultAggregae = null,
   goal: defaultGoal = 10,
   onChange,
 }: {
   type?: string;
   value?: string;
+  operator?: string;
+  property?: string;
   goal?: number;
-  onChange?: (step: { type: string; value: string; goal: number }) => void;
+  onChange?: (step: {
+    type: string;
+    value: string;
+    goal: number;
+    operator?: string;
+    property?: string;
+  }) => void;
 }) {
   const [type, setType] = useState(defaultType);
   const [value, setValue] = useState(defaultValue);
+  const [operator, setOperator] = useState(defaultAggregae);
+  const [property, setProperty] = useState(defaultProperty);
   const [goal, setGoal] = useState(defaultGoal);
   const { formatMessage, labels } = useMessages();
   const items = [
     { label: formatMessage(labels.url), value: 'url' },
     { label: formatMessage(labels.event), value: 'event' },
+    { label: formatMessage(labels.eventData), value: 'event-data' },
+  ];
+  const operators = [
+    { label: formatMessage(labels.count), value: 'count' },
+    { label: formatMessage(labels.average), value: 'average' },
+    { label: formatMessage(labels.sum), value: 'sum' },
   ];
   const isDisabled = !type || !value;
 
   const handleSave = () => {
-    onChange({ type, value, goal });
+    onChange(
+      type === 'event-data' ? { type, value, goal, operator, property } : { type, value, goal },
+    );
     setValue('');
+    setProperty('');
     setGoal(10);
   };
 
@@ -45,6 +66,10 @@ export function GoalsAddForm({
     return items.find(item => item.value === value)?.label;
   };
 
+  const renderoperatorValue = (value: any) => {
+    return operators.find(item => item.value === value)?.label;
+  };
+
   return (
     <Flexbox direction="column" gap={10}>
       <FormRow label={formatMessage(defaultValue ? labels.update : labels.add)}>
@@ -70,6 +95,31 @@ export function GoalsAddForm({
           />
         </Flexbox>
       </FormRow>
+      {type === 'event-data' && (
+        <FormRow label={formatMessage(labels.property)}>
+          <Flexbox gap={10}>
+            <Dropdown
+              className={styles.dropdown}
+              items={operators}
+              value={operator}
+              renderValue={renderoperatorValue}
+              onChange={(value: any) => setOperator(value)}
+            >
+              {({ value, label }) => {
+                return <Item key={value}>{label}</Item>;
+              }}
+            </Dropdown>
+            <TextField
+              className={styles.input}
+              value={property}
+              onChange={e => handleChange(e, setProperty)}
+              autoFocus={true}
+              autoComplete="off"
+              onKeyDown={handleKeyDown}
+            />
+          </Flexbox>
+        </FormRow>
+      )}
       <FormRow label={formatMessage(labels.goal)}>
         <Flexbox gap={10}>
           <TextField

src/app/(main)/reports/goals/GoalsChart.tsx

@@ -11,19 +11,36 @@ export function GoalsChart({ className }: { className?: string; isLoading?: bool
 
   const { data } = report || {};
 
+  const getLabel = type => {
+    let label = '';
+    switch (type) {
+      case 'url':
+        label = labels.viewedPage;
+        break;
+      case 'event':
+        label = labels.triggeredEvent;
+        break;
+      default:
+        label = labels.collectedData;
+        break;
+    }
+
+    return label;
+  };
+
   return (
     <div className={classNames(styles.chart, className)}>
-      {data?.map(({ type, value, goal, result }, index: number) => {
+      {data?.map(({ type, value, goal, result, property, operator }, index: number) => {
         const percent = result > goal ? 100 : (result / goal) * 100;
 
         return (
           <div key={index} className={styles.goal}>
             <div className={styles.card}>
               <div className={styles.header}>
-                <span className={styles.label}>
+                <span className={styles.label}>{formatMessage(getLabel(type))}</span>
-                  {formatMessage(type === 'url' ? labels.viewedPage : labels.triggeredEvent)}
+                <span className={styles.item}>{`${value}${
-                </span>
+                  type === 'event-data' ? `:(${operator}):${property}` : ''
-                <span className={styles.item}>{value}</span>
+                }`}</span>
               </div>
               <div className={styles.track}>
                 <div

src/app/(main)/reports/goals/GoalsParameters.module.css

@@ -4,6 +4,16 @@
   font-weight: 600;
 }
 
+.eventData {
+  color: var(--orange900);
+  background-color: var(--orange100);
+  font-size: 12px;
+  font-weight: 900;
+  padding: 2px 8px;
+  border-radius: 5px;
+  width: fit-content;
+}
+
 .goal {
   color: var(--blue900);
   background-color: var(--blue100);
@@ -11,4 +21,5 @@
   font-weight: 900;
   padding: 2px 8px;
   border-radius: 5px;
+  width: fit-content;
 }

src/app/(main)/reports/goals/GoalsParameters.tsx

@@ -4,6 +4,7 @@ import { formatNumber } from 'lib/format';
 import { useContext } from 'react';
 import {
   Button,
+  Flexbox,
   Form,
   FormButtons,
   FormRow,
@@ -79,17 +80,34 @@ export function GoalsParameters() {
       <BaseParameters allowWebsiteSelect={!id} />
       <FormRow label={formatMessage(labels.goals)} action={<AddGoalsButton />}>
         <ParameterList>
-          {goals.map((goal: { type: string; value: string; goal: number }, index: number) => {
+          {goals.map(
+            (
+              goal: {
+                type: string;
+                value: string;
+                goal: number;
+                operator?: string;
+                property?: string;
+              },
+              index: number,
+            ) => {
               return (
                 <PopupTrigger key={index}>
                   <ParameterList.Item
                     icon={goal.type === 'url' ? <Icons.Eye /> : <Icons.Bolt />}
                     onRemove={() => handleRemoveGoals(index)}
                   >
+                    <Flexbox direction="column" gap={5}>
                       <div className={styles.value}>{goal.value}</div>
+                      {goal.type === 'event-data' && (
+                        <div className={styles.eventData}>
+                          {formatMessage(labels[goal.operator])}: {goal.property}
+                        </div>
+                      )}
                       <div className={styles.goal}>
                         {formatMessage(labels.goal)}: {formatNumber(goal.goal)}
                       </div>
+                    </Flexbox>
                   </ParameterList.Item>
                   <Popup alignment="start">
                     {(close: () => void) => (
@@ -98,6 +116,8 @@ export function GoalsParameters() {
                           type={goal.type}
                           value={goal.value}
                           goal={goal.goal}
+                          operator={goal.operator}
+                          property={goal.property}
                           onChange={handleUpdateGoals.bind(null, close, index)}
                         />
                       </PopupForm>
@@ -105,7 +125,8 @@ export function GoalsParameters() {
                   </Popup>
                 </PopupTrigger>
               );
-          })}
+            },
+          )}
         </ParameterList>
       </FormRow>
       <FormButtons>

src/components/messages.ts

@@ -95,6 +95,9 @@ export const labels = defineMessages({
   devices: { id: 'label.devices', defaultMessage: 'Devices' },
   countries: { id: 'label.countries', defaultMessage: 'Countries' },
   languages: { id: 'label.languages', defaultMessage: 'Languages' },
+  count: { id: 'label.count', defaultMessage: 'Count' },
+  average: { id: 'label.average', defaultMessage: 'Average' },
+  sum: { id: 'label.sum', defaultMessage: 'Sum' },
   event: { id: 'label.event', defaultMessage: 'Event' },
   events: { id: 'label.events', defaultMessage: 'Events' },
   query: { id: 'label.query', defaultMessage: 'Query' },
@@ -107,6 +110,7 @@ export const labels = defineMessages({
   views: { id: 'label.views', defaultMessage: 'Views' },
   none: { id: 'label.none', defaultMessage: 'None' },
   clearAll: { id: 'label.clear-all', defaultMessage: 'Clear all' },
+  property: { id: 'label.property', defaultMessage: 'Property' },
   today: { id: 'label.today', defaultMessage: 'Today' },
   lastHours: { id: 'label.last-hours', defaultMessage: 'Last {x} hours' },
   yesterday: { id: 'label.yesterday', defaultMessage: 'Yesterday' },
@@ -178,8 +182,6 @@ export const labels = defineMessages({
   before: { id: 'label.before', defaultMessage: 'Before' },
   after: { id: 'label.after', defaultMessage: 'After' },
   total: { id: 'label.total', defaultMessage: 'Total' },
-  sum: { id: 'label.sum', defaultMessage: 'Sum' },
-  average: { id: 'label.average', defaultMessage: 'Average' },
   min: { id: 'label.min', defaultMessage: 'Min' },
   max: { id: 'label.max', defaultMessage: 'Max' },
   unique: { id: 'label.unique', defaultMessage: 'Unique' },
@@ -220,6 +222,10 @@ export const labels = defineMessages({
     id: 'message.viewed-page',
     defaultMessage: 'Viewed page',
   },
+  collectedData: {
+    id: 'message.collected-data',
+    defaultMessage: 'Collected data',
+  },
   triggeredEvent: {
     id: 'message.triggered-event',
     defaultMessage: 'Triggered event',
@@ -241,7 +247,6 @@ export const labels = defineMessages({
     id: 'label.goals-description',
     defaultMessage: 'Track your goals for pageviews and events.',
   },
-  count: { id: 'label.count', defaultMessage: 'Count' },
   journey: { id: 'label.journey', defaultMessage: 'Journey' },
   journeyDescription: {
     id: 'label.journey-description',

src/pages/api/reports/goals.ts

@@ -28,9 +28,23 @@ const schema = {
       .array()
       .of(
         yup.object().shape({
-          type: yup.string().required(),
+          type: yup
+            .string()
+            .matches(/url|event|event-data/i)
+            .required(),
           value: yup.string().required(),
           goal: yup.number().required(),
+          operator: yup
+            .string()
+            .matches(/count|sum|average/i)
+            .when('type', {
+              is: 'eventData',
+              then: yup.string().required(),
+            }),
+          property: yup.string().when('type', {
+            is: 'eventData',
+            then: yup.string().required(),
+          }),
         }),
       )
       .min(1)

src/queries/analytics/reports/getGoals.ts

@@ -8,7 +8,7 @@ export async function getGoals(
     criteria: {
       startDate: Date;
       endDate: Date;
-      goals: { type: string; value: string; goal: number }[];
+      goals: { type: string; value: string; goal: number; operator?: string }[];
     },
   ]
 ) {
@@ -23,117 +23,30 @@ async function relationalQuery(
   criteria: {
     startDate: Date;
     endDate: Date;
-    goals: { type: string; value: string; goal: number }[];
+    goals: { type: string; value: string; goal: number; operator?: string }[];
   },
 ): Promise<any> {
   const { startDate, endDate, goals } = criteria;
   const { rawQuery } = prisma;
 
-  const hasUrl = goals.some(a => a.type === 'url');
-  const hasEvent = goals.some(a => a.type === 'event');
-
-  function getParameters(goals: { type: string; value: string; goal: number }[]) {
-    const urls = goals
-      .filter(a => a.type === 'url')
-      .reduce((acc, cv, i) => {
-        acc[`${cv.type}${i}`] = cv.value;
-        return acc;
-      }, {});
-
-    const events = goals
-      .filter(a => a.type === 'event')
-      .reduce((acc, cv, i) => {
-        acc[`${cv.type}${i}`] = cv.value;
-        return acc;
-      }, {});
-
-    return {
-      urls: { ...urls, startDate, endDate, websiteId },
-      events: { ...events, startDate, endDate, websiteId },
-    };
-  }
-
-  function getColumns(goals: { type: string; value: string; goal: number }[]) {
-    const urls = goals
-      .filter(a => a.type === 'url')
-      .map((a, i) => `COUNT(CASE WHEN url_path =  {{url${i}}} THEN 1 END) AS URL${i}`)
-      .join('\n');
-    const events = goals
-      .filter(a => a.type === 'event')
-      .map((a, i) => `COUNT(CASE WHEN url_path =  {{event${i}}} THEN 1 END) AS EVENT${i}`)
-      .join('\n');
-
-    return { urls, events };
-  }
-
-  function getWhere(goals: { type: string; value: string; goal: number }[]) {
-    const urls = goals
-      .filter(a => a.type === 'url')
-      .map((a, i) => `{{url${i}}}`)
-      .join(',');
-    const events = goals
-      .filter(a => a.type === 'event')
-      .map((a, i) => `{{event${i}}}`)
-      .join(',');
-
-    return { urls: `and url_path in (${urls})`, events: `and event_name in (${events})` };
-  }
-
-  const parameters = getParameters(goals);
-  const columns = getColumns(goals);
-  const where = getWhere(goals);
-
-  const urls = hasUrl
-    ? await rawQuery(
-        `
-  select
-    ${columns.urls}
-  from website_event
-    where websiteId = {{websiteId::uuid}}
-      ${where.urls}
-      and created_at between {{startDate}} and {{endDate}}
-  `,
-        parameters.urls,
-      )
-    : [];
-
-  const events = hasEvent
-    ? await rawQuery(
-        `
-  select
-    ${columns.events}
-  from website_event
-    where websiteId = {{websiteId::uuid}}
-      ${where.events}
-      and created_at between {{startDate}} and {{endDate}}
-  `,
-        parameters.events,
-      )
-    : [];
-
-  return [...urls, ...events];
-}
-
-async function clickhouseQuery(
-  websiteId: string,
-  criteria: {
-    startDate: Date;
-    endDate: Date;
-    goals: { type: string; value: string; goal: number }[];
-  },
-): Promise<{ type: string; value: string; goal: number; result: number }[]> {
-  const { startDate, endDate, goals } = criteria;
-  const { rawQuery } = clickhouse;
-
   const urls = goals.filter(a => a.type === 'url');
   const events = goals.filter(a => a.type === 'event');
+  const eventData = goals.filter(a => a.type === 'event-data');
 
   const hasUrl = urls.length > 0;
   const hasEvent = events.length > 0;
+  const hasEventData = eventData.length > 0;
 
   function getParameters(
     urls: { type: string; value: string; goal: number }[],
     events: { type: string; value: string; goal: number }[],
+    eventData: {
+      type: string;
+      value: string;
+      goal: number;
+      operator?: string;
+      property?: string;
+    }[],
   ) {
     const urlParam = urls.reduce((acc, cv, i) => {
       acc[`${cv.type}${i}`] = cv.value;
@@ -145,41 +58,258 @@ async function clickhouseQuery(
       return acc;
     }, {});
 
+    const eventDataParam = eventData.reduce((acc, cv, i) => {
+      acc[`eventData${i}`] = cv.value;
+      acc[`property${i}`] = cv.property;
+      return acc;
+    }, {});
+
     return {
       urls: { ...urlParam, startDate, endDate, websiteId },
       events: { ...eventParam, startDate, endDate, websiteId },
+      eventData: { ...eventDataParam, startDate, endDate, websiteId },
     };
   }
 
   function getColumns(
     urls: { type: string; value: string; goal: number }[],
     events: { type: string; value: string; goal: number }[],
+    eventData: {
+      type: string;
+      value: string;
+      goal: number;
+      operator?: string;
+      property?: string;
+    }[],
+  ) {
+    const urlColumns = urls
+      .map((a, i) => `COUNT(CASE WHEN url_path = {{url${i}}} THEN 1 END) AS URL${i},`)
+      .join('\n')
+      .slice(0, -1);
+    const eventColumns = events
+      .map((a, i) => `COUNT(CASE WHEN event_name = {{event${i}}} THEN 1 END) AS EVENT${i},`)
+      .join('\n')
+      .slice(0, -1);
+    const eventDataColumns = eventData
+      .map(
+        (a, i) =>
+          `${
+            a.operator === 'average' ? 'avg' : a.operator
+          }(CASE WHEN event_name = {{eventData${i}}} AND data_key = {{property${i}}} THEN ${
+            a.operator === 'count' ? '1' : 'number_value'
+          } END) AS EVENT_DATA${i},`,
+      )
+      .join('\n')
+      .slice(0, -1);
+
+    return { urls: urlColumns, events: eventColumns, eventData: eventDataColumns };
+  }
+
+  function getWhere(
+    urls: { type: string; value: string; goal: number }[],
+    events: { type: string; value: string; goal: number }[],
+    eventData: {
+      type: string;
+      value: string;
+      goal: number;
+      operator?: string;
+      property?: string;
+    }[],
+  ) {
+    const urlWhere = urls.map((a, i) => `{{url${i}}}`).join(',');
+    const eventWhere = events.map((a, i) => `{{event${i}}}`).join(',');
+    const eventDataNameWhere = eventData.map((a, i) => `{{eventData${i}}}`).join(',');
+    const eventDataKeyWhere = eventData.map((a, i) => `{{property${i}}}`).join(',');
+
+    return {
+      urls: `and url_path in (${urlWhere})`,
+      events: `and event_name in (${eventWhere})`,
+      eventData: `and event_name in (${eventDataNameWhere}) and data_key in (${eventDataKeyWhere})`,
+    };
+  }
+
+  const parameters = getParameters(urls, events, eventData);
+  const columns = getColumns(urls, events, eventData);
+  const where = getWhere(urls, events, eventData);
+
+  const urlResults = hasUrl
+    ? await rawQuery(
+        `
+  select
+    ${columns.urls}
+  from website_event
+    where website_id = {{websiteId::uuid}}
+      ${where.urls}
+      and created_at between {{startDate}} and {{endDate}}
+  `,
+        parameters.urls,
+      ).then(a => {
+        const results = a[0];
+
+        return Object.keys(results).map((key, i) => ({
+          ...urls[i],
+          goal: Number(urls[i].goal),
+          result: Number(results[key]),
+        }));
+      })
+    : [];
+
+  const eventResults = hasEvent
+    ? await rawQuery(
+        `
+  select
+    ${columns.events}
+  from website_event
+    where website_id = {{websiteId::uuid}}
+      ${where.events}
+      and created_at between {{startDate}} and {{endDate}}
+  `,
+        parameters.events,
+      ).then(a => {
+        const results = a[0];
+
+        return Object.keys(results).map((key, i) => {
+          return { ...events[i], goal: Number(events[i].goal), result: Number(results[key]) };
+        });
+      })
+    : [];
+
+  const eventDataResults = hasEventData
+    ? await rawQuery(
+        `
+  select
+    ${columns.eventData}
+  from website_event w
+      join event_data d
+      on d.website_event_id = w.event_id
+    where w.website_id = {{websiteId::uuid}}
+      ${where.eventData}
+      and w.created_at between {{startDate}} and {{endDate}}
+  `,
+        parameters.eventData,
+      ).then(a => {
+        const results = a[0];
+
+        return Object.keys(results).map((key, i) => {
+          return { ...eventData[i], goal: Number(eventData[i].goal), result: Number(results[key]) };
+        });
+      })
+    : [];
+
+  return [...urlResults, ...eventResults, ...eventDataResults];
+}
+
+async function clickhouseQuery(
+  websiteId: string,
+  criteria: {
+    startDate: Date;
+    endDate: Date;
+    goals: { type: string; value: string; goal: number; operator?: string; property?: string }[];
+  },
+): Promise<{ type: string; value: string; goal: number; result: number }[]> {
+  const { startDate, endDate, goals } = criteria;
+  const { rawQuery } = clickhouse;
+
+  const urls = goals.filter(a => a.type === 'url');
+  const events = goals.filter(a => a.type === 'event');
+  const eventData = goals.filter(a => a.type === 'event-data');
+
+  const hasUrl = urls.length > 0;
+  const hasEvent = events.length > 0;
+  const hasEventData = eventData.length > 0;
+
+  function getParameters(
+    urls: { type: string; value: string; goal: number }[],
+    events: { type: string; value: string; goal: number }[],
+    eventData: {
+      type: string;
+      value: string;
+      goal: number;
+      operator?: string;
+      property?: string;
+    }[],
+  ) {
+    const urlParam = urls.reduce((acc, cv, i) => {
+      acc[`${cv.type}${i}`] = cv.value;
+      return acc;
+    }, {});
+
+    const eventParam = events.reduce((acc, cv, i) => {
+      acc[`${cv.type}${i}`] = cv.value;
+      return acc;
+    }, {});
+
+    const eventDataParam = eventData.reduce((acc, cv, i) => {
+      acc[`eventData${i}`] = cv.value;
+      acc[`property${i}`] = cv.property;
+      return acc;
+    }, {});
+
+    return {
+      urls: { ...urlParam, startDate, endDate, websiteId },
+      events: { ...eventParam, startDate, endDate, websiteId },
+      eventData: { ...eventDataParam, startDate, endDate, websiteId },
+    };
+  }
+
+  function getColumns(
+    urls: { type: string; value: string; goal: number }[],
+    events: { type: string; value: string; goal: number }[],
+    eventData: {
+      type: string;
+      value: string;
+      goal: number;
+      operator?: string;
+      property?: string;
+    }[],
   ) {
     const urlColumns = urls
       .map((a, i) => `countIf(url_path = {url${i}:String}) AS URL${i},`)
       .join('\n')
       .slice(0, -1);
     const eventColumns = events
-      .map((a, i) => `countIf(event_name = {event${i}:String}) AS EVENT${i}`)
+      .map((a, i) => `countIf(event_name = {event${i}:String}) AS EVENT${i},`)
+      .join('\n')
+      .slice(0, -1);
+    const eventDataColumns = eventData
+      .map(
+        (a, i) =>
+          `${a.operator === 'average' ? 'avg' : a.operator}If(${
+            a.operator !== 'count' ? 'number_value, ' : ''
+          }event_name = {eventData${i}:String} AND data_key = {property${i}:String}) AS EVENT_DATA${i},`,
+      )
       .join('\n')
       .slice(0, -1);
 
-    return { url: urlColumns, events: eventColumns };
+    return { url: urlColumns, events: eventColumns, eventData: eventDataColumns };
   }
 
   function getWhere(
     urls: { type: string; value: string; goal: number }[],
     events: { type: string; value: string; goal: number }[],
+    eventData: {
+      type: string;
+      value: string;
+      goal: number;
+      operator?: string;
+      property?: string;
+    }[],
   ) {
     const urlWhere = urls.map((a, i) => `{url${i}:String}`).join(',');
     const eventWhere = events.map((a, i) => `{event${i}:String}`).join(',');
+    const eventDataNameWhere = eventData.map((a, i) => `{eventData${i}:String}`).join(',');
+    const eventDataKeyWhere = eventData.map((a, i) => `{property${i}:String}`).join(',');
 
-    return { urls: `and url_path in (${urlWhere})`, events: `and event_name in (${eventWhere})` };
+    return {
+      urls: `and url_path in (${urlWhere})`,
+      events: `and event_name in (${eventWhere})`,
+      eventData: `and event_name in (${eventDataNameWhere}) and data_key in (${eventDataKeyWhere})`,
+    };
   }
 
-  const parameters = getParameters(urls, events);
+  const parameters = getParameters(urls, events, eventData);
-  const columns = getColumns(urls, events);
+  const columns = getColumns(urls, events, eventData);
-  const where = getWhere(urls, events);
+  const where = getWhere(urls, events, eventData);
 
   const urlResults = hasUrl
     ? await rawQuery<any>(
@@ -221,5 +351,25 @@ async function clickhouseQuery(
       })
     : [];
 
-  return [...urlResults, ...eventResults];
+  const eventDataResults = hasEventData
+    ? await rawQuery<any>(
+        `
+  select
+    ${columns.eventData}
+  from event_data
+  where website_id = {websiteId:UUID}
+    ${where.eventData}
+    and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+  `,
+        parameters.eventData,
+      ).then(a => {
+        const results = a[0];
+
+        return Object.keys(results).map((key, i) => {
+          return { ...eventData[i], goal: Number(eventData[i].goal), result: Number(results[key]) };
+        });
+      })
+    : [];
+
+  return [...urlResults, ...eventResults, ...eventDataResults];
 }