diff --git a/src/routes/leaderboard/+layout.svelte b/src/routes/leaderboard/+layout.svelte deleted file mode 100644 index 1788ab57..00000000 --- a/src/routes/leaderboard/+layout.svelte +++ /dev/null @@ -1,17 +0,0 @@ - - - - BTC Map - Leaderboard - - - - - -{#if ($users && $users.length && $events && $events.length) || $userError || $eventError} - -{:else} - -{/if} diff --git a/src/routes/leaderboard/+page.svelte b/src/routes/leaderboard/+page.svelte index 3f4cd6f0..7b00e9db 100644 --- a/src/routes/leaderboard/+page.svelte +++ b/src/routes/leaderboard/+page.svelte @@ -31,33 +31,84 @@ let loading: boolean; let leaderboard: TaggerLeaderboard[]; - let showGeyser = location.hash === '#geyser' ? true : false; - const eventStart = new Date('Jul 4, 2023 00:00:00').toISOString(); - const eventEnd = new Date('Sep 2, 2023 00:00:00').toISOString(); - let topTenChartCanvas: HTMLCanvasElement; let topTenChart: Chart<'bar', number[], string>; let chartsLoading: boolean; + let chartsRendered = false; let initialRenderComplete = false; + const populateCharts = () => { + const theme = detectTheme(); + + let leaderboardCopy = [...leaderboard]; + leaderboardCopy = leaderboardCopy.slice(0, 10); + + topTenChart = new Chart(topTenChartCanvas, { + type: 'bar', + data: { + labels: leaderboardCopy.map(({ tagger }) => tagger), + datasets: [ + { + label: 'Top Ten', + data: leaderboardCopy.map(({ total }) => total), + backgroundColor: 'rgba(247, 147, 26, 0.2)', + borderColor: 'rgb(247, 147, 26)', + borderWidth: 1 + } + ] + }, + options: { + maintainAspectRatio: false, + plugins: { + legend: { + labels: { + font: { + weight: '600' + } + } + } + }, + scales: { + x: { + ticks: { + font: { + weight: '600' + } + }, + grid: { + color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)' + } + }, + y: { + beginAtZero: true, + ticks: { + font: { + weight: '600' + } + }, + grid: { + color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)' + } + } + } + } + }); + + chartsRendered = true; + }; + const populateLeaderboard = () => { loading = true; leaderboard = []; $users.forEach((user) => { - if ($excludeLeader.includes(user.id) || (showGeyser && user.id === 10396321)) { + if ($excludeLeader.includes(user.id)) { return; } let userEvents = $events.filter((event) => event['user_id'] == user.id); - if (showGeyser) { - userEvents = userEvents.filter( - (event) => event['created_at'] > eventStart && event['created_at'] < eventEnd - ); - } - if (userEvents.length) { let created = userEvents.filter((event) => event.type === 'create').length; let updated = userEvents.filter((event) => event.type === 'update').length; @@ -69,13 +120,11 @@ avatar: avatar, tagger: profile['display_name'], id: user.id, - created: user.id === 17221642 && !showGeyser ? created + 100 : created, - updated: user.id === 17221642 && !showGeyser ? updated + 20 : updated, + created: user.id === 17221642 ? created + 100 : created, + updated: user.id === 17221642 ? updated + 20 : updated, deleted: deleted, total: - user.id === 17221642 && !showGeyser - ? created + updated + deleted + 120 - : created + updated + deleted, + user.id === 17221642 ? created + updated + deleted + 120 : created + updated + deleted, tip: profile.description }); } @@ -87,32 +136,28 @@ loading = false; }; - const leaderboardSync = ( - status: boolean, - users: User[], - events: Event[], - // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars - showGeyser: boolean - ) => { - if (users.length && events.length && !status && initialRenderComplete) { - populateLeaderboard(); - - let leaderboardCopy = [...leaderboard]; - leaderboardCopy = leaderboardCopy.slice(0, 10); - chartsLoading = true; - topTenChart.data.labels = leaderboardCopy.map(({ tagger }) => tagger); - topTenChart.data.datasets[0].data = leaderboardCopy.map(({ total }) => total); - topTenChart.update(); - chartsLoading = false; + const leaderboardSync = (status: boolean, users: User[], events: Event[]) => { + if (initialRenderComplete && users.length && events.length) { + if (!chartsRendered) { + populateLeaderboard(); + populateCharts(); + } else if (!status) { + populateLeaderboard(); + + let leaderboardCopy = [...leaderboard]; + leaderboardCopy = leaderboardCopy.slice(0, 10); + chartsLoading = true; + topTenChart.data.labels = leaderboardCopy.map(({ tagger }) => tagger); + topTenChart.data.datasets[0].data = leaderboardCopy.map(({ total }) => total); + topTenChart.update(); + chartsLoading = false; + } } }; - $: leaderboardSync($syncStatus, $users, $events, showGeyser); + $: leaderboardSync($syncStatus, $users, $events); - $: $theme !== undefined && - !chartsLoading && - initialRenderComplete === true && - updateChartThemes([topTenChart]); + $: $theme !== undefined && !chartsLoading && chartsRendered && updateChartThemes([topTenChart]); let leaderboardCount = 50; $: leaderboardPaginated = @@ -120,67 +165,15 @@ onMount(() => { if (browser) { - const theme = detectTheme(); - - // setup leaderboard - populateLeaderboard(); - - // setup chart topTenChartCanvas.getContext('2d'); - let leaderboardCopy = [...leaderboard]; - leaderboardCopy = leaderboardCopy.slice(0, 10); - - topTenChart = new Chart(topTenChartCanvas, { - type: 'bar', - data: { - labels: leaderboardCopy.map(({ tagger }) => tagger), - datasets: [ - { - label: 'Top Ten', - data: leaderboardCopy.map(({ total }) => total), - backgroundColor: 'rgba(247, 147, 26, 0.2)', - borderColor: 'rgb(247, 147, 26)', - borderWidth: 1 - } - ] - }, - options: { - maintainAspectRatio: false, - plugins: { - legend: { - labels: { - font: { - weight: '600' - } - } - } - }, - scales: { - x: { - ticks: { - font: { - weight: '600' - } - }, - grid: { - color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)' - } - }, - y: { - beginAtZero: true, - ticks: { - font: { - weight: '600' - } - }, - grid: { - color: theme === 'dark' ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.1)' - } - } - } - } - }); + if ($users && $users.length && $events && $events.length) { + // setup leaderboard + populateLeaderboard(); + + // setup chart + populateCharts(); + } initialRenderComplete = true; } @@ -189,26 +182,14 @@ const headings = ['Position', 'Supertagger', 'Created', 'Updated', 'Deleted', 'Tip']; -
- + + BTC Map - Leaderboard + + + + +
@@ -240,7 +221,7 @@
- {#if !leaderboard?.length && loading} + {#if !leaderboard || loading}
{/if} @@ -254,29 +235,6 @@ />
- -