igm/publisher-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix peak traffic chart to match Figma design

Browse Source 
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>
This commit is contained in:
RevIQ
2026-01-08 09:47:02 +08:00
parent ad65469db6
commit e42201fea6
2 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/publisher-dashboard/src/lib/components/dashboard/peak-traffic-chart.svelte
View File

@@ -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>