Mae's website :3 maemoon.me
personal website svelte sveltekit
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

add milestones

+44 -6
+1 -1
src/lib/global.css
··· 34 34 padding: 0.5rem 0; 35 35 } 36 36 37 - p { 37 + p, span { 38 38 font-size: 1.2rem; 39 39 } 40 40
+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>