feat: improve analytics dashboard

apps/frontend/package.json

@@ -55,6 +55,7 @@
 		"@vueuse/core": "^11.1.0",
 		"ace-builds": "^1.36.2",
 		"ansi-to-html": "^0.7.2",
+		"chart.js": "^4.5.1",
 		"dayjs": "^1.11.7",
 		"dompurify": "^3.1.7",
 		"floating-vue": "^5.2.2",

apps/frontend/src/components/analytics/AnalyticsDashboard.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="flex flex-col gap-4 pb-20 lg:pl-4 lg:pt-1.5">
+		<div class="flex flex-col gap-2">
+			<div class="flex justify-between">
+				<span class="text-xl font-semibold text-contrast md:text-2xl">Analytics</span>
+				<ButtonStyled type="outlined">
+					<button
+						type="button"
+						:disabled="!fetchRequest || isRefetching"
+						@click="refreshAnalyticsQuery"
+					>
+						<RefreshCwIcon :class="isRefetching ? 'animate-spin' : ''" />
+						Refresh
+					</button>
+				</ButtonStyled>
+			</div>
+			<QueryBuilder />
+		</div>
+		<StatCards />
+		<AnalyticsGraph />
+		<AnalyticsTable />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, injectProjectPageContext } from '@modrinth/ui'
+
+import {
+	createAnalyticsDashboardContext,
+	provideAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+import { injectOrganizationContext } from '~/providers/organization-context'
+
+import { RefreshCwIcon } from '@modrinth/assets'
+import AnalyticsGraph from './graph/AnalyticsGraph.vue'
+import QueryBuilder from './query-builder/QueryBuilder.vue'
+import StatCards from './stat-cards/StatCards.vue'
+import AnalyticsTable from './table/AnalyticsTable.vue'
+
+const auth = await useAuth()
+const projectPageContext = injectProjectPageContext(null)
+const organizationContext = injectOrganizationContext(null)
+
+const analyticsDashboardContext = createAnalyticsDashboardContext({
+	auth,
+	projectPageContext,
+	organizationContext,
+})
+const { fetchRequest, isRefetching, refreshAnalyticsQuery } = analyticsDashboardContext
+
+provideAnalyticsDashboardContext(analyticsDashboardContext)
+</script>

apps/frontend/src/components/analytics/breakdown.ts

@@ -0,0 +1,38 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { AnalyticsBreakdownPreset } from '~/providers/analytics/analytics'
+
+export const ALL_BREAKDOWN_VALUE = 'All'
+
+export function getAnalyticsBreakdownValue(
+	point: Labrinth.Analytics.v3.ProjectAnalytics,
+	selectedBreakdown: AnalyticsBreakdownPreset,
+): string {
+	switch (selectedBreakdown) {
+		case 'none':
+			return ALL_BREAKDOWN_VALUE
+		case 'country':
+			return normalizeBreakdownValue('country' in point ? point.country : undefined)
+		case 'monetization': {
+			if ('monetized' in point && typeof point.monetized === 'boolean') {
+				return point.monetized ? 'monetized' : 'unmonetized'
+			}
+			return ALL_BREAKDOWN_VALUE
+		}
+		case 'download_source':
+			return normalizeBreakdownValue('domain' in point ? point.domain : undefined)
+		case 'version_id':
+			return normalizeBreakdownValue('version_id' in point ? point.version_id : undefined)
+		case 'loader':
+			return normalizeBreakdownValue('loader' in point ? point.loader : undefined)
+		case 'game_version':
+			return normalizeBreakdownValue('game_version' in point ? point.game_version : undefined)
+		default:
+			return ALL_BREAKDOWN_VALUE
+	}
+}
+
+function normalizeBreakdownValue(value: string | undefined): string {
+	const normalized = value?.trim()
+	return normalized && normalized.length > 0 ? normalized : ALL_BREAKDOWN_VALUE
+}