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 {
display: flex;
flex-direction: column;
align-items: start;
justify-content: start;
gap: 1px;
position: relative;
}
.cell {
display: flex;
align-items: center;
background-color: var(--base100);
background-color: var(--base75);
width: 20px;
height: 20px;
margin: auto;
border-radius: 100%;
align-items: start;
}
.hour {
@ -35,5 +39,5 @@
background-color: var(--primary400);
width: 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 (
<LoadingPanel {...(props as any)} data={data}>
<div className={styles.week}>
<div key={data} className={styles.week}>
<div className={styles.day}>
<div className={styles.header}>&nbsp;</div>
{Array(24)
@ -50,11 +50,12 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
</div>
{data?.map((day: number[], index: number) => {
return (
<div className={styles.day} key={index}>
<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 && (
@ -62,7 +63,10 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
label={`${formatMessage(labels.visitors)}: ${hour}`}
position="right"
>
<div className={styles.block} style={{ opacity: hour / max }} />
<div
className={styles.block}
style={{ opacity: pct, transform: `scale(${pct})` }}
/>
</TooltipPopup>
)}
</div>