Added metrics bar and date range to sessions.

src/components/hooks/index.ts

@@ -1,6 +1,6 @@
 export * from './queries/useApi';
 export * from './queries/useConfig';
-export * from './queries/useFilterQuery';
+export * from './queries/usePagedQuery';
 export * from './queries/useLogin';
 export * from './queries/useRealtime';
 export * from './queries/useReport';
@@ -19,6 +19,7 @@ export * from './queries/useUsers';
 export * from './queries/useWebsite';
 export * from './queries/useWebsites';
 export * from './queries/useWebsiteEvents';
+export * from './queries/useWebsiteEventsSeries';
 export * from './queries/useWebsiteMetrics';
 export * from './queries/useWebsiteValues';
 export * from './useCountryNames';

src/components/hooks/queries/usePagedQuery.ts

@@ -1,14 +1,14 @@
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useApi } from './useApi';
-import { PageResult, PageParams, FilterQueryResult } from 'lib/types';
+import { PageResult, PageParams, PagedQueryResult } from 'lib/types';
 import { useNavigation } from '../useNavigation';
 
-export function useFilterQuery<T = any>({
+export function usePagedQuery<T = any>({
   queryKey,
   queryFn,
   ...options
-}: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }): FilterQueryResult<T> {
+}: Omit<UseQueryOptions, 'queryFn'> & { queryFn: (params?: object) => any }): PagedQueryResult<T> {
   const { query: queryParams } = useNavigation();
   const [params, setParams] = useState<PageParams>({
     query: '',
@@ -30,4 +30,4 @@ export function useFilterQuery<T = any>({
   };
 }
 
-export default useFilterQuery;
+export default usePagedQuery;

src/components/hooks/queries/useReports.ts

@@ -1,11 +1,11 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useReports({ websiteId, teamId }: { websiteId?: string; teamId?: string }) {
   const { modified } = useModified(`reports`);
   const { get, del, useMutation } = useApi();
-  const queryResult = useFilterQuery({
+  const queryResult = usePagedQuery({
     queryKey: ['reports', { websiteId, teamId, modified }],
     queryFn: (params: any) => {
       return get('/reports', { websiteId, teamId, ...params });

src/components/hooks/queries/useTeamMembers.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useTeamMembers(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams:members`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['teams:members', { teamId, modified }],
     queryFn: (params: any) => {
       return get(`/teams/${teamId}/users`, params);

src/components/hooks/queries/useTeamWebsites.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useTeamWebsites(teamId: string) {
   const { get } = useApi();
   const { modified } = useModified(`websites`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['teams:websites', { teamId, modified }],
     queryFn: (params: any) => {
       return get(`/teams/${teamId}/websites`, params);

src/components/hooks/queries/useTeams.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useTeams(userId: string) {
   const { get } = useApi();
   const { modified } = useModified(`teams`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['teams', { userId, modified }],
     queryFn: (params: any) => {
       return get(`/users/${userId}/teams`, params);

src/components/hooks/queries/useUsers.ts

@@ -1,12 +1,12 @@
 import useApi from './useApi';
-import useFilterQuery from './useFilterQuery';
+import usePagedQuery from './usePagedQuery';
 import useModified from '../useModified';
 
 export function useUsers() {
   const { get } = useApi();
   const { modified } = useModified(`users`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['users', { modified }],
     queryFn: (params: any) => {
       return get('/admin/users', {

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,7 +1,7 @@
 import useApi from './useApi';
 import { UseQueryOptions } from '@tanstack/react-query';
 import { useFilterParams } from '../useFilterParams';
-import { useFilterQuery } from 'components/hooks';
+import { usePagedQuery } from 'components/hooks';
 
 export function useWebsiteEvents(
   websiteId: string,
@@ -10,7 +10,7 @@ export function useWebsiteEvents(
   const { get } = useApi();
   const params = useFilterParams(websiteId);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['websites:events', { websiteId, ...params }],
     queryFn: pageParams =>
       get(`/websites/${websiteId}/events`, { ...params, ...pageParams, pageSize: 20 }),

src/components/hooks/queries/useWebsiteEventsSeries.ts

@@ -0,0 +1,20 @@
+import useApi from './useApi';
+import { UseQueryOptions } from '@tanstack/react-query';
+import { useFilterParams } from '../useFilterParams';
+
+export function useWebsiteEventsSeries(
+  websiteId: string,
+  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
+) {
+  const { get, useQuery } = useApi();
+  const params = useFilterParams(websiteId);
+
+  return useQuery({
+    queryKey: ['websites:events:series', { websiteId, ...params }],
+    queryFn: () => get(`/websites/${websiteId}/events/series`, { ...params }),
+    enabled: !!websiteId,
+    ...options,
+  });
+}
+
+export default useWebsiteEventsSeries;

src/components/hooks/queries/useWebsiteSessions.ts

@@ -1,17 +1,20 @@
 import { useApi } from './useApi';
-import { useFilterQuery } from './useFilterQuery';
+import { usePagedQuery } from './usePagedQuery';
 import useModified from '../useModified';
+import { useFilterParams } from 'components/hooks/useFilterParams';
 
 export function useWebsiteSessions(websiteId: string, params?: { [key: string]: string | number }) {
   const { get } = useApi();
   const { modified } = useModified(`sessions`);
+  const filters = useFilterParams(websiteId);
 
-  return useFilterQuery({
-    queryKey: ['sessions', { websiteId, modified, ...params }],
+  return usePagedQuery({
+    queryKey: ['sessions', { websiteId, modified, ...params, ...filters }],
     queryFn: (data: any) => {
       return get(`/websites/${websiteId}/sessions`, {
         ...data,
         ...params,
+        ...filters,
       });
     },
   });

src/components/hooks/queries/useWebsites.ts

@@ -1,5 +1,5 @@
 import { useApi } from './useApi';
-import { useFilterQuery } from './useFilterQuery';
+import { usePagedQuery } from './usePagedQuery';
 import { useLogin } from './useLogin';
 import useModified from '../useModified';
 
@@ -11,7 +11,7 @@ export function useWebsites(
   const { user } = useLogin();
   const { modified } = useModified(`websites`);
 
-  return useFilterQuery({
+  return usePagedQuery({
     queryKey: ['websites', { userId, teamId, modified, ...params }],
     queryFn: (data: any) => {
       return get(teamId ? `/teams/${teamId}/websites` : `/users/${userId || user.id}/websites`, {