feat: top 10 pages

Signed-off-by: David Dal Busco <[email protected]>

src/frontend/src/lib/components/analytics/Analytics.svelte

@@ -15,8 +15,8 @@
 	import { debounce } from '$lib/utils/debounce.utils';
 	import { formatNumber } from '$lib/utils/number.utils';
 	import AnalyticsEvents from '$lib/components/analytics/AnalyticsEvents.svelte';
-	import AnalyticsReferrers from '$lib/components/analytics/AnalyticsReferrers.svelte';
 	import AnalyticsEventsExport from '$lib/components/analytics/AnalyticsEventsExport.svelte';
+	import AnalyticsPageViews from '$lib/components/analytics/AnalyticsPageViews.svelte';
 
 	let loading = true;
 
@@ -132,9 +132,7 @@
 			</Value>
 		</div>
 
-		{#if pageViews.length > 0}
-			<AnalyticsReferrers {pageViews} />
-		{/if}
+		<AnalyticsPageViews {pageViews} />
 
 		{#if trackEvents.length > 0}
 			<hr />

src/frontend/src/lib/components/analytics/AnalyticsPageViews.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { AnalyticKey, PageView } from '$declarations/orbiter/orbiter.did';
+	import AnalyticsPages from '$lib/components/analytics/AnalyticsPages.svelte';
+	import AnalyticsReferrers from '$lib/components/analytics/AnalyticsReferrers.svelte';
+
+	export let pageViews: [AnalyticKey, PageView][] = [];
+</script>
+
+{#if pageViews.length > 0}
+	<div class="container">
+		<AnalyticsReferrers {pageViews} />
+
+		<AnalyticsPages {pageViews} />
+	</div>
+{/if}
+
+<style lang="scss">
+	@use '../../styles/mixins/media';
+
+	.container {
+		margin: var(--padding-4x) 0;
+
+		@include media.min-width(large) {
+			display: grid;
+			grid-template-columns: repeat(2, 1fr);
+			gap: var(--padding-4x);
+		}
+	}
+</style>

src/frontend/src/lib/components/analytics/AnalyticsPages.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { AnalyticKey, PageView } from '$declarations/orbiter/orbiter.did';
+	import { i18n } from '$lib/stores/i18n.store';
+
+	export let pageViews: [AnalyticKey, PageView][] = [];
+
+	let referrers: Record<string, number> = {};
+	$: referrers = pageViews.reduce(
+		(acc, [_, { href }]) => {
+			let pages: string;
+			try {
+				const { pathname } = new URL(href);
+				pages = pathname;
+			} catch (err: unknown) {
+				pages = href;
+			}
+
+			return {
+				...acc,
+				[pages]: (acc[pages] ?? 0) + 1
+			};
+		},
+		{} as Record<string, number>
+	);
+
+	let entries: [string, number][] = [];
+	$: entries = Object.entries(referrers)
+		.slice(0, 10)
+		.sort(([_a, countA], [_b, countB]) => countB - countA);
+</script>
+
+{#if entries.length > 0}
+	<div class="table-container">
+		<table>
+			<thead>
+				<tr>
+					<th> {$i18n.analytics.pages} </th>
+					<th> {$i18n.analytics.count} </th>
+				</tr>
+			</thead>
+
+			<tbody>
+				{#each entries as [referrer, count]}
+					<tr>
+						<td>{referrer}</td>
+						<td>{count}</td>
+					</tr>
+				{/each}
+			</tbody>
+		</table>
+	</div>
+{/if}

src/frontend/src/lib/components/analytics/AnalyticsReferrers.svelte

@@ -58,9 +58,3 @@
 		</table>
 	</div>
 {/if}
-
-<style lang="scss">
-	.table-container {
-		margin: var(--padding-4x) 0;
-	}
-</style>

src/frontend/src/lib/i18n/en.json

@@ -161,6 +161,7 @@
 		"tracked_events": "Tracked events",
 		"count": "Count",
 		"referrers": "Top 10 referrers",
+		"pages": "Top 10 pages",
 		"enabled": "Enabled",
 		"orbiter": "Orbiter",
 		"configure": "Configure"

src/frontend/src/lib/i18n/it.json

@@ -161,6 +161,7 @@
 		"tracked_events": "Tracked events",
 		"count": "Count",
 		"referrers": "Top 10 referrers",
+		"pages": "Top 10 pages",
 		"enabled": "Enabled",
 		"orbiter": "Orbiter",
 		"configure": "Configure"

src/frontend/src/lib/i18n/zh-cn.json

@@ -161,6 +161,7 @@
 		"tracked_events": "跟踪事件",
 		"count": "数量",
 		"referrers": "前十个引用",
+		"pages": "Top 10 pages",
 		"enabled": "已启用",
 		"orbiter": "Orbiter",
 		"configure": "配置"

src/frontend/src/lib/styles/global/table.scss

@@ -5,6 +5,7 @@
 	@include shadow.strong-card;
 	overflow: hidden;
 	margin: 0 0 var(--padding-3x);
+	height: fit-content;
 }
 
 table {

src/frontend/src/lib/types/i18n.d.ts

@@ -173,6 +173,7 @@ interface I18nAnalytics {
 	tracked_events: string;
 	count: string;
 	referrers: string;
+	pages: string;
 	enabled: string;
 	orbiter: string;
 	configure: string;