Resolve issues in event data

components/pages/event-data/EventDataValueTable.js

@@ -36,6 +36,7 @@ export function EventDataValueTable({ data = [], event }) {
           <GridColumn name="dataType" label={formatMessage(labels.type)}>
             {row => DATA_TYPES[row.dataType]}
           </GridColumn>
+          <GridColumn name="fieldValue" label={formatMessage(labels.value)} />
           <GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
             {({ total }) => total.toLocaleString()}
           </GridColumn>

components/pages/websites/WebsiteEventData.js

@@ -5,18 +5,18 @@ import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetric
 import { useDateRange, useApi, usePageQuery } from 'hooks';
 import styles from './WebsiteEventData.module.css';
 
-function useData(websiteId, eventName) {
+function useData(websiteId, event) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
   const { data, error, isLoading } = useQuery(
-    ['event-data:events', { websiteId, startDate, endDate, eventName }],
+    ['event-data:events', { websiteId, startDate, endDate, event }],
     () =>
       get('/event-data/events', {
         websiteId,
         startAt: +startDate,
         endAt: +endDate,
-        eventName,
+        event,
       }),
     { enabled: !!(websiteId && startDate && endDate) },
   );

lib/types.ts

@@ -126,13 +126,8 @@ export interface WebsiteEventMetric {
   y: number;
 }
 
-export interface WebsiteEventDataStats {
+export interface WebsiteEventData {
-  fieldName: string;
+  eventName?: string;
-  dataType: number;
-  total: number;
-}
-
-export interface WebsiteEventDataFields {
   fieldName: string;
   dataType: number;
   fieldValue?: string;

pages/api/event-data/events.ts

@@ -5,16 +5,17 @@ import { NextApiResponse } from 'next';
 import { ok, methodNotAllowed, unauthorized } from 'next-basics';
 import { getEventDataEvents } from 'queries';
 
-export interface EventDataFieldsRequestBody {
+export interface EventDataEventsRequestQuery {
   websiteId: string;
   dateRange: {
     startDate: string;
     endDate: string;
   };
+  event?: string;
 }
 
 export default async (
-  req: NextApiRequestQueryBody<any, EventDataFieldsRequestBody>,
+  req: NextApiRequestQueryBody<EventDataEventsRequestQuery>,
   res: NextApiResponse<any>,
 ) => {
   await useCors(req, res);

pages/api/event-data/fields.ts

@@ -5,7 +5,7 @@ import { NextApiResponse } from 'next';
 import { ok, methodNotAllowed, unauthorized } from 'next-basics';
 import { getEventDataFields } from 'queries';
 
-export interface EventDataFieldsRequestBody {
+export interface EventDataFieldsRequestQuery {
   websiteId: string;
   dateRange: {
     startDate: string;
@@ -15,7 +15,7 @@ export interface EventDataFieldsRequestBody {
 }
 
 export default async (
-  req: NextApiRequestQueryBody<any, EventDataFieldsRequestBody>,
+  req: NextApiRequestQueryBody<EventDataFieldsRequestQuery>,
   res: NextApiResponse<any>,
 ) => {
   await useCors(req, res);

pages/api/event-data/stats.ts

@@ -5,7 +5,7 @@ import { NextApiResponse } from 'next';
 import { ok, methodNotAllowed, unauthorized } from 'next-basics';
 import { getEventDataFields } from 'queries';
 
-export interface EventDataRequestBody {
+export interface EventDataStatsRequestQuery {
   websiteId: string;
   dateRange: {
     startDate: string;
@@ -15,7 +15,7 @@ export interface EventDataRequestBody {
 }
 
 export default async (
-  req: NextApiRequestQueryBody<any, EventDataRequestBody>,
+  req: NextApiRequestQueryBody<EventDataStatsRequestQuery>,
   res: NextApiResponse<any>,
 ) => {
   await useCors(req, res);
@@ -32,18 +32,18 @@ export default async (
     const endDate = new Date(+endAt);
 
     const results = await getEventDataFields(websiteId, { startDate, endDate });
-    const events = new Set();
+    const fields = new Set();
 
     const data = results.reduce(
       (obj, row) => {
-        events.add(row.fieldName);
+        fields.add(row.fieldName);
         obj.records += Number(row.total);
         return obj;
       },
-      { fields: results.length, records: 0 },
+      { events: results.length, records: 0 },
     );
 
-    return ok(res, { ...data, events: events.size });
+    return ok(res, { ...data, fields: fields.size });
   }
 
   return methodNotAllowed(res);

queries/analytics/eventData/getEventDataEvents.ts

@@ -1,11 +1,11 @@
 import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
-import { QueryFilters, WebsiteEventDataFields } from 'lib/types';
+import { QueryFilters, WebsiteEventData } from 'lib/types';
 
 export async function getEventDataEvents(
   ...args: [websiteId: string, filters: QueryFilters]
-): Promise<WebsiteEventDataFields[]> {
+): Promise<WebsiteEventData[]> {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),
@@ -24,7 +24,7 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
         website_event.event_name as "eventName",
         event_data.event_key as "fieldName",
         event_data.data_type as "dataType",
-        event_data.string_value as "value",
+        event_data.string_value as "fieldValue",
         count(*) as "total"
       from event_data
       inner join website_event
@@ -71,7 +71,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
         event_name as eventName,
         event_key as fieldName,
         data_type as dataType,
-        string_value as value,
+        string_value as fieldValue,
         count(*) as total
       from event_data
       where website_id = {websiteId:UUID}

queries/analytics/eventData/getEventDataFields.ts

@@ -1,11 +1,11 @@
 import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
-import { QueryFilters, WebsiteEventDataFields } from 'lib/types';
+import { QueryFilters, WebsiteEventData } from 'lib/types';
 
 export async function getEventDataFields(
   ...args: [websiteId: string, filters: QueryFilters & { field?: string }]
-): Promise<WebsiteEventDataFields[]> {
+): Promise<WebsiteEventData[]> {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
     [CLICKHOUSE]: () => clickhouseQuery(...args),