diff --git a/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx b/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx index 6223dbc0..084ac114 100644 --- a/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx +++ b/src/app/(main)/websites/[websiteId]/WebsiteControls.tsx @@ -4,6 +4,7 @@ import { FilterBar } from '@/components/input/FilterBar'; import { MonthFilter } from '@/components/input/MonthFilter'; import { WebsiteDateFilter } from '@/components/input/WebsiteDateFilter'; import { WebsiteFilterButton } from '@/components/input/WebsiteFilterButton'; +import UniqueSessions from '@/components/metrics/UniqueSessions'; export function WebsiteControls({ websiteId, @@ -23,8 +24,9 @@ export function WebsiteControls({ return ( - + {allowFilter ? :
} + {allowDateFilter && ( diff --git a/src/components/metrics/UniqueSessions.tsx b/src/components/metrics/UniqueSessions.tsx new file mode 100644 index 00000000..536ba5c4 --- /dev/null +++ b/src/components/metrics/UniqueSessions.tsx @@ -0,0 +1,30 @@ +import { Container, Text } from '@umami/react-zen'; +import { useMemo } from 'react'; +import { useWebsiteEventsQuery } from '@/components/hooks'; + +const UniqueSessions = ({ websiteId }) => { + const query = useWebsiteEventsQuery(websiteId, { view: 'all' }); + + const uniqueSessionCount = useMemo(() => { + if (!query?.data?.data) return 0; + + const uniqueSessions = new Set(query.data.data.map((event: any) => event.sessionId)); + + return uniqueSessions.size; + }, [query?.data?.data]); + + return ( + + + {' '} + Unique Sessions:{' '} + + + {' '} + {uniqueSessionCount}{' '} + + + ); +}; + +export default UniqueSessions;