From e42201fea6f8cb499ccb2762acc3b30ca942d77c Mon Sep 17 00:00:00 2001
From: RevIQ <me@rev.iq>
Date: Thu, 8 Jan 2026 09:47:02 +0800
Subject: [PATCH] Fix peak traffic chart to match Figma design
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Overlay bars instead of positioning side by side, with transparent
hatched "Last month" bars on top of solid "This month" bars. Update
legend icons to circular. Add CLAUDE.md with dev server notes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 CLAUDE.md                                     |  8 ++++++++
 .../dashboard/peak-traffic-chart.svelte       | 20 +++++++++----------
 2 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..4ed42e6
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,8 @@
+# Claude Code Notes
+
+## Development Server
+
+Before starting the dev server, check if it's already running:
+- Use `lsof -i :6827` or check for existing background tasks
+- The dev server runs on port 6827 (may fall back to 6828 if port is in use)
+- Start with `bun run --cwd apps/publisher-dashboard dev` or `devenv up`
diff --git a/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte b/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
index ddd1963..f4d4844 100644
--- a/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
+++ b/apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
@@ -65,19 +65,19 @@ function hourToPercent(hour: number): number {
           {#each days as _, dayIndex}
             {@const thisMonth = thisMonthData[dayIndex]}
             {@const lastMonth = lastMonthData[dayIndex]}
-            <div class="relative">
-              <!-- This month bar (solid) -->
+            <div class="relative flex justify-center">
+              <!-- This month bar (solid) - rendered first, behind -->
               <div
-                class="absolute left-0 w-3 rounded-sm bg-muted-foreground/60"
+                class="absolute w-4 rounded-sm bg-muted-foreground/50"
                 style="
                   top: {hourToPercent(thisMonth.start)}%;
                   height: {hourToPercent(thisMonth.end - thisMonth.start)}%;
                 "
               ></div>
 
-              <!-- Last month bar (hatched) -->
+              <!-- Last month bar (hatched) - rendered second, overlaid on top -->
               <div
-                class="absolute left-4 w-3 overflow-hidden rounded-sm"
+                class="absolute w-4 overflow-hidden rounded-sm"
                 style="
                   top: {hourToPercent(lastMonth.start)}%;
                   height: {hourToPercent(lastMonth.end - lastMonth.start)}%;
@@ -92,7 +92,7 @@ function hourToPercent(hour: number): number {
                       height="4"
                       patternTransform="rotate(45)"
                     >
-                      <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/50" />
+                      <line x1="0" y1="0" x2="0" y2="4" stroke="currentColor" stroke-width="1.5" class="text-muted-foreground/40" />
                     </pattern>
                   </defs>
                   <rect width="100%" height="100%" fill="url(#diagonal-{dayIndex})" />
@@ -114,11 +114,11 @@ function hourToPercent(hour: number): number {
     <!-- Legend -->
     <div class="mt-4 flex items-center justify-center gap-6">
       <div class="flex items-center gap-2">
-        <div class="h-3 w-3 rounded-sm bg-muted-foreground/60"></div>
-        <span class="text-[11px] text-muted-foreground">This month</span>
+        <div class="h-3 w-3 rounded-full bg-muted-foreground/60"></div>
+        <span class="text-xs text-muted-foreground">This month</span>
       </div>
       <div class="flex items-center gap-2">
-        <div class="relative h-3 w-3 overflow-hidden rounded-sm">
+        <div class="relative h-3 w-3 overflow-hidden rounded-full">
           <svg class="h-full w-full" preserveAspectRatio="none">
             <defs>
               <pattern
@@ -134,7 +134,7 @@ function hourToPercent(hour: number): number {
             <rect width="100%" height="100%" fill="url(#diagonal-legend)" />
           </svg>
         </div>
-        <span class="text-[11px] text-muted-foreground">Last month</span>
+        <span class="text-xs text-muted-foreground">Last month</span>
       </div>
     </div>
   </div>