Show event data values.

components/messages.js

@@ -159,6 +159,7 @@ export const labels = defineMessages({
   unique: { id: 'labels.unique', defaultMessage: 'Unique' },
   value: { id: 'labels.value', defaultMessage: 'Value' },
   overview: { id: 'labels.overview', defaultMessage: 'Overview' },
+  totalRecords: { id: 'labels.total-records', defaultMessage: 'Total records' },
 });
 
 export const messages = defineMessages({

components/pages/event-data/EventDataMetricsBar.js

@@ -23,7 +23,7 @@ export function EventDataMetricsBar({ websiteId }) {
   );
 
   return (
-    <Row>
+    <Row className={styles.row}>
       <Column defaultSize={12} xl={8}>
         <MetricsBar isLoading={isLoading} isFetched={isFetched} error={error}>
           {!error && isFetched && (

components/pages/event-data/EventDataMetricsBar.module.css

@@ -40,3 +40,7 @@
     flex-basis: calc(50% - 20px);
   }
 }
+
+.row {
+  border-bottom: 1px solid var(--border-color);
+}

components/pages/event-data/EventDataTable.js

@@ -1,14 +1,28 @@
+import Link from 'next/link';
 import { GridTable, GridColumn } from 'react-basics';
-import { useMessages } from 'hooks';
+import { useMessages, usePageQuery } from 'hooks';
+import Empty from 'components/common/Empty';
 
 export function EventDataTable({ data = [], showValue }) {
   const { formatMessage, labels } = useMessages();
+  const { resolveUrl } = usePageQuery();
+
+  if (data.length === 0) {
+    return <Empty />;
+  }
 
   return (
     <GridTable data={data}>
-      <GridColumn name="field" label={formatMessage(labels.field)} />
-      <GridColumn name="value" label={formatMessage(labels.value)} hidden={!showValue} />
-      <GridColumn name="total" label={formatMessage(labels.total)}>
+      <GridColumn name="field" label={formatMessage(labels.field)}>
+        {row => {
+          return (
+            <Link href={resolveUrl({ view: row.field })} shallow={true}>
+              {row.field}
+            </Link>
+          );
+        }}
+      </GridColumn>
+      <GridColumn name="total" label={formatMessage(labels.totalRecords)}>
         {({ total }) => total.toLocaleString()}
       </GridColumn>
     </GridTable>

components/pages/event-data/EventDataValueTable.js

@@ -0,0 +1,44 @@
+import { GridTable, GridColumn, Button, Icon, Text, Flexbox } 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';
+
+export function EventDataTable({ data = [], field }) {
+  const { formatMessage, labels } = useMessages();
+  const { resolveUrl } = usePageQuery();
+
+  const Title = () => {
+    return (
+      <>
+        <Link href={resolveUrl({ view: undefined })}>
+          <Button>
+            <Icon rotate={180}>
+              <Icons.ArrowRight />
+            </Icon>
+            <Text>{formatMessage(labels.back)}</Text>
+          </Button>
+        </Link>
+        <Text>{field}</Text>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <PageHeader title={<Title />} />
+      {data.length <= 0 && <Empty />}
+      {data.length > 0 && (
+        <GridTable data={data}>
+          <GridColumn name="value" label={formatMessage(labels.value)} />
+          <GridColumn name="total" label={formatMessage(labels.totalRecords)} width="200px">
+            {({ total }) => total.toLocaleString()}
+          </GridColumn>
+        </GridTable>
+      )}
+    </>
+  );
+}
+
+export default EventDataTable;

components/pages/websites/WebsiteEventData.js

@@ -1,14 +1,15 @@
+import { Flexbox } from 'react-basics';
 import EventDataTable from 'components/pages/event-data/EventDataTable';
+import EventDataValueTable from 'components/pages/event-data/EventDataValueTable';
 import { EventDataMetricsBar } from 'components/pages/event-data/EventDataMetricsBar';
 import { useDateRange, useApi, usePageQuery } from 'hooks';
-import styles from './WebsiteEventData.module.css';
 
 function useFields(websiteId, field) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
   const { data, error, isLoading } = useQuery(
-    ['event-data:fields', websiteId, startDate, endDate],
+    ['event-data:fields', { websiteId, startDate, endDate, field }],
     () =>
       get('/event-data', {
         websiteId,
@@ -23,13 +24,16 @@ function useFields(websiteId, field) {
 }
 
 export default function WebsiteEventData({ websiteId }) {
-  const { data } = useFields(websiteId);
-  const { query } = usePageQuery();
+  const {
+    query: { view },
+  } = usePageQuery();
+  const { data } = useFields(websiteId, view);
 
   return (
-    <div className={styles.container}>
+    <Flexbox direction="column" gap={20}>
       <EventDataMetricsBar websiteId={websiteId} />
-      <EventDataTable data={data} showValue={query?.field} />
-    </div>
+      {!view && <EventDataTable data={data} />}
+      {view && <EventDataValueTable field={view} data={data} />}
+    </Flexbox>
   );
 }

components/pages/websites/WebsiteEventData.module.css

@@ -2,8 +2,3 @@
   display: flex;
   flex-direction: column;
 }
-
-.header {
-  display: flex;
-  justify-content: flex-end;
-}

queries/analytics/eventData/getEventData.ts

@@ -1,9 +1,9 @@
+import prisma from 'lib/prisma';
 import clickhouse from 'lib/clickhouse';
 import { CLICKHOUSE, PRISMA, runQuery } from 'lib/db';
 import { WebsiteEventDataMetric } from 'lib/types';
 import { loadWebsite } from 'lib/query';
 import { DEFAULT_CREATED_AT } from 'lib/constants';
-import prisma from '../../../lib/prisma';
 
 export async function getEventData(
   ...args: [websiteId: string, startDate: Date, endDate: Date, field?: string]
@@ -22,15 +22,16 @@ async function relationalQuery(websiteId: string, startDate: Date, endDate: Date
   if (field) {
     return rawQuery(
       `select event_key as field,
+              string_value as value,
               count(*)  as total
        from event_data
        where website_id = $1${toUuid()}
           and event_key = $2
          and created_at >= $3
          and created_at between $4 and $5
-       group by event_key
-       order by 2 desc, 1 asc
-           limit 1000
+       group by event_key, string_value
+       order by 3 desc, 2 desc, 1 asc
+           limit 100
       `,
       [websiteId, field, resetDate, startDate, endDate] as any,
     );
@@ -46,7 +47,7 @@ async function relationalQuery(websiteId: string, startDate: Date, endDate: Date
           and created_at between $3 and $4
         group by event_key
         order by 2 desc, 1 asc
-        limit 1000
+        limit 100
     `,
     [websiteId, resetDate, startDate, endDate] as any,
   );
@@ -61,15 +62,16 @@ async function clickhouseQuery(websiteId: string, startDate: Date, endDate: Date
     return rawQuery(
       `select
         event_key as field,
+        string_value as value,
         count(*) as total
         from event_data
         where website_id = {websiteId:UUID}
           and event_key = {field:String}
           and created_at >= ${getDateFormat(resetDate)}
           and ${getBetweenDates('created_at', startDate, endDate)}
-        group by event_key
-        order by 2 desc, 1 asc
-        limit 1000
+        group by event_key, string_value
+        order by 3 desc, 2 desc, 1 asc
+        limit 100
     `,
       { websiteId, field },
     );
@@ -85,7 +87,7 @@ async function clickhouseQuery(websiteId: string, startDate: Date, endDate: Date
           and ${getBetweenDates('created_at', startDate, endDate)}
         group by event_key
         order by 2 desc, 1 asc
-        limit 1000
+        limit 100
     `,
     { websiteId },
   );