From 0301f4a8becf773d308ecd2a7a9c891f74db918b Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 21 Apr 2026 11:46:15 -0600
Subject: [PATCH 01/20] feat: implement analytics route in api client

---
 packages/api-client/src/modules/index.ts      |   2 +
 .../src/modules/labrinth/analytics/v3.ts      |  40 ++++++
 .../api-client/src/modules/labrinth/index.ts  |   1 +
 .../api-client/src/modules/labrinth/types.ts  | 119 ++++++++++++++++++
 4 files changed, 162 insertions(+)
 create mode 100644 packages/api-client/src/modules/labrinth/analytics/v3.ts

diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 9eed22bc72..83908e706e 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -12,6 +12,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'
@@ -68,6 +69,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..1ec43c99df
--- /dev/null
+++ b/packages/api-client/src/modules/labrinth/analytics/v3.ts
@@ -0,0 +1,40 @@
+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 analytics time slices
+	 *
+	 * @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 },
+	 *   },
+	 *   return_metrics: {
+	 *     project_views: { bucket_by: ['project_id'] },
+	 *   },
+	 * })
+	 * ```
+	 */
+	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 a1e25783a7..f2a2a8a243 100644
--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -1,5 +1,6 @@
 export * from './auth/internal'
 export * from './auth/v2'
+export * from './analytics/v3'
 export * from './billing/internal'
 export * from './collections'
 export * from './globals/internal'
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index 2426d700d9..45b48e74f0 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -238,6 +238,125 @@ export namespace Labrinth {
 		}
 	}
 
+	export namespace Analytics {
+		export namespace v3 {
+			export type FetchRequest = {
+				time_range: TimeRange
+				return_metrics: ReturnMetrics
+			}
+
+			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'
+
+			export type ProjectPlaytimeField = 'project_id' | 'version_id' | 'loader' | 'game_version'
+
+			export type ProjectRevenueField = 'project_id'
+
+			export type AffiliateCodeClicksField = 'affiliate_code_id'
+
+			export type AffiliateCodeConversionsField = 'affiliate_code_id'
+
+			export type AffiliateCodeRevenueField = 'affiliate_code_id'
+
+			export type FetchResponse = 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
+				downloads: number
+			}
+
+			export type ProjectPlaytime = {
+				version_id?: string
+				loader?: string
+				game_version?: 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 = {

From 1db663ba775fc74270361212f73a5197e3f078be Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 21 Apr 2026 21:28:02 -0600
Subject: [PATCH 02/20] remove: delete current analytics implementation

---
 .../src/components/ui/charts/Chart.client.vue |  495 --------
 .../src/components/ui/charts/ChartDisplay.vue | 1009 -----------------
 .../ui/charts/CompactChart.client.vue         |  281 -----
 .../pages/[type]/[id]/settings/analytics.vue  |   29 +-
 .../src/pages/dashboard/analytics.vue         |   27 +-
 .../organization/[id]/settings/analytics.vue  |   27 +-
 apps/frontend/src/utils/analytics.js          |  491 --------
 7 files changed, 3 insertions(+), 2356 deletions(-)
 delete mode 100644 apps/frontend/src/components/ui/charts/Chart.client.vue
 delete mode 100644 apps/frontend/src/components/ui/charts/ChartDisplay.vue
 delete mode 100644 apps/frontend/src/components/ui/charts/CompactChart.client.vue
 delete mode 100644 apps/frontend/src/utils/analytics.js

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 5dbb2dbdf6..0000000000
--- a/apps/frontend/src/components/ui/charts/ChartDisplay.vue
+++ /dev/null
@@ -1,1009 +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">
-							<Button v-tooltip="'Toggle project colors'" icon-only @click="onToggleColors">
-								<PaletteIcon />
-							</Button>
-							<Button v-tooltip="'Download this data as CSV'" icon-only @click="onDownloadSetAsCSV">
-								<DownloadIcon />
-							</Button>
-							<Button v-tooltip="'Refresh the chart'" icon-only @click="resetCharts">
-								<UpdatedIcon />
-							</Button>
-							<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 btn-transparent ${
-											!projectIsOnDisplay(project.id) ? 'btn-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 {
-	Button,
-	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 {
-	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;
-				}
-			}
-		}
-	}
-}
-
-.btn-transparent {
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-
-	color: var(--text-color);
-	font-weight: var(--font-weight-regular);
-}
-
-.btn-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/pages/[type]/[id]/settings/analytics.vue b/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
index ce57caf281..4df61b9e0d 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
@@ -1,30 +1,3 @@
 <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>
+	<div>Analytics is being rebuilt.</div>
 </template>
-
-<script setup>
-import { injectProjectPageContext } from '@modrinth/ui'
-
-import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
-
-const { projectV2: project } = injectProjectPageContext()
-</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 25d8376438..33d98f998e 100644
--- a/apps/frontend/src/pages/dashboard/analytics.vue
+++ b/apps/frontend/src/pages/dashboard/analytics.vue
@@ -1,23 +1,8 @@
 <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>
+	<div>Analytics is being rebuilt.</div>
 </template>
 
 <script setup>
-import { injectModrinthClient, useDebugLogger } from '@modrinth/ui'
-
-import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
-
-const debug = useDebugLogger('analytics.vue')
-
 definePageMeta({
 	middleware: 'auth',
 })
@@ -25,14 +10,4 @@ definePageMeta({
 useHead({
 	title: '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/organization/[id]/settings/analytics.vue b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
index 081bc89587..b81364f879 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
@@ -1,28 +1,3 @@
 <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 }))" />
-	</div>
+	<div class="normal-page__content">Analytics is being rebuilt.</div>
 </template>
-
-<script setup>
-import ChartDisplay from '~/components/ui/charts/ChartDisplay.vue'
-import { injectOrganizationContext } from '~/providers/organization-context.ts'
-
-const { projects } = injectOrganizationContext()
-</script>
-
-<style scoped lang="scss">
-.markdown-body {
-	margin-bottom: var(--gap-md);
-}
-</style>
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
deleted file mode 100644
index c516de1287..0000000000
--- a/apps/frontend/src/utils/analytics.js
+++ /dev/null
@@ -1,491 +0,0 @@
-import { injectI18n, useDebugLogger } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import { computed, ref, watch } from 'vue'
-
-// 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,
-	}
-}

From e09845b0b84bfff893f5f6bf88dbe3c0e92c0472 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Tue, 21 Apr 2026 22:22:55 -0600
Subject: [PATCH 03/20] feat: wire up shared analytics dashboard page

---
 .../src/components/analytics/AnalyticsDashboard.vue       | 7 +++++++
 apps/frontend/src/layouts/default.vue                     | 4 ++++
 .../frontend/src/pages/[type]/[id]/settings/analytics.vue | 6 +++++-
 apps/frontend/src/pages/dashboard/analytics.vue           | 6 ++++--
 .../src/pages/organization/[id]/settings/analytics.vue    | 8 +++++++-
 5 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 apps/frontend/src/components/analytics/AnalyticsDashboard.vue

diff --git a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
new file mode 100644
index 0000000000..a7f8b58e52
--- /dev/null
+++ b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
@@ -0,0 +1,7 @@
+<template>
+	<QueryBuilder />
+</template>
+
+<script setup lang="ts">
+import QueryBuilder from './query-builder/QueryBuilder.vue'
+</script>
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index f0bf302991..3168b7fec1 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -1199,6 +1199,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 4df61b9e0d..447eb7eae7 100644
--- a/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/[type]/[id]/settings/analytics.vue
@@ -1,3 +1,7 @@
 <template>
-	<div>Analytics is being rebuilt.</div>
+	<AnalyticsDashboard />
 </template>
+
+<script setup lang="ts">
+import AnalyticsDashboard from '~/components/analytics/AnalyticsDashboard.vue'
+</script>
diff --git a/apps/frontend/src/pages/dashboard/analytics.vue b/apps/frontend/src/pages/dashboard/analytics.vue
index 33d98f998e..c410a86725 100644
--- a/apps/frontend/src/pages/dashboard/analytics.vue
+++ b/apps/frontend/src/pages/dashboard/analytics.vue
@@ -1,8 +1,10 @@
 <template>
-	<div>Analytics is being rebuilt.</div>
+	<AnalyticsDashboard />
 </template>
 
-<script setup>
+<script setup lang="ts">
+import AnalyticsDashboard from '~/components/analytics/AnalyticsDashboard.vue'
+
 definePageMeta({
 	middleware: 'auth',
 })
diff --git a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
index b81364f879..dce239756c 100644
--- a/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
+++ b/apps/frontend/src/pages/organization/[id]/settings/analytics.vue
@@ -1,3 +1,9 @@
 <template>
-	<div class="normal-page__content">Analytics is being rebuilt.</div>
+	<div class="normal-page__content">
+		<AnalyticsDashboard />
+	</div>
 </template>
+
+<script setup lang="ts">
+import AnalyticsDashboard from '~/components/analytics/AnalyticsDashboard.vue'
+</script>

From 1c368d8755e464874577dc8f41430cf3c31f01dd Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 14:14:19 -0600
Subject: [PATCH 04/20] feat: initial implementation of analytics DI, query
 builder component, and stat cards component

---
 .../analytics/AnalyticsDashboard.vue          |  23 +-
 .../analytics/query-builder/QueryBuilder.vue  | 660 ++++++++++++++++++
 .../analytics/stat-cards/StatCard.vue         | 116 +++
 .../analytics/stat-cards/StatCards.vue        |  88 +++
 apps/frontend/src/providers/analytics.ts      | 282 ++++++++
 5 files changed, 1168 insertions(+), 1 deletion(-)
 create mode 100644 apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
 create mode 100644 apps/frontend/src/components/analytics/stat-cards/StatCard.vue
 create mode 100644 apps/frontend/src/components/analytics/stat-cards/StatCards.vue
 create mode 100644 apps/frontend/src/providers/analytics.ts

diff --git a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
index a7f8b58e52..c2e46d932d 100644
--- a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
+++ b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
@@ -1,7 +1,28 @@
 <template>
-	<QueryBuilder />
+	<div class="flex flex-col gap-4">
+		<QueryBuilder />
+		<StatCards />
+	</div>
 </template>
 
 <script setup lang="ts">
+import { injectProjectPageContext } from '@modrinth/ui'
+
+import { createAnalyticsDashboardContext, provideAnalyticsDashboardContext } from '~/providers/analytics'
+import { injectOrganizationContext } from '~/providers/organization-context'
+
 import QueryBuilder from './query-builder/QueryBuilder.vue'
+import StatCards from './stat-cards/StatCards.vue'
+
+const auth = await useAuth()
+const projectPageContext = injectProjectPageContext(null)
+const organizationContext = injectOrganizationContext(null)
+
+const analyticsDashboardContext = createAnalyticsDashboardContext({
+	auth,
+	projectPageContext,
+	organizationContext,
+})
+
+provideAnalyticsDashboardContext(analyticsDashboardContext)
 </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..cc102f4dcd
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -0,0 +1,660 @@
+<template>
+	<div
+		class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-4"
+	>
+		<div v-if="showProjectRow" class="flex items-center gap-2">
+			<div class="flex items-center gap-2 text-primary">
+				<FolderOpenIcon class="size-4" />
+				<span class="text-sm font-medium">Projects:</span>
+			</div>
+			<div class="w-[20rem]">
+				<MultiSelect
+					v-model="selectedProjectIds"
+					:options="projectOptions"
+					placeholder="Select projects"
+					:searchable="projectOptions.length > 6"
+					:max-tag-rows="1"
+					include-select-all-option
+					select-all-label="All projects"
+				/>
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<div class="flex items-center gap-2 text-primary">
+				<CalendarIcon class="size-4" />
+				<span class="text-sm font-medium">Timeframe:</span>
+			</div>
+			<div class="flex flex-wrap items-center gap-2">
+				<div class="w-[10rem]">
+					<Combobox v-model="selectedTimeframe" :options="timeframeOptions" />
+				</div>
+				<span class="text-sm font-medium text-primary">Grouped by</span>
+				<div class="w-[8rem]">
+					<Combobox v-model="selectedGroupBy" :options="groupByOptions" />
+				</div>
+			</div>
+		</div>
+
+		<div class="flex items-center gap-2">
+			<div class="flex items-center gap-2 text-primary md:pt-2">
+				<BlocksIcon class="size-4" />
+				<span class="text-sm font-medium">Breakdown:</span>
+			</div>
+			<div class="flex flex-col gap-2">
+				<div class="flex flex-wrap items-center gap-2">
+					<div class="w-[11rem]">
+						<Combobox v-model="selectedBreakdown" :options="breakdownOptions" />
+					</div>
+					<span class="text-sm font-medium text-primary">Filtered by</span>
+					<Menu :triggers="['click']" :auto-hide="false" no-auto-focus placement="bottom-start">
+						<button
+							type="button"
+							class="inline-flex items-center gap-2 rounded-xl border border-dashed border-surface-5 bg-surface-2 px-3 py-1.5 text-sm font-semibold text-primary transition-colors hover:bg-surface-4"
+						>
+							<PlusIcon class="size-4" />
+							Add
+						</button>
+
+						<template #popper>
+							<div
+								class="flex w-[16rem] flex-col gap-1 rounded-xl border border-solid border-surface-5 bg-surface-4 p-2"
+							>
+								<Menu
+									v-for="category in filterCategories"
+									:key="category.key"
+									:triggers="['hover', 'focus']"
+									:auto-hide="false"
+									no-auto-focus
+									placement="right-start"
+								>
+									<button
+										type="button"
+										class="flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left text-sm font-medium text-primary transition-colors hover:bg-surface-5"
+									>
+										<span>{{ category.label }}</span>
+										<div class="flex items-center gap-1">
+											<span
+												v-if="getCategorySelectionCount(category.key) > 0"
+												class="rounded-full bg-surface-5 px-1.5 py-0.5 text-xs text-primary"
+											>
+												{{ getCategorySelectionCount(category.key) }}
+											</span>
+											<ChevronRightIcon class="size-4 text-primary" />
+										</div>
+									</button>
+
+									<template #popper>
+										<div>
+											<p class="mb-2 text-xs font-semibold uppercase tracking-wide text-primary">
+												{{ category.label }}
+											</p>
+											<div class="flex max-h-56 flex-col gap-2 overflow-y-auto">
+												<Checkbox
+													v-for="option in category.options"
+													:key="`${category.key}-${option.value}`"
+													:model-value="isFilterValueSelected(category.key, option.value)"
+													:label="option.label"
+													@update:model-value="
+														(nextValue) => toggleFilterValue(category.key, option.value, nextValue)
+													"
+												/>
+											</div>
+										</div>
+									</template>
+								</Menu>
+							</div>
+						</template>
+					</Menu>
+				</div>
+
+				<div v-if="activeFilterLabels.length > 0" class="flex flex-wrap items-center gap-2">
+					<span
+						v-for="filterLabel in activeFilterLabels"
+						:key="filterLabel"
+						class="inline-flex items-center rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1 text-xs font-medium text-primary"
+					>
+						{{ filterLabel }}
+					</span>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import {
+	BlocksIcon,
+	CalendarIcon,
+	ChevronRightIcon,
+	FolderOpenIcon,
+	PlusIcon,
+} from '@modrinth/assets'
+import {
+	Checkbox,
+	Combobox,
+	type ComboboxOption,
+	MultiSelect,
+	type MultiSelectOption,
+} from '@modrinth/ui'
+import { Menu } from 'floating-vue'
+
+import { injectAnalyticsDashboardContext } from '~/providers/analytics'
+
+const ALL_FILTER_VALUE = '__all__'
+const MIN_RANGE_MS = 60 * 60 * 1000
+const MAX_TIME_SLICES = 1024
+
+export type QueryBuilderProject = {
+	id: string
+	name: string
+}
+
+export type QueryBuilderFilterCategory =
+	| 'project'
+	| 'country'
+	| 'monetization'
+	| 'download_source'
+	| 'download_type'
+	| 'game_version'
+	| 'loader_type'
+
+type TimeframePreset =
+	| 'today'
+	| 'yesterday'
+	| 'last_24_hours'
+	| 'last_7_days'
+	| 'last_14_days'
+	| 'last_30_days'
+	| 'last_90_days'
+	| 'last_190_days'
+	| 'this_month'
+	| 'year_to_date'
+	| 'all_time'
+
+type GroupByPreset = '1h' | '6h' | 'day' | 'week' | 'month' | 'year'
+
+type BreakdownPreset =
+	| 'none'
+	| 'country'
+	| 'monetization'
+	| 'download_source'
+	| 'download_type'
+	| 'loader'
+	| 'game_version'
+
+const analyticsDashboardContext = injectAnalyticsDashboardContext()
+const projects = computed(() => analyticsDashboardContext.projects.value)
+
+const selectedProjectIds = computed<string[]>({
+	get: () => analyticsDashboardContext.selectedProjectIds.value,
+	set: (nextProjectIds) => {
+		analyticsDashboardContext.selectedProjectIds.value = nextProjectIds
+	},
+})
+const selectedTimeframe = ref<TimeframePreset>('yesterday')
+const selectedGroupBy = ref<GroupByPreset>('1h')
+const selectedBreakdown = ref<BreakdownPreset>('none')
+
+const selectedFilters = ref<Record<QueryBuilderFilterCategory, string[]>>({
+	project: [],
+	country: [],
+	monetization: [],
+	download_source: [],
+	download_type: [],
+	game_version: [],
+	loader_type: [],
+})
+
+const projectOptions = computed<MultiSelectOption<string>[]>(() =>
+	projects.value.map((project) => ({
+		value: project.id,
+		label: project.name,
+	})),
+)
+
+const showProjectRow = computed(() => projects.value.length > 1)
+
+const timeframeOptions: ComboboxOption<TimeframePreset>[] = [
+	{ value: 'today', label: 'Today' },
+	{ value: 'yesterday', label: 'Yesterday' },
+	{ value: 'last_24_hours', label: 'Last 24 hours' },
+	{ 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_190_days', label: 'Last 190 days' },
+	{ value: 'this_month', label: 'This month' },
+	{ value: 'year_to_date', label: 'Year to date' },
+	{ value: 'all_time', label: 'All time' },
+]
+
+const groupByOptions: ComboboxOption<GroupByPreset>[] = [
+	{ value: '1h', label: '1h' },
+	{ value: '6h', label: '6h' },
+	{ value: 'day', label: 'Day' },
+	{ value: 'week', label: 'Week' },
+	{ value: 'month', label: 'Month' },
+	{ value: 'year', label: 'Year' },
+]
+
+const breakdownOptions: ComboboxOption<BreakdownPreset>[] = [
+	{ value: 'none', label: 'None' },
+	{ value: 'country', label: 'Country' },
+	{ value: 'monetization', label: 'Monetization' },
+	{ value: 'download_source', label: 'Download source' },
+	{ value: 'download_type', label: 'Download type' },
+	{ value: 'loader', label: 'Loader' },
+	{ value: 'game_version', label: 'Game version' },
+]
+
+type FilterOption = {
+	value: string
+	label: string
+}
+
+type FilterCategory = {
+	key: QueryBuilderFilterCategory
+	label: string
+	options: FilterOption[]
+}
+
+const filterCategories = computed<FilterCategory[]>(() => [
+	{
+		key: 'project',
+		label: 'Project',
+		options: [
+			{ value: ALL_FILTER_VALUE, label: 'All projects' },
+			...projects.value.map((project) => ({ value: project.id, label: project.name })),
+		],
+	},
+	{
+		key: 'country',
+		label: 'Country',
+		options: [{ value: ALL_FILTER_VALUE, label: 'All countries' }],
+	},
+	{
+		key: 'monetization',
+		label: 'Monetization',
+		options: [
+			{ value: ALL_FILTER_VALUE, label: 'All monetization states' },
+			{ value: 'monetized', label: 'Monetized' },
+			{ value: 'unmonetized', label: 'Unmonetized' },
+		],
+	},
+	{
+		key: 'download_source',
+		label: 'Download source',
+		options: [{ value: ALL_FILTER_VALUE, label: 'All download sources' }],
+	},
+	{
+		key: 'download_type',
+		label: 'Download type',
+		options: [
+			{ value: ALL_FILTER_VALUE, label: 'All download types' },
+			{ value: 'modpack', label: 'Modpack' },
+			{ value: 'standalone', label: 'Standalone' },
+			{ value: 'dependency', label: 'Dependency' },
+		],
+	},
+	{
+		key: 'game_version',
+		label: 'Game version',
+		options: [{ value: ALL_FILTER_VALUE, label: 'All game versions' }],
+	},
+	{
+		key: 'loader_type',
+		label: 'Loader type',
+		options: [{ value: ALL_FILTER_VALUE, label: 'All loader types' }],
+	},
+])
+
+const optionLabelByCategoryAndValue = computed(() => {
+	const optionLabelMap = new Map<string, string>()
+
+	for (const category of filterCategories.value) {
+		for (const option of category.options) {
+			optionLabelMap.set(`${category.key}:${option.value}`, option.label)
+		}
+	}
+
+	return optionLabelMap
+})
+
+const activeFilterLabels = computed(() => {
+	const labels: string[] = []
+
+	for (const category of filterCategories.value) {
+		if (category.key === 'project') {
+			continue
+		}
+
+		const selectedValues = selectedFilters.value[category.key]
+		for (const value of selectedValues) {
+			const optionLabel = optionLabelByCategoryAndValue.value.get(`${category.key}:${value}`)
+			if (optionLabel) {
+				labels.push(`${category.label}: ${optionLabel}`)
+			}
+		}
+	}
+
+	if (selectedProjectIds.value.length !== projects.value.length) {
+		for (const selectedProjectId of selectedProjectIds.value) {
+			const project = projects.value.find((item) => item.id === selectedProjectId)
+			if (project) {
+				labels.push(`Project: ${project.name}`)
+			}
+		}
+	}
+
+	return labels
+})
+
+function isFilterValueSelected(categoryKey: QueryBuilderFilterCategory, value: string): boolean {
+	if (categoryKey === 'project') {
+		if (value === ALL_FILTER_VALUE) {
+			return selectedProjectIds.value.length === projects.value.length
+		}
+
+		return selectedProjectIds.value.includes(value)
+	}
+
+	const values = selectedFilters.value[categoryKey]
+	if (value === ALL_FILTER_VALUE) {
+		return values.length === 0
+	}
+	return values.includes(value)
+}
+
+function toggleFilterValue(
+	categoryKey: QueryBuilderFilterCategory,
+	value: string,
+	nextValue: boolean,
+) {
+	if (categoryKey === 'project') {
+		if (value === ALL_FILTER_VALUE) {
+			if (nextValue) {
+				selectedProjectIds.value = projects.value.map((project) => project.id)
+			}
+			return
+		}
+
+		if (nextValue) {
+			if (!selectedProjectIds.value.includes(value)) {
+				selectedProjectIds.value = [...selectedProjectIds.value, value]
+			}
+			return
+		}
+
+		selectedProjectIds.value = selectedProjectIds.value.filter((projectId) => projectId !== value)
+		if (selectedProjectIds.value.length === 0) {
+			selectedProjectIds.value = projects.value.map((project) => project.id)
+		}
+		return
+	}
+
+	const currentValues = selectedFilters.value[categoryKey]
+
+	if (value === ALL_FILTER_VALUE) {
+		if (nextValue) {
+			selectedFilters.value[categoryKey] = []
+		}
+		return
+	}
+
+	if (nextValue) {
+		if (!currentValues.includes(value)) {
+			selectedFilters.value[categoryKey] = [...currentValues, value]
+		}
+	} else {
+		selectedFilters.value[categoryKey] = currentValues.filter((item) => item !== value)
+	}
+}
+
+function getCategorySelectionCount(categoryKey: QueryBuilderFilterCategory): number {
+	if (categoryKey === 'project') {
+		return selectedProjectIds.value.length === projects.value.length
+			? 0
+			: selectedProjectIds.value.length
+	}
+
+	return selectedFilters.value[categoryKey].length
+}
+
+function startOfDay(date: Date): Date {
+	const nextDate = new Date(date)
+	nextDate.setHours(0, 0, 0, 0)
+	return nextDate
+}
+
+function getTimeRangeForPreset(preset: TimeframePreset): { start: Date; end: Date } {
+	const now = new Date()
+	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_24_hours':
+			return {
+				start: new Date(end.getTime() - 24 * 60 * 60 * 1000),
+				end,
+			}
+		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_190_days':
+			return {
+				start: new Date(end.getTime() - 190 * 24 * 60 * 60 * 1000),
+				end,
+			}
+		case 'this_month': {
+			const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
+			monthStart.setHours(0, 0, 0, 0)
+			return { start: monthStart, 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(2022, 0, 1, 0, 0, 0, 0)),
+				end,
+			}
+		default:
+			return {
+				start: new Date(end.getTime() - 24 * 60 * 60 * 1000),
+				end,
+			}
+	}
+}
+
+function getGroupByMinutes(preset: GroupByPreset): 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 ensureMinimumRange(start: Date, end: Date): { start: Date; end: Date } {
+	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 }
+}
+
+function unique<T>(values: T[]): T[] {
+	return Array.from(new Set(values))
+}
+
+function withBreakdownFields(
+	breakdown: BreakdownPreset,
+	filters: Record<QueryBuilderFilterCategory, string[]>,
+): {
+	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']
+
+	switch (breakdown) {
+		case 'country':
+			views.push('country')
+			downloads.push('country')
+			break
+		case 'monetization':
+			views.push('monetized')
+			break
+		case 'download_source':
+			views.push('domain')
+			downloads.push('domain')
+			break
+		case 'download_type':
+			downloads.push('version_id')
+			playtime.push('version_id')
+			break
+		case 'loader':
+			playtime.push('loader')
+			break
+		case 'game_version':
+			playtime.push('game_version')
+			break
+		default:
+			break
+	}
+
+	if (filters.country.length > 0) {
+		views.push('country')
+		downloads.push('country')
+	}
+
+	if (filters.monetization.length > 0) {
+		views.push('monetized')
+	}
+
+	if (filters.download_source.length > 0) {
+		views.push('domain')
+		downloads.push('domain')
+	}
+
+	if (filters.download_type.length > 0) {
+		downloads.push('version_id')
+		playtime.push('version_id')
+	}
+
+	if (filters.game_version.length > 0) {
+		playtime.push('game_version')
+	}
+
+	if (filters.loader_type.length > 0) {
+		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 = getTimeRangeForPreset(selectedTimeframe.value)
+	const { start, end } = ensureMinimumRange(rawRange.start, rawRange.end)
+
+	const groupByMs = getGroupByMinutes(selectedGroupBy.value) * 60 * 1000
+	const desiredSlices = Math.max(1, Math.ceil((end.getTime() - start.getTime()) / groupByMs))
+	const resolutionSlices = Math.min(MAX_TIME_SLICES, desiredSlices)
+
+	const bucketBy = withBreakdownFields(selectedBreakdown.value, selectedFilters.value)
+
+	return {
+		time_range: {
+			start: start.toISOString(),
+			end: end.toISOString(),
+			resolution: {
+				slices: resolutionSlices,
+			},
+		},
+		return_metrics: {
+			project_views: {
+				bucket_by: bucketBy.views,
+			},
+			project_downloads: {
+				bucket_by: bucketBy.downloads,
+			},
+			project_playtime: {
+				bucket_by: bucketBy.playtime,
+			},
+			project_revenue: {
+				bucket_by: bucketBy.revenue,
+			},
+		},
+	}
+})
+
+watch(
+	fetchRequest,
+	(nextFetchRequest) => {
+		analyticsDashboardContext.setFetchRequest(nextFetchRequest)
+	},
+	{ deep: true, immediate: true },
+)
+
+defineExpose({
+	fetchRequest,
+})
+</script>
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..9c4cec00cb
--- /dev/null
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
@@ -0,0 +1,116 @@
+<template>
+	<button
+		type="button"
+		class="flex h-full appearance-none flex-col gap-4 rounded-2xl border border-solid p-4 text-left transition-colors"
+		:class="
+			active
+				? 'border-brand bg-highlight-green'
+				: 'border-surface-5 bg-surface-2 hover:bg-surface-3'
+		"
+		@click="emit('click')"
+	>
+		<div class="flex items-center justify-between gap-3">
+			<div class="text-sm font-semibold text-primary">
+				{{ label }}
+			</div>
+
+			<div
+				class="inline-flex size-8 items-center justify-center rounded-lg border border-solid"
+				:class="active ? 'border-brand bg-brand-highlight' : 'border-surface-5 bg-surface-4'"
+			>
+				<component
+					:is="iconComponent"
+					aria-hidden="true"
+					class="size-4"
+					:class="active ? 'text-brand' : 'text-primary'"
+				/>
+			</div>
+		</div>
+
+		<div class="flex flex-col gap-2">
+			<div class="text-3xl font-extrabold leading-none text-contrast">
+				{{ statLabel }}
+			</div>
+
+			<div class="flex items-center gap-1 text-sm">
+				<span class="inline-flex items-center gap-1 font-semibold" :class="vsPrevPeriodClass">
+					<component
+						:is="trendDirectionIcon"
+						v-if="showTrendDirectionIcon"
+						aria-hidden="true"
+						class="size-3"
+					/>
+					{{ vsPrevPeriodPercent }}
+				</span>
+				<span class="mt-px text-xs text-primary">vs prev period</span>
+			</div>
+		</div>
+	</button>
+</template>
+
+<script setup lang="ts">
+import {
+	ArrowDownLeftIcon,
+	ArrowUpRightIcon,
+	ClockIcon,
+	CurrencyIcon,
+	DownloadIcon,
+	EyeIcon,
+	type IconComponent,
+	PlayIcon,
+	TimerIcon,
+} from '@modrinth/assets'
+
+const props = defineProps<{
+	label: string
+	statLabel: string
+	vsPrevPeriodPercent: string
+	icon: string
+	active?: 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(() => trendValue.value !== 0)
+
+const trendDirectionIcon = computed<IconComponent>(() =>
+	trendValue.value >= 0 ? ArrowUpRightIcon : ArrowDownLeftIcon,
+)
+
+const vsPrevPeriodClass = computed(() => {
+	if (trendValue.value > 0) {
+		return 'text-green'
+	}
+
+	if (trendValue.value < 0) {
+		return 'text-red'
+	}
+
+	return 'text-primary'
+})
+</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..d431ef9641
--- /dev/null
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
@@ -0,0 +1,88 @@
+<template>
+	<div class="grid grid-cols-1 gap-3 lg:grid-cols-2 xl: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="analyticsDashboardContext.activeStat.value === card.key"
+			@click="analyticsDashboardContext.setActiveStat(card.key)"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useFormatNumber } from '@modrinth/ui'
+
+import { type AnalyticsDashboardStat, injectAnalyticsDashboardContext } from '~/providers/analytics'
+
+import StatCard from './StatCard.vue'
+
+const analyticsDashboardContext = injectAnalyticsDashboardContext()
+const formatNumber = useFormatNumber()
+
+const compactNumberFormatter = computed(
+	() =>
+		new Intl.NumberFormat(undefined, {
+			notation: 'compact',
+			maximumFractionDigits: 1,
+		}),
+)
+
+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)}%`
+}
+
+const statCards = computed<
+	{
+		key: AnalyticsDashboardStat
+		label: string
+		statLabel: string
+		vsPrevPeriodPercent: string
+		icon: string
+	}[]
+>(() => [
+	{
+		key: 'views',
+		label: 'Views',
+		statLabel: formatStatNumber(analyticsDashboardContext.currentTotals.value.views),
+		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.views),
+		icon: 'eye',
+	},
+	{
+		key: 'downloads',
+		label: 'Downloads',
+		statLabel: formatStatNumber(analyticsDashboardContext.currentTotals.value.downloads),
+		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.downloads),
+		icon: 'download',
+	},
+	{
+		key: 'revenue',
+		label: 'Revenue',
+		statLabel: `$${formatStatNumber(analyticsDashboardContext.currentTotals.value.revenue)}`,
+		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.revenue),
+		icon: 'dollar',
+	},
+	{
+		key: 'playtime',
+		label: 'Playtime',
+		statLabel: `${formatStatNumber(analyticsDashboardContext.currentTotals.value.playtime / 3600)} hrs`,
+		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.playtime),
+		icon: 'clock',
+	},
+])
+</script>
diff --git a/apps/frontend/src/providers/analytics.ts b/apps/frontend/src/providers/analytics.ts
new file mode 100644
index 0000000000..61f477ea1c
--- /dev/null
+++ b/apps/frontend/src/providers/analytics.ts
@@ -0,0 +1,282 @@
+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 type { OrganizationContext } from './organization-context'
+
+export type AnalyticsDashboardStat = 'views' | 'downloads' | 'revenue' | 'playtime'
+
+export interface AnalyticsDashboardProject {
+	id: string
+	name: string
+}
+
+export interface AnalyticsDashboardTotals {
+	views: number
+	downloads: number
+	revenue: number
+	playtime: number
+}
+
+export interface AnalyticsDashboardPercentChanges {
+	views: number
+	downloads: number
+	revenue: number
+	playtime: number
+}
+
+export interface AnalyticsDashboardContextValue {
+	projects: ComputedRef<AnalyticsDashboardProject[]>
+	selectedProjectIds: Ref<string[]>
+	fetchRequest: Ref<Labrinth.Analytics.v3.FetchRequest | null>
+	timeSlices: 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>
+	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 (!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)
+
+	return {
+		time_range: {
+			start: previousStart.toISOString(),
+			end: previousEnd.toISOString(),
+			resolution: fetchRequest.time_range.resolution,
+		},
+		return_metrics: fetchRequest.return_metrics,
+	}
+}
+
+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>,
+): AnalyticsDashboardTotals {
+	const totals: AnalyticsDashboardTotals = {
+		views: 0,
+		downloads: 0,
+		revenue: 0,
+		playtime: 0,
+	}
+
+	for (const timeSlice of timeSlices) {
+		for (const dataPoint of timeSlice) {
+			if (!('source_project' in dataPoint)) {
+				continue
+			}
+
+			if (selectedProjectIds.size > 0 && !selectedProjectIds.has(dataPoint.source_project)) {
+				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
+}
+
+export function createAnalyticsDashboardContext(
+	options: CreateAnalyticsDashboardContextOptions,
+): AnalyticsDashboardContextValue {
+	const client = injectModrinthClient()
+	const activeStat = ref<AnalyticsDashboardStat>('views')
+	const selectedProjectIds = ref<string[]>([])
+	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 } = 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 projects = computed<AnalyticsDashboardProject[]>(() => {
+		if (hasProjectContext.value && options.projectPageContext) {
+			const project = options.projectPageContext.projectV2.value
+			return project ? [{ id: project.id, name: project.title }] : []
+		}
+
+		if (hasOrganizationContext.value && options.organizationContext?.projects.value) {
+			return options.organizationContext.projects.value.map((project) => ({
+				id: project.id,
+				name: project.name,
+			}))
+		}
+
+		return (userProjects.value ?? []).map((project) => ({
+			id: project.id,
+			name: project.title,
+		}))
+	})
+
+	watch(
+		projects,
+		(nextProjects) => {
+			if (nextProjects.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 },
+	)
+
+	const { data: currentTimeSliceData, isPending: currentTimeSlicePending, isFetching: currentFetching } =
+		useQuery({
+			queryKey: computed(() => ['analytics', 'dashboard', 'current', fetchRequest.value]),
+			queryFn: () => client.labrinth.analytics_v3.fetch(fetchRequest.value as Labrinth.Analytics.v3.FetchRequest),
+			enabled: computed(() => fetchRequest.value !== null),
+			placeholderData: [],
+		})
+
+	const previousFetchRequest = computed(() => buildPreviousFetchRequest(fetchRequest.value))
+
+	const {
+		data: previousTimeSliceData,
+		isPending: previousTimeSlicePending,
+		isFetching: previousFetching,
+	} = useQuery({
+		queryKey: computed(() => ['analytics', 'dashboard', 'previous', previousFetchRequest.value]),
+		queryFn: () =>
+			client.labrinth.analytics_v3.fetch(
+				previousFetchRequest.value as Labrinth.Analytics.v3.FetchRequest,
+			),
+		enabled: computed(() => previousFetchRequest.value !== null),
+		placeholderData: [],
+	})
+
+	const timeSlices = ref<Labrinth.Analytics.v3.TimeSlice[]>([])
+	const previousTimeSlices = ref<Labrinth.Analytics.v3.TimeSlice[]>([])
+
+	watch(
+		currentTimeSliceData,
+		(nextTimeSlices) => {
+			timeSlices.value = nextTimeSlices ?? []
+		},
+		{ immediate: true },
+	)
+
+	watch(
+		previousTimeSliceData,
+		(nextTimeSlices) => {
+			previousTimeSlices.value = nextTimeSlices ?? []
+		},
+		{ immediate: true },
+	)
+
+	const selectedProjectIdSet = computed(() => new Set(selectedProjectIds.value))
+
+	const currentTotals = computed<AnalyticsDashboardTotals>(() =>
+		computeTotals(timeSlices.value, selectedProjectIdSet.value),
+	)
+	const previousTotals = computed<AnalyticsDashboardTotals>(() =>
+		computeTotals(previousTimeSlices.value, selectedProjectIdSet.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(() => currentTimeSlicePending.value || previousTimeSlicePending.value)
+	const isRefetching = computed(() => currentFetching.value || previousFetching.value)
+
+	function setFetchRequest(nextFetchRequest: Labrinth.Analytics.v3.FetchRequest) {
+		fetchRequest.value = nextFetchRequest
+	}
+
+	function setActiveStat(nextStat: AnalyticsDashboardStat) {
+		activeStat.value = nextStat
+	}
+
+	return {
+		projects,
+		selectedProjectIds,
+		fetchRequest,
+		timeSlices,
+		previousTimeSlices,
+		isLoading,
+		isRefetching,
+		activeStat,
+		currentTotals,
+		previousTotals,
+		percentChanges,
+		setFetchRequest,
+		setActiveStat,
+	}
+}

From 661765d9029968e8ace5a16d29542f4a79b58a5d Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 14:37:09 -0600
Subject: [PATCH 05/20] feat: style consistency updates

---
 .../src/components/analytics/query-builder/QueryBuilder.vue   | 2 +-
 .../frontend/src/components/analytics/stat-cards/StatCard.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index cc102f4dcd..b05a97549b 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 bg-surface-2 p-4"
+		class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4"
 	>
 		<div v-if="showProjectRow" class="flex items-center gap-2">
 			<div class="flex items-center gap-2 text-primary">
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCard.vue b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
index 9c4cec00cb..c9c0465824 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
@@ -4,8 +4,8 @@
 		class="flex h-full appearance-none flex-col gap-4 rounded-2xl border border-solid p-4 text-left transition-colors"
 		:class="
 			active
-				? 'border-brand bg-highlight-green'
-				: 'border-surface-5 bg-surface-2 hover:bg-surface-3'
+				? 'cursor-default border-brand bg-highlight-green'
+				: 'border-surface-5 bg-surface-3 hover:bg-surface-4 active:scale-95'
 		"
 		@click="emit('click')"
 	>

From 5234270a04a76e41a6e7aaaa78dd2da691301039 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 17:33:52 -0600
Subject: [PATCH 06/20] feat: implement analytics chart

---
 apps/frontend/package.json                    |   1 +
 .../analytics/AnalyticsDashboard.vue          |   2 +
 .../analytics/graph/AnalyticsChart.client.vue | 225 +++++++++++++++
 .../analytics/graph/AnalyticsChartTooltip.vue |  85 ++++++
 .../analytics/graph/AnalyticsGraph.vue        | 259 ++++++++++++++++++
 .../src/components/analytics/graph/utils.ts   | 194 +++++++++++++
 .../analytics/query-builder/QueryBuilder.vue  |  10 -
 pnpm-lock.yaml                                | 255 ++++++++---------
 8 files changed, 879 insertions(+), 152 deletions(-)
 create mode 100644 apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
 create mode 100644 apps/frontend/src/components/analytics/graph/AnalyticsChartTooltip.vue
 create mode 100644 apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
 create mode 100644 apps/frontend/src/components/analytics/graph/utils.ts

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 22012b479f..2bca56665a 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -56,6 +56,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
index c2e46d932d..2945a89f4a 100644
--- a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
+++ b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
@@ -2,6 +2,7 @@
 	<div class="flex flex-col gap-4">
 		<QueryBuilder />
 		<StatCards />
+		<AnalyticsGraph />
 	</div>
 </template>
 
@@ -11,6 +12,7 @@ import { injectProjectPageContext } from '@modrinth/ui'
 import { createAnalyticsDashboardContext, provideAnalyticsDashboardContext } from '~/providers/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'
 
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..3bdcc82176
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
@@ -0,0 +1,225 @@
+<template>
+	<canvas ref="canvasRef" />
+</template>
+
+<script setup lang="ts">
+import { useCompactNumber } from '@modrinth/ui'
+import {
+	BarController,
+	BarElement,
+	CategoryScale,
+	Chart,
+	type ChartConfiguration,
+	Filler,
+	LinearScale,
+	LineController,
+	LineElement,
+	PointElement,
+	Tooltip,
+	type TooltipModel,
+} from 'chart.js'
+
+import type { AnalyticsDashboardStat } from '~/providers/analytics'
+
+import { type ChartDataset, 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
+	datasets: ChartDataset[]
+	labels: string[]
+	activeStat: AnalyticsDashboardStat
+}>()
+
+const emit = defineEmits<{
+	(event: 'hover', payload: AnalyticsChartHoverPayload): void
+}>()
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+let chartInstance: Chart | null = null
+
+const { formatCompactNumber } = useCompactNumber()
+
+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 buildDatasets() {
+	return props.datasets.map((dataset, index) => {
+		const common = {
+			label: dataset.label,
+			data: dataset.data,
+			borderColor: dataset.borderColor,
+			borderWidth: 2,
+		}
+
+		if (props.type === 'bar') {
+			return {
+				...common,
+				backgroundColor: withAlpha(dataset.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(dataset.backgroundColor, 0.3)
+				: dataset.backgroundColor,
+			fill: lineFill,
+			tension: 0.35,
+			pointRadius: 0,
+			pointHoverRadius: 4,
+			pointHitRadius: 16,
+			stack: props.stacked ? 'analytics' : undefined,
+		}
+	})
+}
+
+function buildConfig(): ChartConfiguration {
+	return {
+		type: props.type,
+		data: {
+			labels: props.labels,
+			datasets: buildDatasets() as ChartConfiguration['data']['datasets'],
+		},
+		options: {
+			responsive: true,
+			maintainAspectRatio: false,
+			animation: false,
+			interaction: {
+				mode: 'index',
+				intersect: false,
+			},
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					enabled: false,
+					external: handleExternalTooltip,
+				},
+			},
+			scales: {
+				x: {
+					stacked: props.stacked && props.type === 'bar',
+					grid: { display: false },
+					ticks: {
+						maxTicksLimit: 8,
+						autoSkip: true,
+						color: 'rgba(148, 163, 184, 0.9)',
+					},
+					border: { color: 'rgba(148, 163, 184, 0.35)' },
+				},
+				y: {
+					stacked: props.stacked,
+					beginAtZero: true,
+					grid: {
+						color: 'rgba(148, 163, 184, 0.15)',
+					},
+					border: { display: false },
+					ticks: {
+						color: 'rgba(148, 163, 184, 0.9)',
+						callback: (tickValue) => {
+							const numeric =
+								typeof tickValue === 'number' ? tickValue : Number.parseFloat(String(tickValue))
+							if (!Number.isFinite(numeric)) return String(tickValue)
+							return formatAxisValue(numeric, props.activeStat, formatCompactNumber)
+						},
+					},
+				},
+			},
+		},
+	}
+}
+
+function handleExternalTooltip(context: { tooltip: TooltipModel<'line' | 'bar'> }) {
+	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')
+}
+
+function handleCanvasLeave() {
+	emit('hover', { visible: false, x: 0, y: 0, sliceIndex: null })
+}
+
+onMounted(() => {
+	createChart()
+	canvasRef.value?.addEventListener('mouseleave', handleCanvasLeave)
+})
+
+onBeforeUnmount(() => {
+	canvasRef.value?.removeEventListener('mouseleave', handleCanvasLeave)
+	chartInstance?.destroy()
+	chartInstance = null
+})
+
+watch(
+	() => [props.type, props.fill, props.stacked],
+	() => {
+		chartInstance?.destroy()
+		chartInstance = null
+		nextTick(() => createChart())
+	},
+)
+
+watch(
+	() => [props.datasets, props.labels, props.activeStat],
+	() => {
+		refreshChart()
+	},
+	{ deep: true },
+)
+</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..c83e06ae00
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsChartTooltip.vue
@@ -0,0 +1,85 @@
+<template>
+	<div
+		v-show="visible"
+		ref="tooltipElement"
+		class="analytics-chart-tooltip pointer-events-none absolute left-0 top-0 z-10 min-w-[14rem] rounded-lg border border-solid border-surface-5 bg-surface-3 px-3 py-2 text-sm shadow-lg"
+		:style="positionStyle"
+	>
+		<div class="mb-1 font-medium text-contrast">{{ rangeLabel }}</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">
+export type AnalyticsChartTooltipEntry = {
+	projectId: string
+	name: string
+	color: string
+	formattedValue: string
+}
+
+const props = defineProps<{
+	visible: boolean
+	x: number
+	y: number
+	rangeLabel: string
+	entries: AnalyticsChartTooltipEntry[]
+	containerWidth: number
+	containerHeight: number
+}>()
+
+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, props.rangeLabel],
+	() => {
+		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..f0a43b1f55
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
@@ -0,0 +1,259 @@
+<template>
+	<section
+		class="flex flex-col gap-4 rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4"
+	>
+		<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
+			<div class="flex w-full flex-col gap-4">
+				<div class="flex items-center justify-between">
+					<div class="text-xl font-semibold text-contrast">
+						{{ graphTitle }}
+					</div>
+
+					<div class="flex items-center gap-2">
+						<button
+							v-for="dataModeOption in dataModeOptions"
+							:key="dataModeOption.value"
+							type="button"
+							class="inline-flex items-center rounded-xl border border-solid px-3 py-1.5 text-sm font-semibold transition-colors"
+							:class="
+								activeDataMode === dataModeOption.value
+									? 'border-brand bg-highlight-green text-brand'
+									: 'border-surface-5 bg-surface-3 text-primary hover:bg-surface-4'
+							"
+							@click="activeDataMode = dataModeOption.value"
+						>
+							{{ dataModeOption.label }}
+						</button>
+
+						<div class="w-52">
+							<Chips
+								v-model="activeViewMode"
+								:items="viewModeValues"
+								:format-label="formatViewModeLabel"
+								size="small"
+								:capitalize="false"
+								aria-label="Chart view mode"
+							/>
+						</div>
+					</div>
+				</div>
+
+				<div class="flex flex-wrap items-center gap-x-4 gap-y-2">
+					<div
+						v-for="legendEntry in legendEntries"
+						:key="legendEntry.id"
+						class="inline-flex items-center gap-1.5 text-sm text-primary"
+					>
+						<span class="size-2 rounded-full" :style="{ backgroundColor: legendEntry.color }" />
+						<span>{{ legendEntry.name }}</span>
+					</div>
+
+					<span v-if="legendEntries.length === 0" class="text-sm text-secondary">
+						No projects selected
+					</span>
+				</div>
+			</div>
+		</div>
+
+		<div ref="chartContainer" class="relative h-80">
+			<div
+				v-if="selectedProjects.length === 0"
+				class="flex h-full items-center justify-center rounded-xl border border-dashed border-surface-5 bg-surface-3"
+			>
+				<div class="text-sm font-medium text-secondary">
+					Select at least one project to view data
+				</div>
+			</div>
+			<template v-else>
+				<ClientOnly>
+					<AnalyticsChart
+						:type="chartType"
+						:fill="isArea"
+						:stacked="isStacked"
+						:datasets="chartDatasets"
+						:labels="chartLabels"
+						:active-stat="analyticsDashboardContext.activeStat.value"
+						@hover="onChartHover"
+					/>
+				</ClientOnly>
+				<AnalyticsChartTooltip
+					:visible="hoverState.visible"
+					:x="hoverState.x"
+					:y="hoverState.y"
+					:range-label="hoverRangeLabel"
+					:entries="hoverEntries"
+					:container-width="containerSize.width"
+					:container-height="containerSize.height"
+				/>
+			</template>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { Chips, useFormatNumber } from '@modrinth/ui'
+
+import type { AnalyticsDashboardStat } from '~/providers/analytics'
+import { injectAnalyticsDashboardContext } from '~/providers/analytics'
+
+import AnalyticsChart from './AnalyticsChart.client.vue'
+import AnalyticsChartTooltip, { type AnalyticsChartTooltipEntry } from './AnalyticsChartTooltip.vue'
+import {
+	buildChartDatasets,
+	buildTimeAxisLabels,
+	formatBucketRange,
+	formatMetricValue,
+	getSliceBucketRange,
+	getSliceCount,
+} from './utils'
+
+type DataMode = 'events'
+type ViewMode = 'line' | 'area' | 'bar'
+
+const analyticsDashboardContext = injectAnalyticsDashboardContext()
+const formatNumber = useFormatNumber()
+
+const activeDataMode = ref<DataMode>('events')
+const activeViewMode = ref<ViewMode>('line')
+
+const dataModeOptions: { value: DataMode; label: string }[] = [{ value: 'events', label: 'Events' }]
+
+const viewModeLabels: Record<ViewMode, string> = {
+	line: 'Line',
+	area: 'Area',
+	bar: 'Bar',
+}
+
+const viewModeValues: ViewMode[] = ['line', 'area', 'bar']
+
+function formatViewModeLabel(value: ViewMode): string {
+	return viewModeLabels[value]
+}
+
+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(analyticsDashboardContext.selectedProjectIds.value),
+)
+
+const selectedProjects = computed(() =>
+	analyticsDashboardContext.projects.value.filter((project) =>
+		selectedProjectIdSet.value.has(project.id),
+	),
+)
+
+const legendPalette = ['#00D084', '#A78BFA', '#F59E0B', '#38BDF8', '#FB7185', '#34D399']
+
+const legendEntries = computed(() =>
+	selectedProjects.value.map((project, index) => ({
+		id: project.id,
+		name: project.name,
+		color: legendPalette[index % legendPalette.length],
+	})),
+)
+
+const graphTitle = computed(() => titleByStat[analyticsDashboardContext.activeStat.value])
+
+const chartType = computed<'line' | 'bar'>(() => (activeViewMode.value === 'bar' ? 'bar' : 'line'))
+const isArea = computed(() => activeViewMode.value === 'area')
+const isStacked = computed(() => activeViewMode.value === 'area' || activeViewMode.value === 'bar')
+
+const sliceCount = computed(() => {
+	const fetchRequest = analyticsDashboardContext.fetchRequest.value
+	const fallback = analyticsDashboardContext.timeSlices.value.length
+	if (!fetchRequest) return Math.max(1, fallback)
+	return getSliceCount(fetchRequest.time_range, fallback)
+})
+
+const chartLabels = computed(() => {
+	const fetchRequest = analyticsDashboardContext.fetchRequest.value
+	if (!fetchRequest) return []
+	return buildTimeAxisLabels(fetchRequest.time_range, sliceCount.value)
+})
+
+const chartDatasets = computed(() =>
+	buildChartDatasets(
+		analyticsDashboardContext.timeSlices.value,
+		selectedProjects.value,
+		analyticsDashboardContext.activeStat.value,
+		legendPalette,
+	),
+)
+
+const chartContainer = ref<HTMLElement | null>(null)
+const containerSize = reactive({ width: 0, height: 0 })
+let resizeObserver: ResizeObserver | 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
+})
+
+type HoverState = {
+	visible: boolean
+	x: number
+	y: number
+	sliceIndex: number | null
+}
+
+const hoverState = reactive<HoverState>({
+	visible: false,
+	x: 0,
+	y: 0,
+	sliceIndex: null,
+})
+
+function onChartHover(payload: HoverState) {
+	hoverState.visible = payload.visible
+	hoverState.x = payload.x
+	hoverState.y = payload.y
+	hoverState.sliceIndex = payload.sliceIndex
+}
+
+watch([chartLabels, selectedProjects], () => {
+	hoverState.visible = false
+	hoverState.sliceIndex = null
+})
+
+const hoverBucketRange = computed(() => {
+	const fetchRequest = analyticsDashboardContext.fetchRequest.value
+	if (!fetchRequest || hoverState.sliceIndex === null) return null
+	return getSliceBucketRange(fetchRequest.time_range, sliceCount.value, hoverState.sliceIndex)
+})
+
+const hoverRangeLabel = computed(() => {
+	if (!hoverBucketRange.value) return ''
+	return formatBucketRange(hoverBucketRange.value.start, hoverBucketRange.value.end)
+})
+
+const hoverEntries = computed<AnalyticsChartTooltipEntry[]>(() => {
+	if (hoverState.sliceIndex === null) return []
+	const sliceIndex = hoverState.sliceIndex
+	return chartDatasets.value.map((dataset) => ({
+		projectId: dataset.projectId,
+		name: dataset.label,
+		color: dataset.borderColor,
+		formattedValue: formatMetricValue(
+			dataset.data[sliceIndex] ?? 0,
+			analyticsDashboardContext.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..3554893252
--- /dev/null
+++ b/apps/frontend/src/components/analytics/graph/utils.ts
@@ -0,0 +1,194 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { AnalyticsDashboardProject, AnalyticsDashboardStat } from '~/providers/analytics'
+
+export type ChartDataset = {
+	projectId: string
+	label: string
+	data: number[]
+	borderColor: string
+	backgroundColor: string
+}
+
+const DAY_MS = 24 * 60 * 60 * 1000
+
+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
+		}
+	}
+}
+
+export function buildChartDatasets(
+	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+	selectedProjects: AnalyticsDashboardProject[],
+	activeStat: AnalyticsDashboardStat,
+	palette: string[],
+): ChartDataset[] {
+	const selectedProjectIds = new Set(selectedProjects.map((project) => project.id))
+
+	const dataByProjectId = new Map<string, number[]>()
+	for (const project of selectedProjects) {
+		dataByProjectId.set(project.id, new Array(timeSlices.length).fill(0))
+	}
+
+	timeSlices.forEach((slice, sliceIndex) => {
+		for (const point of slice) {
+			if (!('source_project' in point)) continue
+			if (!selectedProjectIds.has(point.source_project)) 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),
+	}
+}
+
+export function buildTimeAxisLabels(
+	timeRange: Labrinth.Analytics.v3.TimeRange,
+	sliceCount: number,
+): 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 formatter = getTickFormatter(totalMs)
+
+	const labels: string[] = []
+	for (let i = 0; i < sliceCount; i++) {
+		labels.push(formatter.format(new Date(startMs + i * bucketMs)))
+	}
+	return labels
+}
+
+function getTickFormatter(totalMs: number): Intl.DateTimeFormat {
+	if (totalMs <= 2 * DAY_MS) {
+		return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' })
+	}
+	if (totalMs < 31 * DAY_MS) {
+		return new Intl.DateTimeFormat(undefined, {
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit',
+		})
+	}
+	return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' })
+}
+
+export function formatBucketRange(start: Date, end: Date): string {
+	const timeFormatter = new Intl.DateTimeFormat(undefined, {
+		hour: 'numeric',
+		minute: '2-digit',
+	})
+	const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
+		month: 'short',
+		day: 'numeric',
+		hour: 'numeric',
+		minute: '2-digit',
+	})
+
+	const sameDay =
+		start.getFullYear() === end.getFullYear() &&
+		start.getMonth() === end.getMonth() &&
+		start.getDate() === end.getDate()
+
+	if (sameDay) {
+		return `${timeFormatter.format(start)} – ${timeFormatter.format(end)}`
+	}
+	return `${dateTimeFormatter.format(start)} – ${dateTimeFormatter.format(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))
+	}
+}
+
+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:
+			return formatCompact(Math.round(value))
+	}
+}
diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index b05a97549b..efdebcd076 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -107,16 +107,6 @@
 						</template>
 					</Menu>
 				</div>
-
-				<div v-if="activeFilterLabels.length > 0" class="flex flex-wrap items-center gap-2">
-					<span
-						v-for="filterLabel in activeFilterLabels"
-						:key="filterLabel"
-						class="inline-flex items-center rounded-full border border-solid border-surface-5 bg-surface-3 px-2.5 py-1 text-xs font-medium text-primary"
-					>
-						{{ filterLabel }}
-					</span>
-				</div>
 			</div>
 		</div>
 	</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 540560cec9..aca1ec31f0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -167,7 +167,7 @@ importers:
     devDependencies:
       '@eslint/compat':
         specifier: ^1.1.1
-        version: 1.4.1(eslint@9.39.2(jiti@1.21.7))
+        version: 1.4.1(eslint@9.39.2(jiti@2.6.1))
       '@formatjs/cli':
         specifier: ^6.2.12
         version: 6.12.2(@vue/compiler-core@3.5.27)(vue@3.5.27(typescript@5.9.3))
@@ -176,22 +176,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@1.21.7))(typescript@5.9.3))(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)
+        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)
       '@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@20.19.31)(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))
+        version: 6.0.4(vite@8.0.3(@types/node@20.19.31)(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))
       autoprefixer:
         specifier: ^10.4.19
         version: 10.4.24(postcss@8.5.6)
       eslint:
         specifier: ^9.9.1
-        version: 9.39.2(jiti@1.21.7)
+        version: 9.39.2(jiti@2.6.1)
       eslint-plugin-turbo:
         specifier: ^2.5.4
-        version: 2.8.2(eslint@9.39.2(jiti@1.21.7))(turbo@2.8.2)
+        version: 2.8.2(eslint@9.39.2(jiti@2.6.1))(turbo@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -209,7 +209,7 @@ importers:
         version: 5.9.3
       vite:
         specifier: ^8.0.0
-        version: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+        version: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@2.6.1)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue-component-type-helpers:
         specifier: ^3.1.8
         version: 3.2.4
@@ -283,7 +283,7 @@ importers:
         version: 0.11.3(magicast@0.5.1)(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))
       '@sentry/nuxt':
         specifier: ^10.33.0
-        version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
+        version: 10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))
       '@tanstack/vue-query':
         specifier: ^5.90.7
         version: 5.92.9(vue@3.5.27(typescript@5.9.3))
@@ -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
@@ -413,7 +416,7 @@ importers:
         version: 10.5.0
       nuxt:
         specifier: ^3.20.2
-        version: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+        version: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       postcss:
         specifier: ^8.4.39
         version: 8.5.6
@@ -2455,6 +2458,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==}
 
@@ -5301,6 +5307,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'}
@@ -9711,8 +9721,8 @@ packages:
   vue-component-type-helpers@3.2.4:
     resolution: {integrity: sha512-05lR16HeZDcDpB23ku5b5f1fBOoHqFnMiKRr2CiEvbG5Ux4Yi0McmQBOET0dR0nxDXosxyVqv67q6CzS3AK8rw==}
 
-  vue-component-type-helpers@3.2.6:
-    resolution: {integrity: sha512-O02tnvIfOQVmnvoWwuSydwRoHjZVt8UEBR+2p4rT35p8GAy5VTlWP8o5qXfJR/GWCN0nVZoYWsVUvx2jwgdBmQ==}
+  vue-component-type-helpers@3.2.7:
+    resolution: {integrity: sha512-+gPp5YGmhfsj1IN+xUo7y0fb4clfnOiiUA39y07yW1VzCRjzVgwLbtmdWlghh7mXrPsEaYc7rrIir/HT6C8vYQ==}
 
   vue-confetti-explosion@1.0.2:
     resolution: {integrity: sha512-80OboM3/6BItIoZ6DpNcZFqGpF607kjIVc5af56oKgtFmt5yWehvJeoYhkzYlqxrqdBe0Ko4Ie3bWrmLau+dJw==}
@@ -10987,6 +10997,7 @@ snapshots:
     dependencies:
       eslint: 9.39.2(jiti@1.21.7)
       eslint-visitor-keys: 3.4.3
+    optional: true
 
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.2(jiti@2.6.1))':
     dependencies:
@@ -10995,11 +11006,11 @@ snapshots:
 
   '@eslint-community/regexpp@4.12.2': {}
 
-  '@eslint/compat@1.4.1(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
     optionalDependencies:
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
 
   '@eslint/config-array@0.21.1':
     dependencies:
@@ -11409,6 +11420,8 @@ snapshots:
 
   '@jsdevtools/ono@7.1.3': {}
 
+  '@kurkle/color@0.3.4': {}
+
   '@kwsites/file-exists@1.1.1':
     dependencies:
       debug: 4.4.3
@@ -11564,7 +11577,7 @@ snapshots:
     dependencies:
       '@nuxt/kit': 4.3.0(magicast@0.5.1)
       execa: 8.0.1
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
     transitivePeerDependencies:
       - magicast
 
@@ -11609,7 +11622,7 @@ snapshots:
       sirv: 3.0.2
       structured-clone-es: 1.0.0
       tinyglobby: 0.2.15
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vite-plugin-inspect: 11.3.3(@nuxt/kit@4.3.0(magicast@0.5.1))(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
       vite-plugin-vue-tracer: 1.2.0(vite@7.3.1(@types/node@20.19.31)(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))
       which: 5.0.0
@@ -11620,36 +11633,36 @@ 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)':
+  '@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
-      '@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))
+      '@nuxt/eslint-plugin': 0.5.7(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@stylistic/eslint-plugin': 2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
+      '@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)
+      '@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)
+      eslint-config-flat-gitignore: 0.3.0(eslint@9.39.2(jiti@2.6.1))
       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))
+      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))
+      eslint-plugin-jsdoc: 50.8.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-regexp: 2.10.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-unicorn: 55.0.0(eslint@9.39.2(jiti@2.6.1))
+      eslint-plugin-vue: 9.33.0(eslint@9.39.2(jiti@2.6.1))
       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))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
     transitivePeerDependencies:
       - '@typescript-eslint/utils'
       - eslint-import-resolver-node
       - supports-color
       - typescript
 
-  '@nuxt/eslint-plugin@0.5.7(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
+  '@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
-      '@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)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -11705,7 +11718,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/nitro-server@3.21.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)':
+  '@nuxt/nitro-server@3.21.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)':
     dependencies:
       '@nuxt/devalue': 2.0.2
       '@nuxt/kit': 3.21.0(magicast@0.5.1)
@@ -11723,7 +11736,7 @@ snapshots:
       klona: 2.0.6
       mocked-exports: 0.1.1
       nitropack: 2.13.1(rolldown@1.0.0-rc.12)(xml2js@0.6.2)
-      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       ohash: 2.0.11
       pathe: 2.0.3
       pkg-types: 2.3.0
@@ -11795,7 +11808,7 @@ snapshots:
     transitivePeerDependencies:
       - magicast
 
-  '@nuxt/vite-builder@3.21.0(@types/node@20.19.31)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)':
+  '@nuxt/vite-builder@3.21.0(@types/node@20.19.31)(eslint@9.39.2(jiti@1.21.7))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)':
     dependencies:
       '@nuxt/kit': 3.21.0(magicast@0.5.1)
       '@rollup/plugin-replace': 6.0.3(rollup@4.57.1)
@@ -11815,7 +11828,7 @@ snapshots:
       magic-string: 0.30.21
       mlly: 1.8.0
       mocked-exports: 0.1.1
-      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
       ohash: 2.0.11
       pathe: 2.0.3
       perfect-debounce: 2.1.0
@@ -11826,9 +11839,9 @@ snapshots:
       std-env: 3.10.0
       ufo: 1.6.3
       unenv: 2.0.0-rc.24
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vite-node: 5.3.0(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
-      vite-plugin-checker: 0.12.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))
+      vite-plugin-checker: 0.12.0(eslint@9.39.2(jiti@1.21.7))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))
       vue: 3.5.27(typescript@5.9.3)
       vue-bundle-renderer: 2.2.0
     optionalDependencies:
@@ -12917,7 +12930,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@sentry/nuxt@10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))':
+  '@sentry/nuxt@10.38.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/core@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.211.0(@opentelemetry/api@1.9.0))(@opentelemetry/resources@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@2.5.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.39.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(rollup@4.57.1)(vue@3.5.27(typescript@5.9.3))':
     dependencies:
       '@nuxt/kit': 3.21.0(magicast@0.5.1)
       '@sentry/browser': 10.38.0
@@ -12928,7 +12941,7 @@ snapshots:
       '@sentry/rollup-plugin': 4.9.0(rollup@4.57.1)
       '@sentry/vite-plugin': 4.9.0
       '@sentry/vue': 10.38.0(pinia@3.0.4(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3)))(vue@3.5.27(typescript@5.9.3))
-      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
+      nuxt: 3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2)
     transitivePeerDependencies:
       - '@cloudflare/workers-types'
       - '@opentelemetry/api'
@@ -13122,22 +13135,10 @@ 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.6
+      vue-component-type-helpers: 3.2.7
 
   '@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.3
-    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)
@@ -13149,7 +13150,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
       - typescript
-    optional: true
 
   '@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
     dependencies:
@@ -13551,22 +13551,6 @@ snapshots:
     dependencies:
       '@types/node': 20.19.31
 
-  '@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
@@ -13583,18 +13567,6 @@ 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
@@ -13625,18 +13597,6 @@ 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
@@ -13666,17 +13626,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@1.21.7))(typescript@5.9.3)':
-    dependencies:
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
-      '@typescript-eslint/scope-manager': 8.54.0
-      '@typescript-eslint/types': 8.54.0
-      '@typescript-eslint/typescript-estree': 8.54.0(typescript@5.9.3)
-      eslint: 9.39.2(jiti@1.21.7)
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/utils@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
@@ -13791,7 +13740,7 @@ snapshots:
       '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.0)
       '@rolldown/pluginutils': 1.0.0-rc.2
       '@vue/babel-plugin-jsx': 2.0.1(@babel/core@7.29.0)
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
@@ -13804,13 +13753,13 @@ snapshots:
   '@vitejs/plugin-vue@6.0.4(vite@7.3.1(@types/node@20.19.31)(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))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-rc.2
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(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@20.19.31)(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@20.19.31)(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
-      vite: 8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 8.0.3(@types/node@20.19.31)(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)
 
   '@vitest/expect@3.2.4':
@@ -14707,6 +14656,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:
@@ -15336,10 +15289,10 @@ snapshots:
 
   escape-string-regexp@5.0.0: {}
 
-  eslint-config-flat-gitignore@0.3.0(eslint@9.39.2(jiti@1.21.7)):
+  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@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
+      '@eslint/compat': 1.4.1(eslint@9.39.2(jiti@2.6.1))
+      eslint: 9.39.2(jiti@2.6.1)
       find-up-simple: 1.0.1
 
   eslint-config-prettier@10.1.8(eslint@9.39.2(jiti@2.6.1)):
@@ -15357,12 +15310,12 @@ 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)):
+  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
       comment-parser: 1.4.5
       debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
       is-glob: 4.0.3
       minimatch: 10.1.2
@@ -15370,18 +15323,18 @@ snapshots:
       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)
+      '@typescript-eslint/utils': 8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@1.21.7)):
+  eslint-plugin-jsdoc@50.8.0(eslint@9.39.2(jiti@2.6.1)):
     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)
+      eslint: 9.39.2(jiti@2.6.1)
       espree: 10.4.0
       esquery: 1.7.0
       parse-imports-exports: 0.2.4
@@ -15399,12 +15352,12 @@ 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)):
+  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@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
       '@eslint-community/regexpp': 4.12.2
       comment-parser: 1.4.5
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       jsdoc-type-pratt-parser: 4.8.0
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
@@ -15423,20 +15376,20 @@ snapshots:
       - supports-color
       - typescript
 
-  eslint-plugin-turbo@2.8.2(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@1.21.7)
+      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)):
+  eslint-plugin-unicorn@55.0.0(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
-      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@1.21.7))
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
       ci-info: 4.4.0
       clean-regexp: 1.0.0
       core-js-compat: 3.48.0
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       esquery: 1.7.0
       globals: 15.15.0
       indent-string: 4.0.0
@@ -15463,16 +15416,16 @@ 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)):
+  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@1.21.7))
-      eslint: 9.39.2(jiti@1.21.7)
+      '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.2(jiti@2.6.1))
+      eslint: 9.39.2(jiti@2.6.1)
       globals: 13.24.0
       natural-compare: 1.4.0
       nth-check: 2.1.1
       postcss-selector-parser: 6.1.2
       semver: 7.7.3
-      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@1.21.7))
+      vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - supports-color
@@ -15531,6 +15484,7 @@ snapshots:
       jiti: 1.21.7
     transitivePeerDependencies:
       - supports-color
+    optional: true
 
   eslint@9.39.2(jiti@2.6.1):
     dependencies:
@@ -17526,16 +17480,16 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2):
+  nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2):
     dependencies:
       '@dxup/nuxt': 0.3.2(magicast@0.5.1)
       '@nuxt/cli': 3.32.0(cac@6.7.14)(magicast@0.5.1)
       '@nuxt/devtools': 3.1.1(vite@7.3.1(@types/node@20.19.31)(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))
       '@nuxt/kit': 3.21.0(magicast@0.5.1)
-      '@nuxt/nitro-server': 3.21.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)
+      '@nuxt/nitro-server': 3.21.0(db0@0.3.4)(ioredis@5.9.2)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(rolldown@1.0.0-rc.12)(typescript@5.9.3)(xml2js@0.6.2)
       '@nuxt/schema': 3.21.0
       '@nuxt/telemetry': 2.6.6(magicast@0.5.1)
-      '@nuxt/vite-builder': 3.21.0(@types/node@20.19.31)(eslint@9.39.2(jiti@2.6.1))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@2.6.1))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)
+      '@nuxt/vite-builder': 3.21.0(@types/node@20.19.31)(eslint@9.39.2(jiti@1.21.7))(lightningcss@1.32.0)(magicast@0.5.1)(nuxt@3.21.0(@parcel/watcher@2.5.6)(@types/node@20.19.31)(@vue/compiler-sfc@3.5.27)(cac@6.7.14)(db0@0.3.4)(eslint@9.39.2(jiti@1.21.7))(ioredis@5.9.2)(lightningcss@1.32.0)(magicast@0.5.1)(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3))(xml2js@0.6.2)(yaml@2.8.2))(optionator@0.9.4)(rolldown@1.0.0-rc.12)(rollup@4.57.1)(sass@1.97.3)(terser@5.46.0)(typescript@5.9.3)(vue-tsc@2.2.12(typescript@5.9.3))(vue@3.5.27(typescript@5.9.3))(yaml@2.8.2)
       '@unhead/vue': 2.1.2(vue@3.5.27(typescript@5.9.3))
       '@vue/shared': 3.5.27
       c12: 3.3.3(magicast@0.5.1)
@@ -19738,12 +19692,12 @@ snapshots:
   vite-dev-rpc@1.1.0(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
     dependencies:
       birpc: 2.9.0
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vite-hot-client: 2.1.0(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
 
   vite-hot-client@2.1.0(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)):
     dependencies:
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
 
   vite-node@5.3.0(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
@@ -19765,7 +19719,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-checker@0.12.0(eslint@9.39.2(jiti@2.6.1))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3)):
+  vite-plugin-checker@0.12.0(eslint@9.39.2(jiti@1.21.7))(optionator@0.9.4)(typescript@5.9.3)(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))(vue-tsc@2.2.12(typescript@5.9.3)):
     dependencies:
       '@babel/code-frame': 7.29.0
       chokidar: 4.0.3
@@ -19774,10 +19728,10 @@ snapshots:
       picomatch: 4.0.3
       tiny-invariant: 1.3.3
       tinyglobby: 0.2.15
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vscode-uri: 3.1.0
     optionalDependencies:
-      eslint: 9.39.2(jiti@2.6.1)
+      eslint: 9.39.2(jiti@1.21.7)
       optionator: 0.9.4
       typescript: 5.9.3
       vue-tsc: 2.2.12(typescript@5.9.3)
@@ -19792,7 +19746,7 @@ snapshots:
       perfect-debounce: 2.1.0
       sirv: 3.0.2
       unplugin-utils: 0.3.1
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vite-dev-rpc: 1.1.0(vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2))
     optionalDependencies:
       '@nuxt/kit': 4.3.0(magicast@0.5.1)
@@ -19806,7 +19760,7 @@ snapshots:
       magic-string: 0.30.21
       pathe: 2.0.3
       source-map-js: 1.2.1
-      vite: 7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
+      vite: 7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2)
       vue: 3.5.27(typescript@5.9.3)
 
   vite-svg-loader@5.1.0(vue@3.5.27(typescript@5.9.3)):
@@ -19843,6 +19797,23 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
+  vite@7.3.1(@types/node@20.19.31)(jiti@1.21.7)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+    dependencies:
+      esbuild: 0.27.2
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.57.1
+      tinyglobby: 0.2.15
+    optionalDependencies:
+      '@types/node': 20.19.31
+      fsevents: 2.3.3
+      jiti: 1.21.7
+      lightningcss: 1.32.0
+      sass: 1.97.3
+      terser: 5.46.0
+      yaml: 2.8.2
+
   vite@7.3.1(@types/node@20.19.31)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
     dependencies:
       esbuild: 0.27.2
@@ -19860,7 +19831,7 @@ snapshots:
       terser: 5.46.0
       yaml: 2.8.2
 
-  vite@8.0.3(@types/node@20.19.31)(esbuild@0.27.3)(jiti@1.21.7)(sass@1.97.3)(terser@5.46.0)(yaml@2.8.2):
+  vite@8.0.3(@types/node@20.19.31)(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
       picomatch: 4.0.4
@@ -19871,7 +19842,7 @@ snapshots:
       '@types/node': 20.19.31
       esbuild: 0.27.3
       fsevents: 2.3.3
-      jiti: 1.21.7
+      jiti: 2.6.1
       sass: 1.97.3
       terser: 5.46.0
       yaml: 2.8.2
@@ -19996,7 +19967,7 @@ snapshots:
 
   vue-component-type-helpers@3.2.4: {}
 
-  vue-component-type-helpers@3.2.6: {}
+  vue-component-type-helpers@3.2.7: {}
 
   vue-confetti-explosion@1.0.2(vue@3.5.27(typescript@5.9.3)):
     dependencies:
@@ -20036,10 +20007,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@1.21.7)):
+  vue-eslint-parser@9.4.3(eslint@9.39.2(jiti@2.6.1)):
     dependencies:
       debug: 4.4.3
-      eslint: 9.39.2(jiti@1.21.7)
+      eslint: 9.39.2(jiti@2.6.1)
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1

From 31f13a20aed9d4746e1edddc3fc99cbf0dee51a7 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 17:40:55 -0600
Subject: [PATCH 07/20] feat: improve query builder styles

---
 .../analytics/query-builder/QueryBuilder.vue  | 162 +++++++++---------
 1 file changed, 83 insertions(+), 79 deletions(-)

diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index efdebcd076..b8856d7b13 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -3,9 +3,9 @@
 		class="flex flex-col gap-3 rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4"
 	>
 		<div v-if="showProjectRow" class="flex items-center gap-2">
-			<div class="flex items-center gap-2 text-primary">
-				<FolderOpenIcon class="size-4" />
-				<span class="text-sm font-medium">Projects:</span>
+			<div class="flex w-32 items-center gap-2 text-primary">
+				<FolderOpenIcon class="size-5" />
+				<span class="text-base font-medium">Projects:</span>
 			</div>
 			<div class="w-[20rem]">
 				<MultiSelect
@@ -20,93 +20,97 @@
 			</div>
 		</div>
 
-		<div class="flex items-center gap-2">
-			<div class="flex items-center gap-2 text-primary">
-				<CalendarIcon class="size-4" />
-				<span class="text-sm font-medium">Timeframe:</span>
-			</div>
-			<div class="flex flex-wrap items-center gap-2">
-				<div class="w-[10rem]">
+		<div class="flex items-center gap-6">
+			<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 class="w-48">
 					<Combobox v-model="selectedTimeframe" :options="timeframeOptions" />
 				</div>
-				<span class="text-sm font-medium text-primary">Grouped by</span>
-				<div class="w-[8rem]">
+			</div>
+			<div class="flex items-center gap-2">
+				<span class="text-base font-medium text-primary">Grouped by</span>
+				<div class="w-48">
 					<Combobox v-model="selectedGroupBy" :options="groupByOptions" />
 				</div>
 			</div>
 		</div>
 
-		<div class="flex items-center gap-2">
-			<div class="flex items-center gap-2 text-primary md:pt-2">
-				<BlocksIcon class="size-4" />
-				<span class="text-sm font-medium">Breakdown:</span>
-			</div>
-			<div class="flex flex-col gap-2">
-				<div class="flex flex-wrap items-center gap-2">
-					<div class="w-[11rem]">
-						<Combobox v-model="selectedBreakdown" :options="breakdownOptions" />
+		<div class="flex items-center gap-6">
+			<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 class="w-48">
+							<Combobox v-model="selectedBreakdown" :options="breakdownOptions" />
+						</div>
 					</div>
-					<span class="text-sm font-medium text-primary">Filtered by</span>
-					<Menu :triggers="['click']" :auto-hide="false" no-auto-focus placement="bottom-start">
-						<button
-							type="button"
-							class="inline-flex items-center gap-2 rounded-xl border border-dashed border-surface-5 bg-surface-2 px-3 py-1.5 text-sm font-semibold text-primary transition-colors hover:bg-surface-4"
-						>
-							<PlusIcon class="size-4" />
-							Add
-						</button>
-
-						<template #popper>
-							<div
-								class="flex w-[16rem] flex-col gap-1 rounded-xl border border-solid border-surface-5 bg-surface-4 p-2"
+				</div>
+			</div>
+			<div class="flex items-center gap-2">
+				<span class="text-base font-medium text-primary">Filtered by</span>
+				<Menu :triggers="['click']" :auto-hide="false" no-auto-focus placement="bottom-start">
+					<button
+						type="button"
+						class="inline-flex items-center gap-2 rounded-xl border border-dashed border-surface-5 bg-surface-2 px-3 py-1.5 text-sm font-semibold text-primary transition-colors hover:bg-surface-4"
+					>
+						<PlusIcon class="size-5" />
+						Add
+					</button>
+
+					<template #popper>
+						<div class="flex w-[16rem] flex-col gap-1">
+							<Menu
+								v-for="category in filterCategories"
+								:key="category.key"
+								:triggers="['hover', 'focus']"
+								:auto-hide="false"
+								no-auto-focus
+								placement="right-start"
 							>
-								<Menu
-									v-for="category in filterCategories"
-									:key="category.key"
-									:triggers="['hover', 'focus']"
-									:auto-hide="false"
-									no-auto-focus
-									placement="right-start"
+								<button
+									type="button"
+									class="flex w-full items-center justify-between rounded-lg bg-surface-3 px-2 py-1.5 text-left text-base font-medium text-primary transition-colors hover:bg-surface-3"
 								>
-									<button
-										type="button"
-										class="flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left text-sm font-medium text-primary transition-colors hover:bg-surface-5"
-									>
-										<span>{{ category.label }}</span>
-										<div class="flex items-center gap-1">
-											<span
-												v-if="getCategorySelectionCount(category.key) > 0"
-												class="rounded-full bg-surface-5 px-1.5 py-0.5 text-xs text-primary"
-											>
-												{{ getCategorySelectionCount(category.key) }}
-											</span>
-											<ChevronRightIcon class="size-4 text-primary" />
+									<span>{{ category.label }}</span>
+									<div class="flex items-center gap-1">
+										<span
+											v-if="getCategorySelectionCount(category.key) > 0"
+											class="rounded-full bg-surface-3 px-1.5 py-0.5 text-xs text-primary"
+										>
+											{{ getCategorySelectionCount(category.key) }}
+										</span>
+										<ChevronRightIcon class="size-5 text-primary" />
+									</div>
+								</button>
+
+								<template #popper>
+									<div>
+										<p class="mb-2 text-xs font-semibold uppercase tracking-wide text-primary">
+											{{ category.label }}
+										</p>
+										<div class="flex max-h-56 flex-col gap-2 overflow-y-auto">
+											<Checkbox
+												v-for="option in category.options"
+												:key="`${category.key}-${option.value}`"
+												:model-value="isFilterValueSelected(category.key, option.value)"
+												:label="option.label"
+												@update:model-value="
+													(nextValue) => toggleFilterValue(category.key, option.value, nextValue)
+												"
+											/>
 										</div>
-									</button>
-
-									<template #popper>
-										<div>
-											<p class="mb-2 text-xs font-semibold uppercase tracking-wide text-primary">
-												{{ category.label }}
-											</p>
-											<div class="flex max-h-56 flex-col gap-2 overflow-y-auto">
-												<Checkbox
-													v-for="option in category.options"
-													:key="`${category.key}-${option.value}`"
-													:model-value="isFilterValueSelected(category.key, option.value)"
-													:label="option.label"
-													@update:model-value="
-														(nextValue) => toggleFilterValue(category.key, option.value, nextValue)
-													"
-												/>
-											</div>
-										</div>
-									</template>
-								</Menu>
-							</div>
-						</template>
-					</Menu>
-				</div>
+									</div>
+								</template>
+							</Menu>
+						</div>
+					</template>
+				</Menu>
 			</div>
 		</div>
 	</div>

From e52d6420de5e85aa3e655a2aa3c961297201bcaa Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 17:57:33 -0600
Subject: [PATCH 08/20] feat: add query to url params for query builder

---
 .../analytics/AnalyticsDashboard.vue          |   2 +-
 .../analytics/graph/AnalyticsChart.client.vue |   2 +-
 .../analytics/graph/AnalyticsGraph.vue        |   4 +-
 .../src/components/analytics/graph/utils.ts   |   2 +-
 .../analytics/query-builder/QueryBuilder.vue  | 135 ++------
 .../analytics/stat-cards/StatCards.vue        |   2 +-
 .../providers/{ => analytics}/analytics.ts    | 106 +++++-
 .../providers/analytics/query-builder-url.ts  | 313 ++++++++++++++++++
 8 files changed, 446 insertions(+), 120 deletions(-)
 rename apps/frontend/src/providers/{ => analytics}/analytics.ts (72%)
 create mode 100644 apps/frontend/src/providers/analytics/query-builder-url.ts

diff --git a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
index 2945a89f4a..4e6b7422a4 100644
--- a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
+++ b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
@@ -9,7 +9,7 @@
 <script setup lang="ts">
 import { injectProjectPageContext } from '@modrinth/ui'
 
-import { createAnalyticsDashboardContext, provideAnalyticsDashboardContext } from '~/providers/analytics'
+import { createAnalyticsDashboardContext, provideAnalyticsDashboardContext } from '~/providers/analytics/analytics'
 import { injectOrganizationContext } from '~/providers/organization-context'
 
 import AnalyticsGraph from './graph/AnalyticsGraph.vue'
diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
index 3bdcc82176..84b357b03c 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
@@ -19,7 +19,7 @@ import {
 	type TooltipModel,
 } from 'chart.js'
 
-import type { AnalyticsDashboardStat } from '~/providers/analytics'
+import type { AnalyticsDashboardStat } from '~/providers/analytics/analytics'
 
 import { type ChartDataset, formatAxisValue } from './utils'
 
diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
index f0a43b1f55..595b7e346d 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
@@ -93,8 +93,8 @@
 <script setup lang="ts">
 import { Chips, useFormatNumber } from '@modrinth/ui'
 
-import type { AnalyticsDashboardStat } from '~/providers/analytics'
-import { injectAnalyticsDashboardContext } from '~/providers/analytics'
+import type { AnalyticsDashboardStat } from '~/providers/analytics/analytics'
+import { injectAnalyticsDashboardContext } from '~/providers/analytics/analytics'
 
 import AnalyticsChart from './AnalyticsChart.client.vue'
 import AnalyticsChartTooltip, { type AnalyticsChartTooltipEntry } from './AnalyticsChartTooltip.vue'
diff --git a/apps/frontend/src/components/analytics/graph/utils.ts b/apps/frontend/src/components/analytics/graph/utils.ts
index 3554893252..8788fb2a40 100644
--- a/apps/frontend/src/components/analytics/graph/utils.ts
+++ b/apps/frontend/src/components/analytics/graph/utils.ts
@@ -1,6 +1,6 @@
 import type { Labrinth } from '@modrinth/api-client'
 
-import type { AnalyticsDashboardProject, AnalyticsDashboardStat } from '~/providers/analytics'
+import type { AnalyticsDashboardProject, AnalyticsDashboardStat } from '~/providers/analytics/analytics'
 
 export type ChartDataset = {
 	projectId: string
diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index b8856d7b13..0f0d220fb5 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -134,72 +134,26 @@ import {
 } from '@modrinth/ui'
 import { Menu } from 'floating-vue'
 
-import { injectAnalyticsDashboardContext } from '~/providers/analytics'
+import {
+	type AnalyticsBreakdownPreset,
+	type AnalyticsGroupByPreset,
+	type AnalyticsQueryFilterCategory,
+	type AnalyticsSelectedFilters,
+	type AnalyticsTimeframePreset,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
 
 const ALL_FILTER_VALUE = '__all__'
 const MIN_RANGE_MS = 60 * 60 * 1000
 const MAX_TIME_SLICES = 1024
 
-export type QueryBuilderProject = {
-	id: string
-	name: string
-}
-
-export type QueryBuilderFilterCategory =
-	| 'project'
-	| 'country'
-	| 'monetization'
-	| 'download_source'
-	| 'download_type'
-	| 'game_version'
-	| 'loader_type'
-
-type TimeframePreset =
-	| 'today'
-	| 'yesterday'
-	| 'last_24_hours'
-	| 'last_7_days'
-	| 'last_14_days'
-	| 'last_30_days'
-	| 'last_90_days'
-	| 'last_190_days'
-	| 'this_month'
-	| 'year_to_date'
-	| 'all_time'
-
-type GroupByPreset = '1h' | '6h' | 'day' | 'week' | 'month' | 'year'
-
-type BreakdownPreset =
-	| 'none'
-	| 'country'
-	| 'monetization'
-	| 'download_source'
-	| 'download_type'
-	| 'loader'
-	| 'game_version'
-
 const analyticsDashboardContext = injectAnalyticsDashboardContext()
 const projects = computed(() => analyticsDashboardContext.projects.value)
-
-const selectedProjectIds = computed<string[]>({
-	get: () => analyticsDashboardContext.selectedProjectIds.value,
-	set: (nextProjectIds) => {
-		analyticsDashboardContext.selectedProjectIds.value = nextProjectIds
-	},
-})
-const selectedTimeframe = ref<TimeframePreset>('yesterday')
-const selectedGroupBy = ref<GroupByPreset>('1h')
-const selectedBreakdown = ref<BreakdownPreset>('none')
-
-const selectedFilters = ref<Record<QueryBuilderFilterCategory, string[]>>({
-	project: [],
-	country: [],
-	monetization: [],
-	download_source: [],
-	download_type: [],
-	game_version: [],
-	loader_type: [],
-})
+const selectedProjectIds = analyticsDashboardContext.selectedProjectIds
+const selectedTimeframe = analyticsDashboardContext.selectedTimeframe
+const selectedGroupBy = analyticsDashboardContext.selectedGroupBy
+const selectedBreakdown = analyticsDashboardContext.selectedBreakdown
+const selectedFilters = analyticsDashboardContext.selectedFilters
 
 const projectOptions = computed<MultiSelectOption<string>[]>(() =>
 	projects.value.map((project) => ({
@@ -210,7 +164,7 @@ const projectOptions = computed<MultiSelectOption<string>[]>(() =>
 
 const showProjectRow = computed(() => projects.value.length > 1)
 
-const timeframeOptions: ComboboxOption<TimeframePreset>[] = [
+const timeframeOptions: ComboboxOption<AnalyticsTimeframePreset>[] = [
 	{ value: 'today', label: 'Today' },
 	{ value: 'yesterday', label: 'Yesterday' },
 	{ value: 'last_24_hours', label: 'Last 24 hours' },
@@ -224,7 +178,7 @@ const timeframeOptions: ComboboxOption<TimeframePreset>[] = [
 	{ value: 'all_time', label: 'All time' },
 ]
 
-const groupByOptions: ComboboxOption<GroupByPreset>[] = [
+const groupByOptions: ComboboxOption<AnalyticsGroupByPreset>[] = [
 	{ value: '1h', label: '1h' },
 	{ value: '6h', label: '6h' },
 	{ value: 'day', label: 'Day' },
@@ -233,7 +187,7 @@ const groupByOptions: ComboboxOption<GroupByPreset>[] = [
 	{ value: 'year', label: 'Year' },
 ]
 
-const breakdownOptions: ComboboxOption<BreakdownPreset>[] = [
+const breakdownOptions: ComboboxOption<AnalyticsBreakdownPreset>[] = [
 	{ value: 'none', label: 'None' },
 	{ value: 'country', label: 'Country' },
 	{ value: 'monetization', label: 'Monetization' },
@@ -249,7 +203,7 @@ type FilterOption = {
 }
 
 type FilterCategory = {
-	key: QueryBuilderFilterCategory
+	key: AnalyticsQueryFilterCategory
 	label: string
 	options: FilterOption[]
 }
@@ -304,48 +258,7 @@ const filterCategories = computed<FilterCategory[]>(() => [
 	},
 ])
 
-const optionLabelByCategoryAndValue = computed(() => {
-	const optionLabelMap = new Map<string, string>()
-
-	for (const category of filterCategories.value) {
-		for (const option of category.options) {
-			optionLabelMap.set(`${category.key}:${option.value}`, option.label)
-		}
-	}
-
-	return optionLabelMap
-})
-
-const activeFilterLabels = computed(() => {
-	const labels: string[] = []
-
-	for (const category of filterCategories.value) {
-		if (category.key === 'project') {
-			continue
-		}
-
-		const selectedValues = selectedFilters.value[category.key]
-		for (const value of selectedValues) {
-			const optionLabel = optionLabelByCategoryAndValue.value.get(`${category.key}:${value}`)
-			if (optionLabel) {
-				labels.push(`${category.label}: ${optionLabel}`)
-			}
-		}
-	}
-
-	if (selectedProjectIds.value.length !== projects.value.length) {
-		for (const selectedProjectId of selectedProjectIds.value) {
-			const project = projects.value.find((item) => item.id === selectedProjectId)
-			if (project) {
-				labels.push(`Project: ${project.name}`)
-			}
-		}
-	}
-
-	return labels
-})
-
-function isFilterValueSelected(categoryKey: QueryBuilderFilterCategory, value: string): boolean {
+function isFilterValueSelected(categoryKey: AnalyticsQueryFilterCategory, value: string): boolean {
 	if (categoryKey === 'project') {
 		if (value === ALL_FILTER_VALUE) {
 			return selectedProjectIds.value.length === projects.value.length
@@ -362,7 +275,7 @@ function isFilterValueSelected(categoryKey: QueryBuilderFilterCategory, value: s
 }
 
 function toggleFilterValue(
-	categoryKey: QueryBuilderFilterCategory,
+	categoryKey: AnalyticsQueryFilterCategory,
 	value: string,
 	nextValue: boolean,
 ) {
@@ -406,7 +319,7 @@ function toggleFilterValue(
 	}
 }
 
-function getCategorySelectionCount(categoryKey: QueryBuilderFilterCategory): number {
+function getCategorySelectionCount(categoryKey: AnalyticsQueryFilterCategory): number {
 	if (categoryKey === 'project') {
 		return selectedProjectIds.value.length === projects.value.length
 			? 0
@@ -422,7 +335,7 @@ function startOfDay(date: Date): Date {
 	return nextDate
 }
 
-function getTimeRangeForPreset(preset: TimeframePreset): { start: Date; end: Date } {
+function getTimeRangeForPreset(preset: AnalyticsTimeframePreset): { start: Date; end: Date } {
 	const now = new Date()
 	const end = new Date(now)
 
@@ -489,7 +402,7 @@ function getTimeRangeForPreset(preset: TimeframePreset): { start: Date; end: Dat
 	}
 }
 
-function getGroupByMinutes(preset: GroupByPreset): number {
+function getGroupByMinutes(preset: AnalyticsGroupByPreset): number {
 	switch (preset) {
 		case '1h':
 			return 60
@@ -531,8 +444,8 @@ function unique<T>(values: T[]): T[] {
 }
 
 function withBreakdownFields(
-	breakdown: BreakdownPreset,
-	filters: Record<QueryBuilderFilterCategory, string[]>,
+	breakdown: AnalyticsBreakdownPreset,
+	filters: AnalyticsSelectedFilters,
 ): {
 	views: Labrinth.Analytics.v3.ProjectViewsField[]
 	downloads: Labrinth.Analytics.v3.ProjectDownloadsField[]
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
index d431ef9641..312a1d3f54 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { useFormatNumber } from '@modrinth/ui'
 
-import { type AnalyticsDashboardStat, injectAnalyticsDashboardContext } from '~/providers/analytics'
+import { type AnalyticsDashboardStat, injectAnalyticsDashboardContext } from '~/providers/analytics/analytics'
 
 import StatCard from './StatCard.vue'
 
diff --git a/apps/frontend/src/providers/analytics.ts b/apps/frontend/src/providers/analytics/analytics.ts
similarity index 72%
rename from apps/frontend/src/providers/analytics.ts
rename to apps/frontend/src/providers/analytics/analytics.ts
index 61f477ea1c..e68d213f1c 100644
--- a/apps/frontend/src/providers/analytics.ts
+++ b/apps/frontend/src/providers/analytics/analytics.ts
@@ -3,7 +3,26 @@ import { createContext, injectModrinthClient, type ProjectPageContext } from '@m
 import { useQuery } from '@tanstack/vue-query'
 import type { ComputedRef, Ref } from 'vue'
 
-import type { OrganizationContext } from './organization-context'
+import type { OrganizationContext } from '../organization-context'
+import {
+	type AnalyticsBreakdownPreset,
+	type AnalyticsGroupByPreset,
+	type AnalyticsSelectedFilters,
+	type AnalyticsTimeframePreset,
+	areSelectedFiltersEqual,
+	areStringArraysEqual,
+	buildAnalyticsQueryBuilderRouteQuery,
+	hasAnalyticsQueryBuilderRouteChange,
+	readAnalyticsQueryBuilderState,
+} from './query-builder-url'
+
+export type {
+	AnalyticsBreakdownPreset,
+	AnalyticsGroupByPreset,
+	AnalyticsQueryFilterCategory,
+	AnalyticsSelectedFilters,
+	AnalyticsTimeframePreset,
+} from './query-builder-url'
 
 export type AnalyticsDashboardStat = 'views' | 'downloads' | 'revenue' | 'playtime'
 
@@ -29,6 +48,10 @@ export interface AnalyticsDashboardPercentChanges {
 export interface AnalyticsDashboardContextValue {
 	projects: ComputedRef<AnalyticsDashboardProject[]>
 	selectedProjectIds: Ref<string[]>
+	selectedTimeframe: Ref<AnalyticsTimeframePreset>
+	selectedGroupBy: Ref<AnalyticsGroupByPreset>
+	selectedBreakdown: Ref<AnalyticsBreakdownPreset>
+	selectedFilters: Ref<AnalyticsSelectedFilters>
 	fetchRequest: Ref<Labrinth.Analytics.v3.FetchRequest | null>
 	timeSlices: Ref<Labrinth.Analytics.v3.TimeSlice[]>
 	previousTimeSlices: Ref<Labrinth.Analytics.v3.TimeSlice[]>
@@ -137,8 +160,16 @@ 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[]>([])
+	const selectedProjectIds = ref<string[]>(initialQueryState.selectedProjectIds)
+	const selectedTimeframe = ref<AnalyticsTimeframePreset>(initialQueryState.selectedTimeframe)
+	const selectedGroupBy = ref<AnalyticsGroupByPreset>(initialQueryState.selectedGroupBy)
+	const selectedBreakdown = ref<AnalyticsBreakdownPreset>(initialQueryState.selectedBreakdown)
+	const selectedFilters = ref<AnalyticsSelectedFilters>(initialQueryState.selectedFilters)
 	const fetchRequest = ref<Labrinth.Analytics.v3.FetchRequest | null>(null)
 
 	const hasProjectContext = computed(() => Boolean(options.projectPageContext))
@@ -177,11 +208,12 @@ export function createAnalyticsDashboardContext(
 		}))
 	})
 
+	const availableProjectIds = computed(() => projects.value.map((project) => project.id))
+
 	watch(
 		projects,
 		(nextProjects) => {
 			if (nextProjects.length === 0) {
-				selectedProjectIds.value = []
 				return
 			}
 
@@ -194,6 +226,70 @@ export function createAnalyticsDashboardContext(
 		{ immediate: true },
 	)
 
+	watch(
+		() => route.query,
+		(nextQuery) => {
+			const nextQueryState = readAnalyticsQueryBuilderState(nextQuery, availableProjectIds.value)
+
+			if (!areStringArraysEqual(selectedProjectIds.value, nextQueryState.selectedProjectIds)) {
+				selectedProjectIds.value = nextQueryState.selectedProjectIds
+			}
+			if (selectedTimeframe.value !== nextQueryState.selectedTimeframe) {
+				selectedTimeframe.value = nextQueryState.selectedTimeframe
+			}
+			if (selectedGroupBy.value !== nextQueryState.selectedGroupBy) {
+				selectedGroupBy.value = nextQueryState.selectedGroupBy
+			}
+			if (selectedBreakdown.value !== nextQueryState.selectedBreakdown) {
+				selectedBreakdown.value = nextQueryState.selectedBreakdown
+			}
+			if (!areSelectedFiltersEqual(selectedFilters.value, nextQueryState.selectedFilters)) {
+				selectedFilters.value = nextQueryState.selectedFilters
+			}
+		},
+	)
+
+	watch(
+		[
+			selectedProjectIds,
+			selectedTimeframe,
+			selectedGroupBy,
+			selectedBreakdown,
+			selectedFilters,
+			availableProjectIds,
+		],
+		() => {
+			if (import.meta.server) {
+				return
+			}
+
+			const nextRouteQuery = buildAnalyticsQueryBuilderRouteQuery(
+				route.query,
+				{
+					selectedProjectIds: selectedProjectIds.value,
+					selectedTimeframe: selectedTimeframe.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 } =
 		useQuery({
 			queryKey: computed(() => ['analytics', 'dashboard', 'current', fetchRequest.value]),
@@ -267,6 +363,10 @@ export function createAnalyticsDashboardContext(
 	return {
 		projects,
 		selectedProjectIds,
+		selectedTimeframe,
+		selectedGroupBy,
+		selectedBreakdown,
+		selectedFilters,
 		fetchRequest,
 		timeSlices,
 		previousTimeSlices,
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..f7a6e92646
--- /dev/null
+++ b/apps/frontend/src/providers/analytics/query-builder-url.ts
@@ -0,0 +1,313 @@
+import type { LocationQuery, LocationQueryValue, LocationQueryValueRaw } from 'vue-router'
+
+export type AnalyticsQueryFilterCategory =
+	| 'project'
+	| 'country'
+	| 'monetization'
+	| 'download_source'
+	| 'download_type'
+	| 'game_version'
+	| 'loader_type'
+
+export type AnalyticsTimeframePreset =
+	| 'today'
+	| 'yesterday'
+	| 'last_24_hours'
+	| 'last_7_days'
+	| 'last_14_days'
+	| 'last_30_days'
+	| 'last_90_days'
+	| 'last_190_days'
+	| 'this_month'
+	| 'year_to_date'
+	| 'all_time'
+
+export type AnalyticsGroupByPreset = '1h' | '6h' | 'day' | 'week' | 'month' | 'year'
+
+export type AnalyticsBreakdownPreset =
+	| 'none'
+	| 'country'
+	| 'monetization'
+	| 'download_source'
+	| 'download_type'
+	| 'loader'
+	| 'game_version'
+
+export type AnalyticsSelectedFilters = Record<AnalyticsQueryFilterCategory, string[]>
+
+export type AnalyticsQueryBuilderState = {
+	selectedProjectIds: string[]
+	selectedTimeframe: AnalyticsTimeframePreset
+	selectedGroupBy: AnalyticsGroupByPreset
+	selectedBreakdown: AnalyticsBreakdownPreset
+	selectedFilters: AnalyticsSelectedFilters
+}
+
+type MutableRouteQuery = Record<string, LocationQueryValueRaw | LocationQueryValueRaw[] | undefined>
+
+export const DEFAULT_TIMEFRAME_PRESET: AnalyticsTimeframePreset = 'yesterday'
+export const DEFAULT_GROUP_BY_PRESET: AnalyticsGroupByPreset = '1h'
+export const DEFAULT_BREAKDOWN_PRESET: AnalyticsBreakdownPreset = 'none'
+
+const TIMEFRAME_PRESET_VALUES: AnalyticsTimeframePreset[] = [
+	'today',
+	'yesterday',
+	'last_24_hours',
+	'last_7_days',
+	'last_14_days',
+	'last_30_days',
+	'last_90_days',
+	'last_190_days',
+	'this_month',
+	'year_to_date',
+	'all_time',
+]
+
+const GROUP_BY_PRESET_VALUES: AnalyticsGroupByPreset[] = ['1h', '6h', 'day', 'week', 'month', 'year']
+
+const BREAKDOWN_PRESET_VALUES: AnalyticsBreakdownPreset[] = [
+	'none',
+	'country',
+	'monetization',
+	'download_source',
+	'download_type',
+	'loader',
+	'game_version',
+]
+
+const QUERY_KEY_PROJECT_IDS = 'a_projects'
+const QUERY_KEY_TIMEFRAME = 'a_timeframe'
+const QUERY_KEY_GROUP_BY = 'a_group_by'
+const QUERY_KEY_BREAKDOWN = 'a_breakdown'
+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_TYPE = 'a_download_type'
+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'>[] = [
+	'country',
+	'monetization',
+	'download_source',
+	'download_type',
+	'game_version',
+	'loader_type',
+]
+
+const FILTER_QUERY_KEY_BY_CATEGORY: Record<
+	Exclude<AnalyticsQueryFilterCategory, 'project'>,
+	string
+> = {
+	country: QUERY_KEY_FILTER_COUNTRY,
+	monetization: QUERY_KEY_FILTER_MONETIZATION,
+	download_source: QUERY_KEY_FILTER_DOWNLOAD_SOURCE,
+	download_type: QUERY_KEY_FILTER_DOWNLOAD_TYPE,
+	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,
+	QUERY_KEY_GROUP_BY,
+	QUERY_KEY_BREAKDOWN,
+	QUERY_KEY_FILTER_COUNTRY,
+	QUERY_KEY_FILTER_MONETIZATION,
+	QUERY_KEY_FILTER_DOWNLOAD_SOURCE,
+	QUERY_KEY_FILTER_DOWNLOAD_TYPE,
+	QUERY_KEY_FILTER_GAME_VERSION,
+	QUERY_KEY_FILTER_LOADER_TYPE,
+]
+
+export function buildEmptySelectedFilters(): AnalyticsSelectedFilters {
+	return {
+		project: [],
+		country: [],
+		monetization: [],
+		download_source: [],
+		download_type: [],
+		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 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 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] = parseListQueryValue(query[FILTER_QUERY_KEY_BY_CATEGORY[category]])
+	}
+
+	return {
+		selectedProjectIds,
+		selectedTimeframe: parsePresetQueryValue(
+			query[QUERY_KEY_TIMEFRAME],
+			TIMEFRAME_PRESET_VALUES,
+			DEFAULT_TIMEFRAME_PRESET,
+		),
+		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] =
+		state.selectedTimeframe !== DEFAULT_TIMEFRAME_PRESET ? state.selectedTimeframe : 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]),
+	)
+}

From 97fde95a03bee7417641b54826f4e349581dec57 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Wed, 22 Apr 2026 18:29:08 -0600
Subject: [PATCH 09/20] feat: implement analytics table and breakdown

---
 .../analytics/AnalyticsDashboard.vue          |   2 +
 .../src/components/analytics/breakdown.ts     |  38 ++
 .../analytics/graph/AnalyticsGraph.vue        |  19 +-
 .../src/components/analytics/graph/utils.ts   |  47 ++-
 .../analytics/table/AnalyticsTable.vue        | 397 ++++++++++++++++++
 5 files changed, 493 insertions(+), 10 deletions(-)
 create mode 100644 apps/frontend/src/components/analytics/breakdown.ts
 create mode 100644 apps/frontend/src/components/analytics/table/AnalyticsTable.vue

diff --git a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
index 4e6b7422a4..c8c1315d6c 100644
--- a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
+++ b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
@@ -3,6 +3,7 @@
 		<QueryBuilder />
 		<StatCards />
 		<AnalyticsGraph />
+		<AnalyticsTable />
 	</div>
 </template>
 
@@ -15,6 +16,7 @@ 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)
diff --git a/apps/frontend/src/components/analytics/breakdown.ts b/apps/frontend/src/components/analytics/breakdown.ts
new file mode 100644
index 0000000000..2596ec46c0
--- /dev/null
+++ b/apps/frontend/src/components/analytics/breakdown.ts
@@ -0,0 +1,38 @@
+import type { Labrinth } from '@modrinth/api-client'
+
+import type { AnalyticsBreakdownPreset } from '~/providers/analytics/analytics'
+
+export const ALL_BREAKDOWN_VALUE = 'All'
+
+export function getAnalyticsBreakdownValue(
+	point: Labrinth.Analytics.v3.ProjectAnalytics,
+	selectedBreakdown: AnalyticsBreakdownPreset,
+): string {
+	switch (selectedBreakdown) {
+		case 'none':
+			return ALL_BREAKDOWN_VALUE
+		case 'country':
+			return normalizeBreakdownValue('country' in point ? point.country : undefined)
+		case 'monetization': {
+			if ('monetized' in point && typeof point.monetized === 'boolean') {
+				return point.monetized ? 'monetized' : 'unmonetized'
+			}
+			return ALL_BREAKDOWN_VALUE
+		}
+		case 'download_source':
+			return normalizeBreakdownValue('domain' in point ? point.domain : undefined)
+		case 'download_type':
+			return normalizeBreakdownValue('version_id' in point ? point.version_id : undefined)
+		case 'loader':
+			return normalizeBreakdownValue('loader' in point ? point.loader : undefined)
+		case 'game_version':
+			return normalizeBreakdownValue('game_version' in point ? point.game_version : undefined)
+		default:
+			return ALL_BREAKDOWN_VALUE
+	}
+}
+
+function normalizeBreakdownValue(value: string | undefined): string {
+	const normalized = value?.trim()
+	return normalized && normalized.length > 0 ? normalized : ALL_BREAKDOWN_VALUE
+}
diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
index 595b7e346d..c2d3edd720 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
@@ -149,14 +149,6 @@ const selectedProjects = computed(() =>
 
 const legendPalette = ['#00D084', '#A78BFA', '#F59E0B', '#38BDF8', '#FB7185', '#34D399']
 
-const legendEntries = computed(() =>
-	selectedProjects.value.map((project, index) => ({
-		id: project.id,
-		name: project.name,
-		color: legendPalette[index % legendPalette.length],
-	})),
-)
-
 const graphTitle = computed(() => titleByStat[analyticsDashboardContext.activeStat.value])
 
 const chartType = computed<'line' | 'bar'>(() => (activeViewMode.value === 'bar' ? 'bar' : 'line'))
@@ -182,9 +174,18 @@ const chartDatasets = computed(() =>
 		selectedProjects.value,
 		analyticsDashboardContext.activeStat.value,
 		legendPalette,
+		analyticsDashboardContext.selectedBreakdown.value,
 	),
 )
 
+const legendEntries = computed(() =>
+	chartDatasets.value.map((dataset) => ({
+		id: dataset.projectId,
+		name: dataset.label,
+		color: dataset.borderColor,
+	})),
+)
+
 const chartContainer = ref<HTMLElement | null>(null)
 const containerSize = reactive({ width: 0, height: 0 })
 let resizeObserver: ResizeObserver | null = null
@@ -226,7 +227,7 @@ function onChartHover(payload: HoverState) {
 	hoverState.sliceIndex = payload.sliceIndex
 }
 
-watch([chartLabels, selectedProjects], () => {
+watch([chartLabels, chartDatasets], () => {
 	hoverState.visible = false
 	hoverState.sliceIndex = null
 })
diff --git a/apps/frontend/src/components/analytics/graph/utils.ts b/apps/frontend/src/components/analytics/graph/utils.ts
index 8788fb2a40..15e8d1a6ef 100644
--- a/apps/frontend/src/components/analytics/graph/utils.ts
+++ b/apps/frontend/src/components/analytics/graph/utils.ts
@@ -1,6 +1,12 @@
 import type { Labrinth } from '@modrinth/api-client'
 
-import type { AnalyticsDashboardProject, AnalyticsDashboardStat } from '~/providers/analytics/analytics'
+import type {
+	AnalyticsBreakdownPreset,
+	AnalyticsDashboardProject,
+	AnalyticsDashboardStat,
+} from '~/providers/analytics/analytics'
+
+import { getAnalyticsBreakdownValue } from '../breakdown'
 
 export type ChartDataset = {
 	projectId: string
@@ -36,8 +42,47 @@ export function buildChartDatasets(
 	selectedProjects: AnalyticsDashboardProject[],
 	activeStat: AnalyticsDashboardStat,
 	palette: string[],
+	selectedBreakdown: AnalyticsBreakdownPreset,
 ): ChartDataset[] {
 	const selectedProjectIds = new Set(selectedProjects.map((project) => project.id))
+	if (selectedProjectIds.size === 0) {
+		return []
+	}
+
+	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
+
+				const value = getMetricValue(point, activeStat)
+				if (value === 0) continue
+
+				const breakdownValue = getAnalyticsBreakdownValue(point, selectedBreakdown)
+
+				let breakdownData = dataByBreakdown.get(breakdownValue)
+				if (!breakdownData) {
+					breakdownData = new Array(timeSlices.length).fill(0)
+					dataByBreakdown.set(breakdownValue, breakdownData)
+				}
+
+				breakdownData[sliceIndex] += value
+			}
+		})
+
+		return Array.from(dataByBreakdown.entries()).map(([breakdownValue, data], index) => {
+			const color = palette[index % palette.length]
+			return {
+				projectId: `breakdown:${breakdownValue}`,
+				label: breakdownValue,
+				data,
+				borderColor: color,
+				backgroundColor: color,
+			}
+		})
+	}
 
 	const dataByProjectId = new Map<string, number[]>()
 	for (const project of selectedProjects) {
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..cf46b9bbf2
--- /dev/null
+++ b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
@@ -0,0 +1,397 @@
+<template>
+	<section
+		class="flex flex-col gap-4 rounded-2xl border border-solid border-surface-5 bg-surface-3 p-4"
+	>
+		<div class="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
+			<div class="text-xl font-semibold text-contrast">Breakdown</div>
+
+			<div class="flex flex-wrap items-center gap-2">
+				<button
+					type="button"
+					class="inline-flex items-center rounded-xl border border-solid px-3 py-1.5 text-sm font-semibold transition-colors"
+					:class="
+						tableMode === 'date_breakdown'
+							? 'border-brand bg-highlight-green text-brand'
+							: 'border-surface-5 bg-surface-3 text-primary hover:bg-surface-4'
+					"
+					@click="tableMode = 'date_breakdown'"
+				>
+					Date + Breakdown
+				</button>
+				<button
+					v-if="showBreakdownOnlyMode"
+					type="button"
+					class="inline-flex items-center rounded-xl border border-solid px-3 py-1.5 text-sm font-semibold transition-colors"
+					:class="
+						tableMode === 'breakdown_only'
+							? 'border-brand bg-highlight-green text-brand'
+							: 'border-surface-5 bg-surface-3 text-primary hover:bg-surface-4'
+					"
+					@click="tableMode = 'breakdown_only'"
+				>
+					Breakdown only
+				</button>
+				<button
+					type="button"
+					class="inline-flex items-center gap-2 rounded-xl border border-solid px-3 py-1.5 text-sm font-semibold transition-colors"
+					:class="
+						sortedRows.length > 0
+							? 'border-surface-5 bg-surface-3 text-primary hover:bg-surface-4'
+							: 'cursor-not-allowed border-surface-5 bg-surface-2 text-secondary'
+					"
+					:disabled="sortedRows.length === 0"
+					@click="downloadCsv"
+				>
+					<DownloadIcon class="size-4" />
+					Export CSV
+				</button>
+			</div>
+		</div>
+
+		<Table
+			v-model:sort-column="sortColumn"
+			v-model:sort-direction="sortDirection"
+			:columns="columns"
+			:data="sortedRows"
+			row-key="id"
+		>
+			<template #cell-date="{ value }">
+				<span class="text-primary">{{ value }}</span>
+			</template>
+			<template #cell-breakdown="{ value }">
+				<span class="text-primary">{{ 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>
+		</Table>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { Labrinth } from '@modrinth/api-client'
+import { DownloadIcon } from '@modrinth/assets'
+import { Table, type TableColumn, useFormatNumber } from '@modrinth/ui'
+
+import type { AnalyticsBreakdownPreset } from '~/providers/analytics/analytics'
+import { injectAnalyticsDashboardContext } from '~/providers/analytics/analytics'
+
+import { getAnalyticsBreakdownValue } from '../breakdown'
+import { formatBucketRange, getSliceBucketRange, getSliceCount } 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
+	dateStartMs: number
+	breakdown: string
+	views: number
+	downloads: number
+	revenue: number
+	playtime: number
+}
+
+const analyticsDashboardContext = injectAnalyticsDashboardContext()
+const formatNumber = useFormatNumber()
+
+const tableMode = ref<TableMode>('date_breakdown')
+const sortColumn = ref<TableColumnKey | undefined>('date')
+const sortDirection = ref<SortDirection>('asc')
+
+const showBreakdownOnlyMode = computed(
+	() => analyticsDashboardContext.selectedProjectIds.value.length > 1,
+)
+
+watch(
+	showBreakdownOnlyMode,
+	(nextValue) => {
+		if (!nextValue && tableMode.value === 'breakdown_only') {
+			tableMode.value = 'date_breakdown'
+		}
+	},
+	{ immediate: true },
+)
+
+watch(tableMode, (nextMode) => {
+	if (nextMode === 'breakdown_only' && sortColumn.value === 'date') {
+		sortColumn.value = 'breakdown'
+		sortDirection.value = 'asc'
+	}
+})
+
+const selectedProjectIdSet = computed(
+	() => new Set(analyticsDashboardContext.selectedProjectIds.value),
+)
+
+const tableRows = computed<AnalyticsTableRow[]>(() => {
+	const fetchRequest = analyticsDashboardContext.fetchRequest.value
+	const timeSlices = analyticsDashboardContext.timeSlices.value
+	const selectedBreakdown = analyticsDashboardContext.selectedBreakdown.value
+
+	if (!fetchRequest || timeSlices.length === 0 || selectedProjectIdSet.value.size === 0) {
+		return []
+	}
+
+	const nextRows = new Map<string, AnalyticsTableRow>()
+	const sliceCount = getSliceCount(fetchRequest.time_range, timeSlices.length)
+
+	timeSlices.forEach((slice, sliceIndex) => {
+		const bucketRange = getSliceBucketRange(fetchRequest.time_range, sliceCount, sliceIndex)
+		const dateStartMs = bucketRange.start.getTime()
+		const dateLabel = formatBucketRange(bucketRange.start, bucketRange.end)
+
+		for (const point of slice) {
+			if (!('source_project' in point)) {
+				continue
+			}
+
+			if (!selectedProjectIdSet.value.has(point.source_project)) {
+				continue
+			}
+
+			const breakdown = getBreakdownValue(point, selectedBreakdown)
+			const rowId =
+				tableMode.value === 'date_breakdown' ? `${dateStartMs}::${breakdown}` : breakdown
+
+			let row = nextRows.get(rowId)
+
+			if (!row) {
+				row = {
+					id: rowId,
+					date: tableMode.value === 'date_breakdown' ? dateLabel : '',
+					dateStartMs: tableMode.value === 'date_breakdown' ? dateStartMs : 0,
+					breakdown,
+					views: 0,
+					downloads: 0,
+					revenue: 0,
+					playtime: 0,
+				}
+				nextRows.set(rowId, row)
+			}
+
+			addMetricToRow(row, point)
+		}
+	})
+
+	return Array.from(nextRows.values())
+})
+
+const columns = computed<TableColumn<TableColumnKey>[]>(() => {
+	const nextColumns: TableColumn<TableColumnKey>[] = []
+
+	if (tableMode.value === 'date_breakdown') {
+		nextColumns.push({
+			key: 'date',
+			label: 'Date',
+			enableSorting: true,
+		})
+	}
+
+	nextColumns.push(
+		{
+			key: 'breakdown',
+			label: 'Breakdown',
+			enableSorting: true,
+		},
+		{
+			key: 'views',
+			label: 'Views',
+			enableSorting: true,
+			align: 'right',
+		},
+		{
+			key: 'downloads',
+			label: 'Downloads',
+			enableSorting: true,
+			align: 'right',
+		},
+		{
+			key: 'revenue',
+			label: 'Revenue',
+			enableSorting: true,
+			align: 'right',
+		},
+		{
+			key: 'playtime',
+			label: 'Playtime',
+			enableSorting: true,
+			align: 'right',
+		},
+	)
+
+	return nextColumns
+})
+
+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.dateStartMs - right.dateStartMs
+		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 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.dateStartMs - right.dateStartMs
+		case 'breakdown':
+			return left.breakdown.localeCompare(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 getCsvCellValue(row: AnalyticsTableRow, key: TableColumnKey): string | number {
+	switch (key) {
+		case 'date':
+			return row.date
+		case 'breakdown':
+			return 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-${tableMode.value === 'breakdown_only' ? 'breakdown-only' : 'date-breakdown'}.csv`,
+	)
+	downloadLink.style.visibility = 'hidden'
+
+	document.body.appendChild(downloadLink)
+	downloadLink.click()
+	document.body.removeChild(downloadLink)
+
+	URL.revokeObjectURL(url)
+}
+</script>

From 5297b173dc54e6a192b00e62edbf4b9fb536e9da Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 11:15:57 -0600
Subject: [PATCH 10/20] fix: date display to show time conditionally

---
 .../analytics/graph/AnalyticsGraph.vue        | 11 ++--
 .../src/components/analytics/graph/utils.ts   | 50 ++++++++-----------
 .../analytics/table/AnalyticsTable.vue        | 26 ++++++----
 3 files changed, 47 insertions(+), 40 deletions(-)

diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
index c2d3edd720..97eec57bc7 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
@@ -101,10 +101,11 @@ import AnalyticsChartTooltip, { type AnalyticsChartTooltipEntry } from './Analyt
 import {
 	buildChartDatasets,
 	buildTimeAxisLabels,
-	formatBucketRange,
+	formatBucketEndLabel,
 	formatMetricValue,
 	getSliceBucketRange,
 	getSliceCount,
+	isTimeRelevantForGroupBy,
 } from './utils'
 
 type DataMode = 'events'
@@ -162,10 +163,14 @@ const sliceCount = computed(() => {
 	return getSliceCount(fetchRequest.time_range, fallback)
 })
 
+const showTimeInBucketLabel = computed(() =>
+	isTimeRelevantForGroupBy(analyticsDashboardContext.selectedGroupBy.value),
+)
+
 const chartLabels = computed(() => {
 	const fetchRequest = analyticsDashboardContext.fetchRequest.value
 	if (!fetchRequest) return []
-	return buildTimeAxisLabels(fetchRequest.time_range, sliceCount.value)
+	return buildTimeAxisLabels(fetchRequest.time_range, sliceCount.value, showTimeInBucketLabel.value)
 })
 
 const chartDatasets = computed(() =>
@@ -240,7 +245,7 @@ const hoverBucketRange = computed(() => {
 
 const hoverRangeLabel = computed(() => {
 	if (!hoverBucketRange.value) return ''
-	return formatBucketRange(hoverBucketRange.value.start, hoverBucketRange.value.end)
+	return formatBucketEndLabel(hoverBucketRange.value.end, showTimeInBucketLabel.value)
 })
 
 const hoverEntries = computed<AnalyticsChartTooltipEntry[]>(() => {
diff --git a/apps/frontend/src/components/analytics/graph/utils.ts b/apps/frontend/src/components/analytics/graph/utils.ts
index 15e8d1a6ef..544a6cc0d7 100644
--- a/apps/frontend/src/components/analytics/graph/utils.ts
+++ b/apps/frontend/src/components/analytics/graph/utils.ts
@@ -4,6 +4,7 @@ import type {
 	AnalyticsBreakdownPreset,
 	AnalyticsDashboardProject,
 	AnalyticsDashboardStat,
+	AnalyticsGroupByPreset,
 } from '~/providers/analytics/analytics'
 
 import { getAnalyticsBreakdownValue } from '../breakdown'
@@ -16,8 +17,6 @@ export type ChartDataset = {
 	backgroundColor: string
 }
 
-const DAY_MS = 24 * 60 * 60 * 1000
-
 export function getMetricValue(
 	point: Labrinth.Analytics.v3.ProjectAnalytics,
 	activeStat: AnalyticsDashboardStat,
@@ -148,25 +147,23 @@ export function getSliceBucketRange(
 export function buildTimeAxisLabels(
 	timeRange: Labrinth.Analytics.v3.TimeRange,
 	sliceCount: number,
+	includeTime: boolean,
 ): 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 formatter = getTickFormatter(totalMs)
+	const formatter = getBucketEndFormatter(includeTime)
 
 	const labels: string[] = []
 	for (let i = 0; i < sliceCount; i++) {
-		labels.push(formatter.format(new Date(startMs + i * bucketMs)))
+		labels.push(formatter.format(new Date(startMs + (i + 1) * bucketMs)))
 	}
 	return labels
 }
 
-function getTickFormatter(totalMs: number): Intl.DateTimeFormat {
-	if (totalMs <= 2 * DAY_MS) {
-		return new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: '2-digit' })
-	}
-	if (totalMs < 31 * DAY_MS) {
+function getBucketEndFormatter(includeTime: boolean): Intl.DateTimeFormat {
+	if (includeTime) {
 		return new Intl.DateTimeFormat(undefined, {
 			month: 'short',
 			day: 'numeric',
@@ -177,27 +174,24 @@ function getTickFormatter(totalMs: number): Intl.DateTimeFormat {
 	return new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' })
 }
 
-export function formatBucketRange(start: Date, end: Date): string {
-	const timeFormatter = new Intl.DateTimeFormat(undefined, {
-		hour: 'numeric',
-		minute: '2-digit',
-	})
-	const dateTimeFormatter = new Intl.DateTimeFormat(undefined, {
-		month: 'short',
-		day: 'numeric',
-		hour: 'numeric',
-		minute: '2-digit',
-	})
-
-	const sameDay =
-		start.getFullYear() === end.getFullYear() &&
-		start.getMonth() === end.getMonth() &&
-		start.getDate() === end.getDate()
+export function isTimeRelevantForGroupBy(groupBy: AnalyticsGroupByPreset): boolean {
+	return groupBy === '1h' || groupBy === '6h'
+}
 
-	if (sameDay) {
-		return `${timeFormatter.format(start)} – ${timeFormatter.format(end)}`
+export function formatBucketEndLabel(end: Date, includeTime: boolean): string {
+	if (includeTime) {
+		return new Intl.DateTimeFormat(undefined, {
+			month: 'short',
+			day: 'numeric',
+			hour: 'numeric',
+			minute: '2-digit',
+		}).format(end)
 	}
-	return `${dateTimeFormatter.format(start)} – ${dateTimeFormatter.format(end)}`
+
+	return new Intl.DateTimeFormat(undefined, {
+		month: 'short',
+		day: 'numeric',
+	}).format(end)
 }
 
 export function formatMetricValue(
diff --git a/apps/frontend/src/components/analytics/table/AnalyticsTable.vue b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
index cf46b9bbf2..00d4595d89 100644
--- a/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
+++ b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
@@ -86,7 +86,12 @@ import type { AnalyticsBreakdownPreset } from '~/providers/analytics/analytics'
 import { injectAnalyticsDashboardContext } from '~/providers/analytics/analytics'
 
 import { getAnalyticsBreakdownValue } from '../breakdown'
-import { formatBucketRange, getSliceBucketRange, getSliceCount } from '../graph/utils'
+import {
+	formatBucketEndLabel,
+	getSliceBucketRange,
+	getSliceCount,
+	isTimeRelevantForGroupBy,
+} from '../graph/utils'
 
 type TableMode = 'date_breakdown' | 'breakdown_only'
 type SortDirection = 'asc' | 'desc'
@@ -95,7 +100,7 @@ type TableColumnKey = 'date' | 'breakdown' | 'views' | 'downloads' | 'revenue' |
 type AnalyticsTableRow = {
 	id: string
 	date: string
-	dateStartMs: number
+	dateMs: number
 	breakdown: string
 	views: number
 	downloads: number
@@ -135,6 +140,10 @@ const selectedProjectIdSet = computed(
 	() => new Set(analyticsDashboardContext.selectedProjectIds.value),
 )
 
+const showTimeInBucketLabel = computed(() =>
+	isTimeRelevantForGroupBy(analyticsDashboardContext.selectedGroupBy.value),
+)
+
 const tableRows = computed<AnalyticsTableRow[]>(() => {
 	const fetchRequest = analyticsDashboardContext.fetchRequest.value
 	const timeSlices = analyticsDashboardContext.timeSlices.value
@@ -149,8 +158,8 @@ const tableRows = computed<AnalyticsTableRow[]>(() => {
 
 	timeSlices.forEach((slice, sliceIndex) => {
 		const bucketRange = getSliceBucketRange(fetchRequest.time_range, sliceCount, sliceIndex)
-		const dateStartMs = bucketRange.start.getTime()
-		const dateLabel = formatBucketRange(bucketRange.start, bucketRange.end)
+		const dateMs = bucketRange.end.getTime()
+		const dateLabel = formatBucketEndLabel(bucketRange.end, showTimeInBucketLabel.value)
 
 		for (const point of slice) {
 			if (!('source_project' in point)) {
@@ -162,8 +171,7 @@ const tableRows = computed<AnalyticsTableRow[]>(() => {
 			}
 
 			const breakdown = getBreakdownValue(point, selectedBreakdown)
-			const rowId =
-				tableMode.value === 'date_breakdown' ? `${dateStartMs}::${breakdown}` : breakdown
+			const rowId = tableMode.value === 'date_breakdown' ? `${dateMs}::${breakdown}` : breakdown
 
 			let row = nextRows.get(rowId)
 
@@ -171,7 +179,7 @@ const tableRows = computed<AnalyticsTableRow[]>(() => {
 				row = {
 					id: rowId,
 					date: tableMode.value === 'date_breakdown' ? dateLabel : '',
-					dateStartMs: tableMode.value === 'date_breakdown' ? dateStartMs : 0,
+					dateMs: tableMode.value === 'date_breakdown' ? dateMs : 0,
 					breakdown,
 					views: 0,
 					downloads: 0,
@@ -250,7 +258,7 @@ const sortedRows = computed<AnalyticsTableRow[]>(() => {
 			return primaryResult * directionFactor
 		}
 
-		const dateResult = left.dateStartMs - right.dateStartMs
+		const dateResult = left.dateMs - right.dateMs
 		if (dateResult !== 0) {
 			return dateResult * directionFactor
 		}
@@ -314,7 +322,7 @@ function getSortComparison(
 ): number {
 	switch (column) {
 		case 'date':
-			return left.dateStartMs - right.dateStartMs
+			return left.dateMs - right.dateMs
 		case 'breakdown':
 			return left.breakdown.localeCompare(right.breakdown, undefined, { sensitivity: 'base' })
 		case 'views':

From fbc996b7b230ee0258f520d3fbd69d740ac6e98a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 11:19:38 -0600
Subject: [PATCH 11/20] fix: query builder disable group-by options if not
 relavant

---
 .../analytics/query-builder/QueryBuilder.vue  | 55 ++++++++++++++++---
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index 0f0d220fb5..df3b0fb1e3 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -178,13 +178,17 @@ const timeframeOptions: ComboboxOption<AnalyticsTimeframePreset>[] = [
 	{ value: 'all_time', label: 'All time' },
 ]
 
-const groupByOptions: ComboboxOption<AnalyticsGroupByPreset>[] = [
-	{ value: '1h', label: '1h' },
-	{ value: '6h', label: '6h' },
-	{ value: 'day', label: 'Day' },
-	{ value: 'week', label: 'Week' },
-	{ value: 'month', label: 'Month' },
-	{ value: 'year', label: 'Year' },
+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>[] = [
@@ -439,6 +443,43 @@ function ensureMinimumRange(start: Date, end: Date): { start: Date; end: Date }
 	return { start, end }
 }
 
+const selectedTimeframeDurationMinutes = computed(() => {
+	const rawRange = getTimeRangeForPreset(selectedTimeframe.value)
+	const { start, end } = ensureMinimumRange(rawRange.start, rawRange.end)
+	const durationMs = end.getTime() - start.getTime()
+	return Math.max(1, Math.floor(durationMs / (60 * 1000)))
+})
+
+const groupByOptions = computed<ComboboxOption<AnalyticsGroupByPreset>[]>(() => {
+	const options = groupByPresetOptions.map((option) => ({
+		value: option.value,
+		label: option.label,
+		disabled: option.minutes >= selectedTimeframeDurationMinutes.value,
+	}))
+
+	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].reverse().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))
 }

From 6ce8be3b5795cf1325cee62d17ea54c25044bbdc Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 11:25:20 -0600
Subject: [PATCH 12/20] feat: style improvements

---
 .../src/components/analytics/AnalyticsDashboard.vue        | 7 +++++--
 .../src/components/analytics/stat-cards/StatCard.vue       | 6 +++---
 .../src/components/analytics/table/AnalyticsTable.vue      | 3 ++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
index c8c1315d6c..e3f1d6bf21 100644
--- a/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
+++ b/apps/frontend/src/components/analytics/AnalyticsDashboard.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="flex flex-col gap-4">
+	<div class="flex flex-col gap-4 pb-20">
 		<QueryBuilder />
 		<StatCards />
 		<AnalyticsGraph />
@@ -10,7 +10,10 @@
 <script setup lang="ts">
 import { injectProjectPageContext } from '@modrinth/ui'
 
-import { createAnalyticsDashboardContext, provideAnalyticsDashboardContext } from '~/providers/analytics/analytics'
+import {
+	createAnalyticsDashboardContext,
+	provideAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
 import { injectOrganizationContext } from '~/providers/organization-context'
 
 import AnalyticsGraph from './graph/AnalyticsGraph.vue'
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCard.vue b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
index c9c0465824..2d75be6721 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
@@ -10,7 +10,7 @@
 		@click="emit('click')"
 	>
 		<div class="flex items-center justify-between gap-3">
-			<div class="text-sm font-semibold text-primary">
+			<div class="text-base font-semibold text-primary">
 				{{ label }}
 			</div>
 
@@ -27,8 +27,8 @@
 			</div>
 		</div>
 
-		<div class="flex flex-col gap-2">
-			<div class="text-3xl font-extrabold leading-none text-contrast">
+		<div class="flex flex-col gap-2.5">
+			<div class="text-3xl font-semibold leading-none text-contrast">
 				{{ statLabel }}
 			</div>
 
diff --git a/apps/frontend/src/components/analytics/table/AnalyticsTable.vue b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
index 00d4595d89..f98b850da3 100644
--- a/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
+++ b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
@@ -59,7 +59,7 @@
 				<span class="text-primary">{{ value }}</span>
 			</template>
 			<template #cell-breakdown="{ value }">
-				<span class="text-primary">{{ value }}</span>
+				<span class="capitalize text-primary">{{ value }}</span>
 			</template>
 			<template #cell-views="{ row }">
 				<span>{{ formatInteger(row.views) }}</span>
@@ -204,6 +204,7 @@ const columns = computed<TableColumn<TableColumnKey>[]>(() => {
 			key: 'date',
 			label: 'Date',
 			enableSorting: true,
+			width: '20%',
 		})
 	}
 

From 270e73fd048e07075474097296a34c6a5901f51a Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 11:43:04 -0600
Subject: [PATCH 13/20] remove: events toggle button for now since it does
 nothing

---
 .../analytics/graph/AnalyticsGraph.vue        | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
index 97eec57bc7..b5da70341a 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
@@ -10,21 +10,6 @@
 					</div>
 
 					<div class="flex items-center gap-2">
-						<button
-							v-for="dataModeOption in dataModeOptions"
-							:key="dataModeOption.value"
-							type="button"
-							class="inline-flex items-center rounded-xl border border-solid px-3 py-1.5 text-sm font-semibold transition-colors"
-							:class="
-								activeDataMode === dataModeOption.value
-									? 'border-brand bg-highlight-green text-brand'
-									: 'border-surface-5 bg-surface-3 text-primary hover:bg-surface-4'
-							"
-							@click="activeDataMode = dataModeOption.value"
-						>
-							{{ dataModeOption.label }}
-						</button>
-
 						<div class="w-52">
 							<Chips
 								v-model="activeViewMode"
@@ -108,17 +93,13 @@ import {
 	isTimeRelevantForGroupBy,
 } from './utils'
 
-type DataMode = 'events'
 type ViewMode = 'line' | 'area' | 'bar'
 
 const analyticsDashboardContext = injectAnalyticsDashboardContext()
 const formatNumber = useFormatNumber()
 
-const activeDataMode = ref<DataMode>('events')
 const activeViewMode = ref<ViewMode>('line')
 
-const dataModeOptions: { value: DataMode; label: string }[] = [{ value: 'events', label: 'Events' }]
-
 const viewModeLabels: Record<ViewMode, string> = {
 	line: 'Line',
 	area: 'Area',

From fd07f8e21892a8197b3d08535b4ecbdb4900713c Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 11:47:45 -0600
Subject: [PATCH 14/20] fix: type error

---
 .../components/analytics/graph/AnalyticsChart.client.vue  | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
index 84b357b03c..942ac968b0 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
@@ -16,7 +16,6 @@ import {
 	LineElement,
 	PointElement,
 	Tooltip,
-	type TooltipModel,
 } from 'chart.js'
 
 import type { AnalyticsDashboardStat } from '~/providers/analytics/analytics'
@@ -60,6 +59,11 @@ 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]
+
 function withAlpha(color: string, alpha: number): string {
 	const match = /^#([0-9a-f]{6})$/i.exec(color)
 	if (!match) return color
@@ -163,7 +167,7 @@ function buildConfig(): ChartConfiguration {
 	}
 }
 
-function handleExternalTooltip(context: { tooltip: TooltipModel<'line' | 'bar'> }) {
+function handleExternalTooltip(context: ExternalTooltipContext) {
 	const tooltip = context.tooltip
 	if (!tooltip || tooltip.opacity === 0) {
 		emit('hover', { visible: false, x: 0, y: 0, sliceIndex: null })

From 8840a1315a376d7201b7444e9571306c10772ec9 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 11:48:58 -0600
Subject: [PATCH 15/20] refactor: pnpm prepr

---
 .../analytics/graph/AnalyticsChart.client.vue |  6 +-----
 .../analytics/query-builder/QueryBuilder.vue  |  3 ++-
 .../analytics/stat-cards/StatCards.vue        |  5 ++++-
 .../src/providers/analytics/analytics.ts      | 18 +++++++++++-------
 .../providers/analytics/query-builder-url.ts  | 19 +++++++++++++------
 5 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
index 942ac968b0..a149f907aa 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsChart.client.vue
@@ -91,11 +91,7 @@ function buildDatasets() {
 			}
 		}
 
-		const lineFill: 'origin' | '-1' | false = props.fill
-			? index === 0
-				? 'origin'
-				: '-1'
-			: false
+		const lineFill: 'origin' | '-1' | false = props.fill ? (index === 0 ? 'origin' : '-1') : false
 
 		return {
 			...common,
diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index df3b0fb1e3..91903a1553 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -472,7 +472,8 @@ watch(
 			return
 		}
 
-		const fallbackOption = [...nextOptions].reverse().find((option) => !option.disabled) ?? nextOptions[0]
+		const fallbackOption =
+			[...nextOptions].reverse().find((option) => !option.disabled) ?? nextOptions[0]
 		if (fallbackOption && selectedGroupBy.value !== fallbackOption.value) {
 			selectedGroupBy.value = fallbackOption.value
 		}
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
index 312a1d3f54..51537bd8fe 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
@@ -16,7 +16,10 @@
 <script setup lang="ts">
 import { useFormatNumber } from '@modrinth/ui'
 
-import { type AnalyticsDashboardStat, injectAnalyticsDashboardContext } from '~/providers/analytics/analytics'
+import {
+	type AnalyticsDashboardStat,
+	injectAnalyticsDashboardContext,
+} from '~/providers/analytics/analytics'
 
 import StatCard from './StatCard.vue'
 
diff --git a/apps/frontend/src/providers/analytics/analytics.ts b/apps/frontend/src/providers/analytics/analytics.ts
index e68d213f1c..ad124df3e4 100644
--- a/apps/frontend/src/providers/analytics/analytics.ts
+++ b/apps/frontend/src/providers/analytics/analytics.ts
@@ -290,13 +290,17 @@ export function createAnalyticsDashboardContext(
 		{ deep: true, immediate: true },
 	)
 
-	const { data: currentTimeSliceData, isPending: currentTimeSlicePending, isFetching: currentFetching } =
-		useQuery({
-			queryKey: computed(() => ['analytics', 'dashboard', 'current', fetchRequest.value]),
-			queryFn: () => client.labrinth.analytics_v3.fetch(fetchRequest.value as Labrinth.Analytics.v3.FetchRequest),
-			enabled: computed(() => fetchRequest.value !== null),
-			placeholderData: [],
-		})
+	const {
+		data: currentTimeSliceData,
+		isPending: currentTimeSlicePending,
+		isFetching: currentFetching,
+	} = useQuery({
+		queryKey: computed(() => ['analytics', 'dashboard', 'current', fetchRequest.value]),
+		queryFn: () =>
+			client.labrinth.analytics_v3.fetch(fetchRequest.value as Labrinth.Analytics.v3.FetchRequest),
+		enabled: computed(() => fetchRequest.value !== null),
+		placeholderData: [],
+	})
 
 	const previousFetchRequest = computed(() => buildPreviousFetchRequest(fetchRequest.value))
 
diff --git a/apps/frontend/src/providers/analytics/query-builder-url.ts b/apps/frontend/src/providers/analytics/query-builder-url.ts
index f7a6e92646..e25f5b7af5 100644
--- a/apps/frontend/src/providers/analytics/query-builder-url.ts
+++ b/apps/frontend/src/providers/analytics/query-builder-url.ts
@@ -63,7 +63,14 @@ const TIMEFRAME_PRESET_VALUES: AnalyticsTimeframePreset[] = [
 	'all_time',
 ]
 
-const GROUP_BY_PRESET_VALUES: AnalyticsGroupByPreset[] = ['1h', '6h', 'day', 'week', 'month', 'year']
+const GROUP_BY_PRESET_VALUES: AnalyticsGroupByPreset[] = [
+	'1h',
+	'6h',
+	'day',
+	'week',
+	'month',
+	'year',
+]
 
 const BREAKDOWN_PRESET_VALUES: AnalyticsBreakdownPreset[] = [
 	'none',
@@ -180,7 +187,10 @@ function normalizeQueryValue(
 	if (value === undefined || value === null) return []
 	if (Array.isArray(value)) {
 		return value
-			.filter((item): item is LocationQueryValue | LocationQueryValueRaw => item !== undefined && item !== null)
+			.filter(
+				(item): item is LocationQueryValue | LocationQueryValueRaw =>
+					item !== undefined && item !== null,
+			)
 			.map((item) => String(item))
 	}
 	return [String(value)]
@@ -280,10 +290,7 @@ export function buildAnalyticsQueryBuilderRouteQuery(
 		...currentRouteQuery,
 	} as MutableRouteQuery
 
-	const projectIdsQueryValue = areAllProjectsSelected(
-		state.selectedProjectIds,
-		availableProjectIds,
-	)
+	const projectIdsQueryValue = areAllProjectsSelected(state.selectedProjectIds, availableProjectIds)
 		? undefined
 		: serializeListQueryValue(state.selectedProjectIds)
 

From 3daa527595febbb52768f1eda582be7bda8574a4 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 12:03:22 -0600
Subject: [PATCH 16/20] feat: improve query builder styles and timeframes

---
 .../analytics/query-builder/QueryBuilder.vue  | 44 ++++++++++---------
 .../analytics/stat-cards/StatCards.vue        |  2 +-
 .../providers/analytics/query-builder-url.ts  |  8 +---
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index 91903a1553..2e3d7b340d 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -11,6 +11,7 @@
 				<MultiSelect
 					v-model="selectedProjectIds"
 					:options="projectOptions"
+					:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
 					placeholder="Select projects"
 					:searchable="projectOptions.length > 6"
 					:max-tag-rows="1"
@@ -20,25 +21,33 @@
 			</div>
 		</div>
 
-		<div class="flex items-center gap-6">
+		<div class="flex flex-wrap items-center gap-x-6 gap-y-4">
 			<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 class="w-48">
-					<Combobox v-model="selectedTimeframe" :options="timeframeOptions" />
+					<Combobox
+						v-model="selectedTimeframe"
+						:options="timeframeOptions"
+						:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
+					/>
 				</div>
 			</div>
 			<div class="flex items-center gap-2">
 				<span class="text-base font-medium text-primary">Grouped by</span>
 				<div class="w-48">
-					<Combobox v-model="selectedGroupBy" :options="groupByOptions" />
+					<Combobox
+						v-model="selectedGroupBy"
+						:options="groupByOptions"
+						:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
+					/>
 				</div>
 			</div>
 		</div>
 
-		<div class="flex items-center gap-6">
+		<div class="flex flex-wrap items-center gap-x-6 gap-y-4">
 			<div class="flex items-center gap-2">
 				<div class="flex w-32 items-center gap-2 text-primary">
 					<BlocksIcon class="size-5" />
@@ -47,7 +56,11 @@
 				<div class="flex flex-col gap-2">
 					<div class="flex flex-wrap items-center gap-2">
 						<div class="w-48">
-							<Combobox v-model="selectedBreakdown" :options="breakdownOptions" />
+							<Combobox
+								v-model="selectedBreakdown"
+								:options="breakdownOptions"
+								:max-height="QUERY_BUILDER_DROPDOWN_MAX_HEIGHT"
+							/>
 						</div>
 					</div>
 				</div>
@@ -94,7 +107,7 @@
 										<p class="mb-2 text-xs font-semibold uppercase tracking-wide text-primary">
 											{{ category.label }}
 										</p>
-										<div class="flex max-h-56 flex-col gap-2 overflow-y-auto">
+										<div class="flex max-h-[min(70vh,32rem)] flex-col gap-2 overflow-y-auto pr-1">
 											<Checkbox
 												v-for="option in category.options"
 												:key="`${category.key}-${option.value}`"
@@ -146,6 +159,7 @@ import {
 const ALL_FILTER_VALUE = '__all__'
 const MIN_RANGE_MS = 60 * 60 * 1000
 const MAX_TIME_SLICES = 1024
+const QUERY_BUILDER_DROPDOWN_MAX_HEIGHT = 500
 
 const analyticsDashboardContext = injectAnalyticsDashboardContext()
 const projects = computed(() => analyticsDashboardContext.projects.value)
@@ -167,13 +181,11 @@ const showProjectRow = computed(() => projects.value.length > 1)
 const timeframeOptions: ComboboxOption<AnalyticsTimeframePreset>[] = [
 	{ value: 'today', label: 'Today' },
 	{ value: 'yesterday', label: 'Yesterday' },
-	{ value: 'last_24_hours', label: 'Last 24 hours' },
 	{ 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_190_days', label: 'Last 190 days' },
-	{ value: 'this_month', label: 'This month' },
+	{ value: 'last_180_days', label: 'Last 180 days' },
 	{ value: 'year_to_date', label: 'Year to date' },
 	{ value: 'all_time', label: 'All time' },
 ]
@@ -353,11 +365,6 @@ function getTimeRangeForPreset(preset: AnalyticsTimeframePreset): { start: Date;
 				end: todayStart,
 			}
 		}
-		case 'last_24_hours':
-			return {
-				start: new Date(end.getTime() - 24 * 60 * 60 * 1000),
-				end,
-			}
 		case 'last_7_days':
 			return {
 				start: new Date(end.getTime() - 7 * 24 * 60 * 60 * 1000),
@@ -378,16 +385,11 @@ function getTimeRangeForPreset(preset: AnalyticsTimeframePreset): { start: Date;
 				start: new Date(end.getTime() - 90 * 24 * 60 * 60 * 1000),
 				end,
 			}
-		case 'last_190_days':
+		case 'last_180_days':
 			return {
-				start: new Date(end.getTime() - 190 * 24 * 60 * 60 * 1000),
+				start: new Date(end.getTime() - 180 * 24 * 60 * 60 * 1000),
 				end,
 			}
-		case 'this_month': {
-			const monthStart = new Date(now.getFullYear(), now.getMonth(), 1)
-			monthStart.setHours(0, 0, 0, 0)
-			return { start: monthStart, end }
-		}
 		case 'year_to_date': {
 			const yearStart = new Date(now.getFullYear(), 0, 1)
 			yearStart.setHours(0, 0, 0, 0)
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
index 51537bd8fe..e65307a50d 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-4">
+	<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
 		<StatCard
 			v-for="card in statCards"
 			:key="card.key"
diff --git a/apps/frontend/src/providers/analytics/query-builder-url.ts b/apps/frontend/src/providers/analytics/query-builder-url.ts
index e25f5b7af5..4a9991ad8e 100644
--- a/apps/frontend/src/providers/analytics/query-builder-url.ts
+++ b/apps/frontend/src/providers/analytics/query-builder-url.ts
@@ -12,13 +12,11 @@ export type AnalyticsQueryFilterCategory =
 export type AnalyticsTimeframePreset =
 	| 'today'
 	| 'yesterday'
-	| 'last_24_hours'
 	| 'last_7_days'
 	| 'last_14_days'
 	| 'last_30_days'
 	| 'last_90_days'
-	| 'last_190_days'
-	| 'this_month'
+	| 'last_180_days'
 	| 'year_to_date'
 	| 'all_time'
 
@@ -52,13 +50,11 @@ export const DEFAULT_BREAKDOWN_PRESET: AnalyticsBreakdownPreset = 'none'
 const TIMEFRAME_PRESET_VALUES: AnalyticsTimeframePreset[] = [
 	'today',
 	'yesterday',
-	'last_24_hours',
 	'last_7_days',
 	'last_14_days',
 	'last_30_days',
 	'last_90_days',
-	'last_190_days',
-	'this_month',
+	'last_180_days',
 	'year_to_date',
 	'all_time',
 ]

From b126bc475f37570b17e06fded3ef63720abf8c9d Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 12:25:02 -0600
Subject: [PATCH 17/20] feat: add table empty state

---
 packages/ui/src/components/base/Table.vue | 64 ++++++++++++++---------
 1 file changed, 39 insertions(+), 25 deletions(-)

diff --git a/packages/ui/src/components/base/Table.vue b/packages/ui/src/components/base/Table.vue
index d952a5337b..d977ac03f6 100644
--- a/packages/ui/src/components/base/Table.vue
+++ b/packages/ui/src/components/base/Table.vue
@@ -45,36 +45,50 @@
 				</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>
+				<tr v-if="data.length === 0" class="bg-surface-2">
 					<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"
+						:colspan="Math.max(columns.length + (showSelection ? 1 : 0), 1)"
+						class="border-solid border-0 border-t border-surface-5 p-0"
 					>
-						<slot
-							:name="`cell-${column.key}`"
-							:row="row"
-							:value="row[column.key]"
-							:column="column"
-							:index="rowIndex"
-						>
-							{{ row[column.key] ?? '' }}
+						<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-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] ?? '' }}
+							</slot>
+						</td>
+					</tr>
+				</template>
 			</tbody>
 		</table>
 	</div>

From d5239bd5208ad00e80a7e630fe1f776cd4276818 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 12:53:56 -0600
Subject: [PATCH 18/20] feat: implement disabled statcard for non-applicable
 ones

---
 .../analytics/stat-cards/StatCard.vue         | 102 ++++++++++++------
 .../analytics/stat-cards/StatCards.vue        |  18 ++++
 .../src/providers/analytics/analytics.ts      |  61 +++++++++++
 3 files changed, 146 insertions(+), 35 deletions(-)

diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCard.vue b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
index 2d75be6721..93c0d14393 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCard.vue
@@ -1,49 +1,92 @@
 <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-4 text-left transition-colors"
-		:class="
-			active
-				? 'cursor-default border-brand bg-highlight-green'
-				: 'border-surface-5 bg-surface-3 hover:bg-surface-4 active:scale-95'
-		"
+		: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-semibold text-primary">
+			<div
+				class="text-base font-semibold"
+				:class="{
+					'text-secondary': disabled,
+					'text-primary': !disabled,
+				}"
+			>
 				{{ label }}
 			</div>
 
 			<div
 				class="inline-flex size-8 items-center justify-center rounded-lg border border-solid"
-				:class="active ? 'border-brand bg-brand-highlight' : 'border-surface-5 bg-surface-4'"
+				:class="{
+					'border-surface-5 bg-surface-3': disabled,
+					'border-brand bg-brand-highlight': !disabled && active,
+					'border-surface-5 bg-surface-4': !disabled && !active,
+				}"
 			>
 				<component
 					:is="iconComponent"
 					aria-hidden="true"
 					class="size-4"
-					:class="active ? 'text-brand' : 'text-primary'"
+					: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-3xl font-semibold leading-none text-contrast">
-				{{ statLabel }}
+			<div
+				class="text-3xl font-semibold leading-none"
+				:class="{
+					'text-primary': disabled,
+					'text-contrast': !disabled,
+				}"
+			>
+				{{ disabled ? '-' : statLabel }}
 			</div>
 
-			<div class="flex items-center gap-1 text-sm">
-				<span class="inline-flex items-center gap-1 font-semibold" :class="vsPrevPeriodClass">
-					<component
-						:is="trendDirectionIcon"
-						v-if="showTrendDirectionIcon"
-						aria-hidden="true"
-						class="size-3"
-					/>
-					{{ vsPrevPeriodPercent }}
-				</span>
-				<span class="mt-px text-xs text-primary">vs prev period</span>
-			</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 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>
@@ -67,6 +110,7 @@ const props = defineProps<{
 	vsPrevPeriodPercent: string
 	icon: string
 	active?: boolean
+	disabled?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -96,21 +140,9 @@ const trendValue = computed(() => {
 	return Number.isNaN(parsed) ? 0 : parsed
 })
 
-const showTrendDirectionIcon = computed(() => trendValue.value !== 0)
+const showTrendDirectionIcon = computed(() => !props.disabled && trendValue.value !== 0)
 
 const trendDirectionIcon = computed<IconComponent>(() =>
 	trendValue.value >= 0 ? ArrowUpRightIcon : ArrowDownLeftIcon,
 )
-
-const vsPrevPeriodClass = computed(() => {
-	if (trendValue.value > 0) {
-		return 'text-green'
-	}
-
-	if (trendValue.value < 0) {
-		return 'text-red'
-	}
-
-	return 'text-primary'
-})
 </script>
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
index e65307a50d..2db8c35601 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
@@ -8,6 +8,7 @@
 			:vs-prev-period-percent="card.vsPrevPeriodPercent"
 			:icon="card.icon"
 			:active="analyticsDashboardContext.activeStat.value === card.key"
+			:disabled="card.disabled"
 			@click="analyticsDashboardContext.setActiveStat(card.key)"
 		/>
 	</div>
@@ -57,6 +58,7 @@ const statCards = computed<
 		statLabel: string
 		vsPrevPeriodPercent: string
 		icon: string
+		disabled: boolean
 	}[]
 >(() => [
 	{
@@ -65,6 +67,10 @@ const statCards = computed<
 		statLabel: formatStatNumber(analyticsDashboardContext.currentTotals.value.views),
 		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.views),
 		icon: 'eye',
+		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
+			'views',
+			analyticsDashboardContext.selectedBreakdown.value,
+		),
 	},
 	{
 		key: 'downloads',
@@ -72,6 +78,10 @@ const statCards = computed<
 		statLabel: formatStatNumber(analyticsDashboardContext.currentTotals.value.downloads),
 		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.downloads),
 		icon: 'download',
+		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
+			'downloads',
+			analyticsDashboardContext.selectedBreakdown.value,
+		),
 	},
 	{
 		key: 'revenue',
@@ -79,6 +89,10 @@ const statCards = computed<
 		statLabel: `$${formatStatNumber(analyticsDashboardContext.currentTotals.value.revenue)}`,
 		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.revenue),
 		icon: 'dollar',
+		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
+			'revenue',
+			analyticsDashboardContext.selectedBreakdown.value,
+		),
 	},
 	{
 		key: 'playtime',
@@ -86,6 +100,10 @@ const statCards = computed<
 		statLabel: `${formatStatNumber(analyticsDashboardContext.currentTotals.value.playtime / 3600)} hrs`,
 		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.playtime),
 		icon: 'clock',
+		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
+			'playtime',
+			analyticsDashboardContext.selectedBreakdown.value,
+		),
 	},
 ])
 </script>
diff --git a/apps/frontend/src/providers/analytics/analytics.ts b/apps/frontend/src/providers/analytics/analytics.ts
index ad124df3e4..5bd589391d 100644
--- a/apps/frontend/src/providers/analytics/analytics.ts
+++ b/apps/frontend/src/providers/analytics/analytics.ts
@@ -26,6 +26,26 @@ export type {
 
 export type AnalyticsDashboardStat = 'views' | 'downloads' | 'revenue' | 'playtime'
 
+const ANALYTICS_DASHBOARD_STAT_ORDER: AnalyticsDashboardStat[] = [
+	'views',
+	'downloads',
+	'revenue',
+	'playtime',
+]
+
+const ANALYTICS_RELEVANT_STATS_BY_BREAKDOWN: Record<
+	AnalyticsBreakdownPreset,
+	readonly AnalyticsDashboardStat[]
+> = {
+	none: ANALYTICS_DASHBOARD_STAT_ORDER,
+	country: ['views', 'downloads'],
+	monetization: ['views'],
+	download_source: ['downloads'],
+	download_type: ['downloads', 'playtime'],
+	loader: ['playtime'],
+	game_version: ['playtime'],
+}
+
 export interface AnalyticsDashboardProject {
 	id: string
 	name: string
@@ -61,6 +81,13 @@ export interface AnalyticsDashboardContextValue {
 	currentTotals: ComputedRef<AnalyticsDashboardTotals>
 	previousTotals: ComputedRef<AnalyticsDashboardTotals>
 	percentChanges: ComputedRef<AnalyticsDashboardPercentChanges>
+	getRelevantAnalyticsDashboardStats: (
+		breakdown: AnalyticsBreakdownPreset,
+	) => readonly AnalyticsDashboardStat[]
+	isAnalyticsDashboardStatRelevant: (
+		stat: AnalyticsDashboardStat,
+		breakdown: AnalyticsBreakdownPreset,
+	) => boolean
 	setFetchRequest: (fetchRequest: Labrinth.Analytics.v3.FetchRequest) => void
 	setActiveStat: (stat: AnalyticsDashboardStat) => void
 }
@@ -210,6 +237,34 @@ export function createAnalyticsDashboardContext(
 
 	const availableProjectIds = computed(() => projects.value.map((project) => project.id))
 
+	function getRelevantAnalyticsDashboardStats(
+		breakdown: AnalyticsBreakdownPreset,
+	): readonly AnalyticsDashboardStat[] {
+		return ANALYTICS_RELEVANT_STATS_BY_BREAKDOWN[breakdown] ?? ANALYTICS_DASHBOARD_STAT_ORDER
+	}
+
+	function isAnalyticsDashboardStatRelevant(
+		stat: AnalyticsDashboardStat,
+		breakdown: AnalyticsBreakdownPreset,
+	): boolean {
+		return getRelevantAnalyticsDashboardStats(breakdown).includes(stat)
+	}
+
+	watch(
+		[selectedBreakdown, activeStat],
+		([nextBreakdown, nextActiveStat]) => {
+			if (isAnalyticsDashboardStatRelevant(nextActiveStat, nextBreakdown)) {
+				return
+			}
+
+			const fallbackStat = getRelevantAnalyticsDashboardStats(nextBreakdown)[0]
+			if (fallbackStat && fallbackStat !== nextActiveStat) {
+				activeStat.value = fallbackStat
+			}
+		},
+		{ immediate: true },
+	)
+
 	watch(
 		projects,
 		(nextProjects) => {
@@ -361,6 +416,10 @@ export function createAnalyticsDashboardContext(
 	}
 
 	function setActiveStat(nextStat: AnalyticsDashboardStat) {
+		if (!isAnalyticsDashboardStatRelevant(nextStat, selectedBreakdown.value)) {
+			return
+		}
+
 		activeStat.value = nextStat
 	}
 
@@ -380,6 +439,8 @@ export function createAnalyticsDashboardContext(
 		currentTotals,
 		previousTotals,
 		percentChanges,
+		getRelevantAnalyticsDashboardStats,
+		isAnalyticsDashboardStatRelevant,
 		setFetchRequest,
 		setActiveStat,
 	}

From bfdb386f52cf9c080c0d9cf1f9a97e0809d17056 Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Thu, 23 Apr 2026 13:13:17 -0600
Subject: [PATCH 19/20] refactor: object destructure for context

---
 .../analytics/graph/AnalyticsGraph.vue        | 58 ++++++++++---------
 .../analytics/query-builder/QueryBuilder.vue  | 18 +++---
 .../analytics/stat-cards/StatCards.vue        | 49 +++++++---------
 .../analytics/table/AnalyticsTable.vue        | 39 +++++++------
 4 files changed, 84 insertions(+), 80 deletions(-)

diff --git a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
index b5da70341a..e7324f3fe6 100644
--- a/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
+++ b/apps/frontend/src/components/analytics/graph/AnalyticsGraph.vue
@@ -57,7 +57,7 @@
 						:stacked="isStacked"
 						:datasets="chartDatasets"
 						:labels="chartLabels"
-						:active-stat="analyticsDashboardContext.activeStat.value"
+						:active-stat="activeStat"
 						@hover="onChartHover"
 					/>
 				</ClientOnly>
@@ -95,7 +95,15 @@ import {
 
 type ViewMode = 'line' | 'area' | 'bar'
 
-const analyticsDashboardContext = injectAnalyticsDashboardContext()
+const {
+	activeStat,
+	selectedProjectIds,
+	projects,
+	fetchRequest,
+	timeSlices,
+	selectedGroupBy,
+	selectedBreakdown,
+} = injectAnalyticsDashboardContext()
 const formatNumber = useFormatNumber()
 
 const activeViewMode = ref<ViewMode>('line')
@@ -119,48 +127,46 @@ const titleByStat: Record<AnalyticsDashboardStat, string> = {
 	playtime: 'Playtime Over Time',
 }
 
-const selectedProjectIdSet = computed(
-	() => new Set(analyticsDashboardContext.selectedProjectIds.value),
-)
+const selectedProjectIdSet = computed(() => new Set(selectedProjectIds.value))
 
 const selectedProjects = computed(() =>
-	analyticsDashboardContext.projects.value.filter((project) =>
-		selectedProjectIdSet.value.has(project.id),
-	),
+	projects.value.filter((project) => selectedProjectIdSet.value.has(project.id)),
 )
 
 const legendPalette = ['#00D084', '#A78BFA', '#F59E0B', '#38BDF8', '#FB7185', '#34D399']
 
-const graphTitle = computed(() => titleByStat[analyticsDashboardContext.activeStat.value])
+const graphTitle = computed(() => titleByStat[activeStat.value])
 
 const chartType = computed<'line' | 'bar'>(() => (activeViewMode.value === 'bar' ? 'bar' : 'line'))
 const isArea = computed(() => activeViewMode.value === 'area')
 const isStacked = computed(() => activeViewMode.value === 'area' || activeViewMode.value === 'bar')
 
 const sliceCount = computed(() => {
-	const fetchRequest = analyticsDashboardContext.fetchRequest.value
-	const fallback = analyticsDashboardContext.timeSlices.value.length
-	if (!fetchRequest) return Math.max(1, fallback)
-	return getSliceCount(fetchRequest.time_range, fallback)
+	const nextFetchRequest = fetchRequest.value
+	const fallback = timeSlices.value.length
+	if (!nextFetchRequest) return Math.max(1, fallback)
+	return getSliceCount(nextFetchRequest.time_range, fallback)
 })
 
-const showTimeInBucketLabel = computed(() =>
-	isTimeRelevantForGroupBy(analyticsDashboardContext.selectedGroupBy.value),
-)
+const showTimeInBucketLabel = computed(() => isTimeRelevantForGroupBy(selectedGroupBy.value))
 
 const chartLabels = computed(() => {
-	const fetchRequest = analyticsDashboardContext.fetchRequest.value
-	if (!fetchRequest) return []
-	return buildTimeAxisLabels(fetchRequest.time_range, sliceCount.value, showTimeInBucketLabel.value)
+	const nextFetchRequest = fetchRequest.value
+	if (!nextFetchRequest) return []
+	return buildTimeAxisLabels(
+		nextFetchRequest.time_range,
+		sliceCount.value,
+		showTimeInBucketLabel.value,
+	)
 })
 
 const chartDatasets = computed(() =>
 	buildChartDatasets(
-		analyticsDashboardContext.timeSlices.value,
+		timeSlices.value,
 		selectedProjects.value,
-		analyticsDashboardContext.activeStat.value,
+		activeStat.value,
 		legendPalette,
-		analyticsDashboardContext.selectedBreakdown.value,
+		selectedBreakdown.value,
 	),
 )
 
@@ -219,9 +225,9 @@ watch([chartLabels, chartDatasets], () => {
 })
 
 const hoverBucketRange = computed(() => {
-	const fetchRequest = analyticsDashboardContext.fetchRequest.value
-	if (!fetchRequest || hoverState.sliceIndex === null) return null
-	return getSliceBucketRange(fetchRequest.time_range, sliceCount.value, hoverState.sliceIndex)
+	const nextFetchRequest = fetchRequest.value
+	if (!nextFetchRequest || hoverState.sliceIndex === null) return null
+	return getSliceBucketRange(nextFetchRequest.time_range, sliceCount.value, hoverState.sliceIndex)
 })
 
 const hoverRangeLabel = computed(() => {
@@ -238,7 +244,7 @@ const hoverEntries = computed<AnalyticsChartTooltipEntry[]>(() => {
 		color: dataset.borderColor,
 		formattedValue: formatMetricValue(
 			dataset.data[sliceIndex] ?? 0,
-			analyticsDashboardContext.activeStat.value,
+			activeStat.value,
 			formatNumber,
 		),
 	}))
diff --git a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
index 2e3d7b340d..e95dfa9476 100644
--- a/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -161,13 +161,15 @@ const MIN_RANGE_MS = 60 * 60 * 1000
 const MAX_TIME_SLICES = 1024
 const QUERY_BUILDER_DROPDOWN_MAX_HEIGHT = 500
 
-const analyticsDashboardContext = injectAnalyticsDashboardContext()
-const projects = computed(() => analyticsDashboardContext.projects.value)
-const selectedProjectIds = analyticsDashboardContext.selectedProjectIds
-const selectedTimeframe = analyticsDashboardContext.selectedTimeframe
-const selectedGroupBy = analyticsDashboardContext.selectedGroupBy
-const selectedBreakdown = analyticsDashboardContext.selectedBreakdown
-const selectedFilters = analyticsDashboardContext.selectedFilters
+const {
+	projects,
+	selectedProjectIds,
+	selectedTimeframe,
+	selectedGroupBy,
+	selectedBreakdown,
+	selectedFilters,
+	setFetchRequest,
+} = injectAnalyticsDashboardContext()
 
 const projectOptions = computed<MultiSelectOption<string>[]>(() =>
 	projects.value.map((project) => ({
@@ -600,7 +602,7 @@ const fetchRequest = computed<Labrinth.Analytics.v3.FetchRequest>(() => {
 watch(
 	fetchRequest,
 	(nextFetchRequest) => {
-		analyticsDashboardContext.setFetchRequest(nextFetchRequest)
+		setFetchRequest(nextFetchRequest)
 	},
 	{ deep: true, immediate: true },
 )
diff --git a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
index 2db8c35601..fec09526c0 100644
--- a/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
+++ b/apps/frontend/src/components/analytics/stat-cards/StatCards.vue
@@ -7,9 +7,9 @@
 			:stat-label="card.statLabel"
 			:vs-prev-period-percent="card.vsPrevPeriodPercent"
 			:icon="card.icon"
-			:active="analyticsDashboardContext.activeStat.value === card.key"
+			:active="activeStat === card.key"
 			:disabled="card.disabled"
-			@click="analyticsDashboardContext.setActiveStat(card.key)"
+			@click="setActiveStat(card.key)"
 		/>
 	</div>
 </template>
@@ -24,7 +24,14 @@ import {
 
 import StatCard from './StatCard.vue'
 
-const analyticsDashboardContext = injectAnalyticsDashboardContext()
+const {
+	activeStat,
+	setActiveStat,
+	currentTotals,
+	percentChanges,
+	selectedBreakdown,
+	isAnalyticsDashboardStatRelevant,
+} = injectAnalyticsDashboardContext()
 const formatNumber = useFormatNumber()
 
 const compactNumberFormatter = computed(
@@ -64,46 +71,34 @@ const statCards = computed<
 	{
 		key: 'views',
 		label: 'Views',
-		statLabel: formatStatNumber(analyticsDashboardContext.currentTotals.value.views),
-		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.views),
+		statLabel: formatStatNumber(currentTotals.value.views),
+		vsPrevPeriodPercent: formatPercent(percentChanges.value.views),
 		icon: 'eye',
-		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
-			'views',
-			analyticsDashboardContext.selectedBreakdown.value,
-		),
+		disabled: !isAnalyticsDashboardStatRelevant('views', selectedBreakdown.value),
 	},
 	{
 		key: 'downloads',
 		label: 'Downloads',
-		statLabel: formatStatNumber(analyticsDashboardContext.currentTotals.value.downloads),
-		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.downloads),
+		statLabel: formatStatNumber(currentTotals.value.downloads),
+		vsPrevPeriodPercent: formatPercent(percentChanges.value.downloads),
 		icon: 'download',
-		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
-			'downloads',
-			analyticsDashboardContext.selectedBreakdown.value,
-		),
+		disabled: !isAnalyticsDashboardStatRelevant('downloads', selectedBreakdown.value),
 	},
 	{
 		key: 'revenue',
 		label: 'Revenue',
-		statLabel: `$${formatStatNumber(analyticsDashboardContext.currentTotals.value.revenue)}`,
-		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.revenue),
+		statLabel: `$${formatStatNumber(currentTotals.value.revenue)}`,
+		vsPrevPeriodPercent: formatPercent(percentChanges.value.revenue),
 		icon: 'dollar',
-		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
-			'revenue',
-			analyticsDashboardContext.selectedBreakdown.value,
-		),
+		disabled: !isAnalyticsDashboardStatRelevant('revenue', selectedBreakdown.value),
 	},
 	{
 		key: 'playtime',
 		label: 'Playtime',
-		statLabel: `${formatStatNumber(analyticsDashboardContext.currentTotals.value.playtime / 3600)} hrs`,
-		vsPrevPeriodPercent: formatPercent(analyticsDashboardContext.percentChanges.value.playtime),
+		statLabel: `${formatStatNumber(currentTotals.value.playtime / 3600)} hrs`,
+		vsPrevPeriodPercent: formatPercent(percentChanges.value.playtime),
 		icon: 'clock',
-		disabled: !analyticsDashboardContext.isAnalyticsDashboardStatRelevant(
-			'playtime',
-			analyticsDashboardContext.selectedBreakdown.value,
-		),
+		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
index f98b850da3..f808efd387 100644
--- a/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
+++ b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
@@ -59,7 +59,13 @@
 				<span class="text-primary">{{ value }}</span>
 			</template>
 			<template #cell-breakdown="{ value }">
-				<span class="capitalize text-primary">{{ value }}</span>
+				<span
+					class="text-primary"
+					:class="{
+						capitalize: selectedBreakdown === 'monetization',
+					}"
+					>{{ value }}</span
+				>
 			</template>
 			<template #cell-views="{ row }">
 				<span>{{ formatInteger(row.views) }}</span>
@@ -108,16 +114,15 @@ type AnalyticsTableRow = {
 	playtime: number
 }
 
-const analyticsDashboardContext = injectAnalyticsDashboardContext()
+const { selectedProjectIds, selectedGroupBy, selectedBreakdown, fetchRequest, timeSlices } =
+	injectAnalyticsDashboardContext()
 const formatNumber = useFormatNumber()
 
 const tableMode = ref<TableMode>('date_breakdown')
 const sortColumn = ref<TableColumnKey | undefined>('date')
 const sortDirection = ref<SortDirection>('asc')
 
-const showBreakdownOnlyMode = computed(
-	() => analyticsDashboardContext.selectedProjectIds.value.length > 1,
-)
+const showBreakdownOnlyMode = computed(() => selectedProjectIds.value.length > 1)
 
 watch(
 	showBreakdownOnlyMode,
@@ -136,28 +141,24 @@ watch(tableMode, (nextMode) => {
 	}
 })
 
-const selectedProjectIdSet = computed(
-	() => new Set(analyticsDashboardContext.selectedProjectIds.value),
-)
+const selectedProjectIdSet = computed(() => new Set(selectedProjectIds.value))
 
-const showTimeInBucketLabel = computed(() =>
-	isTimeRelevantForGroupBy(analyticsDashboardContext.selectedGroupBy.value),
-)
+const showTimeInBucketLabel = computed(() => isTimeRelevantForGroupBy(selectedGroupBy.value))
 
 const tableRows = computed<AnalyticsTableRow[]>(() => {
-	const fetchRequest = analyticsDashboardContext.fetchRequest.value
-	const timeSlices = analyticsDashboardContext.timeSlices.value
-	const selectedBreakdown = analyticsDashboardContext.selectedBreakdown.value
+	const nextFetchRequest = fetchRequest.value
+	const nextTimeSlices = timeSlices.value
+	const nextSelectedBreakdown = selectedBreakdown.value
 
-	if (!fetchRequest || timeSlices.length === 0 || selectedProjectIdSet.value.size === 0) {
+	if (!nextFetchRequest || nextTimeSlices.length === 0 || selectedProjectIdSet.value.size === 0) {
 		return []
 	}
 
 	const nextRows = new Map<string, AnalyticsTableRow>()
-	const sliceCount = getSliceCount(fetchRequest.time_range, timeSlices.length)
+	const sliceCount = getSliceCount(nextFetchRequest.time_range, nextTimeSlices.length)
 
-	timeSlices.forEach((slice, sliceIndex) => {
-		const bucketRange = getSliceBucketRange(fetchRequest.time_range, sliceCount, sliceIndex)
+	nextTimeSlices.forEach((slice, sliceIndex) => {
+		const bucketRange = getSliceBucketRange(nextFetchRequest.time_range, sliceCount, sliceIndex)
 		const dateMs = bucketRange.end.getTime()
 		const dateLabel = formatBucketEndLabel(bucketRange.end, showTimeInBucketLabel.value)
 
@@ -170,7 +171,7 @@ const tableRows = computed<AnalyticsTableRow[]>(() => {
 				continue
 			}
 
-			const breakdown = getBreakdownValue(point, selectedBreakdown)
+			const breakdown = getBreakdownValue(point, nextSelectedBreakdown)
 			const rowId = tableMode.value === 'date_breakdown' ? `${dateMs}::${breakdown}` : breakdown
 
 			let row = nextRows.get(rowId)

From f17b97847ae5c64b1f46a534f31b23a61a708acb Mon Sep 17 00:00:00 2001
From: tdgao <mr.trumgao@gmail.com>
Date: Fri, 24 Apr 2026 13:31:17 -0600
Subject: [PATCH 20/20] feat: filter server projects

---
 .../src/providers/analytics/analytics.ts      | 55 +++++++++++++++----
 1 file changed, 43 insertions(+), 12 deletions(-)

diff --git a/apps/frontend/src/providers/analytics/analytics.ts b/apps/frontend/src/providers/analytics/analytics.ts
index 5bd589391d..4e8ddc2d19 100644
--- a/apps/frontend/src/providers/analytics/analytics.ts
+++ b/apps/frontend/src/providers/analytics/analytics.ts
@@ -26,6 +26,13 @@ export type {
 
 export type AnalyticsDashboardStat = 'views' | 'downloads' | 'revenue' | 'playtime'
 
+const MINECRAFT_JAVA_SERVER_PROJECT_TYPE = 'minecraft_java_server'
+
+type ProjectTypeMetadata = {
+	project_type?: string | null
+	project_types?: readonly string[] | null
+}
+
 const ANALYTICS_DASHBOARD_STAT_ORDER: AnalyticsDashboardStat[] = [
 	'views',
 	'downloads',
@@ -143,6 +150,7 @@ function getPercentChange(currentValue: number, previousValue: number): number {
 function computeTotals(
 	timeSlices: Labrinth.Analytics.v3.TimeSlice[],
 	selectedProjectIds: Set<string>,
+	availableProjectIds: Set<string>,
 ): AnalyticsDashboardTotals {
 	const totals: AnalyticsDashboardTotals = {
 		views: 0,
@@ -151,13 +159,19 @@ function computeTotals(
 		playtime: 0,
 	}
 
+	if (availableProjectIds.size === 0) {
+		return totals
+	}
+
+	const effectiveProjectIds = selectedProjectIds.size > 0 ? selectedProjectIds : availableProjectIds
+
 	for (const timeSlice of timeSlices) {
 		for (const dataPoint of timeSlice) {
 			if (!('source_project' in dataPoint)) {
 				continue
 			}
 
-			if (selectedProjectIds.size > 0 && !selectedProjectIds.has(dataPoint.source_project)) {
+			if (!effectiveProjectIds.has(dataPoint.source_project)) {
 				continue
 			}
 
@@ -183,6 +197,14 @@ function computeTotals(
 	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
+}
+
 export function createAnalyticsDashboardContext(
 	options: CreateAnalyticsDashboardContextOptions,
 ): AnalyticsDashboardContextValue {
@@ -219,20 +241,24 @@ export function createAnalyticsDashboardContext(
 	const projects = computed<AnalyticsDashboardProject[]>(() => {
 		if (hasProjectContext.value && options.projectPageContext) {
 			const project = options.projectPageContext.projectV2.value
-			return project ? [{ id: project.id, name: project.title }] : []
+			return project && !isServerProject(project) ? [{ id: project.id, name: project.title }] : []
 		}
 
 		if (hasOrganizationContext.value && options.organizationContext?.projects.value) {
-			return options.organizationContext.projects.value.map((project) => ({
-				id: project.id,
-				name: project.name,
-			}))
+			return options.organizationContext.projects.value
+				.filter((project) => !isServerProject(project))
+				.map((project) => ({
+					id: project.id,
+					name: project.name,
+				}))
 		}
 
-		return (userProjects.value ?? []).map((project) => ({
-			id: project.id,
-			name: project.title,
-		}))
+		return (userProjects.value ?? [])
+			.filter((project) => !isServerProject(project))
+			.map((project) => ({
+				id: project.id,
+				name: project.title,
+			}))
 	})
 
 	const availableProjectIds = computed(() => projects.value.map((project) => project.id))
@@ -393,12 +419,17 @@ export function createAnalyticsDashboardContext(
 	)
 
 	const selectedProjectIdSet = computed(() => new Set(selectedProjectIds.value))
+	const availableProjectIdSet = computed(() => new Set(availableProjectIds.value))
 
 	const currentTotals = computed<AnalyticsDashboardTotals>(() =>
-		computeTotals(timeSlices.value, selectedProjectIdSet.value),
+		computeTotals(timeSlices.value, selectedProjectIdSet.value, availableProjectIdSet.value),
 	)
 	const previousTotals = computed<AnalyticsDashboardTotals>(() =>
-		computeTotals(previousTimeSlices.value, selectedProjectIdSet.value),
+		computeTotals(
+			previousTimeSlices.value,
+			selectedProjectIdSet.value,
+			availableProjectIdSet.value,
+		),
 	)
 
 	const percentChanges = computed<AnalyticsDashboardPercentChanges>(() => ({