mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-04-05 17:33:31 -04:00
refactor: extract CollapsibleTable component and fix show more
Replaces 7 inline collapsible tables in the global stats page with a reusable CollapsibleTable component. Adds mode tab toggle (Rolling 30d / Calendar) into the component. Fixes show more/less which was broken due to mode-based expanded tracking when no modes were provided. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
George Powell
102
src/lib/components/CollapsibleTable.svelte
Normal file
102
src/lib/components/CollapsibleTable.svelte
Normal file
@@ -0,0 +1,102 @@
|
||||
<script lang="ts" generics="T">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Header {
|
||||
label: string;
|
||||
align?: 'left' | 'right';
|
||||
width?: string;
|
||||
}
|
||||
|
||||
interface Mode {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
rows: T[];
|
||||
headers: Header[];
|
||||
row: Snippet<[item: T]>;
|
||||
empty?: Snippet;
|
||||
initialRows?: number;
|
||||
modes?: Mode[];
|
||||
mode?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
rows,
|
||||
headers,
|
||||
row: rowSnippet,
|
||||
empty,
|
||||
initialRows = 3,
|
||||
modes,
|
||||
mode = $bindable(modes && modes.length > 0 ? modes[0].value : undefined),
|
||||
}: Props = $props();
|
||||
|
||||
let expanded = $state(false);
|
||||
|
||||
// Reset expanded when mode changes (e.g. switching Rolling 30d ↔ Calendar)
|
||||
$effect(() => {
|
||||
mode;
|
||||
expanded = false;
|
||||
});
|
||||
|
||||
function toggleExpanded() {
|
||||
expanded = !expanded;
|
||||
}
|
||||
|
||||
const displayedRows = $derived(expanded ? rows : rows.slice(0, initialRows));
|
||||
</script>
|
||||
|
||||
{#if modes && modes.length > 1}
|
||||
<div class="flex gap-1 bg-white/5 rounded-lg p-1 w-fit ml-auto mb-3">
|
||||
{#each modes as m (m.value)}
|
||||
{@const active = mode === m.value}
|
||||
<button
|
||||
onclick={() => (mode = m.value)}
|
||||
class="px-3 py-1 text-xs rounded-md transition-colors {active ? 'bg-white/10 text-gray-100' : 'text-gray-400 hover:text-gray-200'}"
|
||||
>
|
||||
{m.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if rows.length === 0}
|
||||
{#if empty}
|
||||
{@render empty()}
|
||||
{:else}
|
||||
<p class="text-gray-400 text-sm px-4 py-6">Not enough data yet.</p>
|
||||
{/if}
|
||||
{:else}
|
||||
<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">
|
||||
{#each headers as header (header.label)}
|
||||
<th
|
||||
class="{header.align === 'right' ? 'text-right' : 'text-left'} px-4 py-3{header.width ? ' ' + header.width : ''}"
|
||||
>
|
||||
{header.label}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each displayedRows as item, i (i)}
|
||||
<tr class="border-t border-white/5 hover:bg-white/5 transition-colors">
|
||||
{@render rowSnippet(item)}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{#if rows.length > initialRows}
|
||||
<button
|
||||
onclick={toggleExpanded}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{expanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import Container from "$lib/components/Container.svelte";
|
||||
import CollapsibleTable from "$lib/components/CollapsibleTable.svelte";
|
||||
|
||||
interface Stats {
|
||||
todayCount: number;
|
||||
@@ -86,14 +87,6 @@
|
||||
sessionDepthCards,
|
||||
} = $derived(data);
|
||||
|
||||
// Collapsible table state
|
||||
let returnExpanded = $state(false);
|
||||
let wauExpanded = $state(false);
|
||||
let completionsExpanded = $state(false);
|
||||
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 {
|
||||
@@ -109,12 +102,10 @@
|
||||
}
|
||||
|
||||
const maxCount = $derived(Math.max(1, ...last14Days.map((d) => d.count)));
|
||||
|
||||
const maxWau = $derived(Math.max(1, ...wauWeeks.map((w) => w.wau)));
|
||||
|
||||
const maxStreakCount = $derived(
|
||||
Math.max(1, ...streakChart.map((r) => r.count)),
|
||||
);
|
||||
const maxStreakCount = $derived(Math.max(1, ...streakChart.map((r) => r.count)));
|
||||
const maxMau = $derived(Math.max(1, ...mauMonths.map((m) => m.mau)));
|
||||
const maxCalMau = $derived(Math.max(1, ...calendarMauMonths.map((m) => m.projectedMau ?? m.mau)));
|
||||
|
||||
const statCards = $derived([
|
||||
{ label: "Completions Today", value: String(stats.todayCount) },
|
||||
@@ -129,6 +120,11 @@
|
||||
value: overallReturnRate != null ? `${overallReturnRate}%` : "N/A",
|
||||
},
|
||||
]);
|
||||
|
||||
const mauModes = [
|
||||
{ value: 'rolling', label: 'Rolling 30d' },
|
||||
{ value: 'calendar', label: 'Calendar' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@@ -362,74 +358,34 @@
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{#if newPlayerReturnSeries.length > 0}
|
||||
<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">Date</th>
|
||||
<th class="text-right px-4 py-3">New Players</th
|
||||
>
|
||||
<th class="text-right px-4 py-3">Return Rate</th
|
||||
>
|
||||
<th class="text-right px-4 py-3">7d Avg</th>
|
||||
<th class="px-4 py-3 w-32"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (returnExpanded ? newPlayerReturnSeries : newPlayerReturnSeries.slice(0, 3)) as row (row.date)}
|
||||
<tr
|
||||
class="border-t border-white/5 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-gray-300"
|
||||
>{row.date}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-400 text-xs"
|
||||
>{row.cohort}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-400"
|
||||
>{row.rate != null
|
||||
? `${row.rate}%`
|
||||
: "—"}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-100 font-medium"
|
||||
>{row.rollingAvg != null
|
||||
? `${row.rollingAvg}%`
|
||||
: "—"}</td
|
||||
<CollapsibleTable
|
||||
rows={newPlayerReturnSeries}
|
||||
headers={[
|
||||
{ label: 'Date' },
|
||||
{ label: 'New Players', align: 'right' },
|
||||
{ label: 'Return Rate', align: 'right' },
|
||||
{ label: '7d Avg', align: 'right' },
|
||||
{ label: '', width: 'w-32' },
|
||||
]}
|
||||
>
|
||||
{#snippet row(item)}
|
||||
<td class="px-4 py-3 text-gray-300">{item.date}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohort}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-400">
|
||||
{item.rate != null ? `${item.rate}%` : '—'}
|
||||
</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">
|
||||
{item.rollingAvg != null ? `${item.rollingAvg}%` : '—'}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-20">
|
||||
{#if row.rollingAvg != null}
|
||||
<div
|
||||
class="bg-sky-500 h-4 rounded"
|
||||
style="width: {row.rollingAvg}%"
|
||||
></div>
|
||||
{#if item.rollingAvg != null}
|
||||
<div class="bg-sky-500 h-4 rounded" style="width: {item.rollingAvg}%"></div>
|
||||
{/if}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if newPlayerReturnSeries.length > 3}
|
||||
<button
|
||||
onclick={() => (returnExpanded = !returnExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{returnExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-gray-400 text-sm px-4 py-6">
|
||||
Not enough data yet.
|
||||
</p>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
@@ -440,184 +396,113 @@
|
||||
Unique players per 7-day window. Most recent week first. Avg
|
||||
WAU: <span class="text-gray-100 font-medium">{avgWau}</span>
|
||||
</p>
|
||||
<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"
|
||||
<CollapsibleTable
|
||||
rows={wauWeeks}
|
||||
headers={[
|
||||
{ label: 'Week' },
|
||||
{ label: 'Active Users', align: 'right' },
|
||||
{ label: 'Wk/Wk Change', align: 'right' },
|
||||
{ label: '', width: 'w-48' },
|
||||
]}
|
||||
>
|
||||
<th class="text-left px-4 py-3">Week</th>
|
||||
<th class="text-right px-4 py-3">Active Users</th>
|
||||
<th class="text-right px-4 py-3">Wk/Wk Change</th>
|
||||
<th class="px-4 py-3 w-48"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (wauExpanded ? wauWeeks : wauWeeks.slice(0, 3)) as row (row.weekEnd)}
|
||||
{@const barPct = Math.round(
|
||||
(row.wau / maxWau) * 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.weekStart} – {row.weekEnd}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-100 font-medium"
|
||||
>{row.wau}</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, "%")
|
||||
: "—"}
|
||||
{#snippet row(item)}
|
||||
{@const barPct = Math.round((item.wau / maxWau) * 100)}
|
||||
<td class="px-4 py-3 text-gray-300 text-xs">{item.weekStart} – {item.weekEnd}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.wau}</td>
|
||||
<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
|
||||
? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
|
||||
: 'text-gray-500'}">
|
||||
{item.changePct != null ? signed(item.changePct, '%') : '—'}
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-24">
|
||||
<div
|
||||
class="bg-indigo-500 h-4 rounded"
|
||||
style="width: {barPct}%"
|
||||
></div>
|
||||
<div class="bg-indigo-500 h-4 rounded" style="width: {barPct}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if wauWeeks.length > 3}
|
||||
<button
|
||||
onclick={() => (wauExpanded = !wauExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{wauExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
</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>
|
||||
<h2 class="text-lg font-semibold text-gray-100 mb-1">Monthly Active Users</h2>
|
||||
<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.'}
|
||||
{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, '%') : '—'}
|
||||
<CollapsibleTable
|
||||
rows={mauMonths}
|
||||
headers={[
|
||||
{ label: 'Period' },
|
||||
{ label: 'Active Users', align: 'right' },
|
||||
{ label: 'Mo/Mo Change', align: 'right' },
|
||||
{ label: '', width: 'w-48' },
|
||||
]}
|
||||
modes={mauModes}
|
||||
bind:mode={mauMode}
|
||||
>
|
||||
{#snippet row(item)}
|
||||
{@const barPct = Math.round((item.mau / maxMau) * 100)}
|
||||
<td class="px-4 py-3 text-gray-300 text-xs">{item.monthStart} – {item.monthEnd}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.mau}</td>
|
||||
<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
|
||||
? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
|
||||
: 'text-gray-500'}">
|
||||
{item.changePct != null ? signed(item.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}
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
{: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}
|
||||
<CollapsibleTable
|
||||
rows={calendarMauMonths}
|
||||
headers={[
|
||||
{ label: 'Month' },
|
||||
{ label: 'Active Users', align: 'right' },
|
||||
{ label: 'Mo/Mo Change', align: 'right' },
|
||||
{ label: '', width: 'w-48' },
|
||||
]}
|
||||
modes={mauModes}
|
||||
bind:mode={mauMode}
|
||||
>
|
||||
{#snippet row(item)}
|
||||
{@const displayMau = item.projectedMau ?? item.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}
|
||||
{item.label}
|
||||
{#if item.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}
|
||||
<td class="px-4 py-3 text-right font-medium {item.isCurrentMonth ? 'text-gray-400' : 'text-gray-100'}">
|
||||
{#if item.isCurrentMonth}
|
||||
<span class="text-gray-500 text-xs">{item.mau} → </span>{item.projectedMau ?? item.mau}
|
||||
{:else}
|
||||
{row.mau}
|
||||
{item.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, '%')}
|
||||
<td class="px-4 py-3 text-right text-xs font-medium {item.changePct != null
|
||||
? item.changePct > 0 ? 'text-green-400' : item.changePct < 0 ? 'text-red-400' : 'text-gray-400'
|
||||
: 'text-gray-500'}">
|
||||
{#if item.changePct != null}
|
||||
{item.isCurrentMonth ? '~' : ''}{signed(item.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 class="bg-teal-500 h-4 rounded {item.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}
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
@@ -625,112 +510,53 @@
|
||||
<h2 class="text-lg font-semibold text-gray-100 mb-4">
|
||||
Last 14 Days — Completions
|
||||
</h2>
|
||||
<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">Date</th>
|
||||
<th class="text-right px-4 py-3">Completions</th>
|
||||
<th class="px-4 py-3 w-48"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (completionsExpanded ? last14Days : last14Days.slice(0, 3)) as row (row.date)}
|
||||
{@const barPct = Math.round(
|
||||
(row.count / maxCount) * 100,
|
||||
)}
|
||||
<tr
|
||||
class="border-t border-white/5 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-gray-300"
|
||||
>{row.date}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-100 font-medium"
|
||||
>{row.count}</td
|
||||
<CollapsibleTable
|
||||
rows={last14Days}
|
||||
headers={[
|
||||
{ label: 'Date' },
|
||||
{ label: 'Completions', align: 'right' },
|
||||
{ label: '', width: 'w-48' },
|
||||
]}
|
||||
>
|
||||
{#snippet row(item)}
|
||||
{@const barPct = Math.round((item.count / maxCount) * 100)}
|
||||
<td class="px-4 py-3 text-gray-300">{item.date}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.count}</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-24">
|
||||
<div
|
||||
class="bg-amber-500 h-4 rounded"
|
||||
style="width: {barPct}%"
|
||||
></div>
|
||||
<div class="bg-amber-500 h-4 rounded" style="width: {barPct}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if last14Days.length > 3}
|
||||
<button
|
||||
onclick={() => (completionsExpanded = !completionsExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{completionsExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
<h2 class="text-lg font-semibold text-gray-100 mb-4">
|
||||
Active Streak Distribution
|
||||
</h2>
|
||||
{#if streakChart.length === 0}
|
||||
<p class="text-gray-400 text-sm px-4 py-6">
|
||||
No active streaks yet.
|
||||
</p>
|
||||
{:else}
|
||||
<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">Days</th>
|
||||
<th class="text-right px-4 py-3">Players</th>
|
||||
<th class="px-4 py-3 w-48"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (streakExpanded ? streakChart : streakChart.slice(0, 3)) as row (row.days)}
|
||||
{@const barPct = Math.round(
|
||||
(row.count / maxStreakCount) * 100,
|
||||
)}
|
||||
<tr
|
||||
class="border-t border-white/5 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-gray-300"
|
||||
>{row.days}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-100 font-medium"
|
||||
>{row.count}</td
|
||||
<CollapsibleTable
|
||||
rows={streakChart}
|
||||
headers={[
|
||||
{ label: 'Days' },
|
||||
{ label: 'Players', align: 'right' },
|
||||
{ label: '', width: 'w-48' },
|
||||
]}
|
||||
>
|
||||
{#snippet row(item)}
|
||||
{@const barPct = Math.round((item.count / maxStreakCount) * 100)}
|
||||
<td class="px-4 py-3 text-gray-300">{item.days}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.count}</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-24">
|
||||
<div
|
||||
class="bg-blue-500 h-4 rounded"
|
||||
style="width: {barPct}%"
|
||||
></div>
|
||||
<div class="bg-blue-500 h-4 rounded" style="width: {barPct}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if streakChart.length > 3}
|
||||
<button
|
||||
onclick={() => (streakExpanded = !streakExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{streakExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{/snippet}
|
||||
{#snippet empty()}
|
||||
<p class="text-gray-400 text-sm px-4 py-6">No active streaks yet.</p>
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
@@ -747,67 +573,26 @@
|
||||
<h3 class="text-base font-semibold text-gray-200 mb-3">
|
||||
7-Day Retention
|
||||
</h3>
|
||||
{#if retention7dSeries.length === 0}
|
||||
<p class="text-gray-400 text-sm px-4 py-6">
|
||||
Not enough data yet.
|
||||
</p>
|
||||
{:else}
|
||||
<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"
|
||||
>Cohort Date</th
|
||||
>
|
||||
<th class="text-right px-4 py-3">n</th>
|
||||
<th class="text-right px-4 py-3"
|
||||
>Ret. %</th
|
||||
>
|
||||
<th class="px-4 py-3 w-32"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (ret7dExpanded ? retention7dSeries : retention7dSeries.slice(0, 3)) as row (row.date)}
|
||||
<tr
|
||||
class="border-t border-white/5 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-gray-300"
|
||||
>{row.date}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-400 text-xs"
|
||||
>{row.cohortSize}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-100 font-medium"
|
||||
>{row.rate}%</td
|
||||
<CollapsibleTable
|
||||
rows={retention7dSeries}
|
||||
headers={[
|
||||
{ label: 'Cohort Date' },
|
||||
{ label: 'n', align: 'right' },
|
||||
{ label: 'Ret. %', align: 'right' },
|
||||
{ label: '', width: 'w-32' },
|
||||
]}
|
||||
>
|
||||
{#snippet row(item)}
|
||||
<td class="px-4 py-3 text-gray-300">{item.date}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohortSize}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.rate}%</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-20">
|
||||
<div
|
||||
class="bg-emerald-500 h-4 rounded"
|
||||
style="width: {row.rate}%"
|
||||
></div>
|
||||
<div class="bg-emerald-500 h-4 rounded" style="width: {item.rate}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if retention7dSeries.length > 3}
|
||||
<button
|
||||
onclick={() => (ret7dExpanded = !ret7dExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{ret7dExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
</div>
|
||||
|
||||
<!-- 30-day retention -->
|
||||
@@ -815,67 +600,26 @@
|
||||
<h3 class="text-base font-semibold text-gray-200 mb-3">
|
||||
30-Day Retention
|
||||
</h3>
|
||||
{#if retention30dSeries.length === 0}
|
||||
<p class="text-gray-400 text-sm px-4 py-6">
|
||||
Not enough data yet.
|
||||
</p>
|
||||
{:else}
|
||||
<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"
|
||||
>Cohort Date</th
|
||||
>
|
||||
<th class="text-right px-4 py-3">n</th>
|
||||
<th class="text-right px-4 py-3"
|
||||
>Ret. %</th
|
||||
>
|
||||
<th class="px-4 py-3 w-32"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each (ret30dExpanded ? retention30dSeries : retention30dSeries.slice(0, 3)) as row (row.date)}
|
||||
<tr
|
||||
class="border-t border-white/5 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<td class="px-4 py-3 text-gray-300"
|
||||
>{row.date}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-400 text-xs"
|
||||
>{row.cohortSize}</td
|
||||
>
|
||||
<td
|
||||
class="px-4 py-3 text-right text-gray-100 font-medium"
|
||||
>{row.rate}%</td
|
||||
<CollapsibleTable
|
||||
rows={retention30dSeries}
|
||||
headers={[
|
||||
{ label: 'Cohort Date' },
|
||||
{ label: 'n', align: 'right' },
|
||||
{ label: 'Ret. %', align: 'right' },
|
||||
{ label: '', width: 'w-32' },
|
||||
]}
|
||||
>
|
||||
{#snippet row(item)}
|
||||
<td class="px-4 py-3 text-gray-300">{item.date}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-400 text-xs">{item.cohortSize}</td>
|
||||
<td class="px-4 py-3 text-right text-gray-100 font-medium">{item.rate}%</td>
|
||||
<td class="px-4 py-3">
|
||||
<div class="w-full min-w-20">
|
||||
<div
|
||||
class="bg-violet-500 h-4 rounded"
|
||||
style="width: {row.rate}%"
|
||||
></div>
|
||||
<div class="bg-violet-500 h-4 rounded" style="width: {item.rate}%"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{#if retention30dSeries.length > 3}
|
||||
<button
|
||||
onclick={() => (ret30dExpanded = !ret30dExpanded)}
|
||||
class="mt-2 flex items-center gap-1 text-xs text-gray-500 hover:text-gray-300 transition-colors mx-auto"
|
||||
>
|
||||
<span>{ret30dExpanded ? '▲ Show less' : '▼ Show more'}</span>
|
||||
</button>
|
||||
{/if}
|
||||
{/if}
|
||||
{/snippet}
|
||||
</CollapsibleTable>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user