Show event data values.

This commit is contained in:
Mike Cao 2023-07-10 05:46:45 -07:00
parent c865f43b11
commit cabff7924e
8 changed files with 90 additions and 26 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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;

View File

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

View File

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

View File

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