Fixed event data display.

components/pages/event-data/EventDataTable.js

@@ -2,6 +2,7 @@ import Link from 'next/link';
 import { GridTable, GridColumn } from 'react-basics';
 import { useMessages, usePageQuery } from 'hooks';
 import Empty from 'components/common/Empty';
+import { DATA_TYPES } from 'lib/constants';
 
 export function EventDataTable({ data = [] }) {
   const { formatMessage, labels } = useMessages();
@@ -15,7 +16,7 @@ export function EventDataTable({ data = [] }) {
     <GridTable data={data}>
       <GridColumn name="eventName" label={formatMessage(labels.event)}>
         {row => (
-          <Link href={resolveUrl({ eventName: row.event })} shallow={true}>
+          <Link href={resolveUrl({ eventName: row.eventName })} shallow={true}>
             {row.eventName}
           </Link>
         )}
@@ -24,7 +25,7 @@ export function EventDataTable({ data = [] }) {
         {row => row.fieldName}
       </GridColumn>
       <GridColumn name="dataType" label={formatMessage(labels.type)}>
-        {row => row.dataType}
+        {row => DATA_TYPES[row.dataType]}
       </GridColumn>
       <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
         {({ total }) => total.toLocaleString()}

components/pages/event-data/EventDataValueTable.js

@@ -1,18 +1,19 @@
-import { GridTable, GridColumn, Button, Icon, Text, Flexbox } from 'react-basics';
+import { GridTable, GridColumn, Button, Icon, Text } from 'react-basics';
 import { useMessages, usePageQuery } from 'hooks';
 import Link from 'next/link';
 import Icons from 'components/icons';
 import PageHeader from 'components/layout/PageHeader';
 import Empty from 'components/common/Empty';
+import { DATA_TYPES } from 'lib/constants';
 
-export function EventDataValueTable({ data = [], event }) {
+export function EventDataValueTable({ data = [], eventName }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl } = usePageQuery();
 
   const Title = () => {
     return (
       <>
-        <Link href={resolveUrl({ event: undefined })}>
+        <Link href={resolveUrl({ eventName: undefined })}>
           <Button>
             <Icon rotate={180}>
               <Icons.ArrowRight />
@@ -20,7 +21,7 @@ export function EventDataValueTable({ data = [], event }) {
             <Text>{formatMessage(labels.back)}</Text>
           </Button>
         </Link>
-        <Text>{event}</Text>
+        <Text>{eventName}</Text>
       </>
     );
   };
@@ -31,8 +32,10 @@ export function EventDataValueTable({ data = [], event }) {
       {data.length <= 0 && <Empty />}
       {data.length > 0 && (
         <GridTable data={data}>
-          <GridColumn name="field" label={formatMessage(labels.field)} />
-          <GridColumn name="value" label={formatMessage(labels.value)} />
+          <GridColumn name="fieldName" label={formatMessage(labels.field)} />
+          <GridColumn name="dataType" label={formatMessage(labels.type)}>
+            {row => DATA_TYPES[row.dataType]}
+          </GridColumn>
           <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, event) {
+function useData(websiteId, eventName) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
   const { data, error, isLoading } = useQuery(
-    ['event-data:events', { websiteId, startDate, endDate, event }],
+    ['event-data:events', { websiteId, startDate, endDate, eventName }],
     () =>
       get('/event-data/events', {
         websiteId,
         startAt: +startDate,
         endAt: +endDate,
-        event,
+        eventName,
       }),
     { enabled: !!(websiteId && startDate && endDate) },
   );
@@ -26,15 +26,15 @@ function useData(websiteId, event) {
 
 export default function WebsiteEventData({ websiteId }) {
   const {
-    query: { event },
+    query: { eventName },
   } = usePageQuery();
-  const { data } = useData(websiteId, event);
+  const { data } = useData(websiteId, eventName);
 
   return (
     <Flexbox className={styles.container} direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
-      {!event && <EventDataTable data={data} />}
-      {event && <EventDataValueTable event={event} data={data} />}
+      {!eventName && <EventDataTable data={data} />}
+      {eventName && <EventDataValueTable eventName={eventName} data={data} />}
     </Flexbox>
   );
 }

queries/analytics/eventData/getEventDataEvents.ts

@@ -76,7 +76,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
       from event_data
       where website_id = {websiteId:UUID}
         and created_at between {startDate:DateTime} and {endDate:DateTime}
-        and event_name = {event:String}
+        and event_name = {eventName:String}
       group by event_key, data_type, string_value, event_name
       order by 1 asc, 2 asc, 3 asc, 4 desc
       limit 100