improve(dashboard): make pages page better (ux and features)

packages/db/src/services/event.service.ts

@@ -617,7 +617,7 @@ export async function getTopPages({
   search?: string;
 }) {
   const res = await chQuery<IServicePage>(`
-    SELECT path, count(*) as count, project_id, first_value(created_at) as first_seen, max(properties['__title']) as title, origin
+    SELECT path, count(*) as count, project_id, first_value(created_at) as first_seen, last_value(properties['__title']) as title, origin
     FROM ${TABLE_NAMES.events} 
     WHERE name = 'screen_view' 
     AND  project_id = ${escape(projectId)} 

packages/db/src/services/overview.service.ts

@@ -389,6 +389,7 @@ export class OverviewService {
       .select([
         'origin',
         'path',
+        `last_value(properties['__title']) as title`,
         'uniq(session_id) as count',
         'round(avg(duration)/1000, 2) as avg_duration',
       ])
@@ -427,12 +428,14 @@ export class OverviewService {
       .with('page_stats', pageStatsQuery)
       .with('bounce_stats', bounceStatsQuery)
       .select<{
+        title: string;
         origin: string;
         path: string;
         avg_duration: number;
         bounce_rate: number;
         sessions: number;
       }>([
+        'p.title',
         'p.origin',
         'p.path',
         'p.avg_duration',

packages/trpc/src/routers/event.ts

@@ -13,14 +13,20 @@ import {
   getEventList,
   getEvents,
   getTopPages,
+  overviewService,
 } from '@openpanel/db';
-import { zChartEventFilter } from '@openpanel/validation';
+import {
+  zChartEventFilter,
+  zRange,
+  zTimeInterval,
+} from '@openpanel/validation';
 
-import { addMinutes, subMinutes } from 'date-fns';
+import { addMinutes, subDays, subMinutes } from 'date-fns';
 import { clone } from 'ramda';
 import { getProjectAccessCached } from '../access';
 import { TRPCAccessError } from '../errors';
 import { createTRPCRouter, protectedProcedure, publicProcedure } from '../trpc';
+import { getChartStartEndDate } from './chart.helpers';
 
 export const eventRouter = createTRPCRouter({
   updateEventMeta: protectedProcedure
@@ -228,10 +234,30 @@ export const eventRouter = createTRPCRouter({
         cursor: z.number().optional(),
         take: z.number().default(20),
         search: z.string().optional(),
+        range: zRange,
+        interval: zTimeInterval,
+        filters: z.array(zChartEventFilter).default([]),
       }),
     )
     .query(async ({ input }) => {
-      return getTopPages(input);
+      const { startDate, endDate } = getChartStartEndDate(input);
+      if (input.search) {
+        input.filters.push({
+          id: 'path',
+          name: 'path',
+          value: [input.search],
+          operator: 'contains',
+        });
+      }
+      return overviewService.getTopPages({
+        projectId: input.projectId,
+        filters: input.filters,
+        startDate,
+        endDate,
+        interval: input.interval,
+        cursor: input.cursor || 1,
+        limit: input.take,
+      });
     }),
 
   origin: protectedProcedure