Fix #18: Return proper day buckets adjusting for client tz

benvinegar · Jan 31, 2024 · 4bade00 · 4bade00
1 parent 0ddf102
commit 4bade00
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 16 deletions.
diff --git a/app/analytics/query.test.ts b/app/analytics/query.test.ts
@@ -70,7 +70,7 @@ describe("AnalyticsEngineAPI", () => {
 
             vi.setSystemTime(new Date("2024-01-18T09:33:02").getTime());
 
-            const result1 = await api.getViewsGroupedByInterval("example.com", "DAY", 7);
+            const result1 = await api.getViewsGroupedByInterval("example.com", "DAY", 7, 'America/New_York');
 
             // results should all be at 05:00:00 because local timezone is UTC-5 --
             // this set of results represents "start of day" in local tz, which is 5 AM UTC
@@ -85,9 +85,7 @@ describe("AnalyticsEngineAPI", () => {
                 ["2024-01-18 05:00:00", 0],
             ]);
 
-            expect(await api.getViewsGroupedByInterval("example.com", "DAY", 5))
-
-            const result2 = await api.getViewsGroupedByInterval("example.com", "DAY", 5);
+            const result2 = await api.getViewsGroupedByInterval("example.com", "DAY", 5, 'America/New_York');
             expect(result2).toEqual([
                 ["2024-01-13 05:00:00", 3],
                 ["2024-01-14 05:00:00", 0],

diff --git a/app/analytics/query.ts b/app/analytics/query.ts
@@ -1,3 +1,10 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
 interface ColumnMappingsType {
     [key: string]: any
 }
@@ -58,28 +65,38 @@ function formatDateString(d: Date) {
  *   }
  *  
  * */
-function generateEmptyRowsOverInterval(intervalType: string, daysAgo: number): [Date, any] {
-    const startDateTime = new Date();
+function generateEmptyRowsOverInterval(intervalType: string, daysAgo: number, tz?: string): [Date, any] {
+
+    if (!tz) {
+        tz = 'Etc/UTC';
+    }
+
+    let localDateTime = dayjs();
     let intervalMs = 0;
 
     // get start date in the past by subtracting interval * type
     if (intervalType === 'DAY') {
-        // get intervalCount days in the past
-        startDateTime.setDate(startDateTime.getDate() - daysAgo);
-        startDateTime.setHours(0);
+        localDateTime = dayjs()
+            .utc()
+            .subtract(daysAgo, 'day')
+            .tz(tz)
+            .startOf('day');
 
         // assumes interval is 24 hours
         intervalMs = 24 * 60 * 60 * 1000;
 
     } else if (intervalType === 'HOUR') {
-        // get intervalCount hours in the past
-        startDateTime.setUTCHours(startDateTime.getUTCHours() - daysAgo * 24);
+        localDateTime = dayjs()
+            .utc()
+            .subtract(daysAgo, 'day')
+            .startOf('hour');
 
         // assumes interval is hourly
         intervalMs = 60 * 60 * 1000;
     }
 
-    startDateTime.setMinutes(0, 0, 0);
+
+    const startDateTime = localDateTime.toDate();
 
     const initialRows: any = {};
 
@@ -93,7 +110,6 @@ function generateEmptyRowsOverInterval(intervalType: string, daysAgo: number): [
         initialRows[key] = 0;
     }
 
-
     return [startDateTime, initialRows];
 }
 
@@ -138,7 +154,7 @@ export class AnalyticsEngineAPI {
         });
     }
 
-    async getViewsGroupedByInterval(siteId: string, intervalType: string, sinceDays: number, tz?: string): Promise<any> {
+    async getViewsGroupedByInterval(siteId: string, intervalType: string, sinceDays: number, tz: string): Promise<any> {
         const siteIdColumn = ColumnMappings['siteId'];
 
         let intervalCount = 1;
@@ -152,7 +168,7 @@ export class AnalyticsEngineAPI {
         }
 
         // note interval count hard-coded to hours at the moment
-        const [startDateTime, initialRows] = generateEmptyRowsOverInterval(intervalType, sinceDays);
+        const [startDateTime, initialRows] = generateEmptyRowsOverInterval(intervalType, sinceDays, tz);
 
         // NOTE: when using toStartOfInterval, cannot group by other columns
         //       like double1 (isVisitor) or double2 (isSession/isVisit). This

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "@remix-run/react": "^2.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "dayjs": "^1.11.10",
     "isbot": "^3.6.8",
     "lucide-react": "^0.302.0",
     "react": "^18.2.0",
@@ -67,4 +68,4 @@
   "engines": {
     "node": ">=20.0.0"
   }
-}
+}