watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-06 01:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #3232 from harryo/master

Browse source 
Format time using dateLocale
This commit is contained in:
Mike Cao 2025-02-18 13:13:58 -08:00 • committed by GitHub
commit ed297d3067
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 43 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
View file

@ -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);

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

@ -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 (
<div key={i} className={styles.hour}>
{label}
@ -48,33 +54,35 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
);
})}
</div>
{data?.map((day: number[], index: number) => {
return (
<div key={index} className={styles.day}>
<div className={styles.header}>
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
{data &&
daysOfWeek.map((index: number) => {
const day = data[index];
return (
<div key={index} className={styles.day}>
<div className={styles.header}>
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</div>
{day?.map((hour: number) => {
const pct = hour / max;
return (
<div key={hour} className={classNames(styles.cell)}>
{hour > 0 && (
<TooltipPopup
label={`${formatMessage(labels.visitors)}: ${hour}`}
position="right"
>
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</TooltipPopup>
)}
</div>
);
})}
</div>
{day?.map((hour: number, n) => {
const pct = hour / max;
return (
<div key={n} className={classNames(styles.cell)}>
{hour > 0 && (
<TooltipPopup
label={`${formatMessage(labels.visitors)}: ${hour}`}
position="right"
>
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</TooltipPopup>
)}
</div>
);
})}
</div>
);
})}
);
})}
</div>
</LoadingPanel>
);

2
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
View file

@ -34,7 +34,7 @@ export function SessionActivity({
return (
<Fragment key={eventId}>
{showHeader && (
<div className={styles.header}>{formatTimezoneDate(createdAt, 'EEEE, PPP')}</div>
<div className={styles.header}>{formatTimezoneDate(createdAt, 'PPPP')}</div>
)}
<div key={eventId} className={styles.row}>
<div className={styles.time}>

4
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
View file

@ -20,10 +20,10 @@ export default function SessionInfo({ data }) {
</dd>
<dt>{formatMessage(labels.lastSeen)}</dt>
<dd>{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}</dd>
<dd>{formatTimezoneDate(data?.lastAt, 'PPPPpp')}</dd>
<dt>{formatMessage(labels.firstSeen)}</dt>
<dd>{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}</dd>
<dd>{formatTimezoneDate(data?.firstAt, 'PPPPpp')}</dd>
<dt>{formatMessage(labels.country)}</dt>
<dd>

5
src/components/hooks/useTimezone.ts
View file

@ -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 },
);
};