From ceacc25021737491c155de366deb31372583c102 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sun, 18 Aug 2024 00:15:20 -0700
Subject: [PATCH 1/2] Fixed session weekly rendering bug.

---
 .../websites/[websiteId]/sessions/SessionsWeekly.module.css  | 5 ++++-
 .../(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx  | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
index 59f0cca6..6f5bf6cb 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
@@ -13,16 +13,19 @@
 .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);
   width: 20px;
   height: 20px;
+  margin: auto;
+  align-items: start;
 }
 
 .hour {
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index 0ee4805d..f9acaefc 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -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,7 +50,7 @@ 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>

From e98bc3bd742acd71d5b2abe13d42c8a79634e7a3 Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Sun, 18 Aug 2024 10:38:28 -0700
Subject: [PATCH 2/2] Changed session weekly to dots.

---
 .../websites/[websiteId]/sessions/SessionsWeekly.module.css | 5 +++--
 .../(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx | 6 +++++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
index 6f5bf6cb..ba15dfcc 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.module.css
@@ -21,10 +21,11 @@
 
 .cell {
   display: flex;
-  background-color: var(--base100);
+  background-color: var(--base75);
   width: 20px;
   height: 20px;
   margin: auto;
+  border-radius: 100%;
   align-items: start;
 }
 
@@ -38,5 +39,5 @@
   background-color: var(--primary400);
   width: 20px;
   height: 20px;
-  border-radius: 3px;
+  border-radius: 100%;
 }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
index f9acaefc..3e15ddfa 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsWeekly.tsx
@@ -55,6 +55,7 @@ export function SessionsWeekly({ websiteId }: { websiteId: string }) {
                 {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>