mirror of
https://github.com/pupperpowell/bibdle.git
synced 2026-10-22 05:54:10 -04:00
68 lines
2.3 KiB
Svelte
68 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import Container from '$lib/components/Container.svelte';
|
|
import MiniLineChart from '$lib/components/charts/MiniLineChart.svelte';
|
|
import BarList from '$lib/components/charts/BarList.svelte';
|
|
import CalendarHeatmap from '$lib/components/charts/CalendarHeatmap.svelte';
|
|
import HeatmapGrid from '$lib/components/charts/HeatmapGrid.svelte';
|
|
import type { SnapshotPayload } from '$lib/types/stats';
|
|
|
|
interface Props {
|
|
payload: SnapshotPayload;
|
|
}
|
|
let { payload }: Props = $props();
|
|
|
|
const dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
const hourLabels = Array.from({ length: 24 }, (_, h) => (h % 3 === 0 ? String(h) : ''));
|
|
</script>
|
|
|
|
<section class="flex flex-col gap-3">
|
|
<h2 class="text-lg font-bold text-gray-100">5 · Habit Lab</h2>
|
|
|
|
<div class="grid gap-3 md:grid-cols-2">
|
|
<Container class="p-4 w-full items-stretch text-left gap-2">
|
|
<p class="font-semibold text-gray-100">Streak survival</p>
|
|
<p class="text-xs text-gray-400">
|
|
If you've played N days in a row, how likely are you to play day N+1.
|
|
</p>
|
|
<MiniLineChart
|
|
series={[
|
|
{
|
|
name: 'Survival',
|
|
color: '#34d399',
|
|
points: payload.habit.streakSurvival.map((s) => ({ date: String(s.length), value: s.probability }))
|
|
}
|
|
]}
|
|
showLegend={false}
|
|
ySuffix="%"
|
|
/>
|
|
</Container>
|
|
|
|
<Container class="p-4 w-full items-stretch text-left gap-2">
|
|
<p class="font-semibold text-gray-100">Current streak lengths</p>
|
|
<p class="text-xs text-gray-400">Players whose current run has reached each length.</p>
|
|
<BarList
|
|
items={payload.habit.streakLengths.map((b) => ({ label: `${b.label} days`, value: b.value, color: 'rgba(251,191,36,0.5)' }))}
|
|
/>
|
|
</Container>
|
|
</div>
|
|
|
|
<Container class="p-4 w-full items-stretch text-left gap-2">
|
|
<p class="font-semibold text-gray-100">Daily finishes (last 120 days)</p>
|
|
<CalendarHeatmap data={payload.habit.calendar} />
|
|
</Container>
|
|
|
|
<Container class="p-4 w-full items-stretch text-left gap-2">
|
|
<p class="font-semibold text-gray-100">When people play</p>
|
|
<p class="text-xs text-gray-400">
|
|
Finishes by weekday and hour. Times are server time (UTC) and therefore approximate.
|
|
</p>
|
|
<HeatmapGrid
|
|
rowLabels={dayLabels}
|
|
colLabels={hourLabels}
|
|
values={payload.habit.weekdayHour}
|
|
color="96,165,250"
|
|
cellSize={16}
|
|
format={(v) => String(v)}
|
|
/>
|
|
</Container>
|
|
</section> |