Add timezone to report queries.

components/messages.js

@@ -172,6 +172,8 @@ export const labels = defineMessages({
   browser: { id: 'label.browser', defaultMessage: 'Browser' },
   device: { id: 'label.device', defaultMessage: 'Device' },
   pageTitle: { id: 'label.pageTitle', defaultMessage: 'Page title' },
+  day: { id: 'label.day', defaultMessage: 'Day' },
+  date: { id: 'label.date', defaultMessage: 'Date' },
 });
 
 export const messages = defineMessages({

components/pages/reports/Report.js

@@ -8,6 +8,8 @@ export const ReportContext = createContext(null);
 export function Report({ reportId, defaultParameters, children, ...props }) {
   const report = useReport(reportId, defaultParameters);
 
+  //console.log({ report });
+
   return (
     <ReportContext.Provider value={{ ...report }}>
       <Page {...props} className={styles.container}>

components/pages/reports/retention/RetentionTable.js

@@ -2,9 +2,12 @@ import { useContext } from 'react';
 import { GridTable, GridColumn } from 'react-basics';
 import { ReportContext } from '../Report';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
+import { useMessages } from 'hooks';
+import { dateFormat } from 'lib/date';
 import styles from './RetentionTable.module.css';
 
 export function RetentionTable() {
+  const { formatMessage, labels } = useMessages();
   const { report } = useContext(ReportContext);
   const { data } = report || {};
 
@@ -19,21 +22,27 @@ export function RetentionTable() {
     return arr;
   }, []);
 
-  const days = Array(14).fill(null);
+  const days = Array(32).fill(null);
 
   return (
     <>
       <div className={styles.table}>
         <div className={styles.row}>
+          <div className={styles.date}>{formatMessage(labels.date)}</div>
           {days.map((n, i) => (
             <div key={i} className={styles.header}>
-              Day {i}
+              {formatMessage(labels.day)} {i}
             </div>
           ))}
         </div>
         {dates.map((date, i) => {
           return (
             <div key={i} className={styles.row}>
+              <div className={styles.date}>
+                {dateFormat(date, 'P')}
+                <br />
+                {date}
+              </div>
               {days.map((n, day) => {
                 return (
                   <div key={day} className={styles.cell}>

components/pages/reports/retention/RetentionTable.module.css

@@ -26,3 +26,7 @@
   background: var(--blue100);
   border-radius: var(--border-radius);
 }
+
+.date {
+  min-width: 200px;
+}

hooks/useReport.js

@@ -1,5 +1,6 @@
 import { produce } from 'immer';
 import { useCallback, useEffect, useState } from 'react';
+import { useTimezone } from './useTimezone';
 import useApi from './useApi';
 
 const baseParameters = {
@@ -12,6 +13,7 @@ export function useReport(reportId, defaultParameters) {
   const [report, setReport] = useState(null);
   const [isRunning, setIsRunning] = useState(false);
   const { get, post } = useApi();
+  const [timezone] = useTimezone();
 
   const loadReport = async id => {
     const data = await get(`/reports/${id}`);
@@ -33,7 +35,7 @@ export function useReport(reportId, defaultParameters) {
 
       const { type } = report;
 
-      const data = await post(`/reports/${type}`, parameters);
+      const data = await post(`/reports/${type}`, { ...parameters, timezone });
 
       setReport(
         produce(state => {

lib/date.js

@@ -250,9 +250,13 @@ export const customFormats = {
 };
 
 export function dateFormat(date, str, locale = 'en-US') {
-  return format(date, customFormats?.[locale]?.[str] || str, {
+  return format(
-    locale: getDateLocale(locale),
+    typeof date === 'string' ? new Date(date) : date,
-  });
+    customFormats?.[locale]?.[str] || str,
+    {
+      locale: getDateLocale(locale),
+    },
+  );
 }
 
 export function maxDate(...args) {

pages/api/reports/retention.ts

@@ -8,6 +8,7 @@ import { getRetention } from 'queries';
 export interface RetentionRequestBody {
   websiteId: string;
   dateRange: { window; startDate: string; endDate: string };
+  timezone: string;
 }
 
 export interface RetentionResponse {
@@ -26,6 +27,7 @@ export default async (
     const {
       websiteId,
       dateRange: { startDate, endDate },
+      timezone,
     } = req.body;
 
     if (!(await canViewWebsite(req.auth, websiteId))) {
@@ -35,6 +37,7 @@ export default async (
     const data = await getRetention(websiteId, {
       startDate: new Date(startDate),
       endDate: new Date(endDate),
+      timezone,
     });
 
     return ok(res, data);