diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 624c6c9431..7dfe3f17fa 100644
--- a/apps/frontend/package.json
+++ b/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",
diff --git a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
new file mode 100644
index 0000000000..91ce909ffe
--- /dev/null
+++ b/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="projects.length === 0 || !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 { RefreshCwIcon } from '@modrinth/assets'
+import { ButtonStyled, injectProjectPageContext } from '@modrinth/ui'
+
+import {
+	createAnalyticsDashboardContext,
+	provideAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+import { injectOrganizationContext } from '~/providers/organization-context'
+
+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, projects, refreshAnalyticsQuery } = analyticsDashboardContext
+
+provideAnalyticsDashboardContext(analyticsDashboardContext)
+</script>
diff --git a/apps/frontend/src/components/analytics/AnalyticsLoadingBar.vue b/apps/frontend/src/components/analytics/AnalyticsLoadingBar.vue
new file mode 100644
index 0000000000..addfe43f20
--- /dev/null
+++ b/apps/frontend/src/components/analytics/AnalyticsLoadingBar.vue
@@ -0,0 +1,152 @@
+<template>
+	<div class="analytics-loading-bar" :style="{ opacity: isVisible ? 1 : 0 }" aria-hidden="true">
+		<div
+			class="analytics-loading-bar__track"
+			:style="{
+				width: `${progress}%`,
+				transition: !isTransitioning
+					? 'none'
+					: isFinishing
+						? 'width 0.1s ease-in-out'
+						: isCreeping
+							? 'width 2s linear'
+							: 'width 0.9s ease-in-out',
+			}"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from 'vue'
+
+const props = defineProps<{
+	loading: boolean
+}>()
+
+const progress = ref(0)
+const isVisible = ref(false)
+const isFinishing = ref(false)
+const isCreeping = ref(false)
+const isTransitioning = ref(false)
+
+let startFrame: number | null = null
+let showFrame: number | null = null
+let creepTimeout: ReturnType<typeof setTimeout> | null = null
+let hideTimeout: ReturnType<typeof setTimeout> | null = null
+let resetTimeout: ReturnType<typeof setTimeout> | null = null
+
+function clearTimers() {
+	if (showFrame !== null && typeof window !== 'undefined') {
+		window.cancelAnimationFrame(showFrame)
+	}
+	if (startFrame !== null && typeof window !== 'undefined') {
+		window.cancelAnimationFrame(startFrame)
+	}
+	if (creepTimeout) clearTimeout(creepTimeout)
+	if (hideTimeout) clearTimeout(hideTimeout)
+	if (resetTimeout) clearTimeout(resetTimeout)
+	showFrame = null
+	startFrame = null
+	creepTimeout = null
+	hideTimeout = null
+	resetTimeout = null
+}
+
+function start() {
+	clearTimers()
+	isVisible.value = false
+	progress.value = 0
+	isFinishing.value = false
+	isCreeping.value = false
+	isTransitioning.value = false
+
+	if (typeof window === 'undefined') {
+		progress.value = 98
+		return
+	}
+
+	showFrame = window.requestAnimationFrame(() => {
+		isVisible.value = true
+		showFrame = null
+		startFrame = window.requestAnimationFrame(() => {
+			isTransitioning.value = true
+			progress.value = 85
+			startFrame = null
+		})
+	})
+	creepTimeout = setTimeout(() => {
+		isCreeping.value = true
+		progress.value = 98
+		creepTimeout = null
+	}, 900)
+}
+
+function finish() {
+	clearTimers()
+	isVisible.value = true
+	isFinishing.value = true
+	isCreeping.value = false
+	isTransitioning.value = true
+	progress.value = 100
+
+	if (typeof window === 'undefined') {
+		isVisible.value = false
+		progress.value = 0
+		isFinishing.value = false
+		isCreeping.value = false
+		isTransitioning.value = false
+		return
+	}
+
+	hideTimeout = setTimeout(() => {
+		isVisible.value = false
+		resetTimeout = setTimeout(() => {
+			isTransitioning.value = false
+			progress.value = 0
+			isFinishing.value = false
+			isCreeping.value = false
+		}, 400)
+	}, 350)
+}
+
+watch(
+	() => props.loading,
+	(loading) => {
+		if (loading) {
+			start()
+		} else if (
+			isVisible.value ||
+			progress.value > 0 ||
+			showFrame !== null ||
+			startFrame !== null ||
+			creepTimeout !== null
+		) {
+			finish()
+		}
+	},
+	{ immediate: true },
+)
+
+onBeforeUnmount(clearTimers)
+</script>
+
+<style scoped>
+.analytics-loading-bar {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 20;
+	height: 2px;
+	overflow: hidden;
+	background: color-mix(in srgb, var(--color-brand) 18%, transparent);
+	pointer-events: none;
+	transition: opacity 0.4s;
+}
+
+.analytics-loading-bar__track {
+	height: 100%;
+	border-radius: 999px;
+	background: var(--loading-bar-gradient);
+}
+</style>
diff --git a/apps/frontend/src/components/analytics/breakdown.ts b/apps/frontend/src/components/analytics/breakdown.ts
new file mode 100644
index 0000000000..67d3ed97a2
--- /dev/null
+++ b/apps/frontend/src/components/analytics/breakdown.ts
@@ -0,0 +1,53 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { AnalyticsBreakdownPreset } from '~/providers/analytics/analytics'
+
+export const ALL_BREAKDOWN_VALUE = 'All'
+export const UNKNOWN_BREAKDOWN_VALUE = 'Unknown'
+
+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?.toUpperCase() : 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 'download_reason':
+			return normalizeBreakdownValue(
+				'reason' in point ? point.reason : undefined,
+				UNKNOWN_BREAKDOWN_VALUE,
+			)
+		case 'version_id':
+			return normalizeBreakdownValue('version_id' in point ? point.version_id : undefined)
+		case 'loader':
+			return normalizeBreakdownValue(
+				'loader' in point ? point.loader : undefined,
+				UNKNOWN_BREAKDOWN_VALUE,
+			)
+		case 'game_version':
+			return normalizeBreakdownValue(
+				'game_version' in point ? point.game_version : undefined,
+				UNKNOWN_BREAKDOWN_VALUE,
+			)
+		default:
+			return ALL_BREAKDOWN_VALUE
+	}
+}
+
+function normalizeBreakdownValue(
+	value: string | undefined,
+	fallback = ALL_BREAKDOWN_VALUE,
+): string {
+	const normalized = value?.trim()
+	return normalized && normalized.length > 0 ? normalized : fallback
+}
diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
new file mode 100644
index 0000000000..34f42cb820
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
@@ -0,0 +1,457 @@
+<template>
+	<canvas
+		ref="canvasRef"
+		:style="{ touchAction: props.pinnedSliceIndex === null ? undefined : 'none' }"
+	/>
+</template>
+
+<script setup lang="ts">
+import { useCompactNumber } from '@modrinth/ui'
+import {
+	BarController,
+	BarElement,
+	CategoryScale,
+	Chart,
+	type ChartConfiguration,
+	Filler,
+	LinearScale,
+	LineController,
+	LineElement,
+	PointElement,
+	Tooltip,
+} from 'chart.js'
+
+import type { AnalyticsDashboardStat } from '~/providers/analytics/analytics'
+
+import { type ChartDataset, DEFAULT_X_AXIS_TICK_LIMIT, formatAxisValue } from './utils'
+
+Chart.register(
+	LineController,
+	BarController,
+	LineElement,
+	BarElement,
+	PointElement,
+	CategoryScale,
+	LinearScale,
+	Filler,
+	Tooltip,
+)
+
+export type AnalyticsChartHoverPayload = {
+	visible: boolean
+	x: number
+	y: number
+	sliceIndex: number | null
+}
+
+const props = defineProps<{
+	type: 'line' | 'bar'
+	fill: boolean
+	stacked: boolean
+	ratioMode: boolean
+	datasets: ChartDataset[]
+	labels: string[]
+	xAxisTickLimit?: number
+	activeStat: AnalyticsDashboardStat
+	pinnedSliceIndex: number | null
+}>()
+
+const emit = defineEmits<{
+	(event: 'hover' | 'pinned-drag', payload: AnalyticsChartHoverPayload): void
+}>()
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+let chartInstance: Chart | null = null
+
+const { formatCompactNumber } = useCompactNumber()
+
+type ExternalTooltipHandler = NonNullable<
+	NonNullable<NonNullable<ChartConfiguration['options']>['plugins']>['tooltip']
+>['external']
+type ExternalTooltipContext = Parameters<Exclude<ExternalTooltipHandler, undefined>>[0]
+type ChartEvents = NonNullable<NonNullable<ChartConfiguration['options']>['events']>
+
+const chartInteractionEvents: ChartEvents = [
+	'mousemove',
+	'mouseout',
+	'click',
+	'touchstart',
+	'touchmove',
+]
+const PINNED_DRAG_THRESHOLD_PX = 6
+const EMPTY_DATA_Y_AXIS_MAX = 10
+const EMPTY_DATA_Y_AXIS_STEP = 2
+const SECONDS_PER_HOUR = 60 * 60
+const CSS_VARIABLE_COLOR_PATTERN = /^var\(\s*(--[a-z0-9-_]+)\s*\)$/i
+
+let pinnedDragPointerId: number | null = null
+let pinnedDragStartX = 0
+let pinnedDragStartY = 0
+let isPinnedDragging = false
+
+function getChartEvents(): ChartEvents {
+	return props.pinnedSliceIndex === null ? [...chartInteractionEvents] : []
+}
+
+function getPinnedActiveElements(sliceIndex: number) {
+	if (!chartInstance) return []
+
+	const activeElements: { datasetIndex: number; index: number }[] = []
+	for (let datasetIndex = 0; datasetIndex < chartInstance.data.datasets.length; datasetIndex++) {
+		const dataset = chartInstance.data.datasets[datasetIndex]
+		if (!dataset) continue
+
+		const dataLength = Array.isArray(dataset.data) ? dataset.data.length : 0
+		if (sliceIndex >= dataLength) continue
+
+		activeElements.push({
+			datasetIndex,
+			index: sliceIndex,
+		})
+	}
+
+	return activeElements
+}
+
+function getNearestSliceIndex(clientX: number) {
+	if (!chartInstance || !canvasRef.value || props.labels.length === 0) return null
+
+	const rect = canvasRef.value.getBoundingClientRect()
+	const x = clientX - rect.left
+	const xScale = chartInstance.scales.x
+	const rawIndex = xScale.getValueForPixel(x)
+	if (typeof rawIndex !== 'number' || !Number.isFinite(rawIndex)) return null
+
+	return Math.min(props.labels.length - 1, Math.max(0, Math.round(rawIndex)))
+}
+
+function getPinnedTooltipPosition(sliceIndex: number) {
+	if (!chartInstance) return null
+
+	const activeElements = getPinnedActiveElements(sliceIndex)
+	if (activeElements.length === 0) return null
+
+	const positions = activeElements
+		.map(({ datasetIndex, index }) => {
+			const element = chartInstance?.getDatasetMeta(datasetIndex).data[index]
+			if (!element) return null
+			const point = element.getProps(['x', 'y'], true) as { x: number; y: number }
+			if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return null
+			return point
+		})
+		.filter((position): position is { x: number; y: number } => Boolean(position))
+
+	if (positions.length === 0) return null
+
+	const x = positions.reduce((sum, position) => sum + position.x, 0) / positions.length
+	const y = positions.reduce((sum, position) => sum + position.y, 0) / positions.length
+
+	return { x, y }
+}
+
+function emitPinnedDragHover(sliceIndex: number) {
+	const position = getPinnedTooltipPosition(sliceIndex)
+	if (!position) return
+
+	emit('pinned-drag', {
+		visible: true,
+		x: position.x,
+		y: position.y,
+		sliceIndex,
+	})
+}
+
+function withAlpha(color: string, alpha: number): string {
+	const match = /^#([0-9a-f]{6})$/i.exec(color)
+	if (!match) return color
+	const r = Number.parseInt(match[1].slice(0, 2), 16)
+	const g = Number.parseInt(match[1].slice(2, 4), 16)
+	const b = Number.parseInt(match[1].slice(4, 6), 16)
+	return `rgba(${r}, ${g}, ${b}, ${alpha})`
+}
+
+function resolveCssColor(color: string): string {
+	const match = CSS_VARIABLE_COLOR_PATTERN.exec(color)
+	if (!match || typeof document === 'undefined') {
+		return color
+	}
+
+	const resolvedColor = getComputedStyle(document.documentElement).getPropertyValue(match[1]).trim()
+	return resolvedColor || color
+}
+
+function buildDatasets() {
+	return props.datasets.map((dataset, index) => {
+		const borderColor = resolveCssColor(dataset.borderColor)
+		const backgroundColor = resolveCssColor(dataset.backgroundColor)
+		const common = {
+			label: dataset.label,
+			data: dataset.data,
+			borderColor,
+			borderWidth: 2,
+		}
+
+		if (props.type === 'bar') {
+			return {
+				...common,
+				backgroundColor: withAlpha(backgroundColor, 0.85),
+				borderWidth: 0,
+				stack: props.stacked ? 'analytics' : undefined,
+			}
+		}
+
+		const lineFill: 'origin' | '-1' | false = props.fill ? (index === 0 ? 'origin' : '-1') : false
+
+		return {
+			...common,
+			backgroundColor: props.fill ? withAlpha(backgroundColor, 0.3) : backgroundColor,
+			fill: lineFill,
+			tension: 0.35,
+			pointRadius: 0,
+			pointBackgroundColor: borderColor,
+			pointBorderWidth: 0,
+			pointHoverRadius: 4,
+			pointHoverBackgroundColor: borderColor,
+			pointHoverBorderWidth: 0,
+			pointHitRadius: 16,
+			stack: props.stacked ? 'analytics' : undefined,
+		}
+	})
+}
+
+function getVisibleXAxisLabelIndexes(labelCount: number, limit: number): Set<number> {
+	if (limit <= 0 || labelCount <= limit) {
+		return new Set(Array.from({ length: labelCount }, (_, index) => index))
+	}
+
+	const indexes = new Set<number>()
+	for (let i = 0; i < limit; i++) {
+		indexes.add(Math.floor((i * labelCount) / limit))
+	}
+
+	return indexes
+}
+
+function hasMetricData() {
+	return props.datasets.some((dataset) =>
+		dataset.data.some((value) => Number.isFinite(value) && value > 0),
+	)
+}
+
+function getEmptyDataYAxisMax() {
+	return props.activeStat === 'playtime'
+		? EMPTY_DATA_Y_AXIS_MAX * SECONDS_PER_HOUR
+		: EMPTY_DATA_Y_AXIS_MAX
+}
+
+function getEmptyDataYAxisStepSize() {
+	return props.activeStat === 'playtime'
+		? EMPTY_DATA_Y_AXIS_STEP * SECONDS_PER_HOUR
+		: EMPTY_DATA_Y_AXIS_STEP
+}
+
+function buildConfig(): ChartConfiguration {
+	const hasData = hasMetricData()
+	const visibleXAxisLabelIndexes =
+		props.xAxisTickLimit === undefined
+			? null
+			: getVisibleXAxisLabelIndexes(props.labels.length, props.xAxisTickLimit)
+
+	return {
+		type: props.type,
+		data: {
+			labels: props.labels,
+			datasets: buildDatasets() as ChartConfiguration['data']['datasets'],
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			animation: false,
+			events: getChartEvents(),
+			interaction: {
+				mode: 'index',
+				intersect: false,
+			},
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					enabled: false,
+					external: handleExternalTooltip,
+				},
+			},
+			scales: {
+				x: {
+					stacked: props.stacked && props.type === 'bar',
+					offset: props.type === 'bar',
+					grid: { display: false },
+					ticks: {
+						maxTicksLimit: props.xAxisTickLimit ?? DEFAULT_X_AXIS_TICK_LIMIT,
+						autoSkip: !props.xAxisTickLimit,
+						color: 'rgba(148, 163, 184, 0.9)',
+						callback: (tickValue, index) => {
+							if (visibleXAxisLabelIndexes && !visibleXAxisLabelIndexes.has(index)) {
+								return ''
+							}
+
+							return props.labels[Number(tickValue)] ?? ''
+						},
+					},
+					border: { color: 'rgba(148, 163, 184, 0.35)' },
+				},
+				y: {
+					stacked: props.stacked,
+					beginAtZero: true,
+					...(props.ratioMode
+						? { max: 100, min: 0 }
+						: hasData
+							? {}
+							: { max: getEmptyDataYAxisMax(), min: 0 }),
+					grid: {
+						color: 'rgba(148, 163, 184, 0.15)',
+					},
+					border: { display: false },
+					ticks: {
+						color: 'rgba(148, 163, 184, 0.9)',
+						...(props.ratioMode
+							? { stepSize: 25 }
+							: hasData
+								? {}
+								: { stepSize: getEmptyDataYAxisStepSize() }),
+						callback: (tickValue) => {
+							const numeric =
+								typeof tickValue === 'number' ? tickValue : Number.parseFloat(String(tickValue))
+							if (!Number.isFinite(numeric)) return String(tickValue)
+							if (props.ratioMode) return `${numeric}%`
+							return formatAxisValue(numeric, props.activeStat, formatCompactNumber)
+						},
+					},
+				},
+			},
+		},
+	}
+}
+
+function handleExternalTooltip(context: ExternalTooltipContext) {
+	const tooltip = context.tooltip
+	if (!tooltip || tooltip.opacity === 0) {
+		emit('hover', { visible: false, x: 0, y: 0, sliceIndex: null })
+		return
+	}
+	const sliceIndex = tooltip.dataPoints?.[0]?.dataIndex ?? null
+	emit('hover', {
+		visible: true,
+		x: tooltip.caretX,
+		y: tooltip.caretY,
+		sliceIndex,
+	})
+}
+
+function createChart() {
+	if (!canvasRef.value) return
+	chartInstance = new Chart(canvasRef.value, buildConfig())
+}
+
+function refreshChart() {
+	if (!chartInstance) return
+	const config = buildConfig()
+	chartInstance.data = config.data
+	chartInstance.options = config.options ?? {}
+	chartInstance.update('none')
+	applyPinnedSliceState()
+}
+
+function applyPinnedSliceState() {
+	if (!chartInstance) return
+
+	chartInstance.options.events = getChartEvents()
+	chartInstance.setActiveElements(
+		props.pinnedSliceIndex === null ? [] : getPinnedActiveElements(props.pinnedSliceIndex),
+	)
+	chartInstance.update('none')
+}
+
+function handleCanvasLeave() {
+	emit('hover', { visible: false, x: 0, y: 0, sliceIndex: null })
+	if (props.pinnedSliceIndex !== null) {
+		requestAnimationFrame(() => applyPinnedSliceState())
+	}
+}
+
+function handlePinnedPointerDown(event: PointerEvent) {
+	if (props.pinnedSliceIndex === null || event.pointerType !== 'touch' || !canvasRef.value) return
+
+	pinnedDragPointerId = event.pointerId
+	pinnedDragStartX = event.clientX
+	pinnedDragStartY = event.clientY
+	isPinnedDragging = false
+	canvasRef.value.setPointerCapture(event.pointerId)
+}
+
+function handlePinnedPointerMove(event: PointerEvent) {
+	if (props.pinnedSliceIndex === null || event.pointerId !== pinnedDragPointerId) return
+
+	const distance = Math.hypot(event.clientX - pinnedDragStartX, event.clientY - pinnedDragStartY)
+	if (!isPinnedDragging && distance < PINNED_DRAG_THRESHOLD_PX) return
+
+	const sliceIndex = getNearestSliceIndex(event.clientX)
+	if (sliceIndex === null) return
+
+	isPinnedDragging = true
+	event.preventDefault()
+	emitPinnedDragHover(sliceIndex)
+}
+
+function handlePinnedPointerEnd(event: PointerEvent) {
+	if (event.pointerId !== pinnedDragPointerId) return
+
+	canvasRef.value?.releasePointerCapture(event.pointerId)
+	pinnedDragPointerId = null
+	isPinnedDragging = false
+}
+
+onMounted(() => {
+	createChart()
+	canvasRef.value?.addEventListener('mouseleave', handleCanvasLeave)
+	canvasRef.value?.addEventListener('pointerdown', handlePinnedPointerDown)
+	canvasRef.value?.addEventListener('pointermove', handlePinnedPointerMove)
+	canvasRef.value?.addEventListener('pointerup', handlePinnedPointerEnd)
+	canvasRef.value?.addEventListener('pointercancel', handlePinnedPointerEnd)
+})
+
+onBeforeUnmount(() => {
+	canvasRef.value?.removeEventListener('mouseleave', handleCanvasLeave)
+	canvasRef.value?.removeEventListener('pointerdown', handlePinnedPointerDown)
+	canvasRef.value?.removeEventListener('pointermove', handlePinnedPointerMove)
+	canvasRef.value?.removeEventListener('pointerup', handlePinnedPointerEnd)
+	canvasRef.value?.removeEventListener('pointercancel', handlePinnedPointerEnd)
+	chartInstance?.destroy()
+	chartInstance = null
+})
+
+watch(
+	() => [props.type, props.fill, props.stacked],
+	() => {
+		chartInstance?.destroy()
+		chartInstance = null
+		nextTick(() => {
+			createChart()
+			applyPinnedSliceState()
+		})
+	},
+)
+
+watch(
+	() => [props.datasets, props.labels, props.xAxisTickLimit, props.activeStat],
+	() => {
+		refreshChart()
+	},
+	{ deep: true },
+)
+
+watch(
+	() => props.pinnedSliceIndex,
+	() => {
+		applyPinnedSliceState()
+	},
+)
+</script>
diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsChartTooltip.vue b/apps/frontend/src/components/analytics/graph/AnalyticsChartTooltip.vue
new file mode 100644
index 0000000000..5430510067
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsChartTooltip.vue
@@ -0,0 +1,187 @@
+<template>
+	<div
+		v-show="visible"
+		ref="tooltipElement"
+		class="analytics-chart-tooltip absolute left-0 top-0 z-10 max-h-[360px] min-w-[14rem] overflow-y-auto rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-2 text-sm shadow-lg"
+		:class="pinned ? '' : 'pointer-events-none'"
+		:style="positionStyle"
+	>
+		<div class="mb-1 flex items-center justify-between gap-2 font-medium text-contrast">
+			<span>
+				{{ rangeLabel }}
+				<span v-if="durationLabel" class="text-xs font-normal text-secondary">
+					({{ durationLabel }})
+				</span>
+			</span>
+			<PinIcon
+				v-if="pinned"
+				v-tooltip="'Chart tooltip pinned'"
+				class="pointer-events-auto size-4 shrink-0 font-normal text-contrast"
+				aria-label="Pinned"
+			/>
+		</div>
+		<div v-if="!ratioMode" class="mb-1.5 flex items-center justify-between gap-4">
+			<span class="font-medium text-primary">Total</span>
+			<span class="font-semibold text-contrast">{{ formattedTotal }}</span>
+		</div>
+		<div class="flex flex-col gap-1">
+			<div
+				v-for="entry in entries"
+				:key="entry.projectId"
+				class="flex items-center justify-between gap-4"
+			>
+				<div class="inline-flex items-center gap-1.5 text-primary">
+					<span class="size-2 rounded-full" :style="{ backgroundColor: entry.color }" />
+					<span>{{ entry.name }}</span>
+				</div>
+				<span class="font-semibold text-contrast">{{ entry.formattedValue }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { PinIcon } from '@modrinth/assets'
+
+export type AnalyticsChartTooltipEntry = {
+	projectId: string
+	name: string
+	color: string
+	formattedValue: string
+}
+
+const props = defineProps<{
+	visible: boolean
+	x: number
+	y: number
+	start: Date | null
+	end: Date | null
+	chartStart: Date | null
+	chartEnd: Date | null
+	formattedTotal: string
+	entries: AnalyticsChartTooltipEntry[]
+	containerWidth: number
+	containerHeight: number
+	pinned: boolean
+	ratioMode: boolean
+}>()
+
+const ONE_DAY_MS = 24 * 60 * 60 * 1000
+const ONE_HOUR_MS = 60 * 60 * 1000
+const ONE_MINUTE_MS = 60 * 1000
+
+function formatRangeLabel(
+	start: Date,
+	end: Date,
+	chartStart: Date | null,
+	chartEnd: Date | null,
+): string {
+	const includeTime = end.getTime() - start.getTime() < ONE_DAY_MS
+	const yearsDiffer = start.getFullYear() !== end.getFullYear()
+	const chartYearsDiffer =
+		chartStart !== null && chartEnd !== null && chartStart.getFullYear() !== chartEnd.getFullYear()
+	const showTrailingYear = !yearsDiffer && chartYearsDiffer
+	const monthsDiffer = yearsDiffer || start.getMonth() !== end.getMonth()
+	const daysDiffer = monthsDiffer || start.getDate() !== end.getDate()
+
+	const timeOptions: Intl.DateTimeFormatOptions = includeTime
+		? { hour: 'numeric', minute: '2-digit' }
+		: {}
+
+	const startOptions: Intl.DateTimeFormatOptions = {
+		month: 'short',
+		day: 'numeric',
+		...(yearsDiffer ? { year: 'numeric' } : {}),
+		...timeOptions,
+	}
+
+	let endOptions: Intl.DateTimeFormatOptions
+	if (!daysDiffer && includeTime) {
+		endOptions = { ...timeOptions }
+	} else if (yearsDiffer) {
+		endOptions = { month: 'short', day: 'numeric', year: 'numeric', ...timeOptions }
+	} else if (monthsDiffer || includeTime) {
+		endOptions = { month: 'short', day: 'numeric', ...timeOptions }
+	} else {
+		endOptions = { day: 'numeric' }
+	}
+
+	const startLabel = new Intl.DateTimeFormat(undefined, startOptions).format(start)
+	const endLabel = new Intl.DateTimeFormat(undefined, endOptions).format(end)
+	const range = `${startLabel}–${endLabel}`
+
+	if (!showTrailingYear) return range
+
+	const yearLabel = new Intl.DateTimeFormat(undefined, { year: 'numeric' }).format(end)
+	return `${range}, ${yearLabel}`
+}
+
+function formatDurationLabel(start: Date, end: Date): string {
+	const durationMs = end.getTime() - start.getTime()
+	if (!Number.isFinite(durationMs) || durationMs <= 0) return ''
+
+	if (durationMs >= ONE_DAY_MS) {
+		const days = Math.round(durationMs / ONE_DAY_MS)
+		return `${days} ${days === 1 ? 'day' : 'days'}`
+	}
+	if (durationMs >= ONE_HOUR_MS) {
+		const hours = Math.round(durationMs / ONE_HOUR_MS)
+		return `${hours} ${hours === 1 ? 'hour' : 'hours'}`
+	}
+	const minutes = Math.max(1, Math.round(durationMs / ONE_MINUTE_MS))
+	return `${minutes} ${minutes === 1 ? 'minute' : 'minutes'}`
+}
+
+const rangeLabel = computed(() =>
+	props.start && props.end
+		? formatRangeLabel(props.start, props.end, props.chartStart, props.chartEnd)
+		: '',
+)
+
+const durationLabel = computed(() =>
+	props.start && props.end ? formatDurationLabel(props.start, props.end) : '',
+)
+
+const tooltipElement = ref<HTMLDivElement | null>(null)
+const tooltipWidth = ref(0)
+const tooltipHeight = ref(0)
+
+const CURSOR_OFFSET = 12
+const EDGE_PADDING = 8
+
+watch(
+	() => [props.visible, props.entries, rangeLabel.value, durationLabel.value, props.pinned],
+	() => {
+		nextTick(() => {
+			if (!tooltipElement.value) return
+			tooltipWidth.value = tooltipElement.value.offsetWidth
+			tooltipHeight.value = tooltipElement.value.offsetHeight
+		})
+	},
+	{ deep: true, immediate: true },
+)
+
+const positionStyle = computed(() => {
+	const desiredLeft = props.x + CURSOR_OFFSET
+	const maxLeft = Math.max(EDGE_PADDING, props.containerWidth - tooltipWidth.value - EDGE_PADDING)
+	const clampedLeft =
+		desiredLeft + tooltipWidth.value > props.containerWidth - EDGE_PADDING
+			? Math.max(EDGE_PADDING, props.x - tooltipWidth.value - CURSOR_OFFSET)
+			: Math.min(maxLeft, desiredLeft)
+
+	const desiredTop = props.y - tooltipHeight.value / 2
+	const maxTop = Math.max(EDGE_PADDING, props.containerHeight - tooltipHeight.value - EDGE_PADDING)
+	const clampedTop = Math.min(maxTop, Math.max(EDGE_PADDING, desiredTop))
+
+	return {
+		transform: `translate3d(${clampedLeft}px, ${clampedTop}px, 0)`,
+	}
+})
+</script>
+
+<style scoped>
+.analytics-chart-tooltip {
+	transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
+	will-change: transform;
+}
+</style>
diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
new file mode 100644
index 0000000000..152242ea85
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
@@ -0,0 +1,702 @@
+<template>
+	<section
+		class="relative flex flex-col gap-4 overflow-hidden rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4"
+	>
+		<AnalyticsLoadingBar :loading="isDataLoading" />
+		<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
+			<div class="flex w-full flex-col gap-3">
+				<div class="flex items-center justify-between">
+					<div class="text-xl font-semibold text-contrast">
+						{{ graphTitle }}
+					</div>
+
+					<div class="flex items-center gap-3">
+						<div v-if="canUseRatioMode" class="inline-flex items-center gap-2">
+							<label for="ratio-mode-toggle" class="cursor-pointer text-sm text-secondary"
+								>Ratio</label
+							>
+							<Toggle id="ratio-mode-toggle" v-model="isRatioMode" small />
+						</div>
+						<Tabs
+							:value="activeViewMode"
+							:tabs="viewModeTabs"
+							@update:value="activeViewMode = $event as ViewMode"
+						/>
+					</div>
+				</div>
+
+				<div v-if="!isDataLoading" class="flex flex-wrap items-center gap-x-4 gap-y-2">
+					<div
+						v-for="legendEntry in displayedLegendEntries"
+						:key="legendEntry.id"
+						class="inline-flex items-center"
+					>
+						<button
+							type="button"
+							class="inline-flex items-center gap-1.5 text-sm !outline-0 transition-all focus-within:!outline-0 focus:!outline-0 focus-visible:!outline-0"
+							:class="[
+								legendEntry.hidden ? 'text-secondary opacity-70' : 'text-primary',
+								isLegendEntryToggleDisabled(legendEntry)
+									? 'cursor-default'
+									: 'cursor-pointer hover:brightness-125',
+							]"
+							:aria-pressed="!legendEntry.hidden"
+							@click="onLegendEntryClick($event, legendEntry.id)"
+						>
+							<span class="size-2 rounded-full" :style="{ backgroundColor: legendEntry.color }" />
+							<span :class="{ 'line-through': legendEntry.hidden }">{{ legendEntry.name }}</span>
+						</button>
+					</div>
+
+					<button
+						v-if="canShowMoreLegendEntries"
+						type="button"
+						class="text-sm font-normal text-primary underline transition-all hover:brightness-125"
+						@click="showMoreLegendEntries"
+					>
+						Show more
+					</button>
+					<button
+						v-else-if="canShowLessLegendEntries"
+						type="button"
+						class="text-sm font-normal text-primary underline transition-all hover:brightness-125"
+						@click="showLessLegendEntries"
+					>
+						Show less
+					</button>
+				</div>
+			</div>
+		</div>
+
+		<div ref="chartContainer" class="relative h-[420px]" @click="onChartClick">
+			<div
+				:class="[
+					'h-full transition-opacity',
+					isDataLoading ? 'pointer-events-none opacity-75' : '',
+				]"
+			>
+				<div
+					v-if="selectedProjects.length === 0"
+					class="flex h-full items-center justify-center rounded-xl"
+				>
+					<div class="relative bottom-6 text-base font-normal text-secondary">
+						{{ emptyChartMessage }}
+					</div>
+				</div>
+				<template v-else>
+					<ClientOnly>
+						<AnalyticsChart
+							:type="chartType"
+							:fill="isArea"
+							:stacked="isStacked"
+							:ratio-mode="isRatioMode"
+							:datasets="visibleChartDatasets"
+							:labels="chartLabels"
+							:x-axis-tick-limit="xAxisTickLimit"
+							:active-stat="activeStat"
+							:pinned-slice-index="pinnedSliceIndex"
+							@hover="onChartHover"
+							@pinned-drag="onPinnedDrag"
+						/>
+					</ClientOnly>
+					<div
+						v-if="showHoverGuide"
+						aria-hidden="true"
+						class="pointer-events-none absolute bottom-0 left-0 top-0 z-10 mb-8 mt-2 border-0 border-l border-solid border-contrast opacity-25"
+						:style="{ transform: `translate(${hoverState.x}px, 0)` }"
+					/>
+					<div
+						v-if="showPinnedGuide"
+						aria-hidden="true"
+						class="pointer-events-none absolute bottom-0 left-0 top-0 z-10 mb-8 mt-2 border-0 border-l-[2px] border-dashed border-green opacity-75"
+						:style="{ transform: `translate(${hoverState.x}px, 0)` }"
+					/>
+					<AnalyticsChartTooltip
+						:visible="hoverState.visible"
+						:x="hoverState.x"
+						:y="hoverState.y"
+						:start="hoverBucketRange?.start ?? null"
+						:end="hoverBucketRange?.end ?? null"
+						:chart-start="chartRangeBounds?.start ?? null"
+						:chart-end="chartRangeBounds?.end ?? null"
+						:formatted-total="hoverFormattedTotal"
+						:entries="hoverEntries"
+						:container-width="containerSize.width"
+						:container-height="containerSize.height"
+						:pinned="isHoverPinned"
+						:ratio-mode="isRatioMode"
+					/>
+				</template>
+			</div>
+			<div v-if="isDataLoading" class="absolute inset-0 z-20 overflow-hidden rounded-xl">
+				<div class="absolute inset-0 bg-surface-3 opacity-50" />
+				<div class="absolute inset-0 backdrop-blur-[4px]" />
+				<div class="absolute inset-0 flex items-center justify-center">
+					<div
+						class="relative bottom-6 inline-flex items-center gap-2 text-lg font-semibold text-primary"
+					>
+						<span>Fetching results...</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { ChartAreaIcon, ChartColumnBigIcon, ChartSplineIcon } from '@modrinth/assets'
+import { Tabs, type TabsTab, Toggle, useFormatNumber } from '@modrinth/ui'
+
+import { isDarkTheme } from '~/plugins/theme/index.ts'
+import type { AnalyticsDashboardStat } from '~/providers/analytics/analytics'
+import {
+	doesProjectStatusMatchFilters,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+
+import AnalyticsLoadingBar from '../AnalyticsLoadingBar.vue'
+import AnalyticsChart from './AnalyticsChart.client.vue'
+import AnalyticsChartTooltip, { type AnalyticsChartTooltipEntry } from './AnalyticsChartTooltip.vue'
+import {
+	buildChartDatasets,
+	buildTimeAxisLabels,
+	type ChartDataset,
+	formatMetricValue,
+	getShortHourlyAxisTickLimit,
+	getSliceBucketRange,
+	getSliceCount,
+} from './utils'
+
+type ViewMode = 'line' | 'area' | 'bar'
+
+const {
+	activeStat,
+	displayedSelectedProjectIds: selectedProjectIds,
+	projects,
+	displayedFetchRequest: fetchRequest,
+	displayedTimeSlices: timeSlices,
+	displayedSelectedGroupBy: selectedGroupBy,
+	displayedSelectedBreakdown: selectedBreakdown,
+	displayedSelectedFilters: selectedFilters,
+	isLoading,
+	getVersionDisplayName,
+} = injectAnalyticsDashboardContext()
+const formatNumber = useFormatNumber()
+const isDataLoading = computed(() => isLoading.value)
+
+const activeViewMode = ref<ViewMode>('line')
+const isRatioMode = ref(false)
+
+const viewModeTabs: TabsTab[] = [
+	{ value: 'line', label: 'Line', icon: ChartSplineIcon },
+	{ value: 'area', label: 'Area', icon: ChartAreaIcon },
+	{ value: 'bar', label: 'Bar', icon: ChartColumnBigIcon },
+]
+
+const titleByStat: Record<AnalyticsDashboardStat, string> = {
+	views: 'Views Over Time',
+	downloads: 'Downloads Over Time',
+	revenue: 'Revenue Over Time',
+	playtime: 'Playtime Over Time',
+}
+
+const selectedProjectIdSet = computed(() => new Set(selectedProjectIds.value))
+const hasAvailableProjects = computed(() => projects.value.length > 0)
+
+const selectedProjects = computed(() =>
+	projects.value.filter(
+		(project) =>
+			selectedProjectIdSet.value.has(project.id) &&
+			doesProjectStatusMatchFilters(project.status, selectedFilters.value),
+	),
+)
+
+const emptyChartMessage = computed(() =>
+	hasAvailableProjects.value ? 'Select at least one project to view data' : 'No projects available',
+)
+
+const lightLegendPalette = [
+	'#00AF5C',
+	'#D55E00',
+	'#0072B2',
+	'#CC79A7',
+	'#E69F00',
+	'#332288',
+	'#44AA99',
+	'#882255',
+	'#A04500',
+	'#007F3A',
+	'#8E4070',
+	'#004A74',
+	'#5C45D3',
+	'#A37100',
+	'#B83377',
+	'#2F756A',
+]
+
+const darkLegendPalette = [
+	'#1BD96A',
+	'#FFB000',
+	'#56B4E9',
+	'#E78AC3',
+	'#F0E442',
+	'#A78BFA',
+	'#FF7A59',
+	'#4DD0C8',
+	'#B87C00',
+	'#119547',
+	'#B05690',
+	'#2D7AB5',
+	'#6F58CC',
+	'#B8AD30',
+	'#2A938B',
+	'#CC5239',
+]
+
+const theme = useTheme()
+const legendPalette = computed(() =>
+	isDarkTheme(theme.active) ? darkLegendPalette : lightLegendPalette,
+)
+
+const graphTitle = computed(() => titleByStat[activeStat.value])
+
+const chartType = computed<'line' | 'bar'>(() => (activeViewMode.value === 'bar' ? 'bar' : 'line'))
+const canUseRatioMode = computed(
+	() =>
+		(activeViewMode.value === 'area' || activeViewMode.value === 'bar') &&
+		displayedLegendEntries.value.length > 1,
+)
+const isArea = computed(() => activeViewMode.value === 'area')
+const isStacked = computed(
+	() => isRatioMode.value || activeViewMode.value === 'area' || activeViewMode.value === 'bar',
+)
+
+watch(canUseRatioMode, (canUse) => {
+	if (!canUse) {
+		isRatioMode.value = false
+	}
+})
+
+const sliceCount = computed(() => {
+	const nextFetchRequest = fetchRequest.value
+	const fallback = timeSlices.value.length
+	if (!nextFetchRequest) return Math.max(1, fallback)
+	return getSliceCount(nextFetchRequest.time_range, fallback)
+})
+
+const chartLabels = computed(() => {
+	const nextFetchRequest = fetchRequest.value
+	if (!nextFetchRequest) return []
+	return buildTimeAxisLabels(nextFetchRequest.time_range, sliceCount.value, selectedGroupBy.value)
+})
+
+const xAxisTickLimit = computed(() => {
+	const nextFetchRequest = fetchRequest.value
+	return nextFetchRequest
+		? getShortHourlyAxisTickLimit(nextFetchRequest.time_range, selectedGroupBy.value)
+		: undefined
+})
+
+const allChartDatasets = computed(() =>
+	buildChartDatasets(
+		timeSlices.value,
+		selectedProjects.value,
+		activeStat.value,
+		legendPalette.value,
+		selectedBreakdown.value,
+		selectedFilters.value,
+		getVersionDisplayName,
+		sliceCount.value,
+	),
+)
+
+const chartContainer = ref<HTMLElement | null>(null)
+const containerSize = reactive({ width: 0, height: 0 })
+let resizeObserver: ResizeObserver | null = null
+let clearIgnoredChartClickTimeout: ReturnType<typeof setTimeout> | null = null
+
+onMounted(() => {
+	if (!chartContainer.value || typeof ResizeObserver === 'undefined') return
+	resizeObserver = new ResizeObserver((entries) => {
+		const entry = entries[0]
+		if (!entry) return
+		containerSize.width = entry.contentRect.width
+		containerSize.height = entry.contentRect.height
+	})
+	resizeObserver.observe(chartContainer.value)
+})
+
+onBeforeUnmount(() => {
+	resizeObserver?.disconnect()
+	resizeObserver = null
+	if (clearIgnoredChartClickTimeout) {
+		clearTimeout(clearIgnoredChartClickTimeout)
+		clearIgnoredChartClickTimeout = null
+	}
+})
+
+type HoverState = {
+	visible: boolean
+	x: number
+	y: number
+	sliceIndex: number | null
+}
+
+const hoverState = reactive<HoverState>({
+	visible: false,
+	x: 0,
+	y: 0,
+	sliceIndex: null,
+})
+
+const isHoverPinned = ref(false)
+const ignoreNextChartClick = ref(false)
+const hiddenDatasetIds = ref<Set<string>>(new Set())
+const showAllLegendEntries = ref(false)
+
+const LEGEND_MAX_ITEMS = 8
+const LEGEND_EXPANDED_MAX_ITEMS = 24
+const OTHER_LEGEND_ENTRY_ID = '__analytics_other__'
+const OTHER_LEGEND_ENTRY_COLOR = '#9ca3af'
+
+type LegendEntry = {
+	id: string
+	name: string
+	color: string
+	totalValue: number
+	hidden: boolean
+}
+
+function setHoverState(payload: HoverState) {
+	hoverState.visible = payload.visible
+	hoverState.x = payload.x
+	hoverState.y = payload.y
+	hoverState.sliceIndex = payload.sliceIndex
+}
+
+function clearHoverState() {
+	hoverState.visible = false
+	hoverState.sliceIndex = null
+}
+
+function onChartHover(payload: HoverState) {
+	if (isDataLoading.value) return
+	if (isHoverPinned.value) return
+	setHoverState(payload)
+}
+
+function onPinnedDrag(payload: HoverState) {
+	if (isDataLoading.value || !isHoverPinned.value) return
+	ignoreNextChartClick.value = true
+	if (clearIgnoredChartClickTimeout) {
+		clearTimeout(clearIgnoredChartClickTimeout)
+	}
+	clearIgnoredChartClickTimeout = setTimeout(() => {
+		ignoreNextChartClick.value = false
+		clearIgnoredChartClickTimeout = null
+	}, 350)
+	setHoverState(payload)
+}
+
+function onChartClick() {
+	if (isDataLoading.value) return
+	if (ignoreNextChartClick.value) {
+		ignoreNextChartClick.value = false
+		return
+	}
+
+	if (!hoverState.visible || hoverState.sliceIndex === null) {
+		if (isHoverPinned.value) {
+			isHoverPinned.value = false
+			clearHoverState()
+		}
+		return
+	}
+
+	if (isHoverPinned.value) {
+		isHoverPinned.value = false
+		clearHoverState()
+		return
+	}
+
+	isHoverPinned.value = true
+}
+
+const pinnedSliceIndex = computed(() => (isHoverPinned.value ? hoverState.sliceIndex : null))
+const showHoverGuide = computed(
+	() =>
+		!isDataLoading.value &&
+		!isHoverPinned.value &&
+		hoverState.visible &&
+		hoverState.sliceIndex !== null,
+)
+const showPinnedGuide = computed(
+	() =>
+		!isDataLoading.value &&
+		isHoverPinned.value &&
+		hoverState.visible &&
+		hoverState.sliceIndex !== null,
+)
+
+const legendEntries = computed<LegendEntry[]>(() =>
+	allChartDatasets.value
+		.map((dataset) => {
+			const totalValue = dataset.data.reduce((sum, value) => sum + value, 0)
+
+			return {
+				id: dataset.projectId,
+				name: dataset.label,
+				color: dataset.borderColor,
+				totalValue,
+				hidden: hiddenDatasetIds.value.has(dataset.projectId),
+			}
+		})
+		.sort((a, b) => b.totalValue - a.totalValue || a.name.localeCompare(b.name))
+		.map((entry, index) => ({
+			...entry,
+			color:
+				selectedBreakdown.value === 'loader'
+					? entry.color
+					: legendPalette.value[index % legendPalette.value.length],
+		})),
+)
+
+const otherBundledLegendIds = computed<string[]>(() => {
+	if (!showAllLegendEntries.value) return []
+	if (legendEntries.value.length <= LEGEND_EXPANDED_MAX_ITEMS) return []
+	return legendEntries.value.slice(LEGEND_EXPANDED_MAX_ITEMS - 1).map((entry) => entry.id)
+})
+
+const otherLegendEntry = computed<LegendEntry | null>(() => {
+	const bundledIds = otherBundledLegendIds.value
+	if (bundledIds.length === 0) return null
+	const idSet = new Set(bundledIds)
+	const totalValue = legendEntries.value
+		.filter((entry) => idSet.has(entry.id))
+		.reduce((sum, entry) => sum + entry.totalValue, 0)
+	return {
+		id: OTHER_LEGEND_ENTRY_ID,
+		name: 'Other',
+		color: OTHER_LEGEND_ENTRY_COLOR,
+		totalValue,
+		hidden: hiddenDatasetIds.value.has(OTHER_LEGEND_ENTRY_ID),
+	}
+})
+
+const displayedLegendEntries = computed<LegendEntry[]>(() => {
+	if (!showAllLegendEntries.value) {
+		return legendEntries.value.slice(0, LEGEND_MAX_ITEMS)
+	}
+	const other = otherLegendEntry.value
+	if (!other) return legendEntries.value
+	return [...legendEntries.value.slice(0, LEGEND_EXPANDED_MAX_ITEMS - 1), other]
+})
+
+const canShowMoreLegendEntries = computed(
+	() => !showAllLegendEntries.value && legendEntries.value.length > LEGEND_MAX_ITEMS,
+)
+const canShowLessLegendEntries = computed(
+	() => showAllLegendEntries.value && legendEntries.value.length > LEGEND_MAX_ITEMS,
+)
+
+const otherChartDataset = computed<ChartDataset | null>(() => {
+	const bundledIds = otherBundledLegendIds.value
+	if (bundledIds.length === 0) return null
+	const idSet = new Set(bundledIds)
+	const datasets = allChartDatasets.value.filter((dataset) => idSet.has(dataset.projectId))
+	if (datasets.length === 0) return null
+
+	const sliceLength = datasets[0].data.length
+	const data = new Array<number>(sliceLength).fill(0)
+	for (const dataset of datasets) {
+		for (let i = 0; i < sliceLength; i++) {
+			data[i] += dataset.data[i] ?? 0
+		}
+	}
+
+	return {
+		...datasets[0],
+		projectId: OTHER_LEGEND_ENTRY_ID,
+		label: 'Other',
+		data,
+		borderColor: OTHER_LEGEND_ENTRY_COLOR,
+		backgroundColor: OTHER_LEGEND_ENTRY_COLOR,
+	}
+})
+
+const chartDatasetById = computed(() => {
+	const datasets = new Map<string, ChartDataset>()
+	for (const dataset of allChartDatasets.value) {
+		datasets.set(dataset.projectId, dataset)
+	}
+	if (otherChartDataset.value) {
+		datasets.set(OTHER_LEGEND_ENTRY_ID, otherChartDataset.value)
+	}
+	return datasets
+})
+
+const baseVisibleChartDatasets = computed(() =>
+	displayedLegendEntries.value
+		.filter((legendEntry) => !legendEntry.hidden)
+		.map((legendEntry) => {
+			const dataset = chartDatasetById.value.get(legendEntry.id)
+			if (!dataset) return null
+
+			return {
+				...dataset,
+				borderColor: legendEntry.color,
+				backgroundColor: legendEntry.color,
+			}
+		})
+		.filter((dataset): dataset is ChartDataset => Boolean(dataset)),
+)
+
+const visibleChartDatasets = computed<ChartDataset[]>(() => {
+	const datasets = baseVisibleChartDatasets.value
+	if (!isRatioMode.value || datasets.length === 0) return datasets
+
+	const sliceLength = datasets[0]?.data.length ?? 0
+	const totals = new Array<number>(sliceLength).fill(0)
+	for (const dataset of datasets) {
+		for (let i = 0; i < sliceLength; i++) {
+			totals[i] += dataset.data[i] ?? 0
+		}
+	}
+
+	return datasets.map((dataset) => ({
+		...dataset,
+		data: dataset.data.map((value, i) => (totals[i] === 0 ? 0 : (value / totals[i]) * 100)),
+	}))
+})
+
+const visibleChartDatasetById = computed(() => {
+	const datasets = new Map<string, ChartDataset>()
+	for (const dataset of visibleChartDatasets.value) {
+		datasets.set(dataset.projectId, dataset)
+	}
+	return datasets
+})
+
+function isLegendEntryToggleDisabled(legendEntry: LegendEntry) {
+	if (legendEntry.hidden) return false
+	const visibleCount = displayedLegendEntries.value.filter((entry) => !entry.hidden).length
+	return visibleCount <= 1
+}
+
+function toggleLegendEntryVisibility(datasetId: string) {
+	const nextHiddenDatasetIds = new Set(hiddenDatasetIds.value)
+	if (nextHiddenDatasetIds.has(datasetId)) {
+		nextHiddenDatasetIds.delete(datasetId)
+	} else {
+		const visibleCount = displayedLegendEntries.value.filter((entry) => !entry.hidden).length
+		if (visibleCount <= 1) return
+		nextHiddenDatasetIds.add(datasetId)
+	}
+	hiddenDatasetIds.value = nextHiddenDatasetIds
+}
+
+function soloLegendEntry(datasetId: string) {
+	const otherIds = displayedLegendEntries.value
+		.map((entry) => entry.id)
+		.filter((id) => id !== datasetId)
+	const isAlreadySolo =
+		!hiddenDatasetIds.value.has(datasetId) && otherIds.every((id) => hiddenDatasetIds.value.has(id))
+	hiddenDatasetIds.value = isAlreadySolo ? new Set() : new Set(otherIds)
+}
+
+function onLegendEntryClick(event: MouseEvent, datasetId: string) {
+	if (event.shiftKey) {
+		soloLegendEntry(datasetId)
+		return
+	}
+	toggleLegendEntryVisibility(datasetId)
+}
+
+function showMoreLegendEntries() {
+	showAllLegendEntries.value = true
+}
+
+function showLessLegendEntries() {
+	showAllLegendEntries.value = false
+}
+
+watch([chartLabels, allChartDatasets], () => {
+	isHoverPinned.value = false
+	clearHoverState()
+})
+
+watch(isDataLoading, (loading) => {
+	if (!loading) return
+	isHoverPinned.value = false
+	clearHoverState()
+})
+
+watch(allChartDatasets, (datasets) => {
+	const availableDatasetIds = new Set(datasets.map((dataset) => dataset.projectId))
+	availableDatasetIds.add(OTHER_LEGEND_ENTRY_ID)
+	if (hiddenDatasetIds.value.size > 0) {
+		const nextHiddenDatasetIds = new Set(
+			Array.from(hiddenDatasetIds.value).filter((datasetId) => availableDatasetIds.has(datasetId)),
+		)
+
+		if (nextHiddenDatasetIds.size !== hiddenDatasetIds.value.size) {
+			hiddenDatasetIds.value = nextHiddenDatasetIds
+		}
+	}
+
+	if (datasets.length <= LEGEND_MAX_ITEMS) {
+		showAllLegendEntries.value = false
+	}
+})
+
+const hoverBucketRange = computed(() => {
+	const nextFetchRequest = fetchRequest.value
+	if (!nextFetchRequest || hoverState.sliceIndex === null) return null
+	return getSliceBucketRange(nextFetchRequest.time_range, sliceCount.value, hoverState.sliceIndex)
+})
+
+const chartRangeBounds = computed(() => {
+	const nextFetchRequest = fetchRequest.value
+	if (!nextFetchRequest) return null
+	return {
+		start: new Date(nextFetchRequest.time_range.start),
+		end: new Date(nextFetchRequest.time_range.end),
+	}
+})
+
+const hoverTotalValue = computed(() => {
+	if (hoverState.sliceIndex === null) return 0
+	const sliceIndex = hoverState.sliceIndex
+	return visibleChartDatasets.value.reduce(
+		(sum, dataset) => sum + (dataset.data[sliceIndex] ?? 0),
+		0,
+	)
+})
+
+const hoverFormattedTotal = computed(() => {
+	if (isRatioMode.value) {
+		return hoverTotalValue.value > 0 ? '100%' : '0%'
+	}
+	return formatMetricValue(hoverTotalValue.value, activeStat.value, formatNumber)
+})
+
+const hoverEntries = computed<AnalyticsChartTooltipEntry[]>(() => {
+	if (hoverState.sliceIndex === null) return []
+	const sliceIndex = hoverState.sliceIndex
+	return displayedLegendEntries.value
+		.filter((legendEntry) => !legendEntry.hidden)
+		.map((legendEntry) => {
+			const dataset = visibleChartDatasetById.value.get(legendEntry.id)
+			const value = dataset?.data[sliceIndex] ?? 0
+
+			return {
+				projectId: legendEntry.id,
+				name: legendEntry.name,
+				color: legendEntry.color,
+				formattedValue: isRatioMode.value
+					? `${value.toFixed(1)}%`
+					: formatMetricValue(value, activeStat.value, formatNumber),
+			}
+		})
+})
+</script>
diff --git a/apps/frontend/src/components/analytics/graph/utils.ts b/apps/frontend/src/components/analytics/graph/utils.ts
new file mode 100644
index 0000000000..0bca01d6ef
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/utils.ts
@@ -0,0 +1,488 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import {
+	type AnalyticsBreakdownPreset,
+	type AnalyticsDashboardProject,
+	type AnalyticsDashboardStat,
+	type AnalyticsGroupByPreset,
+	type AnalyticsSelectedFilters,
+	doesAnalyticsPointMatchFilters,
+} from '~/providers/analytics/analytics'
+
+import { ALL_BREAKDOWN_VALUE, getAnalyticsBreakdownValue } from '../breakdown'
+
+export type ChartDataset = {
+	projectId: string
+	label: string
+	data: number[]
+	borderColor: string
+	backgroundColor: string
+}
+
+const LOADER_CHART_COLORS: Record<string, string> = {
+	fabric: 'var(--color-platform-fabric)',
+	'legacy-fabric': 'var(--color-platform-fabric)',
+	quilt: 'var(--color-platform-quilt)',
+	forge: 'var(--color-platform-forge)',
+	neoforge: 'var(--color-platform-neoforge)',
+	neo_forge: 'var(--color-platform-neoforge)',
+	liteloader: 'var(--color-platform-liteloader)',
+	bukkit: 'var(--color-platform-bukkit)',
+	bungeecord: 'var(--color-platform-bungeecord)',
+	folia: 'var(--color-platform-folia)',
+	paper: 'var(--color-platform-paper)',
+	purpur: 'var(--color-platform-purpur)',
+	spigot: 'var(--color-platform-spigot)',
+	velocity: 'var(--color-platform-velocity)',
+	waterfall: 'var(--color-platform-waterfall)',
+	sponge: 'var(--color-platform-sponge)',
+	ornithe: 'var(--color-platform-ornithe)',
+	'bta-babric': 'var(--color-platform-bta-babric)',
+	nilloader: 'var(--color-platform-nilloader)',
+}
+
+const REGION_CODE_PATTERN = /^[a-z]{2}$/i
+const OTHER_COUNTRY_CODE = 'XX'
+const OTHER_COUNTRY_LABEL = 'Other'
+const regionDisplayNamesByLocale = new Map<string, Intl.DisplayNames | null>()
+
+function getRegionDisplayNames(locale: string): Intl.DisplayNames | null {
+	if (regionDisplayNamesByLocale.has(locale)) {
+		return regionDisplayNamesByLocale.get(locale) ?? null
+	}
+
+	try {
+		const displayNames = new Intl.DisplayNames(locale, { type: 'region' })
+		regionDisplayNamesByLocale.set(locale, displayNames)
+		return displayNames
+	} catch {
+		regionDisplayNamesByLocale.set(locale, null)
+		return null
+	}
+}
+
+function formatCountryCode(countryCode: string): string {
+	const normalized = countryCode.trim().toUpperCase()
+	if (normalized === OTHER_COUNTRY_CODE) {
+		return OTHER_COUNTRY_LABEL
+	}
+
+	if (!REGION_CODE_PATTERN.test(normalized)) {
+		return countryCode
+	}
+
+	const locale = new Intl.DateTimeFormat().resolvedOptions().locale || 'en'
+	const localizedDisplayNames = getRegionDisplayNames(locale)
+	const localizedValue = localizedDisplayNames?.of(normalized)
+	if (localizedValue && localizedValue !== normalized) {
+		return localizedValue
+	}
+
+	const englishDisplayNames = getRegionDisplayNames('en')
+	const englishValue = englishDisplayNames?.of(normalized)
+	if (englishValue && englishValue !== normalized) {
+		return englishValue
+	}
+
+	return countryCode
+}
+
+function formatLoaderLabel(loader: string): string {
+	const normalized = loader.trim()
+	if (normalized.length === 0) {
+		return loader
+	}
+
+	return `${normalized[0].toUpperCase()}${normalized.slice(1)}`
+}
+
+export function formatBreakdownLabel(
+	breakdownValue: string,
+	selectedBreakdown: AnalyticsBreakdownPreset,
+	getVersionDisplayName: (versionId: string) => string = (versionId) => versionId,
+): string {
+	if (selectedBreakdown === 'country') {
+		return formatCountryCode(breakdownValue)
+	}
+	if (selectedBreakdown === 'version_id') {
+		return getVersionDisplayName(breakdownValue)
+	}
+	if (selectedBreakdown === 'loader') {
+		return formatLoaderLabel(breakdownValue)
+	}
+	if (selectedBreakdown === 'download_reason') {
+		return formatDownloadReasonLabel(breakdownValue)
+	}
+
+	return breakdownValue
+}
+
+function formatDownloadReasonLabel(reason: string): string {
+	switch (reason) {
+		case 'standalone':
+			return 'Standalone'
+		case 'dependency':
+			return 'Dependency'
+		case 'modpack':
+			return 'Modpack'
+		default:
+			return reason
+	}
+}
+
+function getBreakdownColor(
+	breakdownValue: string,
+	selectedBreakdown: AnalyticsBreakdownPreset,
+	fallbackColor: string,
+): string {
+	if (selectedBreakdown !== 'loader') {
+		return fallbackColor
+	}
+
+	const normalizedLoader = breakdownValue.trim().toLowerCase()
+	return LOADER_CHART_COLORS[normalizedLoader] ?? fallbackColor
+}
+
+export function getMetricValue(
+	point: Labrinth.Analytics.v3.ProjectAnalytics,
+	activeStat: AnalyticsDashboardStat,
+): number {
+	switch (activeStat) {
+		case 'views':
+			return point.metric_kind === 'views' ? point.views : 0
+		case 'downloads':
+			return point.metric_kind === 'downloads' ? point.downloads : 0
+		case 'playtime':
+			return point.metric_kind === 'playtime' ? point.seconds : 0
+		case 'revenue': {
+			if (point.metric_kind !== 'revenue') return 0
+			const value = Number.parseFloat(point.revenue)
+			return Number.isFinite(value) ? value : 0
+		}
+	}
+}
+
+function isMetricKindForStat(
+	point: Labrinth.Analytics.v3.ProjectAnalytics,
+	activeStat: AnalyticsDashboardStat,
+): boolean {
+	return point.metric_kind === activeStat
+}
+
+export function buildChartDatasets(
+	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+	selectedProjects: AnalyticsDashboardProject[],
+	activeStat: AnalyticsDashboardStat,
+	palette: string[],
+	selectedBreakdown: AnalyticsBreakdownPreset,
+	selectedFilters: AnalyticsSelectedFilters,
+	getVersionDisplayName: (versionId: string) => string = (versionId) => versionId,
+	sliceCount: number = timeSlices.length,
+): ChartDataset[] {
+	const selectedProjectIds = new Set(selectedProjects.map((project) => project.id))
+	if (selectedProjectIds.size === 0) {
+		return []
+	}
+
+	const dataLength = Math.max(sliceCount, timeSlices.length)
+
+	if (selectedBreakdown !== 'none') {
+		const dataByBreakdown = new Map<string, number[]>()
+
+		timeSlices.forEach((slice, sliceIndex) => {
+			for (const point of slice) {
+				if (!('source_project' in point)) continue
+				if (!selectedProjectIds.has(point.source_project)) continue
+				if (!doesAnalyticsPointMatchFilters(point, selectedFilters)) continue
+				if (!isMetricKindForStat(point, activeStat)) continue
+
+				const breakdownValue = getAnalyticsBreakdownValue(point, selectedBreakdown)
+				if (breakdownValue === ALL_BREAKDOWN_VALUE) continue
+
+				let breakdownData = dataByBreakdown.get(breakdownValue)
+				if (!breakdownData) {
+					breakdownData = new Array(dataLength).fill(0)
+					dataByBreakdown.set(breakdownValue, breakdownData)
+				}
+
+				breakdownData[sliceIndex] += getMetricValue(point, activeStat)
+			}
+		})
+
+		return Array.from(dataByBreakdown.entries()).map(([breakdownValue, data], index) => {
+			const fallbackColor = palette[index % palette.length]
+			const color = getBreakdownColor(breakdownValue, selectedBreakdown, fallbackColor)
+			return {
+				projectId: `breakdown:${breakdownValue}`,
+				label: formatBreakdownLabel(breakdownValue, selectedBreakdown, getVersionDisplayName),
+				data,
+				borderColor: color,
+				backgroundColor: color,
+			}
+		})
+	}
+
+	const dataByProjectId = new Map<string, number[]>()
+	for (const project of selectedProjects) {
+		dataByProjectId.set(project.id, new Array(dataLength).fill(0))
+	}
+
+	timeSlices.forEach((slice, sliceIndex) => {
+		for (const point of slice) {
+			if (!('source_project' in point)) continue
+			if (!selectedProjectIds.has(point.source_project)) continue
+			if (!doesAnalyticsPointMatchFilters(point, selectedFilters)) continue
+
+			const projectData = dataByProjectId.get(point.source_project)
+			if (!projectData) continue
+
+			projectData[sliceIndex] += getMetricValue(point, activeStat)
+		}
+	})
+
+	return selectedProjects.map((project, index) => {
+		const color = palette[index % palette.length]
+		return {
+			projectId: project.id,
+			label: project.name,
+			data: dataByProjectId.get(project.id) ?? [],
+			borderColor: color,
+			backgroundColor: color,
+		}
+	})
+}
+
+export function getSliceCount(
+	timeRange: Labrinth.Analytics.v3.TimeRange,
+	fallback: number,
+): number {
+	if ('slices' in timeRange.resolution) {
+		return Math.max(1, timeRange.resolution.slices)
+	}
+	if ('minutes' in timeRange.resolution) {
+		const duration = new Date(timeRange.end).getTime() - new Date(timeRange.start).getTime()
+		const bucketMs = timeRange.resolution.minutes * 60 * 1000
+		if (bucketMs > 0 && duration > 0) {
+			return Math.max(1, Math.ceil(duration / bucketMs))
+		}
+	}
+	return Math.max(1, fallback)
+}
+
+export function getSliceBucketRange(
+	timeRange: Labrinth.Analytics.v3.TimeRange,
+	sliceCount: number,
+	index: number,
+): { start: Date; end: Date } {
+	const startMs = new Date(timeRange.start).getTime()
+	const endMs = new Date(timeRange.end).getTime()
+	const bucketMs = sliceCount > 0 ? (endMs - startMs) / sliceCount : 0
+
+	return {
+		start: new Date(startMs + index * bucketMs),
+		end: new Date(startMs + (index + 1) * bucketMs),
+	}
+}
+
+const ONE_DAY_MS = 24 * 60 * 60 * 1000
+const ONE_MINUTE_MS = 60 * 1000
+const COMPACT_AXIS_THRESHOLD = 5
+const SHORT_HOURLY_TIME_LABEL_DURATION_MS = 6 * ONE_DAY_MS
+export const DEFAULT_X_AXIS_TICK_LIMIT = 12
+export const SHORT_HOURLY_AXIS_TICK_LIMIT = 8
+
+export function buildTimeAxisLabels(
+	timeRange: Labrinth.Analytics.v3.TimeRange,
+	sliceCount: number,
+	groupBy: AnalyticsGroupByPreset,
+): string[] {
+	const startMs = new Date(timeRange.start).getTime()
+	const endMs = new Date(timeRange.end).getTime()
+	const totalMs = endMs - startMs
+	const bucketMs = sliceCount > 0 ? totalMs / sliceCount : 0
+	const includeTime = shouldShowTimeForHourlyAxis(timeRange, groupBy)
+	const includeYear = isYearRelevantForTimeRange(timeRange) || groupBy === 'year'
+
+	const dates: Date[] = []
+	const dateKeys: string[] = []
+	for (let i = 0; i < sliceCount; i++) {
+		const date = new Date(startMs + (i + 1) * bucketMs)
+		dates.push(date)
+		dateKeys.push(`${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`)
+	}
+
+	const dateFormatter = new Intl.DateTimeFormat(undefined, {
+		month: 'short',
+		day: 'numeric',
+		...(includeYear ? { year: 'numeric' } : {}),
+	})
+
+	if (!includeTime) {
+		return dates.map((date) => dateFormatter.format(date))
+	}
+
+	const timeFormatter = new Intl.DateTimeFormat(undefined, { hour: 'numeric' })
+	const uniqueDateCount = new Set(dateKeys).size
+
+	if (uniqueDateCount <= 1 || isSingleFullDayTimeRange(new Date(startMs), new Date(endMs))) {
+		return dates.map((date) => timeFormatter.format(date))
+	}
+
+	if (includeTime || sliceCount <= COMPACT_AXIS_THRESHOLD) {
+		const dateAndTimeFormatter = new Intl.DateTimeFormat(undefined, {
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			...(includeYear ? { year: 'numeric' } : {}),
+		})
+		return dates.map((date) => dateAndTimeFormatter.format(date))
+	}
+
+	return dates.map((date) => dateFormatter.format(date))
+}
+
+export function isTimeRelevantForGroupBy(groupBy: AnalyticsGroupByPreset): boolean {
+	return groupBy === '1h' || groupBy === '6h'
+}
+
+export function shouldUseShortHourlyAxis(
+	timeRange: Labrinth.Analytics.v3.TimeRange,
+	groupBy: AnalyticsGroupByPreset,
+): boolean {
+	if (!isTimeRelevantForGroupBy(groupBy)) {
+		return false
+	}
+
+	const durationMs = getTimeRangeDurationMs(timeRange)
+
+	return (
+		Number.isFinite(durationMs) &&
+		durationMs > 0 &&
+		durationMs <= DEFAULT_X_AXIS_TICK_LIMIT * ONE_DAY_MS
+	)
+}
+
+export function getShortHourlyAxisTickLimit(
+	timeRange: Labrinth.Analytics.v3.TimeRange,
+	groupBy: AnalyticsGroupByPreset,
+): number | undefined {
+	if (!shouldUseShortHourlyAxis(timeRange, groupBy)) {
+		return undefined
+	}
+
+	const durationMs = getTimeRangeDurationMs(timeRange)
+	if (durationMs > SHORT_HOURLY_TIME_LABEL_DURATION_MS) {
+		return Math.min(DEFAULT_X_AXIS_TICK_LIMIT, Math.ceil(durationMs / ONE_DAY_MS))
+	}
+
+	return SHORT_HOURLY_AXIS_TICK_LIMIT
+}
+
+function shouldShowTimeForHourlyAxis(
+	timeRange: Labrinth.Analytics.v3.TimeRange,
+	groupBy: AnalyticsGroupByPreset,
+): boolean {
+	const durationMs = getTimeRangeDurationMs(timeRange)
+	return (
+		isTimeRelevantForGroupBy(groupBy) &&
+		Number.isFinite(durationMs) &&
+		durationMs > 0 &&
+		durationMs <= SHORT_HOURLY_TIME_LABEL_DURATION_MS
+	)
+}
+
+function getTimeRangeDurationMs(timeRange: Labrinth.Analytics.v3.TimeRange): number {
+	return new Date(timeRange.end).getTime() - new Date(timeRange.start).getTime()
+}
+
+export function isYearRelevantForTimeRange(timeRange: Labrinth.Analytics.v3.TimeRange): boolean {
+	const startYear = new Date(timeRange.start).getFullYear()
+	const endYear = new Date(timeRange.end).getFullYear()
+
+	return startYear !== endYear
+}
+
+export function formatBucketEndLabel(end: Date, includeTime: boolean, includeYear = false): string {
+	if (includeTime) {
+		return new Intl.DateTimeFormat(undefined, {
+			month: 'short',
+			day: 'numeric',
+			...(includeYear ? { year: 'numeric' } : {}),
+			hour: 'numeric',
+			minute: '2-digit',
+		}).format(end)
+	}
+
+	return new Intl.DateTimeFormat(undefined, {
+		month: 'short',
+		day: 'numeric',
+		...(includeYear ? { year: 'numeric' } : {}),
+	}).format(end)
+}
+
+function isStartOfDay(date: Date): boolean {
+	return (
+		date.getHours() === 0 &&
+		date.getMinutes() === 0 &&
+		date.getSeconds() === 0 &&
+		date.getMilliseconds() === 0
+	)
+}
+
+function isSingleFullDayTimeRange(start: Date, end: Date): boolean {
+	const durationMs = end.getTime() - start.getTime()
+	return (
+		Math.abs(durationMs - ONE_DAY_MS) < ONE_MINUTE_MS && isStartOfDay(start) && isStartOfDay(end)
+	)
+}
+
+export function formatMetricValue(
+	value: number,
+	activeStat: AnalyticsDashboardStat,
+	formatNumber: (value: number) => string,
+): string {
+	switch (activeStat) {
+		case 'revenue': {
+			const amount = Math.round(value * 100) / 100
+			return `$${formatNumber(amount)}`
+		}
+		case 'playtime': {
+			const hours = value / 3600
+			return `${hours.toFixed(1)} hrs`
+		}
+		case 'views':
+		case 'downloads':
+		default:
+			return formatNumber(Math.round(value))
+	}
+}
+
+function formatSmallAxisNumber(value: number): string {
+	const rounded = Math.round(value)
+	if (Math.abs(value - rounded) < 0.0000001) {
+		return String(rounded)
+	}
+
+	const formattedValue = Math.abs(value) < 1 ? value.toFixed(2) : value.toFixed(1)
+	return formattedValue.replace(/\.?0+$/, '')
+}
+
+export function formatAxisValue(
+	value: number,
+	activeStat: AnalyticsDashboardStat,
+	formatCompact: (value: number) => string,
+): string {
+	switch (activeStat) {
+		case 'revenue':
+			return `$${formatCompact(Math.round(value * 100) / 100)}`
+		case 'playtime':
+			return `${(value / 3600).toFixed(1)}h`
+		case 'views':
+		case 'downloads':
+		default:
+			if (Math.abs(value) < 10) {
+				return formatSmallAxisNumber(value)
+			}
+			return formatCompact(Math.round(value))
+	}
+}
diff --git a/apps/frontend/src/components/analytics/query-builder/DownloadsThresholdInput.vue b/apps/frontend/src/components/analytics/query-builder/DownloadsThresholdInput.vue
new file mode 100644
index 0000000000..18eba7b4f2
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/DownloadsThresholdInput.vue
@@ -0,0 +1,145 @@
+<template>
+	<div class="flex flex-wrap items-center gap-3">
+		<span class="shrink-0 whitespace-nowrap text-sm font-semibold text-primary">
+			{{ props.label }}
+		</span>
+		<input
+			v-model="inputValue"
+			type="text"
+			inputmode="numeric"
+			placeholder="0"
+			class="h-8 rounded-lg border border-solid border-surface-5 bg-surface-3 px-2 text-center text-sm font-semibold text-primary outline-none transition-[box-shadow,color] focus:text-contrast focus:ring-4 focus:ring-brand-shadow"
+			:class="props.inputWidthClass"
+			:aria-label="props.inputAriaLabel"
+			@blur="formatInput"
+			@keydown.enter.prevent.stop="submitInput"
+		/>
+		<span class="shrink-0 text-sm font-semibold text-primary">{{ props.suffix }}</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		label: string
+		inputAriaLabel: string
+		threshold?: number | null
+		suffix?: string
+		inputWidthClass?: string
+	}>(),
+	{
+		suffix: 'downloads',
+		inputWidthClass: 'w-20',
+	},
+)
+
+const emit = defineEmits<{
+	'update:threshold': [threshold: number | null]
+	submit: [event: KeyboardEvent]
+}>()
+
+const inputValue = ref('')
+let isSyncingThreshold = false
+let hasPendingEmittedThreshold = false
+let pendingEmittedThreshold: number | null = null
+
+function parseDownloadsThreshold(value: string): number | null | undefined {
+	const normalizedValue = value.trim().toLowerCase().replace(/,/g, '')
+	if (!normalizedValue) {
+		return null
+	}
+
+	const match = normalizedValue.match(/^(\d+(?:\.\d+)?)([kmb])?$/)
+	if (!match) {
+		return undefined
+	}
+
+	const amount = Number.parseFloat(match[1])
+	if (!Number.isFinite(amount)) {
+		return undefined
+	}
+
+	const multiplierBySuffix: Record<string, number> = {
+		k: 1_000,
+		m: 1_000_000,
+		b: 1_000_000_000,
+	}
+
+	const multiplier = match[2] ? multiplierBySuffix[match[2]] : 1
+	return Math.max(0, Math.floor(amount * multiplier))
+}
+
+function formatCompactNumber(value: number): string {
+	const formatWithSuffix = (divisor: number, suffix: string) => {
+		const dividedValue = value / divisor
+		const fractionDigits = Number.isInteger(dividedValue) ? 0 : 1
+		return `${dividedValue.toFixed(fractionDigits).replace(/\.0$/, '')}${suffix}`
+	}
+
+	if (value >= 1_000_000_000) return formatWithSuffix(1_000_000_000, 'B')
+	if (value >= 1_000_000) return formatWithSuffix(1_000_000, 'M')
+	if (value >= 1_000) return formatWithSuffix(1_000, 'k')
+	return String(value)
+}
+
+function formatInput() {
+	const threshold = parseDownloadsThreshold(inputValue.value)
+	if (threshold === undefined || threshold === null) {
+		return
+	}
+
+	inputValue.value = formatCompactNumber(threshold)
+}
+
+function submitInput(event: KeyboardEvent) {
+	const threshold = parseDownloadsThreshold(inputValue.value)
+	if (threshold === undefined) {
+		return
+	}
+
+	if (threshold !== null) {
+		inputValue.value = formatCompactNumber(threshold)
+	}
+
+	emit('update:threshold', threshold)
+	emit('submit', event)
+}
+
+watch(inputValue, (value) => {
+	if (isSyncingThreshold) {
+		return
+	}
+
+	const threshold = parseDownloadsThreshold(value)
+	if (threshold === undefined) {
+		return
+	}
+
+	hasPendingEmittedThreshold = true
+	pendingEmittedThreshold = threshold
+	emit('update:threshold', threshold)
+	nextTick(() => {
+		if (hasPendingEmittedThreshold && pendingEmittedThreshold === threshold) {
+			hasPendingEmittedThreshold = false
+		}
+	})
+})
+
+watch(
+	() => props.threshold,
+	(threshold) => {
+		if (hasPendingEmittedThreshold && threshold === pendingEmittedThreshold) {
+			hasPendingEmittedThreshold = false
+			return
+		}
+
+		isSyncingThreshold = true
+		inputValue.value =
+			threshold === null || threshold === undefined ? '' : formatCompactNumber(threshold)
+		nextTick(() => {
+			isSyncingThreshold = false
+		})
+	},
+	{ immediate: true },
+)
+</script>
diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
new file mode 100644
index 0000000000..1955c945b3
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -0,0 +1,683 @@
+<template>
+	<div class="flex flex-col gap-3 pl-1">
+		<div v-if="showProjectRow" class="flex items-start gap-2">
+			<div class="my-1.5 flex w-32 items-center gap-2 text-primary">
+				<FolderOpenIcon class="size-5" />
+				<span class="text-base font-medium">Project:</span>
+			</div>
+			<div class="w-fit">
+				<MultiSelect
+					v-model="draftSelectedProjectIds"
+					:options="projectOptions"
+					:disabled="!hasProjectOptions"
+					:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
+					dropdown-min-width="330px"
+					placeholder="Select projects"
+					no-options-message="No projects available"
+					:searchable="projectOptions.length > 6"
+					:max-tag-rows="1"
+					show-selection-actions
+					@open="handleProjectSelectOpen"
+					@close="handleProjectSelectClose"
+				>
+					<template #input-content="{ isOpen, openDirection }">
+						<div class="flex min-h-8 min-w-0 flex-1 items-center gap-2 pr-1">
+							<span class="min-w-0 flex-1 truncate px-1.5 py-1 font-semibold text-primary">
+								{{ selectedProjectLabel }}
+							</span>
+							<div class="flex shrink-0 items-center gap-1.5">
+								<template v-if="canClearDraftSelectedProjects">
+									<button
+										type="button"
+										class="flex cursor-pointer items-center justify-center rounded border-none bg-transparent p-0.5 text-secondary transition-colors hover:text-contrast"
+										aria-label="Clear projects"
+										@click.stop="clearDraftSelectedProjects"
+									>
+										<XIcon class="size-4 text-primary" />
+									</button>
+									<div class="h-5 w-[1px] shrink-0 bg-surface-5"></div>
+								</template>
+
+								<ChevronLeftIcon
+									class="size-5 shrink-0 text-primary transition-transform duration-150"
+									:class="
+										isOpen ? (openDirection === 'down' ? 'rotate-90' : '-rotate-90') : '-rotate-90'
+									"
+								/>
+							</div>
+						</div>
+					</template>
+					<template v-if="hasProjectOptions" #top>
+						<div class="px-3">
+							<button
+								type="button"
+								class="flex w-full cursor-pointer items-center gap-2.5 rounded-xl border-0 bg-transparent p-3 text-left text-contrast shadow-none transition-colors duration-150 hover:bg-surface-5 focus:bg-surface-5"
+								:aria-selected="isAllProjectsOptionSelected"
+								role="option"
+								@click="selectAllProjectsMode"
+								@keydown.enter.stop
+								@keydown.space.stop
+							>
+								<span
+									class="checkbox-shadow flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-[1px] border-solid"
+									:class="
+										isAllProjectsOptionSelected
+											? 'border-button-border bg-brand text-brand-inverted'
+											: 'border-surface-5 bg-surface-2'
+									"
+								>
+									<CheckIcon
+										v-if="isAllProjectsOptionSelected"
+										aria-hidden="true"
+										stroke-width="3"
+									/>
+								</span>
+								<span class="font-semibold leading-tight text-primary">All projects</span>
+							</button>
+						</div>
+					</template>
+					<template v-if="hasProjectOptions" #bottom>
+						<DownloadsThresholdInput
+							class="border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+							label="Projects above"
+							input-aria-label="Project downloads threshold"
+							:threshold="projectDownloadsThreshold"
+							input-width-class="w-20"
+							@update:threshold="setProjectDownloadsThreshold"
+							@submit="runProjectDownloadsThresholdQuery"
+						/>
+					</template>
+				</MultiSelect>
+			</div>
+		</div>
+
+		<div class="flex flex-wrap items-center gap-2">
+			<div class="flex items-center gap-2">
+				<div class="flex w-32 items-center gap-2 text-primary">
+					<CalendarIcon class="size-5" />
+					<span class="text-base font-medium">Timeframe:</span>
+				</div>
+				<div>
+					<TimeFramePicker />
+				</div>
+			</div>
+			<div class="flex items-center gap-2">
+				<span class="text-base font-medium text-primary">Grouped by</span>
+				<div>
+					<Combobox
+						v-model="selectedGroupBy"
+						:options="groupByOptions"
+						:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
+						:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
+					/>
+				</div>
+			</div>
+		</div>
+
+		<div class="flex flex-wrap items-start gap-2">
+			<div class="flex items-center gap-2">
+				<div class="flex w-32 items-center gap-2 text-primary">
+					<BlocksIcon class="size-5" />
+					<span class="text-base font-medium">Breakdown:</span>
+				</div>
+				<div class="flex flex-col gap-2">
+					<div class="flex flex-wrap items-center gap-2">
+						<div>
+							<Combobox
+								v-model="selectedBreakdownValue"
+								:options="breakdownOptions"
+								:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
+								:dropdown-min-width="QUERY_BUILDER_DROPDOWN_MIN_WIDTH"
+							>
+								<template #suffix>
+									<div class="mr-0.5 flex gap-1.5">
+										<button
+											v-if="selectedBreakdownValue !== 'none'"
+											type="button"
+											class="inline-flex size-5 shrink-0 items-center justify-center rounded-full border-0 bg-transparent shadow-none transition-colors hover:bg-transparent hover:text-contrast"
+											aria-label="Clear breakdown"
+											@click.stop="clearSelectedBreakdown"
+											@keydown.stop
+										>
+											<XIcon class="size-4 text-primary" />
+										</button>
+										<div
+											v-if="selectedBreakdownValue !== 'none'"
+											class="h-5 w-[1px] shrink-0 bg-surface-5"
+										></div>
+									</div>
+								</template>
+							</Combobox>
+						</div>
+					</div>
+				</div>
+			</div>
+			<QueryBuilderFilter />
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	BlocksIcon,
+	CalendarIcon,
+	CheckIcon,
+	ChevronLeftIcon,
+	FolderOpenIcon,
+	XIcon,
+} from '@modrinth/assets'
+import { Combobox, type ComboboxOption, MultiSelect, type MultiSelectOption } from '@modrinth/ui'
+
+import {
+	type AnalyticsBreakdownPreset,
+	type AnalyticsGroupByPreset,
+	type AnalyticsSelectedFilters,
+	getProjectIdsMatchingStatusFilter,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+
+import DownloadsThresholdInput from './DownloadsThresholdInput.vue'
+import {
+	cloneSelectedFilters,
+	getAnalyticsFilterCategoryForBreakdown,
+	getAnalyticsStatsForBreakdown,
+	getAnalyticsStatsForFilterCategory,
+	getEnabledAnalyticsStatsForState,
+} from './query-filter/queryFilter'
+import QueryBuilderFilter from './query-filter/QueryFilter.vue'
+import { ensureMinimumTimeRange, useSelectedAnalyticsTimeRange } from './timeframe-picker/timeframe'
+import TimeFramePicker from './timeframe-picker/TimeFramePicker.vue'
+
+const MAX_TIME_SLICES = 1024
+const QUERY_BUILDER_DROPDOWN_MAX_HEIGHT = 500
+const QUERY_BUILDER_DROPDOWN_MIN_WIDTH = '12rem'
+
+const {
+	projects,
+	selectedProjectIds,
+	selectedTimeframeMode,
+	selectedTimeframe,
+	selectedGroupBy,
+	selectedBreakdown,
+	selectedFilters,
+	projectStatusById,
+	refreshAnalyticsQuery,
+	setFetchRequest,
+} = injectAnalyticsDashboardContext()
+const route = useRoute()
+const { selectedTimeRange, selectedTimeframeDurationMinutes } = useSelectedAnalyticsTimeRange()
+
+const projectOptions = computed<MultiSelectOption<string>[]>(() =>
+	projects.value.map((project) => ({
+		value: project.id,
+		label: project.name,
+	})),
+)
+
+const allProjectIds = computed(() => projectOptions.value.map((project) => project.value))
+const hasProjectOptions = computed(() => projectOptions.value.length > 0)
+const isProjectSelectOpen = ref(false)
+const draftSelectedProjectIds = ref<string[]>([...selectedProjectIds.value])
+const projectDownloadsThreshold = ref<number | null>(null)
+
+function isSameProjectSelection(left: string[], right: string[]) {
+	if (left.length !== right.length) {
+		return false
+	}
+
+	const rightProjectIds = new Set(right)
+	return left.every((projectId) => rightProjectIds.has(projectId))
+}
+
+function normalizeProjectSelection(projectIds: string[]) {
+	return projectIds.length > 0 ? [...projectIds] : [...allProjectIds.value]
+}
+
+watch(selectedProjectIds, (nextSelectedProjectIds) => {
+	if (isProjectSelectOpen.value) {
+		return
+	}
+
+	draftSelectedProjectIds.value = [...nextSelectedProjectIds]
+})
+
+const areAllProjectsSelected = computed(() => {
+	return isSameProjectSelection(draftSelectedProjectIds.value, allProjectIds.value)
+})
+const isAllProjectsOptionSelected = computed(() => draftSelectedProjectIds.value.length === 0)
+const canClearDraftSelectedProjects = computed(() => {
+	return !isAllProjectsOptionSelected.value && !areAllProjectsSelected.value
+})
+
+const selectedProjectLabel = computed(() => {
+	if (!hasProjectOptions.value) {
+		return 'No projects available'
+	}
+
+	if (isAllProjectsOptionSelected.value || areAllProjectsSelected.value) {
+		return 'All projects'
+	}
+
+	if (draftSelectedProjectIds.value.length === 1) {
+		const selectedProject = projectOptions.value.find(
+			(project) => project.value === draftSelectedProjectIds.value[0],
+		)
+		return selectedProject?.label ?? '1 project'
+	}
+
+	return `${draftSelectedProjectIds.value.length} projects`
+})
+
+function handleProjectSelectOpen() {
+	isProjectSelectOpen.value = true
+	draftSelectedProjectIds.value = isSameProjectSelection(
+		selectedProjectIds.value,
+		allProjectIds.value,
+	)
+		? []
+		: [...selectedProjectIds.value]
+}
+
+function handleProjectSelectClose(
+	nextSelectedProjectIds: string[] = draftSelectedProjectIds.value,
+) {
+	isProjectSelectOpen.value = false
+	commitDraftSelectedProjects(nextSelectedProjectIds)
+}
+
+function commitDraftSelectedProjects(
+	nextSelectedProjectIds: string[] = draftSelectedProjectIds.value,
+) {
+	const nextProjectIds = normalizeProjectSelection(nextSelectedProjectIds)
+
+	draftSelectedProjectIds.value = [...nextProjectIds]
+	if (!isSameProjectSelection(selectedProjectIds.value, nextProjectIds)) {
+		selectedProjectIds.value = nextProjectIds
+	}
+}
+
+function clearDraftSelectedProjects() {
+	draftSelectedProjectIds.value = []
+	if (!isProjectSelectOpen.value) {
+		handleProjectSelectClose()
+	}
+}
+
+function selectAllProjectsMode() {
+	draftSelectedProjectIds.value = []
+}
+
+const selectedBreakdownValue = computed<AnalyticsBreakdownPreset>({
+	get: () => selectedBreakdown.value,
+	set: (nextBreakdown) => {
+		selectedBreakdown.value = nextBreakdown
+
+		const filterCategory = getAnalyticsFilterCategoryForBreakdown(nextBreakdown)
+		if (!filterCategory || selectedFilters.value[filterCategory].length === 0) {
+			return
+		}
+
+		const nextFilters = cloneSelectedFilters(selectedFilters.value)
+		nextFilters[filterCategory] = []
+		selectedFilters.value = nextFilters
+	},
+})
+
+function clearSelectedBreakdown() {
+	selectedBreakdown.value = 'none'
+}
+
+const isDashboardAnalyticsRoute = computed(
+	() => route.path.replace(/\/$/, '') === '/dashboard/analytics',
+)
+const showProjectRow = computed(() => isDashboardAnalyticsRoute.value || projects.value.length > 1)
+
+function applyProjectDownloadsThreshold(threshold: number | null) {
+	if (threshold === null) {
+		return
+	}
+
+	draftSelectedProjectIds.value = projects.value
+		.filter((project) => project.downloads >= threshold)
+		.map((project) => project.id)
+}
+
+function setProjectDownloadsThreshold(threshold: number | null) {
+	projectDownloadsThreshold.value = threshold
+	applyProjectDownloadsThreshold(threshold)
+}
+
+function closeProjectSelectDropdown(event: KeyboardEvent) {
+	const eventTarget = event.target
+	if (!(eventTarget instanceof HTMLElement)) {
+		isProjectSelectOpen.value = false
+		return
+	}
+
+	const dropdown = eventTarget.closest('[role="listbox"][aria-multiselectable="true"]')
+	if (!dropdown) {
+		isProjectSelectOpen.value = false
+		return
+	}
+
+	dropdown.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+}
+
+async function runProjectDownloadsThresholdQuery(event: KeyboardEvent) {
+	commitDraftSelectedProjects()
+	closeProjectSelectDropdown(event)
+	await nextTick()
+	await refreshAnalyticsQuery()
+}
+
+const groupByPresetOptions: Array<{
+	value: AnalyticsGroupByPreset
+	label: string
+	minutes: number
+}> = [
+	{ value: '1h', label: '1h', minutes: 60 },
+	{ value: '6h', label: '6h', minutes: 360 },
+	{ value: 'day', label: 'Day', minutes: 24 * 60 },
+	{ value: 'week', label: 'Week', minutes: 7 * 24 * 60 },
+	{ value: 'month', label: 'Month', minutes: 30 * 24 * 60 },
+	{ value: 'year', label: 'Year', minutes: 365 * 24 * 60 },
+]
+
+const breakdownOptions: ComboboxOption<AnalyticsBreakdownPreset>[] = [
+	{ value: 'none', label: 'None' },
+	{ value: 'country', label: 'Country' },
+	{ value: 'monetization', label: 'Monetization' },
+	{ value: 'download_source', label: 'Download source' },
+	{ value: 'download_reason', label: 'Download type' },
+	{ value: 'version_id', label: 'Project version' },
+	{ value: 'loader', label: 'Loader' },
+	{ value: 'game_version', label: 'Game version' },
+]
+
+function getGroupByMinutes(preset: AnalyticsGroupByPreset): number {
+	switch (preset) {
+		case '1h':
+			return 60
+		case '6h':
+			return 360
+		case 'day':
+			return 24 * 60
+		case 'week':
+			return 7 * 24 * 60
+		case 'month':
+			return 30 * 24 * 60
+		case 'year':
+			return 365 * 24 * 60
+		default:
+			return 60
+	}
+}
+
+function getAllTimeYearGroupStart(end: Date): Date {
+	const start = new Date(end)
+	start.setFullYear(2021)
+	return start
+}
+
+const groupByOptions = computed<ComboboxOption<AnalyticsGroupByPreset>[]>(() => {
+	const timeframeMinutes = selectedTimeframeDurationMinutes.value
+	const options = groupByPresetOptions.map((option) => {
+		const isTooCoarse = option.minutes >= timeframeMinutes
+		const isTooFine = timeframeMinutes / option.minutes > MAX_TIME_SLICES
+		return {
+			value: option.value,
+			label: option.label,
+			disabled: isTooCoarse || isTooFine,
+		}
+	})
+
+	if (options.every((option) => option.disabled)) {
+		options[0].disabled = false
+	}
+
+	return options
+})
+
+watch(
+	groupByOptions,
+	(nextOptions) => {
+		const selectedOption = nextOptions.find((option) => option.value === selectedGroupBy.value)
+		if (selectedOption && !selectedOption.disabled) {
+			return
+		}
+
+		const fallbackOption = nextOptions.find((option) => !option.disabled) ?? nextOptions[0]
+		if (fallbackOption && selectedGroupBy.value !== fallbackOption.value) {
+			selectedGroupBy.value = fallbackOption.value
+		}
+	},
+	{ immediate: true },
+)
+
+function unique<T>(values: T[]): T[] {
+	return Array.from(new Set(values))
+}
+
+function sortStrings<T extends string>(values: T[]): T[] {
+	return [...values].sort((left, right) => left.localeCompare(right))
+}
+
+function includesStat(stats: readonly string[], stat: string): boolean {
+	return stats.includes(stat)
+}
+
+function withBreakdownFields(
+	breakdown: AnalyticsBreakdownPreset,
+	filters: AnalyticsSelectedFilters,
+): {
+	views: Labrinth.Analytics.v3.ProjectViewsField[]
+	downloads: Labrinth.Analytics.v3.ProjectDownloadsField[]
+	playtime: Labrinth.Analytics.v3.ProjectPlaytimeField[]
+	revenue: Labrinth.Analytics.v3.ProjectRevenueField[]
+} {
+	const views: Labrinth.Analytics.v3.ProjectViewsField[] = ['project_id']
+	const downloads: Labrinth.Analytics.v3.ProjectDownloadsField[] = ['project_id']
+	const playtime: Labrinth.Analytics.v3.ProjectPlaytimeField[] = ['project_id']
+	const revenue: Labrinth.Analytics.v3.ProjectRevenueField[] = ['project_id']
+	const breakdownStats = getAnalyticsStatsForBreakdown(breakdown)
+	const enabledStats = getEnabledAnalyticsStatsForState(breakdown, filters)
+
+	switch (breakdown) {
+		case 'country':
+			if (includesStat(breakdownStats, 'views') && includesStat(enabledStats, 'views')) {
+				views.push('country')
+			}
+			if (includesStat(breakdownStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+				downloads.push('country')
+			}
+			if (includesStat(breakdownStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+				playtime.push('country')
+			}
+			break
+		case 'monetization':
+			if (includesStat(breakdownStats, 'views') && includesStat(enabledStats, 'views')) {
+				views.push('monetized')
+			}
+			if (includesStat(breakdownStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+				downloads.push('monetized')
+			}
+			break
+		case 'download_source':
+			if (includesStat(breakdownStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+				downloads.push('domain')
+			}
+			break
+		case 'download_reason':
+			if (includesStat(breakdownStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+				downloads.push('reason')
+			}
+			break
+		case 'version_id':
+			if (includesStat(breakdownStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+				downloads.push('version_id')
+			}
+			if (includesStat(breakdownStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+				playtime.push('version_id')
+			}
+			break
+		case 'loader':
+			if (includesStat(breakdownStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+				downloads.push('loader')
+			}
+			if (includesStat(breakdownStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+				playtime.push('loader')
+			}
+			break
+		case 'game_version':
+			if (includesStat(breakdownStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+				downloads.push('game_version')
+			}
+			if (includesStat(breakdownStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+				playtime.push('game_version')
+			}
+			break
+		default:
+			break
+	}
+
+	if (filters.country.length > 0) {
+		const filterStats = getAnalyticsStatsForFilterCategory('country')
+		if (includesStat(filterStats, 'views') && includesStat(enabledStats, 'views')) {
+			views.push('country')
+		}
+		if (includesStat(filterStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+			downloads.push('country')
+		}
+		if (includesStat(filterStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+			playtime.push('country')
+		}
+	}
+
+	if (filters.monetization.length > 0) {
+		const filterStats = getAnalyticsStatsForFilterCategory('monetization')
+		if (includesStat(filterStats, 'views') && includesStat(enabledStats, 'views')) {
+			views.push('monetized')
+		}
+		if (includesStat(filterStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+			downloads.push('monetized')
+		}
+	}
+
+	if (filters.download_source.length > 0) {
+		const filterStats = getAnalyticsStatsForFilterCategory('download_source')
+		if (includesStat(filterStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+			downloads.push('domain')
+		}
+	}
+
+	if (filters.download_reason.length > 0) {
+		const filterStats = getAnalyticsStatsForFilterCategory('download_reason')
+		if (includesStat(filterStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+			downloads.push('reason')
+		}
+	}
+
+	if (filters.version_id.length > 0) {
+		const filterStats = getAnalyticsStatsForFilterCategory('version_id')
+		if (includesStat(filterStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+			downloads.push('version_id')
+		}
+		if (includesStat(filterStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+			playtime.push('version_id')
+		}
+	}
+
+	if (filters.game_version.length > 0) {
+		const filterStats = getAnalyticsStatsForFilterCategory('game_version')
+		if (includesStat(filterStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+			downloads.push('game_version')
+		}
+		if (includesStat(filterStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+			playtime.push('game_version')
+		}
+	}
+
+	if (filters.loader_type.length > 0) {
+		const filterStats = getAnalyticsStatsForFilterCategory('loader_type')
+		if (includesStat(filterStats, 'downloads') && includesStat(enabledStats, 'downloads')) {
+			downloads.push('loader')
+		}
+		if (includesStat(filterStats, 'playtime') && includesStat(enabledStats, 'playtime')) {
+			playtime.push('loader')
+		}
+	}
+
+	return {
+		views: unique(views),
+		downloads: unique(downloads),
+		playtime: unique(playtime),
+		revenue: unique(revenue),
+	}
+}
+
+const fetchRequest = computed<Labrinth.Analytics.v3.FetchRequest>(() => {
+	const rawRange = selectedTimeRange.value
+	const rawStart =
+		selectedTimeframeMode.value === 'preset' &&
+		selectedTimeframe.value === 'all_time' &&
+		selectedGroupBy.value === 'year'
+			? getAllTimeYearGroupStart(rawRange.end)
+			: rawRange.start
+	const { start, end } = ensureMinimumTimeRange(rawStart, rawRange.end)
+
+	const groupByMs = getGroupByMinutes(selectedGroupBy.value) * 60 * 1000
+	const desiredSlices = Math.max(1, Math.floor((end.getTime() - start.getTime()) / groupByMs))
+	const resolutionSlices = Math.min(MAX_TIME_SLICES, desiredSlices)
+
+	const bucketBy = withBreakdownFields(selectedBreakdown.value, selectedFilters.value)
+	const filteredProjectIds = getProjectIdsMatchingStatusFilter(
+		selectedProjectIds.value,
+		projectStatusById.value,
+		selectedFilters.value,
+	)
+
+	return {
+		time_range: {
+			start: start.toISOString(),
+			end: end.toISOString(),
+			resolution: {
+				slices: resolutionSlices,
+			},
+		},
+		project_ids: sortStrings(filteredProjectIds),
+		return_metrics: {
+			project_views: {
+				bucket_by: sortStrings(bucketBy.views),
+			},
+			project_downloads: {
+				bucket_by: sortStrings(bucketBy.downloads),
+			},
+			project_playtime: {
+				bucket_by: sortStrings(bucketBy.playtime),
+			},
+			project_revenue: {
+				bucket_by: sortStrings(bucketBy.revenue),
+			},
+		},
+	}
+})
+
+watch(
+	fetchRequest,
+	(nextFetchRequest) => {
+		setFetchRequest(nextFetchRequest)
+	},
+	{ deep: true, immediate: true },
+)
+
+defineExpose({
+	fetchRequest,
+})
+</script>
+
+<style lang="scss" scoped>
+.checkbox-shadow {
+	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.08);
+}
+</style>
diff --git a/apps/frontend/src/components/analytics/query-builder/query-filter/QueryFilter.vue b/apps/frontend/src/components/analytics/query-builder/query-filter/QueryFilter.vue
new file mode 100644
index 0000000000..80c45e6d42
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/query-filter/QueryFilter.vue
@@ -0,0 +1,592 @@
+<template>
+	<DropdownFilterBar v-model="selectedFilterValue" :categories="filterCategories">
+		<template #search-actions="{ category, setSelectedValues }">
+			<div v-if="category.key === 'game_version'" class="flex w-40 justify-end">
+				<Chips
+					:model-value="gameVersionType"
+					:items="gameVersionTypeOptions"
+					:never-empty="true"
+					aria-label="Game version type"
+					size="small"
+					hide-checkmark-icon
+					@update:model-value="(type) => setGameVersionType(type, setSelectedValues)"
+				/>
+			</div>
+		</template>
+
+		<template #category-footer="{ category, setSelectedValues, closeMenu }">
+			<DownloadsThresholdInput
+				v-if="category.key === 'country'"
+				class="border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+				label="Countries above"
+				input-aria-label="Country downloads threshold"
+				:threshold="countryDownloadsThreshold"
+				input-width-class="w-16"
+				@update:threshold="
+					(threshold) => setCountryDownloadsThreshold(threshold, setSelectedValues)
+				"
+				@submit="
+					(event) =>
+						runDownloadsThresholdQuery(
+							applyCountryDownloadsThreshold,
+							setSelectedValues,
+							closeMenu,
+							event,
+						)
+				"
+			/>
+			<DownloadsThresholdInput
+				v-else-if="category.key === 'version_id'"
+				class="border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+				label="Project versions above"
+				input-aria-label="Project version downloads threshold"
+				:threshold="projectVersionDownloadsThreshold"
+				input-width-class="w-16"
+				@update:threshold="
+					(threshold) => setProjectVersionDownloadsThreshold(threshold, setSelectedValues)
+				"
+				@submit="
+					(event) =>
+						runDownloadsThresholdQuery(
+							applyProjectVersionDownloadsThreshold,
+							setSelectedValues,
+							closeMenu,
+							event,
+						)
+				"
+			/>
+			<DownloadsThresholdInput
+				v-else-if="category.key === 'game_version'"
+				class="border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+				label="Game Versions above"
+				input-aria-label="Game version downloads threshold"
+				:threshold="gameVersionDownloadsThreshold"
+				input-width-class="w-16"
+				@update:threshold="
+					(threshold) => setGameVersionDownloadsThreshold(threshold, setSelectedValues)
+				"
+				@submit="
+					(event) =>
+						runDownloadsThresholdQuery(
+							applyGameVersionDownloadsThreshold,
+							setSelectedValues,
+							closeMenu,
+							event,
+						)
+				"
+			/>
+		</template>
+
+		<template #preview-footer="{ category, setSelectedValues, closeMenu }">
+			<DownloadsThresholdInput
+				v-if="category.key === 'country'"
+				class="border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+				label="Countries above"
+				input-aria-label="Country downloads threshold"
+				:threshold="countryDownloadsThreshold"
+				input-width-class="w-16"
+				@update:threshold="
+					(threshold) => setCountryDownloadsThreshold(threshold, setSelectedValues)
+				"
+				@submit="
+					(event) =>
+						runDownloadsThresholdQuery(
+							applyCountryDownloadsThreshold,
+							setSelectedValues,
+							closeMenu,
+							event,
+						)
+				"
+			/>
+			<DownloadsThresholdInput
+				v-else-if="category.key === 'version_id'"
+				class="border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+				label="Project versions above"
+				input-aria-label="Project version downloads threshold"
+				:threshold="projectVersionDownloadsThreshold"
+				input-width-class="w-16"
+				@update:threshold="
+					(threshold) => setProjectVersionDownloadsThreshold(threshold, setSelectedValues)
+				"
+				@submit="
+					(event) =>
+						runDownloadsThresholdQuery(
+							applyProjectVersionDownloadsThreshold,
+							setSelectedValues,
+							closeMenu,
+							event,
+						)
+				"
+			/>
+			<DownloadsThresholdInput
+				v-else-if="category.key === 'game_version'"
+				class="border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+				label="Game Versions above"
+				input-aria-label="Game version downloads threshold"
+				:threshold="gameVersionDownloadsThreshold"
+				input-width-class="w-16"
+				@update:threshold="
+					(threshold) => setGameVersionDownloadsThreshold(threshold, setSelectedValues)
+				"
+				@submit="
+					(event) =>
+						runDownloadsThresholdQuery(
+							applyGameVersionDownloadsThreshold,
+							setSelectedValues,
+							closeMenu,
+							event,
+						)
+				"
+			/>
+		</template>
+	</DropdownFilterBar>
+</template>
+
+<script setup lang="ts">
+import {
+	Chips,
+	DropdownFilterBar,
+	type DropdownFilterBarCategory,
+	type DropdownFilterBarOption,
+} from '@modrinth/ui'
+
+import { useFormattedCountries } from '@/composables/country.ts'
+import { useGeneratedState } from '~/composables/generated'
+import {
+	type AnalyticsQueryFilterCategory,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+
+import DownloadsThresholdInput from '../DownloadsThresholdInput.vue'
+import {
+	cloneSelectedFilters,
+	FILTER_VALUE_CATEGORIES,
+	getAnalyticsFilterCategoryForBreakdown,
+	getOptionsWithSelectedValues,
+	getVisibleAnalyticsFilterCategoriesForState,
+	normalizeSelectedValues as normalizeSelectedFilterValues,
+} from './queryFilter'
+
+type AnalyticsFilterValueCategory = Exclude<AnalyticsQueryFilterCategory, 'project'>
+type SetDropdownFilterValues = (values: string[]) => void
+type ApplyDownloadsThreshold = (setSelectedValues: SetDropdownFilterValues) => void
+type CloseDownloadsThresholdMenu = (event?: Event) => void
+
+const {
+	availableProjectStatuses,
+	filterOptions,
+	projectVersionDownloadsById,
+	gameVersionDownloadsByVersion,
+	countryDownloadsByCode,
+	selectedBreakdown,
+	selectedFilters,
+	refreshAnalyticsQuery,
+	getVersionDisplayName,
+	getVersionPublishedDate,
+} = injectAnalyticsDashboardContext()
+const formattedCountries = useFormattedCountries()
+const generatedState = useGeneratedState()
+
+const gameVersionType = ref<'release' | 'all'>('release')
+const countryDownloadsThreshold = ref<number | null>(null)
+const projectVersionDownloadsThreshold = ref<number | null>(null)
+const gameVersionDownloadsThreshold = ref<number | null>(null)
+const gameVersionTypeOptions: Array<'release' | 'all'> = ['release', 'all']
+const filterValueCategoryKeys = new Set<string>(FILTER_VALUE_CATEGORIES)
+const projectStatusFilterOptions = computed<DropdownFilterBarOption[]>(() =>
+	availableProjectStatuses.value.map((status) => ({
+		value: status,
+		label: getProjectStatusFilterOptionLabel(status),
+	})),
+)
+
+const selectedFilterValue = computed<Record<string, string[]>>({
+	get: () => selectedFilters.value,
+	set: (nextValue) => {
+		const nextFilters = cloneSelectedFilters(selectedFilters.value)
+
+		for (const [categoryKey, values] of Object.entries(nextValue)) {
+			if (!isAnalyticsFilterValueCategory(categoryKey)) {
+				continue
+			}
+
+			nextFilters[categoryKey] = normalizeSelectedFilterValues(categoryKey, values, [])
+		}
+
+		const breakdownFilterCategory = getAnalyticsFilterCategoryForBreakdown(selectedBreakdown.value)
+		if (breakdownFilterCategory && nextFilters[breakdownFilterCategory].length > 0) {
+			selectedBreakdown.value = 'none'
+		}
+
+		selectedFilters.value = nextFilters
+	},
+})
+
+const filterCategories = computed<DropdownFilterBarCategory[]>(() => {
+	const visibleCategoryKeys = new Set(
+		getVisibleAnalyticsFilterCategoriesForState(selectedBreakdown.value, selectedFilters.value),
+	)
+	const categories: DropdownFilterBarCategory[] = [
+		{
+			key: 'project_status',
+			label: 'Project status',
+			options: withSelectedOptions('project_status', projectStatusFilterOptions.value),
+		},
+		{
+			key: 'country',
+			label: 'Country',
+			searchable: countryFilterOptions.value.length > 6,
+			searchPlaceholder: 'Search countries...',
+			options: withSelectedOptions('country', countryFilterOptions.value),
+			submenuClass: 'w-[324px]',
+		},
+		{
+			key: 'monetization',
+			label: 'Monetization',
+			options: withSelectedOptions('monetization', [
+				{ value: 'monetized', label: 'Monetized' },
+				{ value: 'unmonetized', label: 'Unmonetized' },
+			]),
+		},
+		{
+			key: 'download_source',
+			label: 'Download Source',
+			searchable: downloadSourceFilterOptions.value.length > 6,
+			searchPlaceholder: 'Search download sources...',
+			options: withSelectedOptions('download_source', downloadSourceFilterOptions.value),
+		},
+		{
+			key: 'download_reason',
+			label: 'Download Type',
+			options: withSelectedOptions('download_reason', downloadReasonFilterOptions.value),
+		},
+		{
+			key: 'version_id',
+			label: 'Project version',
+			searchable: versionFilterOptions.value.length > 6,
+			searchPlaceholder: 'Search project versions...',
+			submenuClass: 'w-[368px]',
+			options: withSelectedOptions('version_id', versionFilterOptions.value),
+		},
+		{
+			key: 'game_version',
+			label: 'Game Version',
+			searchable: true,
+			searchPlaceholder: 'Search versions...',
+			submenuClass: 'w-[360px]',
+			options: withSelectedOptions('game_version', gameVersionFilterOptions.value),
+		},
+		{
+			key: 'loader_type',
+			label: 'Loader Type',
+			options: withSelectedOptions('loader_type', loaderTypeFilterOptions.value),
+		},
+	]
+
+	return categories.filter((category) =>
+		visibleCategoryKeys.has(category.key as AnalyticsFilterValueCategory),
+	)
+})
+
+const countryLabelsByCode = computed(
+	() =>
+		new Map(
+			formattedCountries.value.map(
+				(country) => [country.value.toUpperCase(), country.label] as const,
+			),
+		),
+)
+
+const countryFilterOptions = computed<DropdownFilterBarOption[]>(() =>
+	filterOptions.value.countries
+		.map((countryCode) => ({
+			value: countryCode,
+			label: getCountryFilterOptionLabel(countryCode),
+			searchTerms: [countryCode],
+		}))
+		.sort((left, right) => left.label.localeCompare(right.label)),
+)
+
+const gameVersionReleaseDatesByVersion = computed(
+	() =>
+		new Map(
+			generatedState.value.gameVersions.map(
+				(gameVersion) => [gameVersion.version, gameVersion.date] as const,
+			),
+		),
+)
+const gameVersionTypesByVersion = computed(
+	() =>
+		new Map(
+			generatedState.value.gameVersions.map(
+				(gameVersion) => [gameVersion.version, gameVersion.version_type] as const,
+			),
+		),
+)
+
+const downloadSourceFilterOptions = computed<DropdownFilterBarOption[]>(() =>
+	filterOptions.value.downloadSources
+		.map((downloadSource) => ({
+			value: downloadSource,
+			label: downloadSource,
+		}))
+		.sort((left, right) => left.label.localeCompare(right.label)),
+)
+
+const downloadReasonFilterOptions = computed<DropdownFilterBarOption[]>(() =>
+	filterOptions.value.downloadReasons.map((downloadReason) => ({
+		value: downloadReason,
+		label: getDownloadReasonFilterOptionLabel(downloadReason),
+	})),
+)
+
+const versionFilterOptions = computed<DropdownFilterBarOption[]>(() =>
+	filterOptions.value.versionIds
+		.map((versionId) => ({
+			value: versionId,
+			label: getVersionDisplayName(versionId),
+			searchTerms: [versionId],
+		}))
+		.sort((left, right) =>
+			compareOptionalDateStringsDescending(
+				getVersionPublishedDate(left.value),
+				getVersionPublishedDate(right.value),
+				left.label,
+				right.label,
+			),
+		),
+)
+
+const gameVersionFilterOptions = computed<DropdownFilterBarOption[]>(() =>
+	filterOptions.value.gameVersions
+		.filter((gameVersion) => {
+			const versionType = gameVersionTypesByVersion.value.get(gameVersion)
+			return (
+				gameVersionType.value === 'all' || versionType === undefined || versionType === 'release'
+			)
+		})
+		.map((gameVersion) => ({
+			value: gameVersion,
+			label: gameVersion,
+		}))
+		.sort((left, right) =>
+			compareOptionalDateStringsDescending(
+				gameVersionReleaseDatesByVersion.value.get(left.value),
+				gameVersionReleaseDatesByVersion.value.get(right.value),
+				left.label,
+				right.label,
+			),
+		),
+)
+
+const loaderTypeFilterOptions = computed<DropdownFilterBarOption[]>(() =>
+	filterOptions.value.loaderTypes
+		.map((loaderType) => ({
+			value: loaderType,
+			label: getLoaderTypeFilterOptionLabel(loaderType),
+			searchTerms: [loaderType],
+		}))
+		.sort((left, right) => left.label.localeCompare(right.label)),
+)
+
+function isAnalyticsFilterValueCategory(
+	categoryKey: string,
+): categoryKey is AnalyticsFilterValueCategory {
+	return filterValueCategoryKeys.has(categoryKey)
+}
+
+function withSelectedOptions(
+	categoryKey: AnalyticsFilterValueCategory,
+	options: DropdownFilterBarOption[],
+): DropdownFilterBarOption[] {
+	return getOptionsWithSelectedValues(
+		options,
+		selectedFilters.value[categoryKey],
+		getMissingSelectedOptionLabel(categoryKey),
+	)
+}
+
+function getMissingSelectedOptionLabel(
+	categoryKey: AnalyticsFilterValueCategory,
+): ((value: string) => string) | undefined {
+	if (categoryKey === 'country') {
+		return getCountryFilterOptionLabel
+	}
+	if (categoryKey === 'version_id') {
+		return getVersionDisplayName
+	}
+	if (categoryKey === 'download_reason') {
+		return getDownloadReasonFilterOptionLabel
+	}
+	if (categoryKey === 'loader_type') {
+		return getLoaderTypeFilterOptionLabel
+	}
+	return undefined
+}
+
+function getCountryFilterOptionLabel(countryCode: string): string {
+	const normalizedCode = countryCode.trim().toUpperCase()
+	if (normalizedCode === 'XX') {
+		return 'Other'
+	}
+
+	return countryLabelsByCode.value.get(normalizedCode) ?? countryCode
+}
+
+function getProjectStatusFilterOptionLabel(status: string): string {
+	const normalizedStatus = status.trim()
+	if (normalizedStatus.length === 0) {
+		return status
+	}
+
+	return `${normalizedStatus.charAt(0).toUpperCase()}${normalizedStatus.slice(1)}`
+}
+
+function getLoaderTypeFilterOptionLabel(loaderType: string): string {
+	const normalizedLoaderType = loaderType.trim()
+	if (normalizedLoaderType.length === 0) {
+		return loaderType
+	}
+
+	return `${normalizedLoaderType.charAt(0).toUpperCase()}${normalizedLoaderType.slice(1)}`
+}
+
+function getDownloadReasonFilterOptionLabel(reason: string): string {
+	switch (reason) {
+		case 'standalone':
+			return 'Standalone'
+		case 'dependency':
+			return 'Dependency'
+		case 'modpack':
+			return 'Modpack'
+		default:
+			return reason
+	}
+}
+
+function getDateTimestamp(date: string | undefined): number | undefined {
+	if (!date) {
+		return undefined
+	}
+
+	const timestamp = new Date(date).getTime()
+	return Number.isFinite(timestamp) ? timestamp : undefined
+}
+
+function compareOptionalDateStringsDescending(
+	leftDate: string | undefined,
+	rightDate: string | undefined,
+	leftFallback: string,
+	rightFallback: string,
+): number {
+	const leftTimestamp = getDateTimestamp(leftDate)
+	const rightTimestamp = getDateTimestamp(rightDate)
+
+	if (leftTimestamp !== undefined && rightTimestamp !== undefined) {
+		return rightTimestamp - leftTimestamp
+	}
+	if (leftTimestamp !== undefined) {
+		return -1
+	}
+	if (rightTimestamp !== undefined) {
+		return 1
+	}
+
+	return leftFallback.localeCompare(rightFallback)
+}
+
+function applyGameVersionDownloadsThreshold(setSelectedValues: SetDropdownFilterValues) {
+	const threshold = gameVersionDownloadsThreshold.value
+	if (threshold === null) {
+		return
+	}
+
+	setSelectedValues(
+		gameVersionFilterOptions.value
+			.filter((gameVersion) => {
+				return (gameVersionDownloadsByVersion.value.get(gameVersion.value) ?? 0) >= threshold
+			})
+			.map((gameVersion) => gameVersion.value),
+	)
+}
+
+function applyCountryDownloadsThreshold(setSelectedValues: SetDropdownFilterValues) {
+	const threshold = countryDownloadsThreshold.value
+	if (threshold === null) {
+		return
+	}
+
+	setSelectedValues(
+		countryFilterOptions.value
+			.filter((country) => {
+				return (
+					(countryDownloadsByCode.value.get(country.value.trim().toUpperCase()) ?? 0) >= threshold
+				)
+			})
+			.map((country) => country.value),
+	)
+}
+
+function applyProjectVersionDownloadsThreshold(setSelectedValues: SetDropdownFilterValues) {
+	const threshold = projectVersionDownloadsThreshold.value
+	if (threshold === null) {
+		return
+	}
+
+	setSelectedValues(
+		versionFilterOptions.value
+			.filter((version) => {
+				return (projectVersionDownloadsById.value.get(version.value) ?? 0) >= threshold
+			})
+			.map((version) => version.value),
+	)
+}
+
+function setCountryDownloadsThreshold(
+	threshold: number | null,
+	setSelectedValues: SetDropdownFilterValues,
+) {
+	countryDownloadsThreshold.value = threshold
+	applyCountryDownloadsThreshold(setSelectedValues)
+}
+
+function setProjectVersionDownloadsThreshold(
+	threshold: number | null,
+	setSelectedValues: SetDropdownFilterValues,
+) {
+	projectVersionDownloadsThreshold.value = threshold
+	applyProjectVersionDownloadsThreshold(setSelectedValues)
+}
+
+function setGameVersionDownloadsThreshold(
+	threshold: number | null,
+	setSelectedValues: SetDropdownFilterValues,
+) {
+	gameVersionDownloadsThreshold.value = threshold
+	applyGameVersionDownloadsThreshold(setSelectedValues)
+}
+
+async function runDownloadsThresholdQuery(
+	applyDownloadsThreshold: ApplyDownloadsThreshold,
+	setSelectedValues: SetDropdownFilterValues,
+	closeMenu: CloseDownloadsThresholdMenu,
+	event?: KeyboardEvent,
+) {
+	applyDownloadsThreshold(setSelectedValues)
+	closeMenu(event)
+	await nextTick()
+	await refreshAnalyticsQuery()
+}
+
+function setGameVersionType(
+	type: 'release' | 'all' | null | undefined,
+	setSelectedValues: SetDropdownFilterValues,
+) {
+	if (type === null || type === undefined) {
+		return
+	}
+
+	gameVersionType.value = type
+	applyGameVersionDownloadsThreshold(setSelectedValues)
+}
+</script>
diff --git a/apps/frontend/src/components/analytics/query-builder/query-filter/queryFilter.ts b/apps/frontend/src/components/analytics/query-builder/query-filter/queryFilter.ts
new file mode 100644
index 0000000000..a2ac99e09a
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/query-filter/queryFilter.ts
@@ -0,0 +1,331 @@
+import type {
+	AnalyticsBreakdownPreset,
+	AnalyticsDashboardStat,
+	AnalyticsQueryFilterCategory,
+	AnalyticsSelectedFilters,
+} from '~/providers/analytics/analytics'
+
+export type AnalyticsDashboardDimension =
+	| 'project'
+	| 'project_status'
+	| 'version_id'
+	| 'country'
+	| 'monetization'
+	| 'download_source'
+	| 'download_reason'
+	| 'game_version'
+	| 'loader_type'
+
+export const ALL_FILTER_VALUE = '__all__'
+export const FILTER_VALUE_CATEGORIES: Exclude<AnalyticsQueryFilterCategory, 'project'>[] = [
+	'project_status',
+	'country',
+	'monetization',
+	'download_source',
+	'download_reason',
+	'version_id',
+	'game_version',
+	'loader_type',
+]
+
+const ANALYTICS_DASHBOARD_STAT_ORDER: AnalyticsDashboardStat[] = [
+	'views',
+	'downloads',
+	'revenue',
+	'playtime',
+]
+
+const ANALYTICS_STATS_BY_DIMENSION: Record<
+	AnalyticsDashboardDimension,
+	readonly AnalyticsDashboardStat[]
+> = {
+	project: ANALYTICS_DASHBOARD_STAT_ORDER,
+	version_id: ['downloads', 'playtime'],
+	country: ['views', 'downloads', 'playtime'],
+	monetization: ['views', 'downloads'],
+	download_source: ['downloads'],
+	download_reason: ['downloads'],
+	game_version: ['downloads', 'playtime'],
+	loader_type: ['downloads', 'playtime'],
+	project_status: ANALYTICS_DASHBOARD_STAT_ORDER,
+}
+
+const ANALYTICS_DIMENSION_BY_BREAKDOWN: Record<
+	AnalyticsBreakdownPreset,
+	AnalyticsDashboardDimension
+> = {
+	none: 'project',
+	country: 'country',
+	monetization: 'monetization',
+	download_source: 'download_source',
+	download_reason: 'download_reason',
+	version_id: 'version_id',
+	loader: 'loader_type',
+	game_version: 'game_version',
+}
+
+const ANALYTICS_DIMENSION_BY_FILTER_CATEGORY: Record<
+	Exclude<AnalyticsQueryFilterCategory, 'project'>,
+	AnalyticsDashboardDimension
+> = {
+	project_status: 'project_status',
+	country: 'country',
+	monetization: 'monetization',
+	download_source: 'download_source',
+	download_reason: 'download_reason',
+	version_id: 'version_id',
+	game_version: 'game_version',
+	loader_type: 'loader_type',
+}
+
+const ANALYTICS_FILTER_CATEGORY_BY_BREAKDOWN: Record<
+	AnalyticsBreakdownPreset,
+	Exclude<AnalyticsQueryFilterCategory, 'project'> | null
+> = {
+	none: null,
+	country: 'country',
+	monetization: 'monetization',
+	download_source: 'download_source',
+	download_reason: 'download_reason',
+	version_id: 'version_id',
+	loader: 'loader_type',
+	game_version: 'game_version',
+}
+
+export type FilterOption = {
+	value: string
+	label: string
+	searchTerms?: string[]
+}
+
+function intersectAnalyticsStats(
+	left: readonly AnalyticsDashboardStat[],
+	right: readonly AnalyticsDashboardStat[],
+): AnalyticsDashboardStat[] {
+	const rightStats = new Set(right)
+	return left.filter((stat) => rightStats.has(stat))
+}
+
+function haveAnalyticsStatOverlap(
+	left: readonly AnalyticsDashboardStat[],
+	right: readonly AnalyticsDashboardStat[],
+): boolean {
+	return left.some((stat) => right.includes(stat))
+}
+
+export function getAnalyticsStatsForDimension(
+	dimension: AnalyticsDashboardDimension,
+): readonly AnalyticsDashboardStat[] {
+	return ANALYTICS_STATS_BY_DIMENSION[dimension]
+}
+
+export function getAnalyticsStatsForBreakdown(
+	breakdown: AnalyticsBreakdownPreset,
+): readonly AnalyticsDashboardStat[] {
+	return getAnalyticsStatsForDimension(ANALYTICS_DIMENSION_BY_BREAKDOWN[breakdown])
+}
+
+export function getAnalyticsStatsForFilterCategory(
+	category: AnalyticsQueryFilterCategory,
+): readonly AnalyticsDashboardStat[] {
+	if (category === 'project') {
+		return ANALYTICS_DASHBOARD_STAT_ORDER
+	}
+
+	return getAnalyticsStatsForDimension(ANALYTICS_DIMENSION_BY_FILTER_CATEGORY[category])
+}
+
+export function getAnalyticsFilterCategoryForBreakdown(
+	breakdown: AnalyticsBreakdownPreset,
+): Exclude<AnalyticsQueryFilterCategory, 'project'> | null {
+	return ANALYTICS_FILTER_CATEGORY_BY_BREAKDOWN[breakdown]
+}
+
+function getAnalyticsStatsForFilterScope(
+	breakdown: AnalyticsBreakdownPreset,
+	filters: AnalyticsSelectedFilters,
+	ignoredCategory?: AnalyticsQueryFilterCategory,
+): readonly AnalyticsDashboardStat[] {
+	let stats = [...getAnalyticsStatsForBreakdown(breakdown)]
+
+	for (const category of FILTER_VALUE_CATEGORIES) {
+		if (category === ignoredCategory || filters[category].length === 0) {
+			continue
+		}
+
+		stats = intersectAnalyticsStats(stats, getAnalyticsStatsForFilterCategory(category))
+	}
+
+	return stats
+}
+
+export function getEnabledAnalyticsStatsForState(
+	breakdown: AnalyticsBreakdownPreset,
+	filters: AnalyticsSelectedFilters,
+): readonly AnalyticsDashboardStat[] {
+	return getAnalyticsStatsForFilterScope(breakdown, filters)
+}
+
+export function getVisibleAnalyticsFilterCategoriesForState(
+	breakdown: AnalyticsBreakdownPreset,
+	filters: AnalyticsSelectedFilters,
+): readonly Exclude<AnalyticsQueryFilterCategory, 'project'>[] {
+	return FILTER_VALUE_CATEGORIES.filter((category) =>
+		haveAnalyticsStatOverlap(
+			getAnalyticsStatsForFilterScope(breakdown, filters, category),
+			getAnalyticsStatsForFilterCategory(category),
+		),
+	)
+}
+
+export function sanitizeAnalyticsSelectedFilters(
+	breakdown: AnalyticsBreakdownPreset,
+	filters: AnalyticsSelectedFilters,
+): AnalyticsSelectedFilters {
+	const nextFilters = cloneSelectedFilters(filters)
+	let availableStats = [...getAnalyticsStatsForBreakdown(breakdown)]
+
+	for (const category of FILTER_VALUE_CATEGORIES) {
+		if (filters[category].length === 0) {
+			continue
+		}
+
+		const categoryStats = getAnalyticsStatsForFilterCategory(category)
+		if (!haveAnalyticsStatOverlap(availableStats, categoryStats)) {
+			nextFilters[category] = []
+			continue
+		}
+
+		availableStats = intersectAnalyticsStats(availableStats, categoryStats)
+	}
+
+	return nextFilters
+}
+
+export function cloneSelectedFilters(filters: AnalyticsSelectedFilters): AnalyticsSelectedFilters {
+	return {
+		project: [...filters.project],
+		project_status: [...filters.project_status],
+		country: [...filters.country],
+		monetization: [...filters.monetization],
+		download_source: [...filters.download_source],
+		download_reason: [...filters.download_reason],
+		version_id: [...filters.version_id],
+		game_version: [...filters.game_version],
+		loader_type: [...filters.loader_type],
+	}
+}
+
+export function areStringArraysEqual(left: string[], right: string[]): boolean {
+	if (left.length !== right.length) {
+		return false
+	}
+
+	for (let index = 0; index < left.length; index += 1) {
+		if (left[index] !== right[index]) {
+			return false
+		}
+	}
+
+	return true
+}
+
+export function areSelectedFiltersEqual(
+	left: AnalyticsSelectedFilters,
+	right: AnalyticsSelectedFilters,
+): boolean {
+	if (!areStringArraysEqual(left.project, right.project)) {
+		return false
+	}
+
+	for (const categoryKey of FILTER_VALUE_CATEGORIES) {
+		if (!areStringArraysEqual(left[categoryKey], right[categoryKey])) {
+			return false
+		}
+	}
+
+	return true
+}
+
+export function getOptionsWithSelectedValues(
+	options: FilterOption[],
+	selectedValues: string[],
+	getMissingSelectedOptionLabel: (value: string) => string = (value) => value,
+): FilterOption[] {
+	const knownValues = new Set(options.map((option) => option.value))
+	const missingSelectedOptions = selectedValues
+		.filter((value) => !knownValues.has(value))
+		.map((value) => ({
+			value,
+			label: getMissingSelectedOptionLabel(value),
+		}))
+
+	return [...options, ...missingSelectedOptions]
+}
+
+export function normalizeSelectedValues(
+	categoryKey: AnalyticsQueryFilterCategory,
+	values: string[],
+	projectIds: string[],
+): string[] {
+	const uniqueValues = Array.from(new Set(values))
+
+	if (categoryKey === 'project') {
+		if (uniqueValues.includes(ALL_FILTER_VALUE)) {
+			return projectIds
+		}
+
+		const allProjectIds = new Set(projectIds)
+		const selectedProjects = uniqueValues.filter((value) => allProjectIds.has(value))
+
+		return selectedProjects.length > 0 ? selectedProjects : projectIds
+	}
+
+	if (uniqueValues.includes(ALL_FILTER_VALUE) || uniqueValues.length === 0) {
+		return []
+	}
+
+	const selectedValues = uniqueValues.filter((value) => value !== ALL_FILTER_VALUE)
+	if (categoryKey === 'project_status') {
+		return selectedValues
+			.map((value) => value.trim().toLowerCase())
+			.filter(isProjectStatusFilterValue)
+	}
+	if (categoryKey === 'loader_type') {
+		return Array.from(
+			new Set(
+				selectedValues
+					.map((value) => value.trim().toLowerCase())
+					.filter((value) => value.length > 0),
+			),
+		)
+	}
+
+	return selectedValues
+}
+
+export const PROJECT_STATUS_FILTER_VALUES = [
+	'approved',
+	'archived',
+	'rejected',
+	'draft',
+	'unlisted',
+	'withheld',
+	'private',
+	'other',
+] as const
+
+export type ProjectStatusFilterValue = (typeof PROJECT_STATUS_FILTER_VALUES)[number]
+
+const projectStatusFilterValueSet = new Set<string>(PROJECT_STATUS_FILTER_VALUES)
+
+export function isProjectStatusFilterValue(value: string): value is ProjectStatusFilterValue {
+	return projectStatusFilterValueSet.has(value)
+}
+
+export function getProjectStatusFilterValue(
+	status: string | null | undefined,
+): ProjectStatusFilterValue {
+	const normalizedStatus = status?.trim().toLowerCase() ?? ''
+	return isProjectStatusFilterValue(normalizedStatus) ? normalizedStatus : 'other'
+}
diff --git a/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomRangeTimeframe.vue b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomRangeTimeframe.vue
new file mode 100644
index 0000000000..e5383d8640
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomRangeTimeframe.vue
@@ -0,0 +1,138 @@
+<template>
+	<div
+		class="flex flex-col gap-2.5 rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4 pt-1"
+	>
+		<DatePicker
+			v-model="pickerRange"
+			mode="range"
+			:show-months="2"
+			:clearable="false"
+			:default-view-date="startDate"
+			:max-date="todayInputValue"
+			show-today
+			calendar-only
+			wrapper-class="w-full"
+			calendar-class="!border-none !p-0 !pt-3"
+		/>
+		<div class="flex items-center justify-between pl-1">
+			<div class="flex gap-1.5">
+				<span v-if="formattedRange" class="text-sm font-medium text-primary">Selected:</span>
+				<span v-if="formattedRange" class="text-sm font-normal text-primary">{{
+					formattedRange
+				}}</span>
+			</div>
+			<div class="flex items-center gap-2">
+				<ButtonStyled type="outlined">
+					<button type="button" @click="$emit('cancel', $event)">Cancel</button>
+				</ButtonStyled>
+				<ButtonStyled color="brand">
+					<button type="button" @click="$emit('apply', $event)">Apply</button>
+				</ButtonStyled>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ButtonStyled, DatePicker } from '@modrinth/ui'
+
+type DatePickerValue = string | Date | null | undefined
+
+defineEmits<{
+	cancel: [event: MouseEvent]
+	apply: [event: MouseEvent]
+}>()
+
+const startDate = defineModel<string>('startDate', { required: true })
+const endDate = defineModel<string>('endDate', { required: true })
+const pickerRange = ref<DatePickerValue[]>([startDate.value, endDate.value])
+
+const todayInputValue = computed(() => getDateInputValue(new Date()))
+
+const rangeFormatter = new Intl.DateTimeFormat(undefined, {
+	month: 'short',
+	day: 'numeric',
+	year: 'numeric',
+})
+
+function formatDateString(value: string): string {
+	const parsed = new Date(`${value}T00:00:00`)
+	if (Number.isNaN(parsed.getTime())) return value
+	return rangeFormatter.format(parsed)
+}
+
+const formattedRange = computed(() => {
+	if (!startDate.value || !endDate.value) return ''
+	if (startDate.value === endDate.value) return formatDateString(startDate.value)
+	return `${formatDateString(startDate.value)} – ${formatDateString(endDate.value)}`
+})
+
+function getDateInputValue(date: Date): string {
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+	return `${year}-${month}-${day}`
+}
+
+function isValidDateInputValue(value: string): boolean {
+	if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+		return false
+	}
+
+	const parsedDate = new Date(`${value}T00:00:00`)
+	return !Number.isNaN(parsedDate.getTime()) && getDateInputValue(parsedDate) === value
+}
+
+function getDatePickerValueString(value: DatePickerValue): string | null {
+	if (typeof value === 'string') {
+		return isValidDateInputValue(value) ? value : null
+	}
+	if (value instanceof Date && !Number.isNaN(value.getTime())) {
+		return getDateInputValue(value)
+	}
+
+	return null
+}
+
+function getOrderedRange(values: DatePickerValue[]): [string, string] | null {
+	const dates = values
+		.map(getDatePickerValueString)
+		.filter((value): value is string => Boolean(value))
+	if (dates.length < 2) {
+		return null
+	}
+
+	const firstDate = dates[0]
+	const secondDate = dates[1]
+	if (!firstDate || !secondDate) {
+		return null
+	}
+
+	return firstDate <= secondDate ? [firstDate, secondDate] : [secondDate, firstDate]
+}
+
+function syncPickerRangeFromModels() {
+	if (
+		pickerRange.value.length === 2 &&
+		pickerRange.value[0] === startDate.value &&
+		pickerRange.value[1] === endDate.value
+	) {
+		return
+	}
+
+	pickerRange.value = [startDate.value, endDate.value]
+}
+
+watch([startDate, endDate], syncPickerRangeFromModels)
+
+watch(pickerRange, (nextRange) => {
+	const orderedRange = getOrderedRange(nextRange)
+	if (!orderedRange) {
+		return
+	}
+
+	const [nextStartDate, nextEndDate] = orderedRange
+	startDate.value = nextStartDate
+	endDate.value = nextEndDate
+})
+</script>
diff --git a/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomTimeframe.vue b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomTimeframe.vue
new file mode 100644
index 0000000000..70f92cfb7a
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomTimeframe.vue
@@ -0,0 +1,129 @@
+<template>
+	<div class="px-3 py-2">
+		<div
+			class="flex items-center gap-2.5 rounded-xl px-3 py-2 transition-colors"
+			:class="active ? 'bg-highlight-green' : ''"
+		>
+			<span class="shrink-0 text-sm font-semibold" :class="active ? 'text-green' : 'text-primary'">
+				In the last
+			</span>
+			<div
+				class="flex h-8 shrink-0 items-center overflow-hidden rounded-lg border border-solid border-surface-5 bg-surface-3"
+			>
+				<button
+					type="button"
+					class="flex h-8 w-8 cursor-pointer items-center justify-center border-0 border-r border-solid border-surface-5 bg-transparent p-0 text-secondary transition-colors hover:text-contrast"
+					aria-label="Decrease timeframe amount"
+					@click.stop="decrementAmount"
+				>
+					<MinusIcon class="size-4" />
+				</button>
+				<input
+					v-model="amountInput"
+					type="number"
+					min="1"
+					step="1"
+					class="h-8 w-12 border-0 bg-transparent px-1 text-center text-sm font-semibold text-primary outline-none ring-0 focus:outline-none focus-visible:shadow-none"
+					aria-label="Timeframe amount"
+					@focus="activate"
+					@input="handleAmountInput"
+					@blur="commitAmountInput"
+					@keydown.enter.prevent.stop="submitAmountInput"
+				/>
+				<button
+					type="button"
+					class="flex h-8 w-8 cursor-pointer items-center justify-center border-0 border-l border-solid border-surface-5 bg-transparent p-0 text-secondary transition-colors hover:text-contrast"
+					aria-label="Increase timeframe amount"
+					@click.stop="incrementAmount"
+				>
+					<PlusIcon class="size-4" />
+				</button>
+			</div>
+			<select
+				v-model="unit"
+				class="h-8 rounded-lg border border-solid border-surface-5 bg-surface-3 px-2 text-sm font-semibold text-primary outline-none transition-[box-shadow,color] focus:text-contrast focus:ring-4 focus:ring-brand-shadow"
+				aria-label="Timeframe unit"
+				@change="activate"
+			>
+				<option v-for="option in unitOptions" :key="option.value" :value="option.value">
+					{{ option.label }}
+				</option>
+			</select>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { MinusIcon, PlusIcon } from '@modrinth/assets'
+
+import type { AnalyticsLastTimeframeUnit } from '~/providers/analytics/analytics'
+
+defineProps<{
+	active?: boolean
+	unitOptions: Array<{
+		value: AnalyticsLastTimeframeUnit
+		label: string
+	}>
+}>()
+
+const amount = defineModel<number>('amount', { required: true })
+const unit = defineModel<AnalyticsLastTimeframeUnit>('unit', { required: true })
+const amountInput = ref(String(amount.value))
+
+const emit = defineEmits<{
+	activate: []
+	submit: [event: KeyboardEvent]
+}>()
+
+function activate() {
+	emit('activate')
+}
+
+watch(amount, (nextAmount) => {
+	if (amountInput.value === '') {
+		return
+	}
+
+	amountInput.value = String(nextAmount)
+})
+
+function parseAmountInput() {
+	const nextAmount = Number(amountInput.value)
+	return Number.isFinite(nextAmount) ? Math.max(1, Math.floor(nextAmount)) : null
+}
+
+function handleAmountInput() {
+	const nextAmount = parseAmountInput()
+	if (nextAmount !== null && String(nextAmount) === amountInput.value) {
+		amount.value = nextAmount
+	}
+
+	activate()
+}
+
+function commitAmountInput() {
+	const nextAmount = parseAmountInput() ?? 1
+	amount.value = nextAmount
+	amountInput.value = String(nextAmount)
+	activate()
+}
+
+function submitAmountInput(event: KeyboardEvent) {
+	commitAmountInput()
+	emit('submit', event)
+}
+
+function incrementAmount() {
+	commitAmountInput()
+	amount.value += 1
+	amountInput.value = String(amount.value)
+	activate()
+}
+
+function decrementAmount() {
+	commitAmountInput()
+	amount.value = Math.max(1, amount.value - 1)
+	amountInput.value = String(amount.value)
+	activate()
+}
+</script>
diff --git a/apps/frontend/src/components/analytics/query-builder/timeframe-picker/TimeFramePicker.vue b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/TimeFramePicker.vue
new file mode 100644
index 0000000000..60f20eba4b
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/TimeFramePicker.vue
@@ -0,0 +1,401 @@
+<template>
+	<Combobox
+		:model-value="highlightedTimeframePreset"
+		:options="timeframeDropdownOptions"
+		:display-value="selectedTimeframeLabel"
+		:max-height="TIMEFRAME_DROPDOWN_MAX_HEIGHT"
+		:dropdown-min-width="timeframeDropdownMinWidth"
+		:dropdown-class="
+			activeTimeframePanel === 'custom_range'
+				? 'bg-transparent border-0 -mt-1 pb-2 shadow-none'
+				: ''
+		"
+		@update:model-value="handleTimeframeModelUpdate"
+		@open="handleTimeframeSelectOpen"
+		@close="handleTimeframeSelectClose"
+		@select="handleTimeframePresetSelect"
+	>
+		<template #bottom>
+			<template v-if="activeTimeframePanel === 'custom_range'">
+				<CustomRangeTimeframe
+					v-model:start-date="draftSelectedCustomTimeframeStartDate"
+					v-model:end-date="draftSelectedCustomTimeframeEndDate"
+					@cancel="handleCustomRangeCancel"
+					@apply="handleCustomRangeApply"
+				/>
+			</template>
+			<div
+				v-else
+				class="flex flex-col border-0 border-t border-solid border-surface-5 bg-surface-4"
+			>
+				<CustomTimeframe
+					v-model:amount="draftSelectedLastTimeframeAmount"
+					v-model:unit="draftSelectedLastTimeframeUnit"
+					:active="draftSelectedTimeframeMode === 'last'"
+					:unit-options="lastTimeframeUnitOptions"
+					@activate="draftSelectedTimeframeMode = 'last'"
+					@submit="runCustomTimeframeQuery"
+				/>
+				<button
+					type="button"
+					class="flex cursor-pointer items-center border-0 border-t border-solid border-surface-5 bg-transparent px-4 py-3 text-left text-sm font-semibold text-primary transition-colors hover:bg-surface-5"
+					@click.stop="switchDraftToCustomDateRange"
+				>
+					Custom fixed date range...
+				</button>
+			</div>
+		</template>
+	</Combobox>
+</template>
+
+<script setup lang="ts">
+import { Combobox, type ComboboxOption } from '@modrinth/ui'
+
+import {
+	type AnalyticsGroupByPreset,
+	type AnalyticsLastTimeframeUnit,
+	type AnalyticsTimeframeMode,
+	type AnalyticsTimeframePreset,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+
+import CustomRangeTimeframe from './CustomRangeTimeframe.vue'
+import CustomTimeframe from './CustomTimeframe.vue'
+import {
+	ensureMinimumTimeRange,
+	getAnalyticsTimeRange,
+	getDateInputValue,
+	getDefaultAnalyticsGroupByForDurationMinutes,
+	getInclusiveEndDateInputValue,
+} from './timeframe'
+
+const TIMEFRAME_DROPDOWN_MAX_HEIGHT = 500
+const CUSTOM_RANGE_DATE_FORMATTER = new Intl.DateTimeFormat('en-US', {
+	month: 'long',
+	day: 'numeric',
+	year: 'numeric',
+})
+const CUSTOM_RANGE_MONTH_DAY_FORMATTER = new Intl.DateTimeFormat('en-US', {
+	month: 'long',
+	day: 'numeric',
+})
+
+const {
+	selectedTimeframeMode,
+	selectedTimeframe,
+	selectedLastTimeframeAmount,
+	selectedLastTimeframeUnit,
+	selectedCustomTimeframeStartDate,
+	selectedCustomTimeframeEndDate,
+	selectedGroupBy,
+	queryRefreshTimestamp,
+	refreshAnalyticsQuery,
+} = injectAnalyticsDashboardContext()
+
+const isTimeframeSelectOpen = ref(false)
+const activeTimeframePanel = ref<'preset' | 'custom_range'>('preset')
+const draftSelectedTimeframeMode = ref(selectedTimeframeMode.value)
+const draftSelectedTimeframe = ref(selectedTimeframe.value)
+const draftSelectedLastTimeframeAmount = ref(selectedLastTimeframeAmount.value)
+const draftSelectedLastTimeframeUnit = ref(selectedLastTimeframeUnit.value)
+const draftSelectedCustomTimeframeStartDate = ref(selectedCustomTimeframeStartDate.value)
+const draftSelectedCustomTimeframeEndDate = ref(selectedCustomTimeframeEndDate.value)
+const draftSelectedGroupBy = ref(selectedGroupBy.value)
+
+const timeframeOptions: ComboboxOption<AnalyticsTimeframePreset>[] = [
+	{ value: 'today', label: 'Today' },
+	{ value: 'yesterday', label: 'Yesterday' },
+	{ value: 'last_7_days', label: 'Last 7 days' },
+	{ value: 'last_14_days', label: 'Last 14 days' },
+	{ value: 'last_30_days', label: 'Last 30 days' },
+	{ value: 'last_90_days', label: 'Last 90 days' },
+	{ value: 'last_180_days', label: 'Last 180 days' },
+	{ value: 'year_to_date', label: 'Year to date' },
+	{ value: 'all_time', label: 'All time' },
+]
+
+const lastTimeframeUnitOptions: Array<{
+	value: AnalyticsLastTimeframeUnit
+	label: string
+	singularLabel: string
+}> = [
+	{ value: 'hours', label: 'hours', singularLabel: 'hour' },
+	{ value: 'days', label: 'days', singularLabel: 'day' },
+	{ value: 'weeks', label: 'weeks', singularLabel: 'week' },
+	{ value: 'months', label: 'months', singularLabel: 'month' },
+]
+
+const lastTimeframeValueByPreset: Partial<
+	Record<
+		AnalyticsTimeframePreset,
+		{
+			amount: number
+			unit: AnalyticsLastTimeframeUnit
+		}
+	>
+> = {
+	today: { amount: 1, unit: 'days' },
+	yesterday: { amount: 1, unit: 'days' },
+	last_7_days: { amount: 7, unit: 'days' },
+	last_14_days: { amount: 14, unit: 'days' },
+	last_30_days: { amount: 30, unit: 'days' },
+	last_90_days: { amount: 90, unit: 'days' },
+	last_180_days: { amount: 180, unit: 'days' },
+}
+
+const defaultGroupByForPreset: Partial<Record<AnalyticsTimeframePreset, AnalyticsGroupByPreset>> = {
+	today: '1h',
+	yesterday: '1h',
+	last_7_days: '6h',
+	last_14_days: '6h',
+	last_30_days: 'day',
+	last_90_days: 'day',
+	last_180_days: 'week',
+	year_to_date: 'week',
+}
+
+const timeframeDropdownOptions = computed<ComboboxOption<AnalyticsTimeframePreset>[]>(() =>
+	activeTimeframePanel.value === 'custom_range' ? [] : timeframeOptions,
+)
+const timeframeDropdownMinWidth = computed(() =>
+	activeTimeframePanel.value === 'custom_range' ? '40.5rem' : '20rem',
+)
+
+const highlightedTimeframePreset = computed<AnalyticsTimeframePreset | undefined>(() => {
+	if (draftSelectedTimeframeMode.value === 'preset') {
+		return draftSelectedTimeframe.value
+	}
+
+	return undefined
+})
+
+const selectedTimeframeLabel = computed(() => {
+	const useDraftTimeframeLabel =
+		isTimeframeSelectOpen.value && activeTimeframePanel.value !== 'custom_range'
+
+	return getTimeframeLabel(
+		useDraftTimeframeLabel ? draftSelectedTimeframeMode.value : selectedTimeframeMode.value,
+		useDraftTimeframeLabel ? draftSelectedTimeframe.value : selectedTimeframe.value,
+		useDraftTimeframeLabel
+			? draftSelectedLastTimeframeAmount.value
+			: selectedLastTimeframeAmount.value,
+		useDraftTimeframeLabel ? draftSelectedLastTimeframeUnit.value : selectedLastTimeframeUnit.value,
+		useDraftTimeframeLabel
+			? draftSelectedCustomTimeframeStartDate.value
+			: selectedCustomTimeframeStartDate.value,
+		useDraftTimeframeLabel
+			? draftSelectedCustomTimeframeEndDate.value
+			: selectedCustomTimeframeEndDate.value,
+	)
+})
+
+function getTimeframeLabel(
+	mode: AnalyticsTimeframeMode,
+	preset: AnalyticsTimeframePreset,
+	lastAmount: number,
+	lastUnit: AnalyticsLastTimeframeUnit,
+	customStartDate: string,
+	customEndDate: string,
+): string {
+	if (mode === 'last') {
+		const unit = lastTimeframeUnitOptions.find((option) => option.value === lastUnit)
+		const unitLabel = lastAmount === 1 ? unit?.singularLabel : unit?.label
+		return `In the last ${lastAmount} ${unitLabel ?? lastUnit}`
+	}
+
+	if (mode === 'custom_range') {
+		return formatCustomTimeframeRangeLabel(customStartDate, customEndDate)
+	}
+
+	return timeframeOptions.find((option) => option.value === preset)?.label ?? 'Select timeframe'
+}
+
+function getDraftTimeRange() {
+	return getAnalyticsTimeRange({
+		mode: draftSelectedTimeframeMode.value,
+		preset: draftSelectedTimeframe.value,
+		lastAmount: draftSelectedLastTimeframeAmount.value,
+		lastUnit: draftSelectedLastTimeframeUnit.value,
+		customStartDate: draftSelectedCustomTimeframeStartDate.value,
+		customEndDate: draftSelectedCustomTimeframeEndDate.value,
+		nowTimestamp: queryRefreshTimestamp.value,
+	})
+}
+
+function getDateFromInputValue(value: string): Date | undefined {
+	const date = new Date(`${value}T00:00:00`)
+	if (Number.isNaN(date.getTime()) || getDateInputValue(date) !== value) {
+		return undefined
+	}
+
+	return date
+}
+
+function formatCustomTimeframeRangeLabel(startDateValue: string, endDateValue: string): string {
+	const startDate = getDateFromInputValue(startDateValue)
+	const endDate = getDateFromInputValue(endDateValue)
+	if (!startDate || !endDate) {
+		return `${startDateValue} - ${endDateValue}`
+	}
+
+	const sameYear = startDate.getFullYear() === endDate.getFullYear()
+
+	if (startDateValue === endDateValue) {
+		return CUSTOM_RANGE_DATE_FORMATTER.format(startDate)
+	}
+
+	if (sameYear) {
+		const startLabel = CUSTOM_RANGE_MONTH_DAY_FORMATTER.format(startDate)
+		const endLabel = CUSTOM_RANGE_MONTH_DAY_FORMATTER.format(endDate)
+		return `${startLabel} - ${endLabel}, ${startDate.getFullYear()}`
+	}
+
+	const startLabel = CUSTOM_RANGE_DATE_FORMATTER.format(startDate)
+	const endLabel = CUSTOM_RANGE_DATE_FORMATTER.format(endDate)
+	return `${startLabel} - ${endLabel}`
+}
+
+function resetTimeframeDraft() {
+	draftSelectedTimeframeMode.value = selectedTimeframeMode.value
+	draftSelectedTimeframe.value = selectedTimeframe.value
+	draftSelectedLastTimeframeAmount.value = selectedLastTimeframeAmount.value
+	draftSelectedLastTimeframeUnit.value = selectedLastTimeframeUnit.value
+	draftSelectedCustomTimeframeStartDate.value = selectedCustomTimeframeStartDate.value
+	draftSelectedCustomTimeframeEndDate.value = selectedCustomTimeframeEndDate.value
+	draftSelectedGroupBy.value = selectedGroupBy.value
+}
+
+function commitTimeframeDraft() {
+	selectedTimeframeMode.value = draftSelectedTimeframeMode.value
+	selectedTimeframe.value = draftSelectedTimeframe.value
+	selectedLastTimeframeAmount.value = draftSelectedLastTimeframeAmount.value
+	selectedLastTimeframeUnit.value = draftSelectedLastTimeframeUnit.value
+	selectedCustomTimeframeStartDate.value = draftSelectedCustomTimeframeStartDate.value
+	selectedCustomTimeframeEndDate.value = draftSelectedCustomTimeframeEndDate.value
+	selectedGroupBy.value = draftSelectedGroupBy.value
+}
+
+function handleTimeframeSelectOpen() {
+	resetTimeframeDraft()
+	activeTimeframePanel.value = 'preset'
+	isTimeframeSelectOpen.value = true
+}
+
+function handleTimeframeSelectClose() {
+	if (activeTimeframePanel.value !== 'custom_range') {
+		commitTimeframeDraft()
+	}
+	isTimeframeSelectOpen.value = false
+}
+
+function closeTimeframeSelectDropdown(event: Event) {
+	const eventTarget = event.target
+	if (!(eventTarget instanceof HTMLElement)) {
+		isTimeframeSelectOpen.value = false
+		return
+	}
+
+	const dropdown = eventTarget.closest('[role="listbox"], [role="menu"]')
+	if (!dropdown) {
+		isTimeframeSelectOpen.value = false
+		return
+	}
+
+	dropdown.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+}
+
+async function runCustomTimeframeQuery(event: KeyboardEvent) {
+	commitTimeframeDraft()
+	closeTimeframeSelectDropdown(event)
+	await nextTick()
+	await refreshAnalyticsQuery()
+}
+
+function handleCustomRangeCancel() {
+	resetTimeframeDraft()
+	activeTimeframePanel.value = 'preset'
+}
+
+async function handleCustomRangeApply(event: MouseEvent) {
+	draftSelectedTimeframeMode.value = 'custom_range'
+	commitTimeframeDraft()
+	closeTimeframeSelectDropdown(event)
+	await nextTick()
+	await refreshAnalyticsQuery()
+}
+
+function handleTimeframeModelUpdate(value: AnalyticsTimeframePreset | undefined) {
+	if (value !== undefined) {
+		draftSelectedTimeframe.value = value
+	}
+}
+
+watch(
+	[
+		selectedTimeframeMode,
+		selectedTimeframe,
+		selectedLastTimeframeAmount,
+		selectedLastTimeframeUnit,
+		selectedCustomTimeframeStartDate,
+		selectedCustomTimeframeEndDate,
+		selectedGroupBy,
+	],
+	() => {
+		if (isTimeframeSelectOpen.value) {
+			return
+		}
+
+		resetTimeframeDraft()
+	},
+)
+
+function handleTimeframePresetSelect(option: ComboboxOption<AnalyticsTimeframePreset>) {
+	draftSelectedTimeframeMode.value = 'preset'
+
+	const lastTimeframeValue = lastTimeframeValueByPreset[option.value]
+	if (lastTimeframeValue) {
+		draftSelectedLastTimeframeAmount.value = lastTimeframeValue.amount
+		draftSelectedLastTimeframeUnit.value = lastTimeframeValue.unit
+	}
+
+	const defaultGroupBy = defaultGroupByForPreset[option.value]
+	if (defaultGroupBy) {
+		draftSelectedGroupBy.value = defaultGroupBy
+	}
+}
+
+watch(
+	[
+		draftSelectedTimeframeMode,
+		draftSelectedLastTimeframeAmount,
+		draftSelectedLastTimeframeUnit,
+		draftSelectedCustomTimeframeStartDate,
+		draftSelectedCustomTimeframeEndDate,
+	],
+	() => {
+		if (!isTimeframeSelectOpen.value) {
+			return
+		}
+		if (
+			draftSelectedTimeframeMode.value !== 'last' &&
+			draftSelectedTimeframeMode.value !== 'custom_range'
+		) {
+			return
+		}
+
+		const range = getDraftTimeRange()
+		const { start, end } = ensureMinimumTimeRange(range.start, range.end)
+		const durationMinutes = Math.max(1, Math.floor((end.getTime() - start.getTime()) / 60000))
+		draftSelectedGroupBy.value = getDefaultAnalyticsGroupByForDurationMinutes(durationMinutes)
+	},
+	{ flush: 'sync' },
+)
+
+function switchDraftToCustomDateRange() {
+	const rawRange = getDraftTimeRange()
+	draftSelectedCustomTimeframeStartDate.value = getDateInputValue(rawRange.start)
+	draftSelectedCustomTimeframeEndDate.value = getInclusiveEndDateInputValue(rawRange.end)
+	draftSelectedTimeframeMode.value = 'custom_range'
+	activeTimeframePanel.value = 'custom_range'
+}
+</script>
diff --git a/apps/frontend/src/components/analytics/query-builder/timeframe-picker/timeframe.ts b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/timeframe.ts
new file mode 100644
index 0000000000..e93d866ec0
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/timeframe.ts
@@ -0,0 +1,257 @@
+import {
+	type AnalyticsGroupByPreset,
+	type AnalyticsLastTimeframeUnit,
+	type AnalyticsTimeframeMode,
+	type AnalyticsTimeframePreset,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+
+const MIN_RANGE_MS = 60 * 60 * 1000
+const TIME_RANGE_ROUNDING_MS = 60 * 1000
+
+export type AnalyticsTimeRange = {
+	start: Date
+	end: Date
+}
+
+export function startOfDay(date: Date): Date {
+	const nextDate = new Date(date)
+	nextDate.setHours(0, 0, 0, 0)
+	return nextDate
+}
+
+export function getRoundedNow(timestamp: number): Date {
+	const roundedTimestamp = Math.floor(timestamp / TIME_RANGE_ROUNDING_MS) * TIME_RANGE_ROUNDING_MS
+	return new Date(roundedTimestamp)
+}
+
+export function getDateInputValue(date: Date): string {
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+	return `${year}-${month}-${day}`
+}
+
+export function parseDateInputValue(value: string): Date {
+	const parsedDate = new Date(`${value}T00:00:00`)
+	return Number.isNaN(parsedDate.getTime()) ? startOfDay(new Date()) : parsedDate
+}
+
+export function addDays(date: Date, days: number): Date {
+	const nextDate = new Date(date)
+	nextDate.setDate(nextDate.getDate() + days)
+	return nextDate
+}
+
+function isStartOfDay(date: Date): boolean {
+	return (
+		date.getHours() === 0 &&
+		date.getMinutes() === 0 &&
+		date.getSeconds() === 0 &&
+		date.getMilliseconds() === 0
+	)
+}
+
+export function getInclusiveEndDateInputValue(end: Date): string {
+	return getDateInputValue(isStartOfDay(end) ? addDays(end, -1) : end)
+}
+
+function subtractCalendarMonths(date: Date, months: number): Date {
+	const nextDate = new Date(date)
+	const day = nextDate.getDate()
+	nextDate.setDate(1)
+	nextDate.setMonth(nextDate.getMonth() - months)
+	const daysInMonth = new Date(nextDate.getFullYear(), nextDate.getMonth() + 1, 0).getDate()
+	nextDate.setDate(Math.min(day, daysInMonth))
+	return nextDate
+}
+
+export function getTimeRangeForPreset(
+	preset: AnalyticsTimeframePreset,
+	nowTimestamp: number,
+): AnalyticsTimeRange {
+	const now = getRoundedNow(nowTimestamp)
+	const end = new Date(now)
+
+	switch (preset) {
+		case 'today':
+			return { start: startOfDay(now), end }
+		case 'yesterday': {
+			const todayStart = startOfDay(now)
+			return {
+				start: new Date(todayStart.getTime() - 24 * 60 * 60 * 1000),
+				end: todayStart,
+			}
+		}
+		case 'last_7_days':
+			return {
+				start: new Date(end.getTime() - 7 * 24 * 60 * 60 * 1000),
+				end,
+			}
+		case 'last_14_days':
+			return {
+				start: new Date(end.getTime() - 14 * 24 * 60 * 60 * 1000),
+				end,
+			}
+		case 'last_30_days':
+			return {
+				start: new Date(end.getTime() - 30 * 24 * 60 * 60 * 1000),
+				end,
+			}
+		case 'last_90_days':
+			return {
+				start: new Date(end.getTime() - 90 * 24 * 60 * 60 * 1000),
+				end,
+			}
+		case 'last_180_days':
+			return {
+				start: new Date(end.getTime() - 180 * 24 * 60 * 60 * 1000),
+				end,
+			}
+		case 'year_to_date': {
+			const yearStart = new Date(now.getFullYear(), 0, 1)
+			yearStart.setHours(0, 0, 0, 0)
+			return { start: yearStart, end }
+		}
+		case 'all_time':
+			return {
+				start: new Date(Date.UTC(2023, 0, 1, 0, 0, 0, 0)),
+				end,
+			}
+		default:
+			return {
+				start: new Date(end.getTime() - 24 * 60 * 60 * 1000),
+				end,
+			}
+	}
+}
+
+export function getTimeRangeForLastTimeframe(
+	amountValue: number,
+	unit: AnalyticsLastTimeframeUnit,
+	nowTimestamp: number,
+): AnalyticsTimeRange {
+	const end = getRoundedNow(nowTimestamp)
+	const amount = Math.max(1, Math.floor(amountValue))
+
+	switch (unit) {
+		case 'hours':
+			return { start: new Date(end.getTime() - amount * 60 * 60 * 1000), end }
+		case 'days':
+			return { start: new Date(end.getTime() - amount * 24 * 60 * 60 * 1000), end }
+		case 'weeks':
+			return { start: new Date(end.getTime() - amount * 7 * 24 * 60 * 60 * 1000), end }
+		case 'months':
+			return { start: subtractCalendarMonths(end, amount), end }
+		default:
+			return { start: new Date(end.getTime() - 24 * 60 * 60 * 1000), end }
+	}
+}
+
+export function getTimeRangeForCustomDateRange(
+	startDate: string,
+	endDate: string,
+): AnalyticsTimeRange {
+	const start = parseDateInputValue(startDate)
+	const inclusiveEnd = parseDateInputValue(endDate)
+	return {
+		start,
+		end: addDays(inclusiveEnd, 1),
+	}
+}
+
+export function getAnalyticsTimeRange({
+	mode,
+	preset,
+	lastAmount,
+	lastUnit,
+	customStartDate,
+	customEndDate,
+	nowTimestamp,
+}: {
+	mode: AnalyticsTimeframeMode
+	preset: AnalyticsTimeframePreset
+	lastAmount: number
+	lastUnit: AnalyticsLastTimeframeUnit
+	customStartDate: string
+	customEndDate: string
+	nowTimestamp: number
+}): AnalyticsTimeRange {
+	switch (mode) {
+		case 'last':
+			return getTimeRangeForLastTimeframe(lastAmount, lastUnit, nowTimestamp)
+		case 'custom_range':
+			return getTimeRangeForCustomDateRange(customStartDate, customEndDate)
+		case 'preset':
+		default:
+			return getTimeRangeForPreset(preset, nowTimestamp)
+	}
+}
+
+export function getDefaultAnalyticsGroupByForDurationMinutes(
+	durationMinutes: number,
+): AnalyticsGroupByPreset {
+	const days = durationMinutes / (24 * 60)
+	if (days <= 2) return '1h'
+	if (days <= 14) return '6h'
+	if (days <= 90) return 'day'
+	if (days <= 365) return 'week'
+	if (days <= 365 * 3) return 'month'
+	return 'year'
+}
+
+export function ensureMinimumTimeRange(start: Date, end: Date): AnalyticsTimeRange {
+	if (end.getTime() <= start.getTime()) {
+		return {
+			start: new Date(end.getTime() - MIN_RANGE_MS),
+			end,
+		}
+	}
+
+	if (end.getTime() - start.getTime() < MIN_RANGE_MS) {
+		return {
+			start: new Date(end.getTime() - MIN_RANGE_MS),
+			end,
+		}
+	}
+
+	return { start, end }
+}
+
+export function useSelectedAnalyticsTimeRange() {
+	const {
+		selectedTimeframeMode,
+		selectedTimeframe,
+		selectedLastTimeframeAmount,
+		selectedLastTimeframeUnit,
+		selectedCustomTimeframeStartDate,
+		selectedCustomTimeframeEndDate,
+		queryRefreshTimestamp,
+	} = injectAnalyticsDashboardContext()
+
+	const selectedTimeRange = computed(() =>
+		getAnalyticsTimeRange({
+			mode: selectedTimeframeMode.value,
+			preset: selectedTimeframe.value,
+			lastAmount: selectedLastTimeframeAmount.value,
+			lastUnit: selectedLastTimeframeUnit.value,
+			customStartDate: selectedCustomTimeframeStartDate.value,
+			customEndDate: selectedCustomTimeframeEndDate.value,
+			nowTimestamp: queryRefreshTimestamp.value,
+		}),
+	)
+
+	const selectedTimeframeDurationMinutes = computed(() => {
+		const { start, end } = ensureMinimumTimeRange(
+			selectedTimeRange.value.start,
+			selectedTimeRange.value.end,
+		)
+		const durationMs = end.getTime() - start.getTime()
+		return Math.max(1, Math.floor(durationMs / (60 * 1000)))
+	})
+
+	return {
+		selectedTimeRange,
+		selectedTimeframeDurationMinutes,
+	}
+}
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCard.vue b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
new file mode 100644
index 0000000000..a4fd4ef36f
--- /dev/null
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
@@ -0,0 +1,141 @@
+<template>
+	<button
+		v-tooltip="disabled ? 'Stat type not appicable to breakdown' : ''"
+		type="button"
+		class="flex h-full appearance-none flex-col gap-4 rounded-2xl border border-solid p-5 px-4 text-left transition-colors"
+		:class="{
+			'cursor-not-allowed border-surface-5 bg-surface-2 opacity-60': disabled,
+			'cursor-default border-brand bg-highlight-green': !disabled && active,
+			'border-surface-5 bg-surface-3 hover:bg-surface-4 active:scale-95': !disabled && !active,
+		}"
+		:disabled="disabled"
+		@click="emit('click')"
+	>
+		<div class="flex items-center justify-between gap-3">
+			<div
+				class="text-base font-medium"
+				:class="{
+					'text-secondary': disabled,
+					'text-primary': !disabled,
+				}"
+			>
+				{{ label }}
+			</div>
+
+			<div class="inline-flex items-center justify-center">
+				<component
+					:is="iconComponent"
+					aria-hidden="true"
+					class="size-6"
+					:class="{
+						'text-secondary': disabled,
+						'text-brand': !disabled && active,
+						'text-primary': !disabled && !active,
+					}"
+				/>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			<div
+				class="text-4xl font-semibold leading-none"
+				:class="{
+					'text-primary': disabled,
+					'text-contrast': !disabled,
+				}"
+			>
+				{{ disabled ? '-' : statLabel }}
+			</div>
+
+			<template v-if="disabled">
+				<span class="inline-flex items-center gap-1 text-xs text-secondary">N/A</span>
+			</template>
+			<template v-else>
+				<div v-if="vsPrevPeriodPercent" class="flex items-center gap-1 text-sm">
+					<span
+						class="inline-flex items-center gap-1 font-semibold"
+						:class="{
+							'text-secondary': disabled,
+							'text-green': !disabled && trendValue > 0,
+							'text-red': !disabled && trendValue < 0,
+							'text-primary': !disabled && trendValue === 0,
+						}"
+					>
+						<component
+							:is="trendDirectionIcon"
+							v-if="showTrendDirectionIcon"
+							aria-hidden="true"
+							class="size-3"
+						/>
+						{{ vsPrevPeriodPercent }}
+					</span>
+					<span
+						class="mt-px text-xs"
+						:class="{
+							'text-secondary': disabled,
+							'text-primary': !disabled,
+						}"
+					>
+						vs prev period
+					</span>
+				</div>
+			</template>
+		</div>
+	</button>
+</template>
+
+<script setup lang="ts">
+import {
+	ClockIcon,
+	CurrencyIcon,
+	DownloadIcon,
+	EyeIcon,
+	type IconComponent,
+	PlayIcon,
+	TimerIcon,
+	TrendingDownIcon,
+	TrendingUpIcon,
+} from '@modrinth/assets'
+
+const props = defineProps<{
+	label: string
+	statLabel: string
+	vsPrevPeriodPercent: string | null
+	icon: string
+	active?: boolean
+	disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+	(event: 'click'): void
+}>()
+
+const statCardIconMap: Record<string, IconComponent> = {
+	clock: ClockIcon,
+	timer: TimerIcon,
+	play: PlayIcon,
+	eye: EyeIcon,
+	download: DownloadIcon,
+	currency: CurrencyIcon,
+	dollar: CurrencyIcon,
+}
+
+const iconComponent = computed<IconComponent>(() => {
+	const normalizedIconName = props.icon
+		.toLowerCase()
+		.replace(/icon$/u, '')
+		.replace(/[^a-z]/gu, '')
+	return statCardIconMap[normalizedIconName] ?? ClockIcon
+})
+
+const trendValue = computed(() => {
+	const parsed = Number.parseFloat(props.vsPrevPeriodPercent?.replace(/[^0-9.-]/gu, '') ?? '')
+	return Number.isNaN(parsed) ? 0 : parsed
+})
+
+const showTrendDirectionIcon = computed(() => !props.disabled && trendValue.value !== 0)
+
+const trendDirectionIcon = computed<IconComponent>(() =>
+	trendValue.value >= 0 ? TrendingUpIcon : TrendingDownIcon,
+)
+</script>
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
new file mode 100644
index 0000000000..0e13cc57f0
--- /dev/null
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
@@ -0,0 +1,113 @@
+<template>
+	<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+		<StatCard
+			v-for="card in statCards"
+			:key="card.key"
+			:label="card.label"
+			:stat-label="card.statLabel"
+			:vs-prev-period-percent="card.vsPrevPeriodPercent"
+			:icon="card.icon"
+			:active="activeStat === card.key"
+			:disabled="card.disabled"
+			@click="setActiveStat(card.key)"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useFormatNumber } from '@modrinth/ui'
+
+import {
+	type AnalyticsDashboardStat,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+
+import StatCard from './StatCard.vue'
+
+const {
+	activeStat,
+	setActiveStat,
+	currentTotals,
+	percentChanges,
+	hasPreviousPeriodComparison,
+	selectedBreakdown,
+	isAnalyticsDashboardStatRelevant,
+} = injectAnalyticsDashboardContext()
+const formatNumber = useFormatNumber()
+
+const compactNumberFormatter = computed(
+	() =>
+		new Intl.NumberFormat(undefined, {
+			notation: 'compact',
+			maximumSignificantDigits: 3,
+		}),
+)
+
+function formatStatNumber(value: number): string {
+	const rounded = Math.round(value)
+
+	if (Math.abs(rounded) >= 1000) {
+		return compactNumberFormatter.value.format(rounded)
+	}
+
+	return formatNumber(rounded)
+}
+
+function formatPercent(value: number): string {
+	const rounded = Math.round(value * 10) / 10
+	const signPrefix = rounded > 0 ? '+' : ''
+	return `${signPrefix}${rounded.toFixed(1)}%`
+}
+
+function formatPreviousPeriodPercent(value: number): string | null {
+	if (!hasPreviousPeriodComparison.value) {
+		return null
+	}
+
+	return formatPercent(value)
+}
+
+const statCards = computed<
+	{
+		key: AnalyticsDashboardStat
+		label: string
+		statLabel: string
+		vsPrevPeriodPercent: string | null
+		icon: string
+		disabled: boolean
+	}[]
+>(() => [
+	{
+		key: 'views',
+		label: 'Views',
+		statLabel: formatStatNumber(currentTotals.value.views),
+		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.views),
+		icon: 'eye',
+		disabled: !isAnalyticsDashboardStatRelevant('views', selectedBreakdown.value),
+	},
+	{
+		key: 'downloads',
+		label: 'Downloads',
+		statLabel: formatStatNumber(currentTotals.value.downloads),
+		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.downloads),
+		icon: 'download',
+		disabled: !isAnalyticsDashboardStatRelevant('downloads', selectedBreakdown.value),
+	},
+	{
+		key: 'revenue',
+		label: 'Revenue',
+		statLabel: `$${formatStatNumber(currentTotals.value.revenue)}`,
+		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.revenue),
+		icon: 'dollar',
+		disabled: !isAnalyticsDashboardStatRelevant('revenue', selectedBreakdown.value),
+	},
+	{
+		key: 'playtime',
+		label: 'Playtime',
+		statLabel: `${formatStatNumber(currentTotals.value.playtime / 3600)} hrs`,
+		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.playtime),
+		icon: 'clock',
+		disabled: !isAnalyticsDashboardStatRelevant('playtime', selectedBreakdown.value),
+	},
+])
+</script>
diff --git a/apps/frontend/src/components/analytics/table/AnalyticsTable.vue b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
new file mode 100644
index 0000000000..51e35def27
--- /dev/null
+++ b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
@@ -0,0 +1,623 @@
+<template>
+	<div class="relative overflow-hidden rounded-2xl">
+		<AnalyticsLoadingBar :loading="isDataLoading" />
+		<Table
+			v-model:sort-column="sortColumn"
+			v-model:sort-direction="sortDirection"
+			:columns="columns"
+			:data="sortedRows"
+			row-key="id"
+			virtualized
+			:virtual-row-height="56"
+		>
+			<template #header>
+				<div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+					<div class="text-xl font-semibold text-contrast">Breakdown</div>
+
+					<div class="flex flex-wrap items-center gap-3">
+						<div v-if="showDateToggle" class="inline-flex items-center gap-2">
+							<label for="date-toggle" class="cursor-pointer text-sm text-secondary">Date</label>
+							<Toggle id="date-toggle" v-model="includeDate" small />
+						</div>
+
+						<div v-if="showDateToggle" class="mx-1 h-6 w-px bg-surface-5"></div>
+
+						<ButtonStyled>
+							<button
+								class="!shadow-none"
+								:disabled="isDataLoading || sortedRows.length === 0"
+								@click="downloadCsv"
+							>
+								<DownloadIcon />
+								Export CSV
+							</button>
+						</ButtonStyled>
+					</div>
+				</div>
+			</template>
+
+			<template #cell-date="{ value }">
+				<span class="text-primary">{{ value }}</span>
+			</template>
+			<template #cell-breakdown="{ value }">
+				<span
+					class="text-primary"
+					:class="{
+						capitalize: selectedBreakdown === 'monetization',
+					}"
+					>{{ formatBreakdownDisplayValue(String(value)) }}</span
+				>
+			</template>
+			<template #cell-views="{ row }">
+				<span>{{ formatInteger(row.views) }}</span>
+			</template>
+			<template #cell-downloads="{ row }">
+				<span>{{ formatInteger(row.downloads) }}</span>
+			</template>
+			<template #cell-revenue="{ row }">
+				<span>{{ formatRevenue(row.revenue) }}</span>
+			</template>
+			<template #cell-playtime="{ row }">
+				<span>{{ formatInteger(row.playtime) }}</span>
+			</template>
+			<template #empty-state>
+				<div class="flex h-64 items-center justify-center text-secondary">
+					{{ emptyTableMessage }}
+				</div>
+			</template>
+		</Table>
+		<div v-if="isDataLoading" class="absolute inset-0 z-10 overflow-hidden rounded-xl">
+			<div class="absolute inset-0 bg-surface-3 opacity-50" />
+			<div class="absolute inset-0 backdrop-blur-[4px]" />
+			<div class="absolute inset-0 flex h-full items-start justify-center pt-52">
+				<div class="inline-flex items-center gap-2 text-lg font-semibold text-primary opacity-100">
+					<span>Fetching results...</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon } from '@modrinth/assets'
+import { ButtonStyled, Table, type TableColumn, Toggle, useFormatNumber } from '@modrinth/ui'
+
+import {
+	type AnalyticsBreakdownPreset,
+	type AnalyticsDashboardStat,
+	doesAnalyticsPointMatchFilters,
+	doesProjectStatusMatchFilters,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
+
+import AnalyticsLoadingBar from '../AnalyticsLoadingBar.vue'
+import { ALL_BREAKDOWN_VALUE, getAnalyticsBreakdownValue } from '../breakdown'
+import {
+	formatBreakdownLabel,
+	formatBucketEndLabel,
+	getSliceBucketRange,
+	getSliceCount,
+	isTimeRelevantForGroupBy,
+	isYearRelevantForTimeRange,
+} from '../graph/utils'
+
+type TableMode = 'date_breakdown' | 'breakdown_only'
+type SortDirection = 'asc' | 'desc'
+type TableColumnKey = 'date' | 'breakdown' | 'views' | 'downloads' | 'revenue' | 'playtime'
+
+type AnalyticsTableRow = {
+	id: string
+	date: string
+	dateMs: number
+	breakdown: string
+	views: number
+	downloads: number
+	revenue: number
+	playtime: number
+}
+
+const {
+	projects,
+	displayedSelectedProjectIds: selectedProjectIds,
+	displayedSelectedGroupBy: selectedGroupBy,
+	displayedSelectedBreakdown: selectedBreakdown,
+	displayedSelectedFilters: selectedFilters,
+	displayedFetchRequest: fetchRequest,
+	displayedTimeSlices: timeSlices,
+	getRelevantAnalyticsDashboardStats,
+	isLoading,
+	getVersionDisplayName,
+} = injectAnalyticsDashboardContext()
+const formatNumber = useFormatNumber()
+const isDataLoading = computed(() => isLoading.value)
+
+const tableMode = ref<TableMode>('breakdown_only')
+const sortColumn = ref<TableColumnKey | undefined>('date')
+const sortDirection = ref<SortDirection>('asc')
+
+const includeDate = computed<boolean>({
+	get: () => tableMode.value === 'date_breakdown',
+	set: (value) => {
+		tableMode.value = value ? 'date_breakdown' : 'breakdown_only'
+	},
+})
+
+const selectedProjectIdSet = computed(
+	() =>
+		new Set(
+			projects.value
+				.filter(
+					(project) =>
+						selectedProjectIds.value.includes(project.id) &&
+						doesProjectStatusMatchFilters(project.status, selectedFilters.value),
+				)
+				.map((project) => project.id),
+		),
+)
+const isSingleProjectView = computed(() => selectedProjectIdSet.value.size === 1)
+const showBreakdownColumn = computed(
+	() => selectedBreakdown.value !== 'none' || !isSingleProjectView.value,
+)
+const showDateToggle = computed(() => showBreakdownColumn.value)
+const includeDateColumn = computed(
+	() => tableMode.value === 'date_breakdown' || !showBreakdownColumn.value,
+)
+
+const projectNamesById = computed(
+	() => new Map(projects.value.map((project) => [project.id, project.name])),
+)
+const hasAvailableProjects = computed(() => projects.value.length > 0)
+const emptyTableMessage = computed(() =>
+	hasAvailableProjects.value ? 'No data available' : 'No projects available',
+)
+
+const breakdownColumnLabel = computed(() => {
+	switch (selectedBreakdown.value) {
+		case 'none':
+			return 'Project'
+		case 'country':
+			return 'Country'
+		case 'monetization':
+			return 'Monetization'
+		case 'download_source':
+			return 'Download source'
+		case 'download_reason':
+			return 'Download type'
+		case 'version_id':
+			return 'Project version'
+		case 'loader':
+			return 'Loader'
+		case 'game_version':
+			return 'Game version'
+		default:
+			return 'Breakdown'
+	}
+})
+const relevantStats = computed(
+	() => new Set(getRelevantAnalyticsDashboardStats(selectedBreakdown.value, selectedFilters.value)),
+)
+
+const showTimeInBucketLabel = computed(() => isTimeRelevantForGroupBy(selectedGroupBy.value))
+const showYearInBucketLabel = computed(() => {
+	const nextFetchRequest = fetchRequest.value
+	return nextFetchRequest
+		? isYearRelevantForTimeRange(nextFetchRequest.time_range) || selectedGroupBy.value === 'year'
+		: false
+})
+
+const tableRows = computed<AnalyticsTableRow[]>(() => {
+	const nextFetchRequest = fetchRequest.value
+	const nextTimeSlices = timeSlices.value
+	const nextSelectedBreakdown = selectedBreakdown.value
+
+	if (!nextFetchRequest || selectedProjectIdSet.value.size === 0) {
+		return []
+	}
+
+	const sliceCount = getSliceCount(nextFetchRequest.time_range, nextTimeSlices.length)
+	const includeDate = includeDateColumn.value
+
+	const breakdownValues = new Set<string>()
+	if (nextSelectedBreakdown === 'none') {
+		for (const projectId of selectedProjectIdSet.value) {
+			breakdownValues.add(projectId)
+		}
+	} else {
+		for (const slice of nextTimeSlices) {
+			for (const point of slice) {
+				if (!('source_project' in point)) continue
+				if (!selectedProjectIdSet.value.has(point.source_project)) continue
+				if (!doesAnalyticsPointMatchFilters(point, selectedFilters.value)) continue
+
+				const pointStat = getStatForMetric(point.metric_kind)
+				if (!pointStat || !relevantStats.value.has(pointStat)) continue
+
+				const breakdownValue = getBreakdownValue(point, nextSelectedBreakdown)
+				if (breakdownValue === ALL_BREAKDOWN_VALUE) continue
+				breakdownValues.add(breakdownValue)
+			}
+		}
+	}
+
+	if (breakdownValues.size === 0) {
+		return []
+	}
+
+	const nextRows = new Map<string, AnalyticsTableRow>()
+
+	if (includeDate) {
+		for (let sliceIndex = 0; sliceIndex < sliceCount; sliceIndex++) {
+			const bucketRange = getSliceBucketRange(nextFetchRequest.time_range, sliceCount, sliceIndex)
+			const dateMs = bucketRange.end.getTime()
+			const dateLabel = formatBucketEndLabel(
+				bucketRange.end,
+				showTimeInBucketLabel.value,
+				showYearInBucketLabel.value,
+			)
+
+			for (const breakdown of breakdownValues) {
+				const rowId = `${dateMs}::${breakdown}`
+				nextRows.set(rowId, {
+					id: rowId,
+					date: dateLabel,
+					dateMs,
+					breakdown,
+					views: 0,
+					downloads: 0,
+					revenue: 0,
+					playtime: 0,
+				})
+			}
+		}
+	} else {
+		for (const breakdown of breakdownValues) {
+			nextRows.set(breakdown, {
+				id: breakdown,
+				date: '',
+				dateMs: 0,
+				breakdown,
+				views: 0,
+				downloads: 0,
+				revenue: 0,
+				playtime: 0,
+			})
+		}
+	}
+
+	nextTimeSlices.forEach((slice, sliceIndex) => {
+		const bucketRange = getSliceBucketRange(nextFetchRequest.time_range, sliceCount, sliceIndex)
+		const dateMs = bucketRange.end.getTime()
+
+		for (const point of slice) {
+			if (!('source_project' in point)) {
+				continue
+			}
+
+			if (!selectedProjectIdSet.value.has(point.source_project)) {
+				continue
+			}
+
+			if (!doesAnalyticsPointMatchFilters(point, selectedFilters.value)) {
+				continue
+			}
+
+			const pointStat = getStatForMetric(point.metric_kind)
+			if (!pointStat || !relevantStats.value.has(pointStat)) {
+				continue
+			}
+
+			const breakdown =
+				nextSelectedBreakdown === 'none'
+					? point.source_project
+					: getBreakdownValue(point, nextSelectedBreakdown)
+			if (nextSelectedBreakdown !== 'none' && breakdown === ALL_BREAKDOWN_VALUE) {
+				continue
+			}
+
+			const rowId = includeDate ? `${dateMs}::${breakdown}` : breakdown
+			const row = nextRows.get(rowId)
+			if (row) {
+				addMetricToRow(row, point)
+			}
+		}
+	})
+
+	return Array.from(nextRows.values())
+})
+
+const columns = computed<TableColumn<TableColumnKey>[]>(() => {
+	const nextColumns: TableColumn<TableColumnKey>[] = []
+
+	const stats = getRelevantAnalyticsDashboardStats(selectedBreakdown.value, selectedFilters.value)
+
+	if (includeDateColumn.value) {
+		nextColumns.push({
+			key: 'date',
+			label: 'Date',
+			enableSorting: true,
+			width: stats.length > 2 ? '20%' : '',
+		})
+	}
+
+	if (showBreakdownColumn.value) {
+		nextColumns.push({
+			key: 'breakdown',
+			label: breakdownColumnLabel.value,
+			enableSorting: true,
+		})
+	}
+
+	for (const stat of stats) {
+		const column = getMetricColumnForStat(stat)
+		if (column) {
+			nextColumns.push(column)
+		}
+	}
+
+	return nextColumns
+})
+
+watch(
+	columns,
+	(nextColumns) => {
+		const availableColumns = new Set(nextColumns.map((column) => column.key))
+		if (sortColumn.value && availableColumns.has(sortColumn.value)) {
+			return
+		}
+
+		applyDefaultSort(nextColumns)
+	},
+	{ immediate: true },
+)
+
+watch(includeDateColumn, () => {
+	applyDefaultSort()
+})
+
+const sortedRows = computed<AnalyticsTableRow[]>(() => {
+	const rows = [...tableRows.value]
+	const activeSortColumn = sortColumn.value
+
+	if (!activeSortColumn) {
+		return rows
+	}
+
+	const directionFactor = sortDirection.value === 'asc' ? 1 : -1
+
+	rows.sort((left, right) => {
+		const primaryResult = getSortComparison(left, right, activeSortColumn)
+		if (primaryResult !== 0) {
+			return primaryResult * directionFactor
+		}
+
+		const dateResult = left.dateMs - right.dateMs
+		if (dateResult !== 0) {
+			return dateResult * directionFactor
+		}
+
+		return (
+			left.breakdown.localeCompare(right.breakdown, undefined, { sensitivity: 'base' }) *
+			directionFactor
+		)
+	})
+
+	return rows
+})
+
+const revenueFormatter = computed(
+	() =>
+		new Intl.NumberFormat(undefined, {
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2,
+		}),
+)
+
+function formatInteger(value: number): string {
+	return formatNumber(Math.round(value))
+}
+
+function formatRevenue(value: number): string {
+	const rounded = Math.round(value * 100) / 100
+	return `$${revenueFormatter.value.format(rounded)}`
+}
+
+function addMetricToRow(row: AnalyticsTableRow, point: Labrinth.Analytics.v3.ProjectAnalytics) {
+	switch (point.metric_kind) {
+		case 'views':
+			row.views += point.views
+			break
+		case 'downloads':
+			row.downloads += point.downloads
+			break
+		case 'playtime':
+			row.playtime += point.seconds
+			break
+		case 'revenue': {
+			const parsed = Number.parseFloat(point.revenue)
+			row.revenue += Number.isFinite(parsed) ? parsed : 0
+			break
+		}
+	}
+}
+
+function getStatForMetric(
+	metricKind: Labrinth.Analytics.v3.ProjectAnalytics['metric_kind'],
+): AnalyticsDashboardStat | null {
+	switch (metricKind) {
+		case 'views':
+		case 'downloads':
+		case 'revenue':
+		case 'playtime':
+			return metricKind
+		default:
+			return null
+	}
+}
+
+function getMetricColumnForStat(stat: AnalyticsDashboardStat): TableColumn<TableColumnKey> | null {
+	switch (stat) {
+		case 'views':
+			return {
+				key: 'views',
+				label: 'Views',
+				enableSorting: true,
+				align: 'right',
+			}
+		case 'downloads':
+			return {
+				key: 'downloads',
+				label: 'Downloads',
+				enableSorting: true,
+				align: 'right',
+			}
+		case 'revenue':
+			return {
+				key: 'revenue',
+				label: 'Revenue',
+				enableSorting: true,
+				align: 'right',
+			}
+		case 'playtime':
+			return {
+				key: 'playtime',
+				label: 'Playtime',
+				enableSorting: true,
+				align: 'right',
+			}
+		default:
+			return null
+	}
+}
+
+function applyDefaultSort(nextColumns = columns.value) {
+	const nextSortColumn = getDefaultSortColumn(nextColumns)
+	sortColumn.value = nextSortColumn
+	sortDirection.value = getDefaultSortDirection(nextSortColumn)
+}
+
+function getDefaultSortColumn(
+	nextColumns: TableColumn<TableColumnKey>[],
+): TableColumnKey | undefined {
+	const availableColumns = new Set(nextColumns.map((column) => column.key))
+	if (availableColumns.has('date')) {
+		return 'date'
+	}
+
+	if (availableColumns.has('downloads')) {
+		return 'downloads'
+	}
+
+	return nextColumns[0]?.key
+}
+
+function getDefaultSortDirection(column: TableColumnKey | undefined): SortDirection {
+	return column === 'date' || column === 'breakdown' ? 'asc' : 'desc'
+}
+
+function getBreakdownValue(
+	point: Labrinth.Analytics.v3.ProjectAnalytics,
+	selectedBreakdown: AnalyticsBreakdownPreset,
+): string {
+	return getAnalyticsBreakdownValue(point, selectedBreakdown)
+}
+
+function getSortComparison(
+	left: AnalyticsTableRow,
+	right: AnalyticsTableRow,
+	column: TableColumnKey,
+): number {
+	switch (column) {
+		case 'date':
+			return left.dateMs - right.dateMs
+		case 'breakdown':
+			return formatBreakdownDisplayValue(left.breakdown).localeCompare(
+				formatBreakdownDisplayValue(right.breakdown),
+				undefined,
+				{ sensitivity: 'base' },
+			)
+		case 'views':
+			return left.views - right.views
+		case 'downloads':
+			return left.downloads - right.downloads
+		case 'revenue':
+			return left.revenue - right.revenue
+		case 'playtime':
+			return left.playtime - right.playtime
+		default:
+			return 0
+	}
+}
+
+function formatBreakdownDisplayValue(value: string): string {
+	if (selectedBreakdown.value === 'none') {
+		return projectNamesById.value.get(value) ?? value
+	}
+	return formatBreakdownLabel(value, selectedBreakdown.value, getVersionDisplayName)
+}
+
+function getCsvCellValue(row: AnalyticsTableRow, key: TableColumnKey): string | number {
+	switch (key) {
+		case 'date':
+			return row.date
+		case 'breakdown':
+			return formatBreakdownDisplayValue(row.breakdown)
+		case 'views':
+			return row.views
+		case 'downloads':
+			return row.downloads
+		case 'revenue':
+			return row.revenue
+		case 'playtime':
+			return row.playtime
+		default:
+			return ''
+	}
+}
+
+function escapeCsvField(value: string | number): string {
+	const stringValue = String(value)
+	if (
+		stringValue.includes(',') ||
+		stringValue.includes('"') ||
+		stringValue.includes('\n') ||
+		stringValue.includes('\r')
+	) {
+		return `"${stringValue.replace(/"/g, '""')}"`
+	}
+	return stringValue
+}
+
+function downloadCsv() {
+	if (!import.meta.client || sortedRows.value.length === 0) {
+		return
+	}
+
+	const visibleColumns = columns.value
+	const header = visibleColumns
+		.map((column) => escapeCsvField(column.label ?? column.key))
+		.join(',')
+
+	const rows = sortedRows.value.map((row) =>
+		visibleColumns.map((column) => escapeCsvField(getCsvCellValue(row, column.key))).join(','),
+	)
+
+	const csvContent = [header, ...rows].join('\n')
+	const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+	const url = URL.createObjectURL(blob)
+
+	const downloadLink = document.createElement('a')
+	downloadLink.setAttribute('href', url)
+	downloadLink.setAttribute(
+		'download',
+		`analytics-${includeDateColumn.value ? 'date-breakdown' : 'breakdown-only'}.csv`,
+	)
+	downloadLink.style.visibility = 'hidden'
+
+	document.body.appendChild(downloadLink)
+	downloadLink.click()
+	document.body.removeChild(downloadLink)
+
+	URL.revokeObjectURL(url)
+}
+</script>
diff --git a/apps/frontend/src/components/ui/charts/Chart.client.vue b/apps/frontend/src/components/ui/charts/Chart.client.vue
deleted file mode 100644
index 16ea42aaea..0000000000
--- a/apps/frontend/src/components/ui/charts/Chart.client.vue
+++ /dev/null
@@ -1,495 +0,0 @@
-<script setup>
-import { useFormatDateTime, useFormatMoney, useFormatNumber } from '@modrinth/ui'
-import VueApexCharts from 'vue3-apexcharts'
-
-const props = defineProps({
-	name: {
-		type: String,
-		required: true,
-	},
-	labels: {
-		type: Array,
-		required: true,
-	},
-	data: {
-		type: Array,
-		required: true,
-	},
-	formatLabels: {
-		type: Function,
-	},
-	colors: {
-		type: Array,
-		default: () => [],
-	},
-	prefix: {
-		type: String,
-		default: '',
-	},
-	suffix: {
-		type: String,
-		default: '',
-	},
-	hideToolbar: {
-		type: Boolean,
-		default: false,
-	},
-	hideLegend: {
-		type: Boolean,
-		default: false,
-	},
-	stacked: {
-		type: Boolean,
-		default: false,
-	},
-	type: {
-		type: String,
-		default: 'bar',
-	},
-	hideTotal: {
-		type: Boolean,
-		default: false,
-	},
-	isMoney: {
-		type: Boolean,
-		default: false,
-	},
-	legendPosition: {
-		type: String,
-		default: 'right',
-	},
-	xAxisType: {
-		type: String,
-		default: 'datetime',
-	},
-	percentStacked: {
-		type: Boolean,
-		default: false,
-	},
-	horizontalBar: {
-		type: Boolean,
-		default: false,
-	},
-	disableAnimations: {
-		type: Boolean,
-		default: false,
-	},
-})
-
-const formatNumber = useFormatNumber()
-const formatMoney = useFormatMoney()
-const formatDate = useFormatDateTime({
-	month: 'short',
-	day: 'numeric',
-})
-
-function formatTooltipValue(value, props) {
-	return props.isMoney ? formatMoney(value) : formatNumber(value)
-}
-
-function generateListEntry(value, index, _, w, props) {
-	const color = w.globals.colors?.[index]
-
-	return `<div class="list-entry">
-    <span class="circle" style="background-color: ${color}"></span>
-    <div class="label">
-      ${w.globals.seriesNames[index]}
-    </div>
-    <div class="value">
-      ${props.prefix}${formatTooltipValue(value, props)}${props.suffix}
-    </div>
-  </div>`
-}
-
-function generateTooltip({ series, seriesIndex, dataPointIndex, w }, props) {
-	const label = w.globals.lastXAxis.categories?.[dataPointIndex]
-
-	const formattedLabel = props.formatLabels ? props.formatLabels(label) : formatDate(label)
-
-	let tooltip = `<div class="bar-tooltip">
-    <div class="seperated-entry title">
-      <div class="label">${formattedLabel}</div>`
-
-	// Logic for total and percent stacked
-	if (!props.hideTotal) {
-		if (props.percentStacked) {
-			const total = series.reduce((a, b) => a + (b?.[dataPointIndex] || 0), 0)
-			const percentValue = (100 * series[seriesIndex][dataPointIndex]) / total
-			tooltip += `<div class="value">${props.prefix}${formatNumber(percentValue)}%${
-				props.suffix
-			}</div>`
-		} else {
-			const totalValue = series.reduce((a, b) => a + (b?.[dataPointIndex] || 0), 0)
-			tooltip += `<div class="value">${props.prefix}${formatTooltipValue(totalValue, props)}${
-				props.suffix
-			}</div>`
-		}
-	}
-
-	tooltip += '</div><hr class="card-divider" />'
-
-	// Logic for generating list entries
-	if (props.percentStacked) {
-		tooltip += generateListEntry(
-			series[seriesIndex][dataPointIndex],
-			seriesIndex,
-			seriesIndex,
-			w,
-			props,
-		)
-	} else {
-		const returnTopN = 15
-
-		const listEntries = series
-			.map((value, index) => [
-				value[dataPointIndex],
-				generateListEntry(value[dataPointIndex], index, seriesIndex, w, props),
-			])
-			.filter((value) => value[0] > 0)
-			.sort((a, b) => b[0] - a[0])
-			.slice(0, returnTopN) // Return only the top X entries
-			.map((value) => value[1])
-			.join('')
-
-		tooltip += listEntries
-	}
-
-	tooltip += '</div>'
-	return tooltip
-}
-
-const chartOptions = computed(() => {
-	return {
-		chart: {
-			id: props.name,
-			fontFamily:
-				'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
-			foreColor: 'var(--color-base)',
-			selection: {
-				enabled: true,
-				fill: {
-					color: 'var(--color-brand)',
-				},
-			},
-			toolbar: {
-				show: false,
-			},
-			stacked: props.stacked,
-			stackType: props.percentStacked ? '100%' : 'normal',
-			zoom: {
-				autoScaleYaxis: true,
-			},
-			animations: {
-				enabled: props.disableAnimations,
-			},
-		},
-		xaxis: {
-			type: props.xAxisType,
-			categories: props.labels,
-			labels: {
-				style: {
-					borderRadius: 'var(--radius-sm)',
-				},
-			},
-			axisTicks: {
-				show: false,
-			},
-			tooltip: {
-				enabled: false,
-			},
-		},
-		yaxis: {
-			tooltip: {
-				enabled: false,
-			},
-		},
-		colors: props.colors,
-		dataLabels: {
-			enabled: false,
-			background: {
-				enabled: true,
-				borderRadius: 20,
-			},
-		},
-		grid: {
-			borderColor: 'var(--color-button-bg)',
-			tickColor: 'var(--color-button-bg)',
-		},
-		legend: {
-			show: !props.hideLegend,
-			position: props.legendPosition,
-			showForZeroSeries: false,
-			showForSingleSeries: false,
-			showForNullSeries: false,
-			fontSize: 'var(--font-size-nm)',
-			fontFamily:
-				'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
-			onItemClick: {
-				toggleDataSeries: true,
-			},
-		},
-		markers: {
-			size: 0,
-			strokeColor: 'var(--color-contrast)',
-			strokeWidth: 3,
-			strokeOpacity: 1,
-			fillOpacity: 1,
-			hover: {
-				size: 6,
-			},
-		},
-		plotOptions: {
-			bar: {
-				horizontal: props.horizontalBar,
-				columnWidth: '80%',
-				endingShape: 'rounded',
-				borderRadius: 5,
-				borderRadiusApplication: 'end',
-				borderRadiusWhenStacked: 'last',
-			},
-		},
-		stroke: {
-			curve: 'smooth',
-			width: 2,
-		},
-		tooltip: {
-			custom: (d) => generateTooltip(d, props),
-		},
-		fill:
-			props.type === 'area'
-				? {
-						colors: props.colors,
-						type: 'gradient',
-						opacity: 1,
-						gradient: {
-							shade: 'light',
-							type: 'vertical',
-							shadeIntensity: 0,
-							gradientToColors: props.colors,
-							inverseColors: true,
-							opacityFrom: 0.5,
-							opacityTo: 0,
-							stops: [0, 100],
-							colorStops: [],
-						},
-					}
-				: {},
-	}
-})
-
-const chart = ref(null)
-
-const legendValues = ref(
-	[...props.data].map((project, index) => {
-		return { name: project.name, visible: true, color: props.colors[index] }
-	}),
-)
-
-const flipLegend = (legend, newVal) => {
-	legend.visible = newVal
-	chart.value.toggleSeries(legend.name)
-}
-
-const resetChart = () => {
-	if (!chart.value?.chart) return
-	chart.value.updateSeries([...props.data])
-	chart.value.updateOptions({
-		xaxis: {
-			categories: props.labels,
-		},
-	})
-	chart.value.resetSeries()
-	legendValues.value.forEach((legend) => {
-		legend.visible = true
-	})
-}
-
-defineExpose({
-	resetChart,
-	flipLegend,
-})
-</script>
-
-<template>
-	<VueApexCharts ref="chart" :type="type" :options="chartOptions" :series="data" class="chart" />
-</template>
-
-<style scoped lang="scss">
-.chart {
-	width: 100%;
-	height: 100%;
-}
-
-svg {
-	width: 100%;
-	height: 100%;
-}
-
-.btn {
-	svg {
-		width: 1.25rem;
-		height: 1.25rem;
-	}
-}
-
-.bar-chart {
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-
-	overflow: hidden;
-}
-
-.title-bar {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-xs);
-}
-
-.toolbar {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-xs);
-	z-index: 1;
-	margin-left: auto;
-}
-
-:deep(.apexcharts-menu),
-:deep(.apexcharts-tooltip),
-:deep(.apexcharts-yaxistooltip) {
-	background: var(--color-raised-bg) !important;
-	border-radius: var(--radius-sm) !important;
-	border: 1px solid var(--color-divider) !important;
-	box-shadow: var(--shadow-floating) !important;
-	font-size: var(--font-size-nm) !important;
-}
-
-:deep(.apexcharts-grid-borders) {
-	line {
-		stroke: var(--color-button-bg) !important;
-	}
-}
-
-:deep(.apexcharts-yaxistooltip),
-:deep(.apexcharts-xaxistooltip) {
-	background: var(--color-raised-bg) !important;
-	border-radius: var(--radius-sm) !important;
-	border: 1px solid var(--color-divider) !important;
-	font-size: var(--font-size-nm) !important;
-	color: var(--color-base) !important;
-
-	.apexcharts-xaxistooltip-text {
-		font-size: var(--font-size-nm) !important;
-		color: var(--color-base) !important;
-	}
-}
-
-:deep(.apexcharts-yaxistooltip-left:after) {
-	border-left-color: var(--color-raised-bg) !important;
-}
-
-:deep(.apexcharts-yaxistooltip-left:before) {
-	border-left-color: var(--color-button-bg) !important;
-}
-
-:deep(.apexcharts-xaxistooltip-bottom:after) {
-	border-bottom-color: var(--color-raised-bg) !important;
-}
-
-:deep(.apexcharts-xaxistooltip-bottom:before) {
-	border-bottom-color: var(--color-button-bg) !important;
-}
-
-:deep(.apexcharts-menu-item) {
-	border-radius: var(--radius-sm) !important;
-	padding: var(--gap-xs) var(--gap-sm) !important;
-
-	&:hover {
-		transition: all 0.3s !important;
-		color: var(--color-accent-contrast) !important;
-		background: var(--color-brand) !important;
-	}
-}
-
-:deep(.apexcharts-tooltip) {
-	.bar-tooltip {
-		min-width: 10rem;
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-xs);
-		padding: var(--gap-sm);
-
-		.card-divider {
-			margin: var(--gap-xs) 0;
-		}
-
-		.seperated-entry {
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			align-items: center;
-		}
-
-		.title {
-			font-weight: bolder;
-		}
-
-		.label {
-			margin-right: var(--gap-xl);
-			color: var(--color-contrast);
-		}
-
-		.value {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: var(--gap-xs);
-			color: var(--color-base);
-		}
-
-		.list-entry {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			font-size: var(--font-size-sm);
-
-			.value {
-				margin-left: auto;
-			}
-		}
-
-		.circle {
-			width: 0.75rem;
-			height: 0.75rem;
-			border-radius: 50%;
-			display: inline-block;
-			margin-right: var(--gap-sm);
-			border: 2px solid var(--color-base);
-		}
-
-		svg {
-			height: 1em;
-			width: 1em;
-		}
-	}
-}
-
-.legend {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-lg);
-	justify-content: center;
-}
-
-:deep(.checkbox) {
-	white-space: nowrap;
-}
-
-.legend-checkbox :deep(.checkbox.checked) {
-	background-color: var(--color);
-}
-</style>
diff --git a/apps/frontend/src/components/ui/charts/ChartDisplay.vue b/apps/frontend/src/components/ui/charts/ChartDisplay.vue
deleted file mode 100644
index ea6670f932..0000000000
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ /dev/null
@@ -1,1016 +0,0 @@
-<template>
-	<div>
-		<div v-if="analytics.error.value" class="universal-card">
-			<h2>
-				<span class="label__title">Error</span>
-			</h2>
-			<div>
-				{{ analytics.error.value }}
-			</div>
-		</div>
-		<div v-else-if="analytics.loading.value" class="universal-card">
-			<h2>
-				<span class="label__title">Loading analytics...</span>
-			</h2>
-		</div>
-		<div v-else class="graphs">
-			<div class="graphs__vertical-bar">
-				<client-only>
-					<CompactChart
-						v-if="analytics.formattedData.value.downloads"
-						ref="tinyDownloadChart"
-						:title="`Downloads`"
-						color="var(--color-brand)"
-						:value="formatNumber(analytics.formattedData.value.downloads.sum)"
-						:data="analytics.formattedData.value.downloads.chart.sumData"
-						:labels="analytics.formattedData.value.downloads.chart.labels"
-						suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
-						:class="`clickable chart-button-base button-base ${
-							selectedChart === 'downloads'
-								? 'chart-button-base__selected button-base__selected'
-								: ''
-						}`"
-						:onclick="() => (selectedChart = 'downloads')"
-						role="button"
-					/>
-				</client-only>
-				<client-only>
-					<CompactChart
-						v-if="analytics.formattedData.value.views"
-						ref="tinyViewChart"
-						:title="`Views`"
-						color="var(--color-blue)"
-						:value="formatNumber(analytics.formattedData.value.views.sum)"
-						:data="analytics.formattedData.value.views.chart.sumData"
-						:labels="analytics.formattedData.value.views.chart.labels"
-						suffix="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"
-						:class="`clickable chart-button-base button-base ${
-							selectedChart === 'views' ? 'chart-button-base__selected button-base__selected' : ''
-						}`"
-						:onclick="() => (selectedChart = 'views')"
-						role="button"
-					/>
-				</client-only>
-				<client-only>
-					<CompactChart
-						v-if="analytics.formattedData.value.revenue"
-						ref="tinyRevenueChart"
-						:title="`Revenue`"
-						color="var(--color-purple)"
-						:value="formatMoney(analytics.formattedData.value.revenue.sum)"
-						:data="analytics.formattedData.value.revenue.chart.sumData"
-						:labels="analytics.formattedData.value.revenue.chart.labels"
-						is-money
-						:class="`clickable chart-button-base button-base ${
-							selectedChart === 'revenue' ? 'chart-button-base__selected button-base__selected' : ''
-						}`"
-						:onclick="() => (selectedChart = 'revenue')"
-						role="button"
-					/>
-				</client-only>
-			</div>
-			<div class="graphs__main-graph">
-				<div class="universal-card">
-					<div class="chart-controls">
-						<h2>
-							<span class="label__title">
-								{{ capitalizeString(selectedChart) }}
-							</span>
-							<span class="label__subtitle">
-								{{ formattedCategorySubtitle }}
-							</span>
-						</h2>
-						<div class="chart-controls__buttons">
-							<ButtonStyled circular type="outlined">
-								<button v-tooltip="'Toggle project colors'" @click="onToggleColors">
-									<PaletteIcon />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular type="outlined">
-								<button v-tooltip="'Download this data as CSV'" @click="onDownloadSetAsCSV">
-									<DownloadIcon />
-								</button>
-							</ButtonStyled>
-							<ButtonStyled circular type="outlined">
-								<button v-tooltip="'Refresh the chart'" @click="resetCharts">
-									<UpdatedIcon />
-								</button>
-							</ButtonStyled>
-							<DropdownSelect
-								v-model="selectedRange"
-								class="range-dropdown"
-								:options="ranges"
-								name="Time range"
-								:display-name="
-									(o: RangeObject) => o?.getLabel([startDate, endDate]) ?? 'Loading...'
-								"
-							/>
-						</div>
-					</div>
-					<div class="chart-area">
-						<div class="chart">
-							<client-only>
-								<Chart
-									v-if="analytics.formattedData.value.downloads && selectedChart === 'downloads'"
-									ref="downloadsChart"
-									type="line"
-									name="Download data"
-									:hide-legend="true"
-									:data="analytics.formattedData.value.downloads.chart.data"
-									:labels="analytics.formattedData.value.downloads.chart.labels"
-									suffix="<svg xmlns='http://www.w3.org/2000/svg' class='h-6 w-6' fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'><path stroke-linecap='round' stroke-linejoin='round' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /></svg>"
-									:colors="
-										isUsingProjectColors
-											? analytics.formattedData.value.downloads.chart.colors
-											: analytics.formattedData.value.downloads.chart.defaultColors
-									"
-								/>
-								<Chart
-									v-if="analytics.formattedData.value.views && selectedChart === 'views'"
-									ref="viewsChart"
-									type="line"
-									name="View data"
-									:hide-legend="true"
-									:data="analytics.formattedData.value.views.chart.data"
-									:labels="analytics.formattedData.value.views.chart.labels"
-									suffix="<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"
-									:colors="
-										isUsingProjectColors
-											? analytics.formattedData.value.views.chart.colors
-											: analytics.formattedData.value.views.chart.defaultColors
-									"
-								/>
-								<Chart
-									v-if="analytics.formattedData.value.revenue && selectedChart === 'revenue'"
-									ref="revenueChart"
-									type="line"
-									name="Revenue data"
-									:hide-legend="true"
-									:data="analytics.formattedData.value.revenue.chart.data"
-									:labels="analytics.formattedData.value.revenue.chart.labels"
-									is-money
-									:colors="
-										isUsingProjectColors
-											? analytics.formattedData.value.revenue.chart.colors
-											: analytics.formattedData.value.revenue.chart.defaultColors
-									"
-								/>
-							</client-only>
-						</div>
-						<div class="legend">
-							<div class="legend__items">
-								<template v-for="project in selectedDataSetProjects" :key="project">
-									<button
-										v-tooltip="project.title"
-										:class="`legend__item button-base legend__item-transparent ${
-											!projectIsOnDisplay(project.id) ? 'legend__item-dimmed' : ''
-										}`"
-										@click="
-											() =>
-												projectIsOnDisplay(project.id) &&
-												analytics.validProjectIds.value.includes(project.id)
-													? removeProjectFromDisplay(project.id)
-													: addProjectToDisplay(project.id)
-										"
-									>
-										<div
-											:style="{
-												'--color-brand': isUsingProjectColors
-													? intToRgba(project.color, project.id, theme.active ?? undefined)
-													: getDefaultColor(project.id),
-											}"
-											class="legend__item__color"
-										></div>
-										<div class="legend__item__text">{{ project.title }}</div>
-									</button>
-								</template>
-							</div>
-						</div>
-					</div>
-				</div>
-				<div class="country-data">
-					<Card
-						v-if="
-							analytics.formattedData.value?.downloadsByCountry &&
-							selectedChart === 'downloads' &&
-							analytics.formattedData.value.downloadsByCountry.data.length > 0
-						"
-						class="country-downloads"
-					>
-						<label>
-							<span class="label__title">Downloads by region</span>
-						</label>
-						<div class="country-values">
-							<div
-								v-for="[name, count] in analytics.formattedData.value.downloadsByCountry.data"
-								:key="name"
-								class="country-value"
-							>
-								<div class="country-flag-container">
-									<template v-if="name.toLowerCase() === 'xx' || !name">
-										<div
-											class="country-flag flex select-none items-center justify-center bg-bg-raised font-extrabold text-secondary"
-										>
-											?
-										</div>
-									</template>
-									<template v-else>
-										<img
-											:src="countryCodeToFlag(name)"
-											:alt="`${countryCodeToName(name)}'s flag`"
-											class="country-flag"
-										/>
-									</template>
-								</div>
-								<div class="country-text">
-									<strong class="country-name"
-										><template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
-										<template v-else>{{ countryCodeToName(name) }}</template>
-									</strong>
-									<span class="data-point">{{ formatCompactNumber(count) }}</span>
-								</div>
-								<div
-									v-tooltip="
-										formatPercent(count, analytics.formattedData.value.downloadsByCountry.sum)
-									"
-									class="percentage-bar"
-								>
-									<span
-										:style="{
-											width: formatPercent(
-												count,
-												analytics.formattedData.value.downloadsByCountry.sum,
-											),
-											backgroundColor: 'var(--color-brand)',
-										}"
-									></span>
-								</div>
-							</div>
-						</div>
-					</Card>
-					<Card
-						v-if="
-							analytics.formattedData.value?.viewsByCountry &&
-							selectedChart === 'views' &&
-							analytics.formattedData.value.viewsByCountry.data.length > 0
-						"
-						class="country-downloads"
-					>
-						<label>
-							<span class="label__title">Page views by region</span>
-						</label>
-						<div class="country-values">
-							<div
-								v-for="[name, count] in analytics.formattedData.value.viewsByCountry.data"
-								:key="name"
-								class="country-value"
-							>
-								<div class="country-flag-container">
-									<template v-if="name.toLowerCase() === 'xx' || !name">
-										<div
-											class="country-flag flex select-none items-center justify-center bg-bg-raised font-extrabold text-secondary"
-										>
-											?
-										</div>
-									</template>
-									<template v-else>
-										<img
-											:src="countryCodeToFlag(name)"
-											:alt="`${countryCodeToName(name)}'s flag`"
-											class="country-flag"
-										/>
-									</template>
-								</div>
-								<div class="country-text">
-									<strong class="country-name">
-										<template v-if="name.toLowerCase() === 'xx' || !name">Other</template>
-										<template v-else>{{ countryCodeToName(name) }}</template>
-									</strong>
-									<span class="data-point">{{ formatCompactNumber(count) }}</span>
-								</div>
-								<div
-									v-tooltip="
-										`${
-											Math.round(
-												(count / analytics.formattedData.value.viewsByCountry.sum) * 10000,
-											) / 100
-										}%`
-									"
-									class="percentage-bar"
-								>
-									<span
-										:style="{
-											width: `${(count / analytics.formattedData.value.viewsByCountry.sum) * 100}%`,
-											backgroundColor: 'var(--color-blue)',
-										}"
-									></span>
-								</div>
-							</div>
-						</div>
-					</Card>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { DownloadIcon, PaletteIcon, UpdatedIcon } from '@modrinth/assets'
-import {
-	ButtonStyled,
-	Card,
-	DropdownSelect,
-	useCompactNumber,
-	useDebugLogger,
-	useFormatMoney,
-	useFormatNumber,
-} from '@modrinth/ui'
-import { capitalizeString } from '@modrinth/utils'
-import dayjs from 'dayjs'
-import { computed } from 'vue'
-
-import { UiChartsChart as Chart, UiChartsCompactChart as CompactChart } from '#components'
-import { useTheme } from '~/composables/nuxt-accessors.ts'
-import {
-	analyticsSetToCSVString,
-	countryCodeToFlag,
-	countryCodeToName,
-	formatPercent,
-	getDefaultColor,
-	intToRgba,
-} from '~/utils/analytics.js'
-
-const debug = useDebugLogger('ChartDisplay')
-const formatNumber = useFormatNumber()
-const { formatCompactNumber } = useCompactNumber()
-const formatMoney = useFormatMoney()
-
-const router = useNativeRouter()
-const theme = useTheme()
-
-debug('setup start', { server: import.meta.server, client: import.meta.client })
-
-const props = withDefaults(
-	defineProps<{
-		projects?: any[]
-		/**
-		 * @deprecated Use `ranges` instead
-		 */
-		resoloutions?: Record<string, number>
-		ranges?: RangeObject[]
-		personal?: boolean
-	}>(),
-	{
-		projects: undefined,
-		resoloutions: () => defaultResoloutions,
-		ranges: () => defaultRanges,
-		personal: false,
-	},
-)
-
-const projects = computed(() => props.projects || [])
-
-debug('projects from props', {
-	count: projects.value.length,
-	ids: projects.value.map((p: any) => p.id),
-})
-
-// const selectedChart = ref('downloads')
-const selectedChart = computed({
-	get: () => {
-		const id = (router.currentRoute.value.query?.chart as string | undefined) || 'downloads'
-		// if the id is anything but the 3 charts we have or undefined, throw an error
-		if (!['downloads', 'views', 'revenue'].includes(id)) {
-			throw new Error(`Unknown chart ${id}`)
-		}
-		return id
-	},
-	set: (chart) => {
-		router.push({
-			query: {
-				...router.currentRoute.value.query,
-				chart,
-			},
-		})
-	},
-})
-
-// Chart refs
-const downloadsChart = ref()
-const viewsChart = ref()
-const revenueChart = ref()
-const tinyDownloadChart = ref()
-const tinyViewChart = ref()
-const tinyRevenueChart = ref()
-
-const selectedDisplayProjects = ref(props.projects || [])
-
-watch(
-	() => props.projects,
-	(newProjects) => {
-		selectedDisplayProjects.value = newProjects || []
-	},
-)
-
-const removeProjectFromDisplay = (id: string) => {
-	selectedDisplayProjects.value = selectedDisplayProjects.value.filter((p) => p.id !== id)
-}
-
-const addProjectToDisplay = (id: string) => {
-	selectedDisplayProjects.value = [
-		...selectedDisplayProjects.value,
-		props.projects?.find((p) => p.id === id),
-	].filter(Boolean)
-}
-
-const projectIsOnDisplay = (id: string) => {
-	return selectedDisplayProjects.value?.some((p) => p.id === id) ?? false
-}
-
-const resetCharts = () => {
-	downloadsChart.value?.resetChart()
-	viewsChart.value?.resetChart()
-	revenueChart.value?.resetChart()
-
-	tinyDownloadChart.value?.resetChart()
-	tinyViewChart.value?.resetChart()
-	tinyRevenueChart.value?.resetChart()
-}
-
-const isUsingProjectColors = computed({
-	get: () => {
-		return (
-			router.currentRoute.value.query?.colors === 'true' ||
-			router.currentRoute.value.query?.colors === undefined
-		)
-	},
-	set: (newValue) => {
-		router.push({
-			query: {
-				...router.currentRoute.value.query,
-				colors: newValue ? 'true' : 'false',
-			},
-		})
-	},
-})
-
-const defaultRange = props.ranges.find(
-	(r) => r.getLabel([dayjs(), dayjs()]) === 'Previous 30 days',
-)!
-const initialDates = defaultRange.getDates(dayjs())
-
-const internalRange: Ref<RangeObject> = ref(defaultRange)
-const startDate = ref(initialDates.startDate)
-const endDate = ref(initialDates.endDate)
-const timeResolution = ref(defaultRange.timeResolution)
-
-debug('default range initialized', {
-	range: defaultRange.getLabel([dayjs(), dayjs()]),
-	startDate: startDate.value.toISOString(),
-	endDate: endDate.value.toISOString(),
-	timeResolution: timeResolution.value,
-})
-
-onBeforeMount(() => {
-	debug('onBeforeMount')
-	if (import.meta.client) {
-		const rangeLabel = localStorage.getItem('analyticsSelectedRange')
-		debug('localStorage range', { rangeLabel })
-		if (rangeLabel) {
-			const range = props.ranges.find((r) => r.getLabel([dayjs(), dayjs()]) === rangeLabel)
-
-			if (range) {
-				internalRange.value = range
-				const dates = range.getDates(dayjs())
-				timeResolution.value = range.timeResolution
-				startDate.value = dates.startDate
-				endDate.value = dates.endDate
-				debug('range overridden from localStorage', {
-					startDate: dates.startDate.toISOString(),
-					endDate: dates.endDate.toISOString(),
-					timeResolution: range.timeResolution,
-				})
-			}
-		}
-	}
-})
-
-const selectedRange = computed({
-	get: () => {
-		return internalRange.value
-	},
-	set: (newRange) => {
-		const ranges = newRange.getDates(dayjs())
-		startDate.value = ranges.startDate
-		endDate.value = ranges.endDate
-		timeResolution.value = newRange.timeResolution
-
-		internalRange.value = newRange
-
-		if (import.meta.client) {
-			localStorage.setItem(
-				'analyticsSelectedRange',
-				internalRange.value?.getLabel([dayjs(), dayjs()]) ?? 'Previous 30 days',
-			)
-		}
-	},
-})
-
-debug('calling useFetchAllAnalytics')
-const analytics = useFetchAllAnalytics(
-	resetCharts,
-	projects,
-	selectedDisplayProjects,
-	props.personal,
-	startDate,
-	endDate,
-	timeResolution,
-)
-
-debug('awaiting analytics.fetch()')
-await analytics.fetch()
-debug('analytics.fetch() resolved', {
-	loading: analytics.loading.value,
-	error: analytics.error.value,
-})
-
-const formattedCategorySubtitle = computed(() => {
-	return (
-		selectedRange.value?.getLabel([dayjs(startDate.value), dayjs(endDate.value)]) ?? 'Loading...'
-	)
-})
-
-const selectedDataSet = computed(() => {
-	switch (selectedChart.value) {
-		case 'downloads':
-			return analytics.totalData.value.downloads
-		case 'views':
-			return analytics.totalData.value.views
-		case 'revenue':
-			return analytics.totalData.value.revenue
-		default:
-			throw new Error(`Unknown chart ${selectedChart.value}`)
-	}
-})
-const selectedDataSetProjects = computed(() => {
-	return selectedDataSet.value.projectIds
-		.map((id) => props.projects?.find((p) => p?.id === id))
-		.filter(Boolean)
-})
-
-const downloadSelectedSetAsCSV = () => {
-	const selectedChartName = selectedChart.value
-
-	const csv = analyticsSetToCSVString(selectedDataSet.value)
-
-	const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
-
-	const link = document.createElement('a')
-	const url = URL.createObjectURL(blob)
-	link.setAttribute('href', url)
-	link.setAttribute('download', `${selectedChartName}-data.csv`)
-	link.style.visibility = 'hidden'
-	document.body.appendChild(link)
-
-	link.click()
-}
-
-const onDownloadSetAsCSV = useClientTry(async () => await downloadSelectedSetAsCSV())
-const onToggleColors = () => {
-	isUsingProjectColors.value = !isUsingProjectColors.value
-}
-</script>
-
-<script lang="ts">
-/**
- * @deprecated Use `ranges` instead
- */
-const defaultResoloutions: Record<string, number> = {
-	'5 minutes': 5,
-	'30 minutes': 30,
-	'An hour': 60,
-	'12 hours': 720,
-	'A day': 1440,
-	'A week': 10080,
-}
-
-type DateRange = { startDate: dayjs.Dayjs; endDate: dayjs.Dayjs }
-
-type RangeObject = {
-	getLabel: (dateRange: [dayjs.Dayjs, dayjs.Dayjs]) => string
-	getDates: (currentDate: dayjs.Dayjs) => DateRange
-	// A time resolution in minutes.
-	timeResolution: number
-}
-
-const defaultRanges: RangeObject[] = [
-	{
-		getLabel: () => 'Previous 30 minutes',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(30, 'minute'),
-			endDate: currentDate,
-		}),
-		timeResolution: 1,
-	},
-	{
-		getLabel: () => 'Previous hour',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'hour'),
-			endDate: currentDate,
-		}),
-		timeResolution: 5,
-	},
-	{
-		getLabel: () => 'Previous 12 hours',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(12, 'hour'),
-			endDate: currentDate,
-		}),
-		timeResolution: 12,
-	},
-	{
-		getLabel: () => 'Previous 24 hours',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'day'),
-			endDate: currentDate,
-		}),
-		timeResolution: 30,
-	},
-	{
-		getLabel: () => 'Today',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).startOf('day'),
-			endDate: currentDate,
-		}),
-		timeResolution: 30,
-	},
-	{
-		getLabel: () => 'Yesterday',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'day').startOf('day'),
-			endDate: dayjs(currentDate).startOf('day').subtract(1, 'second'),
-		}),
-		timeResolution: 30,
-	},
-	{
-		getLabel: () => 'This week',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).startOf('week').add(1, 'hour'),
-			endDate: currentDate,
-		}),
-		timeResolution: 360,
-	},
-	{
-		getLabel: () => 'Last week',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'week').startOf('week').add(1, 'hour'),
-			endDate: dayjs(currentDate).startOf('week').subtract(1, 'second'),
-		}),
-		timeResolution: 1440,
-	},
-	{
-		getLabel: () => 'Previous 7 days',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).startOf('day').subtract(7, 'day').add(1, 'hour'),
-			endDate: currentDate.startOf('day'),
-		}),
-		timeResolution: 720,
-	},
-	{
-		getLabel: () => 'This month',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).startOf('month').add(1, 'hour'),
-			endDate: currentDate,
-		}),
-		timeResolution: 1440,
-	},
-	{
-		getLabel: () => 'Last month',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'month').startOf('month').add(1, 'hour'),
-			endDate: dayjs(currentDate).startOf('month').subtract(1, 'second'),
-		}),
-		timeResolution: 1440,
-	},
-	{
-		getLabel: () => 'Previous 30 days',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).startOf('day').subtract(30, 'day').add(1, 'hour'),
-			endDate: currentDate.startOf('day'),
-		}),
-		timeResolution: 1440,
-	},
-	{
-		getLabel: () => 'This quarter',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).startOf('quarter').add(1, 'hour'),
-			endDate: currentDate,
-		}),
-		timeResolution: 1440,
-	},
-	{
-		getLabel: () => 'Last quarter',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'quarter').startOf('quarter').add(1, 'hour'),
-			endDate: dayjs(currentDate).startOf('quarter').subtract(1, 'second'),
-		}),
-		timeResolution: 1440,
-	},
-	{
-		getLabel: () => 'This year',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).startOf('year'),
-			endDate: currentDate,
-		}),
-		timeResolution: 20160,
-	},
-	{
-		getLabel: () => 'Last year',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'year').startOf('year'),
-			endDate: dayjs(currentDate).startOf('year').subtract(1, 'second'),
-		}),
-		timeResolution: 20160,
-	},
-	{
-		getLabel: () => 'Previous year',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(1, 'year'),
-			endDate: dayjs(currentDate),
-		}),
-		timeResolution: 40320,
-	},
-	{
-		getLabel: () => 'Previous two years',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(currentDate).subtract(2, 'year'),
-			endDate: currentDate,
-		}),
-		timeResolution: 40320,
-	},
-	{
-		getLabel: () => 'All Time',
-		getDates: (currentDate: dayjs.Dayjs) => ({
-			startDate: dayjs(0),
-			endDate: currentDate,
-		}),
-		timeResolution: 40320,
-	},
-]
-</script>
-
-<style scoped lang="scss">
-.chart-controls {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: flex-start;
-	gap: var(--gap-md);
-
-	.chart-controls__buttons {
-		display: flex;
-		flex-direction: row;
-		gap: var(--gap-xs);
-
-		* {
-			width: auto;
-			min-height: auto;
-		}
-	}
-
-	h2 {
-		display: flex;
-		flex-direction: column;
-
-		.label__subtitle {
-			font-size: var(--font-size-sm);
-			color: var(--color-text-secondary);
-		}
-	}
-}
-
-.range-dropdown {
-	font-size: var(--font-size-sm);
-}
-
-.chart-area {
-	display: flex;
-	flex-direction: row;
-	gap: var(--gap-md);
-
-	height: 100%;
-
-	.chart {
-		flex-grow: 1;
-		flex-shrink: 1;
-
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-md);
-	}
-
-	.legend {
-		margin-top: 24px;
-		overflow: hidden;
-
-		max-width: 26ch;
-		width: fit-content;
-
-		.legend__items {
-			display: flex;
-			flex-direction: column;
-			gap: var(--gap-xs);
-
-			.legend__item {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-				gap: var(--gap-xs);
-				font-size: var(--font-size-sm);
-				width: 100%;
-
-				.legend__item__text {
-					white-space: nowrap;
-					text-overflow: ellipsis;
-				}
-
-				.legend__item__color {
-					height: var(--font-size-xs);
-					width: var(--font-size-xs);
-					border-radius: var(--radius-sm);
-					background-color: var(--color-brand);
-
-					flex-grow: 0;
-					flex-shrink: 0;
-				}
-			}
-		}
-	}
-}
-
-.legend__item-transparent {
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-
-	color: var(--text-color);
-	font-weight: var(--font-weight-regular);
-}
-
-.legend__item-dimmed {
-	opacity: 0.5;
-}
-
-.chart-button-base {
-	overflow: hidden;
-}
-
-.chart-button-base__selected {
-	color: var(--color-contrast);
-	background-color: var(--color-brand-highlight);
-	box-shadow:
-		inset 0 0 0 transparent,
-		0 0 0 2px var(--color-brand);
-
-	&:hover {
-		background-color: var(--color-brand-highlight);
-	}
-}
-
-.graphs {
-	// Pages clip so we need to add a margin
-	margin-left: 0.25rem;
-	margin-top: 0.25rem;
-
-	display: flex;
-	flex-direction: column;
-
-	.graphs__vertical-bar {
-		flex-grow: 0;
-		flex-shrink: 0;
-		gap: 0.75rem;
-		display: flex;
-		margin-right: 0.1rem;
-	}
-}
-
-.country-flag-container {
-	width: 40px;
-	height: 27px;
-
-	display: flex;
-	justify-content: center;
-	align-items: center;
-
-	overflow: hidden;
-
-	border: 1px solid var(--color-divider);
-	border-radius: var(--radius-xs);
-}
-
-.country-flag {
-	object-fit: cover;
-
-	min-width: 100%;
-	min-height: 100%;
-}
-
-.spark-data {
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	gap: var(--gap-md);
-}
-
-.country-data {
-	display: grid;
-	grid-template-columns: 1fr;
-	gap: var(--gap-md);
-}
-
-.country-values {
-	display: flex;
-	flex-direction: column;
-	background-color: var(--color-bg);
-	border-radius: var(--radius-sm);
-	border: 1px solid var(--color-divider);
-	gap: var(--gap-md);
-	padding: var(--gap-md);
-	margin-top: var(--gap-md);
-	overflow-y: auto;
-	max-height: 24rem;
-}
-
-.country-value {
-	display: grid;
-	grid-template-areas: 'flag text bar';
-	grid-template-columns: auto 1fr 10rem;
-	align-items: center;
-	justify-content: space-between;
-	width: 100%;
-	gap: var(--gap-sm);
-
-	.country-text {
-		grid-area: text;
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-xs);
-	}
-
-	.percentage-bar {
-		grid-area: bar;
-		width: 100%;
-		height: 1rem;
-		background-color: var(--color-raised-bg);
-		border: 1px solid var(--color-divider);
-		border-radius: var(--radius-sm);
-		overflow: hidden;
-
-		span {
-			display: block;
-			height: 100%;
-		}
-	}
-}
-
-@media (max-width: 768px) {
-	.chart-area {
-		flex-direction: column;
-		gap: var(--gap-md);
-	}
-
-	.chart-controls {
-		flex-direction: column;
-		gap: var(--gap-md);
-	}
-
-	.chart {
-		flex-direction: column;
-		gap: var(--gap-md);
-	}
-
-	.legend {
-		margin-top: 0px;
-		width: 100%;
-		max-width: 100%;
-	}
-
-	.graphs {
-		margin-left: 0px;
-		margin-top: 0px;
-
-		.graphs__vertical-bar {
-			flex-direction: column;
-			gap: 0;
-			margin-right: 0px;
-		}
-	}
-
-	.country-data {
-		display: block;
-	}
-
-	.country-value {
-		grid-template-columns: auto 1fr 5rem;
-	}
-}
-</style>
diff --git a/apps/frontend/src/components/ui/charts/CompactChart.client.vue b/apps/frontend/src/components/ui/charts/CompactChart.client.vue
deleted file mode 100644
index 1a76864196..0000000000
--- a/apps/frontend/src/components/ui/charts/CompactChart.client.vue
+++ /dev/null
@@ -1,281 +0,0 @@
-<script setup>
-import { Card } from '@modrinth/ui'
-import VueApexCharts from 'vue3-apexcharts'
-
-// let VueApexCharts
-// if (import.meta.client) {
-//   VueApexCharts = defineAsyncComponent(() => import('vue3-apexcharts'))
-// }
-
-const props = defineProps({
-	value: {
-		type: String,
-		default: '',
-	},
-	title: {
-		type: String,
-		default: '',
-	},
-	data: {
-		type: Array,
-		default: () => [],
-	},
-	labels: {
-		type: Array,
-		default: () => [],
-	},
-	prefix: {
-		type: String,
-		default: '',
-	},
-	suffix: {
-		type: String,
-		default: '',
-	},
-	isMoney: {
-		type: Boolean,
-		default: false,
-	},
-	color: {
-		type: String,
-		default: 'var(--color-brand)',
-	},
-})
-
-// no grid lines, no toolbar, no legend, no data labels
-const chartOptions = {
-	chart: {
-		id: props.title,
-		fontFamily:
-			'Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Roboto, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
-		foreColor: 'var(--color-base)',
-		toolbar: {
-			show: false,
-		},
-		zoom: {
-			enabled: false,
-		},
-		sparkline: {
-			enabled: true,
-		},
-		parentHeightOffset: 0,
-	},
-	stroke: {
-		curve: 'smooth',
-		width: 2,
-	},
-	fill: {
-		colors: [props.color],
-		type: 'gradient',
-		opacity: 1,
-		gradient: {
-			shade: 'light',
-			type: 'vertical',
-			shadeIntensity: 0,
-			gradientToColors: [props.color],
-			inverseColors: true,
-			opacityFrom: 0.5,
-			opacityTo: 0,
-			stops: [0, 100],
-			colorStops: [],
-		},
-	},
-	grid: {
-		show: false,
-	},
-	legend: {
-		show: false,
-	},
-	colors: [props.color],
-	dataLabels: {
-		enabled: false,
-	},
-	xaxis: {
-		type: 'datetime',
-		categories: props.labels,
-		labels: {
-			show: false,
-		},
-		axisTicks: {
-			show: false,
-		},
-		tooltip: {
-			enabled: false,
-		},
-	},
-	yaxis: {
-		labels: {
-			show: false,
-		},
-		axisBorder: {
-			show: false,
-		},
-		axisTicks: {
-			show: false,
-		},
-		tooltip: {
-			enabled: false,
-		},
-	},
-	tooltip: {
-		enabled: false,
-	},
-}
-
-const chart = ref(null)
-
-const resetChart = () => {
-	if (!chart.value?.chart) return
-	chart.value.updateSeries([...props.data])
-	chart.value.updateOptions({
-		xaxis: {
-			categories: props.labels,
-		},
-	})
-	chart.value.resetSeries()
-}
-
-defineExpose({
-	resetChart,
-})
-</script>
-
-<template>
-	<Card class="compact-chart">
-		<h1 class="value">
-			{{ value }}
-		</h1>
-		<div class="subtitle">
-			{{ title }}
-		</div>
-		<div class="chart">
-			<VueApexCharts ref="chart" type="area" :options="chartOptions" :series="data" height="70" />
-		</div>
-	</Card>
-</template>
-
-<style scoped lang="scss">
-.compact-chart {
-	display: flex;
-	flex-direction: column;
-
-	gap: var(--gap-xs);
-	border: 1px solid var(--color-divider);
-	border-radius: var(--radius-md);
-	background-color: var(--color-raised-bg);
-	box-shadow: var(--shadow-card);
-
-	color: var(--color-base);
-	font-size: var(--font-size-nm);
-
-	width: 100%;
-
-	padding-top: var(--gap-xl);
-	padding-bottom: 0;
-
-	.value {
-		margin: 0;
-	}
-}
-
-.chart {
-	// width: calc(100% + 3rem);
-	margin: 0 -1.5rem 0.25rem -1.5rem;
-}
-
-svg {
-	width: 100%;
-	height: 100%;
-}
-
-:deep(.apexcharts-menu),
-:deep(.apexcharts-tooltip),
-:deep(.apexcharts-yaxistooltip) {
-	background: var(--color-raised-bg) !important;
-	border-radius: var(--radius-sm) !important;
-	border: 1px solid var(--color-divider) !important;
-	box-shadow: var(--shadow-floating) !important;
-	font-size: var(--font-size-nm) !important;
-}
-
-:deep(.apexcharts-graphical) {
-	width: 100%;
-}
-
-:deep(.apexcharts-tooltip) {
-	.bar-tooltip {
-		display: flex;
-		flex-direction: column;
-		gap: var(--gap-xs);
-		padding: var(--gap-sm);
-
-		.card-divider {
-			margin: var(--gap-xs) 0;
-		}
-
-		.label {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-		}
-
-		.value {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			gap: var(--gap-xs);
-			color: var(--color-base);
-		}
-
-		.list-entry {
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			gap: var(--gap-md);
-		}
-
-		.circle {
-			width: 0.5rem;
-			height: 0.5rem;
-			border-radius: 50%;
-			display: inline-block;
-			margin-right: var(--gap-sm);
-		}
-
-		svg {
-			height: 1em;
-			width: 1em;
-		}
-
-		.divider {
-			font-size: var(--font-size-lg);
-			font-weight: 400;
-		}
-	}
-}
-
-.legend {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--gap-md);
-	justify-content: center;
-}
-
-:deep(.apexcharts-grid-borders) {
-	line {
-		stroke: var(--color-button-bg) !important;
-	}
-}
-
-:deep(.apexcharts-xaxis) {
-	line {
-		stroke: none;
-	}
-}
-
-.legend-checkbox :deep(.checkbox.checked) {
-	background-color: var(--color);
-}
-</style>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 48c723ed05..b5e0e0c1f3 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -453,7 +453,7 @@
 				<OverflowMenu
 					v-if="auth.user"
 					:dropdown-id="`${basePopoutId}-user`"
-					class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1"
+					class="btn-dropdown-animation flex items-center gap-1 rounded-xl bg-transparent px-2 py-1 pr-1"
 					:options="userMenuOptions"
 				>
 					<Avatar :src="auth.user.avatar_url" aria-hidden="true" circle />
@@ -1212,6 +1212,10 @@ async function logoutUser() {
 }
 
 function runAnalytics() {
+	if (import.meta.dev) {
+		return
+	}
+
 	const config = useRuntimeConfig()
 	const replacedUrl = config.public.apiBaseUrl.replace('v2/', '')
 
diff --git a/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue b/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
index ce57caf281..447eb7eae7 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
@@ -1,30 +1,7 @@
 <template>
-	<div>
-		<div class="universal-card">
-			<h2>Analytics</h2>
-
-			<p>
-				This page shows you the analytics for your project,
-				<strong>{{ project.title }}</strong
-				>. You can see the number of downloads, page views and revenue earned for your project, as
-				well as the total downloads and page views for {{ project.title }} by country.
-			</p>
-		</div>
-
-		<ChartDisplay :projects="[project]" />
-	</div>
+	<AnalyticsDashboard />
 </template>
 
-<script setup>
-import { injectProjectPageContext } from '@modrinth/ui'
-
-import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
-
-const { projectV2: project } = injectProjectPageContext()
+<script setup lang="ts">
+import AnalyticsDashboard from '~/components/analytics/AnalyticsDashboard.vue'
 </script>
-
-<style scoped lang="scss">
-.markdown-body {
-	margin-bottom: var(--gap-md);
-}
-</style>
diff --git a/apps/frontend/src/pages/dashboard/analytics.vue b/apps/frontend/src/pages/dashboard/analytics.vue
index ccc5c93eb9..6b57b44eea 100644
--- a/apps/frontend/src/pages/dashboard/analytics.vue
+++ b/apps/frontend/src/pages/dashboard/analytics.vue
@@ -1,30 +1,14 @@
 <template>
-	<div>
-		<Suspense>
-			<ChartDisplay :projects="projects" :personal="true" />
-			<template #fallback>
-				<div class="universal-card">
-					<h2><span class="label__title">Loading analytics...</span></h2>
-				</div>
-			</template>
-		</Suspense>
-	</div>
+	<AnalyticsDashboard />
 </template>
 
 <script setup>
-import {
-	commonProjectSettingsMessages,
-	injectModrinthClient,
-	useDebugLogger,
-	useVIntl,
-} from '@modrinth/ui'
+import { commonProjectSettingsMessages, useVIntl } from '@modrinth/ui'
 
-import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
+import AnalyticsDashboard from '~/components/analytics/AnalyticsDashboard.vue'
 
 const { formatMessage } = useVIntl()
 
-const debug = useDebugLogger('analytics.vue')
-
 definePageMeta({
 	middleware: 'auth',
 })
@@ -32,14 +16,4 @@ definePageMeta({
 useHead({
 	title: () => `${formatMessage(commonProjectSettingsMessages.analytics)} - Modrinth`,
 })
-
-const auth = await useAuth()
-const client = injectModrinthClient()
-const id = auth.value?.user?.id
-
-debug('auth resolved', { id })
-
-const projects = await client.labrinth.users_v2.getProjects(id)
-
-debug('projects resolved', { count: projects?.length })
 </script>
diff --git a/apps/frontend/src/pages/dashboard/revenue/index.vue b/apps/frontend/src/pages/dashboard/revenue/index.vue
index 18eeb44338..a1bbb18090 100644
--- a/apps/frontend/src/pages/dashboard/revenue/index.vue
+++ b/apps/frontend/src/pages/dashboard/revenue/index.vue
@@ -5,7 +5,7 @@
 		:preloaded-payment-data="preloadedPaymentMethods"
 		@refresh-data="refreshData"
 	/>
-	<div class="mb-20 flex flex-col gap-6 lg:pl-8">
+	<div class="mb-20 flex flex-col gap-6 lg:pl-4 lg:pt-1.5">
 		<div class="flex flex-col gap-4 md:gap-5">
 			<div class="flex flex-col gap-1">
 				<span class="text-xl font-semibold text-contrast md:text-2xl">{{
diff --git a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
index 081bc89587..dce239756c 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
@@ -1,28 +1,9 @@
 <template>
 	<div class="normal-page__content">
-		<div class="universal-card">
-			<h2>Analytics</h2>
-
-			<p>
-				This page shows you the analytics for your organization's projects. You can see the number
-				of downloads, page views and revenue earned for all of your projects, as well as the total
-				downloads and page views for each project by country.
-			</p>
-		</div>
-
-		<ChartDisplay :projects="projects.map((x) => ({ title: x.name, ...x }))" />
+		<AnalyticsDashboard />
 	</div>
 </template>
 
-<script setup>
-import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
-import { injectOrganizationContext } from '~/providers/organization-context.ts'
-
-const { projects } = injectOrganizationContext()
+<script setup lang="ts">
+import AnalyticsDashboard from '~/components/analytics/AnalyticsDashboard.vue'
 </script>
-
-<style scoped lang="scss">
-.markdown-body {
-	margin-bottom: var(--gap-md);
-}
-</style>
diff --git a/apps/frontend/src/providers/analytics/analytics.ts b/apps/frontend/src/providers/analytics/analytics.ts
new file mode 100644
index 0000000000..74838a8883
--- /dev/null
+++ b/apps/frontend/src/providers/analytics/analytics.ts
@@ -0,0 +1,1404 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { createContext, injectModrinthClient, type ProjectPageContext } from '@modrinth/ui'
+import { useQuery } from '@tanstack/vue-query'
+import type { ComputedRef, Ref } from 'vue'
+
+import {
+	getEnabledAnalyticsStatsForState,
+	getProjectStatusFilterValue,
+	PROJECT_STATUS_FILTER_VALUES,
+	type ProjectStatusFilterValue,
+	sanitizeAnalyticsSelectedFilters,
+} from '~/components/analytics/query-builder/query-filter/queryFilter'
+import { fetchSegmentedWith } from '~/utils/fetch-helpers.ts'
+
+import type { OrganizationContext } from '../organization-context'
+import {
+	type AnalyticsBreakdownPreset,
+	type AnalyticsGroupByPreset,
+	type AnalyticsLastTimeframeUnit,
+	type AnalyticsSelectedFilters,
+	type AnalyticsTimeframeMode,
+	type AnalyticsTimeframePreset,
+	areSelectedFiltersEqual,
+	areStringArraysEqual,
+	buildAnalyticsQueryBuilderRouteQuery,
+	hasAnalyticsQueryBuilderRouteChange,
+	readAnalyticsQueryBuilderState,
+} from './query-builder-url'
+
+export type {
+	AnalyticsBreakdownPreset,
+	AnalyticsGroupByPreset,
+	AnalyticsLastTimeframeUnit,
+	AnalyticsQueryFilterCategory,
+	AnalyticsSelectedFilters,
+	AnalyticsTimeframeMode,
+	AnalyticsTimeframePreset,
+} from './query-builder-url'
+
+export type AnalyticsDashboardStat = 'views' | 'downloads' | 'revenue' | 'playtime'
+
+const MINECRAFT_JAVA_SERVER_PROJECT_TYPE = 'minecraft_java_server'
+const ANALYTICS_START_TIMESTAMP = '2023-01-01T00:00:00.000Z'
+const ANALYTICS_START_TIME = new Date(ANALYTICS_START_TIMESTAMP).getTime()
+
+type ProjectTypeMetadata = {
+	project_type?: string | null
+	project_types?: readonly string[] | null
+}
+
+type AnalyticsProjectFetchRequest = Labrinth.Analytics.v3.FetchRequest & {
+	project_ids: string[]
+}
+
+export interface AnalyticsDashboardProject {
+	id: string
+	name: string
+	downloads: number
+	status: ProjectStatusFilterValue
+}
+
+export interface AnalyticsDashboardTotals {
+	views: number
+	downloads: number
+	revenue: number
+	playtime: number
+}
+
+export interface AnalyticsDashboardPercentChanges {
+	views: number
+	downloads: number
+	revenue: number
+	playtime: number
+}
+
+export interface AnalyticsDashboardFilterOptions {
+	countries: string[]
+	downloadSources: string[]
+	downloadReasons: string[]
+	gameVersions: string[]
+	loaderTypes: string[]
+	versionIds: string[]
+}
+
+export interface AnalyticsDashboardContextValue {
+	projects: ComputedRef<AnalyticsDashboardProject[]>
+	selectedProjectIds: Ref<string[]>
+	selectedTimeframeMode: Ref<AnalyticsTimeframeMode>
+	selectedTimeframe: Ref<AnalyticsTimeframePreset>
+	selectedLastTimeframeAmount: Ref<number>
+	selectedLastTimeframeUnit: Ref<AnalyticsLastTimeframeUnit>
+	selectedCustomTimeframeStartDate: Ref<string>
+	selectedCustomTimeframeEndDate: Ref<string>
+	selectedGroupBy: Ref<AnalyticsGroupByPreset>
+	selectedBreakdown: Ref<AnalyticsBreakdownPreset>
+	selectedFilters: Ref<AnalyticsSelectedFilters>
+	queryRefreshTimestamp: Ref<number>
+	fetchRequest: Ref<Labrinth.Analytics.v3.FetchRequest | null>
+	displayedSelectedProjectIds: Ref<string[]>
+	displayedSelectedGroupBy: Ref<AnalyticsGroupByPreset>
+	displayedSelectedBreakdown: Ref<AnalyticsBreakdownPreset>
+	displayedSelectedFilters: Ref<AnalyticsSelectedFilters>
+	displayedFetchRequest: Ref<Labrinth.Analytics.v3.FetchRequest | null>
+	displayedFilterOptions: Ref<AnalyticsDashboardFilterOptions>
+	filterOptions: ComputedRef<AnalyticsDashboardFilterOptions>
+	versionNumbersById: ComputedRef<Map<string, string>>
+	versionPublishedDatesById: ComputedRef<Map<string, string>>
+	projectStatusById: ComputedRef<Map<string, ProjectStatusFilterValue>>
+	availableProjectStatuses: ComputedRef<ProjectStatusFilterValue[]>
+	projectVersionDownloadsById: ComputedRef<Map<string, number>>
+	gameVersionDownloadsByVersion: ComputedRef<Map<string, number>>
+	countryDownloadsByCode: ComputedRef<Map<string, number>>
+	timeSlices: Ref<Labrinth.Analytics.v3.TimeSlice[]>
+	displayedTimeSlices: Ref<Labrinth.Analytics.v3.TimeSlice[]>
+	previousTimeSlices: Ref<Labrinth.Analytics.v3.TimeSlice[]>
+	isLoading: ComputedRef<boolean>
+	isRefetching: ComputedRef<boolean>
+	activeStat: Ref<AnalyticsDashboardStat>
+	currentTotals: ComputedRef<AnalyticsDashboardTotals>
+	previousTotals: ComputedRef<AnalyticsDashboardTotals>
+	percentChanges: ComputedRef<AnalyticsDashboardPercentChanges>
+	hasPreviousPeriodComparison: ComputedRef<boolean>
+	getRelevantAnalyticsDashboardStats: (
+		breakdown: AnalyticsBreakdownPreset,
+		filters?: AnalyticsSelectedFilters,
+	) => readonly AnalyticsDashboardStat[]
+	isAnalyticsDashboardStatRelevant: (
+		stat: AnalyticsDashboardStat,
+		breakdown: AnalyticsBreakdownPreset,
+		filters?: AnalyticsSelectedFilters,
+	) => boolean
+	refreshAnalyticsQuery: () => Promise<void>
+	getVersionDisplayName: (versionId: string) => string
+	getVersionPublishedDate: (versionId: string) => string | undefined
+	setFetchRequest: (fetchRequest: Labrinth.Analytics.v3.FetchRequest) => void
+	setActiveStat: (stat: AnalyticsDashboardStat) => void
+}
+
+export type CreateAnalyticsDashboardContextOptions = {
+	auth: Ref<{ user?: { id?: string } | null }>
+	projectPageContext?: ProjectPageContext | null
+	organizationContext?: OrganizationContext | null
+}
+
+export const [injectAnalyticsDashboardContext, provideAnalyticsDashboardContext] =
+	createContext<AnalyticsDashboardContextValue>('AnalyticsDashboard')
+
+function buildPreviousFetchRequest(
+	fetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+): Labrinth.Analytics.v3.FetchRequest | null {
+	if (!isAnalyticsFetchRequestReady(fetchRequest)) {
+		return null
+	}
+
+	const startTimestamp = new Date(fetchRequest.time_range.start).getTime()
+	const endTimestamp = new Date(fetchRequest.time_range.end).getTime()
+	const duration = endTimestamp - startTimestamp
+
+	if (!Number.isFinite(duration) || duration <= 0) {
+		return null
+	}
+
+	const previousEnd = new Date(startTimestamp)
+	const previousStart = new Date(startTimestamp - duration)
+
+	if (previousStart.getTime() < ANALYTICS_START_TIME) {
+		return null
+	}
+
+	return {
+		time_range: {
+			start: previousStart.toISOString(),
+			end: previousEnd.toISOString(),
+			resolution: fetchRequest.time_range.resolution,
+		},
+		return_metrics: fetchRequest.return_metrics,
+		project_ids: fetchRequest.project_ids,
+	}
+}
+
+function isAnalyticsFetchRequestReady(
+	fetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+): fetchRequest is AnalyticsProjectFetchRequest {
+	return Array.isArray(fetchRequest?.project_ids) && fetchRequest.project_ids.length > 0
+}
+
+function areAnalyticsFetchRequestsEqual(
+	left: Labrinth.Analytics.v3.FetchRequest | null,
+	right: Labrinth.Analytics.v3.FetchRequest,
+): boolean {
+	return JSON.stringify(left) === JSON.stringify(right)
+}
+
+function getPercentChange(currentValue: number, previousValue: number): number {
+	if (previousValue === 0) {
+		if (currentValue === 0) {
+			return 0
+		}
+		return 100
+	}
+
+	return ((currentValue - previousValue) / previousValue) * 100
+}
+
+function computeTotals(
+	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+	selectedProjectIds: Set<string>,
+	availableProjectIds: Set<string>,
+	projectStatusById: Map<string, ProjectStatusFilterValue>,
+	filters: AnalyticsSelectedFilters,
+): AnalyticsDashboardTotals {
+	const totals: AnalyticsDashboardTotals = {
+		views: 0,
+		downloads: 0,
+		revenue: 0,
+		playtime: 0,
+	}
+
+	if (availableProjectIds.size === 0) {
+		return totals
+	}
+
+	const effectiveProjectIds = selectedProjectIds.size > 0 ? selectedProjectIds : availableProjectIds
+	const filteredProjectIds = new Set(
+		getProjectIdsMatchingStatusFilter([...effectiveProjectIds], projectStatusById, filters),
+	)
+	if (filteredProjectIds.size === 0) {
+		return totals
+	}
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (!filteredProjectIds.has(dataPoint.source_project)) {
+				continue
+			}
+
+			if (!doesAnalyticsPointMatchFilters(dataPoint, filters)) {
+				continue
+			}
+
+			switch (dataPoint.metric_kind) {
+				case 'views':
+					totals.views += dataPoint.views
+					break
+				case 'downloads':
+					totals.downloads += dataPoint.downloads
+					break
+				case 'playtime':
+					totals.playtime += dataPoint.seconds
+					break
+				case 'revenue': {
+					const value = Number.parseFloat(dataPoint.revenue)
+					totals.revenue += Number.isFinite(value) ? value : 0
+					break
+				}
+			}
+		}
+	}
+
+	return totals
+}
+
+function isServerProject(project: ProjectTypeMetadata): boolean {
+	if (project.project_type === MINECRAFT_JAVA_SERVER_PROJECT_TYPE) {
+		return true
+	}
+
+	return project.project_types?.includes(MINECRAFT_JAVA_SERVER_PROJECT_TYPE) ?? false
+}
+
+function isAnalyticsEligibleProject(
+	project: ProjectTypeMetadata & { status?: string | null },
+): boolean {
+	return !isServerProject(project)
+	// && project.status !== 'draft'
+}
+
+export function doesProjectStatusMatchFilters(
+	status: string | null | undefined,
+	filters: AnalyticsSelectedFilters,
+): boolean {
+	if (filters.project_status.length === 0) {
+		return true
+	}
+
+	return filters.project_status.includes(getProjectStatusFilterValue(status))
+}
+
+export function getProjectIdsMatchingStatusFilter(
+	projectIds: string[],
+	projectStatusById: Map<string, ProjectStatusFilterValue>,
+	filters: AnalyticsSelectedFilters,
+): string[] {
+	if (filters.project_status.length === 0) {
+		return projectIds
+	}
+
+	return projectIds.filter((projectId) =>
+		doesProjectStatusMatchFilters(projectStatusById.get(projectId), filters),
+	)
+}
+
+function sortStringValues(values: string[]): string[] {
+	return [...values].sort((left, right) => left.localeCompare(right))
+}
+
+function getProjectVersionGameVersions(versions: Labrinth.Versions.v3.Version[]): string[] {
+	const gameVersions = new Set<string>()
+
+	for (const version of versions) {
+		for (const gameVersion of version.game_versions) {
+			const normalizedGameVersion = gameVersion.trim()
+			if (normalizedGameVersion.length > 0) {
+				gameVersions.add(normalizedGameVersion)
+			}
+		}
+	}
+
+	return sortStringValues([...gameVersions])
+}
+
+function getProjectVersionLoaders(versions: Labrinth.Versions.v3.Version[]): string[] {
+	const loaders = new Set<string>()
+
+	for (const version of versions) {
+		const versionLoaders =
+			version.mrpack_loaders && version.mrpack_loaders.length > 0
+				? version.mrpack_loaders
+				: version.loaders
+
+		for (const loader of versionLoaders) {
+			const normalizedLoader = loader.trim().toLowerCase()
+			if (normalizedLoader.length > 0 && normalizedLoader !== 'mrpack') {
+				loaders.add(normalizedLoader)
+			}
+		}
+	}
+
+	return sortStringValues([...loaders])
+}
+
+function retainAvailableSelectedFilterValues(
+	values: string[],
+	availableValues: string[],
+): string[] {
+	const availableValueSet = new Set(availableValues)
+	return values.filter((value) => availableValueSet.has(value))
+}
+
+function sanitizeAnalyticsSelectedFiltersForAvailableOptions(
+	filters: AnalyticsSelectedFilters,
+	filterOptions: AnalyticsDashboardFilterOptions,
+): AnalyticsSelectedFilters {
+	return {
+		...filters,
+		download_reason: retainAvailableSelectedFilterValues(
+			filters.download_reason,
+			filterOptions.downloadReasons,
+		),
+		game_version: retainAvailableSelectedFilterValues(
+			filters.game_version,
+			filterOptions.gameVersions,
+		),
+		loader_type: retainAvailableSelectedFilterValues(
+			filters.loader_type,
+			filterOptions.loaderTypes,
+		),
+	}
+}
+
+function cloneAnalyticsSelectedFilters(
+	filters: AnalyticsSelectedFilters,
+): AnalyticsSelectedFilters {
+	return {
+		project: [...filters.project],
+		project_status: [...filters.project_status],
+		country: [...filters.country],
+		monetization: [...filters.monetization],
+		download_source: [...filters.download_source],
+		download_reason: [...filters.download_reason],
+		version_id: [...filters.version_id],
+		game_version: [...filters.game_version],
+		loader_type: [...filters.loader_type],
+	}
+}
+
+function cloneAnalyticsFilterOptions(
+	filterOptions: AnalyticsDashboardFilterOptions,
+): AnalyticsDashboardFilterOptions {
+	return {
+		countries: [...filterOptions.countries],
+		downloadSources: [...filterOptions.downloadSources],
+		downloadReasons: [...filterOptions.downloadReasons],
+		gameVersions: [...filterOptions.gameVersions],
+		loaderTypes: [...filterOptions.loaderTypes],
+		versionIds: [...filterOptions.versionIds],
+	}
+}
+
+function cloneAnalyticsFetchRequest(
+	fetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+): Labrinth.Analytics.v3.FetchRequest | null {
+	return fetchRequest ? JSON.parse(JSON.stringify(fetchRequest)) : null
+}
+
+function cloneAnalyticsTimeSlices(
+	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+): Labrinth.Analytics.v3.TimeSlice[] {
+	return timeSlices.map((slice) => [...slice])
+}
+
+function getCountryFilterOptions(timeSlices: Labrinth.Analytics.v3.TimeSlice[]): string[] {
+	const countries = new Set<string>()
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (
+				(dataPoint.metric_kind === 'views' ||
+					dataPoint.metric_kind === 'downloads' ||
+					dataPoint.metric_kind === 'playtime') &&
+				dataPoint.country
+			) {
+				const country = dataPoint.country.trim().toUpperCase()
+				if (country.length > 0) {
+					countries.add(country)
+				}
+			}
+		}
+	}
+
+	return sortStringValues([...countries])
+}
+
+function getCountryDownloadsByCode(
+	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+): Map<string, number> {
+	const downloadsByCountry = new Map<string, number>()
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (dataPoint.metric_kind !== 'downloads' || !dataPoint.country) {
+				continue
+			}
+
+			const country = dataPoint.country.trim().toUpperCase()
+			if (country.length === 0) {
+				continue
+			}
+
+			downloadsByCountry.set(country, (downloadsByCountry.get(country) ?? 0) + dataPoint.downloads)
+		}
+	}
+
+	return downloadsByCountry
+}
+
+function getDownloadSourceFilterOptions(timeSlices: Labrinth.Analytics.v3.TimeSlice[]): string[] {
+	const downloadSources = new Set<string>()
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (dataPoint.metric_kind === 'downloads' && dataPoint.domain) {
+				const downloadSource = dataPoint.domain.trim()
+				if (downloadSource.length > 0) {
+					downloadSources.add(downloadSource)
+				}
+			}
+		}
+	}
+
+	return sortStringValues([...downloadSources])
+}
+
+function getDownloadReasonFilterOptions(timeSlices: Labrinth.Analytics.v3.TimeSlice[]): string[] {
+	const downloadReasons = new Set<string>()
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (dataPoint.metric_kind === 'downloads' && dataPoint.reason) {
+				downloadReasons.add(dataPoint.reason)
+			}
+		}
+	}
+
+	return sortStringValues([...downloadReasons])
+}
+
+function getAnalyticsGameVersionFilterOptions(
+	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+): string[] {
+	const gameVersions = new Set<string>()
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (
+				(dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+				dataPoint.game_version
+			) {
+				const gameVersion = dataPoint.game_version.trim()
+				if (gameVersion.length > 0) {
+					gameVersions.add(gameVersion)
+				}
+			}
+		}
+	}
+
+	return sortStringValues([...gameVersions])
+}
+
+function getAnalyticsLoaderFilterOptions(timeSlices: Labrinth.Analytics.v3.TimeSlice[]): string[] {
+	const loaders = new Set<string>()
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (
+				(dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+				dataPoint.loader
+			) {
+				const loader = dataPoint.loader.trim().toLowerCase()
+				if (loader.length > 0 && loader !== 'mrpack') {
+					loaders.add(loader)
+				}
+			}
+		}
+	}
+
+	return sortStringValues([...loaders])
+}
+
+function addVersionIdsFromTimeSlices(
+	versionIds: Set<string>,
+	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+) {
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (
+				(dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+				dataPoint.version_id
+			) {
+				const versionId = dataPoint.version_id.trim()
+				if (versionId.length > 0) {
+					versionIds.add(versionId)
+				}
+			}
+		}
+	}
+}
+
+export function doesAnalyticsPointMatchFilters(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+	filters: AnalyticsSelectedFilters,
+): boolean {
+	return (
+		doesAnalyticsPointMatchFilter(dataPoint, filters.country, getCountryFilterValue) &&
+		doesAnalyticsPointMatchFilter(dataPoint, filters.monetization, getMonetizationFilterValue) &&
+		doesAnalyticsPointMatchFilter(
+			dataPoint,
+			filters.download_source,
+			getDownloadSourceFilterValue,
+		) &&
+		doesAnalyticsPointMatchFilter(
+			dataPoint,
+			filters.download_reason,
+			getDownloadReasonFilterValue,
+		) &&
+		doesAnalyticsPointMatchFilter(dataPoint, filters.version_id, getVersionFilterValue) &&
+		doesAnalyticsPointMatchFilter(dataPoint, filters.game_version, getGameVersionFilterValue) &&
+		doesAnalyticsPointMatchFilter(dataPoint, filters.loader_type, getLoaderFilterValue)
+	)
+}
+
+function doesAnalyticsPointMatchFilter(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+	filterValues: string[],
+	getPointValue: (dataPoint: Labrinth.Analytics.v3.ProjectAnalytics) => string | null | undefined,
+): boolean {
+	if (filterValues.length === 0) {
+		return true
+	}
+
+	const pointValue = getPointValue(dataPoint)
+	if (pointValue === undefined) {
+		return true
+	}
+	if (pointValue === null) {
+		return false
+	}
+
+	const normalizedPointValue = pointValue.trim().toLowerCase()
+	return filterValues.some((value) => value.trim().toLowerCase() === normalizedPointValue)
+}
+
+function getCountryFilterValue(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+	if (
+		dataPoint.metric_kind !== 'views' &&
+		dataPoint.metric_kind !== 'downloads' &&
+		dataPoint.metric_kind !== 'playtime'
+	) {
+		return undefined
+	}
+
+	return dataPoint.country ?? null
+}
+
+function getMonetizationFilterValue(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+	if (dataPoint.metric_kind !== 'views' && dataPoint.metric_kind !== 'downloads') {
+		return undefined
+	}
+	if (typeof dataPoint.monetized !== 'boolean') {
+		return null
+	}
+
+	return dataPoint.monetized ? 'monetized' : 'unmonetized'
+}
+
+function getDownloadSourceFilterValue(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+	if (dataPoint.metric_kind !== 'downloads') {
+		return undefined
+	}
+
+	return dataPoint.domain ?? null
+}
+
+function getDownloadReasonFilterValue(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+	if (dataPoint.metric_kind !== 'downloads') {
+		return undefined
+	}
+
+	return dataPoint.reason ?? null
+}
+
+function getVersionFilterValue(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+	if (dataPoint.metric_kind !== 'downloads' && dataPoint.metric_kind !== 'playtime') {
+		return undefined
+	}
+
+	return dataPoint.version_id ?? null
+}
+
+function getGameVersionFilterValue(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+	if (dataPoint.metric_kind !== 'downloads' && dataPoint.metric_kind !== 'playtime') {
+		return undefined
+	}
+
+	return dataPoint.game_version ?? null
+}
+
+function getLoaderFilterValue(
+	dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+	if (dataPoint.metric_kind !== 'downloads' && dataPoint.metric_kind !== 'playtime') {
+		return undefined
+	}
+
+	return dataPoint.loader ?? null
+}
+
+export function createAnalyticsDashboardContext(
+	options: CreateAnalyticsDashboardContextOptions,
+): AnalyticsDashboardContextValue {
+	const client = injectModrinthClient()
+	const route = useRoute()
+	const router = useRouter()
+	const initialQueryState = readAnalyticsQueryBuilderState(route.query, [])
+
+	const activeStat = ref<AnalyticsDashboardStat>('views')
+	const selectedProjectIds = ref<string[]>(initialQueryState.selectedProjectIds)
+	const selectedTimeframeMode = ref<AnalyticsTimeframeMode>(initialQueryState.selectedTimeframeMode)
+	const selectedTimeframe = ref<AnalyticsTimeframePreset>(initialQueryState.selectedTimeframe)
+	const selectedLastTimeframeAmount = ref<number>(initialQueryState.selectedLastTimeframeAmount)
+	const selectedLastTimeframeUnit = ref<AnalyticsLastTimeframeUnit>(
+		initialQueryState.selectedLastTimeframeUnit,
+	)
+	const selectedCustomTimeframeStartDate = ref<string>(
+		initialQueryState.selectedCustomTimeframeStartDate,
+	)
+	const selectedCustomTimeframeEndDate = ref<string>(
+		initialQueryState.selectedCustomTimeframeEndDate,
+	)
+	const selectedGroupBy = ref<AnalyticsGroupByPreset>(initialQueryState.selectedGroupBy)
+	const selectedBreakdown = ref<AnalyticsBreakdownPreset>(initialQueryState.selectedBreakdown)
+	const selectedFilters = ref<AnalyticsSelectedFilters>(initialQueryState.selectedFilters)
+	const queryRefreshTimestamp = ref(Date.now())
+	const fetchRequest = ref<Labrinth.Analytics.v3.FetchRequest | null>(null)
+
+	const hasProjectContext = computed(() => Boolean(options.projectPageContext))
+	const hasOrganizationContext = computed(
+		() => !hasProjectContext.value && Boolean(options.organizationContext),
+	)
+
+	const { data: userProjects, isFetched: hasFetchedUserProjects } = useQuery({
+		queryKey: computed(() => ['analytics', 'dashboard', options.auth.value?.user?.id, 'projects']),
+		queryFn: () => client.labrinth.users_v2.getProjects(options.auth.value.user?.id ?? ''),
+		enabled: computed(
+			() =>
+				Boolean(options.auth.value.user?.id) &&
+				!hasProjectContext.value &&
+				!hasOrganizationContext.value,
+		),
+		placeholderData: [],
+	})
+
+	const areProjectsLoaded = computed(() => {
+		if (hasProjectContext.value) {
+			return true
+		}
+
+		if (hasOrganizationContext.value) {
+			return options.organizationContext?.projects.value !== null
+		}
+
+		return hasFetchedUserProjects.value
+	})
+
+	const projects = computed<AnalyticsDashboardProject[]>(() => {
+		if (hasProjectContext.value && options.projectPageContext) {
+			const project = options.projectPageContext.projectV2.value
+			return project && isAnalyticsEligibleProject(project)
+				? [
+						{
+							id: project.id,
+							name: project.title,
+							downloads: project.downloads ?? 0,
+							status: getProjectStatusFilterValue(project.status),
+						},
+					]
+				: []
+		}
+
+		if (hasOrganizationContext.value && options.organizationContext?.projects.value) {
+			return options.organizationContext.projects.value
+				.filter((project) => isAnalyticsEligibleProject(project))
+				.map((project) => ({
+					id: project.id,
+					name: project.name,
+					downloads: project.downloads ?? 0,
+					status: getProjectStatusFilterValue(project.status),
+				}))
+		}
+
+		return (userProjects.value ?? [])
+			.filter((project) => isAnalyticsEligibleProject(project))
+			.map((project) => ({
+				id: project.id,
+				name: project.title,
+				downloads: project.downloads ?? 0,
+				status: getProjectStatusFilterValue(project.status),
+			}))
+	})
+
+	const availableProjectIds = computed(() => projects.value.map((project) => project.id))
+	const projectStatusById = computed(
+		() => new Map(projects.value.map((project) => [project.id, project.status])),
+	)
+	const availableProjectStatuses = computed<ProjectStatusFilterValue[]>(() => {
+		const presentStatuses = new Set(projects.value.map((project) => project.status))
+		return PROJECT_STATUS_FILTER_VALUES.filter((status) => presentStatuses.has(status))
+	})
+	const sortedSelectedProjectIds = computed(() => sortStringValues(selectedProjectIds.value))
+
+	function getRelevantAnalyticsDashboardStats(
+		breakdown: AnalyticsBreakdownPreset,
+		filters: AnalyticsSelectedFilters = selectedFilters.value,
+	): readonly AnalyticsDashboardStat[] {
+		return getEnabledAnalyticsStatsForState(breakdown, filters)
+	}
+
+	function isAnalyticsDashboardStatRelevant(
+		stat: AnalyticsDashboardStat,
+		breakdown: AnalyticsBreakdownPreset,
+		filters: AnalyticsSelectedFilters = selectedFilters.value,
+	): boolean {
+		return getRelevantAnalyticsDashboardStats(breakdown, filters).includes(stat)
+	}
+
+	watch(
+		[selectedBreakdown, selectedFilters, activeStat],
+		([nextBreakdown, nextFilters, nextActiveStat]) => {
+			if (isAnalyticsDashboardStatRelevant(nextActiveStat, nextBreakdown, nextFilters)) {
+				return
+			}
+
+			const fallbackStat = getRelevantAnalyticsDashboardStats(nextBreakdown, nextFilters)[0]
+			if (fallbackStat && fallbackStat !== nextActiveStat) {
+				activeStat.value = fallbackStat
+			}
+		},
+		{ deep: true, immediate: true },
+	)
+
+	watch(
+		[selectedBreakdown, selectedFilters],
+		([nextBreakdown, nextFilters]) => {
+			const sanitizedFilters = sanitizeAnalyticsSelectedFilters(nextBreakdown, nextFilters)
+			if (!areSelectedFiltersEqual(nextFilters, sanitizedFilters)) {
+				selectedFilters.value = sanitizedFilters
+			}
+		},
+		{ deep: true, immediate: true },
+	)
+
+	watch(
+		[projects, areProjectsLoaded],
+		([nextProjects, nextAreProjectsLoaded]) => {
+			if (nextProjects.length === 0) {
+				if (nextAreProjectsLoaded && selectedProjectIds.value.length > 0) {
+					selectedProjectIds.value = []
+				}
+				return
+			}
+
+			const availableProjectIds = new Set(nextProjects.map((project) => project.id))
+			const retainedSelection = selectedProjectIds.value.filter((id) => availableProjectIds.has(id))
+
+			selectedProjectIds.value =
+				retainedSelection.length > 0 ? retainedSelection : nextProjects.map((project) => project.id)
+		},
+		{ immediate: true },
+	)
+
+	watch(
+		() => route.query,
+		(nextQuery) => {
+			const nextQueryState = readAnalyticsQueryBuilderState(nextQuery, availableProjectIds.value)
+			const availableProjectIdSet = new Set(availableProjectIds.value)
+			const nextSelectedProjectIds = nextQueryState.selectedProjectIds.filter((projectId) =>
+				availableProjectIdSet.has(projectId),
+			)
+			const nextSelectedFilters = sanitizeAnalyticsSelectedFilters(
+				nextQueryState.selectedBreakdown,
+				nextQueryState.selectedFilters,
+			)
+
+			if (!areStringArraysEqual(selectedProjectIds.value, nextSelectedProjectIds)) {
+				selectedProjectIds.value = nextSelectedProjectIds
+			}
+			if (selectedTimeframeMode.value !== nextQueryState.selectedTimeframeMode) {
+				selectedTimeframeMode.value = nextQueryState.selectedTimeframeMode
+			}
+			if (selectedTimeframe.value !== nextQueryState.selectedTimeframe) {
+				selectedTimeframe.value = nextQueryState.selectedTimeframe
+			}
+			if (selectedLastTimeframeAmount.value !== nextQueryState.selectedLastTimeframeAmount) {
+				selectedLastTimeframeAmount.value = nextQueryState.selectedLastTimeframeAmount
+			}
+			if (selectedLastTimeframeUnit.value !== nextQueryState.selectedLastTimeframeUnit) {
+				selectedLastTimeframeUnit.value = nextQueryState.selectedLastTimeframeUnit
+			}
+			if (
+				selectedCustomTimeframeStartDate.value !== nextQueryState.selectedCustomTimeframeStartDate
+			) {
+				selectedCustomTimeframeStartDate.value = nextQueryState.selectedCustomTimeframeStartDate
+			}
+			if (selectedCustomTimeframeEndDate.value !== nextQueryState.selectedCustomTimeframeEndDate) {
+				selectedCustomTimeframeEndDate.value = nextQueryState.selectedCustomTimeframeEndDate
+			}
+			if (selectedGroupBy.value !== nextQueryState.selectedGroupBy) {
+				selectedGroupBy.value = nextQueryState.selectedGroupBy
+			}
+			if (selectedBreakdown.value !== nextQueryState.selectedBreakdown) {
+				selectedBreakdown.value = nextQueryState.selectedBreakdown
+			}
+			if (!areSelectedFiltersEqual(selectedFilters.value, nextSelectedFilters)) {
+				selectedFilters.value = nextSelectedFilters
+			}
+		},
+	)
+
+	watch(
+		[
+			selectedProjectIds,
+			selectedTimeframeMode,
+			selectedTimeframe,
+			selectedLastTimeframeAmount,
+			selectedLastTimeframeUnit,
+			selectedCustomTimeframeStartDate,
+			selectedCustomTimeframeEndDate,
+			selectedGroupBy,
+			selectedBreakdown,
+			selectedFilters,
+			availableProjectIds,
+		],
+		() => {
+			if (import.meta.server) {
+				return
+			}
+
+			const nextRouteQuery = buildAnalyticsQueryBuilderRouteQuery(
+				route.query,
+				{
+					selectedProjectIds: selectedProjectIds.value,
+					selectedTimeframeMode: selectedTimeframeMode.value,
+					selectedTimeframe: selectedTimeframe.value,
+					selectedLastTimeframeAmount: selectedLastTimeframeAmount.value,
+					selectedLastTimeframeUnit: selectedLastTimeframeUnit.value,
+					selectedCustomTimeframeStartDate: selectedCustomTimeframeStartDate.value,
+					selectedCustomTimeframeEndDate: selectedCustomTimeframeEndDate.value,
+					selectedGroupBy: selectedGroupBy.value,
+					selectedBreakdown: selectedBreakdown.value,
+					selectedFilters: selectedFilters.value,
+				},
+				availableProjectIds.value,
+			)
+
+			const hasAnalyticsQueryChange = hasAnalyticsQueryBuilderRouteChange(
+				route.query,
+				nextRouteQuery,
+			)
+
+			if (!hasAnalyticsQueryChange) return
+
+			router.replace({
+				path: route.path,
+				query: nextRouteQuery,
+			})
+		},
+		{ deep: true, immediate: true },
+	)
+
+	const {
+		data: currentTimeSliceData,
+		isPending: currentTimeSlicePending,
+		isFetching: currentFetching,
+		refetch: refetchCurrentTimeSlices,
+	} = useQuery({
+		queryKey: computed(() => ['analytics', 'dashboard', 'current', fetchRequest.value]),
+		queryFn: async () => {
+			const response = await client.labrinth.analytics_v3.fetch(
+				fetchRequest.value as Labrinth.Analytics.v3.FetchRequest,
+			)
+			return response.metrics
+		},
+		enabled: computed(() => isAnalyticsFetchRequestReady(fetchRequest.value)),
+	})
+	const isCurrentTimeSliceLoading = computed(
+		() => isAnalyticsFetchRequestReady(fetchRequest.value) && currentTimeSlicePending.value,
+	)
+
+	const analyticsFilterOptionsRequest = computed<Labrinth.Analytics.v3.FetchRequest | null>(() => {
+		if (sortedSelectedProjectIds.value.length === 0) {
+			return null
+		}
+
+		return {
+			time_range: {
+				start: ANALYTICS_START_TIMESTAMP,
+				end: new Date(queryRefreshTimestamp.value).toISOString(),
+				resolution: {
+					slices: 1,
+				},
+			},
+			project_ids: sortedSelectedProjectIds.value,
+			return_metrics: {
+				project_views: {
+					bucket_by: ['country'],
+				},
+				project_downloads: {
+					bucket_by: ['country', 'domain', 'reason', 'game_version', 'loader'],
+				},
+				project_playtime: {
+					bucket_by: ['country', 'game_version', 'loader'],
+				},
+			},
+		}
+	})
+
+	const { data: analyticsFilterOptionsData, isFetched: hasFetchedAnalyticsFilterOptions } =
+		useQuery({
+			queryKey: computed(() => [
+				'analytics',
+				'dashboard',
+				'filter-options',
+				'analytics-fields',
+				analyticsFilterOptionsRequest.value,
+			]),
+			queryFn: async () => {
+				const response = await client.labrinth.analytics_v3.fetch(
+					analyticsFilterOptionsRequest.value as Labrinth.Analytics.v3.FetchRequest,
+				)
+				return response.metrics
+			},
+			enabled: computed(() => analyticsFilterOptionsRequest.value !== null),
+		})
+
+	const { data: filterOptionProjectVersions, isFetched: hasFetchedFilterOptionProjectVersions } =
+		useQuery({
+			queryKey: computed(() => [
+				'analytics',
+				'dashboard',
+				'filter-options',
+				'versions',
+				sortedSelectedProjectIds.value,
+			]),
+			queryFn: async () => {
+				const projectVersions = await Promise.all(
+					sortedSelectedProjectIds.value.map((projectId) =>
+						client.labrinth.versions_v3.getProjectVersions(projectId, {
+							include_changelog: false,
+							apiVersion: 3,
+						}),
+					),
+				)
+
+				return projectVersions.flat()
+			},
+			enabled: computed(() => sortedSelectedProjectIds.value.length > 0),
+			placeholderData: [],
+		})
+
+	const filterOptions = computed<AnalyticsDashboardFilterOptions>(() => ({
+		countries: getCountryFilterOptions(analyticsFilterOptionsData.value ?? []),
+		downloadSources: getDownloadSourceFilterOptions(analyticsFilterOptionsData.value ?? []),
+		downloadReasons: getDownloadReasonFilterOptions(analyticsFilterOptionsData.value ?? []),
+		gameVersions: sortStringValues([
+			...new Set([
+				...getProjectVersionGameVersions(filterOptionProjectVersions.value ?? []),
+				...getAnalyticsGameVersionFilterOptions(analyticsFilterOptionsData.value ?? []),
+			]),
+		]),
+		loaderTypes: sortStringValues([
+			...new Set([
+				...getProjectVersionLoaders(filterOptionProjectVersions.value ?? []),
+				...getAnalyticsLoaderFilterOptions(analyticsFilterOptionsData.value ?? []),
+			]),
+		]),
+		versionIds: sortStringValues([
+			...new Set((filterOptionProjectVersions.value ?? []).map((version) => version.id)),
+		]),
+	}))
+
+	watch(
+		[
+			selectedFilters,
+			filterOptions,
+			hasFetchedFilterOptionProjectVersions,
+			hasFetchedAnalyticsFilterOptions,
+		],
+		([
+			nextSelectedFilters,
+			nextFilterOptions,
+			hasFetchedVersionFilterOptions,
+			hasFetchedAnalyticsOptions,
+		]) => {
+			if (!hasFetchedVersionFilterOptions || !hasFetchedAnalyticsOptions) {
+				return
+			}
+
+			const sanitizedFilters = sanitizeAnalyticsSelectedFiltersForAvailableOptions(
+				nextSelectedFilters,
+				nextFilterOptions,
+			)
+			if (!areSelectedFiltersEqual(nextSelectedFilters, sanitizedFilters)) {
+				selectedFilters.value = sanitizedFilters
+			}
+		},
+		{ deep: true },
+	)
+
+	const filterOptionProjectVersionIds = computed(
+		() => new Set((filterOptionProjectVersions.value ?? []).map((version) => version.id)),
+	)
+
+	const previousFetchRequest = computed(() => buildPreviousFetchRequest(fetchRequest.value))
+	const hasPreviousPeriodComparison = computed(() => previousFetchRequest.value !== null)
+
+	const {
+		data: previousTimeSliceData,
+		isFetching: previousFetching,
+		refetch: refetchPreviousTimeSlices,
+	} = useQuery({
+		queryKey: computed(() => ['analytics', 'dashboard', 'previous', previousFetchRequest.value]),
+		queryFn: async () => {
+			const response = await client.labrinth.analytics_v3.fetch(
+				previousFetchRequest.value as Labrinth.Analytics.v3.FetchRequest,
+			)
+			return response.metrics
+		},
+		enabled: computed(() => previousFetchRequest.value !== null),
+	})
+
+	const timeSlices = ref<Labrinth.Analytics.v3.TimeSlice[]>([])
+	const previousTimeSlices = ref<Labrinth.Analytics.v3.TimeSlice[]>([])
+	const displayedSelectedProjectIds = ref<string[]>([...selectedProjectIds.value])
+	const displayedSelectedGroupBy = ref<AnalyticsGroupByPreset>(selectedGroupBy.value)
+	const displayedSelectedBreakdown = ref<AnalyticsBreakdownPreset>(selectedBreakdown.value)
+	const displayedSelectedFilters = ref<AnalyticsSelectedFilters>(
+		cloneAnalyticsSelectedFilters(selectedFilters.value),
+	)
+	const displayedFetchRequest = ref<Labrinth.Analytics.v3.FetchRequest | null>(
+		cloneAnalyticsFetchRequest(fetchRequest.value),
+	)
+	const displayedFilterOptions = ref<AnalyticsDashboardFilterOptions>(
+		cloneAnalyticsFilterOptions(filterOptions.value),
+	)
+	const displayedTimeSlices = ref<Labrinth.Analytics.v3.TimeSlice[]>([])
+
+	function commitDisplayedAnalyticsState() {
+		displayedSelectedProjectIds.value = [...selectedProjectIds.value]
+		displayedSelectedGroupBy.value = selectedGroupBy.value
+		displayedSelectedBreakdown.value = selectedBreakdown.value
+		displayedSelectedFilters.value = cloneAnalyticsSelectedFilters(selectedFilters.value)
+		displayedFetchRequest.value = cloneAnalyticsFetchRequest(fetchRequest.value)
+		displayedFilterOptions.value = cloneAnalyticsFilterOptions(filterOptions.value)
+		displayedTimeSlices.value = cloneAnalyticsTimeSlices(timeSlices.value)
+	}
+
+	watch(
+		currentTimeSliceData,
+		(nextTimeSlices) => {
+			if (nextTimeSlices === undefined) {
+				return
+			}
+			timeSlices.value = nextTimeSlices
+		},
+		{ immediate: true },
+	)
+
+	watch(
+		previousTimeSliceData,
+		(nextTimeSlices) => {
+			previousTimeSlices.value = nextTimeSlices ?? []
+		},
+		{ immediate: true },
+	)
+
+	watch(fetchRequest, (nextFetchRequest) => {
+		if (isAnalyticsFetchRequestReady(nextFetchRequest)) {
+			previousTimeSlices.value = []
+			return
+		}
+		timeSlices.value = []
+		previousTimeSlices.value = []
+	})
+
+	const analyticsVersionIds = computed(() => {
+		const versionIds = new Set<string>()
+		for (const versionId of selectedFilters.value.version_id) {
+			const normalizedVersionId = versionId.trim()
+			if (normalizedVersionId.length > 0) {
+				versionIds.add(normalizedVersionId)
+			}
+		}
+
+		addVersionIdsFromTimeSlices(versionIds, timeSlices.value)
+		addVersionIdsFromTimeSlices(versionIds, previousTimeSlices.value)
+
+		for (const versionId of filterOptionProjectVersionIds.value) {
+			versionIds.delete(versionId)
+		}
+
+		return sortStringValues([...versionIds])
+	})
+
+	const { data: versions } = useQuery({
+		queryKey: computed(() => ['analytics', 'dashboard', 'versions', analyticsVersionIds.value]),
+		queryFn: () =>
+			fetchSegmentedWith(analyticsVersionIds.value, (ids) =>
+				client.labrinth.versions_v3.getVersions(ids),
+			),
+		enabled: computed(() => analyticsVersionIds.value.length > 0),
+		placeholderData: [],
+	})
+
+	const allVersionMetadata = computed(() => {
+		const versionsById = new Map<string, Labrinth.Versions.v3.Version>()
+		for (const version of filterOptionProjectVersions.value ?? []) {
+			versionsById.set(version.id, version)
+		}
+		for (const version of versions.value ?? []) {
+			versionsById.set(version.id, version)
+		}
+		return [...versionsById.values()]
+	})
+
+	const versionNumbersById = computed(
+		() => new Map(allVersionMetadata.value.map((version) => [version.id, version.version_number])),
+	)
+	const versionPublishedDatesById = computed(
+		() => new Map(allVersionMetadata.value.map((version) => [version.id, version.date_published])),
+	)
+	const projectVersionDownloadsById = computed(
+		() => new Map(allVersionMetadata.value.map((version) => [version.id, version.downloads])),
+	)
+	const countryDownloadsByCode = computed(() =>
+		getCountryDownloadsByCode(analyticsFilterOptionsData.value ?? []),
+	)
+	const gameVersionDownloadsByVersion = computed(() => {
+		const downloadsByVersion = new Map<string, number>()
+
+		for (const version of allVersionMetadata.value) {
+			for (const gameVersion of version.game_versions) {
+				const normalizedGameVersion = gameVersion.trim()
+				if (normalizedGameVersion.length === 0) {
+					continue
+				}
+
+				downloadsByVersion.set(
+					normalizedGameVersion,
+					(downloadsByVersion.get(normalizedGameVersion) ?? 0) + version.downloads,
+				)
+			}
+		}
+
+		return downloadsByVersion
+	})
+
+	const selectedProjectIdSet = computed(() => new Set(selectedProjectIds.value))
+	const availableProjectIdSet = computed(() => new Set(availableProjectIds.value))
+
+	const currentTotals = computed<AnalyticsDashboardTotals>(() =>
+		computeTotals(
+			timeSlices.value,
+			selectedProjectIdSet.value,
+			availableProjectIdSet.value,
+			projectStatusById.value,
+			selectedFilters.value,
+		),
+	)
+	const previousTotals = computed<AnalyticsDashboardTotals>(() =>
+		computeTotals(
+			previousTimeSlices.value,
+			selectedProjectIdSet.value,
+			availableProjectIdSet.value,
+			projectStatusById.value,
+			selectedFilters.value,
+		),
+	)
+
+	const percentChanges = computed<AnalyticsDashboardPercentChanges>(() => ({
+		views: getPercentChange(currentTotals.value.views, previousTotals.value.views),
+		downloads: getPercentChange(currentTotals.value.downloads, previousTotals.value.downloads),
+		revenue: getPercentChange(currentTotals.value.revenue, previousTotals.value.revenue),
+		playtime: getPercentChange(currentTotals.value.playtime, previousTotals.value.playtime),
+	}))
+
+	const isLoading = computed(() => isCurrentTimeSliceLoading.value)
+	const isRefetching = computed(() => currentFetching.value || previousFetching.value)
+	watch(
+		[
+			isLoading,
+			currentTimeSliceData,
+			fetchRequest,
+			selectedProjectIds,
+			selectedGroupBy,
+			selectedBreakdown,
+			selectedFilters,
+			filterOptions,
+		],
+		() => {
+			if (isLoading.value) {
+				return
+			}
+			if (
+				isAnalyticsFetchRequestReady(fetchRequest.value) &&
+				currentTimeSliceData.value === undefined
+			) {
+				return
+			}
+
+			commitDisplayedAnalyticsState()
+		},
+		{ deep: true, flush: 'post', immediate: true },
+	)
+
+	async function refreshAnalyticsQuery() {
+		if (!isAnalyticsFetchRequestReady(fetchRequest.value)) {
+			return
+		}
+
+		const fetchRequestKey = JSON.stringify(fetchRequest.value)
+		const now = Date.now()
+		queryRefreshTimestamp.value =
+			now > queryRefreshTimestamp.value ? now : queryRefreshTimestamp.value + 1
+		await nextTick()
+
+		if (fetchRequest.value === null || JSON.stringify(fetchRequest.value) !== fetchRequestKey) {
+			return
+		}
+
+		const refetches = [refetchCurrentTimeSlices()]
+		if (previousFetchRequest.value !== null) {
+			refetches.push(refetchPreviousTimeSlices())
+		}
+
+		await Promise.all(refetches)
+	}
+
+	function setFetchRequest(nextFetchRequest: Labrinth.Analytics.v3.FetchRequest) {
+		if (areAnalyticsFetchRequestsEqual(fetchRequest.value, nextFetchRequest)) {
+			return
+		}
+
+		fetchRequest.value = nextFetchRequest
+	}
+
+	function getVersionDisplayName(versionId: string): string {
+		return versionNumbersById.value.get(versionId) ?? versionId
+	}
+
+	function getVersionPublishedDate(versionId: string): string | undefined {
+		return versionPublishedDatesById.value.get(versionId)
+	}
+
+	function setActiveStat(nextStat: AnalyticsDashboardStat) {
+		if (
+			!isAnalyticsDashboardStatRelevant(nextStat, selectedBreakdown.value, selectedFilters.value)
+		) {
+			return
+		}
+
+		activeStat.value = nextStat
+	}
+
+	return {
+		projects,
+		selectedProjectIds,
+		selectedTimeframeMode,
+		selectedTimeframe,
+		selectedLastTimeframeAmount,
+		selectedLastTimeframeUnit,
+		selectedCustomTimeframeStartDate,
+		selectedCustomTimeframeEndDate,
+		selectedGroupBy,
+		selectedBreakdown,
+		selectedFilters,
+		queryRefreshTimestamp,
+		fetchRequest,
+		displayedSelectedProjectIds,
+		displayedSelectedGroupBy,
+		displayedSelectedBreakdown,
+		displayedSelectedFilters,
+		displayedFetchRequest,
+		displayedFilterOptions,
+		filterOptions,
+		versionNumbersById,
+		versionPublishedDatesById,
+		projectStatusById,
+		availableProjectStatuses,
+		projectVersionDownloadsById,
+		gameVersionDownloadsByVersion,
+		countryDownloadsByCode,
+		timeSlices,
+		displayedTimeSlices,
+		previousTimeSlices,
+		isLoading,
+		isRefetching,
+		activeStat,
+		currentTotals,
+		previousTotals,
+		percentChanges,
+		hasPreviousPeriodComparison,
+		getRelevantAnalyticsDashboardStats,
+		isAnalyticsDashboardStatRelevant,
+		refreshAnalyticsQuery,
+		getVersionDisplayName,
+		getVersionPublishedDate,
+		setFetchRequest,
+		setActiveStat,
+	}
+}
diff --git a/apps/frontend/src/providers/analytics/query-builder-url.ts b/apps/frontend/src/providers/analytics/query-builder-url.ts
new file mode 100644
index 0000000000..6c52f2a3df
--- /dev/null
+++ b/apps/frontend/src/providers/analytics/query-builder-url.ts
@@ -0,0 +1,480 @@
+import type { LocationQuery, LocationQueryValue, LocationQueryValueRaw } from 'vue-router'
+
+export type AnalyticsQueryFilterCategory =
+	| 'project'
+	| 'project_status'
+	| 'country'
+	| 'monetization'
+	| 'download_source'
+	| 'download_reason'
+	| 'version_id'
+	| 'game_version'
+	| 'loader_type'
+
+export type AnalyticsTimeframePreset =
+	| 'today'
+	| 'yesterday'
+	| 'last_7_days'
+	| 'last_14_days'
+	| 'last_30_days'
+	| 'last_90_days'
+	| 'last_180_days'
+	| 'year_to_date'
+	| 'all_time'
+
+export type AnalyticsTimeframeMode = 'preset' | 'last' | 'custom_range'
+export type AnalyticsLastTimeframeUnit = 'hours' | 'days' | 'weeks' | 'months'
+
+export type AnalyticsGroupByPreset = '1h' | '6h' | 'day' | 'week' | 'month' | 'year'
+
+export type AnalyticsBreakdownPreset =
+	| 'none'
+	| 'country'
+	| 'monetization'
+	| 'download_source'
+	| 'download_reason'
+	| 'version_id'
+	| 'loader'
+	| 'game_version'
+
+export type AnalyticsSelectedFilters = Record<AnalyticsQueryFilterCategory, string[]>
+
+export type AnalyticsQueryBuilderState = {
+	selectedProjectIds: string[]
+	selectedTimeframeMode: AnalyticsTimeframeMode
+	selectedTimeframe: AnalyticsTimeframePreset
+	selectedLastTimeframeAmount: number
+	selectedLastTimeframeUnit: AnalyticsLastTimeframeUnit
+	selectedCustomTimeframeStartDate: string
+	selectedCustomTimeframeEndDate: string
+	selectedGroupBy: AnalyticsGroupByPreset
+	selectedBreakdown: AnalyticsBreakdownPreset
+	selectedFilters: AnalyticsSelectedFilters
+}
+
+type MutableRouteQuery = Record<string, LocationQueryValueRaw | LocationQueryValueRaw[] | undefined>
+
+export const DEFAULT_TIMEFRAME_PRESET: AnalyticsTimeframePreset = 'last_30_days'
+export const DEFAULT_TIMEFRAME_MODE: AnalyticsTimeframeMode = 'preset'
+export const DEFAULT_LAST_TIMEFRAME_AMOUNT = 1
+export const DEFAULT_LAST_TIMEFRAME_UNIT: AnalyticsLastTimeframeUnit = 'days'
+export const DEFAULT_GROUP_BY_PRESET: AnalyticsGroupByPreset = 'day'
+export const DEFAULT_BREAKDOWN_PRESET: AnalyticsBreakdownPreset = 'none'
+
+const TIMEFRAME_PRESET_VALUES: AnalyticsTimeframePreset[] = [
+	'today',
+	'yesterday',
+	'last_7_days',
+	'last_14_days',
+	'last_30_days',
+	'last_90_days',
+	'last_180_days',
+	'year_to_date',
+	'all_time',
+]
+
+const TIMEFRAME_MODE_VALUES: AnalyticsTimeframeMode[] = ['preset', 'last', 'custom_range']
+const LAST_TIMEFRAME_UNIT_VALUES: AnalyticsLastTimeframeUnit[] = [
+	'hours',
+	'days',
+	'weeks',
+	'months',
+]
+
+const GROUP_BY_PRESET_VALUES: AnalyticsGroupByPreset[] = [
+	'1h',
+	'6h',
+	'day',
+	'week',
+	'month',
+	'year',
+]
+
+const BREAKDOWN_PRESET_VALUES: AnalyticsBreakdownPreset[] = [
+	'none',
+	'country',
+	'monetization',
+	'download_source',
+	'download_reason',
+	'version_id',
+	'loader',
+	'game_version',
+]
+
+const PROJECT_STATUS_FILTER_VALUES = [
+	'approved',
+	'archived',
+	'rejected',
+	'draft',
+	'unlisted',
+	'withheld',
+	'private',
+	'other',
+]
+
+const QUERY_KEY_PROJECT_IDS = 'a_projects'
+const QUERY_KEY_TIMEFRAME_MODE = 'a_timeframe_mode'
+const QUERY_KEY_TIMEFRAME = 'a_timeframe'
+const QUERY_KEY_TIMEFRAME_LAST_AMOUNT = 'a_timeframe_last_amount'
+const QUERY_KEY_TIMEFRAME_LAST_UNIT = 'a_timeframe_last_unit'
+const QUERY_KEY_TIMEFRAME_START = 'a_timeframe_start'
+const QUERY_KEY_TIMEFRAME_END = 'a_timeframe_end'
+const QUERY_KEY_GROUP_BY = 'a_group_by'
+const QUERY_KEY_BREAKDOWN = 'a_breakdown'
+const QUERY_KEY_FILTER_PROJECT_STATUS = 'a_project_status'
+const QUERY_KEY_FILTER_COUNTRY = 'a_country'
+const QUERY_KEY_FILTER_MONETIZATION = 'a_monetization'
+const QUERY_KEY_FILTER_DOWNLOAD_SOURCE = 'a_download_source'
+const QUERY_KEY_FILTER_DOWNLOAD_REASON = 'a_download_reason'
+const QUERY_KEY_FILTER_VERSION_ID = 'a_version_id'
+const QUERY_KEY_FILTER_GAME_VERSION = 'a_game_version'
+const QUERY_KEY_FILTER_LOADER_TYPE = 'a_loader_type'
+
+const URL_FILTER_CATEGORIES: Exclude<AnalyticsQueryFilterCategory, 'project'>[] = [
+	'project_status',
+	'country',
+	'monetization',
+	'download_source',
+	'download_reason',
+	'version_id',
+	'game_version',
+	'loader_type',
+]
+
+const FILTER_QUERY_KEY_BY_CATEGORY: Record<
+	Exclude<AnalyticsQueryFilterCategory, 'project'>,
+	string
+> = {
+	project_status: QUERY_KEY_FILTER_PROJECT_STATUS,
+	country: QUERY_KEY_FILTER_COUNTRY,
+	monetization: QUERY_KEY_FILTER_MONETIZATION,
+	download_source: QUERY_KEY_FILTER_DOWNLOAD_SOURCE,
+	download_reason: QUERY_KEY_FILTER_DOWNLOAD_REASON,
+	version_id: QUERY_KEY_FILTER_VERSION_ID,
+	game_version: QUERY_KEY_FILTER_GAME_VERSION,
+	loader_type: QUERY_KEY_FILTER_LOADER_TYPE,
+}
+
+const ANALYTICS_QUERY_KEYS = [
+	QUERY_KEY_PROJECT_IDS,
+	QUERY_KEY_TIMEFRAME_MODE,
+	QUERY_KEY_TIMEFRAME,
+	QUERY_KEY_TIMEFRAME_LAST_AMOUNT,
+	QUERY_KEY_TIMEFRAME_LAST_UNIT,
+	QUERY_KEY_TIMEFRAME_START,
+	QUERY_KEY_TIMEFRAME_END,
+	QUERY_KEY_GROUP_BY,
+	QUERY_KEY_BREAKDOWN,
+	QUERY_KEY_FILTER_PROJECT_STATUS,
+	QUERY_KEY_FILTER_COUNTRY,
+	QUERY_KEY_FILTER_MONETIZATION,
+	QUERY_KEY_FILTER_DOWNLOAD_SOURCE,
+	QUERY_KEY_FILTER_DOWNLOAD_REASON,
+	QUERY_KEY_FILTER_VERSION_ID,
+	QUERY_KEY_FILTER_GAME_VERSION,
+	QUERY_KEY_FILTER_LOADER_TYPE,
+]
+
+export function buildEmptySelectedFilters(): AnalyticsSelectedFilters {
+	return {
+		project: [],
+		project_status: [],
+		country: [],
+		monetization: [],
+		download_source: [],
+		download_reason: [],
+		version_id: [],
+		game_version: [],
+		loader_type: [],
+	}
+}
+
+function parseListQueryValue(
+	value: LocationQueryValue | LocationQueryValue[] | undefined,
+): string[] {
+	if (value === undefined) return []
+
+	const values = Array.isArray(value) ? value : [value]
+	const parsedValues: string[] = []
+	for (const item of values) {
+		if (!item) continue
+		const parts = item.split(',')
+		for (const part of parts) {
+			const trimmed = part.trim()
+			if (trimmed.length > 0) {
+				parsedValues.push(trimmed)
+			}
+		}
+	}
+
+	return Array.from(new Set(parsedValues))
+}
+
+function normalizeFilterQueryValues(
+	category: Exclude<AnalyticsQueryFilterCategory, 'project'>,
+	values: string[],
+): string[] {
+	if (category === 'project_status') {
+		return values
+			.map((value) => value.trim().toLowerCase())
+			.filter((value) => PROJECT_STATUS_FILTER_VALUES.includes(value))
+	}
+
+	if (category !== 'loader_type') {
+		return values
+	}
+
+	return Array.from(
+		new Set(values.map((value) => value.trim().toLowerCase()).filter((value) => value.length > 0)),
+	)
+}
+
+function parsePresetQueryValue<T extends string>(
+	value: LocationQueryValue | LocationQueryValue[] | undefined,
+	allowedValues: readonly T[],
+	fallbackValue: T,
+): T {
+	const rawValue = Array.isArray(value) ? value[0] : value
+	if (!rawValue) return fallbackValue
+	if (!allowedValues.includes(rawValue as T)) return fallbackValue
+	return rawValue as T
+}
+
+function parsePositiveIntegerQueryValue(
+	value: LocationQueryValue | LocationQueryValue[] | undefined,
+	fallbackValue: number,
+): number {
+	const rawValue = Array.isArray(value) ? value[0] : value
+	if (!rawValue) return fallbackValue
+
+	const parsedValue = Number.parseInt(rawValue, 10)
+	if (!Number.isFinite(parsedValue) || parsedValue < 1) return fallbackValue
+	return parsedValue
+}
+
+function getLocalDateQueryValue(date: Date): string {
+	const year = date.getFullYear()
+	const month = String(date.getMonth() + 1).padStart(2, '0')
+	const day = String(date.getDate()).padStart(2, '0')
+	return `${year}-${month}-${day}`
+}
+
+function getDefaultCustomStartDate(): string {
+	const date = new Date()
+	date.setDate(date.getDate() - 1)
+	return getLocalDateQueryValue(date)
+}
+
+function getDefaultCustomEndDate(): string {
+	return getLocalDateQueryValue(new Date())
+}
+
+function parseDateQueryValue(
+	value: LocationQueryValue | LocationQueryValue[] | undefined,
+	fallbackValue: string,
+): string {
+	const rawValue = Array.isArray(value) ? value[0] : value
+	if (!rawValue || !/^\d{4}-\d{2}-\d{2}$/.test(rawValue)) return fallbackValue
+
+	const date = new Date(`${rawValue}T00:00:00`)
+	if (Number.isNaN(date.getTime())) return fallbackValue
+	if (getLocalDateQueryValue(date) !== rawValue) return fallbackValue
+
+	return rawValue
+}
+
+function serializeListQueryValue(values: string[]): string | undefined {
+	if (values.length === 0) return undefined
+	return values.join(',')
+}
+
+function normalizeQueryValue(
+	value:
+		| LocationQueryValue
+		| LocationQueryValue[]
+		| LocationQueryValueRaw
+		| LocationQueryValueRaw[]
+		| undefined,
+): string[] {
+	if (value === undefined || value === null) return []
+	if (Array.isArray(value)) {
+		return value
+			.filter(
+				(item): item is LocationQueryValue | LocationQueryValueRaw =>
+					item !== undefined && item !== null,
+			)
+			.map((item) => String(item))
+	}
+	return [String(value)]
+}
+
+function areQueryValuesEqual(
+	left:
+		| LocationQueryValue
+		| LocationQueryValue[]
+		| LocationQueryValueRaw
+		| LocationQueryValueRaw[]
+		| undefined,
+	right:
+		| LocationQueryValue
+		| LocationQueryValue[]
+		| LocationQueryValueRaw
+		| LocationQueryValueRaw[]
+		| undefined,
+): boolean {
+	const leftValues = normalizeQueryValue(left)
+	const rightValues = normalizeQueryValue(right)
+
+	if (leftValues.length !== rightValues.length) return false
+	for (let index = 0; index < leftValues.length; index += 1) {
+		if (leftValues[index] !== rightValues[index]) return false
+	}
+	return true
+}
+
+export function areStringArraysEqual(left: string[], right: string[]): boolean {
+	if (left.length !== right.length) return false
+	for (let index = 0; index < left.length; index += 1) {
+		if (left[index] !== right[index]) return false
+	}
+	return true
+}
+
+export function areSelectedFiltersEqual(
+	left: AnalyticsSelectedFilters,
+	right: AnalyticsSelectedFilters,
+): boolean {
+	if (!areStringArraysEqual(left.project, right.project)) return false
+	for (const category of URL_FILTER_CATEGORIES) {
+		if (!areStringArraysEqual(left[category], right[category])) return false
+	}
+	return true
+}
+
+function areAllProjectsSelected(selectedProjectIds: string[], allProjectIds: string[]): boolean {
+	if (allProjectIds.length === 0 || selectedProjectIds.length !== allProjectIds.length) {
+		return false
+	}
+	const allProjectIdSet = new Set(allProjectIds)
+	return selectedProjectIds.every((projectId) => allProjectIdSet.has(projectId))
+}
+
+export function readAnalyticsQueryBuilderState(
+	query: LocationQuery,
+	availableProjectIds: string[],
+): AnalyticsQueryBuilderState {
+	const selectedProjectIdsFromQuery = parseListQueryValue(query[QUERY_KEY_PROJECT_IDS])
+	const selectedProjectIds =
+		selectedProjectIdsFromQuery.length > 0 ? selectedProjectIdsFromQuery : availableProjectIds
+
+	const selectedFilters = buildEmptySelectedFilters()
+	for (const category of URL_FILTER_CATEGORIES) {
+		selectedFilters[category] = normalizeFilterQueryValues(
+			category,
+			parseListQueryValue(query[FILTER_QUERY_KEY_BY_CATEGORY[category]]),
+		)
+	}
+
+	const selectedCustomTimeframeStartDate = parseDateQueryValue(
+		query[QUERY_KEY_TIMEFRAME_START],
+		getDefaultCustomStartDate(),
+	)
+	const rawCustomTimeframeEndDate = parseDateQueryValue(
+		query[QUERY_KEY_TIMEFRAME_END],
+		getDefaultCustomEndDate(),
+	)
+	const selectedCustomTimeframeEndDate =
+		rawCustomTimeframeEndDate < selectedCustomTimeframeStartDate
+			? selectedCustomTimeframeStartDate
+			: rawCustomTimeframeEndDate
+
+	return {
+		selectedProjectIds,
+		selectedTimeframeMode: parsePresetQueryValue(
+			query[QUERY_KEY_TIMEFRAME_MODE],
+			TIMEFRAME_MODE_VALUES,
+			DEFAULT_TIMEFRAME_MODE,
+		),
+		selectedTimeframe: parsePresetQueryValue(
+			query[QUERY_KEY_TIMEFRAME],
+			TIMEFRAME_PRESET_VALUES,
+			DEFAULT_TIMEFRAME_PRESET,
+		),
+		selectedLastTimeframeAmount: parsePositiveIntegerQueryValue(
+			query[QUERY_KEY_TIMEFRAME_LAST_AMOUNT],
+			DEFAULT_LAST_TIMEFRAME_AMOUNT,
+		),
+		selectedLastTimeframeUnit: parsePresetQueryValue(
+			query[QUERY_KEY_TIMEFRAME_LAST_UNIT],
+			LAST_TIMEFRAME_UNIT_VALUES,
+			DEFAULT_LAST_TIMEFRAME_UNIT,
+		),
+		selectedCustomTimeframeStartDate,
+		selectedCustomTimeframeEndDate,
+		selectedGroupBy: parsePresetQueryValue(
+			query[QUERY_KEY_GROUP_BY],
+			GROUP_BY_PRESET_VALUES,
+			DEFAULT_GROUP_BY_PRESET,
+		),
+		selectedBreakdown: parsePresetQueryValue(
+			query[QUERY_KEY_BREAKDOWN],
+			BREAKDOWN_PRESET_VALUES,
+			DEFAULT_BREAKDOWN_PRESET,
+		),
+		selectedFilters,
+	}
+}
+
+export function buildAnalyticsQueryBuilderRouteQuery(
+	currentRouteQuery: LocationQuery,
+	state: AnalyticsQueryBuilderState,
+	availableProjectIds: string[],
+): MutableRouteQuery {
+	const nextRouteQuery = {
+		...currentRouteQuery,
+	} as MutableRouteQuery
+
+	const projectIdsQueryValue = areAllProjectsSelected(state.selectedProjectIds, availableProjectIds)
+		? undefined
+		: serializeListQueryValue(state.selectedProjectIds)
+
+	nextRouteQuery[QUERY_KEY_PROJECT_IDS] = projectIdsQueryValue
+	nextRouteQuery[QUERY_KEY_TIMEFRAME_MODE] =
+		state.selectedTimeframeMode !== DEFAULT_TIMEFRAME_MODE ? state.selectedTimeframeMode : undefined
+	nextRouteQuery[QUERY_KEY_TIMEFRAME] =
+		state.selectedTimeframeMode === 'preset' && state.selectedTimeframe !== DEFAULT_TIMEFRAME_PRESET
+			? state.selectedTimeframe
+			: undefined
+	nextRouteQuery[QUERY_KEY_TIMEFRAME_LAST_AMOUNT] =
+		state.selectedTimeframeMode === 'last' ? String(state.selectedLastTimeframeAmount) : undefined
+	nextRouteQuery[QUERY_KEY_TIMEFRAME_LAST_UNIT] =
+		state.selectedTimeframeMode === 'last' ? state.selectedLastTimeframeUnit : undefined
+	nextRouteQuery[QUERY_KEY_TIMEFRAME_START] =
+		state.selectedTimeframeMode === 'custom_range'
+			? state.selectedCustomTimeframeStartDate
+			: undefined
+	nextRouteQuery[QUERY_KEY_TIMEFRAME_END] =
+		state.selectedTimeframeMode === 'custom_range'
+			? state.selectedCustomTimeframeEndDate
+			: undefined
+	nextRouteQuery[QUERY_KEY_GROUP_BY] =
+		state.selectedGroupBy !== DEFAULT_GROUP_BY_PRESET ? state.selectedGroupBy : undefined
+	nextRouteQuery[QUERY_KEY_BREAKDOWN] =
+		state.selectedBreakdown !== DEFAULT_BREAKDOWN_PRESET ? state.selectedBreakdown : undefined
+
+	for (const category of URL_FILTER_CATEGORIES) {
+		const categoryQueryKey = FILTER_QUERY_KEY_BY_CATEGORY[category]
+		nextRouteQuery[categoryQueryKey] = serializeListQueryValue(state.selectedFilters[category])
+	}
+
+	return nextRouteQuery
+}
+
+export function hasAnalyticsQueryBuilderRouteChange(
+	currentRouteQuery: LocationQuery,
+	nextRouteQuery: MutableRouteQuery,
+): boolean {
+	return ANALYTICS_QUERY_KEYS.some(
+		(key) => !areQueryValuesEqual(currentRouteQuery[key], nextRouteQuery[key]),
+	)
+}
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
deleted file mode 100644
index bb409886a6..0000000000
--- a/apps/frontend/src/utils/analytics.js
+++ /dev/null
@@ -1,493 +0,0 @@
-import { injectI18n, useDebugLogger } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import { computed, ref, watch } from 'vue'
-
-import { useTheme } from '~/composables/nuxt-accessors.ts'
-
-// note: build step can miss unix import for some reason, so
-// we have to import it like this
-
-const { unix } = dayjs
-
-export function useCountryNames(style = 'long') {
-	const { locale } = injectI18n()
-	const displayNames = computed(
-		() => new Intl.DisplayNames([locale.value], { type: 'region', style }),
-	)
-	return function formatCountryName(code) {
-		try {
-			return displayNames.value.of(code) ?? code
-		} catch {
-			return code
-		}
-	}
-}
-
-export const countryCodeToName = (code) => {
-	const formatCountryName = useCountryNames()
-
-	return formatCountryName(code)
-}
-
-export const countryCodeToFlag = (code) => {
-	if (code === 'XX') {
-		return undefined
-	}
-	return `https://flagcdn.com/h240/${code.toLowerCase()}.png`
-}
-
-export const formatTimestamp = (timestamp) => {
-	return unix(timestamp).format()
-}
-
-export const formatPercent = (value, sum) => {
-	return `${((value / sum) * 100).toFixed(2)}%`
-}
-
-const hashProjectId = (projectId) => {
-	return projectId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % 30
-}
-
-export const defaultColors = [
-	'#ff496e', // Original: Bright pink
-	'#ffa347', // Original: Bright orange
-	'#1bd96a', // Original: Bright green
-	'#4f9cff', // Original: Bright blue
-	'#c78aff', // Original: Bright purple
-	'#ffeb3b', // Added: Bright yellow
-	'#00bcd4', // Added: Bright cyan
-	'#ff5722', // Added: Bright red-orange
-	'#9c27b0', // Added: Bright deep purple
-	'#3f51b5', // Added: Bright indigo
-	'#009688', // Added: Bright teal
-	'#cddc39', // Added: Bright lime
-	'#795548', // Added: Bright brown
-	'#607d8b', // Added: Bright blue-grey
-]
-
-/**
- * @param {string | number} value
- * @returns {string} color
- */
-export const getDefaultColor = (value) => {
-	if (typeof value === 'string') {
-		value = hashProjectId(value)
-	}
-	return defaultColors[value % defaultColors.length]
-}
-
-export const intToRgba = (color, projectId = 'Unknown', theme = 'dark', alpha = '1') => {
-	const hash = hashProjectId(projectId)
-
-	if (!color || color === 0) {
-		return getDefaultColor(hash)
-	}
-
-	// if color is a string, return that instead
-	if (typeof color === 'string') {
-		return color
-	}
-
-	// Extract RGB values
-	let r = (color >> 16) & 255
-	let g = (color >> 8) & 255
-	let b = color & 255
-
-	// Hash function to alter color slightly based on project_id
-	r = (r + hash) % 256
-	g = (g + hash) % 256
-	b = (b + hash) % 256
-
-	// Adjust brightness for theme
-	const brightness = r * 0.299 + g * 0.587 + b * 0.114
-	const threshold = theme === 'dark' ? 50 : 200
-	if (theme === 'dark' && brightness < threshold) {
-		// Increase brightness for dark theme
-		r += threshold / 2
-		g += threshold / 2
-		b += threshold / 2
-	} else if (theme === 'light' && brightness > threshold) {
-		// Decrease brightness for light theme
-		r -= threshold / 4
-		g -= threshold / 4
-		b -= threshold / 4
-	}
-
-	// Ensure RGB values are within 0-255
-	r = Math.min(255, Math.max(0, r))
-	g = Math.min(255, Math.max(0, g))
-	b = Math.min(255, Math.max(0, b))
-
-	return `rgba(${r}, ${g}, ${b}, ${alpha})`
-}
-
-const emptyAnalytics = {
-	sum: 0,
-	len: 0,
-	chart: {
-		labels: [],
-		data: [],
-		sumData: [
-			{
-				name: '',
-				data: [],
-			},
-		],
-		colors: [],
-		defaultColors: [],
-	},
-	projectIds: [],
-}
-
-export const analyticsSetToCSVString = (analytics) => {
-	if (!analytics) {
-		return ''
-	}
-
-	const newline = '\n'
-	const labels = analytics.chart.labels
-	const projects = analytics.chart.data
-
-	const projectNames = projects.map((p) => p.name)
-
-	const header = ['Date', ...projectNames].join(',')
-
-	const data = labels.map((label, i) => {
-		const values = projects.map((p) => p.data?.[i] || '')
-		return [label, ...values].join(',')
-	})
-
-	return [header, ...data].join(newline)
-}
-
-export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
-	if (!category || !projects) {
-		return emptyAnalytics
-	}
-
-	// Get an intersection of category keys and project ids
-	const projectIds = projects.map((p) => p.id)
-	const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id))
-
-	if (!loadedProjectIds?.length) {
-		return emptyAnalytics
-	}
-
-	const loadedProjectData = loadedProjectIds.map((id) => category[id])
-
-	// Convert each project's data into a list of [unix_ts_str, number] pairs
-	const projectData = loadedProjectData
-		.map((data) => Object.entries(data))
-		.map((data) => data.sort(sortFn))
-		.map((data) => (mapFn ? data.map(mapFn) : data))
-
-	// Each project may not include the same timestamps, so we should use the union of all timestamps
-	const timestamps = Array.from(
-		new Set(projectData.flatMap((data) => data.map(([ts]) => ts))),
-	).sort()
-
-	const chartData = projectData
-		.map((data, i) => {
-			const project = projects.find((p) => p.id === loadedProjectIds[i])
-			if (!project) {
-				throw new Error(`Project ${loadedProjectIds[i]} not found`)
-			}
-
-			return {
-				name: `${project.title}`,
-				data: timestamps.map((ts) => {
-					const entry = data.find(([ets]) => ets === ts)
-					return entry ? entry[1] : 0
-				}),
-				id: project.id,
-				color: project.color,
-			}
-		})
-		.sort(
-			(a, b) =>
-				b.data.reduce((acc, cur) => acc + cur, 0) - a.data.reduce((acc, cur) => acc + cur, 0),
-		)
-
-	const projectIdsSortedBySum = chartData.map((p) => p.id)
-
-	return {
-		// The total count of all the values across all projects
-		sum: projectData.reduce((acc, cur) => acc + cur.reduce((a, c) => a + c[1], 0), 0),
-		len: timestamps.length,
-		chart: {
-			labels: timestamps.map(labelFn),
-			data: chartData.map((x) => ({ name: x.name, data: x.data })),
-			sumData: [
-				{
-					name: chartName,
-					data: timestamps.map((ts) => {
-						const entries = projectData.flat().filter(([ets]) => ets === ts)
-						return entries.reduce((acc, cur) => acc + cur[1], 0)
-					}),
-				},
-			],
-			colors: projectData.map((_, i) => {
-				const project = chartData[i]
-
-				return intToRgba(project.color, project.id, theme)
-			}),
-			defaultColors: projectData.map((_, i) => {
-				const project = chartData[i]
-				return getDefaultColor(project.id)
-			}),
-		},
-		projectIds: projectIdsSortedBySum,
-	}
-}
-
-export const processAnalyticsByCountry = (category, projects, sortFn) => {
-	if (!category || !projects) {
-		return {
-			sum: 0,
-			len: 0,
-			data: [],
-		}
-	}
-
-	// Get an intersection of category keys and project ids
-	const projectIds = projects.map((p) => p.id)
-	const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id))
-
-	if (!loadedProjectIds?.length) {
-		return {
-			sum: 0,
-			len: 0,
-			data: [],
-		}
-	}
-
-	const loadedProjectData = loadedProjectIds.map((id) => category[id])
-
-	// Convert each project's data into a list of [countrycode, number] pairs
-	// Fold into a single list with summed values for each country over all projects
-
-	const countrySums = new Map()
-
-	loadedProjectData.forEach((data) => {
-		Object.entries(data).forEach(([country, value]) => {
-			const countryCode = country || 'XX'
-			const current = countrySums.get(countryCode) || 0
-			countrySums.set(countryCode, current + value)
-		})
-	})
-
-	const entries = Array.from(countrySums.entries())
-
-	return {
-		sum: entries.reduce((acc, cur) => acc + cur[1], 0),
-		len: entries.length,
-		data: entries.sort(sortFn),
-	}
-}
-
-const sortCount = ([, a], [, b]) => b - a
-const sortTimestamp = ([a], [b]) => a - b
-const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100]
-
-const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount)
-const processNumberAnalytics = (c, projects, theme) =>
-	processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, 'Downloads', theme)
-const processRevAnalytics = (c, projects, theme) =>
-	processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, 'Revenue', theme)
-
-const useFetchAnalytics = (
-	url,
-	baseOptions = {
-		apiVersion: 3,
-	},
-) => {
-	return useBaseFetch(url, baseOptions)
-}
-
-/**
- * @param {Ref<any[]>} projects
- * @param {undefined | () => any} onDataRefresh
- */
-export const useFetchAllAnalytics = (
-	onDataRefresh,
-	projects,
-	selectedProjects,
-	personalRevenue = false,
-	startDate = ref(dayjs().subtract(30, 'days')),
-	endDate = ref(dayjs()),
-	timeResolution = ref(1440),
-) => {
-	const debug = useDebugLogger('useFetchAllAnalytics')
-	debug('init', {
-		projectCount: projects.value?.length,
-		personalRevenue,
-		startDate: startDate.value?.toISOString(),
-		endDate: endDate.value?.toISOString(),
-	})
-
-	const downloadData = ref(null)
-	const viewData = ref(null)
-	const revenueData = ref(null)
-	const downloadsByCountry = ref(null)
-	const viewsByCountry = ref(null)
-	const loading = ref(true)
-	const error = ref(null)
-
-	const formattedData = computed(() => ({
-		downloads: processNumberAnalytics(downloadData.value, selectedProjects.value),
-		views: processNumberAnalytics(viewData.value, selectedProjects.value),
-		revenue: processRevAnalytics(revenueData.value, selectedProjects.value),
-		downloadsByCountry: processCountryAnalytics(downloadsByCountry.value, selectedProjects.value),
-		viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
-	}))
-
-	const theme = useTheme()
-
-	const totalData = computed(() => ({
-		downloads: processNumberAnalytics(downloadData.value, projects.value, theme.active),
-		views: processNumberAnalytics(viewData.value, projects.value, theme.active),
-		revenue: processRevAnalytics(revenueData.value, projects.value, theme.active),
-	}))
-
-	const buildQuery = () => {
-		const q = {
-			start_date: startDate.value.toISOString(),
-			end_date: endDate.value.toISOString(),
-			resolution_minutes: timeResolution.value,
-		}
-
-		if (projects.value?.length) {
-			q.project_ids = JSON.stringify(projects.value.map((p) => p.id))
-		}
-
-		return q
-	}
-
-	const fetchData = async (query) => {
-		debug('fetchData called', { query })
-		const normalQuery = new URLSearchParams(query)
-		const revenueQuery = new URLSearchParams(query)
-
-		if (personalRevenue) {
-			revenueQuery.delete('project_ids')
-		}
-
-		const qs = normalQuery.toString()
-		const revenueQs = revenueQuery.toString()
-
-		try {
-			loading.value = true
-			error.value = null
-
-			debug('fetching all 5 endpoints...')
-			const responses = await Promise.all([
-				useFetchAnalytics(`analytics/downloads?${qs}`),
-				useFetchAnalytics(`analytics/views?${qs}`),
-				useFetchAnalytics(`analytics/revenue?${revenueQs}`),
-				useFetchAnalytics(`analytics/countries/downloads?${qs}`),
-				useFetchAnalytics(`analytics/countries/views?${qs}`),
-			])
-			debug('all 5 endpoints resolved', {
-				downloads: Object.keys(responses[0] || {}).length,
-				views: Object.keys(responses[1] || {}).length,
-				revenue: Object.keys(responses[2] || {}).length,
-			})
-
-			const projectIds = new Set()
-			if (projects.value) {
-				projects.value.forEach((p) => projectIds.add(p.id))
-			} else {
-				Object.keys(responses[0] || {}).forEach((id) => projectIds.add(id))
-			}
-
-			debug('filtering to projectIds', { count: projectIds.size })
-
-			const filterProjectIds = (data) => {
-				const filtered = {}
-				Object.entries(data).forEach(([id, values]) => {
-					if (projectIds.has(id)) {
-						filtered[id] = values
-					}
-				})
-				return filtered
-			}
-
-			downloadData.value = filterProjectIds(responses[0] || {})
-			viewData.value = filterProjectIds(responses[1] || {})
-			revenueData.value = filterProjectIds(responses[2] || {})
-
-			downloadsByCountry.value = responses[3] || {}
-			viewsByCountry.value = responses[4] || {}
-		} catch (e) {
-			debug('fetchData error', e)
-			error.value = e
-		} finally {
-			loading.value = false
-			debug('fetchData done, loading=false')
-		}
-	}
-
-	const fetch = async () => {
-		debug('fetch() called', { projectCount: projects.value?.length })
-		await fetchData(buildQuery())
-		if (onDataRefresh) {
-			onDataRefresh()
-		}
-	}
-
-	watch(
-		[() => startDate.value, () => endDate.value, () => timeResolution.value, () => projects.value],
-		(newVals, oldVals) => {
-			debug('watch triggered', { new: newVals, old: oldVals })
-			fetch()
-		},
-	)
-
-	const validProjectIds = computed(() => {
-		const ids = new Set()
-
-		if (downloadData.value) {
-			Object.keys(downloadData.value).forEach((id) => ids.add(id))
-		}
-
-		if (viewData.value) {
-			Object.keys(viewData.value).forEach((id) => ids.add(id))
-		}
-
-		if (revenueData.value) {
-			// revenue will always have all project ids, but the ids may have an empty object or a ton of keys below a cent (0.00...) as values. We want to filter those out
-			Object.entries(revenueData.value).forEach(([id, data]) => {
-				if (Object.keys(data).length) {
-					if (Object.values(data).some((v) => v >= 0.01)) {
-						ids.add(id)
-					}
-				}
-			})
-		}
-
-		return Array.from(ids)
-	})
-
-	return {
-		// Configuration
-		timeResolution,
-
-		startDate,
-		endDate,
-
-		// Data
-		downloadData,
-		viewData,
-		revenueData,
-		downloadsByCountry,
-		viewsByCountry,
-
-		// Computed state
-		validProjectIds,
-		formattedData,
-		totalData,
-		loading,
-		error,
-		fetch,
-	}
-}
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 7219d12e55..4c14f580e5 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -13,6 +13,7 @@ import { KyrosFilesV0Module } from './kyros/files/v0'
 import { KyrosLogsV1Module } from './kyros/logs/v1'
 import { LabrinthVersionsV2Module, LabrinthVersionsV3Module } from './labrinth'
 import { LabrinthAffiliateInternalModule } from './labrinth/affiliate/internal'
+import { LabrinthAnalyticsV3Module } from './labrinth/analytics/v3'
 import { LabrinthAuthInternalModule } from './labrinth/auth/internal'
 import { LabrinthAuthV2Module } from './labrinth/auth/v2'
 import { LabrinthBillingInternalModule } from './labrinth/billing/internal'
@@ -72,6 +73,7 @@ export const MODULE_REGISTRY = {
 	kyros_files_v0: KyrosFilesV0Module,
 	kyros_logs_v1: KyrosLogsV1Module,
 	labrinth_affiliate_internal: LabrinthAffiliateInternalModule,
+	labrinth_analytics_v3: LabrinthAnalyticsV3Module,
 	labrinth_auth_internal: LabrinthAuthInternalModule,
 	labrinth_auth_v2: LabrinthAuthV2Module,
 	labrinth_billing_internal: LabrinthBillingInternalModule,
diff --git a/packages/api-client/src/modules/labrinth/analytics/v3.ts b/packages/api-client/src/modules/labrinth/analytics/v3.ts
new file mode 100644
index 0000000000..cebb58ac6f
--- /dev/null
+++ b/packages/api-client/src/modules/labrinth/analytics/v3.ts
@@ -0,0 +1,42 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Labrinth } from '../types'
+
+export class LabrinthAnalyticsV3Module extends AbstractModule {
+	public getModuleID(): string {
+		return 'labrinth_analytics_v3'
+	}
+
+	/**
+	 * Fetch analytics data for the authenticated user's accessible projects
+	 * and affiliate codes.
+	 *
+	 * @param data - Analytics request body defining time range and requested metrics
+	 * @returns Promise resolving to the analytics response, with time slices in `metrics`
+	 *
+	 * @example
+	 * ```typescript
+	 * const response = await client.labrinth.analytics_v3.fetch({
+	 *   time_range: {
+	 *     start: '2026-01-01T00:00:00Z',
+	 *     end: '2026-02-01T00:00:00Z',
+	 *     resolution: { slices: 31 },
+	 *   },
+	 *   project_ids: ['A1B2C3D4'],
+	 *   return_metrics: {
+	 *     project_views: { bucket_by: ['project_id'] },
+	 *   },
+	 * })
+	 * const timeSlices = response.metrics
+	 * ```
+	 */
+	public async fetch(
+		data: Labrinth.Analytics.v3.FetchRequest,
+	): Promise<Labrinth.Analytics.v3.FetchResponse> {
+		return this.client.request<Labrinth.Analytics.v3.FetchResponse>('/analytics', {
+			api: 'labrinth',
+			version: 3,
+			method: 'POST',
+			body: data,
+		})
+	}
+}
diff --git a/packages/api-client/src/modules/labrinth/index.ts b/packages/api-client/src/modules/labrinth/index.ts
index 883bac31d7..d5eedb3adc 100644
--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -1,3 +1,4 @@
+export * from './analytics/v3'
 export * from './auth/internal'
 export * from './auth/v2'
 export * from './billing/internal'
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index aa44c19228..dc29b73e53 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -238,6 +238,144 @@ export namespace Labrinth {
 		}
 	}
 
+	export namespace Analytics {
+		export namespace v3 {
+			export type FetchRequest = {
+				time_range: TimeRange
+				return_metrics: ReturnMetrics
+				project_ids?: string[]
+			}
+
+			export type TimeRange = {
+				start: string
+				end: string
+				resolution: TimeRangeResolution
+			}
+
+			export type TimeRangeResolution = { slices: number } | { minutes: number }
+
+			export type ReturnMetrics = {
+				project_views?: Metrics<ProjectViewsField>
+				project_downloads?: Metrics<ProjectDownloadsField>
+				project_playtime?: Metrics<ProjectPlaytimeField>
+				project_revenue?: Metrics<ProjectRevenueField>
+				affiliate_code_clicks?: Metrics<AffiliateCodeClicksField>
+				affiliate_code_conversions?: Metrics<AffiliateCodeConversionsField>
+				affiliate_code_revenue?: Metrics<AffiliateCodeRevenueField>
+			}
+
+			export type Metrics<F> = {
+				bucket_by?: F[]
+			}
+
+			export type ProjectViewsField =
+				| 'project_id'
+				| 'domain'
+				| 'site_path'
+				| 'monetized'
+				| 'country'
+
+			export type ProjectDownloadsField =
+				| 'project_id'
+				| 'version_id'
+				| 'domain'
+				| 'site_path'
+				| 'country'
+				| 'monetized'
+				| 'reason'
+				| 'game_version'
+				| 'loader'
+
+			export type ProjectPlaytimeField =
+				| 'project_id'
+				| 'version_id'
+				| 'loader'
+				| 'game_version'
+				| 'country'
+
+			export type ProjectRevenueField = 'project_id'
+
+			export type DownloadReason = 'standalone' | 'dependency' | 'modpack'
+
+			export type AffiliateCodeClicksField = 'affiliate_code_id'
+
+			export type AffiliateCodeConversionsField = 'affiliate_code_id'
+
+			export type AffiliateCodeRevenueField = 'affiliate_code_id'
+
+			export type FetchResponse = {
+				metrics: TimeSlice[]
+			}
+
+			export type TimeSlice = AnalyticsData[]
+
+			export type AnalyticsData = ProjectAnalytics | AffiliateCodeAnalytics
+
+			export type ProjectAnalytics = {
+				source_project: string
+			} & ProjectMetrics
+
+			export type ProjectMetrics =
+				| ({ metric_kind: 'views' } & ProjectViews)
+				| ({ metric_kind: 'downloads' } & ProjectDownloads)
+				| ({ metric_kind: 'playtime' } & ProjectPlaytime)
+				| ({ metric_kind: 'revenue' } & ProjectRevenue)
+
+			export type ProjectViews = {
+				domain?: string
+				site_path?: string
+				monetized?: boolean
+				country?: string
+				views: number
+			}
+
+			export type ProjectDownloads = {
+				domain?: string
+				site_path?: string
+				version_id?: string
+				country?: string
+				monetized?: boolean
+				reason?: DownloadReason
+				game_version?: string
+				loader?: string
+				downloads: number
+			}
+
+			export type ProjectPlaytime = {
+				version_id?: string
+				loader?: string
+				game_version?: string
+				country?: string
+				seconds: number
+			}
+
+			export type ProjectRevenue = {
+				revenue: string
+			}
+
+			export type AffiliateCodeAnalytics = {
+				source_affiliate_code: string
+			} & AffiliateCodeMetrics
+
+			export type AffiliateCodeMetrics =
+				| ({ metric_kind: 'clicks' } & AffiliateCodeClicks)
+				| ({ metric_kind: 'conversions' } & AffiliateCodeConversions)
+				| ({ metric_kind: 'revenue' } & AffiliateCodeRevenue)
+
+			export type AffiliateCodeClicks = {
+				clicks: number
+			}
+
+			export type AffiliateCodeConversions = {
+				conversions: number
+			}
+
+			export type AffiliateCodeRevenue = {
+				revenue: string
+			}
+		}
+	}
+
 	export namespace Auth {
 		export namespace Internal {
 			export type SubscriptionStatus = {
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index dd9abc0d11..d854abd3a1 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -3,6 +3,8 @@
 
 import type { FunctionalComponent, SVGAttributes } from 'vue'
 
+export type IconComponent = FunctionalComponent<SVGAttributes>
+
 import _AffiliateIcon from './icons/affiliate.svg?component'
 import _AlignLeftIcon from './icons/align-left.svg?component'
 import _ArchiveIcon from './icons/archive.svg?component'
@@ -44,6 +46,9 @@ import _CalendarArrowDownIcon from './icons/calendar-arrow-down.svg?component'
 import _CardIcon from './icons/card.svg?component'
 import _ChangeSkinIcon from './icons/change-skin.svg?component'
 import _ChartIcon from './icons/chart.svg?component'
+import _ChartAreaIcon from './icons/chart-area.svg?component'
+import _ChartColumnBigIcon from './icons/chart-column-big.svg?component'
+import _ChartSplineIcon from './icons/chart-spline.svg?component'
 import _CheckIcon from './icons/check.svg?component'
 import _CheckCheckIcon from './icons/check-check.svg?component'
 import _CheckCircleIcon from './icons/check-circle.svg?component'
@@ -177,6 +182,7 @@ import _PaintbrushIcon from './icons/paintbrush.svg?component'
 import _PaletteIcon from './icons/palette.svg?component'
 import _PencilIcon from './icons/pencil.svg?component'
 import _PickaxeIcon from './icons/pickaxe.svg?component'
+import _PinIcon from './icons/pin.svg?component'
 import _PlayIcon from './icons/play.svg?component'
 import _PlugIcon from './icons/plug.svg?component'
 import _PlusIcon from './icons/plus.svg?component'
@@ -368,6 +374,8 @@ import _ToggleRightIcon from './icons/toggle-right.svg?component'
 import _TransferIcon from './icons/transfer.svg?component'
 import _TrashIcon from './icons/trash.svg?component'
 import _TrashExclamationIcon from './icons/trash-exclamation.svg?component'
+import _TrendingDownIcon from './icons/trending-down.svg?component'
+import _TrendingUpIcon from './icons/trending-up.svg?component'
 import _TriangleAlertIcon from './icons/triangle-alert.svg?component'
 import _UnderlineIcon from './icons/underline.svg?component'
 import _UndoIcon from './icons/undo.svg?component'
@@ -395,8 +403,6 @@ import _XCircleIcon from './icons/x-circle.svg?component'
 import _ZoomInIcon from './icons/zoom-in.svg?component'
 import _ZoomOutIcon from './icons/zoom-out.svg?component'
 
-export type IconComponent = FunctionalComponent<SVGAttributes>
-
 export const AffiliateIcon = _AffiliateIcon
 export const AlignLeftIcon = _AlignLeftIcon
 export const ArchiveIcon = _ArchiveIcon
@@ -438,6 +444,9 @@ export const CalendarArrowDownIcon = _CalendarArrowDownIcon
 export const CardIcon = _CardIcon
 export const ChangeSkinIcon = _ChangeSkinIcon
 export const ChartIcon = _ChartIcon
+export const ChartAreaIcon = _ChartAreaIcon
+export const ChartColumnBigIcon = _ChartColumnBigIcon
+export const ChartSplineIcon = _ChartSplineIcon
 export const CheckIcon = _CheckIcon
 export const CheckCheckIcon = _CheckCheckIcon
 export const CheckCircleIcon = _CheckCircleIcon
@@ -571,6 +580,7 @@ export const PaintbrushIcon = _PaintbrushIcon
 export const PaletteIcon = _PaletteIcon
 export const PencilIcon = _PencilIcon
 export const PickaxeIcon = _PickaxeIcon
+export const PinIcon = _PinIcon
 export const PlayIcon = _PlayIcon
 export const PlugIcon = _PlugIcon
 export const PlusIcon = _PlusIcon
@@ -762,6 +772,8 @@ export const ToggleRightIcon = _ToggleRightIcon
 export const TransferIcon = _TransferIcon
 export const TrashIcon = _TrashIcon
 export const TrashExclamationIcon = _TrashExclamationIcon
+export const TrendingDownIcon = _TrendingDownIcon
+export const TrendingUpIcon = _TrendingUpIcon
 export const TriangleAlertIcon = _TriangleAlertIcon
 export const UnderlineIcon = _UnderlineIcon
 export const UndoIcon = _UndoIcon
diff --git a/packages/assets/icons/chart-area.svg b/packages/assets/icons/chart-area.svg
new file mode 100644
index 0000000000..506cbf4d3d
--- /dev/null
+++ b/packages/assets/icons/chart-area.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-chart-area"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+  <path d="M7 11.207a.5.5 0 0 1 .146-.353l2-2a.5.5 0 0 1 .708 0l3.292 3.292a.5.5 0 0 0 .708 0l4.292-4.292a.5.5 0 0 1 .854.353V16a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1z" />
+</svg>
diff --git a/packages/assets/icons/chart-column-big.svg b/packages/assets/icons/chart-column-big.svg
new file mode 100644
index 0000000000..aa179bef1e
--- /dev/null
+++ b/packages/assets/icons/chart-column-big.svg
@@ -0,0 +1,17 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-chart-column-big"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+  <rect x="15" y="5" width="4" height="12" rx="1" />
+  <rect x="7" y="8" width="4" height="9" rx="1" />
+</svg>
diff --git a/packages/assets/icons/chart-spline.svg b/packages/assets/icons/chart-spline.svg
new file mode 100644
index 0000000000..b8049c7538
--- /dev/null
+++ b/packages/assets/icons/chart-spline.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-chart-spline"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M3 3v16a2 2 0 0 0 2 2h16" />
+  <path d="M7 16c.5-2 1.5-7 4-7 2 0 2 3 4 3 2.5 0 4.5-5 5-7" />
+</svg>
diff --git a/packages/assets/icons/pin.svg b/packages/assets/icons/pin.svg
new file mode 100644
index 0000000000..4a5b1d45f6
--- /dev/null
+++ b/packages/assets/icons/pin.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-pin"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 17v5" />
+  <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
+</svg>
diff --git a/packages/assets/icons/trending-down.svg b/packages/assets/icons/trending-down.svg
new file mode 100644
index 0000000000..92ee278e05
--- /dev/null
+++ b/packages/assets/icons/trending-down.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-trending-down"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 17h6v-6" />
+  <path d="m22 17-8.5-8.5-5 5L2 7" />
+</svg>
diff --git a/packages/assets/icons/trending-up.svg b/packages/assets/icons/trending-up.svg
new file mode 100644
index 0000000000..f73d3eff13
--- /dev/null
+++ b/packages/assets/icons/trending-up.svg
@@ -0,0 +1,16 @@
+<!-- @license lucide-static v0.562.0 - ISC -->
+<svg
+  class="lucide lucide-trending-up"
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M16 7h6v6" />
+  <path d="m22 7-8.5 8.5-5-5L2 17" />
+</svg>
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index f7502fb883..7cf3709783 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -188,7 +188,7 @@ const colorVariables = computed(() => {
 		}
 		const hoverColors = JSON.parse(JSON.stringify(colors))
 		const boxShadow =
-			props.type === 'chip' && colorVar.value ? `0 0 0 2px ${colorVar.value}` : defaultShadow
+			props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
 		return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_icon: ${colors.icon}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_hover-icon: ${hoverColors.icon}; --_box-shadow: ${boxShadow};`
 	}
 
@@ -226,7 +226,7 @@ const colorVariables = computed(() => {
 	}
 
 	const boxShadow =
-		props.type === 'chip' && colorVar.value ? `0 0 0 2px ${colorVar.value}` : defaultShadow
+		props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
 	return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_box-shadow: ${boxShadow};`
 })
 
@@ -263,7 +263,7 @@ const fontSize = computed(() => {
 	> *:first-child
 	> *:first-child
 	> :is(button, a, .button-like):first-child {
-	@apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
+	@apply flex cursor-pointer flex-row items-center justify-center border-solid border border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
 	box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
 	transition:
 		scale 0.125s ease-in-out,
diff --git a/packages/ui/src/components/base/Chips.vue b/packages/ui/src/components/base/Chips.vue
index a1b517878c..ed5ef89fc8 100644
--- a/packages/ui/src/components/base/Chips.vue
+++ b/packages/ui/src/components/base/Chips.vue
@@ -75,6 +75,7 @@ function toggleItem(item: T) {
 	flex-wrap: wrap;
 
 	.btn {
+		border: 1px solid var(--surface-5);
 		&.capitalize {
 			text-transform: capitalize;
 		}
@@ -91,11 +92,9 @@ function toggleItem(item: T) {
 	}
 
 	.selected {
-		color: var(--color-contrast);
+		color: var(--color-brand);
 		background-color: var(--color-brand-highlight);
-		box-shadow:
-			inset 0 0 0 transparent,
-			0 0 0 2px var(--color-brand);
+		border: 1px solid var(--color-brand);
 	}
 }
 </style>
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index bf340ffd58..84f0dfc846 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -46,7 +46,7 @@
 			ref="triggerRef"
 			role="button"
 			tabindex="0"
-			class="relative flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-surface-4 px-4 py-2.5 text-left transition-all duration-200 text-button-text"
+			class="relative flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-surface-4 px-4 py-2.5 text-left transition-all duration-200 text-button-text gap-2.5"
 			:class="[
 				props.triggerClass,
 				{
@@ -94,6 +94,7 @@
 					ref="dropdownRef"
 					class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] bg-surface-4 border border-solid border-surface-5"
 					:class="[
+						props.dropdownClass,
 						openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
 					]"
 					:style="dropdownStyle"
@@ -137,14 +138,14 @@
 											<div class="flex flex-col gap-1.5">
 												<span
 													class="font-semibold leading-tight"
-													:class="item.value === modelValue ? 'text-contrast' : 'text-primary'"
+													:class="item.value === modelValue ? 'text-green' : 'text-primary'"
 												>
 													{{ item.label }}
 												</span>
 												<span
 													v-if="item.subLabel"
 													class="text-sm"
-													:class="item.value === modelValue ? 'text-contrast' : 'text-secondary'"
+													:class="item.value === modelValue ? 'text-green' : 'text-secondary'"
 												>
 													{{ item.subLabel }}
 												</span>
@@ -161,6 +162,10 @@
 						{{ noOptionsMessage }}
 					</div>
 
+					<div v-if="$slots.bottom" @keydown.stop>
+						<slot name="bottom"></slot>
+					</div>
+
 					<slot name="dropdown-footer"></slot>
 				</div>
 			</Transition>
@@ -226,6 +231,11 @@ const props = withDefaults(
 		maxHeight?: number
 		displayValue?: string
 		triggerClass?: string
+		dropdownClass?: string
+		/** Width for the teleported dropdown; defaults to the trigger/input width */
+		dropdownWidth?: string | number
+		/** Minimum width for the teleported dropdown */
+		dropdownMinWidth?: string | number
 		forceDirection?: 'up' | 'down'
 		noOptionsMessage?: string
 		disableSearchFilter?: boolean
@@ -283,6 +293,7 @@ const dropdownStyle = ref({
 	top: '0px',
 	left: '0px',
 	width: '0px',
+	minWidth: '0px',
 })
 
 const openDirection = ref<'down' | 'up'>('down')
@@ -338,12 +349,13 @@ const filteredOptions = computed(() => {
 })
 
 function getOptionClasses(item: ComboboxOption<T> & { key: string }, index: number) {
+	const isSelected = props.listbox && item.value === props.modelValue
+
 	return [
 		item.class,
 		{
-			'bg-surface-5':
-				(props.listbox && item.value === props.modelValue) ||
-				(focusedIndex.value === index && !(props.listbox && item.value === props.modelValue)),
+			'bg-highlight-green text-green hover:bg-highlight-green focus:bg-highlight-green': isSelected,
+			'bg-surface-5': focusedIndex.value === index && !isSelected,
 			'cursor-not-allowed opacity-50 pointer-events-none': item.disabled,
 		},
 	]
@@ -408,12 +420,35 @@ function calculateHorizontalPosition(
 	return left
 }
 
+function resolveDropdownWidth(triggerWidth: number): string {
+	if (props.dropdownWidth === undefined) return `${triggerWidth}px`
+	if (typeof props.dropdownWidth === 'number') return `${props.dropdownWidth}px`
+	return props.dropdownWidth
+}
+
+function resolveCssSize(size: string | number | undefined): string | undefined {
+	if (size === undefined) return undefined
+	if (typeof size === 'number') return `${size}px`
+	return size
+}
+
 async function updateDropdownPosition() {
 	if (!effectiveTriggerEl.value || !dropdownRef.value) return
 
 	await nextTick()
 
 	const triggerRect = effectiveTriggerEl.value.getBoundingClientRect()
+	const width = resolveDropdownWidth(triggerRect.width)
+	const minWidth = resolveCssSize(props.dropdownMinWidth) ?? '0px'
+
+	dropdownStyle.value = {
+		...dropdownStyle.value,
+		width,
+		minWidth,
+	}
+
+	await nextTick()
+
 	const dropdownRect = dropdownRef.value.getBoundingClientRect()
 	const viewportHeight = window.innerHeight
 	const viewportWidth = window.innerWidth
@@ -425,7 +460,8 @@ async function updateDropdownPosition() {
 	dropdownStyle.value = {
 		top: `${top}px`,
 		left: `${left}px`,
-		width: `${triggerRect.width}px`,
+		width,
+		minWidth,
 	}
 
 	openDirection.value = direction
diff --git a/packages/ui/src/components/base/DatePicker.vue b/packages/ui/src/components/base/DatePicker.vue
index 4354597692..92e3bb7e70 100644
--- a/packages/ui/src/components/base/DatePicker.vue
+++ b/packages/ui/src/components/base/DatePicker.vue
@@ -3,6 +3,7 @@
 		class="modrinth-date-picker relative inline-flex items-center"
 		:class="[
 			wrapperClass,
+			calendarOnly ? 'calendar-only' : '',
 			disabled ? 'cursor-not-allowed opacity-50' : '',
 			showToday ? 'show-today' : '',
 			props.mode === 'range' && selectedDates.length === 2 ? 'can-drag-range' : '',
@@ -10,7 +11,7 @@
 		]"
 	>
 		<CalendarIcon
-			v-if="showIcon"
+			v-if="showIcon && !calendarOnly"
 			class="pointer-events-none absolute left-3 z-[1] h-5 w-5 text-secondary opacity-60 transition-colors"
 			aria-hidden="true"
 		/>
@@ -23,6 +24,8 @@
 			:readonly="readonly"
 			:autocomplete="autocomplete"
 			:class="inputClasses"
+			:tabindex="calendarOnly ? -1 : undefined"
+			:aria-hidden="calendarOnly ? 'true' : undefined"
 			type="text"
 		/>
 	</div>
@@ -91,6 +94,7 @@ const props = withDefaults(
 		clearable?: boolean
 		showIcon?: boolean
 		showToday?: boolean
+		calendarOnly?: boolean
 		/**
 		 * When true (single mode only), navigating between months/years preserves the
 		 * originally selected day number. If the target month has fewer days, the day
@@ -101,6 +105,7 @@ const props = withDefaults(
 		preserveDay?: boolean
 		wrapperClass?: string
 		inputClass?: string
+		calendarClass?: string
 	}>(),
 	{
 		disabled: false,
@@ -112,6 +117,7 @@ const props = withDefaults(
 		clearable: true,
 		showIcon: true,
 		showToday: false,
+		calendarOnly: false,
 		preserveDay: false,
 	},
 )
@@ -171,6 +177,29 @@ function applyPreserveDay(instance: Instance) {
 	})
 }
 
+let appliedCalendarClasses: string[] = []
+
+function parseClassString(value: string | undefined): string[] {
+	if (!value) return []
+	return value.split(/\s+/).filter(Boolean)
+}
+
+function syncCalendarClasses(instance?: Instance) {
+	const container = (instance ?? picker.value)?.calendarContainer
+	if (!container) return
+
+	for (const cls of appliedCalendarClasses) {
+		container.classList.remove(cls)
+	}
+
+	const nextClasses = parseClassString(props.calendarClass)
+	for (const cls of nextClasses) {
+		container.classList.add(cls)
+	}
+
+	appliedCalendarClasses = nextClasses
+}
+
 function syncHeaderControlState(instance: Instance) {
 	const prevDisabled = instance.prevMonthNav.classList.contains('flatpickr-disabled')
 	const nextDisabled = instance.nextMonthNav.classList.contains('flatpickr-disabled')
@@ -474,10 +503,15 @@ const resolvedShowMonths = computed(() =>
 )
 
 const inputClasses = computed(() => [
-	'w-full text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow !outline-0',
-	props.showIcon ? 'pl-10' : 'pl-3',
-	'pr-3 h-9 py-2 text-base outline-none bg-surface-4 border-none rounded-xl',
-	props.disabled ? 'cursor-not-allowed' : '',
+	props.calendarOnly
+		? 'sr-only pointer-events-none absolute h-0 w-0 opacity-0'
+		: 'w-full text-primary placeholder:text-secondary focus:text-contrast font-medium transition-[shadow,color] appearance-none shadow-none focus:ring-4 focus:ring-brand-shadow !outline-0',
+	!props.calendarOnly && props.showIcon ? 'pl-10' : '',
+	!props.calendarOnly && !props.showIcon ? 'pl-3' : '',
+	!props.calendarOnly
+		? 'pr-3 h-9 py-2 text-base outline-none bg-surface-4 border-none rounded-xl'
+		: '',
+	props.disabled && !props.calendarOnly ? 'cursor-not-allowed' : '',
 	props.inputClass,
 ])
 
@@ -503,6 +537,7 @@ watch(
 		props.dateFormat,
 		props.altFormat,
 		props.time24hr,
+		props.calendarOnly,
 	],
 	() => {
 		if (!picker.value) return
@@ -530,10 +565,16 @@ watch(
 		syncAltInputState()
 		syncTimeInputTypes(picker.value)
 		syncPickerFromModel()
+		syncCalendarClasses()
 	},
 	{ deep: true },
 )
 
+watch(
+	() => props.calendarClass,
+	() => syncCalendarClasses(),
+)
+
 onMounted(async () => {
 	await nextTick()
 	if (!inputRef.value) return
@@ -605,6 +646,7 @@ onMounted(async () => {
 
 			syncTimeInputTypes(instance)
 			syncHeaderControlState(instance)
+			syncCalendarClasses(instance)
 		},
 		onChange: (_selectedDates, dateStr, instance) => {
 			if (isSyncingFromModel.value) return
@@ -676,15 +718,16 @@ onBeforeUnmount(() => {
 
 function flatpickrOptions(): Options {
 	return {
-		allowInput: true,
-		altInput: true,
-		altInputClass: inputClasses.value.filter(Boolean).join(' '),
+		allowInput: !props.calendarOnly,
+		altInput: !props.calendarOnly,
+		altInputClass: props.calendarOnly ? undefined : inputClasses.value.filter(Boolean).join(' '),
 		altFormat: resolvedAltFormat.value,
-		appendTo: inputRef.value?.parentElement ?? undefined,
+		appendTo: props.calendarOnly ? undefined : (inputRef.value?.parentElement ?? undefined),
 		closeOnSelect: false,
 		dateFormat: resolvedDateFormat.value,
 		disableMobile: true,
 		enableTime: props.enableTime,
+		inline: props.calendarOnly,
 		maxDate: props.maxDate,
 		minDate: props.minDate,
 		mode: props.mode,
@@ -692,7 +735,7 @@ function flatpickrOptions(): Options {
 		nextArrow: chevronRightIcon,
 		prevArrow: chevronLeftIcon,
 		showMonths: resolvedShowMonths.value,
-		static: true,
+		static: !props.calendarOnly,
 		time_24hr: props.time24hr,
 	}
 }
@@ -746,7 +789,20 @@ defineExpose({
 }
 
 .modrinth-date-picker :deep(.flatpickr-calendar) {
-	@apply mt-2 overflow-hidden rounded-[14px] border border-solid border-surface-5 bg-surface-3 shadow-none p-3 text-primary select-none;
+	@apply mt-2 rounded-2xl border border-solid border-surface-5 bg-surface-3 shadow-none p-3 text-primary select-none;
+	box-sizing: content-box;
+}
+
+.modrinth-date-picker.calendar-only {
+	@apply block;
+}
+
+.modrinth-date-picker.calendar-only :deep(.flatpickr-wrapper) {
+	@apply block w-full;
+}
+
+.modrinth-date-picker.calendar-only :deep(.flatpickr-calendar) {
+	@apply m-0;
 	box-sizing: content-box;
 }
 
@@ -900,8 +956,22 @@ defineExpose({
 	@apply border-transparent;
 }
 
-.modrinth-date-picker.show-today :deep(.flatpickr-day.today) {
-	@apply border-brand text-contrast;
+.modrinth-date-picker.show-today :deep(.flatpickr-day.today::after) {
+	content: '';
+	position: absolute;
+	bottom: 6px;
+	left: 50%;
+	width: 4px;
+	height: 4px;
+	border-radius: 9999px;
+	transform: translateX(-50%);
+	@apply bg-brand;
+}
+
+.modrinth-date-picker.show-today :deep(.flatpickr-day.today.selected::after),
+.modrinth-date-picker.show-today :deep(.flatpickr-day.today.startRange::after),
+.modrinth-date-picker.show-today :deep(.flatpickr-day.today.endRange::after) {
+	@apply bg-brand-inverted;
 }
 
 .modrinth-date-picker :deep(.flatpickr-day.selected),
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 2cc71a73c1..1a9a2eb9d6 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -19,7 +19,8 @@
 		:searchable="preview.category.searchable"
 		:search-placeholder="preview.category.searchPlaceholder"
 		:trigger-class="previewTriggerClass"
-		:dropdown-min-width="preview.category.previewDropdownMinWidth ?? '18rem'"
+		:dropdown-width="getPreviewDropdownWidth(preview.category)"
+		:dropdown-min-width="getPreviewDropdownMinWidth(preview.category)"
 		show-selection-actions
 		@update:model-value="(nextValue) => setPreviewSelectedValues(preview.key, nextValue)"
 		@open="openPreviewFilterDraft(preview.key)"
@@ -48,6 +49,15 @@
 				</div>
 			</div>
 		</template>
+		<template v-if="$slots['preview-footer']" #bottom>
+			<slot
+				name="preview-footer"
+				:category="preview.category"
+				:selected-values="getPreviewSelectedValues(preview.key)"
+				:set-selected-values="(values) => setPreviewSelectedValues(preview.key, values)"
+				:close-menu="(event) => closePreviewFilterMenu(preview.key, event)"
+			></slot>
+		</template>
 	</MultiSelect>
 
 	<div class="flex h-10 items-center gap-2">
@@ -134,6 +144,7 @@
 					:category="activeCategory"
 					:selected-values="activeCategorySelectedValues"
 					:set-selected-values="setActiveCategorySelectedValues"
+					:close-menu="closeAddMenu"
 				></slot>
 			</div>
 
@@ -203,6 +214,7 @@
 				:category="activeCategory"
 				:selected-values="activeCategorySelectedValues"
 				:set-selected-values="setActiveCategorySelectedValues"
+				:close-menu="closeAddMenu"
 			></slot>
 		</div>
 	</Teleport>
@@ -240,6 +252,7 @@ export type DropdownFilterBarCategory = {
 	searchable?: boolean
 	searchPlaceholder?: string
 	submenuClass?: string
+	previewDropdownWidth?: string | number
 	previewDropdownMinWidth?: string | number
 }
 
@@ -268,6 +281,10 @@ type SubmenuPositionOptions = {
 const ADD_MENU_WIDTH = 250
 const DROPDOWN_GAP = 12
 const DROPDOWN_VIEWPORT_MARGIN = 8
+const DEFAULT_PREVIEW_DROPDOWN_MIN_WIDTH = '18rem'
+const TAILWIND_WIDTH_CLASS_SIZE: Record<string, string> = {
+	'w-72': '18rem',
+}
 
 const props = withDefaults(
 	defineProps<{
@@ -704,6 +721,50 @@ function commitPreviewFilterDrafts() {
 	}
 }
 
+function closePreviewFilterMenu(categoryKey: string, event?: Event) {
+	commitPreviewFilterDraft(categoryKey)
+
+	const eventTarget = event?.target
+	if (!(eventTarget instanceof HTMLElement)) {
+		return
+	}
+
+	const dropdown = eventTarget.closest('[role="listbox"][aria-multiselectable="true"]')
+	if (!dropdown) {
+		return
+	}
+
+	dropdown.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+}
+
+function getPreviewDropdownWidth(category: DropdownFilterBarCategory): string | number | undefined {
+	return category.previewDropdownWidth ?? getWidthFromClass(category.submenuClass)
+}
+
+function getPreviewDropdownMinWidth(category: DropdownFilterBarCategory): string | number {
+	return (
+		category.previewDropdownMinWidth ??
+		getPreviewDropdownWidth(category) ??
+		DEFAULT_PREVIEW_DROPDOWN_MIN_WIDTH
+	)
+}
+
+function getWidthFromClass(className: string | undefined): string | undefined {
+	if (!className) {
+		return undefined
+	}
+
+	const arbitraryWidth = className.match(/(?:^|\s)w-\[([^\]]+)\](?:\s|$)/)
+	if (arbitraryWidth) {
+		return arbitraryWidth[1]
+	}
+
+	return className
+		.split(/\s+/)
+		.map((name) => TAILWIND_WIDTH_CLASS_SIZE[name])
+		.find((width) => width !== undefined)
+}
+
 function activateCategory(categoryKey: string) {
 	clearPendingCategoryTimeout()
 	pendingCategoryKey.value = null
diff --git a/packages/ui/src/components/base/MultiSelect.vue b/packages/ui/src/components/base/MultiSelect.vue
index 9818d8f84e..f1c570f80b 100644
--- a/packages/ui/src/components/base/MultiSelect.vue
+++ b/packages/ui/src/components/base/MultiSelect.vue
@@ -216,7 +216,7 @@
 									},
 								]"
 								tabindex="-1"
-								@click="toggleOption(item)"
+								@click="toggleOption(item, $event)"
 								@mouseenter="!item.disabled && (focusedIndex = index)"
 							>
 								<span
@@ -403,6 +403,8 @@ const overflowTags = computed(() => {
 
 const popperOverflowTags = shallowRef<MultiSelectOption<T>[]>([])
 
+const lastClickedValue = shallowRef<{ value: T } | null>(null)
+
 const filteredOptions = computed(() => {
 	if (!searchQuery.value || !props.searchable || props.disableSearchFilter) {
 		return props.options
@@ -429,14 +431,43 @@ function isSelected(value: T) {
 	return props.modelValue.includes(value)
 }
 
-function toggleOption(option: MultiSelectOption<T>) {
+function toggleOption(option: MultiSelectOption<T>, event?: MouseEvent | KeyboardEvent) {
 	if (option.disabled) return
 
+	if (event?.shiftKey && lastClickedValue.value) {
+		const anchorValue = lastClickedValue.value.value
+		const anchorIndex = filteredOptions.value.findIndex((opt) => opt.value === anchorValue)
+		const currentIndex = filteredOptions.value.findIndex((opt) => opt.value === option.value)
+
+		if (anchorIndex !== -1 && currentIndex !== -1 && anchorIndex !== currentIndex) {
+			const start = Math.min(anchorIndex, currentIndex)
+			const end = Math.max(anchorIndex, currentIndex)
+			const shouldSelect = !isSelected(option.value)
+			const newValue = [...props.modelValue]
+
+			for (let i = start; i <= end; i++) {
+				const opt = filteredOptions.value[i]
+				if (opt.disabled) continue
+				const idx = newValue.indexOf(opt.value)
+				if (shouldSelect && idx === -1) {
+					newValue.push(opt.value)
+				} else if (!shouldSelect && idx !== -1) {
+					newValue.splice(idx, 1)
+				}
+			}
+
+			emit('update:modelValue', newValue)
+			lastClickedValue.value = { value: option.value }
+			return
+		}
+	}
+
 	const newValue = isSelected(option.value)
 		? props.modelValue.filter((v) => v !== option.value)
 		: [...props.modelValue, option.value]
 
 	emit('update:modelValue', newValue)
+	lastClickedValue.value = { value: option.value }
 }
 
 function removeTag(value: T) {
@@ -687,7 +718,7 @@ function handleDropdownKeydown(event: KeyboardEvent) {
 				toggleSelectAll()
 			} else if (focusedIndex.value >= 0) {
 				const option = filteredOptions.value[focusedIndex.value]
-				if (option) toggleOption(option)
+				if (option) toggleOption(option, event)
 			}
 			break
 		case 'Tab':
@@ -718,7 +749,7 @@ function handleSearchKeydown(event: KeyboardEvent) {
 				toggleSelectAll()
 			} else if (focusedIndex.value >= 0) {
 				const option = filteredOptions.value[focusedIndex.value]
-				if (option) toggleOption(option)
+				if (option) toggleOption(option, event)
 			}
 		}
 	} else if (event.key === 'Tab' && isOpen.value) {
diff --git a/packages/ui/src/components/base/Table.vue b/packages/ui/src/components/base/Table.vue
index d952a5337b..048fa92f0c 100644
--- a/packages/ui/src/components/base/Table.vue
+++ b/packages/ui/src/components/base/Table.vue
@@ -1,5 +1,11 @@
 <template>
 	<div class="overflow-hidden rounded-2xl border border-solid border-surface-5">
+		<div
+			v-if="hasHeaderSlot"
+			class="border-solid border-0 border-b border-surface-5 bg-surface-3 p-4"
+		>
+			<slot name="header" />
+		</div>
 		<table class="w-full table-fixed border-separate border-spacing-0 border-surface-5">
 			<thead class="">
 				<tr class="bg-surface-3">
@@ -44,37 +50,62 @@
 					</th>
 				</tr>
 			</thead>
-			<tbody>
-				<tr
-					v-for="(row, rowIndex) in data"
-					:key="rowIndex"
-					:class="rowIndex % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
-				>
-					<td v-if="showSelection" class="w-10 border-solid border-0 border-t border-surface-5">
-						<Checkbox
-							:model-value="isSelected(row)"
-							class="shrink-0 p-4"
-							@update:model-value="toggleSelection(row)"
-						/>
-					</td>
-					<td
-						v-for="column in columns"
-						:key="column.key"
-						class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
-						:class="`text-${column.align ?? 'left'}`"
-						:style="column.width ? { width: column.width } : undefined"
-					>
-						<slot
-							:name="`cell-${column.key}`"
-							:row="row"
-							:value="row[column.key]"
-							:column="column"
-							:index="rowIndex"
-						>
-							{{ row[column.key] ?? '' }}
+			<tbody :ref="setListContainer">
+				<tr v-if="data.length === 0" class="bg-surface-2">
+					<td :colspan="columnSpan" class="border-solid border-0 border-t border-surface-5 p-0">
+						<slot name="empty-state">
+							<div class="text-secondary flex h-64 items-center justify-center">
+								No data available.
+							</div>
 						</slot>
 					</td>
 				</tr>
+				<template v-else>
+					<tr v-if="virtualized && topSpacerHeight > 0" aria-hidden="true">
+						<td
+							:colspan="columnSpan"
+							class="border-0 p-0"
+							:style="{ height: `${topSpacerHeight}px` }"
+						></td>
+					</tr>
+					<tr
+						v-for="(row, rowIndex) in renderedRows"
+						:key="getRowRenderKey(row, getAbsoluteRowIndex(rowIndex))"
+						:class="getAbsoluteRowIndex(rowIndex) % 2 === 0 ? 'bg-surface-2' : 'bg-surface-1.5'"
+					>
+						<td v-if="showSelection" class="w-10 border-solid border-0 border-t border-surface-5">
+							<Checkbox
+								:model-value="isSelected(row)"
+								class="shrink-0 p-4"
+								@update:model-value="toggleSelection(row)"
+							/>
+						</td>
+						<td
+							v-for="column in columns"
+							:key="column.key"
+							class="text-secondary h-14 overflow-hidden first:pl-4 last:pr-4 border-solid border-0 border-t border-surface-5"
+							:class="`text-${column.align ?? 'left'}`"
+							:style="column.width ? { width: column.width } : undefined"
+						>
+							<slot
+								:name="`cell-${column.key}`"
+								:row="row"
+								:value="row[column.key]"
+								:column="column"
+								:index="getAbsoluteRowIndex(rowIndex)"
+							>
+								{{ row[column.key] ?? '' }}
+							</slot>
+						</td>
+					</tr>
+					<tr v-if="virtualized && bottomSpacerHeight > 0" aria-hidden="true">
+						<td
+							:colspan="columnSpan"
+							class="border-0 p-0"
+							:style="{ height: `${bottomSpacerHeight}px` }"
+						></td>
+					</tr>
+				</template>
 			</tbody>
 		</table>
 	</div>
@@ -86,8 +117,9 @@
 	generic="K extends string = string, T extends Record<string, unknown> = Record<K, unknown>"
 >
 import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
-import { computed } from 'vue'
+import { computed, toRef, useSlots } from 'vue'
 
+import { useVirtualScroll } from '../../composables/virtual-scroll'
 import Checkbox from './Checkbox.vue'
 
 export type TableColumnAlign = 'left' | 'center' | 'right'
@@ -115,16 +147,49 @@ const props = withDefaults(
 		data: T[] /* Row data for table */
 		showSelection?: boolean
 		rowKey?: keyof T /* The key used to uniquely identify each row */
+		virtualized?: boolean
+		virtualRowHeight?: number
+		virtualBufferSize?: number /* The number of extra rows rendered above and below the visible viewport */
 	}>(),
 	{
 		showSelection: false,
 		rowKey: 'id' as keyof T,
+		virtualized: false,
+		virtualRowHeight: 56,
+		virtualBufferSize: 5,
 	},
 )
 
 const selectedIds = defineModel<unknown[]>('selectedIds', { default: () => [] })
 const sortColumn = defineModel<string | undefined>('sortColumn')
 const sortDirection = defineModel<SortDirection>('sortDirection', { default: 'asc' })
+const slots = useSlots()
+const hasHeaderSlot = computed(() => Boolean(slots.header))
+const columnSpan = computed(() => Math.max(props.columns.length + (props.showSelection ? 1 : 0), 1))
+
+const {
+	listContainer,
+	totalHeight,
+	visibleRange,
+	visibleTop: topSpacerHeight,
+	visibleItems,
+} = useVirtualScroll(toRef(props, 'data'), {
+	itemHeight: props.virtualRowHeight,
+	bufferSize: props.virtualBufferSize,
+	enabled: toRef(props, 'virtualized'),
+})
+
+const renderedRows = computed(() => (props.virtualized ? visibleItems.value : props.data))
+const bottomSpacerHeight = computed(() => {
+	if (!props.virtualized) {
+		return 0
+	}
+
+	return Math.max(
+		0,
+		totalHeight.value - topSpacerHeight.value - renderedRows.value.length * props.virtualRowHeight,
+	)
+})
 
 const emit = defineEmits<{
 	sort: [column: string, direction: SortDirection]
@@ -141,6 +206,23 @@ function getRowId(row: T): unknown {
 	return row[props.rowKey as keyof T]
 }
 
+function setListContainer(element: unknown) {
+	listContainer.value = props.virtualized ? (element as HTMLElement | null) : null
+}
+
+function getAbsoluteRowIndex(rowIndex: number): number {
+	return props.virtualized ? visibleRange.value.start + rowIndex : rowIndex
+}
+
+function getRowRenderKey(row: T, rowIndex: number): PropertyKey {
+	const rowId = getRowId(row)
+	if (typeof rowId === 'string' || typeof rowId === 'number' || typeof rowId === 'symbol') {
+		return rowId
+	}
+
+	return rowIndex
+}
+
 function isSelected(row: T): boolean {
 	return selectedIds.value.includes(getRowId(row))
 }
diff --git a/packages/ui/src/components/base/Tabs.vue b/packages/ui/src/components/base/Tabs.vue
new file mode 100644
index 0000000000..e1bca3c688
--- /dev/null
+++ b/packages/ui/src/components/base/Tabs.vue
@@ -0,0 +1,97 @@
+<template>
+	<div
+		v-if="tabs.length > 0"
+		class="inline-flex w-fit items-center overflow-x-auto rounded-xl border border-solid border-surface-5 p-0.5 shadow-sm gap-1"
+		role="tablist"
+	>
+		<button
+			v-for="(tab, index) in tabs"
+			:key="tab.value"
+			ref="tabButtons"
+			type="button"
+			class="flex min-h-6 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border border-solid px-2.5 py-1 text-sm font-medium outline-none transition-all active:scale-[0.97] focus-visible:ring-4 focus-visible:ring-brand-shadow"
+			:class="
+				tab.value === value
+					? 'border-green bg-highlight-green text-green'
+					: 'border-transparent bg-transparent text-primary hover:bg-surface-4'
+			"
+			role="tab"
+			:aria-selected="tab.value === value"
+			:tabindex="tab.value === value || (!hasSelectedTab && index === 0) ? 0 : -1"
+			@click="selectTab(tab)"
+			@keydown="onTabKeydown($event, index)"
+		>
+			<component
+				:is="tab.icon"
+				v-if="tab.icon"
+				class="size-5 shrink-0"
+				:class="tab.value === value ? 'text-green' : 'text-secondary'"
+			/>
+			<span class="text-nowrap">{{ tab.label }}</span>
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue'
+import { computed, ref } from 'vue'
+
+export type TabsValue = string | number
+
+export interface TabsTab {
+	value: TabsValue
+	label: string
+	icon?: Component
+}
+
+const props = defineProps<{
+	value: TabsValue
+	tabs: TabsTab[]
+}>()
+
+const emit = defineEmits<{
+	'update:value': [value: TabsValue]
+	change: [tab: TabsTab]
+}>()
+
+const tabButtons = ref<HTMLButtonElement[]>()
+
+const hasSelectedTab = computed(() => props.tabs.some((tab) => tab.value === props.value))
+
+function selectTab(tab: TabsTab) {
+	emit('update:value', tab.value)
+	emit('change', tab)
+}
+
+function selectTabAtIndex(index: number) {
+	const tab = props.tabs[index]
+	if (!tab) return
+
+	selectTab(tab)
+	requestAnimationFrame(() => {
+		tabButtons.value?.[index]?.focus()
+	})
+}
+
+function onTabKeydown(event: KeyboardEvent, index: number) {
+	if (props.tabs.length === 0) return
+
+	const lastIndex = props.tabs.length - 1
+	let nextIndex: number | undefined
+
+	if (event.key === 'ArrowRight') {
+		nextIndex = index === lastIndex ? 0 : index + 1
+	} else if (event.key === 'ArrowLeft') {
+		nextIndex = index === 0 ? lastIndex : index - 1
+	} else if (event.key === 'Home') {
+		nextIndex = 0
+	} else if (event.key === 'End') {
+		nextIndex = lastIndex
+	}
+
+	if (nextIndex === undefined) return
+
+	event.preventDefault()
+	selectTabAtIndex(nextIndex)
+}
+</script>
diff --git a/packages/ui/src/components/base/index.ts b/packages/ui/src/components/base/index.ts
index f27ee0e2ea..14f5382e30 100644
--- a/packages/ui/src/components/base/index.ts
+++ b/packages/ui/src/components/base/index.ts
@@ -79,6 +79,8 @@ export { default as StatItem } from './StatItem.vue'
 export { default as StyledInput } from './StyledInput.vue'
 export type { TableColumn } from './Table.vue'
 export { default as Table } from './Table.vue'
+export type { TabsTab, TabsValue } from './Tabs.vue'
+export { default as Tabs } from './Tabs.vue'
 export { default as TagItem } from './TagItem.vue'
 export { default as TagTagItem } from './TagTagItem.vue'
 export { default as Timeline } from './Timeline.vue'
diff --git a/packages/ui/src/stories/base/Combobox.stories.ts b/packages/ui/src/stories/base/Combobox.stories.ts
index 63dcd80fdd..4cee154c2c 100644
--- a/packages/ui/src/stories/base/Combobox.stories.ts
+++ b/packages/ui/src/stories/base/Combobox.stories.ts
@@ -46,6 +46,54 @@ export const Searchable: Story = {
 	},
 }
 
+export const DropdownMinWidth: StoryObj = {
+	render: () => ({
+		components: { Combobox },
+		data: () => ({
+			selected: undefined,
+			options: [
+				{ value: 'fabric', label: 'Fabric', subLabel: 'Lightweight modding toolchain' },
+				{ value: 'forge', label: 'Forge', subLabel: 'The original Minecraft modding API' },
+				{ value: 'neoforge', label: 'NeoForge', subLabel: 'Community-driven Forge fork' },
+			],
+		}),
+		template: /*html*/ `
+			<div style="width: 11rem;">
+				<Combobox
+					v-model="selected"
+					:options="options"
+					:dropdown-min-width="320"
+					placeholder="Loader"
+				/>
+			</div>
+		`,
+	}),
+}
+
+export const DropdownClass: StoryObj = {
+	render: () => ({
+		components: { Combobox },
+		data: () => ({
+			selected: undefined,
+			options: [
+				{ value: 'fabric', label: 'Fabric' },
+				{ value: 'forge', label: 'Forge' },
+				{ value: 'neoforge', label: 'NeoForge' },
+			],
+		}),
+		template: /*html*/ `
+			<div style="width: 14rem;">
+				<Combobox
+					v-model="selected"
+					:options="options"
+					dropdown-class="!border-brand"
+					placeholder="Loader"
+				/>
+			</div>
+		`,
+	}),
+}
+
 export const Disabled: Story = {
 	args: {
 		options: [{ value: '1', label: 'Option 1' }],
@@ -176,6 +224,38 @@ export const WithDropdownFooter: StoryObj = {
 	}),
 }
 
+export const WithBottomSlot: StoryObj = {
+	render: () => ({
+		components: { Combobox },
+		data: () => ({
+			selected: 'day',
+			count: 7,
+			options: [
+				{ value: 'day', label: 'Day' },
+				{ value: 'week', label: 'Week' },
+				{ value: 'month', label: 'Month' },
+			],
+		}),
+		template: /*html*/ `
+			<div style="width: 240px;">
+				<Combobox v-model="selected" :options="options" dropdown-min-width="260">
+					<template #bottom>
+						<div style="display: flex; align-items: center; gap: 0.75rem; border-top: 1px solid var(--color-surface-5); padding: 0.75rem;">
+							<span style="font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary);">In the last</span>
+							<input
+								v-model.number="count"
+								type="number"
+								min="1"
+								style="height: 2rem; width: 4rem; border: 1px solid var(--color-surface-5); border-radius: 0.5rem; background: var(--color-surface-3); color: var(--color-text-primary); text-align: center; font-weight: 600;"
+							/>
+						</div>
+					</template>
+				</Combobox>
+			</div>
+		`,
+	}),
+}
+
 export const MixedSubLabels: Story = {
 	args: {
 		options: [
diff --git a/packages/ui/src/stories/base/DatePicker.stories.ts b/packages/ui/src/stories/base/DatePicker.stories.ts
index 27a492f8c3..58d786efd7 100644
--- a/packages/ui/src/stories/base/DatePicker.stories.ts
+++ b/packages/ui/src/stories/base/DatePicker.stories.ts
@@ -125,6 +125,29 @@ export const TwoMonthRange: Story = {
 	}),
 }
 
+export const TwoMonthCalendarOnlyRange: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref(['2033-11-16', '2033-12-21'])
+			return { value }
+		},
+		template: /* html */ `
+			<div class="flex max-w-[700px] flex-col gap-2">
+				<DatePicker
+					v-model="value"
+					wrapperClass="w-full"
+					mode="range"
+					:show-months="2"
+					calendar-only
+					default-view-date="2033-11-01"
+				/>
+				<p class="text-sm text-secondary">Selected value: {{ value?.join(' to ') || 'None' }}</p>
+			</div>
+		`,
+	}),
+}
+
 export const DraggableRange: Story = {
 	render: () => ({
 		components: { DatePicker },
@@ -276,3 +299,31 @@ export const Disabled: Story = {
 		disabled: true,
 	},
 }
+
+export const CalendarClass: Story = {
+	render: () => ({
+		components: { DatePicker },
+		setup() {
+			const value = ref('2026-04-27')
+			const datePicker = ref<InstanceType<typeof DatePicker> | null>(null)
+
+			onMounted(async () => {
+				await nextTick()
+				datePicker.value?.open()
+			})
+
+			return { datePicker, value }
+		},
+		template: /* html */ `
+			<div class="flex h-[420px] max-w-sm flex-col gap-2">
+				<DatePicker
+					ref="datePicker"
+					v-model="value"
+					wrapperClass="w-[300px]"
+					calendar-class="ring-2 ring-brand"
+				/>
+				<p class="text-sm text-secondary">Calendar has a brand-colored ring applied via calendarClass.</p>
+			</div>
+		`,
+	}),
+}
diff --git a/packages/ui/src/stories/base/DropdownFilterBar.stories.ts b/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
index 94971c2eac..2f9cd8d5f0 100644
--- a/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
+++ b/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
@@ -154,7 +154,10 @@ export const CustomControls: Story = {
 	render: () => ({
 		components: { DropdownFilterBar },
 		setup() {
-			const selected = ref<Record<string, string[]>>({})
+			const selected = ref<Record<string, string[]>>({
+				version: ['1.21.5'],
+			})
+			const minimumDownloads = ref('1k')
 			const releaseOnly = ref(true)
 			const categories = [
 				{
@@ -171,7 +174,7 @@ export const CustomControls: Story = {
 					],
 				},
 			]
-			return { categories, releaseOnly, selected }
+			return { categories, minimumDownloads, releaseOnly, selected }
 		},
 		template: /* html */ `
 			<div class="flex flex-wrap items-center gap-2">
@@ -193,12 +196,33 @@ export const CustomControls: Story = {
 							</button>
 						</div>
 					</template>
+					<template #preview-footer="{ category, setSelectedValues, closeMenu }">
+						<div
+							v-if="category.key === 'version'"
+							class="flex flex-wrap items-center gap-3 border-0 border-t border-solid border-surface-5 px-6 py-2.5"
+						>
+							<span class="shrink-0 whitespace-nowrap text-sm font-semibold text-primary">
+								Versions above
+							</span>
+							<input
+								v-model="minimumDownloads"
+								type="text"
+								inputmode="numeric"
+								class="h-8 w-16 rounded-lg border border-solid border-surface-5 bg-surface-3 px-2 text-center text-sm font-semibold text-primary outline-none"
+								aria-label="Version downloads threshold"
+								@keydown.enter.prevent.stop="setSelectedValues(['1.21.5', '1.21.4']); closeMenu($event)"
+							/>
+							<span class="shrink-0 text-sm font-semibold text-primary">downloads</span>
+						</div>
+					</template>
 				</DropdownFilterBar>
 			</div>
 		`,
 	}),
 	args: {
-		modelValue: {},
+		modelValue: {
+			version: ['1.21.5'],
+		},
 		categories: searchableCategories,
 	},
 }
diff --git a/packages/ui/src/stories/base/Table.stories.ts b/packages/ui/src/stories/base/Table.stories.ts
index 43edafd068..4f7acf7885 100644
--- a/packages/ui/src/stories/base/Table.stories.ts
+++ b/packages/ui/src/stories/base/Table.stories.ts
@@ -1,6 +1,6 @@
 import { EditIcon, MoreVerticalIcon, TrashIcon } from '@modrinth/assets'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 
 import Badge from '../../components/base/Badge.vue'
 import ButtonStyled from '../../components/base/ButtonStyled.vue'
@@ -219,6 +219,38 @@ export const WithCustomHeaderSlots: StoryObj = {
 	}),
 }
 
+export const WithHeaderSlot: StoryObj = {
+	args: {},
+	render: () => ({
+		components: { Table, ButtonStyled },
+		setup() {
+			const columns = [
+				{ key: 'name', label: 'Name' },
+				{ key: 'email', label: 'Email' },
+				{ key: 'status', label: 'Status' },
+				{ key: 'role', label: 'Role' },
+			]
+			const data = sampleUsers
+
+			return { columns, data }
+		},
+		template: /* html */ `
+			<Table :columns="columns" :data="data">
+				<template #header>
+					<div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+						<div class="text-lg font-semibold text-contrast">Team Members</div>
+						<div class="flex items-center gap-2">
+							<ButtonStyled color="brand">
+								<button type="button">Invite member</button>
+							</ButtonStyled>
+						</div>
+					</div>
+				</template>
+			</Table>
+		`,
+	}),
+}
+
 export const WithActionsColumn: StoryObj = {
 	args: {},
 	render: () => ({
@@ -368,6 +400,124 @@ export const FullFeatured: StoryObj = {
 	}),
 }
 
+export const VirtualizedLargeData: StoryObj = {
+	args: {},
+	render: () => ({
+		components: { Table, Badge },
+		setup() {
+			const columns = [
+				{ key: 'name', label: 'Name', enableSorting: true },
+				{ key: 'email', label: 'Email', enableSorting: true },
+				{ key: 'status', label: 'Status', align: 'center' as const, width: '140px' },
+				{ key: 'role', label: 'Role', enableSorting: true, align: 'right' as const },
+			]
+			const statuses: User['status'][] = ['active', 'inactive', 'pending']
+			const roles = ['Admin', 'Editor', 'Maintainer', 'Reviewer', 'User']
+			const largeData = Array.from({ length: 10000 }, (_, index): User => {
+				const id = String(index + 1)
+				const paddedId = id.padStart(5, '0')
+
+				return {
+					id,
+					name: `User ${paddedId}`,
+					email: `user-${paddedId}@example.com`,
+					status: statuses[index % statuses.length],
+					role: roles[index % roles.length],
+				}
+			})
+			const selectedIds = ref<string[]>([])
+			const sortColumn = ref<string | undefined>('name')
+			const sortDirection = ref<'asc' | 'desc'>('asc')
+			const data = computed(() => {
+				const sorted = [...largeData]
+				const activeSortColumn = sortColumn.value
+
+				if (!activeSortColumn) {
+					return sorted
+				}
+
+				const directionFactor = sortDirection.value === 'asc' ? 1 : -1
+				sorted.sort((left, right) => {
+					return (
+						String(left[activeSortColumn as keyof User]).localeCompare(
+							String(right[activeSortColumn as keyof User]),
+							undefined,
+							{ numeric: true, sensitivity: 'base' },
+						) * directionFactor
+					)
+				})
+
+				return sorted
+			})
+
+			const statusColor = (status: string) => {
+				switch (status) {
+					case 'active':
+						return 'green'
+					case 'inactive':
+						return 'red'
+					case 'pending':
+						return 'orange'
+					default:
+						return 'gray'
+				}
+			}
+
+			function handleSort(column: string, direction: 'asc' | 'desc') {
+				console.log(`Sorting ${largeData.length} rows by ${column} ${direction}`)
+			}
+
+			return {
+				columns,
+				data,
+				selectedIds,
+				sortColumn,
+				sortDirection,
+				statusColor,
+				handleSort,
+			}
+		},
+		template: /* html */ `
+			<div class="space-y-4 max-h-[60vh] overflow-y-scroll">
+				<Table
+					:columns="columns"
+					:data="data"
+					show-selection
+					row-key="id"
+					virtualized
+					:virtual-row-height="56"
+					v-model:selected-ids="selectedIds"
+					v-model:sort-column="sortColumn"
+					v-model:sort-direction="sortDirection"
+					@sort="handleSort"
+				>
+					<template #header>
+						<div class="flex items-center justify-between gap-4">
+							<div class="text-lg font-semibold text-contrast">Virtualized members</div>
+							<div class="text-sm text-secondary">{{ data.length.toLocaleString() }} rows</div>
+						</div>
+					</template>
+					<template #cell-name="{ value, index }">
+						<div class="flex items-center gap-2">
+							<span class="text-secondary tabular-nums">#{{ index + 1 }}</span>
+							<span class="font-semibold">{{ value }}</span>
+						</div>
+					</template>
+					<template #cell-status="{ value }">
+						<div class="flex justify-center">
+							<Badge :color="statusColor(value)">{{ value }}</Badge>
+						</div>
+					</template>
+				</Table>
+				<div class="flex gap-4 text-secondary text-sm">
+					<span>Selected: {{ selectedIds.length }} items</span>
+					<span>Sort: {{ sortColumn }} ({{ sortDirection }})</span>
+				</div>
+			</div>
+		`,
+	}),
+}
+
 export const WithOverflowMenu: StoryObj = {
 	args: {},
 	render: () => ({
@@ -378,7 +528,7 @@ export const WithOverflowMenu: StoryObj = {
 				{ key: 'email', label: 'Email' },
 				{ key: 'status', label: 'Status', align: 'center' as const, width: '20%' },
 				{ key: 'role', label: 'Role' },
-				{ key: 'actions', label: '', width: '48px' },
+				{ key: 'actions', label: '', width: '68px' },
 			]
 			const data = sampleUsers
 
diff --git a/packages/ui/src/stories/base/Tabs.stories.ts b/packages/ui/src/stories/base/Tabs.stories.ts
new file mode 100644
index 0000000000..b15c9a34dd
--- /dev/null
+++ b/packages/ui/src/stories/base/Tabs.stories.ts
@@ -0,0 +1,50 @@
+import { ChartIcon, DownloadIcon, UsersIcon } from '@modrinth/assets'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import Tabs from '../../components/base/Tabs.vue'
+
+const meta = {
+	title: 'Base/Tabs',
+	component: Tabs,
+} satisfies Meta<typeof Tabs>
+
+export default meta
+
+export const Default: StoryObj = {
+	render: () => ({
+		components: { Tabs },
+		setup() {
+			const value = ref('area')
+			const tabs = [
+				{ value: 'line', label: 'Line' },
+				{ value: 'area', label: 'Area' },
+				{ value: 'bar', label: 'Bar' },
+			]
+
+			return { value, tabs }
+		},
+		template: /* html */ `
+			<Tabs v-model:value="value" :tabs="tabs" />
+		`,
+	}),
+}
+
+export const WithIcons: StoryObj = {
+	render: () => ({
+		components: { Tabs },
+		setup() {
+			const value = ref('downloads')
+			const tabs = [
+				{ value: 'overview', label: 'Overview', icon: ChartIcon },
+				{ value: 'downloads', label: 'Downloads', icon: DownloadIcon },
+				{ value: 'users', label: 'Users', icon: UsersIcon },
+			]
+
+			return { value, tabs }
+		},
+		template: /* html */ `
+			<Tabs v-model:value="value" :tabs="tabs" />
+		`,
+	}),
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 69338949cb..3f3b03e0c7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -170,7 +170,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
+        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -179,22 +179,22 @@ importers:
         version: link:../../packages/tooling-config
       '@nuxt/eslint-config':
         specifier: ^0.5.6
-        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+        version: 0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
       '@taijased/vue-render-tracker':
         specifier: ^1.0.7
         version: 1.0.7(vue@3.5.27(typescript@5.9.3))
       '@vitejs/plugin-vue':
         specifier: ^6.0.3
-        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
+        version: 6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@2.6.1)
+        version: 9.39.2(jiti@1.21.7)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -212,7 +212,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -308,6 +308,9 @@ importers:
       ansi-to-html:
         specifier: ^0.7.2
         version: 0.7.2
+      chart.js:
+        specifier: ^4.5.1
+        version: 4.5.1
       dayjs:
         specifier: ^1.11.7
         version: 1.11.19
@@ -775,7 +778,7 @@ importers:
         version: 5.2.4(vite@5.4.21(@types/node@24.12.2)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0))(vue@3.5.27(typescript@5.9.3))
       eslint-plugin-storybook:
         specifier: ^10.1.10
-        version: 10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
+        version: 10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3)
       storybook:
         specifier: ^10.1.10
         version: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -2498,6 +2501,9 @@ packages:
   '@jsdevtools/ono@7.1.3':
     resolution: {integrity: sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==}
 
+  '@kurkle/color@0.3.4':
+    resolution: {integrity: sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==}
+
   '@kwsites/file-exists@1.1.1':
     resolution: {integrity: sha512-m9/5YGR18lIwxSFDwfE3oA7bWuq9kdau6ugN4H2rJeyhFQZcG9AgSHkQtSD15a8WvTgfz9aikZMrKPHvbpqFiw==}
 
@@ -5405,6 +5411,10 @@ packages:
   character-reference-invalid@2.0.1:
     resolution: {integrity: sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==}
 
+  chart.js@4.5.1:
+    resolution: {integrity: sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==}
+    engines: {pnpm: '>=8'}
+
   check-error@2.1.3:
     resolution: {integrity: sha512-PAJdDJusoxnwm1VwW07VWwUN1sl7smmC3OKggvndJFadxxDRyFJBX/ggnu/KE4kQAB7a3Dp8f/YXC1FlUprWmA==}
     engines: {node: '>= 16'}
@@ -9841,8 +9851,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-component-type-helpers@3.2.7:
-    resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
+  vue-component-type-helpers@3.2.8:
+    resolution: {integrity: sha512-9689efAXhN/EV86plgkL/XFiJSXhGtWPG6JDboZ+QnjlUWUUQrQ0ILKQtw4iQsuwIwu5k6Aw+JnehDe7161e7A==}
 
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
@@ -11125,6 +11135,12 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
+  '@eslint/compat@1.4.1(eslint@9.39.2(jiti@1.21.7))':
+    dependencies:
+      '@eslint/core': 0.17.0
+    optionalDependencies:
+      eslint: 9.39.2(jiti@1.21.7)
+
   '@eslint/compat@1.4.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
       '@eslint/core': 0.17.0
@@ -11539,6 +11555,8 @@ snapshots:
 
   '@jsdevtools/ono@7.1.3': {}
 
+  '@kurkle/color@0.3.4': {}
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.3
@@ -11750,6 +11768,31 @@ snapshots:
       - utf-8-validate
       - vue
 
+  '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint/js': 9.39.2
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-flat-config-utils: 0.4.0
+      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@1.21.7))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@1.21.7))
+      globals: 15.15.0
+      local-pkg: 0.5.1
+      pathe: 1.1.2
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+    transitivePeerDependencies:
+      - '@typescript-eslint/utils'
+      - eslint-import-resolver-node
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-config@0.5.7(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.2
@@ -11775,6 +11818,15 @@ snapshots:
       - supports-color
       - typescript
 
+  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13245,10 +13297,22 @@ snapshots:
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       type-fest: 2.19.0
       vue: 3.5.27(typescript@5.9.3)
-      vue-component-type-helpers: 3.2.7
+      vue-component-type-helpers: 3.2.8
 
   '@stripe/stripe-js@7.9.0': {}
 
+  '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-visitor-keys: 4.2.1
+      espree: 10.4.0
+      estraverse: 5.3.0
+      picomatch: 4.0.4
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
@@ -13256,7 +13320,7 @@ snapshots:
       eslint-visitor-keys: 4.2.1
       espree: 10.4.0
       estraverse: 5.3.0
-      picomatch: 4.0.3
+      picomatch: 4.0.4
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -13661,6 +13725,22 @@ snapshots:
     dependencies:
       '@types/node': 24.12.2
 
+  '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@eslint-community/regexpp': 4.12.2
+      '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/type-utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      eslint: 9.39.2(jiti@1.21.7)
+      ignore: 7.0.5
+      natural-compare: 1.4.0
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/eslint-plugin@8.54.0(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -13677,6 +13757,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 8.54.0
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/visitor-keys': 8.54.0
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.54.0
@@ -13707,6 +13799,18 @@ snapshots:
     dependencies:
       typescript: 5.9.3
 
+  '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      ts-api-utils: 2.4.0(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/type-utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -13877,6 +13981,12 @@ snapshots:
       vite: 7.3.1(@types/node@24.12.2)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
+  '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
+    dependencies:
+      '@rolldown/pluginutils': 1.0.0-rc.2
+      vite: 8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vue: 3.5.27(typescript@5.9.3)
+
   '@vitejs/plugin-vue@6.0.4(vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
@@ -14777,6 +14887,10 @@ snapshots:
 
   character-reference-invalid@2.0.1: {}
 
+  chart.js@4.5.1:
+    dependencies:
+      '@kurkle/color': 0.3.4
+
   check-error@2.1.3: {}
 
   chevrotain@7.1.1:
@@ -15406,6 +15520,12 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
+  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      find-up-simple: 1.0.1
+
   eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
@@ -15427,6 +15547,23 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
+  eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@typescript-eslint/types': 8.54.0
+      comment-parser: 1.4.5
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
+      is-glob: 4.0.3
+      minimatch: 10.1.2
+      semver: 7.7.4
+      stable-hash-x: 0.2.0
+      unrs-resolver: 1.11.1
+    optionalDependencies:
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-import-x@4.16.1(@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@typescript-eslint/types': 8.54.0
@@ -15436,7 +15573,7 @@ snapshots:
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.1.2
-      semver: 7.7.3
+      semver: 7.7.4
       stable-hash-x: 0.2.0
       unrs-resolver: 1.11.1
     optionalDependencies:
@@ -15444,6 +15581,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@es-joy/jsdoccomment': 0.50.2
+      are-docs-informative: 0.0.2
+      comment-parser: 1.4.1
+      debug: 4.4.3
+      escape-string-regexp: 4.0.0
+      eslint: 9.39.2(jiti@1.21.7)
+      espree: 10.4.0
+      esquery: 1.7.0
+      parse-imports-exports: 0.2.4
+      semver: 7.7.4
+      spdx-expression-parse: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@es-joy/jsdoccomment': 0.50.2
@@ -15455,7 +15608,7 @@ snapshots:
       espree: 10.4.0
       esquery: 1.7.0
       parse-imports-exports: 0.2.4
-      semver: 7.7.3
+      semver: 7.7.4
       spdx-expression-parse: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -15469,6 +15622,17 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.39.2(jiti@2.6.1))
 
+  eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/regexpp': 4.12.2
+      comment-parser: 1.4.5
+      eslint: 9.39.2(jiti@1.21.7)
+      jsdoc-type-pratt-parser: 4.8.0
+      refa: 0.12.1
+      regexp-ast-analysis: 0.7.1
+      scslre: 0.3.0
+
   eslint-plugin-regexp@2.10.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -15484,21 +15648,47 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@2.6.1)
 
-  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@1.21.7))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
+  eslint-plugin-storybook@10.2.4(eslint@9.39.2(jiti@2.6.1))(storybook@10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.39.2(jiti@2.6.1)
       storybook: 10.2.4(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
+  eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2):
+    dependencies:
+      dotenv: 16.0.3
+      eslint: 9.39.2(jiti@1.21.7)
+      turbo: 2.8.2
+
   eslint-plugin-turbo@2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2):
     dependencies:
       dotenv: 16.0.3
       eslint: 9.39.2(jiti@2.6.1)
       turbo: 2.8.2
 
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      ci-info: 4.4.0
+      clean-regexp: 1.0.0
+      core-js-compat: 3.48.0
+      eslint: 9.39.2(jiti@1.21.7)
+      esquery: 1.7.0
+      globals: 15.15.0
+      indent-string: 4.0.0
+      is-builtin-module: 3.2.1
+      jsesc: 3.1.0
+      pluralize: 8.0.0
+      read-pkg-up: 7.0.1
+      regexp-tree: 0.1.27
+      regjsparser: 0.10.0
+      semver: 7.7.4
+      strip-indent: 3.0.0
+
   eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -15516,7 +15706,7 @@ snapshots:
       read-pkg-up: 7.0.1
       regexp-tree: 0.1.27
       regjsparser: 0.10.0
-      semver: 7.7.3
+      semver: 7.7.4
       strip-indent: 3.0.0
 
   eslint-plugin-vue@10.7.0(@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1))):
@@ -15533,6 +15723,20 @@ snapshots:
       '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
       '@typescript-eslint/parser': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
 
+  eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      eslint: 9.39.2(jiti@1.21.7)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.7.4
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-vue@9.33.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -15541,7 +15745,7 @@ snapshots:
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
-      semver: 7.7.3
+      semver: 7.7.4
       vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
@@ -19954,6 +20158,22 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
+  vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      lightningcss: 1.32.0
+      picomatch: 4.0.4
+      postcss: 8.5.8
+      rolldown: 1.0.0-rc.12
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 24.12.2
+      esbuild: 0.27.3
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      sass: 1.97.3
+      terser: 5.46.0
+      yaml: 2.8.2
+
   vite@8.0.3(@types/node@24.12.2)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       lightningcss: 1.32.0
@@ -20090,7 +20310,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-component-type-helpers@3.2.7: {}
+  vue-component-type-helpers@3.2.8: {}
 
   vue-confetti-explosion@1.0.2(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -20130,6 +20350,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
+    dependencies:
+      debug: 4.4.3
+      eslint: 9.39.2(jiti@1.21.7)
+      eslint-scope: 7.2.2
+      eslint-visitor-keys: 3.4.3
+      espree: 9.6.1
+      esquery: 1.7.0
+      lodash: 4.17.23
+      semver: 7.7.4
+    transitivePeerDependencies:
+      - supports-color
+
   vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
@@ -20139,7 +20372,7 @@ snapshots:
       espree: 9.6.1
       esquery: 1.7.0
       lodash: 4.17.23
-      semver: 7.7.3
+      semver: 7.7.4
     transitivePeerDependencies:
       - supports-color