mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-06 01:43:32 -04:00
added MaU section with projection
This commit is contained in:
George Powell
@@ -9,7 +9,7 @@
|
||||
activeStreaks: number;
|
||||
avgGuessesToday: number | null;
|
||||
registeredUsers: number;
|
||||
avgCompletionsPerPlayer: number | null;
|
||||
monthlyPlayers: number;
|
||||
}
|
||||
|
||||
interface PageData {
|
||||
@@ -51,6 +51,18 @@
|
||||
changePct: number | null;
|
||||
}[];
|
||||
avgWau: number;
|
||||
mauMonths: { monthStart: string; monthEnd: string; mau: number; changePct: number | null }[];
|
||||
calendarMauMonths: {
|
||||
label: string;
|
||||
monthStart: string;
|
||||
monthEnd: string;
|
||||
mau: number;
|
||||
daysElapsed: number;
|
||||
daysInMonth: number;
|
||||
projectedMau: number | null;
|
||||
changePct: number | null;
|
||||
isCurrentMonth: boolean;
|
||||
}[];
|
||||
sessionDepthCards: { depth: number; players: number; returnRate: number | null }[];
|
||||
}
|
||||
|
||||
@@ -69,6 +81,8 @@
|
||||
newPlayerReturnVelocity,
|
||||
wauWeeks,
|
||||
avgWau,
|
||||
mauMonths,
|
||||
calendarMauMonths,
|
||||
sessionDepthCards,
|
||||
} = $derived(data);
|
||||
|
||||
@@ -79,6 +93,8 @@
|
||||
let streakExpanded = $state(false);
|
||||
let ret7dExpanded = $state(false);
|
||||
let ret30dExpanded = $state(false);
|
||||
let mauExpanded = $state(false);
|
||||
let mauMode = $state<'rolling' | 'calendar'>('rolling');
|
||||
|
||||
function signed(n: number, unit = ""): string {
|
||||
if (n > 0) return `+${n}${unit}`;
|
||||
@@ -107,13 +123,7 @@
|
||||
{ label: "Players This Week", value: String(stats.weeklyPlayers) },
|
||||
{ label: "Active Streaks", value: String(stats.activeStreaks) },
|
||||
{ label: "Registered Users", value: String(stats.registeredUsers) },
|
||||
{
|
||||
label: "Avg Completions/Player",
|
||||
value:
|
||||
stats.avgCompletionsPerPlayer != null
|
||||
? stats.avgCompletionsPerPlayer.toFixed(2)
|
||||
: "N/A",
|
||||
},
|
||||
{ label: "Players This Month", value: String(stats.monthlyPlayers) },
|
||||
{
|
||||
label: "Overall Return Rate",
|
||||
value: overallReturnRate != null ? `${overallReturnRate}%` : "N/A",
|
||||
@@ -494,6 +504,123 @@
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<h2 class="text-lg font-semibold text-gray-100">Monthly Active Users</h2>
|
||||
<div class="flex gap-1 bg-white/5 rounded-lg p-1">
|
||||
<button
|
||||
onclick={() => (mauMode = 'rolling')}
|
||||
class="px-3 py-1 text-xs rounded-md transition-colors {mauMode === 'rolling' ? 'bg-white/10 text-gray-100' : 'text-gray-400 hover:text-gray-200'}"
|
||||
>Rolling 30d</button>
|
||||
<button
|
||||
onclick={() => (mauMode = 'calendar')}
|
||||
class="px-3 py-1 text-xs rounded-md transition-colors {mauMode === 'calendar' ? 'bg-white/10 text-gray-100' : 'text-gray-400 hover:text-gray-200'}"
|
||||
>Calendar</button>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm mb-4">
|
||||
{mauMode === 'rolling' ? 'Unique players per 30-day window. Most recent first.' : 'Unique players per calendar month. Current month projected to end of month.'}
|
||||
</p>
|
||||
|
||||
{#if mauMode === 'rolling'}
|
||||
{@const displayedMauMonths = mauExpanded ? mauMonths : mauMonths.slice(0, 3)}
|
||||
{@const maxMau = Math.max(1, ...mauMonths.map((m) => m.mau))}
|
||||
<div class="overflow-x-auto rounded-xl border border-white/10">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
|
||||
<th class="text-left px-4 py-3">Period</th>
|
||||
<th class="text-right px-4 py-3">Active Users</th>
|
||||
<th class="text-right px-4 py-3">Mo/Mo Change</th>
|
||||
<th class="px-4 py-3 w-48"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each displayedMauMonths as row (row.monthEnd)}
|
||||
{@const barPct = Math.round((row.mau / maxMau) * 100)}
|
||||
<tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
|
||||
<td class="px-4 py-3 text-gray-300 text-xs">{row.monthStart} – {row.monthEnd}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">{row.mau}</td>
|
||||
<td class="px-4 py-3 text-right text-xs font-medium {row.changePct != null ? row.changePct > 0 ? 'text-green-400' : row.changePct < 0 ? 'text-red-400' : 'text-gray-400' : 'text-gray-500'}">
|
||||
{row.changePct != null ? signed(row.changePct, '%') : '—'}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-24">
|
||||
<div class="bg-teal-500 h-4 rounded" style="width: {barPct}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if mauMonths.length > 3}
|
||||
<button
|
||||
onclick={() => (mauExpanded = !mauExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{mauExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
{@const displayedCalMau = mauExpanded ? calendarMauMonths : calendarMauMonths.slice(0, 3)}
|
||||
{@const maxCalMau = Math.max(1, ...calendarMauMonths.map((m) => m.projectedMau ?? m.mau))}
|
||||
<div class="overflow-x-auto rounded-xl border border-white/10">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="bg-white/5 text-gray-400 text-xs uppercase tracking-wide">
|
||||
<th class="text-left px-4 py-3">Month</th>
|
||||
<th class="text-right px-4 py-3">Active Users</th>
|
||||
<th class="text-right px-4 py-3">Mo/Mo Change</th>
|
||||
<th class="px-4 py-3 w-48"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each displayedCalMau as row (row.monthStart)}
|
||||
{@const displayMau = row.projectedMau ?? row.mau}
|
||||
{@const barPct = Math.round((displayMau / maxCalMau) * 100)}
|
||||
<tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
|
||||
<td class="px-4 py-3 text-gray-300">
|
||||
{row.label}
|
||||
{#if row.isCurrentMonth}
|
||||
<span class="text-xs text-gray-500 ml-1">(projected)</span>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right font-medium {row.isCurrentMonth ? 'text-gray-400' : 'text-gray-100'}">
|
||||
{#if row.isCurrentMonth}
|
||||
<span class="text-gray-500 text-xs">{row.mau} → </span>{row.projectedMau ?? row.mau}
|
||||
{:else}
|
||||
{row.mau}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right text-xs font-medium {row.changePct != null ? row.changePct > 0 ? 'text-green-400' : row.changePct < 0 ? 'text-red-400' : 'text-gray-400' : 'text-gray-500'}">
|
||||
{#if row.changePct != null}
|
||||
{row.isCurrentMonth ? '~' : ''}{signed(row.changePct, '%')}
|
||||
{:else}
|
||||
—
|
||||
{/if}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-24">
|
||||
<div class="bg-teal-500 h-4 rounded {row.isCurrentMonth ? 'opacity-50' : ''}" style="width: {barPct}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if calendarMauMonths.length > 3}
|
||||
<button
|
||||
onclick={() => (mauExpanded = !mauExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{mauExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
<h2 class="text-lg font-semibold text-gray-100 mb-4">
|
||||
Last 14 Days — Completions
|
||||
|
||||
Reference in New Issue
Block a user