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

Start of week according to locale in SessionsWeekly

Browse source
This commit is contained in:
Harry Oosterveen 2025-02-15 18:35:39 +01:00
parent c0c1138e2e
commit 68e2fe5d6f
1 changed files with 32 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

58
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 { data, ...props } = useWebsiteSessionsWeekly(websiteId);
const { dateLocale } = useLocale(); const { dateLocale } = useLocale();
const { labels, formatMessage } = useMessages(); const { labels, formatMessage } = useMessages();
const { weekStartsOn } = dateLocale.options;
const daysOfWeek = Array(7)
.fill(weekStartsOn)
.map((d, i) => (d + i) % 7);
const [, max] = data const [, max] = data
? data.reduce((arr: number[], hours: number[], index: number) => { ? data.reduce((arr: number[], hours: number[], index: number) => {
@ -50,33 +54,35 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
); );
})} })}
</div> </div>
{data?.map((day: number[], index: number) => { {data &&
return ( daysOfWeek.map((index: number) => {
<div key={index} className={styles.day}> const day = data[index];
<div className={styles.header}> return (
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })} <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> </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>
);
})}
</div> </div>
</LoadingPanel> </LoadingPanel>
); );