m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2025-02-14 21:10:34 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into analytics

Browse Source
This commit is contained in:
Mike Cao 2024-08-18 10:40:29 -07:00
commit 89313e754e
2 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
View File

@ -13,16 +13,20 @@
.day { .day {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: start;
justify-content: start;
gap: 1px; gap: 1px;
position: relative; position: relative;
} }
.cell { .cell {
display: flex; display: flex;
align-items: center; background-color: var(--base75);
background-color: var(--base100);
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: auto;
border-radius: 100%;
align-items: start;
} }
.hour { .hour {
@ -35,5 +39,5 @@
background-color: var(--primary400); background-color: var(--primary400);
width: 20px; width: 20px;
height: 20px; height: 20px;
border-radius: 3px; border-radius: 100%;
} }

10
src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
View File

@ -34,7 +34,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
return ( return (
<LoadingPanel {...(props as any)} data={data}> <LoadingPanel {...(props as any)} data={data}>
<div className={styles.week}> <div key={data} className={styles.week}>
<div className={styles.day}> <div className={styles.day}>
<div className={styles.header}>&nbsp;</div> <div className={styles.header}>&nbsp;</div>
{Array(24) {Array(24)
@ -50,11 +50,12 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
</div> </div>
{data?.map((day: number[], index: number) => { {data?.map((day: number[], index: number) => {
return ( return (
<div className={styles.day} key={index}> <div key={index} className={styles.day}>
<div className={styles.header}> <div className={styles.header}>
{format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })} {format(getDayOfWeekAsDate(index), 'EEE', { locale: dateLocale })}
</div> </div>
{day?.map((hour: number) => { {day?.map((hour: number) => {
const pct = hour / max;
return ( return (
<div key={hour} className={classNames(styles.cell)}> <div key={hour} className={classNames(styles.cell)}>
{hour > 0 && ( {hour > 0 && (
@ -62,7 +63,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
label={`${formatMessage(labels.visitors)}: ${hour}`} label={`${formatMessage(labels.visitors)}: ${hour}`}
position="right" position="right"
> >
<div className={styles.block} style={{ opacity: hour / max }} /> <div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</TooltipPopup> </TooltipPopup>
)} )}
</div> </div>