Changed session weekly to dots.

This commit is contained in:
Mike Cao 2024-08-18 10:38:28 -07:00
parent ceacc25021
commit e98bc3bd74
2 changed files with 8 additions and 3 deletions

View File

@ -21,10 +21,11 @@
.cell { .cell {
display: flex; display: flex;
background-color: var(--base100); background-color: var(--base75);
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: auto; margin: auto;
border-radius: 100%;
align-items: start; align-items: start;
} }
@ -38,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%;
} }

View File

@ -55,6 +55,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
{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>