refactor Property components to be resused for both session/event data. Implement session-data screens + filtering. Remove all event-data specific compoenents/queries

src/components/hooks/index.ts

@@ -17,17 +17,9 @@ export * from './queries/useBoardsQuery';
 export * from './queries/useDashboardQuery';
 export * from './queries/useDateRangeQuery';
 export * from './queries/useDeleteQuery';
-export * from './queries/useEventDataArraySeriesQuery';
-export * from './queries/useEventDataDateSeriesQuery';
-export * from './queries/useEventDataEventsQuery';
-export * from './queries/useEventDataFieldsQuery';
-export * from './queries/useEventDataNumericSeriesQuery';
-export * from './queries/useEventDataNumericStatsQuery';
 export * from './queries/useEventDataPivotQuery';
 export * from './queries/useEventDataPropertiesQuery';
-export * from './queries/useEventDataPropertySeriesQuery';
 export * from './queries/useEventDataQuery';
-export * from './queries/useEventDataValuesQuery';
 export * from './queries/useLinkQuery';
 export * from './queries/useLinkSharesQuery';
 export * from './queries/useLinksQuery';
@@ -35,6 +27,13 @@ export * from './queries/useLoginQuery';
 export * from './queries/usePixelQuery';
 export * from './queries/usePixelSharesQuery';
 export * from './queries/usePixelsQuery';
+export * from './queries/usePropertyArraySeriesQuery';
+export * from './queries/usePropertyDateSeriesQuery';
+export * from './queries/usePropertyFieldsQuery';
+export * from './queries/usePropertyNumericSeriesQuery';
+export * from './queries/usePropertyNumericStatsQuery';
+export * from './queries/usePropertySeriesQuery';
+export * from './queries/usePropertyValuesQuery';
 export * from './queries/useRealtimeQuery';
 export * from './queries/useReplayQuery';
 export * from './queries/useReplaySavedQuery';
@@ -46,7 +45,9 @@ export * from './queries/useRevenueSessionsQuery';
 export * from './queries/useSavedReplaysQuery';
 export * from './queries/useSessionActivityQuery';
 export * from './queries/useSessionDataPropertiesQuery';
+export * from './queries/useSessionDataPivotQuery';
 export * from './queries/useSessionDataQuery';
+export * from './queries/useSessionDataStatsQuery';
 export * from './queries/useSessionDataValuesQuery';
 export * from './queries/useSessionReplaysQuery';
 export * from './queries/useShareTokenQuery';

src/components/hooks/queries/useEventDataArraySeriesQuery.ts

@@ -1,47 +0,0 @@
-import { serializeEventPropertyFilters } from '@/lib/params';
-import type { EventDataSeriesPoint, EventPropertyFilter, ReactQueryOptions } from '@/lib/types';
-import { useApi } from '../useApi';
-import { useDateParameters } from '../useDateParameters';
-import { useFilterParameters } from '../useFilterParameters';
-
-export function useEventDataArraySeriesQuery(
-  websiteId: string,
-  eventName: string,
-  propertyName: string,
-  eventFilters: EventPropertyFilter[] = [],
-  options?: ReactQueryOptions,
-) {
-  const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
-  const params = useFilterParameters();
-
-  return useQuery<EventDataSeriesPoint[]>({
-    queryKey: [
-      'websites:event-data-pivot:array-series',
-      {
-        websiteId,
-        eventName,
-        propertyName,
-        eventFilters,
-        startAt,
-        endAt,
-        unit,
-        timezone,
-        ...params,
-      },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/event-data-pivot/array-series`, {
-        eventName,
-        propertyName,
-        startAt,
-        endAt,
-        unit,
-        timezone,
-        ...serializeEventPropertyFilters(eventFilters),
-        ...params,
-      }),
-    enabled: !!(websiteId && eventName && propertyName),
-    ...options,
-  });
-}

src/components/hooks/queries/useEventDataDateSeriesQuery.ts

@@ -1,45 +0,0 @@
-import { serializeEventPropertyFilters } from '@/lib/params';
-import type { EventDataDateSeriesPoint, EventPropertyFilter, ReactQueryOptions } from '@/lib/types';
-import { useApi } from '../useApi';
-import { useDateParameters } from '../useDateParameters';
-import { useFilterParameters } from '../useFilterParameters';
-
-export function useEventDataDateSeriesQuery(
-  websiteId: string,
-  eventName: string,
-  propertyName: string,
-  eventFilters: EventPropertyFilter[] = [],
-  options?: ReactQueryOptions,
-) {
-  const { get, useQuery } = useApi();
-  const { startAt, endAt, timezone } = useDateParameters();
-  const params = useFilterParameters();
-
-  return useQuery<EventDataDateSeriesPoint[]>({
-    queryKey: [
-      'websites:event-data-pivot:date-series',
-      {
-        websiteId,
-        eventName,
-        propertyName,
-        eventFilters,
-        startAt,
-        endAt,
-        timezone,
-        ...params,
-      },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/event-data-pivot/date-series`, {
-        eventName,
-        propertyName,
-        startAt,
-        endAt,
-        timezone,
-        ...serializeEventPropertyFilters(eventFilters),
-        ...params,
-      }),
-    enabled: !!(websiteId && eventName && propertyName),
-    ...options,
-  });
-}

src/components/hooks/queries/useEventDataEventsQuery.ts

@@ -1,27 +0,0 @@
-import type { ReactQueryOptions } from '@/lib/types';
-import { useApi } from '../useApi';
-import { useDateParameters } from '../useDateParameters';
-import { useFilterParameters } from '../useFilterParameters';
-
-export function useEventDataEventsQuery(websiteId: string, options?: ReactQueryOptions) {
-  const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
-  const filters = useFilterParameters();
-
-  return useQuery({
-    queryKey: [
-      'websites:event-data:events',
-      { websiteId, startAt, endAt, unit, timezone, ...filters },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/event-data/events`, {
-        startAt,
-        endAt,
-        unit,
-        timezone,
-        ...filters,
-      }),
-    enabled: !!websiteId,
-    ...options,
-  });
-}

src/components/hooks/queries/useEventDataFieldsQuery.ts

@@ -1,32 +0,0 @@
-import type { ReactQueryOptions } from '@/lib/types';
-import { useApi } from '../useApi';
-import { useDateParameters } from '../useDateParameters';
-import { useFilterParameters } from '../useFilterParameters';
-
-export function useEventDataFieldsQuery(
-  websiteId: string,
-  eventName?: string,
-  options?: ReactQueryOptions,
-) {
-  const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
-  const params = useFilterParameters();
-
-  return useQuery<any>({
-    queryKey: [
-      'websites:event-data:fields',
-      { websiteId, eventName, startAt, endAt, unit, timezone, ...params },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/event-data/fields`, {
-        event: eventName,
-        startAt,
-        endAt,
-        unit,
-        timezone,
-        ...params,
-      }),
-    enabled: !!websiteId,
-    ...options,
-  });
-}

src/components/hooks/queries/useEventDataNumericSeriesQuery.ts

@@ -1,39 +0,0 @@
-import { serializeEventPropertyFilters } from '@/lib/params';
-import type { EventPropertyFilter, ReactQueryOptions } from '@/lib/types';
-import { useApi } from '../useApi';
-import { useDateParameters } from '../useDateParameters';
-import { useFilterParameters } from '../useFilterParameters';
-
-export function useEventDataNumericSeriesQuery(
-  websiteId: string,
-  eventName: string,
-  propertyName: string,
-  metric: 'sum' | 'avg' | 'count',
-  eventFilters: EventPropertyFilter[] = [],
-  options?: ReactQueryOptions,
-) {
-  const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
-  const params = useFilterParameters();
-
-  return useQuery<any>({
-    queryKey: [
-      'websites:event-data-pivot:numeric-series',
-      { websiteId, eventName, propertyName, metric, eventFilters, startAt, endAt, unit, timezone, ...params },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/event-data-pivot/numeric-series`, {
-        eventName,
-        propertyName,
-        metric,
-        startAt,
-        endAt,
-        unit,
-        timezone,
-        ...serializeEventPropertyFilters(eventFilters),
-        ...params,
-      }),
-    enabled: !!(websiteId && eventName && propertyName),
-    ...options,
-  });
-}

src/components/hooks/queries/useEventDataNumericStatsQuery.ts

@@ -1,36 +0,0 @@
-import { serializeEventPropertyFilters } from '@/lib/params';
-import type { EventDataNumericStats, EventPropertyFilter, ReactQueryOptions } from '@/lib/types';
-import { useApi } from '../useApi';
-import { useDateParameters } from '../useDateParameters';
-import { useFilterParameters } from '../useFilterParameters';
-
-export function useEventDataNumericStatsQuery(
-  websiteId: string,
-  eventName: string,
-  propertyName: string,
-  eventFilters: EventPropertyFilter[] = [],
-  options?: ReactQueryOptions<EventDataNumericStats>,
-) {
-  const { get, useQuery } = useApi();
-  const { startAt, endAt, timezone } = useDateParameters();
-  const params = useFilterParameters();
-
-  return useQuery<EventDataNumericStats>({
-    queryKey: [
-      'websites:event-data-pivot:numeric-stats',
-      { websiteId, eventName, propertyName, eventFilters, startAt, endAt, timezone, ...params },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/event-data-pivot/numeric-stats`, {
-        eventName,
-        propertyName,
-        startAt,
-        endAt,
-        timezone,
-        ...serializeEventPropertyFilters(eventFilters),
-        ...params,
-      }),
-    enabled: !!(websiteId && eventName && propertyName),
-    ...options,
-  });
-}

src/components/hooks/queries/useEventDataPropertiesQuery.ts

@@ -6,7 +6,7 @@ import { useFilterParameters } from '../useFilterParameters';
 export function useEventDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
   const { startAt, endAt, unit, timezone } = useDateParameters();
-  const filters = useFilterParameters();
+  const filters = useFilterParameters({ includePagination: false });
 
   return useQuery<any>({
     queryKey: [

src/components/hooks/queries/useEventDataPropertySeriesQuery.ts

@@ -1,37 +0,0 @@
-import { serializeEventPropertyFilters } from '@/lib/params';
-import type { EventDataSeriesPoint, EventPropertyFilter, ReactQueryOptions } from '@/lib/types';
-import { useApi } from '../useApi';
-import { useDateParameters } from '../useDateParameters';
-import { useFilterParameters } from '../useFilterParameters';
-
-export function useEventDataPropertySeriesQuery(
-  websiteId: string,
-  eventName: string,
-  propertyName: string,
-  eventFilters: EventPropertyFilter[] = [],
-  options?: ReactQueryOptions,
-) {
-  const { get, useQuery } = useApi();
-  const { startAt, endAt, unit, timezone } = useDateParameters();
-  const params = useFilterParameters();
-
-  return useQuery<EventDataSeriesPoint[]>({
-    queryKey: [
-      'websites:event-data-pivot:property-series',
-      { websiteId, eventName, propertyName, eventFilters, startAt, endAt, unit, timezone, ...params },
-    ],
-    queryFn: () =>
-      get(`/websites/${websiteId}/event-data-pivot/property-series`, {
-        eventName,
-        propertyName,
-        startAt,
-        endAt,
-        unit,
-        timezone,
-        ...serializeEventPropertyFilters(eventFilters),
-        ...params,
-      }),
-    enabled: !!(websiteId && eventName && propertyName),
-    ...options,
-  });
-}

src/components/hooks/queries/useEventStatsQuery.ts

@@ -26,7 +26,7 @@ export function useEventStatsQuery(
 ) {
   const { get, useQuery } = useApi();
   const { startAt, endAt } = useDateParameters();
-  const filters = useFilterParameters();
+  const filters = useFilterParameters({ includePagination: false });
 
   return useQuery<EventStatsApiResponse, Error, EventStatsData>({
     queryKey: ['websites:events:stats', { websiteId, startAt, endAt, ...filters }],

src/components/hooks/queries/usePropertyArraySeriesQuery.ts

@@ -0,0 +1,44 @@
+import { serializePropertyFilters } from '@/lib/params';
+import type { EventDataSeriesPoint, PropertyFilter, ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+import type { PropertyDataSource } from './usePropertyFieldsQuery';
+
+export function usePropertyArraySeriesQuery(
+  source: PropertyDataSource,
+  websiteId: string,
+  propertyName: string,
+  propertyFilters: PropertyFilter[] = [],
+  eventName?: string,
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery<EventDataSeriesPoint[]>({
+    queryKey: [
+      `websites:${source}-data:array-series`,
+      { websiteId, propertyName, eventName, propertyFilters, startAt, endAt, unit, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(
+        source === 'event'
+          ? `/websites/${websiteId}/event-data-pivot/array-series`
+          : `/websites/${websiteId}/session-data/array-series`,
+        {
+          ...(source === 'event' ? { eventName } : {}),
+          propertyName,
+          startAt,
+          endAt,
+          unit,
+          timezone,
+          ...serializePropertyFilters(propertyFilters),
+          ...params,
+        },
+      ),
+    enabled: !!(websiteId && propertyName && (source === 'session' || eventName)),
+    ...options,
+  });
+}

src/components/hooks/queries/usePropertyDateSeriesQuery.ts

@@ -0,0 +1,43 @@
+import { serializePropertyFilters } from '@/lib/params';
+import type { EventDataDateSeriesPoint, PropertyFilter, ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+import type { PropertyDataSource } from './usePropertyFieldsQuery';
+
+export function usePropertyDateSeriesQuery(
+  source: PropertyDataSource,
+  websiteId: string,
+  propertyName: string,
+  propertyFilters: PropertyFilter[] = [],
+  eventName?: string,
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery<EventDataDateSeriesPoint[]>({
+    queryKey: [
+      `websites:${source}-data:date-series`,
+      { websiteId, propertyName, eventName, propertyFilters, startAt, endAt, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(
+        source === 'event'
+          ? `/websites/${websiteId}/event-data-pivot/date-series`
+          : `/websites/${websiteId}/session-data/date-series`,
+        {
+          ...(source === 'event' ? { eventName } : {}),
+          propertyName,
+          startAt,
+          endAt,
+          timezone,
+          ...serializePropertyFilters(propertyFilters),
+          ...params,
+        },
+      ),
+    enabled: !!(websiteId && propertyName && (source === 'session' || eventName)),
+    ...options,
+  });
+}

src/components/hooks/queries/usePropertyFieldsQuery.ts

@@ -0,0 +1,40 @@
+import type { ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+
+export type PropertyDataSource = 'event' | 'session';
+
+export function usePropertyFieldsQuery(
+  source: PropertyDataSource,
+  websiteId: string,
+  eventName?: string,
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery<any>({
+    queryKey: [
+      `websites:${source}-data:fields`,
+      { websiteId, eventName, startAt, endAt, unit, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(
+        source === 'event'
+          ? `/websites/${websiteId}/event-data/fields`
+          : `/websites/${websiteId}/session-data/properties`,
+        {
+          ...(source === 'event' ? { event: eventName } : {}),
+          startAt,
+          endAt,
+          unit,
+          timezone,
+          ...params,
+        },
+      ),
+    enabled: !!(websiteId && (source === 'session' || eventName)),
+    ...options,
+  });
+}

src/components/hooks/queries/usePropertyNumericSeriesQuery.ts

@@ -0,0 +1,46 @@
+import { serializePropertyFilters } from '@/lib/params';
+import type { PropertyFilter, ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+import type { PropertyDataSource } from './usePropertyFieldsQuery';
+
+export function usePropertyNumericSeriesQuery(
+  source: PropertyDataSource,
+  websiteId: string,
+  propertyName: string,
+  metric: 'sum' | 'avg' | 'count',
+  propertyFilters: PropertyFilter[] = [],
+  eventName?: string,
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery<any>({
+    queryKey: [
+      `websites:${source}-data:numeric-series`,
+      { websiteId, propertyName, metric, eventName, propertyFilters, startAt, endAt, unit, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(
+        source === 'event'
+          ? `/websites/${websiteId}/event-data-pivot/numeric-series`
+          : `/websites/${websiteId}/session-data/numeric-series`,
+        {
+          ...(source === 'event' ? { eventName } : {}),
+          propertyName,
+          metric,
+          startAt,
+          endAt,
+          unit,
+          timezone,
+          ...serializePropertyFilters(propertyFilters),
+          ...params,
+        },
+      ),
+    enabled: !!(websiteId && propertyName && (source === 'session' || eventName)),
+    ...options,
+  });
+}

src/components/hooks/queries/usePropertyNumericStatsQuery.ts

@@ -0,0 +1,43 @@
+import { serializePropertyFilters } from '@/lib/params';
+import type { EventDataNumericStats, PropertyFilter, ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+import type { PropertyDataSource } from './usePropertyFieldsQuery';
+
+export function usePropertyNumericStatsQuery(
+  source: PropertyDataSource,
+  websiteId: string,
+  propertyName: string,
+  propertyFilters: PropertyFilter[] = [],
+  eventName?: string,
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery<EventDataNumericStats>({
+    queryKey: [
+      `websites:${source}-data:numeric-stats`,
+      { websiteId, propertyName, eventName, propertyFilters, startAt, endAt, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(
+        source === 'event'
+          ? `/websites/${websiteId}/event-data-pivot/numeric-stats`
+          : `/websites/${websiteId}/session-data/numeric-stats`,
+        {
+          ...(source === 'event' ? { eventName } : {}),
+          propertyName,
+          startAt,
+          endAt,
+          timezone,
+          ...serializePropertyFilters(propertyFilters),
+          ...params,
+        },
+      ),
+    enabled: !!(websiteId && propertyName && (source === 'session' || eventName)),
+    ...options,
+  });
+}

src/components/hooks/queries/usePropertySeriesQuery.ts

@@ -0,0 +1,44 @@
+import { serializePropertyFilters } from '@/lib/params';
+import type { EventDataSeriesPoint, PropertyFilter, ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+import type { PropertyDataSource } from './usePropertyFieldsQuery';
+
+export function usePropertySeriesQuery(
+  source: PropertyDataSource,
+  websiteId: string,
+  propertyName: string,
+  propertyFilters: PropertyFilter[] = [],
+  eventName?: string,
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery<EventDataSeriesPoint[]>({
+    queryKey: [
+      `websites:${source}-data:property-series`,
+      { websiteId, propertyName, eventName, propertyFilters, startAt, endAt, unit, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(
+        source === 'event'
+          ? `/websites/${websiteId}/event-data-pivot/property-series`
+          : `/websites/${websiteId}/session-data/property-series`,
+        {
+          ...(source === 'event' ? { eventName } : {}),
+          propertyName,
+          startAt,
+          endAt,
+          unit,
+          timezone,
+          ...serializePropertyFilters(propertyFilters),
+          ...params,
+        },
+      ),
+    enabled: !!(websiteId && propertyName && (source === 'session' || eventName)),
+    ...options,
+  });
+}

src/components/hooks/queries/usePropertyValuesQuery.ts

@@ -0,0 +1,46 @@
+import { serializePropertyFilters } from '@/lib/params';
+import type { PropertyFilter, ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+import type { PropertyDataSource } from './usePropertyFieldsQuery';
+
+export function usePropertyValuesQuery(
+  source: PropertyDataSource,
+  websiteId: string,
+  propertyName: string,
+  dataType?: number,
+  propertyFilters: PropertyFilter[] = [],
+  eventName?: string,
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery<any>({
+    queryKey: [
+      `websites:${source}-data:values`,
+      { websiteId, propertyName, dataType, eventName, propertyFilters, startAt, endAt, unit, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(
+        source === 'event'
+          ? `/websites/${websiteId}/event-data/values`
+          : `/websites/${websiteId}/session-data/values`,
+        {
+          ...(source === 'event' ? { event: eventName } : {}),
+          startAt,
+          endAt,
+          unit,
+          timezone,
+          propertyName,
+          dataType,
+          ...serializePropertyFilters(propertyFilters),
+          ...params,
+        },
+      ),
+    enabled: !!(websiteId && propertyName && (source === 'session' || eventName)),
+    ...options,
+  });
+}

src/components/hooks/queries/useResultQuery.ts

@@ -11,7 +11,7 @@ export function useResultQuery<T = any>(
   const { websiteId, ...parameters } = params;
   const { post, useQuery } = useApi();
   const { startDate, endDate, timezone, unit } = useDateParameters();
-  const filters = useFilterParameters();
+  const filters = useFilterParameters({ includePagination: false });
 
   return useQuery<T>({
     queryKey: [

src/components/hooks/queries/useSessionDataPivotQuery.ts

@@ -1,34 +1,33 @@
-import type { ReactQueryOptions } from '@/lib/types';
+import { serializePropertyFilters } from '@/lib/params';
+import type { PropertyFilter, ReactQueryOptions } from '@/lib/types';
 import { useApi } from '../useApi';
 import { useDateParameters } from '../useDateParameters';
 import { useFilterParameters } from '../useFilterParameters';
 
-export function useEventDataValuesQuery(
+export function useSessionDataPivotQuery(
   websiteId: string,
-  event: string,
   propertyName: string,
-  dataType?: number,
+  propertyFilters: PropertyFilter[] = [],
   options?: ReactQueryOptions,
 ) {
   const { get, useQuery } = useApi();
   const { startAt, endAt, unit, timezone } = useDateParameters();
-  const filters = useFilterParameters();
+  const params = useFilterParameters();
 
-  return useQuery<any>({
+  return useQuery({
     queryKey: [
-      'websites:event-data:values',
-      { websiteId, startAt, endAt, unit, timezone, ...filters, event, propertyName, dataType },
+      'websites:session-data-pivot',
+      { websiteId, propertyName, propertyFilters, startAt, endAt, unit, timezone, ...params },
     ],
     queryFn: () =>
-      get(`/websites/${websiteId}/event-data/values`, {
+      get(`/websites/${websiteId}/session-data-pivot`, {
         startAt,
         endAt,
         unit,
         timezone,
-        ...filters,
-        event,
         propertyName,
-        dataType,
+        ...serializePropertyFilters(propertyFilters),
+        ...params,
       }),
     enabled: !!(websiteId && propertyName),
     ...options,

src/components/hooks/queries/useSessionDataPropertiesQuery.ts

@@ -1,17 +1,36 @@
 import type { ReactQueryOptions } from '@/lib/types';
+import { serializePropertyFilters } from '@/lib/params';
+import type { PropertyFilter } from '@/lib/types';
 import { useApi } from '../useApi';
 import { useDateParameters } from '../useDateParameters';
 import { useFilterParameters } from '../useFilterParameters';
 
-export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions) {
+export function useSessionDataPropertiesQuery(
+  websiteId: string,
+  params?: {
+    selectedPropertyName?: string;
+    propertyFilters?: PropertyFilter[];
+  },
+  options?: ReactQueryOptions,
+) {
   const { get, useQuery } = useApi();
   const { startAt, endAt, unit, timezone } = useDateParameters();
-  const filters = useFilterParameters();
+  const filters = useFilterParameters({ includePagination: false });
+  const { selectedPropertyName, propertyFilters = [] } = params || {};
 
   return useQuery<any>({
     queryKey: [
       'websites:session-data:properties',
-      { websiteId, startAt, endAt, unit, timezone, ...filters },
+      {
+        websiteId,
+        selectedPropertyName,
+        propertyFilters,
+        startAt,
+        endAt,
+        unit,
+        timezone,
+        ...filters,
+      },
     ],
     queryFn: () =>
       get(`/websites/${websiteId}/session-data/properties`, {
@@ -19,6 +38,8 @@ export function useSessionDataPropertiesQuery(websiteId: string, options?: React
         endAt,
         unit,
         timezone,
+        selectedPropertyName,
+        ...serializePropertyFilters(propertyFilters),
         ...filters,
       }),
     enabled: !!websiteId,

src/components/hooks/queries/useSessionDataStatsQuery.ts

@@ -0,0 +1,35 @@
+import { serializePropertyFilters } from '@/lib/params';
+import type { PropertyFilter, ReactQueryOptions } from '@/lib/types';
+import { useApi } from '../useApi';
+import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+
+export function useSessionDataStatsQuery(
+  websiteId: string,
+  propertyName: string,
+  propertyFilters: PropertyFilter[] = [],
+  options?: ReactQueryOptions,
+) {
+  const { get, useQuery } = useApi();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
+  const params = useFilterParameters({ includePagination: false });
+
+  return useQuery({
+    queryKey: [
+      'websites:session-data:stats',
+      { websiteId, propertyName, propertyFilters, startAt, endAt, unit, timezone, ...params },
+    ],
+    queryFn: () =>
+      get(`/websites/${websiteId}/session-data/stats`, {
+        startAt,
+        endAt,
+        unit,
+        timezone,
+        propertyName,
+        ...serializePropertyFilters(propertyFilters),
+        ...params,
+      }),
+    enabled: !!(websiteId && propertyName),
+    ...options,
+  });
+}

src/components/hooks/useFilterParameters.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { FILTER_COLUMNS } from '@/lib/constants';
 import { useNavigation } from './useNavigation';
 
-export function useFilterParameters() {
+export function useFilterParameters({ includePagination = true }: { includePagination?: boolean } = {}) {
   const { query } = useNavigation();
 
   return useMemo(() => {
@@ -15,15 +15,20 @@ export function useFilterParameters() {
       }
     }
 
-    return {
+    const params = {
       ...filterParams,
       search: query.search,
       segment: query.segment,
       cohort: query.cohort,
       excludeBounce: query.excludeBounce,
       match: query.match,
-      page: query.page,
-      pageSize: query.pageSize,
-    };
-  }, [query]);
+    } as Record<string, any>;
+
+    if (includePagination) {
+      params.page = query.page;
+      params.pageSize = query.pageSize;
+    }
+
+    return params;
+  }, [query, includePagination]);
 }