diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx index 21da2c54..bb0225cc 100644 --- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx +++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx @@ -52,7 +52,7 @@ export function RealtimeLog({ data }: { data: RealtimeData }) { }, ]; - const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss'); + const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'pp'); const getColor = ({ id, sessionId }) => stringToColor(sessionId || id); diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx index 6082f0e2..6663a563 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx @@ -10,6 +10,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) { const { data, ...props } = useWebsiteSessionsWeekly(websiteId); const { dateLocale } = useLocale(); const { labels, formatMessage } = useMessages(); + const { weekStartsOn } = dateLocale.options; + const daysOfWeek = Array(7) + .fill(weekStartsOn) + .map((d, i) => (d + i) % 7); const [, max] = data ? data.reduce((arr: number[], hours: number[], index: number) => { @@ -40,7 +44,9 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) { {Array(24) .fill(null) .map((_, i) => { - const label = format(addHours(startOfDay(new Date()), i), 'haaa'); + const label = format(addHours(startOfDay(new Date()), i), 'p', { locale: dateLocale }) + .replace(/\D00 ?/, '') + .toLowerCase(); return (
{label} @@ -48,33 +54,35 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) { ); })}
- {data?.map((day: number[], index: number) => { - return ( -
-
- {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })} + {data && + daysOfWeek.map((index: number) => { + const day = data[index]; + return ( +
+
+ {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })} +
+ {day?.map((hour: number) => { + const pct = hour / max; + return ( +
+ {hour > 0 && ( + +
+ + )} +
+ ); + })}
- {day?.map((hour: number, n) => { - const pct = hour / max; - return ( -
- {hour > 0 && ( - -
- - )} -
- ); - })} -
- ); - })} + ); + })}
); diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx index 0a020d5c..a59d3a92 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx @@ -34,7 +34,7 @@ export function SessionActivity({ return ( {showHeader && ( -
{formatTimezoneDate(createdAt, 'EEEE, PPP')}
+
{formatTimezoneDate(createdAt, 'PPPP')}
)}
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx index 889eb972..3ce78d48 100644 --- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx +++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx @@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
{formatMessage(labels.lastSeen)}
-
{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}
+
{formatTimezoneDate(data?.lastAt, 'PPPPpp')}
{formatMessage(labels.firstSeen)}
-
{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}
+
{formatTimezoneDate(data?.firstAt, 'PPPPpp')}
{formatMessage(labels.country)}
diff --git a/src/components/hooks/useTimezone.ts b/src/components/hooks/useTimezone.ts index 5f01c2ab..364e3939 100644 --- a/src/components/hooks/useTimezone.ts +++ b/src/components/hooks/useTimezone.ts @@ -1,12 +1,14 @@ import { setItem } from '@/lib/storage'; import { TIMEZONE_CONFIG } from '@/lib/constants'; import { formatInTimeZone, zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz'; -import useStore, { setTimezone } from '@/store/app'; +import useStore, { setTimezone } from 'store/app'; +import useLocale from './useLocale'; const selector = (state: { timezone: string }) => state.timezone; export function useTimezone() { const timezone = useStore(selector); + const { dateLocale } = useLocale(); const saveTimezone = (value: string) => { setItem(TIMEZONE_CONFIG, value); @@ -20,6 +22,7 @@ export function useTimezone() { : date.split(' ').join('T') + 'Z', timezone, pattern, + { locale: dateLocale }, ); };