Mae's website :3
maemoon.me
personal
website
svelte
sveltekit
add milestones
+44
-6
+1
-1
src/lib/global.css
+1
-1
src/lib/global.css
+43
-5
src/routes/experiments/logstats/+page.svelte
+43
-5
src/routes/experiments/logstats/+page.svelte
···
1
1
<script>
2
+
let { data } = $props();
3
+
let sortedInstances = $derived(Object.entries(data.counts).sort(([, a], [, b]) => b - a));
4
+
5
+
const milestones = [100, 250, 500, 750, 1000, 1500, 2000, 3000, 4000, 5000];
6
+
7
+
let milestoneProgress = $derived.by(() => {
8
+
const totalUsers = calculateTotal(data.counts);
9
+
const nextMilestone = milestones.find(milestone => milestone > totalUsers) || milestones[milestones.length - 1];
10
+
const previousMilestone = milestones.slice().reverse().find(milestone => milestone <= totalUsers) || 0;
11
+
12
+
return {
13
+
current: totalUsers,
14
+
nextMilestone,
15
+
previousMilestone,
16
+
progress: ((totalUsers - previousMilestone) / (nextMilestone - previousMilestone)) * 100
17
+
};
18
+
});
19
+
2
20
function calculateTotal(values) {
3
21
return Object.values(values).reduce((total, num) => total + num, 0);
4
22
}
5
-
let { data } = $props();
6
-
let sortedInstances = $derived(Object.entries(data.counts).sort(([, a], [, b]) => b - a));
7
23
</script>
8
24
9
25
<h1>Logiverse stats</h1>
10
26
<br>
11
-
<h2>The <a href="https://logiverse.social">Logiverse</a> currently has {calculateTotal(data.counts)} users</h2>
27
+
<h2>
28
+
The <a href="https://logiverse.social">Logiverse</a> currently has {calculateTotal(data.counts)} users.
29
+
</h2>
30
+
<h2>Instance stats</h2>
12
31
{#each sortedInstances as [instance, count]}
13
32
<h3>{instance} - {count}</h3>
14
33
{/each}
15
-
34
+
<br>
35
+
<h2>Milestones</h2>
36
+
<div class="milestone-display">
37
+
{#each milestones as milestone}
38
+
<div class="milestone {milestone <= milestoneProgress.current ? 'completed' : ''}">
39
+
{#if milestone <= milestoneProgress.current}
40
+
<span>✓ </span>
41
+
{/if}
42
+
<span class="milestone-label">{milestone} users</span>
43
+
{#if milestone == milestoneProgress.nextMilestone}
44
+
<span>({milestoneProgress.progress.toFixed(2)}%)</span>
45
+
{/if}
46
+
<br>
47
+
</div>
48
+
{/each}
49
+
</div>
16
50
<style>
17
51
a {
18
52
font-size: 1.5rem;
19
53
}
20
-
</style>
54
+
55
+
span {
56
+
font-family: 'Inter', sans-serif;
57
+
}
58
+
</style>