Use getRequestDateRange in all routes.

src/app/(main)/websites/[websiteId]/sessions/SessionProperties.module.css

@@ -1,25 +0,0 @@
-.container {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
-  gap: 60px;
-  margin-bottom: 40px;
-}
-
-.table {
-  align-self: flex-start;
-}
-
-.link:hover {
-  cursor: pointer;
-  color: var(--primary-color);
-}
-
-.title {
-  text-align: center;
-  font-weight: bold;
-  margin: 20px 0;
-}
-
-.chart {
-  min-height: 620px;
-}

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

@@ -1,4 +1,4 @@
-import { DataColumn, DataTable } from '@umami/react-zen';
+import { Grid, DataColumn, DataTable } from '@umami/react-zen';
 import {
   useSessionDataPropertiesQuery,
   useSessionDataValuesQuery,
@@ -8,12 +8,11 @@ import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { PieChart } from '@/components/charts/PieChart';
 import { useState } from 'react';
 import { CHART_COLORS } from '@/lib/constants';
-import styles from './SessionProperties.module.css';
 
 export function SessionProperties({ websiteId }: { websiteId: string }) {
   const [propertyName, setPropertyName] = useState('');
   const { formatMessage, labels } = useMessages();
-  const { data, isLoading, isFetched, error } = useSessionDataPropertiesQuery(websiteId);
+  const { data, isLoading, isFetching, error } = useSessionDataPropertiesQuery(websiteId);
   const { data: values } = useSessionDataValuesQuery(websiteId, propertyName);
   const chartData =
     propertyName && values
@@ -30,25 +29,23 @@ export function SessionProperties({ websiteId }: { websiteId: string }) {
       : null;
 
   return (
-    <LoadingPanel isLoading={isLoading} isFetched={isFetched} error={error}>
-      <div className={styles.container}>
-        <DataTable data={data} className={styles.table}>
+    <LoadingPanel data={data} isLoading={isLoading} isFetching={isFetching} error={error}>
+      <Grid>
+        <DataTable data={data}>
           <DataColumn id="propertyName" label={formatMessage(labels.property)}>
             {(row: any) => (
-              <div className={styles.link} onClick={() => setPropertyName(row.propertyName)}>
-                {row.propertyName}
-              </div>
+              <div onClick={() => setPropertyName(row.propertyName)}>{row.propertyName}</div>
             )}
           </DataColumn>
           <DataColumn id="total" label={formatMessage(labels.count)} align="end" />
         </DataTable>
         {propertyName && (
-          <div className={styles.chart}>
-            <div className={styles.title}>{propertyName}</div>
+          <div>
+            <div>{propertyName}</div>
             <PieChart key={propertyName} type="doughnut" chartData={chartData} />
           </div>
         )}
-      </div>
+      </Grid>
     </LoadingPanel>
   );
 }

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

@@ -1,5 +0,0 @@
-.link {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}

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

@@ -2,7 +2,6 @@ import Link from 'next/link';
 import { DataColumn, DataTable } from '@umami/react-zen';
 import { useFormat, useMessages, useTimezone } from '@/components/hooks';
 import { Avatar } from '@/components/common/Avatar';
-import styles from './SessionsTable.module.css';
 import { TypeIcon } from '@/components/common/TypeIcon';
 
 export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
@@ -14,7 +13,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
     <DataTable data={data}>
       <DataColumn id="id" label={formatMessage(labels.session)} width="100px">
         {(row: any) => (
-          <Link href={`sessions/${row.id}`} className={styles.link}>
+          <Link href={`sessions/${row.id}`}>
             <Avatar seed={row.id} size={64} />
           </Link>
         )}

src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css

@@ -1,43 +0,0 @@
-.week {
-  display: flex;
-  justify-content: space-between;
-  position: relative;
-}
-
-.header {
-  text-align: center;
-  font-weight: 700;
-  margin-bottom: 10px;
-}
-
-.day {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-  gap: 1px;
-  position: relative;
-}
-
-.cell {
-  display: flex;
-  background-color: var(--base-color-2);
-  width: 20px;
-  height: 20px;
-  margin: auto;
-  border-radius: 100%;
-  align-items: flex-start;
-}
-
-.hour {
-  font-weight: 700;
-  color: var(--font-color);
-  height: 20px;
-}
-
-.block {
-  background-color: var(--primary-color);
-  width: 20px;
-  height: 20px;
-  border-radius: 100%;
-}

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

@@ -14,7 +14,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
     .fill(weekStartsOn)
     .map((d, i) => (d + i) % 7);
 
-  const [, max] = data
+  const [, max = 1] = data
     ? data.reduce((arr: number[], hours: number[], index: number) => {
         const min = Math.min(...hours);
         const max = Math.max(...hours);
@@ -69,17 +69,25 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
                   key={index}
                   gap="1"
                 >
-                  <Row marginBottom="3">
+                  <Row alignItems="center" justifyContent="center" marginBottom="3">
                     <Text weight="bold" align="center">
                       {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
                     </Text>
                   </Row>
                   {day?.map((count: number, j) => {
-                    const pct = count / max;
+                    const pct = max ? count / max : 0;
                     return (
                       <TooltipTrigger key={j} delay={0} isDisabled={count <= 0}>
                         <Focusable>
-                          <Row backgroundColor="2" width="20px" height="20px" borderRadius="full">
+                          <Row
+                            alignItems="center"
+                            justifyContent="center"
+                            backgroundColor="2"
+                            width="20px"
+                            height="20px"
+                            borderRadius="full"
+                            style={{ margin: '0 auto' }}
+                          >
                             <Row
                               backgroundColor="primary"
                               width="20px"

src/app/api/users/[userId]/usage/route.ts

@@ -3,7 +3,7 @@ import { json, unauthorized } from '@/lib/response';
 import { getAllUserWebsitesIncludingTeamOwner } from '@/queries/prisma/website';
 import { getEventUsage } from '@/queries/sql/events/getEventUsage';
 import { getEventDataUsage } from '@/queries/sql/events/getEventDataUsage';
-import { parseRequest } from '@/lib/request';
+import { parseRequest, getRequestDateRange } from '@/lib/request';
 
 export async function GET(request: Request, { params }: { params: Promise<{ userId: string }> }) {
   const schema = z.object({
@@ -22,10 +22,7 @@ export async function GET(request: Request, { params }: { params: Promise<{ user
   }
 
   const { userId } = await params;
-  const { startAt, endAt } = query;
-
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   const websites = await getAllUserWebsitesIncludingTeamOwner(userId);
 

src/app/api/websites/[websiteId]/event-data/events/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { getEventDataEvents } from '@/queries/sql/events/getEventDataEvents';
@@ -20,15 +20,13 @@ export async function GET(
   }
 
   const { websiteId } = await params;
-  const { startAt, endAt, event } = query;
+  const { event } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getEventDataEvents(websiteId, {
     startDate,
     endDate,

src/app/api/websites/[websiteId]/event-data/fields/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { getEventDataFields } from '@/queries';
@@ -20,15 +20,12 @@ export async function GET(
   }
 
   const { websiteId } = await params;
-  const { startAt, endAt } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getEventDataFields(websiteId, {
     startDate,
     endDate,

src/app/api/websites/[websiteId]/event-data/properties/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { getEventDataProperties } from '@/queries';
@@ -21,15 +21,13 @@ export async function GET(
   }
 
   const { websiteId } = await params;
-  const { startAt, endAt, propertyName } = query;
+  const { propertyName } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getEventDataProperties(websiteId, { startDate, endDate, propertyName });
 
   return json(data);

src/app/api/websites/[websiteId]/event-data/stats/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { getEventDataStats } from '@/queries';
@@ -21,15 +21,12 @@ export async function GET(
   }
 
   const { websiteId } = await params;
-  const { startAt, endAt } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getEventDataStats(websiteId, { startDate, endDate });
 
   return json(data);

src/app/api/websites/[websiteId]/event-data/values/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { getEventDataValues } from '@/queries';
@@ -22,15 +22,13 @@ export async function GET(
   }
 
   const { websiteId } = await params;
-  const { startAt, endAt, eventName, propertyName } = query;
+  const { eventName, propertyName } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getEventDataValues(websiteId, {
     startDate,
     endDate,

src/app/api/websites/[websiteId]/events/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { pagingParams } from '@/lib/schema';
@@ -22,15 +22,12 @@ export async function GET(
   }
 
   const { websiteId } = await params;
-  const { startAt, endAt } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getWebsiteEvents(websiteId, { startDate, endDate }, query);
 
   return json(data);

src/app/api/websites/[websiteId]/events/series/route.ts

@@ -12,7 +12,7 @@ export async function GET(
   const schema = z.object({
     startAt: z.coerce.number().int(),
     endAt: z.coerce.number().int(),
-    unit: unitParam,
+    unit: unitParam.optional(),
     timezone: timezoneParam,
     ...filterParams,
   });

src/app/api/websites/[websiteId]/session-data/properties/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { getSessionDataProperties } from '@/queries';
@@ -20,16 +20,14 @@ export async function GET(
     return error();
   }
 
-  const { startAt, endAt, propertyName } = query;
   const { websiteId } = await params;
+  const { propertyName } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getSessionDataProperties(websiteId, { startDate, endDate, propertyName });
 
   return json(data);

src/app/api/websites/[websiteId]/session-data/values/route.ts

@@ -1,5 +1,5 @@
 import { canViewWebsite } from '@/lib/auth';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { getSessionDataValues } from '@/queries';
 import { z } from 'zod';
@@ -20,16 +20,14 @@ export async function GET(
     return error();
   }
 
-  const { startAt, endAt, propertyName } = query;
+  const { propertyName } = query;
   const { websiteId } = await params;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getSessionDataValues(websiteId, {
     startDate,
     endDate,

src/app/api/websites/[websiteId]/sessions/[sessionId]/activity/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { parseRequest, getRequestDateRange } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { getSessionActivity } from '@/queries';
@@ -20,15 +20,12 @@ export async function GET(
   }
 
   const { websiteId, sessionId } = await params;
-  const { startAt, endAt } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getSessionActivity(websiteId, sessionId, startDate, endDate);
 
   return json(data);

src/app/api/websites/[websiteId]/sessions/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { pagingParams } from '@/lib/schema';
@@ -21,16 +21,13 @@ export async function GET(
     return error();
   }
 
+  const { startDate, endDate } = await getRequestDateRange(query);
   const { websiteId } = await params;
-  const { startAt, endAt } = query;
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getWebsiteSessions(websiteId, { startDate, endDate }, query);
 
   return json(data);

src/app/api/websites/[websiteId]/sessions/weekly/route.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { parseRequest } from '@/lib/request';
+import { getRequestDateRange, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/lib/auth';
 import { pagingParams, timezoneParam } from '@/lib/schema';
@@ -23,15 +23,13 @@ export async function GET(
   }
 
   const { websiteId } = await params;
-  const { startAt, endAt, timezone } = query;
+  const { timezone } = query;
+  const { startDate, endDate } = await getRequestDateRange(query);
 
   if (!(await canViewWebsite(auth, websiteId))) {
     return unauthorized();
   }
 
-  const startDate = new Date(+startAt);
-  const endDate = new Date(+endAt);
-
   const data = await getWebsiteSessionsWeekly(websiteId, { startDate, endDate, timezone });
 
   return json(data);

src/lib/date.ts

@@ -310,7 +310,11 @@ export function getDayOfWeekAsDate(dayOfWeek: number) {
   return currentDate;
 }
 
-export function formatDate(date: string | number | Date, dateFormat: string, locale = 'en-US') {
+export function formatDate(
+  date: string | number | Date,
+  dateFormat: string = 'PPpp',
+  locale = 'en-US',
+) {
   return format(typeof date === 'string' ? new Date(date) : date, dateFormat, {
     locale: getDateLocale(locale),
   });

src/lib/request.ts

@@ -1,9 +1,8 @@
 import { z } from 'zod/v4';
 import { FILTER_COLUMNS } from '@/lib/constants';
 import { badRequest, unauthorized } from '@/lib/response';
-import { getAllowedUnits, getMinimumUnit } from '@/lib/date';
+import { getAllowedUnits, getCompareDate, getMinimumUnit } from '@/lib/date';
 import { checkAuth } from '@/lib/auth';
-import { getWebsiteDateRange } from '@/queries';
 
 export async function parseRequest(
   request: Request,
@@ -48,31 +47,26 @@ export async function getJsonBody(request: Request) {
   }
 }
 
-export async function getRequestDateRange(query: Record<string, any>) {
-  const { websiteId, startAt, endAt, unit } = query;
-
-  // All-time
-  if (+startAt === 0 && +endAt === 1) {
-    const result = await getWebsiteDateRange(websiteId as string);
-    const { min, max } = result[0];
-    const startDate = new Date(min);
-    const endDate = new Date(max);
-
-    return {
-      startDate,
-      endDate,
-      unit: getMinimumUnit(startDate, endDate),
-    };
-  }
+export async function getRequestDateRange(query: Record<string, string>) {
+  const { startAt, endAt, unit, compare } = query;
 
   const startDate = new Date(+startAt);
   const endDate = new Date(+endAt);
-  const minUnit = getMinimumUnit(startDate, endDate);
+
+  const { startDate: compareStartDate, endDate: compareEndDate } = getCompareDate(
+    compare,
+    startDate,
+    endDate,
+  );
 
   return {
     startDate,
     endDate,
-    unit: (getAllowedUnits(startDate, endDate).includes(unit as string) ? unit : minUnit) as string,
+    compareStartDate,
+    compareEndDate,
+    unit: getAllowedUnits(startDate, endDate).includes(unit)
+      ? unit
+      : getMinimumUnit(startDate, endDate),
   };
 }