Added metrics bar and date range to sessions.

src/app/(main)/reports/ReportsTable.tsx

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, Icon, Icons, Text, useBreakpoint } from 'react-basics';
+import { GridColumn, GridTable, Icon, Icons, Text } from 'react-basics';
 import LinkButton from 'components/common/LinkButton';
 import { useMessages, useLogin, useTeamUrl } from 'components/hooks';
 import { REPORT_TYPES } from 'lib/constants';
@@ -7,11 +7,10 @@ import ReportDeleteButton from './ReportDeleteButton';
 export function ReportsTable({ data = [], showDomain }: { data: any[]; showDomain?: boolean }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
-  const breakpoint = useBreakpoint();
   const { renderTeamUrl } = useTeamUrl();
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+    <GridTable data={data}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="description" label={formatMessage(labels.description)} />
       <GridColumn name="type" label={formatMessage(labels.type)}>

src/app/(main)/reports/create/ReportTemplates.tsx

@@ -4,6 +4,7 @@ import Magnet from 'assets/magnet.svg';
 import Path from 'assets/path.svg';
 import Tag from 'assets/tag.svg';
 import Target from 'assets/target.svg';
+import Money from 'assets/money.svg';
 import { useMessages, useTeamUrl } from 'components/hooks';
 import PageHeader from 'components/layout/PageHeader';
 import Link from 'next/link';
@@ -51,12 +52,12 @@ export function ReportTemplates({ showHeader = true }: { showHeader?: boolean })
       url: renderTeamUrl('/reports/journey'),
       icon: <Path />,
     },
-    // {
-    //   title: formatMessage(labels.revenue),
-    //   description: formatMessage(labels.revenueDescription),
-    //   url: renderTeamUrl('/reports/revenue'),
-    //   icon: <Path />,
-    // },
+    {
+      title: formatMessage(labels.revenue),
+      description: formatMessage(labels.revenueDescription),
+      url: renderTeamUrl('/reports/revenue'),
+      icon: <Money />,
+    },
   ];
 
   return (

src/app/(main)/reports/revenue/RevenueReport.tsx

@@ -4,7 +4,7 @@ import Report from '../[reportId]/Report';
 import ReportHeader from '../[reportId]/ReportHeader';
 import ReportMenu from '../[reportId]/ReportMenu';
 import ReportBody from '../[reportId]/ReportBody';
-import Target from 'assets/target.svg';
+import Money from 'assets/money.svg';
 import { REPORT_TYPES } from 'lib/constants';
 
 const defaultParameters = {
@@ -15,12 +15,12 @@ const defaultParameters = {
 export default function RevenueReport({ reportId }: { reportId?: string }) {
   return (
     <Report reportId={reportId} defaultParameters={defaultParameters}>
-      <ReportHeader icon={<Target />} />
+      <ReportHeader icon={<Money />} />
       <ReportMenu>
         <RevenueParameters />
       </ReportMenu>
       <ReportBody>
-        <RevenueChart />
+        <RevenueChart unit="day" />
       </ReportBody>
     </Report>
   );

src/app/(main)/settings/teams/TeamsTable.tsx

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
+import { GridColumn, GridTable, Icon, Text } from 'react-basics';
 import { useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import { ROLES } from 'lib/constants';
@@ -13,10 +13,9 @@ export function TeamsTable({
   showActions?: boolean;
 }) {
   const { formatMessage, labels } = useMessages();
-  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+    <GridTable data={data}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="owner" label={formatMessage(labels.owner)}>
         {row => row.teamUser.find(({ role }) => role === ROLES.teamOwner)?.user?.username}

src/app/(main)/settings/users/UsersTable.tsx

@@ -1,4 +1,4 @@
-import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
+import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
 import { formatDistance } from 'date-fns';
 import { ROLES } from 'lib/constants';
 import { useMessages, useLocale } from 'components/hooks';
@@ -14,10 +14,9 @@ export function UsersTable({
 }) {
   const { formatMessage, labels } = useMessages();
   const { dateLocale } = useLocale();
-  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+    <GridTable data={data}>
       <GridColumn name="username" label={formatMessage(labels.username)} style={{ minWidth: 0 }} />
       <GridColumn name="role" label={formatMessage(labels.role)} width={'120px'}>
         {row =>

src/app/(main)/settings/websites/WebsitesTable.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Text, Icon, Icons, GridTable, GridColumn, useBreakpoint } from 'react-basics';
+import { Text, Icon, Icons, GridTable, GridColumn } from 'react-basics';
 import { useMessages, useTeamUrl } from 'components/hooks';
 import LinkButton from 'components/common/LinkButton';
 
@@ -20,7 +20,6 @@ export function WebsitesTable({
   children,
 }: WebsitesTableProps) {
   const { formatMessage, labels } = useMessages();
-  const breakpoint = useBreakpoint();
   const { renderTeamUrl } = useTeamUrl();
 
   if (!data?.length) {
@@ -28,7 +27,7 @@ export function WebsitesTable({
   }
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+    <GridTable data={data}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       {showActions && (

src/app/(main)/teams/[teamId]/settings/members/TeamMembersTable.tsx

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
+import { GridColumn, GridTable } from 'react-basics';
 import { useMessages, useLogin } from 'components/hooks';
 import { ROLES } from 'lib/constants';
 import TeamMemberRemoveButton from './TeamMemberRemoveButton';
@@ -15,7 +15,6 @@ export function TeamMembersTable({
 }) {
   const { formatMessage, labels } = useMessages();
   const { user } = useLogin();
-  const breakpoint = useBreakpoint();
 
   const roles = {
     [ROLES.teamOwner]: formatMessage(labels.teamOwner),
@@ -25,7 +24,7 @@ export function TeamMembersTable({
   };
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+    <GridTable data={data}>
       <GridColumn name="username" label={formatMessage(labels.username)}>
         {row => row?.user?.username}
       </GridColumn>

src/app/(main)/teams/[teamId]/settings/websites/TeamWebsitesTable.tsx

@@ -1,4 +1,4 @@
-import { GridColumn, GridTable, Icon, Text, useBreakpoint } from 'react-basics';
+import { GridColumn, GridTable, Icon, Text } from 'react-basics';
 import { useLogin, useMessages } from 'components/hooks';
 import Icons from 'components/icons';
 import LinkButton from 'components/common/LinkButton';
@@ -14,10 +14,9 @@ export function TeamWebsitesTable({
 }) {
   const { user } = useLogin();
   const { formatMessage, labels } = useMessages();
-  const breakpoint = useBreakpoint();
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+    <GridTable data={data}>
       <GridColumn name="name" label={formatMessage(labels.name)} />
       <GridColumn name="domain" label={formatMessage(labels.domain)} />
       <GridColumn name="createdBy" label={formatMessage(labels.createdBy)}>

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -52,7 +52,7 @@ export function WebsiteHeader({
     },
     {
       label: formatMessage(labels.events),
-      icon: <Icons.Nodes />,
+      icon: <Icons.Bolt />,
       path: '/events',
     },
   ];

src/app/(main)/websites/[websiteId]/events/EventsTable.tsx

@@ -1,12 +1,13 @@
-import { GridTable, GridColumn } from 'react-basics';
+import { GridTable, GridColumn, Icon } from 'react-basics';
 import { useLocale, useMessages, useTeamUrl } from 'components/hooks';
 import Empty from 'components/common/Empty';
-import { formatDistance } from 'date-fns';
 import Avatar from 'components/common/Avatar';
 import Link from 'next/link';
+import Icons from 'components/icons';
+import { formatDate } from 'lib/date';
 
 export function EventsTable({ data = [] }) {
-  const { dateLocale } = useLocale();
+  const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
   const { renderTeamUrl } = useTeamUrl();
 
@@ -27,20 +28,15 @@ export function EventsTable({ data = [] }) {
         {row => {
           return (
             <>
+              <Icon>{row.eventName ? <Icons.Bolt /> : <Icons.Eye />}</Icon>
               {formatMessage(row.eventName ? labels.triggeredEvent : labels.viewedPage)}
-              <strong>{row.eventName}</strong>
+              <strong>{row.eventName || row.urlPath}</strong>
             </>
           );
         }}
       </GridColumn>
-      <GridColumn name="urlPath" label={formatMessage(labels.path)} />
-      <GridColumn name="created" label={formatMessage(labels.created)}>
-        {row =>
-          formatDistance(new Date(row.createdAt), new Date(), {
-            addSuffix: true,
-            locale: dateLocale,
-          })
-        }
+      <GridColumn name="created" label={formatMessage(labels.created)} width={'300px'}>
+        {row => formatDate(new Date(row.createdAt), 'PPPpp', locale)}
       </GridColumn>
     </GridTable>
   );

src/app/(main)/websites/[websiteId]/sessions/SessionMetricsBar.tsx

@@ -1,5 +0,0 @@
-export function SessionMetricsBar({ websiteId }: { websiteId: string }) {
-  return <h1>{websiteId}</h1>;
-}
-
-export default SessionMetricsBar;

src/app/(main)/websites/[websiteId]/sessions/SessionsMetricsBar.tsx

@@ -0,0 +1,42 @@
+import WebsiteDateFilter from 'components/input/WebsiteDateFilter';
+import { Flexbox, Loading } from 'react-basics';
+import MetricCard from 'components/metrics/MetricCard';
+import { useMessages } from 'components/hooks';
+import useWebsiteStats from 'components/hooks/queries/useWebsiteStats';
+import { formatLongNumber } from 'lib/format';
+
+export function SessionsMetricsBar({ websiteId }: { websiteId: string }) {
+  const { formatMessage, labels } = useMessages();
+  const { data, isLoading } = useWebsiteStats(websiteId);
+
+  return (
+    <Flexbox direction="row" justifyContent="space-between" style={{ height: 120 }}>
+      <Flexbox direction="row">
+        {isLoading && <Loading icon="dots" />}
+        {!isLoading && data && (
+          <>
+            <MetricCard
+              value={data.visitors.value}
+              label={formatMessage(labels.visitors)}
+              formatValue={formatLongNumber}
+            />
+            <MetricCard
+              value={data.visits.value}
+              label={formatMessage(labels.visits)}
+              formatValue={formatLongNumber}
+            />
+            <MetricCard
+              value={data.pageviews.value}
+              label={formatMessage(labels.views)}
+              formatValue={formatLongNumber}
+            />
+            <MetricCard value={data?.countries?.value} label={formatMessage(labels.countries)} />
+          </>
+        )}
+      </Flexbox>
+      <WebsiteDateFilter websiteId={websiteId} />
+    </Flexbox>
+  );
+}
+
+export default SessionsMetricsBar;

src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx

@@ -1,11 +1,13 @@
 'use client';
 import WebsiteHeader from '../WebsiteHeader';
 import SessionsDataTable from './SessionsDataTable';
+import SessionsMetricsBar from './SessionsMetricsBar';
 
 export function SessionsPage({ websiteId }) {
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
+      <SessionsMetricsBar websiteId={websiteId} />
       <SessionsDataTable websiteId={websiteId} />
     </>
   );

src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx

@@ -1,29 +1,33 @@
 import Link from 'next/link';
-import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
+import { GridColumn, GridTable } from 'react-basics';
 import { useFormat, useLocale, useMessages } from 'components/hooks';
 import Avatar from 'components/common/Avatar';
 import styles from './SessionsTable.module.css';
 import { formatDate } from 'lib/date';
+import TypeIcon from 'components/common/TypeIcon';
 
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
   const { locale } = useLocale();
   const { formatMessage, labels } = useMessages();
-  const breakpoint = useBreakpoint();
   const { formatValue } = useFormat();
 
   return (
-    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
-      <GridColumn name="id" label="ID" width="300px">
+    <GridTable data={data}>
+      <GridColumn name="id" label={formatMessage(labels.session)} width="100px">
         {row => (
           <Link href={`sessions/${row.id}`} className={styles.link}>
             <Avatar key={row.id} seed={row.id} size={64} />
-            {row.id}
           </Link>
         )}
       </GridColumn>
       <GridColumn name="visits" label={formatMessage(labels.visits)} width="100px" />
+      <GridColumn name="views" label={formatMessage(labels.views)} width="100px" />
       <GridColumn name="country" label={formatMessage(labels.country)}>
-        {row => formatValue(row.country, 'country')}
+        {row => (
+          <TypeIcon type="country" value={row.country}>
+            {formatValue(row.country, 'country')}
+          </TypeIcon>
+        )}
       </GridColumn>
       <GridColumn name="city" label={formatMessage(labels.city)} />
       <GridColumn name="browser" label={formatMessage(labels.browser)}>

src/assets/location.svg

@@ -1 +1 @@
-<svg height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g id="Pin"><path d="m32 0a24.0319 24.0319 0 0 0 -24 24c0 17.23 22.36 38.81 23.31 39.72a.99.99 0 0 0 1.38 0c.95-.91 23.31-22.49 23.31-39.72a24.0319 24.0319 0 0 0 -24-24zm0 35a11 11 0 1 1 11-11 11.0066 11.0066 0 0 1 -11 11z"/></g></svg>
+<svg height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><path d="M32 0A24.032 24.032 0 0 0 8 24c0 17.23 22.36 38.81 23.31 39.72a.99.99 0 0 0 1.38 0C33.64 62.81 56 41.23 56 24A24.032 24.032 0 0 0 32 0zm0 35a11 11 0 1 1 11-11 11.007 11.007 0 0 1-11 11z"/></svg>

src/assets/logo-white.svg

@@ -1,4 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11">
-  <circle cx="214.15" cy="181" r="171" fill="none" stroke="white" stroke-miterlimit="10" stroke-width="20"/>
-  <path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z" fill="white"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 428 389.11"><circle cx="214.15" cy="181" r="171" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="20"/><path d="M413 134.11H15.29a15 15 0 0 0-15 15v15.3C.12 168 0 171.52 0 175.11c0 118.19 95.81 214 214 214 116.4 0 211.1-92.94 213.93-208.67 0-.44.07-.88.07-1.33v-30a15 15 0 0 0-15-15Z" fill="#fff"/></svg>

src/assets/money.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve"><path d="M347 302c8.271 0 15 6.639 15 14.8h30c0-19.468-12.541-36.067-30-42.231V242h-30v32.58c-17.459 6.192-30 22.865-30 42.42 0 24.813 20.187 45 45 45 8.271 0 15 6.729 15 15s-6.729 15-15 15-15-6.729-15-15h-30c0 19.555 12.541 36.228 30 42.42v32.38h30v-32.38c17.459-6.192 30-22.865 30-42.42 0-24.813-20.187-45-45-45-8.271 0-15-6.729-15-15s6.729-15 15-15z"/><path d="M347 182c-5.057 0-10.058.242-15 .689V90c0-26.011-18.548-49.61-52.226-66.449C249.4 8.364 209.35 0 167 0 124.564 0 84.193 8.347 53.323 23.502 18.938 40.385 0 64 0 90v272c0 26 18.938 49.616 53.323 66.498C84.193 443.653 124.564 452 167 452c17.009 0 33.647-1.358 49.615-4.004C246.826 486.909 294.035 512 347 512c90.981 0 165-74.019 165-165s-74.019-165-165-165zM66.545 50.432C92.992 37.447 129.606 30 167 30c79.558 0 135 31.621 135 60s-55.442 60-135 60c-37.394 0-74.008-7.447-100.455-20.432C43.32 118.166 30 103.744 30 90s13.32-28.166 36.545-39.568zM30 142.265c6.724 5.137 14.512 9.907 23.323 14.233C84.193 171.653 124.564 180 167 180c42.35 0 82.4-8.364 112.774-23.551 8.359-4.18 15.783-8.776 22.226-13.722v45.51c-29.896 8.485-56.359 25.209-76.778 47.548C206.946 239.908 187.386 242 167 242c-37.394 0-74.008-7.447-100.455-20.432C43.32 210.166 30 195.744 30 182v-39.735zm0 92c6.724 5.137 14.512 9.907 23.323 14.233C84.193 263.653 124.564 272 167 272c11.581 0 22.942-.621 34.021-1.839a163.743 163.743 0 0 0-18.293 61.395c-5.211.286-10.465.444-15.728.444-37.394 0-74.008-7.447-100.455-20.432C43.32 300.166 30 285.744 30 272v-37.735zM167 422c-37.394 0-74.008-7.447-100.455-20.432C43.32 390.166 30 375.744 30 362v-37.736c6.724 5.137 14.512 9.907 23.323 14.233C84.193 353.653 124.564 362 167 362c5.23 0 10.459-.132 15.654-.388a163.726 163.726 0 0 0 16.486 58.557A280.559 280.559 0 0 1 167 422zm180 60c-74.439 0-135-60.561-135-135s60.561-135 135-135 135 60.561 135 135-60.561 135-135 135z"/></svg>

src/components/common/DataTable.tsx

@@ -4,13 +4,13 @@ import { Banner, Loading, SearchField } from 'react-basics';
 import { useMessages, useNavigation } from 'components/hooks';
 import Empty from 'components/common/Empty';
 import Pager from 'components/common/Pager';
-import { FilterQueryResult } from 'lib/types';
+import { PagedQueryResult } from 'lib/types';
 import styles from './DataTable.module.css';
 
 const DEFAULT_SEARCH_DELAY = 600;
 
 export interface DataTableProps {
-  queryResult: FilterQueryResult<any>;
+  queryResult: PagedQueryResult<any>;
   searchDelay?: number;
   allowSearch?: boolean;
   allowPaging?: boolean;

src/components/common/TypeIcon.tsx

@@ -1,17 +1,24 @@
+import { ReactNode } from 'react';
+
 export function TypeIcon({
   type,
   value,
+  children,
 }: {
   type: 'browser' | 'country' | 'device' | 'os';
   value: string;
+  children?: ReactNode;
 }) {
   return (
-    <img
-      src={`${process.env.basePath || ''}/images/${type}/${value || 'unknown'}.png`}
-      alt={value}
-      width={type === 'country' ? undefined : 16}
-      height={type === 'country' ? undefined : 16}
-    />
+    <>
+      <img
+        src={`${process.env.basePath || ''}/images/${type}/${value || 'unknown'}.png`}
+        alt={value}
+        width={type === 'country' ? undefined : 16}
+        height={type === 'country' ? undefined : 16}
+      />
+      {children}
+    </>
   );
 }
 

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`, {

src/components/messages.ts

@@ -88,8 +88,8 @@ export const labels = defineMessages({
   leaveTeam: { id: 'label.leave-team', defaultMessage: 'Leave team' },
   refresh: { id: 'label.refresh', defaultMessage: 'Refresh' },
   pages: { id: 'label.pages', defaultMessage: 'Pages' },
-  entry: { id: 'label.entry', defaultMessage: 'Entry URL' },
-  exit: { id: 'label.exit', defaultMessage: 'Exit URL' },
+  entry: { id: 'label.entry', defaultMessage: 'Entry path' },
+  exit: { id: 'label.exit', defaultMessage: 'Exit path' },
   referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
   hosts: { id: 'label.hosts', defaultMessage: 'Hosts' },
   screens: { id: 'label.screens', defaultMessage: 'Screens' },
@@ -165,6 +165,8 @@ export const labels = defineMessages({
   },
   url: { id: 'label.url', defaultMessage: 'URL' },
   urls: { id: 'label.urls', defaultMessage: 'URLs' },
+  path: { id: 'label.path', defaultMessage: 'Path' },
+  paths: { id: 'label.paths', defaultMessage: 'Paths' },
   add: { id: 'label.add', defaultMessage: 'Add' },
   update: { id: 'label.update', defaultMessage: 'Update' },
   window: { id: 'label.window', defaultMessage: 'Window' },
@@ -276,7 +278,6 @@ export const labels = defineMessages({
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
-  path: { id: 'label.path', defaultMessage: 'Path' },
 });
 
 export const messages = defineMessages({

src/components/metrics/EventsChart.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 import { colord } from 'colord';
 import BarChart from 'components/charts/BarChart';
 import { getDateArray } from 'lib/date';
-import { useLocale, useDateRange, useWebsiteEvents } from 'components/hooks';
+import { useLocale, useDateRange, useWebsiteEventsSeries } from 'components/hooks';
 import { CHART_COLORS } from 'lib/constants';
 import { renderDateLabels } from 'lib/charts';
 
@@ -16,7 +16,7 @@ export function EventsChart({ websiteId, className }: EventsChartProps) {
     dateRange: { startDate, endDate, unit },
   } = useDateRange(websiteId);
   const { locale } = useLocale();
-  const { data, isLoading } = useWebsiteEvents(websiteId);
+  const { data, isLoading } = useWebsiteEventsSeries(websiteId);
 
   const chartData = useMemo(() => {
     if (!data) return [];

src/components/metrics/MetricCard.tsx

@@ -10,7 +10,7 @@ export interface MetricCardProps {
   change?: number;
   label?: string;
   reverseColors?: boolean;
-  formatValue?: typeof formatNumber;
+  formatValue?: (n: any) => string;
   showLabel?: boolean;
   showChange?: boolean;
   showPrevious?: boolean;

src/components/metrics/PagesTable.tsx

@@ -25,7 +25,7 @@ export function PagesTable({ allowFilter, ...props }: PagesTableProps) {
 
   const buttons = [
     {
-      label: 'URL',
+      label: formatMessage(labels.path),
       key: 'url',
     },
     {

src/lib/types.ts

@@ -41,7 +41,7 @@ export interface PageResult<T> {
   sortDescending?: boolean;
 }
 
-export interface FilterQueryResult<T> {
+export interface PagedQueryResult<T> {
   result: PageResult<T>;
   query: any;
   params: PageParams;

src/pages/api/websites/[websiteId]/sessions/index.ts

@@ -14,6 +14,8 @@ export interface ReportsRequestQuery extends PageParams {
 const schema = {
   GET: yup.object().shape({
     websiteId: yup.string().uuid().required(),
+    startAt: yup.number().integer().required(),
+    endAt: yup.number().integer().min(yup.ref('startAt')).required(),
     ...pageInfo,
   }),
 };
@@ -26,14 +28,17 @@ export default async (
   await useAuth(req, res);
   await useValidate(schema, req, res);
 
-  const { websiteId } = req.query;
+  const { websiteId, startAt, endAt } = req.query;
+
+  const startDate = new Date(+startAt);
+  const endDate = new Date(+endAt);
 
   if (req.method === 'GET') {
     if (!(await canViewWebsite(req.auth, websiteId))) {
       return unauthorized(res);
     }
 
-    const data = await getWebsiteSessions(websiteId, {}, req.query);
+    const data = await getWebsiteSessions(websiteId, { startDate, endDate }, req.query);
 
     return ok(res, data);
   }

src/queries/analytics/getWebsiteStats.ts

@@ -34,12 +34,14 @@ async function relationalQuery(
       sum(t.c) as "pageviews",
       count(distinct t.session_id) as "visitors",
       count(distinct t.visit_id) as "visits",
+      count(distinct t.country) as "countries",
       sum(case when t.c = 1 then 1 else 0 end) as "bounces",
-      sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime"
+      sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime",
     from (
       select
         website_event.session_id,
         website_event.visit_id,
+        session.country,
         count(*) as "c",
         min(website_event.created_at) as "min_time",
         max(website_event.created_at) as "max_time"
@@ -49,7 +51,7 @@ async function relationalQuery(
         and website_event.created_at between {{startDate}} and {{endDate}}
         and event_type = {{eventType}}
         ${filterQuery}
-      group by 1, 2
+      group by 1, 2, 3
     ) as t
     `,
     params,
@@ -76,12 +78,14 @@ async function clickhouseQuery(
       sum(t.c) as "pageviews",
       uniq(t.session_id) as "visitors",
       uniq(t.visit_id) as "visits",
+      uniq(t.country) as "countries",
       sum(if(t.c = 1, 1, 0)) as "bounces",
       sum(max_time-min_time) as "totaltime"
     from (
       select
         session_id,
         visit_id,
+        country,
         count(*) c,
         min(created_at) min_time,
         max(created_at) max_time
@@ -90,7 +94,7 @@ async function clickhouseQuery(
         and created_at between {startDate:DateTime64} and {endDate:DateTime64}
         and event_type = {eventType:UInt32}
         ${filterQuery}
-      group by session_id, visit_id
+      group by session_id, visit_id, country
     ) as t;
     `;
   } else {
@@ -99,20 +103,23 @@ async function clickhouseQuery(
       sum(t.c) as "pageviews",
       uniq(session_id) as "visitors",
       uniq(visit_id) as "visits",
+      uniq(country) as "countries",
       sumIf(1, t.c = 1) as "bounces",
       sum(max_time-min_time) as "totaltime"
-    from (select
-            session_id,
-            visit_id,
-            sum(views) c,
-            min(min_time) min_time,
-            max(max_time) max_time
-        from umami.website_event_stats_hourly "website_event"
-    where website_id = {websiteId:UUID}
-      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
-      and event_type = {eventType:UInt32}
-      ${filterQuery}
-      group by session_id, visit_id
+    from (
+      select
+          session_id,
+          visit_id,
+          country,
+          sum(views) c,
+          min(min_time) min_time,
+          max(max_time) max_time
+      from umami.website_event_stats_hourly "website_event"
+      where website_id = {websiteId:UUID}
+        and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+        and event_type = {eventType:UInt32}
+        ${filterQuery}
+      group by session_id, visit_id, country
     ) as t;
     `;
   }
@@ -125,6 +132,7 @@ async function clickhouseQuery(
         visits: Number(a.visits),
         bounces: Number(a.bounces),
         totaltime: Number(a.totaltime),
+        countries: Number(a.countries),
       };
     });
   });

src/queries/analytics/sessions/getWebsiteSessions.ts

@@ -43,7 +43,8 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters, pagePar
       city,
       min(created_at) as firstAt,
       max(created_at) as lastAt,
-      uniq(visit_id) as visits
+      uniq(visit_id) as visits,
+      count(*) as views
     from website_event
     where website_id = {websiteId:UUID}
     ${dateQuery}