Re-add events. Fix event_type queries.

components/pages/WebsiteDetails.js

@@ -1,26 +1,29 @@
-import { useState } from 'react';
+import Arrow from 'assets/arrow-right.svg';
-import { Column, Loading } from 'react-basics';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import classNames from 'classnames';
-import WebsiteChart from 'components/metrics/WebsiteChart';
+import Link from 'components/common/Link';
 import WorldMap from 'components/common/WorldMap';
-import Page from 'components/layout/Page';
 import GridRow from 'components/layout/GridRow';
 import MenuLayout from 'components/layout/MenuLayout';
-import Link from 'components/common/Link';
+import Page from 'components/layout/Page';
-import PagesTable from 'components/metrics/PagesTable';
-import ReferrersTable from 'components/metrics/ReferrersTable';
 import BrowsersTable from 'components/metrics/BrowsersTable';
-import OSTable from 'components/metrics/OSTable';
-import DevicesTable from 'components/metrics/DevicesTable';
 import CountriesTable from 'components/metrics/CountriesTable';
+import DevicesTable from 'components/metrics/DevicesTable';
 import LanguagesTable from 'components/metrics/LanguagesTable';
-import ScreenTable from 'components/metrics/ScreenTable';
+import OSTable from 'components/metrics/OSTable';
+import PagesTable from 'components/metrics/PagesTable';
 import QueryParametersTable from 'components/metrics/QueryParametersTable';
-import usePageQuery from 'hooks/usePageQuery';
+import ReferrersTable from 'components/metrics/ReferrersTable';
+import ScreenTable from 'components/metrics/ScreenTable';
+import WebsiteChart from 'components/metrics/WebsiteChart';
 import useApi from 'hooks/useApi';
+import usePageQuery from 'hooks/usePageQuery';
 import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
-import Arrow from 'assets/arrow-right.svg';
+import { useState } from 'react';
+import { Column, Loading } from 'react-basics';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import EventDataButton from './../common/EventDataButton';
+import EventsChart from './../metrics/EventsChart';
+import EventsTable from './../metrics/EventsTable';
 import styles from './WebsiteDetails.module.css';
 
 const messages = defineMessages({
@@ -32,6 +35,7 @@ const messages = defineMessages({
   devices: { id: 'metrics.devices', defaultMessage: 'Devices' },
   countries: { id: 'metrics.countries', defaultMessage: 'Countries' },
   languages: { id: 'metrics.languages', defaultMessage: 'Languages' },
+  events: { id: 'metrics.events', defaultMessage: 'Events' },
   query: { id: 'metrics.query-parameters', defaultMessage: 'Query parameters' },
 });
 
@@ -44,6 +48,7 @@ const views = {
   screen: ScreenTable,
   country: CountriesTable,
   language: LanguagesTable,
+  event: EventsTable,
   query: QueryParametersTable,
 };
 
@@ -54,6 +59,7 @@ export default function WebsiteDetails({ websiteId }) {
   );
   const [chartLoaded, setChartLoaded] = useState(false);
   const [countryData, setCountryData] = useState();
+  const [eventsData, setEventsData] = useState();
   const {
     resolve,
     query: { view },
@@ -104,6 +110,10 @@ export default function WebsiteDetails({ websiteId }) {
       label: formatMessage(messages.screens),
       value: resolve({ view: 'screen' }),
     },
+    {
+      label: formatMessage(messages.events),
+      value: resolve({ view: 'event' }),
+    },
     {
       label: formatMessage(messages.query),
       value: resolve({ view: 'query' }),
@@ -172,6 +182,15 @@ export default function WebsiteDetails({ websiteId }) {
               <CountriesTable {...tableProps} onDataLoad={setCountryData} />
             </Column>
           </GridRow>
+          <GridRow className={classNames({ [styles.hidden]: !eventsData?.length > 0 })}>
+            <Column xs={12} md={12} lg={4} defaultSize={4}>
+              <EventsTable {...tableProps} onDataLoad={setEventsData} />
+            </Column>
+            <Column xs={12} md={12} lg={8} defaultSize={8}>
+              <EventDataButton websiteId={websiteId} />
+              <EventsChart className={styles.eventschart} websiteId={websiteId} />
+            </Column>
+          </GridRow>
         </>
       )}
       {view && chartLoaded && (

pages/api/websites/[id]/metrics.ts

@@ -139,8 +139,8 @@ export default async (
         startDate,
         endDate,
         column,
-        table,
         filters,
+        type,
       });
 
       return ok(res, data);

queries/analytics/pageview/getPageviewMetrics.ts

@@ -12,8 +12,8 @@ export async function getPageviewMetrics(
       startDate: Date;
       endDate: Date;
       column: Prisma.WebsiteEventScalarFieldEnum | Prisma.SessionScalarFieldEnum;
-      table: string;
       filters: object;
+      type: string;
     },
   ]
 ) {
@@ -30,11 +30,16 @@ async function relationalQuery(
     endDate: Date;
     column: Prisma.WebsiteEventScalarFieldEnum | Prisma.SessionScalarFieldEnum;
     filters: object;
+    type: string;
   },
 ) {
-  const { startDate, endDate, column, filters = {} } = data;
+  const { startDate, endDate, column, filters = {}, type } = data;
   const { rawQuery, parseFilters } = prisma;
-  const params = [startDate, endDate];
+  const params: any = [
+    startDate,
+    endDate,
+    type === 'event' ? EVENT_TYPE.customEvent : EVENT_TYPE.pageView,
+  ];
   const { filterQuery, joinSession } = parseFilters(filters, params);
 
   return rawQuery(
@@ -43,7 +48,7 @@ async function relationalQuery(
       ${joinSession}
     where website_id='${websiteId}'
       and website_event.created_at between $1 and $2
-      and event_type = ${EVENT_TYPE.pageView}
+      and event_type = $3
       ${filterQuery}
     group by 1
     order by 2 desc`,
@@ -58,12 +63,17 @@ async function clickhouseQuery(
     endDate: Date;
     column: Prisma.WebsiteEventScalarFieldEnum | Prisma.SessionScalarFieldEnum;
     filters: object;
+    type: string;
   },
 ) {
-  const { startDate, endDate, column, filters = {} } = data;
+  const { startDate, endDate, column, filters = {}, type } = data;
   const { rawQuery, parseFilters, getBetweenDates } = clickhouse;
   const website = await cache.fetchWebsite(websiteId);
-  const params = [websiteId, website?.revId || 0, EVENT_TYPE.pageView];
+  const params = [
+    websiteId,
+    website?.revId || 0,
+    type === 'event' ? EVENT_TYPE.customEvent : EVENT_TYPE.pageView,
+  ];
   const { filterQuery } = parseFilters(filters, params);
 
   return rawQuery(

queries/analytics/pageview/getPageviews.js

@@ -32,7 +32,7 @@ async function clickhouseQuery(websites, startAt) {
         created_at,
         url
       from event
-      where event_name = ''
+      where event_type = 1
         and ${
           websites && websites.length > 0
             ? `website_id in (${getCommaSeparatedStringFormat(websites)})`

queries/analytics/session/getSessionMetrics.ts

@@ -58,7 +58,7 @@ async function clickhouseQuery(
     from event as x
     where website_id = $1
       and rev_id = $2
-      and event_name = ''
+      and event_type = 1
       and ${getBetweenDates('created_at', startDate, endDate)}
       ${filterQuery}
     group by x

queries/analytics/stats/getWebsiteStats.ts

@@ -67,7 +67,7 @@ async function clickhouseQuery(
          min(created_at) min_time,
          max(created_at) max_time
        from event
-       where event_name = ''
+       where event_type = 1
          and website_id = $1
          and rev_id = $2
          and ${getBetweenDates('created_at', startDate, endDate)}