diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx b/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx
index 5125067e..49781aa4 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.conversions.tsx
@@ -1,4 +1,5 @@
import { EventsTable } from '@/components/events/table';
+import { useEventQueryNamesFilter } from '@/hooks/use-event-query-filters';
import { useTRPC } from '@/integrations/trpc/react';
import { useInfiniteQuery } from '@tanstack/react-query';
import { createFileRoute } from '@tanstack/react-router';
@@ -18,12 +19,14 @@ function Component() {
parseAsIsoDateTime,
);
const [endDate, setEndDate] = useQueryState('endDate', parseAsIsoDateTime);
+ const [eventNames] = useEventQueryNamesFilter();
const query = useInfiniteQuery(
trpc.event.conversions.infiniteQueryOptions(
{
projectId,
startDate: startDate || undefined,
endDate: endDate || undefined,
+ events: eventNames,
},
{
getNextPageParam: (lastPage) => lastPage.meta.next,
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx b/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx
index 867271cc..928e52c5 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId_.events._tabs.stats.tsx
@@ -1,5 +1,7 @@
-import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
-import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import {
+ OverviewFilterButton,
+ OverviewFiltersButtons,
+} from '@/components/overview/filters/overview-filters-buttons';
import { ReportChartShortcut } from '@/components/report-chart/shortcut';
import { Widget, WidgetBody, WidgetHead } from '@/components/widget';
import {
@@ -34,11 +36,7 @@ function Component() {
return (
-
+
diff --git a/apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx b/apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx
index 0b2f6ad3..11b6e3e7 100644
--- a/apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx
+++ b/apps/start/src/routes/_app.$organizationId.$projectId_.pages.tsx
@@ -1,5 +1,5 @@
import { FullPageEmptyState } from '@/components/full-page-empty-state';
-import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
+import { OverviewFilterButton } from '@/components/overview/filters/overview-filters-buttons';
import { OverviewInterval } from '@/components/overview/overview-interval';
import { OverviewRange } from '@/components/overview/overview-range';
import { useOverviewOptions } from '@/components/overview/useOverviewOptions';
@@ -79,7 +79,7 @@ function Component() {
-
+
[] = [
{
accessorKey: 'createdAt',
header: createHeaderColumn('Created at'),
- cell({ row }) {
- const date = row.original.createdAt;
- return formatDate(date);
+ size: ColumnCreatedAt.size,
+ cell: ({ row }) => {
+ const item = row.original;
+ return {item.createdAt};
},
filterFn: 'isWithinRange',
sortingFn: 'datetime',
diff --git a/apps/start/src/utils/date.ts b/apps/start/src/utils/date.ts
index 36163b07..46f6d638 100644
--- a/apps/start/src/utils/date.ts
+++ b/apps/start/src/utils/date.ts
@@ -32,6 +32,8 @@ export function formatDateTime(date: Date) {
hour: '2-digit',
minute: '2-digit',
hour12: false,
+ year:
+ date.getFullYear() === new Date().getFullYear() ? undefined : 'numeric',
}).format(date);
return `${datePart}, ${timePart}`;
diff --git a/apps/start/src/utils/theme.ts b/apps/start/src/utils/theme.ts
index 419bedd1..c70f4931 100644
--- a/apps/start/src/utils/theme.ts
+++ b/apps/start/src/utils/theme.ts
@@ -7,27 +7,25 @@
// export const theme = resolvedTailwindConfig.theme as Record;
const chartColors = [
- '#2563EB',
- '#ff7557',
- '#7fe1d8',
- '#f8bc3c',
- '#b3596e',
- '#72bef4',
- '#ffb27a',
- '#0f7ea0',
- '#3ba974',
- '#febbb2',
- '#cb80dc',
- '#5cb7af',
- '#7856ff',
+ { main: '#2563EB', translucent: 'rgba(37, 99, 235, 0.1)' },
+ { main: '#ff7557', translucent: 'rgba(255, 117, 87, 0.1)' },
+ { main: '#7fe1d8', translucent: 'rgba(127, 225, 216, 0.1)' },
+ { main: '#f8bc3c', translucent: 'rgba(248, 188, 60, 0.1)' },
+ { main: '#b3596e', translucent: 'rgba(179, 89, 110, 0.1)' },
+ { main: '#72bef4', translucent: 'rgba(114, 190, 244, 0.1)' },
+ { main: '#ffb27a', translucent: 'rgba(255, 178, 122, 0.1)' },
+ { main: '#0f7ea0', translucent: 'rgba(15, 126, 160, 0.1)' },
+ { main: '#3ba974', translucent: 'rgba(59, 169, 116, 0.1)' },
+ { main: '#febbb2', translucent: 'rgba(254, 187, 178, 0.1)' },
+ { main: '#cb80dc', translucent: 'rgba(203, 128, 220, 0.1)' },
+ { main: '#5cb7af', translucent: 'rgba(92, 183, 175, 0.1)' },
+ { main: '#7856ff', translucent: 'rgba(120, 86, 255, 0.1)' },
];
export function getChartColor(index: number): string {
- // const colors = theme?.colors ?? {};
- // const chartColors: string[] = Object.keys(colors)
- // .filter((key) => key.startsWith('chart-'))
- // .map((key) => colors[key])
- // .filter((item): item is string => typeof item === 'string');
-
- return chartColors[index % chartColors.length]!;
+ return chartColors[index % chartColors.length]!.main;
+}
+
+export function getChartTranslucentColor(index: number): string {
+ return chartColors[index % chartColors.length]!.translucent;
}
diff --git a/packages/db/src/clickhouse/query-builder.ts b/packages/db/src/clickhouse/query-builder.ts
index fd2afa2d..351ef6b1 100644
--- a/packages/db/src/clickhouse/query-builder.ts
+++ b/packages/db/src/clickhouse/query-builder.ts
@@ -680,12 +680,10 @@ clix.toStartOf = (node: string, interval: IInterval, timezone?: string) => {
return `toStartOfDay(${node})`;
}
case 'week': {
- // Does not respect timezone settings (session_timezone) so we need to pass it manually
- return `toStartOfWeek(${node}${timezone ? `, 1, '${timezone}'` : ''})`;
+ return `toStartOfWeek(toDateTime(${node}))`;
}
case 'month': {
- // Does not respect timezone settings (session_timezone) so we need to pass it manually
- return `toStartOfMonth(${node}${timezone ? `, '${timezone}'` : ''})`;
+ return `toStartOfMonth(toDateTime(${node}))`;
}
}
};
diff --git a/packages/db/src/services/event.service.ts b/packages/db/src/services/event.service.ts
index 195fc887..a182b69b 100644
--- a/packages/db/src/services/event.service.ts
+++ b/packages/db/src/services/event.service.ts
@@ -1,4 +1,4 @@
-import { path, assocPath, last, mergeDeepRight } from 'ramda';
+import { path, assocPath, last, mergeDeepRight, uniq } from 'ramda';
import sqlstring from 'sqlstring';
import { v4 as uuid } from 'uuid';
@@ -561,6 +561,15 @@ export async function getEventList(options: GetEventListOptions) {
...sb.where,
...getEventFiltersWhereClause(filters),
};
+
+ // Join profiles table if any filter uses profile fields
+ const profileFilters = filters
+ .filter((f) => f.name.startsWith('profile.'))
+ .map((f) => f.name.replace('profile.', ''));
+
+ if (profileFilters.length > 0) {
+ sb.joins.profiles = `LEFT ANY JOIN (SELECT id, ${uniq(profileFilters.map((f) => f.split('.')[0])).join(', ')} FROM ${TABLE_NAMES.profiles} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) as profile on profile.id = profile_id`;
+ }
}
sb.orderBy.created_at =
@@ -622,6 +631,15 @@ export async function getEventsCount({
...sb.where,
...getEventFiltersWhereClause(filters),
};
+
+ // Join profiles table if any filter uses profile fields
+ const profileFilters = filters
+ .filter((f) => f.name.startsWith('profile.'))
+ .map((f) => f.name.replace('profile.', ''));
+
+ if (profileFilters.length > 0) {
+ sb.joins.profiles = `LEFT ANY JOIN (SELECT id, ${uniq(profileFilters.map((f) => f.split('.')[0])).join(', ')} FROM ${TABLE_NAMES.profiles} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) as profile on profile.id = profile_id`;
+ }
}
const res = await chQuery<{ count: number }>(
@@ -701,6 +719,7 @@ class EventService {
select,
limit,
orderBy,
+ filters,
}: {
projectId: string;
profileId?: string;
@@ -715,7 +734,14 @@ class EventService {
};
limit?: number;
orderBy?: keyof IClickhouseEvent;
+ filters?: IChartEventFilter[];
}) {
+ // Extract profile filters if any
+ const profileFilters =
+ filters
+ ?.filter((f) => f.name.startsWith('profile.'))
+ .map((f) => f.name.replace('profile.', '')) ?? [];
+
const events = clix(this.client)
.select<
Partial & {
@@ -744,6 +770,12 @@ class EventService {
])
.from('events e')
.where('project_id', '=', projectId)
+ .when(profileFilters.length > 0, (q) => {
+ q.leftJoin(
+ `(SELECT id, ${uniq(profileFilters.map((f) => f.split('.')[0])).join(', ')} FROM ${TABLE_NAMES.profiles} FINAL WHERE project_id = ${sqlstring.escape(projectId)}) as profile`,
+ 'profile.id = e.profile_id',
+ );
+ })
.when(!!where?.event, where?.event)
// Do not limit if profileId, we will limit later since we need the "correct" profileId
.when(!!limit && !profileId, (q) => q.limit(limit!))
@@ -941,6 +973,7 @@ class EventService {
profileId,
limit,
orderBy: 'created_at',
+ filters,
select: {
event: {
deviceId: true,
diff --git a/packages/db/src/services/overview.service.ts b/packages/db/src/services/overview.service.ts
index e0897c17..38ef8cc7 100644
--- a/packages/db/src/services/overview.service.ts
+++ b/packages/db/src/services/overview.service.ts
@@ -200,6 +200,12 @@ export class OverviewService {
])
.rawWhere(this.getRawWhereClause('events', filters));
+ // Use toDate for month/week intervals, toDateTime for others
+ const rollupDate =
+ interval === 'month' || interval === 'week'
+ ? clix.date('1970-01-01')
+ : clix.datetime('1970-01-01 00:00:00');
+
return clix(this.client, timezone)
.with('session_agg', sessionAggQuery)
.with(
@@ -207,14 +213,14 @@ export class OverviewService {
clix(this.client, timezone)
.select(['bounce_rate'])
.from('session_agg')
- .where('date', '=', clix.datetime('1970-01-01 00:00:00')),
+ .where('date', '=', rollupDate),
)
.with(
'daily_stats',
clix(this.client, timezone)
.select(['date', 'bounce_rate'])
.from('session_agg')
- .where('date', '!=', clix.datetime('1970-01-01 00:00:00')),
+ .where('date', '!=', rollupDate),
)
.with('overall_unique_visitors', overallUniqueVisitorsQuery)
.select<{
diff --git a/packages/trpc/src/routers/event.ts b/packages/trpc/src/routers/event.ts
index 0506fe6c..5b5b2d52 100644
--- a/packages/trpc/src/routers/event.ts
+++ b/packages/trpc/src/routers/event.ts
@@ -172,7 +172,7 @@ export const eventRouter = createTRPCRouter({
data: items,
meta: {
next:
- items.length === 50 && lastItem
+ items.length > 0 && lastItem
? lastItem.createdAt.toISOString()
: null,
},
@@ -190,12 +190,19 @@ export const eventRouter = createTRPCRouter({
cursor: z.string().optional(),
startDate: z.date().optional(),
endDate: z.date().optional(),
+ events: z.array(z.string()).optional(),
}),
)
.query(async ({ input }) => {
const conversions = await getConversionEventNames(input.projectId);
+ const filteredConversions = conversions.filter((event) => {
+ if (input.events && input.events.length > 0) {
+ return input.events.includes(event.name);
+ }
+ return true;
+ });
- if (conversions.length === 0) {
+ if (filteredConversions.length === 0) {
return {
data: [],
meta: {
@@ -220,7 +227,7 @@ export const eventRouter = createTRPCRouter({
origin: true,
},
custom: (sb) => {
- sb.where.name = `name IN (${conversions.map((event) => sqlstring.escape(event.name)).join(',')})`;
+ sb.where.name = `name IN (${filteredConversions.map((event) => sqlstring.escape(event.name)).join(',')})`;
},
});
@@ -249,7 +256,7 @@ export const eventRouter = createTRPCRouter({
data: items,
meta: {
next:
- items.length === 50 && lastItem
+ items.length > 0 && lastItem
? lastItem.createdAt.toISOString()
: null,
},
@@ -354,15 +361,11 @@ export const eventRouter = createTRPCRouter({
)
.query(async ({ input }) => {
const res = await chQuery<{ origin: string }>(
- `SELECT DISTINCT origin FROM ${TABLE_NAMES.events} WHERE project_id = ${sqlstring.escape(
+ `SELECT DISTINCT origin, count(id) as count FROM ${TABLE_NAMES.events} WHERE project_id = ${sqlstring.escape(
input.projectId,
- )} AND origin IS NOT NULL AND origin != '' AND toDate(created_at) > now() - INTERVAL 30 DAY ORDER BY origin ASC`,
+ )} AND origin IS NOT NULL AND origin != '' AND toDate(created_at) > now() - INTERVAL 30 DAY GROUP BY origin ORDER BY count DESC LIMIT 3`,
);
- return res.sort((a, b) =>
- a.origin
- .replace(/https?:\/\//, '')
- .localeCompare(b.origin.replace(/https?:\/\//, '')),
- );
+ return res;
}),
});