Added retention screen.

src/components/hooks/index.ts

@@ -7,6 +7,7 @@ export * from './queries/useLoginQuery';
 export * from './queries/useRealtimeQuery';
 export * from './queries/useReportQuery';
 export * from './queries/useReportsQuery';
+export * from './queries/useRetentionQuery';
 export * from './queries/useSessionActivityQuery';
 export * from './queries/useSessionDataQuery';
 export * from './queries/useSessionDataPropertiesQuery';

src/components/hooks/queries/useRetentionQuery.ts

@@ -0,0 +1,20 @@
+import { useApi } from '../useApi';
+import { useFilterParams } from '../useFilterParams';
+import { UseQueryOptions } from '@tanstack/react-query';
+
+export function useRetentionQuery(
+  websiteId: string,
+  queryParams?: { type: string; limit?: number; search?: string; startAt?: number; endAt?: number },
+  options?: Omit<UseQueryOptions & { onDataLoad?: (data: any) => void }, 'queryKey' | 'queryFn'>,
+) {
+  const { get, useQuery } = useApi();
+  const filterParams = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['retention', websiteId, { ...filterParams, ...queryParams }],
+    queryFn: () =>
+      get(`/websites/${websiteId}/retention`, { websiteId, ...filterParams, ...queryParams }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}

src/components/messages.ts

@@ -319,6 +319,7 @@ export const labels = defineMessages({
   links: { id: 'label.links', defaultMessage: 'Links' },
   pixels: { id: 'label.pixels', defaultMessage: 'Pixels' },
   addBoard: { id: 'label.add-board', defaultMessage: 'Add board' },
+  cohort: { id: 'label.cohort', defaultMessage: 'Cohort' },
 });
 
 export const messages = defineMessages({

src/components/metrics/ActiveUsers.tsx

@@ -29,7 +29,7 @@ export function ActiveUsers({
   return (
     <StatusLight variant="success">
       <Text size="2" weight="bold">
-        {formatMessage(messages.activeUsers, { x: count })}
+        {formatMessage(messages.numberOfUsers, { x: count })}
       </Text>
     </StatusLight>
   );