+
+ {{ props.label }}
+
+
+ {{ props.suffix }}
+
+
+
+
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..58f87275e7
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/QueryBuilder.vue
@@ -0,0 +1,912 @@
+
+
+
+
+
+
+
+
diff --git a/apps/frontend/src/components/analytics/query-builder/query-filter/QueryFilter.vue b/apps/frontend/src/components/analytics/query-builder/query-filter/QueryFilter.vue
new file mode 100644
index 0000000000..05f291eab3
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/query-filter/QueryFilter.vue
@@ -0,0 +1,848 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Grouped by
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomTimeframe.vue b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomTimeframe.vue
new file mode 100644
index 0000000000..2d2e705833
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/CustomTimeframe.vue
@@ -0,0 +1,129 @@
+
+
+
+
+
+
+
+
+ {{ rangeLabel }}:
+ {{ formattedRange }}
+
+
+
+
+ No date range selected.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/frontend/src/components/analytics/query-builder/timeframe-picker/TimeFramePicker.vue b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/TimeFramePicker.vue
new file mode 100644
index 0000000000..9877f48c91
--- /dev/null
+++ b/apps/frontend/src/components/analytics/query-builder/timeframe-picker/TimeFramePicker.vue
@@ -0,0 +1,472 @@
+
+
+
+ In the last
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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..4f7464d9ed
--- /dev/null
+++ b/apps/frontend/src/components/analytics/table/AnalyticsTable.vue
@@ -0,0 +1,1187 @@
+
+
+
+
+
+
+
+
+
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 @@
-
-
-
-
+
+ Showing {{ visibleRowStart }} to {{ visibleRowEnd }} of {{ filteredRows.length }}
+
+
+
+
+
+
+
+
+
+ Fetching results...
+
+
-
-
-
-
-
-
-
-
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 @@
-
-
-
-
-
- - Error -
-
- {{ analytics.error.value }}
-
-
-
- - Loading analytics... -
-
-
-
-
-
-
-
-
-
- - - {{ capitalizeString(selectedChart) }} - - - {{ formattedCategorySubtitle }} - -
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ![]()
-
-
-
- ?
-
-
-
-
- Other
- {{ countryCodeToName(name) }}
-
- {{ formatCompactNumber(count) }}
-
-
-
-
-
-
-
-
- ![]()
-
-
-
- ?
-
-
-
-
-
- Other
- {{ countryCodeToName(name) }}
-
- {{ formatCompactNumber(count) }}
-
-
- - {{ value }} -
-
- {{ title }}
-
-
-
-
-
+
-
-
- Analytics
- -- This page shows you the analytics for your project, - {{ project.title }}. 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. -
-
+
+
+
+
+ Title
+
+
+
+
+
+
+ Announcement link
+
+
+
+
+ Open link
+
+
+
+
+
+
+ Date range
+
+
+
+ Metric
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
-
-
- Loading analytics...
-
+
{{
diff --git a/apps/frontend/src/pages/organization/[organization]/settings/analytics.vue b/apps/frontend/src/pages/organization/[organization]/settings/analytics.vue
index 081bc89587..dce239756c 100644
--- a/apps/frontend/src/pages/organization/[organization]/settings/analytics.vue
+++ b/apps/frontend/src/pages/organization/[organization]/settings/analytics.vue
@@ -1,28 +1,9 @@
+ monetization: ReadonlySet
+ userAgent: ReadonlySet
+ downloadReason: ReadonlySet
+ versionId: ReadonlySet
+ gameVersion: ReadonlySet
+ loaderType: ReadonlySet
+}
+
+interface AnalyticsDataFilterOptionSummary {
+ countries: string[]
+ downloadSources: string[]
+ downloadReasons: string[]
+ gameVersions: string[]
+ loaderTypes: string[]
+ versionIds: string[]
+ countryDownloadsByCode: Map
+}
+
+interface ProjectVersionFilterOptionSummary {
+ gameVersions: string[]
+ loaderTypes: string[]
+ versionIds: string[]
+}
+
+interface AnalyticsVersionMetadata {
+ id: string
+ versionNumber: string
+ datePublished: string
+ projectId: string
+ downloads: number
+ gameVersions: string[]
+ loaders: string[]
+}
+
+function isProjectAnalyticsPoint(
+ dataPoint: Labrinth.Analytics.v3.AnalyticsData,
+): dataPoint is Labrinth.Analytics.v3.ProjectAnalytics {
+ return 'source_project' in dataPoint
+}
+
+export interface AnalyticsDashboardContextValue {
+ hasProjectContext: ComputedRef
+ projectGroups: ComputedRef
+ projects: ComputedRef
+ selectedProjectIds: Ref
+ selectedTimeframeMode: Ref
+ selectedTimeframe: Ref
+ selectedLastTimeframeAmount: Ref
+ selectedLastTimeframeUnit: Ref
+ selectedCustomTimeframeStartDate: Ref
+ selectedCustomTimeframeEndDate: Ref
+ selectedGroupBy: Ref
+ selectedBreakdown: Ref
+ selectedFilters: Ref
+ queryRefreshTimestamp: Ref
+ queryResetToken: Ref
+ isAnalyticsQueryBuilderDefault: ComputedRef
+ fetchRequest: Ref
+ displayedSelectedProjectIds: Ref
+ displayedSelectedGroupBy: Ref
+ displayedSelectedBreakdown: Ref
+ displayedSelectedFilters: Ref
+ displayedFetchRequest: Ref
+ displayedFilterOptions: Ref
+ filterOptions: ComputedRef
+ isAnalyticsFilterOptionsLoading: ComputedRef
+ versionNumbersById: ComputedRef>
+ versionPublishedDatesById: ComputedRef>
+ versionProjectNamesById: ComputedRef>
+ versionProjectIconUrlsById: ComputedRef>
+ projectStatusById: ComputedRef>
+ availableProjectStatuses: ComputedRef
+ projectVersionDownloadsById: ComputedRef>
+ gameVersionDownloadsByVersion: ComputedRef>
+ countryDownloadsByCode: ComputedRef>
+ timeSlices: Ref
+ displayedTimeSlices: Ref
+ previousTimeSlices: Ref
+ isLoading: ComputedRef
+ isRefetching: ComputedRef
+ activeStat: Ref
+ activeGraphViewMode: Ref
+ isRatioMode: Ref
+ showChartEvents: Ref
+ hiddenGraphDatasetIds: Ref
+ isGraphDatasetSelectionActive: Ref
+ selectedGraphDatasetIds: Ref
+ currentTotals: ComputedRef
+ previousTotals: ComputedRef
+ percentChanges: ComputedRef
+ hasPreviousPeriodComparison: ComputedRef
+ getRelevantAnalyticsDashboardStats: (
+ breakdown: AnalyticsBreakdownPreset,
+ filters?: AnalyticsSelectedFilters,
+ ) => readonly AnalyticsDashboardStat[]
+ isAnalyticsDashboardStatRelevant: (
+ stat: AnalyticsDashboardStat,
+ breakdown: AnalyticsBreakdownPreset,
+ filters?: AnalyticsSelectedFilters,
+ ) => boolean
+ refreshAnalyticsQuery: () => Promise
+ resetAnalyticsQueryBuilder: () => void
+ getVersionDisplayName: (versionId: string) => string
+ getVersionPublishedDate: (versionId: string) => string | undefined
+ getVersionProjectName: (versionId: string) => string | undefined
+ getVersionProjectIconUrl: (versionId: string) => string | undefined
+ setFetchRequest: (fetchRequest: Labrinth.Analytics.v3.FetchRequest) => void
+ setActiveStat: (stat: AnalyticsDashboardStat) => void
+}
+
+export type CreateAnalyticsDashboardContextOptions = {
+ auth: Ref<{ user?: { id?: string; username?: string; role?: string } | null }>
+ projectPageContext?: ProjectPageContext | null
+ organizationContext?: OrganizationContext | null
+}
+
+export const [injectAnalyticsDashboardContext, provideAnalyticsDashboardContext] =
+ createContext('AnalyticsDashboard')
+
+type AnalyticsQueryBuilderRouteNavigationMode = 'push' | 'replace'
+
+function buildPreviousFetchRequest(
+ fetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+): Labrinth.Analytics.v3.FetchRequest | null {
+ if (!isAnalyticsFetchRequestReady(fetchRequest)) {
+ return null
+ }
+
+ const startTimestamp = new Date(fetchRequest.time_range.start).getTime()
+ const endTimestamp = new Date(fetchRequest.time_range.end).getTime()
+ const duration = endTimestamp - startTimestamp
+
+ if (!Number.isFinite(duration) || duration <= 0) {
+ return null
+ }
+
+ const previousEnd = new Date(startTimestamp)
+ const previousStart = new Date(startTimestamp - duration)
+
+ if (previousStart.getTime() < ANALYTICS_START_TIME) {
+ return null
+ }
+
+ return {
+ time_range: {
+ start: previousStart.toISOString(),
+ end: previousEnd.toISOString(),
+ resolution: fetchRequest.time_range.resolution,
+ },
+ return_metrics: fetchRequest.return_metrics,
+ project_ids: fetchRequest.project_ids,
+ }
+}
+
+function isAnalyticsFetchRequestReady(
+ fetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+): fetchRequest is AnalyticsProjectFetchRequest {
+ return Array.isArray(fetchRequest?.project_ids) && fetchRequest.project_ids.length > 0
+}
+
+function buildAnalyticsFetchRequestBatches(
+ fetchRequest: AnalyticsProjectFetchRequest,
+): AnalyticsProjectFetchRequest[] {
+ if (fetchRequest.project_ids.length <= ANALYTICS_PROJECT_IDS_FETCH_BATCH_SIZE) {
+ return [fetchRequest]
+ }
+
+ const requests: AnalyticsProjectFetchRequest[] = []
+ for (
+ let index = 0;
+ index < fetchRequest.project_ids.length;
+ index += ANALYTICS_PROJECT_IDS_FETCH_BATCH_SIZE
+ ) {
+ requests.push({
+ ...fetchRequest,
+ project_ids: fetchRequest.project_ids.slice(
+ index,
+ index + ANALYTICS_PROJECT_IDS_FETCH_BATCH_SIZE,
+ ),
+ })
+ }
+
+ return requests
+}
+
+function mergeAnalyticsTimeSlices(
+ timeSliceGroups: Labrinth.Analytics.v3.TimeSlice[][],
+): Labrinth.Analytics.v3.TimeSlice[] {
+ const mergedTimeSlices: Labrinth.Analytics.v3.TimeSlice[] = []
+
+ for (const timeSlices of timeSliceGroups) {
+ timeSlices.forEach((timeSlice, index) => {
+ if (!mergedTimeSlices[index]) {
+ mergedTimeSlices[index] = []
+ }
+
+ for (const dataPoint of timeSlice) {
+ mergedTimeSlices[index].push(dataPoint)
+ }
+ })
+ }
+
+ return mergedTimeSlices
+}
+
+function waitForAnalyticsFetchBatchDelay(): Promise {
+ return new Promise((resolve) => setTimeout(resolve, ANALYTICS_PROJECT_IDS_FETCH_BATCH_DELAY_MS))
+}
+
+async function fetchAnalyticsTimeSlices(
+ fetchRequest: AnalyticsProjectFetchRequest,
+ fetchAnalytics: (
+ request: Labrinth.Analytics.v3.FetchRequest,
+ ) => Promise,
+): Promise {
+ const fetchRequests = buildAnalyticsFetchRequestBatches(fetchRequest)
+ const timeSliceGroups: Labrinth.Analytics.v3.TimeSlice[][] = []
+
+ for (let index = 0; index < fetchRequests.length; index++) {
+ if (index > 0) {
+ await waitForAnalyticsFetchBatchDelay()
+ }
+
+ const response = await fetchAnalytics(fetchRequests[index])
+ timeSliceGroups.push(response.metrics)
+ }
+
+ return mergeAnalyticsTimeSlices(timeSliceGroups)
+}
+
+function areAnalyticsFetchRequestsEqual(
+ left: Labrinth.Analytics.v3.FetchRequest | null,
+ right: Labrinth.Analytics.v3.FetchRequest,
+): boolean {
+ return JSON.stringify(left) === JSON.stringify(right)
+}
+
+function buildAnalyticsCurrentTimeSlicesQueryKey(
+ userId: string | undefined,
+ nextFetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+) {
+ return ['analytics', 'dashboard', userId, 'current', nextFetchRequest]
+}
+
+function isRevenueHourlyGroupBy(groupBy: AnalyticsGroupByPreset): boolean {
+ return groupBy === '1h' || groupBy === '6h'
+}
+
+function buildDailyAnalyticsFetchRequest(
+ nextFetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+): Labrinth.Analytics.v3.FetchRequest | null {
+ if (!isAnalyticsFetchRequestReady(nextFetchRequest)) {
+ return null
+ }
+
+ const startTime = new Date(nextFetchRequest.time_range.start).getTime()
+ const endTime = new Date(nextFetchRequest.time_range.end).getTime()
+ const durationMs = endTime - startTime
+ if (!Number.isFinite(durationMs) || durationMs <= 0) {
+ return null
+ }
+
+ const desiredSlices = Math.max(1, Math.floor(durationMs / ANALYTICS_DAY_MS))
+
+ return {
+ ...nextFetchRequest,
+ time_range: {
+ ...nextFetchRequest.time_range,
+ resolution: {
+ slices: Math.min(ANALYTICS_MAX_TIME_SLICES, desiredSlices),
+ },
+ },
+ }
+}
+
+function buildAnalyticsFilterOptionsRequests(
+ projectIds: string[],
+ endTimestamp: string,
+): Labrinth.Analytics.v3.FetchRequest[] {
+ const buildRequest = (
+ returnMetrics: Labrinth.Analytics.v3.ReturnMetrics,
+ ): Labrinth.Analytics.v3.FetchRequest => ({
+ time_range: {
+ start: ANALYTICS_START_TIMESTAMP,
+ end: endTimestamp,
+ resolution: {
+ slices: 1,
+ },
+ },
+ project_ids: projectIds,
+ return_metrics: returnMetrics,
+ })
+
+ return [
+ buildRequest({
+ project_views: {
+ bucket_by: ['country'],
+ },
+ }),
+ buildRequest({
+ project_downloads: {
+ bucket_by: ['country'],
+ },
+ }),
+ buildRequest({
+ project_playtime: {
+ bucket_by: ['country'],
+ },
+ }),
+ buildRequest({
+ project_downloads: {
+ bucket_by: ['user_agent'],
+ },
+ }),
+ buildRequest({
+ project_downloads: {
+ bucket_by: ['reason'],
+ },
+ }),
+ ]
+}
+
+function addAnalyticsDays(date: Date, days: number): Date {
+ const nextDate = new Date(date)
+ nextDate.setDate(nextDate.getDate() + days)
+ return nextDate
+}
+
+function parseAnalyticsDateInputValue(value: string): Date | null {
+ const parsedDate = new Date(`${value}T00:00:00`)
+ return Number.isNaN(parsedDate.getTime()) ? null : parsedDate
+}
+
+function parseAnalyticsDateTimeInputValue(value: string): Date | null {
+ const parsedDate = new Date(value)
+ return Number.isNaN(parsedDate.getTime()) ? null : parsedDate
+}
+
+function getAnalyticsTimeframeDurationMs({
+ mode,
+ preset,
+ lastAmount,
+ lastUnit,
+ customStartDate,
+ customEndDate,
+ nowTimestamp,
+}: {
+ mode: AnalyticsTimeframeMode
+ preset: AnalyticsTimeframePreset
+ lastAmount: number
+ lastUnit: AnalyticsLastTimeframeUnit
+ customStartDate: string
+ customEndDate: string
+ nowTimestamp: number
+}): number {
+ if (mode === 'preset') {
+ switch (preset) {
+ case 'today':
+ case 'yesterday':
+ return 24 * 60 * 60 * 1000
+ case 'last_7_days':
+ return 7 * 24 * 60 * 60 * 1000
+ case 'last_14_days':
+ return 14 * 24 * 60 * 60 * 1000
+ case 'last_30_days':
+ return 30 * 24 * 60 * 60 * 1000
+ case 'last_90_days':
+ return 90 * 24 * 60 * 60 * 1000
+ case 'last_180_days':
+ return 180 * 24 * 60 * 60 * 1000
+ case 'year_to_date': {
+ const now = new Date(nowTimestamp)
+ const yearStart = new Date(now.getFullYear(), 0, 1)
+ yearStart.setHours(0, 0, 0, 0)
+ return now.getTime() - yearStart.getTime()
+ }
+ case 'all_time':
+ return REVENUE_MIN_TIMEFRAME_MS
+ }
+ }
+
+ if (mode === 'last') {
+ const amount = Math.max(1, Math.floor(lastAmount))
+ switch (lastUnit) {
+ case 'hours':
+ return amount * 60 * 60 * 1000
+ case 'days':
+ return amount * 24 * 60 * 60 * 1000
+ case 'weeks':
+ return amount * 7 * 24 * 60 * 60 * 1000
+ case 'months':
+ return REVENUE_MIN_TIMEFRAME_MS
+ }
+ }
+
+ if (mode === 'custom_range') {
+ const start = parseAnalyticsDateInputValue(customStartDate)
+ const inclusiveEnd = parseAnalyticsDateInputValue(customEndDate)
+ if (!start || !inclusiveEnd) {
+ return 0
+ }
+
+ return addAnalyticsDays(inclusiveEnd, 1).getTime() - start.getTime()
+ }
+
+ const start = parseAnalyticsDateTimeInputValue(customStartDate)
+ const end = parseAnalyticsDateTimeInputValue(customEndDate)
+ if (!start || !end) {
+ return 0
+ }
+
+ return end.getTime() - start.getTime()
+}
+
+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,
+ availableProjectIds: Set,
+ projectStatusById: Map,
+ filters: AnalyticsSelectedFilters,
+): AnalyticsDashboardTotals {
+ const totals: AnalyticsDashboardTotals = {
+ views: 0,
+ downloads: 0,
+ revenue: 0,
+ playtime: 0,
+ }
+
+ if (availableProjectIds.size === 0) {
+ return totals
+ }
+
+ const effectiveProjectIds = selectedProjectIds.size > 0 ? selectedProjectIds : availableProjectIds
+ const filteredProjectIds = new Set(
+ getProjectIdsMatchingStatusFilter([...effectiveProjectIds], projectStatusById, filters),
+ )
+ if (filteredProjectIds.size === 0) {
+ return totals
+ }
+ const normalizedFilters = normalizeAnalyticsSelectedFilters(filters)
+
+ for (const timeSlice of timeSlices) {
+ for (const dataPoint of timeSlice) {
+ if (!isProjectAnalyticsPoint(dataPoint)) {
+ continue
+ }
+
+ if (!filteredProjectIds.has(dataPoint.source_project)) {
+ continue
+ }
+
+ if (!doesAnalyticsPointMatchNormalizedFilters(dataPoint, normalizedFilters)) {
+ continue
+ }
+
+ switch (dataPoint.metric_kind) {
+ case 'views':
+ totals.views += dataPoint.views
+ break
+ case 'downloads':
+ totals.downloads += dataPoint.downloads
+ break
+ case 'playtime':
+ totals.playtime += dataPoint.seconds
+ break
+ case 'revenue': {
+ const value = Number.parseFloat(dataPoint.revenue)
+ totals.revenue += Number.isFinite(value) ? value : 0
+ break
+ }
+ }
+ }
+ }
+
+ return totals
+}
+
+function isServerProject(project: ProjectTypeMetadata): boolean {
+ if (project.project_type === MINECRAFT_JAVA_SERVER_PROJECT_TYPE) {
+ return true
+ }
+
+ return project.project_types?.includes(MINECRAFT_JAVA_SERVER_PROJECT_TYPE) ?? false
+}
+
+function isAnalyticsEligibleProject(
+ project: ProjectTypeMetadata & { status?: string | null },
+): boolean {
+ return !isServerProject(project) && getProjectStatusFilterValue(project.status) !== 'draft'
+}
+
+function getSingleQueryValue(value: unknown): string | undefined {
+ if (typeof value !== 'string') {
+ return undefined
+ }
+
+ const normalizedValue = value.trim()
+ return normalizedValue.length > 0 ? normalizedValue : undefined
+}
+
+function toAnalyticsDashboardProject(
+ project: AnalyticsDashboardProjectSource,
+): AnalyticsDashboardProject {
+ return {
+ id: project.id,
+ name: project.name ?? project.title ?? project.id,
+ iconUrl: project.icon_url ?? undefined,
+ downloads: project.downloads ?? 0,
+ status: getProjectStatusFilterValue(project.status),
+ }
+}
+
+function getUniqueAnalyticsDashboardProjects(
+ projects: AnalyticsDashboardProjectSource[],
+ seenProjectIds: Set,
+): AnalyticsDashboardProject[] {
+ const analyticsProjects: AnalyticsDashboardProject[] = []
+
+ for (const project of projects) {
+ if (seenProjectIds.has(project.id) || !isAnalyticsEligibleProject(project)) {
+ continue
+ }
+
+ seenProjectIds.add(project.id)
+ analyticsProjects.push(toAnalyticsDashboardProject(project))
+ }
+
+ return analyticsProjects
+}
+
+function getProjectOrganizationId(
+ project: AnalyticsDashboardUserProjectSource,
+): string | undefined {
+ return typeof project.organization === 'string' && project.organization.trim().length > 0
+ ? project.organization
+ : undefined
+}
+
+export function doesProjectStatusMatchFilters(
+ status: string | null | undefined,
+ filters: AnalyticsSelectedFilters,
+): boolean {
+ if (filters.project_status.length === 0) {
+ return true
+ }
+
+ return filters.project_status.includes(getProjectStatusFilterValue(status))
+}
+
+export function getProjectIdsMatchingStatusFilter(
+ projectIds: string[],
+ projectStatusById: Map,
+ filters: AnalyticsSelectedFilters,
+): string[] {
+ if (filters.project_status.length === 0) {
+ return projectIds
+ }
+
+ return projectIds.filter((projectId) =>
+ doesProjectStatusMatchFilters(projectStatusById.get(projectId), filters),
+ )
+}
+
+function sortStringValues(values: string[]): string[] {
+ return [...values].sort((left, right) => left.localeCompare(right))
+}
+
+function toAnalyticsVersionMetadata(
+ version: Labrinth.Versions.v3.Version,
+): AnalyticsVersionMetadata {
+ return {
+ id: version.id,
+ versionNumber: version.version_number,
+ datePublished: version.date_published,
+ projectId: version.project_id,
+ downloads: version.downloads,
+ gameVersions: [...version.game_versions],
+ loaders:
+ version.mrpack_loaders && version.mrpack_loaders.length > 0
+ ? [...version.mrpack_loaders]
+ : [...version.loaders],
+ }
+}
+
+function getProjectVersionFilterOptionSummary(
+ versions: AnalyticsVersionMetadata[],
+): ProjectVersionFilterOptionSummary {
+ const gameVersions = new Set()
+ const loaders = new Set()
+ const versionIds = new Set()
+
+ for (const version of versions) {
+ versionIds.add(version.id)
+
+ for (const gameVersion of version.gameVersions) {
+ const normalizedGameVersion = gameVersion.trim()
+ if (normalizedGameVersion.length > 0) {
+ gameVersions.add(normalizedGameVersion)
+ }
+ }
+
+ for (const loader of version.loaders) {
+ const normalizedLoader = loader.trim().toLowerCase()
+ if (normalizedLoader.length > 0 && normalizedLoader !== 'mrpack') {
+ loaders.add(normalizedLoader)
+ }
+ }
+ }
+
+ return {
+ gameVersions: sortStringValues([...gameVersions]),
+ loaderTypes: sortStringValues([...loaders]),
+ versionIds: sortStringValues([...versionIds]),
+ }
+}
+
+async function fetchAnalyticsVersionMetadata(
+ projectIds: string[],
+ getProjects: (ids: string[]) => Promise,
+ getVersions: (ids: string[]) => Promise,
+): Promise {
+ const projects = await fetchSegmentedWith(projectIds, getProjects)
+ const versionIds = sortStringValues([...new Set(projects.flatMap((project) => project.versions))])
+ return fetchAnalyticsVersionMetadataByIds(versionIds, getVersions)
+}
+
+async function fetchAnalyticsVersionMetadataByIds(
+ versionIds: string[],
+ getVersions: (ids: string[]) => Promise,
+): Promise {
+ const metadata: AnalyticsVersionMetadata[] = []
+ const segmentSize = 800
+
+ for (let index = 0; index < versionIds.length; index += segmentSize) {
+ const versions = await getVersions(versionIds.slice(index, index + segmentSize))
+ metadata.push(...versions.map(toAnalyticsVersionMetadata))
+ }
+
+ return metadata
+}
+
+function retainAvailableSelectedFilterValues(
+ values: string[],
+ availableValues: string[],
+): string[] {
+ const availableValueSet = new Set(availableValues)
+ return values.filter((value) => availableValueSet.has(value))
+}
+
+function sanitizeAnalyticsSelectedFiltersForAvailableOptions(
+ filters: AnalyticsSelectedFilters,
+ filterOptions: AnalyticsDashboardFilterOptions,
+): AnalyticsSelectedFilters {
+ return {
+ ...filters,
+ download_reason: retainAvailableSelectedFilterValues(
+ filters.download_reason,
+ filterOptions.downloadReasons,
+ ),
+ game_version: retainAvailableSelectedFilterValues(
+ filters.game_version,
+ filterOptions.gameVersions,
+ ),
+ loader_type: retainAvailableSelectedFilterValues(
+ filters.loader_type,
+ filterOptions.loaderTypes,
+ ),
+ }
+}
+
+function cloneAnalyticsSelectedFilters(
+ filters: AnalyticsSelectedFilters,
+): AnalyticsSelectedFilters {
+ return {
+ project: [...filters.project],
+ project_status: [...filters.project_status],
+ country: [...filters.country],
+ monetization: [...filters.monetization],
+ user_agent: [...filters.user_agent],
+ download_reason: [...filters.download_reason],
+ version_id: [...filters.version_id],
+ game_version: [...filters.game_version],
+ loader_type: [...filters.loader_type],
+ }
+}
+
+function cloneAnalyticsFilterOptions(
+ filterOptions: AnalyticsDashboardFilterOptions,
+): AnalyticsDashboardFilterOptions {
+ return {
+ countries: [...filterOptions.countries],
+ downloadSources: [...filterOptions.downloadSources],
+ downloadReasons: [...filterOptions.downloadReasons],
+ gameVersions: [...filterOptions.gameVersions],
+ loaderTypes: [...filterOptions.loaderTypes],
+ versionIds: [...filterOptions.versionIds],
+ }
+}
+
+function cloneAnalyticsFetchRequest(
+ fetchRequest: Labrinth.Analytics.v3.FetchRequest | null,
+): Labrinth.Analytics.v3.FetchRequest | null {
+ return fetchRequest ? JSON.parse(JSON.stringify(fetchRequest)) : null
+}
+
+function getAnalyticsDataFilterOptionSummary(
+ timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+): AnalyticsDataFilterOptionSummary {
+ const countries = new Set()
+ const downloadSources = new Set()
+ const downloadReasons = new Set()
+ const gameVersions = new Set()
+ const loaderTypes = new Set()
+ const versionIds = new Set()
+ const countryDownloadsByCode = new Map()
+
+ for (const timeSlice of timeSlices) {
+ for (const dataPoint of timeSlice) {
+ if (!isProjectAnalyticsPoint(dataPoint)) {
+ continue
+ }
+
+ if (
+ (dataPoint.metric_kind === 'views' ||
+ dataPoint.metric_kind === 'downloads' ||
+ dataPoint.metric_kind === 'playtime') &&
+ dataPoint.country
+ ) {
+ const country = dataPoint.country.trim().toUpperCase()
+ if (country.length > 0) {
+ countries.add(country)
+ if (dataPoint.metric_kind === 'downloads') {
+ countryDownloadsByCode.set(
+ country,
+ (countryDownloadsByCode.get(country) ?? 0) + dataPoint.downloads,
+ )
+ }
+ }
+ }
+
+ if (dataPoint.metric_kind === 'downloads' && dataPoint.user_agent) {
+ const downloadSource = dataPoint.user_agent.trim()
+ if (downloadSource.length > 0) {
+ downloadSources.add(downloadSource)
+ }
+ }
+
+ if (dataPoint.metric_kind === 'downloads' && dataPoint.reason) {
+ const downloadReason = dataPoint.reason.trim()
+ if (downloadReason.length > 0) {
+ downloadReasons.add(downloadReason)
+ }
+ }
+
+ if (
+ (dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+ dataPoint.game_version
+ ) {
+ const gameVersion = dataPoint.game_version.trim()
+ if (gameVersion.length > 0) {
+ gameVersions.add(gameVersion)
+ }
+ }
+
+ if (
+ (dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+ dataPoint.loader
+ ) {
+ const loader = dataPoint.loader.trim().toLowerCase()
+ if (loader.length > 0 && loader !== 'mrpack') {
+ loaderTypes.add(loader)
+ }
+ }
+
+ if (
+ (dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+ dataPoint.version_id
+ ) {
+ const versionId = dataPoint.version_id.trim()
+ if (versionId.length > 0) {
+ versionIds.add(versionId)
+ }
+ }
+ }
+ }
+
+ return {
+ countries: sortStringValues([...countries]),
+ downloadSources: sortStringValues([...downloadSources]),
+ downloadReasons: sortStringValues([...downloadReasons]),
+ gameVersions: sortStringValues([...gameVersions]),
+ loaderTypes: sortStringValues([...loaderTypes]),
+ versionIds: sortStringValues([...versionIds]),
+ countryDownloadsByCode,
+ }
+}
+
+function addVersionIdsFromTimeSlices(
+ versionIds: Set,
+ timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+) {
+ for (const timeSlice of timeSlices) {
+ for (const dataPoint of timeSlice) {
+ if (!isProjectAnalyticsPoint(dataPoint)) {
+ continue
+ }
+
+ if (
+ (dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+ dataPoint.version_id
+ ) {
+ const versionId = dataPoint.version_id.trim()
+ if (versionId.length > 0) {
+ versionIds.add(versionId)
+ }
+ }
+ }
+ }
+}
+
+function addVersionProjectNamesFromTimeSlices(
+ versionProjectNames: Map,
+ timeSlices: Labrinth.Analytics.v3.TimeSlice[],
+ projectNamesById: Map,
+) {
+ for (const timeSlice of timeSlices) {
+ for (const dataPoint of timeSlice) {
+ if (!isProjectAnalyticsPoint(dataPoint)) {
+ continue
+ }
+
+ if (
+ (dataPoint.metric_kind === 'downloads' || dataPoint.metric_kind === 'playtime') &&
+ dataPoint.version_id
+ ) {
+ const versionId = dataPoint.version_id.trim()
+ const projectName = projectNamesById.get(dataPoint.source_project)
+ if (versionId.length > 0 && projectName && !versionProjectNames.has(versionId)) {
+ versionProjectNames.set(versionId, projectName)
+ }
+ }
+ }
+ }
+}
+
+export function doesAnalyticsPointMatchFilters(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+ filters: AnalyticsSelectedFilters,
+): boolean {
+ return doesAnalyticsPointMatchNormalizedFilters(
+ dataPoint,
+ normalizeAnalyticsSelectedFilters(filters),
+ )
+}
+
+export function normalizeAnalyticsSelectedFilters(
+ filters: AnalyticsSelectedFilters,
+): NormalizedAnalyticsSelectedFilters {
+ return {
+ country: normalizeAnalyticsFilterValues(filters.country),
+ monetization: normalizeAnalyticsFilterValues(filters.monetization),
+ userAgent: normalizeAnalyticsFilterValues(filters.user_agent),
+ downloadReason: normalizeAnalyticsFilterValues(filters.download_reason),
+ versionId: normalizeAnalyticsFilterValues(filters.version_id),
+ gameVersion: normalizeAnalyticsFilterValues(filters.game_version),
+ loaderType: normalizeAnalyticsFilterValues(filters.loader_type),
+ }
+}
+
+function normalizeAnalyticsFilterValues(values: string[]): ReadonlySet {
+ const normalizedValues = new Set()
+ for (const value of values) {
+ const normalizedValue = value.trim().toLowerCase()
+ if (normalizedValue.length > 0) {
+ normalizedValues.add(normalizedValue)
+ }
+ }
+ return normalizedValues
+}
+
+export function doesAnalyticsPointMatchNormalizedFilters(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+ filters: NormalizedAnalyticsSelectedFilters,
+): boolean {
+ switch (dataPoint.metric_kind) {
+ case 'views':
+ return (
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.country,
+ getCountryFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.monetization,
+ getMonetizationFilterValue,
+ )
+ )
+ case 'downloads':
+ return (
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.country,
+ getCountryFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.monetization,
+ getMonetizationFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.userAgent,
+ getDownloadSourceFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.downloadReason,
+ getDownloadReasonFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.versionId,
+ getVersionFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.gameVersion,
+ getGameVersionFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(dataPoint, filters.loaderType, getLoaderFilterValue)
+ )
+ case 'playtime':
+ return (
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.country,
+ getCountryFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.versionId,
+ getVersionFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint,
+ filters.gameVersion,
+ getGameVersionFilterValue,
+ ) &&
+ doesAnalyticsPointMatchNormalizedFilter(dataPoint, filters.loaderType, getLoaderFilterValue)
+ )
+ case 'revenue':
+ return true
+ default:
+ return true
+ }
+}
+
+function doesAnalyticsPointMatchNormalizedFilter(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+ filterValues: ReadonlySet,
+ getPointValue: (dataPoint: Labrinth.Analytics.v3.ProjectAnalytics) => string | null | undefined,
+): boolean {
+ if (filterValues.size === 0) {
+ return true
+ }
+
+ const pointValue = getPointValue(dataPoint)
+ if (pointValue === undefined) {
+ return true
+ }
+ if (pointValue === null) {
+ return false
+ }
+
+ const normalizedPointValue = pointValue.trim().toLowerCase()
+ return filterValues.has(normalizedPointValue)
+}
+
+function getCountryFilterValue(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+ if (
+ dataPoint.metric_kind !== 'views' &&
+ dataPoint.metric_kind !== 'downloads' &&
+ dataPoint.metric_kind !== 'playtime'
+ ) {
+ return undefined
+ }
+
+ return dataPoint.country ?? null
+}
+
+function getMonetizationFilterValue(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+ if (dataPoint.metric_kind !== 'views' && dataPoint.metric_kind !== 'downloads') {
+ return undefined
+ }
+ if (typeof dataPoint.monetized !== 'boolean') {
+ return null
+ }
+
+ return dataPoint.monetized ? 'monetized' : 'unmonetized'
+}
+
+function getDownloadSourceFilterValue(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+ if (dataPoint.metric_kind !== 'downloads') {
+ return undefined
+ }
+
+ return dataPoint.user_agent ?? null
+}
+
+function getDownloadReasonFilterValue(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+ if (dataPoint.metric_kind !== 'downloads') {
+ return undefined
+ }
+
+ return dataPoint.reason ?? null
+}
+
+function getVersionFilterValue(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+ if (dataPoint.metric_kind !== 'downloads' && dataPoint.metric_kind !== 'playtime') {
+ return undefined
+ }
+
+ return dataPoint.version_id ?? null
+}
+
+function getGameVersionFilterValue(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+ if (dataPoint.metric_kind !== 'downloads' && dataPoint.metric_kind !== 'playtime') {
+ return undefined
+ }
+
+ return dataPoint.game_version ?? null
+}
+
+function getLoaderFilterValue(
+ dataPoint: Labrinth.Analytics.v3.ProjectAnalytics,
+): string | null | undefined {
+ if (dataPoint.metric_kind !== 'downloads' && dataPoint.metric_kind !== 'playtime') {
+ return undefined
+ }
+
+ return dataPoint.loader ?? null
+}
+
+export function createAnalyticsDashboardContext(
+ options: CreateAnalyticsDashboardContextOptions,
+): AnalyticsDashboardContextValue {
+ const client = injectModrinthClient()
+ const queryClient = useQueryClient()
+ const route = useRoute()
+ const router = useRouter()
+ const initialQueryState = readAnalyticsQueryBuilderState(route.query, [])
+ const initialGraphState = readAnalyticsGraphState(route.query)
+
+ const activeStat = ref(initialGraphState.activeStat)
+ const activeGraphViewMode = ref(initialGraphState.activeGraphViewMode)
+ const isRatioMode = ref(initialGraphState.isRatioMode)
+ const showChartEvents = ref(initialGraphState.showChartEvents)
+ const hiddenGraphDatasetIds = ref(initialGraphState.hiddenGraphDatasetIds)
+ const isGraphDatasetSelectionActive = ref(false)
+ const selectedGraphDatasetIds = ref([])
+ const selectedProjectIds = ref(initialQueryState.selectedProjectIds)
+ const selectedTimeframeMode = ref(initialQueryState.selectedTimeframeMode)
+ const selectedTimeframe = ref(initialQueryState.selectedTimeframe)
+ const selectedLastTimeframeAmount = ref(initialQueryState.selectedLastTimeframeAmount)
+ const selectedLastTimeframeUnit = ref(
+ initialQueryState.selectedLastTimeframeUnit,
+ )
+ const selectedCustomTimeframeStartDate = ref(
+ initialQueryState.selectedCustomTimeframeStartDate,
+ )
+ const selectedCustomTimeframeEndDate = ref(
+ initialQueryState.selectedCustomTimeframeEndDate,
+ )
+ const selectedGroupBy = ref(initialQueryState.selectedGroupBy)
+ const selectedBreakdown = ref(initialQueryState.selectedBreakdown)
+ const selectedFilters = ref(initialQueryState.selectedFilters)
+ const queryRefreshTimestamp = ref(Date.now())
+ const queryResetToken = ref(0)
+ const fetchRequest = ref(null)
+ let revenueHourlyGroupByBeforeOverride: AnalyticsGroupByPreset | null = null
+ let nextAnalyticsRouteNavigationMode: AnalyticsQueryBuilderRouteNavigationMode = 'replace'
+
+ const hasProjectContext = computed(() => Boolean(options.projectPageContext))
+ const hasOrganizationContext = computed(
+ () => !hasProjectContext.value && Boolean(options.organizationContext),
+ )
+ const isDashboardAnalyticsRoute = computed(
+ () => route.path.replace(/\/$/, '') === '/dashboard/analytics',
+ )
+ const requestedDashboardUserId = computed(() => {
+ if (!isDashboardAnalyticsRoute.value || options.auth.value.user?.role !== 'admin') {
+ return undefined
+ }
+
+ return getSingleQueryValue(route.query.user)
+ })
+ const effectiveUserId = computed(
+ () => requestedDashboardUserId.value ?? options.auth.value.user?.id,
+ )
+ const isUsingDashboardUserOverride = computed(() => requestedDashboardUserId.value !== undefined)
+ const analyticsQueryUserId = computed(() => effectiveUserId.value ?? options.auth.value.user?.id)
+ const shouldFetchEffectiveUser = computed(
+ () =>
+ Boolean(effectiveUserId.value) &&
+ !hasProjectContext.value &&
+ !hasOrganizationContext.value &&
+ (effectiveUserId.value !== options.auth.value.user?.id || !options.auth.value.user?.username),
+ )
+
+ const { data: effectiveUser } = useQuery({
+ queryKey: computed(() => ['analytics', 'dashboard', effectiveUserId.value, 'user']),
+ queryFn: async () => {
+ try {
+ return await client.labrinth.users_v2.get(effectiveUserId.value ?? '')
+ } catch (error) {
+ if (isUsingDashboardUserOverride.value) {
+ return null
+ }
+
+ throw error
+ }
+ },
+ enabled: shouldFetchEffectiveUser,
+ placeholderData: null,
+ })
+ const effectiveUsername = computed(() => {
+ if (effectiveUserId.value === options.auth.value.user?.id) {
+ return (
+ options.auth.value.user?.username ??
+ effectiveUser.value?.username ??
+ effectiveUserId.value ??
+ 'User'
+ )
+ }
+
+ return effectiveUser.value?.username ?? effectiveUserId.value ?? 'User'
+ })
+
+ const { data: userProjects, isFetched: hasFetchedUserProjects } = useQuery({
+ queryKey: computed(() => ['analytics', 'dashboard', effectiveUserId.value, 'projects']),
+ queryFn: async () => {
+ try {
+ return await client.labrinth.users_v2.getProjects(effectiveUserId.value ?? '')
+ } catch (error) {
+ if (isUsingDashboardUserOverride.value) {
+ return []
+ }
+
+ throw error
+ }
+ },
+ enabled: computed(
+ () =>
+ Boolean(effectiveUserId.value) && !hasProjectContext.value && !hasOrganizationContext.value,
+ ),
+ placeholderData: [],
+ })
+
+ const { data: userOrganizations, isFetched: hasFetchedUserOrganizations } = useQuery({
+ queryKey: computed(() => ['analytics', 'dashboard', effectiveUserId.value, 'organizations']),
+ queryFn: async () => {
+ try {
+ return await client.labrinth.users_v2.getOrganizations(effectiveUserId.value ?? '')
+ } catch (error) {
+ if (isUsingDashboardUserOverride.value) {
+ return []
+ }
+
+ throw error
+ }
+ },
+ enabled: computed(
+ () =>
+ Boolean(effectiveUserId.value) && !hasProjectContext.value && !hasOrganizationContext.value,
+ ),
+ placeholderData: [],
+ })
+
+ const userOrganizationIds = computed(() =>
+ (userOrganizations.value ?? []).map((organization) => organization.id),
+ )
+ const userProjectOrganizationIds = computed(() => {
+ const organizationIds: string[] = []
+ const seenOrganizationIds = new Set()
+
+ for (const project of userProjects.value ?? []) {
+ const organizationId = getProjectOrganizationId(project)
+ if (!organizationId || seenOrganizationIds.has(organizationId)) {
+ continue
+ }
+
+ seenOrganizationIds.add(organizationId)
+ organizationIds.push(organizationId)
+ }
+
+ return organizationIds
+ })
+ const extraUserProjectOrganizationIds = computed(() => {
+ const organizationIds = new Set(userOrganizationIds.value)
+ return userProjectOrganizationIds.value.filter(
+ (organizationId) => !organizationIds.has(organizationId),
+ )
+ })
+
+ const {
+ data: extraUserProjectOrganizations,
+ isFetched: hasFetchedExtraUserProjectOrganizations,
+ } = useQuery({
+ queryKey: computed(() => [
+ 'analytics',
+ 'dashboard',
+ effectiveUserId.value,
+ 'project-organizations',
+ extraUserProjectOrganizationIds.value,
+ ]),
+ queryFn: async () => {
+ try {
+ return await client.labrinth.organizations_v3.getMultiple(
+ extraUserProjectOrganizationIds.value,
+ )
+ } catch (error) {
+ if (isUsingDashboardUserOverride.value) {
+ return []
+ }
+
+ throw error
+ }
+ },
+ enabled: computed(
+ () =>
+ Boolean(effectiveUserId.value) &&
+ hasFetchedUserProjects.value &&
+ extraUserProjectOrganizationIds.value.length > 0 &&
+ !hasProjectContext.value &&
+ !hasOrganizationContext.value,
+ ),
+ placeholderData: [],
+ })
+
+ const { data: userOrganizationProjects, isFetched: hasFetchedUserOrganizationProjects } =
+ useQuery({
+ queryKey: computed(() => [
+ 'analytics',
+ 'dashboard',
+ effectiveUserId.value,
+ 'organization-projects',
+ userOrganizationIds.value,
+ ]),
+ queryFn: async () =>
+ Promise.all(
+ (userOrganizations.value ?? []).map(async (organization) => {
+ try {
+ return {
+ organization,
+ projects: await client.labrinth.organizations_v3.getProjects(organization.id),
+ }
+ } catch (error) {
+ if (isUsingDashboardUserOverride.value) {
+ return {
+ organization,
+ projects: [],
+ }
+ }
+
+ throw error
+ }
+ }),
+ ),
+ enabled: computed(
+ () =>
+ Boolean(effectiveUserId.value) &&
+ hasFetchedUserOrganizations.value &&
+ !hasProjectContext.value &&
+ !hasOrganizationContext.value,
+ ),
+ placeholderData: [],
+ })
+
+ const areProjectsLoaded = computed(() => {
+ if (hasProjectContext.value) {
+ return true
+ }
+
+ if (hasOrganizationContext.value) {
+ return options.organizationContext?.projects.value !== null
+ }
+
+ const areExtraUserProjectOrganizationsLoaded =
+ extraUserProjectOrganizationIds.value.length === 0 ||
+ hasFetchedExtraUserProjectOrganizations.value
+
+ return (
+ hasFetchedUserProjects.value &&
+ hasFetchedUserOrganizations.value &&
+ hasFetchedUserOrganizationProjects.value &&
+ areExtraUserProjectOrganizationsLoaded
+ )
+ })
+
+ const projectGroups = computed(() => {
+ if (hasProjectContext.value && options.projectPageContext) {
+ const project = options.projectPageContext.projectV2.value
+ return project && isAnalyticsEligibleProject(project)
+ ? [
+ {
+ projects: [toAnalyticsDashboardProject(project)],
+ },
+ ]
+ : []
+ }
+
+ if (hasOrganizationContext.value && options.organizationContext?.projects.value) {
+ return [
+ {
+ projects: getUniqueAnalyticsDashboardProjects(
+ options.organizationContext.projects.value,
+ new Set(),
+ ),
+ },
+ ]
+ }
+
+ const seenProjectIds = new Set()
+ const personalProjects = getUniqueAnalyticsDashboardProjects(
+ (userProjects.value ?? []).filter((project) => !getProjectOrganizationId(project)),
+ seenProjectIds,
+ )
+ const organizationGroups: AnalyticsDashboardProjectGroup[] = []
+
+ const userProjectsByOrganizationId = new Map()
+ for (const project of userProjects.value ?? []) {
+ const organizationId = getProjectOrganizationId(project)
+ if (!organizationId) {
+ continue
+ }
+
+ const projects = userProjectsByOrganizationId.get(organizationId) ?? []
+ projects.push(project)
+ userProjectsByOrganizationId.set(organizationId, projects)
+ }
+
+ const organizationProjectsById = new Map()
+ for (const group of userOrganizationProjects.value ?? []) {
+ organizationProjectsById.set(group.organization.id, group.projects)
+ }
+
+ const organizationNamesById = new Map()
+ const orderedOrganizationIds: string[] = []
+ for (const organization of userOrganizations.value ?? []) {
+ organizationNamesById.set(organization.id, organization.name)
+ orderedOrganizationIds.push(organization.id)
+ }
+ for (const organization of extraUserProjectOrganizations.value ?? []) {
+ organizationNamesById.set(organization.id, organization.name)
+ if (!orderedOrganizationIds.includes(organization.id)) {
+ orderedOrganizationIds.push(organization.id)
+ }
+ }
+ for (const organizationId of userProjectOrganizationIds.value) {
+ if (!orderedOrganizationIds.includes(organizationId)) {
+ orderedOrganizationIds.push(organizationId)
+ }
+ }
+
+ for (const organizationId of orderedOrganizationIds) {
+ const projects = getUniqueAnalyticsDashboardProjects(
+ [
+ ...(organizationProjectsById.get(organizationId) ?? []),
+ ...(userProjectsByOrganizationId.get(organizationId) ?? []),
+ ],
+ seenProjectIds,
+ )
+ if (projects.length === 0) {
+ continue
+ }
+
+ organizationGroups.push({
+ key: organizationId,
+ title: organizationNamesById.get(organizationId) ?? organizationId,
+ projects,
+ })
+ }
+
+ if (personalProjects.length === 0) {
+ return organizationGroups
+ }
+
+ return [
+ {
+ key: organizationGroups.length > 0 ? `user-${effectiveUserId.value}` : undefined,
+ title: organizationGroups.length > 0 ? effectiveUsername.value : undefined,
+ projects: personalProjects,
+ },
+ ...organizationGroups,
+ ]
+ })
+
+ const projects = computed(() =>
+ projectGroups.value.flatMap((group) => group.projects),
+ )
+
+ const availableProjectIds = computed(() => projects.value.map((project) => project.id))
+ const projectNamesById = computed(
+ () => new Map(projects.value.map((project) => [project.id, project.name])),
+ )
+ const projectIconUrlsById = computed(
+ () =>
+ new Map(
+ projects.value
+ .filter((project) => project.iconUrl)
+ .map((project) => [project.id, project.iconUrl as string]),
+ ),
+ )
+ const projectStatusById = computed(
+ () => new Map(projects.value.map((project) => [project.id, project.status])),
+ )
+ const availableProjectStatuses = computed(() => {
+ const presentStatuses = new Set(projects.value.map((project) => project.status))
+ return PROJECT_STATUS_FILTER_VALUES.filter((status) => presentStatuses.has(status))
+ })
+ const sortedSelectedProjectIds = computed(() => sortStringValues(selectedProjectIds.value))
+ const hasExplicitProjectSelectionQuery = computed(() =>
+ hasAnalyticsProjectSelectionQuery(route.query),
+ )
+ const hasExplicitBreakdownQuery = computed(() => hasAnalyticsBreakdownQuery(route.query))
+ const isAnalyticsQueryBuilderDefault = computed(() => {
+ const isQueryBuilderDefault = isAnalyticsQueryBuilderStateDefault(
+ {
+ selectedProjectIds: selectedProjectIds.value,
+ selectedTimeframeMode: selectedTimeframeMode.value,
+ selectedTimeframe: selectedTimeframe.value,
+ selectedLastTimeframeAmount: selectedLastTimeframeAmount.value,
+ selectedLastTimeframeUnit: selectedLastTimeframeUnit.value,
+ selectedCustomTimeframeStartDate: selectedCustomTimeframeStartDate.value,
+ selectedCustomTimeframeEndDate: selectedCustomTimeframeEndDate.value,
+ selectedGroupBy: selectedGroupBy.value,
+ selectedBreakdown: selectedBreakdown.value,
+ selectedFilters: selectedFilters.value,
+ },
+ availableProjectIds.value,
+ )
+ const isGraphDefault = isAnalyticsGraphStateDefault({
+ activeStat: activeStat.value,
+ activeGraphViewMode: activeGraphViewMode.value,
+ isRatioMode: isRatioMode.value,
+ showChartEvents: showChartEvents.value,
+ hiddenGraphDatasetIds: hiddenGraphDatasetIds.value,
+ })
+
+ return isQueryBuilderDefault && isGraphDefault
+ })
+ const isRevenueTimeframeAvailable = computed(
+ () =>
+ getAnalyticsTimeframeDurationMs({
+ mode: selectedTimeframeMode.value,
+ preset: selectedTimeframe.value,
+ lastAmount: selectedLastTimeframeAmount.value,
+ lastUnit: selectedLastTimeframeUnit.value,
+ customStartDate: selectedCustomTimeframeStartDate.value,
+ customEndDate: selectedCustomTimeframeEndDate.value,
+ nowTimestamp: queryRefreshTimestamp.value,
+ }) > REVENUE_MIN_TIMEFRAME_MS,
+ )
+
+ function isAnalyticsDashboardStatAvailableForTimeframe(stat: AnalyticsDashboardStat): boolean {
+ return stat !== 'revenue' || isRevenueTimeframeAvailable.value
+ }
+
+ function getRelevantAnalyticsDashboardStats(
+ breakdown: AnalyticsBreakdownPreset,
+ filters: AnalyticsSelectedFilters = selectedFilters.value,
+ ): readonly AnalyticsDashboardStat[] {
+ return getEnabledAnalyticsStatsForState(breakdown, filters).filter((stat) =>
+ isAnalyticsDashboardStatAvailableForTimeframe(stat),
+ )
+ }
+
+ function isAnalyticsDashboardStatRelevant(
+ stat: AnalyticsDashboardStat,
+ breakdown: AnalyticsBreakdownPreset,
+ filters: AnalyticsSelectedFilters = selectedFilters.value,
+ ): boolean {
+ return getRelevantAnalyticsDashboardStats(breakdown, filters).includes(stat)
+ }
+
+ function sanitizeAnalyticsSelectedFiltersForContext(
+ breakdown: AnalyticsBreakdownPreset,
+ filters: AnalyticsSelectedFilters,
+ ): AnalyticsSelectedFilters {
+ const nextFilters = sanitizeAnalyticsSelectedFilters(breakdown, filters)
+ if (hasProjectContext.value && nextFilters.project_status.length > 0) {
+ return {
+ ...nextFilters,
+ project_status: [],
+ }
+ }
+
+ return nextFilters
+ }
+
+ function replaceNextAnalyticsRouteNavigation() {
+ nextAnalyticsRouteNavigationMode = 'replace'
+ }
+
+ function consumeAnalyticsRouteNavigationMode(): AnalyticsQueryBuilderRouteNavigationMode {
+ const navigationMode = nextAnalyticsRouteNavigationMode
+ nextAnalyticsRouteNavigationMode = 'push'
+ return navigationMode
+ }
+
+ function getSelectedAnalyticsQueryBuilderState() {
+ return {
+ selectedProjectIds: selectedProjectIds.value,
+ selectedTimeframeMode: selectedTimeframeMode.value,
+ selectedTimeframe: selectedTimeframe.value,
+ selectedLastTimeframeAmount: selectedLastTimeframeAmount.value,
+ selectedLastTimeframeUnit: selectedLastTimeframeUnit.value,
+ selectedCustomTimeframeStartDate: selectedCustomTimeframeStartDate.value,
+ selectedCustomTimeframeEndDate: selectedCustomTimeframeEndDate.value,
+ selectedGroupBy: selectedGroupBy.value,
+ selectedBreakdown: selectedBreakdown.value,
+ selectedFilters: selectedFilters.value,
+ }
+ }
+
+ function getSelectedAnalyticsGraphState() {
+ return {
+ activeStat: activeStat.value,
+ activeGraphViewMode: activeGraphViewMode.value,
+ isRatioMode: isRatioMode.value,
+ showChartEvents: showChartEvents.value,
+ hiddenGraphDatasetIds: hiddenGraphDatasetIds.value,
+ }
+ }
+
+ function syncAnalyticsRouteQuery(navigationMode: AnalyticsQueryBuilderRouteNavigationMode) {
+ if (import.meta.server) {
+ return
+ }
+
+ const nextRouteQuery = buildAnalyticsQueryBuilderRouteQuery(
+ route.query,
+ getSelectedAnalyticsQueryBuilderState(),
+ availableProjectIds.value,
+ getSelectedAnalyticsGraphState(),
+ )
+
+ const hasAnalyticsQueryChange = hasAnalyticsQueryBuilderRouteChange(route.query, nextRouteQuery)
+
+ if (!hasAnalyticsQueryChange) return
+
+ if (navigationMode === 'replace') {
+ router.replace({
+ path: route.path,
+ query: nextRouteQuery,
+ })
+ } else {
+ router.push({
+ path: route.path,
+ query: nextRouteQuery,
+ })
+ }
+ }
+
+ function reconcileRevenueGroupBy(nextActiveStat: AnalyticsDashboardStat) {
+ if (nextActiveStat === 'revenue') {
+ if (!isRevenueHourlyGroupBy(selectedGroupBy.value)) {
+ if (selectedGroupBy.value !== REVENUE_GROUP_BY_FALLBACK) {
+ revenueHourlyGroupByBeforeOverride = null
+ }
+ return
+ }
+
+ revenueHourlyGroupByBeforeOverride = selectedGroupBy.value
+ replaceNextAnalyticsRouteNavigation()
+ selectedGroupBy.value = REVENUE_GROUP_BY_FALLBACK
+ return
+ }
+
+ const groupByBeforeRevenue = revenueHourlyGroupByBeforeOverride
+ revenueHourlyGroupByBeforeOverride = null
+ if (groupByBeforeRevenue && selectedGroupBy.value === REVENUE_GROUP_BY_FALLBACK) {
+ replaceNextAnalyticsRouteNavigation()
+ selectedGroupBy.value = groupByBeforeRevenue
+ }
+ }
+
+ watch(
+ [selectedBreakdown, selectedFilters, activeStat, isRevenueTimeframeAvailable],
+ ([nextBreakdown, nextFilters, nextActiveStat]) => {
+ if (isAnalyticsDashboardStatRelevant(nextActiveStat, nextBreakdown, nextFilters)) {
+ return
+ }
+
+ const fallbackStat = getRelevantAnalyticsDashboardStats(nextBreakdown, nextFilters)[0]
+ if (fallbackStat && fallbackStat !== nextActiveStat) {
+ activeStat.value = fallbackStat
+ }
+ },
+ { deep: true, immediate: true },
+ )
+
+ watch(
+ [selectedBreakdown, selectedFilters],
+ ([nextBreakdown, nextFilters]) => {
+ const sanitizedFilters = sanitizeAnalyticsSelectedFiltersForContext(
+ nextBreakdown,
+ nextFilters,
+ )
+ if (!areSelectedFiltersEqual(nextFilters, sanitizedFilters)) {
+ replaceNextAnalyticsRouteNavigation()
+ selectedFilters.value = sanitizedFilters
+ }
+ },
+ { deep: true, immediate: true },
+ )
+
+ watch(
+ [projects, areProjectsLoaded],
+ ([nextProjects, nextAreProjectsLoaded]) => {
+ if (nextProjects.length === 0) {
+ if (nextAreProjectsLoaded && selectedProjectIds.value.length > 0) {
+ replaceNextAnalyticsRouteNavigation()
+ selectedProjectIds.value = []
+ }
+ return
+ }
+
+ const availableProjectIds = new Set(nextProjects.map((project) => project.id))
+ if (!hasExplicitProjectSelectionQuery.value) {
+ const nextSelectedProjectIds = nextProjects.map((project) => project.id)
+ if (!areStringArraysEqual(selectedProjectIds.value, nextSelectedProjectIds)) {
+ replaceNextAnalyticsRouteNavigation()
+ selectedProjectIds.value = nextSelectedProjectIds
+ }
+ return
+ }
+
+ const retainedSelection = selectedProjectIds.value.filter((id) => availableProjectIds.has(id))
+ const nextSelectedProjectIds =
+ retainedSelection.length > 0 ? retainedSelection : nextProjects.map((project) => project.id)
+
+ if (!areStringArraysEqual(selectedProjectIds.value, nextSelectedProjectIds)) {
+ replaceNextAnalyticsRouteNavigation()
+ selectedProjectIds.value = nextSelectedProjectIds
+ }
+ },
+ { immediate: true },
+ )
+
+ watch(
+ [selectedProjectIds, hasExplicitBreakdownQuery],
+ ([nextSelectedProjectIds, nextHasExplicitBreakdownQuery]) => {
+ const validBreakdown = getAnalyticsBreakdownPresetForProjectSelection(
+ selectedBreakdown.value,
+ nextSelectedProjectIds,
+ )
+ if (selectedBreakdown.value !== validBreakdown) {
+ replaceNextAnalyticsRouteNavigation()
+ selectedBreakdown.value = validBreakdown
+ return
+ }
+
+ const defaultBreakdown = getDefaultAnalyticsBreakdownPreset(nextSelectedProjectIds)
+ if (!nextHasExplicitBreakdownQuery && selectedBreakdown.value !== defaultBreakdown) {
+ replaceNextAnalyticsRouteNavigation()
+ selectedBreakdown.value = defaultBreakdown
+ }
+ },
+ { deep: true, immediate: true },
+ )
+
+ watch(
+ () => route.query,
+ (nextQuery) => {
+ const nextQueryState = readAnalyticsQueryBuilderState(nextQuery, availableProjectIds.value)
+ const nextGraphState = readAnalyticsGraphState(nextQuery)
+ const availableProjectIdSet = new Set(availableProjectIds.value)
+ const nextSelectedProjectIds = nextQueryState.selectedProjectIds.filter((projectId) =>
+ availableProjectIdSet.has(projectId),
+ )
+ const nextSelectedBreakdown = getAnalyticsBreakdownPresetForProjectSelection(
+ nextQueryState.selectedBreakdown,
+ nextSelectedProjectIds,
+ )
+ const nextSelectedFilters = sanitizeAnalyticsSelectedFiltersForContext(
+ nextSelectedBreakdown,
+ nextQueryState.selectedFilters,
+ )
+ const shouldUpdateSelectedProjectIds = !areStringArraysEqual(
+ selectedProjectIds.value,
+ nextSelectedProjectIds,
+ )
+ const shouldUpdateSelectedTimeframeMode =
+ selectedTimeframeMode.value !== nextQueryState.selectedTimeframeMode
+ const shouldUpdateSelectedTimeframe =
+ selectedTimeframe.value !== nextQueryState.selectedTimeframe
+ const shouldUpdateSelectedLastTimeframeAmount =
+ selectedLastTimeframeAmount.value !== nextQueryState.selectedLastTimeframeAmount
+ const shouldUpdateSelectedLastTimeframeUnit =
+ selectedLastTimeframeUnit.value !== nextQueryState.selectedLastTimeframeUnit
+ const shouldUpdateSelectedCustomTimeframeStartDate =
+ selectedCustomTimeframeStartDate.value !== nextQueryState.selectedCustomTimeframeStartDate
+ const shouldUpdateSelectedCustomTimeframeEndDate =
+ selectedCustomTimeframeEndDate.value !== nextQueryState.selectedCustomTimeframeEndDate
+ const shouldUpdateSelectedGroupBy = selectedGroupBy.value !== nextQueryState.selectedGroupBy
+ const shouldUpdateSelectedBreakdown = selectedBreakdown.value !== nextSelectedBreakdown
+ const shouldUpdateSelectedFilters = !areSelectedFiltersEqual(
+ selectedFilters.value,
+ nextSelectedFilters,
+ )
+ const shouldUpdateActiveStat = activeStat.value !== nextGraphState.activeStat
+ const shouldUpdateActiveGraphViewMode =
+ activeGraphViewMode.value !== nextGraphState.activeGraphViewMode
+ const shouldUpdateIsRatioMode = isRatioMode.value !== nextGraphState.isRatioMode
+ const shouldUpdateShowChartEvents = showChartEvents.value !== nextGraphState.showChartEvents
+ const shouldUpdateHiddenGraphDatasetIds = !areStringArraysEqual(
+ hiddenGraphDatasetIds.value,
+ nextGraphState.hiddenGraphDatasetIds,
+ )
+ const hasRouteStateUpdate =
+ shouldUpdateSelectedProjectIds ||
+ shouldUpdateSelectedTimeframeMode ||
+ shouldUpdateSelectedTimeframe ||
+ shouldUpdateSelectedLastTimeframeAmount ||
+ shouldUpdateSelectedLastTimeframeUnit ||
+ shouldUpdateSelectedCustomTimeframeStartDate ||
+ shouldUpdateSelectedCustomTimeframeEndDate ||
+ shouldUpdateSelectedGroupBy ||
+ shouldUpdateSelectedBreakdown ||
+ shouldUpdateSelectedFilters ||
+ shouldUpdateActiveStat ||
+ shouldUpdateActiveGraphViewMode ||
+ shouldUpdateIsRatioMode ||
+ shouldUpdateShowChartEvents ||
+ shouldUpdateHiddenGraphDatasetIds
+
+ if (hasRouteStateUpdate) {
+ replaceNextAnalyticsRouteNavigation()
+ }
+
+ if (shouldUpdateSelectedProjectIds) {
+ selectedProjectIds.value = nextSelectedProjectIds
+ }
+ if (shouldUpdateSelectedTimeframeMode) {
+ selectedTimeframeMode.value = nextQueryState.selectedTimeframeMode
+ }
+ if (shouldUpdateSelectedTimeframe) {
+ selectedTimeframe.value = nextQueryState.selectedTimeframe
+ }
+ if (shouldUpdateSelectedLastTimeframeAmount) {
+ selectedLastTimeframeAmount.value = nextQueryState.selectedLastTimeframeAmount
+ }
+ if (shouldUpdateSelectedLastTimeframeUnit) {
+ selectedLastTimeframeUnit.value = nextQueryState.selectedLastTimeframeUnit
+ }
+ if (shouldUpdateSelectedCustomTimeframeStartDate) {
+ selectedCustomTimeframeStartDate.value = nextQueryState.selectedCustomTimeframeStartDate
+ }
+ if (shouldUpdateSelectedCustomTimeframeEndDate) {
+ selectedCustomTimeframeEndDate.value = nextQueryState.selectedCustomTimeframeEndDate
+ }
+ if (shouldUpdateSelectedGroupBy) {
+ selectedGroupBy.value = nextQueryState.selectedGroupBy
+ }
+ if (shouldUpdateSelectedBreakdown) {
+ selectedBreakdown.value = nextSelectedBreakdown
+ }
+ if (shouldUpdateSelectedFilters) {
+ selectedFilters.value = nextSelectedFilters
+ }
+ if (shouldUpdateActiveStat) {
+ activeStat.value = nextGraphState.activeStat
+ }
+ if (shouldUpdateActiveGraphViewMode) {
+ activeGraphViewMode.value = nextGraphState.activeGraphViewMode
+ }
+ if (shouldUpdateIsRatioMode) {
+ isRatioMode.value = nextGraphState.isRatioMode
+ }
+ if (shouldUpdateShowChartEvents) {
+ showChartEvents.value = nextGraphState.showChartEvents
+ }
+ if (shouldUpdateHiddenGraphDatasetIds) {
+ hiddenGraphDatasetIds.value = nextGraphState.hiddenGraphDatasetIds
+ }
+
+ if (!hasRouteStateUpdate) {
+ syncAnalyticsRouteQuery('replace')
+ }
+ },
+ )
+
+ watch(
+ [activeStat, selectedGroupBy],
+ ([nextActiveStat]) => {
+ reconcileRevenueGroupBy(nextActiveStat)
+ },
+ { flush: 'sync', immediate: true },
+ )
+
+ watch(
+ [
+ selectedProjectIds,
+ selectedTimeframeMode,
+ selectedTimeframe,
+ selectedLastTimeframeAmount,
+ selectedLastTimeframeUnit,
+ selectedCustomTimeframeStartDate,
+ selectedCustomTimeframeEndDate,
+ selectedGroupBy,
+ selectedBreakdown,
+ selectedFilters,
+ availableProjectIds,
+ ],
+ () => {
+ syncAnalyticsRouteQuery(consumeAnalyticsRouteNavigationMode())
+ },
+ { deep: true, immediate: true },
+ )
+
+ watch(
+ [activeStat, activeGraphViewMode, isRatioMode, showChartEvents, hiddenGraphDatasetIds],
+ () => {
+ syncAnalyticsRouteQuery('replace')
+ },
+ { deep: true },
+ )
+
+ const {
+ data: currentTimeSliceData,
+ isPending: currentTimeSlicePending,
+ isFetching: currentFetching,
+ refetch: refetchCurrentTimeSlices,
+ } = useQuery({
+ queryKey: computed(() =>
+ buildAnalyticsCurrentTimeSlicesQueryKey(analyticsQueryUserId.value, fetchRequest.value),
+ ),
+ queryFn: () => {
+ if (!isAnalyticsFetchRequestReady(fetchRequest.value)) {
+ return []
+ }
+
+ return fetchAnalyticsTimeSlices(fetchRequest.value, (request) =>
+ client.labrinth.analytics_v3.fetch(request),
+ )
+ },
+ enabled: computed(() => isAnalyticsFetchRequestReady(fetchRequest.value)),
+ gcTime: ANALYTICS_TIME_SLICES_GC_TIME_MS,
+ })
+ const isCurrentTimeSliceLoading = computed(
+ () => isAnalyticsFetchRequestReady(fetchRequest.value) && currentTimeSlicePending.value,
+ )
+ const revenueDailyPrefetchRequest = computed(() => {
+ if (!isRevenueHourlyGroupBy(selectedGroupBy.value)) {
+ return null
+ }
+ if (
+ !isAnalyticsDashboardStatRelevant('revenue', selectedBreakdown.value, selectedFilters.value)
+ ) {
+ return null
+ }
+
+ return buildDailyAnalyticsFetchRequest(fetchRequest.value)
+ })
+
+ watch(
+ [revenueDailyPrefetchRequest, analyticsQueryUserId],
+ ([nextFetchRequest, nextAnalyticsQueryUserId]) => {
+ if (!isAnalyticsFetchRequestReady(nextFetchRequest)) {
+ return
+ }
+
+ void queryClient
+ .prefetchQuery({
+ queryKey: buildAnalyticsCurrentTimeSlicesQueryKey(
+ nextAnalyticsQueryUserId,
+ nextFetchRequest,
+ ),
+ queryFn: () =>
+ fetchAnalyticsTimeSlices(nextFetchRequest, (request) =>
+ client.labrinth.analytics_v3.fetch(request),
+ ),
+ gcTime: ANALYTICS_PREFETCH_GC_TIME_MS,
+ })
+ .catch(() => {})
+ },
+ { deep: true, immediate: true },
+ )
+
+ const analyticsFilterOptionsRequests = computed(
+ () => {
+ if (sortedSelectedProjectIds.value.length === 0) {
+ return null
+ }
+
+ return buildAnalyticsFilterOptionsRequests(
+ sortedSelectedProjectIds.value,
+ new Date(queryRefreshTimestamp.value).toISOString(),
+ )
+ },
+ )
+
+ const {
+ data: analyticsFilterOptionsData,
+ isFetched: hasFetchedAnalyticsFilterOptions,
+ isFetching: isAnalyticsFilterOptionsFetching,
+ } = useQuery({
+ queryKey: computed(() => [
+ 'analytics',
+ 'dashboard',
+ analyticsQueryUserId.value,
+ 'filter-options',
+ 'analytics-fields',
+ sortedSelectedProjectIds.value,
+ queryRefreshTimestamp.value,
+ ]),
+ queryFn: async () => {
+ const requests = (analyticsFilterOptionsRequests.value ?? []).filter(
+ isAnalyticsFetchRequestReady,
+ )
+ const timeSliceGroups = await Promise.all(
+ requests.map((request) =>
+ fetchAnalyticsTimeSlices(request, (nextRequest) =>
+ client.labrinth.analytics_v3.fetch(nextRequest),
+ ),
+ ),
+ )
+ return timeSliceGroups.flat()
+ },
+ enabled: computed(() => analyticsFilterOptionsRequests.value !== null),
+ gcTime: ANALYTICS_FILTER_OPTIONS_GC_TIME_MS,
+ })
+
+ const { data: filterOptionProjectVersions, isFetched: hasFetchedFilterOptionProjectVersions } =
+ useQuery({
+ queryKey: computed(() => [
+ 'analytics',
+ 'dashboard',
+ analyticsQueryUserId.value,
+ 'filter-options',
+ 'versions',
+ sortedSelectedProjectIds.value,
+ ]),
+ queryFn: () =>
+ fetchAnalyticsVersionMetadata(
+ sortedSelectedProjectIds.value,
+ (ids) => client.labrinth.projects_v3.getMultiple(ids),
+ (ids) => client.labrinth.versions_v3.getVersions(ids),
+ ),
+ enabled: computed(() => sortedSelectedProjectIds.value.length > 0),
+ placeholderData: [],
+ gcTime: ANALYTICS_FILTER_OPTIONS_GC_TIME_MS,
+ })
+
+ const analyticsDataFilterOptionSummary = computed(() =>
+ getAnalyticsDataFilterOptionSummary(analyticsFilterOptionsData.value ?? []),
+ )
+ const projectVersionFilterOptionSummary = computed(() =>
+ getProjectVersionFilterOptionSummary(filterOptionProjectVersions.value ?? []),
+ )
+ const filterOptions = computed(() => ({
+ countries: analyticsDataFilterOptionSummary.value.countries,
+ downloadSources: analyticsDataFilterOptionSummary.value.downloadSources,
+ downloadReasons: analyticsDataFilterOptionSummary.value.downloadReasons,
+ gameVersions: sortStringValues([
+ ...new Set([
+ ...projectVersionFilterOptionSummary.value.gameVersions,
+ ...analyticsDataFilterOptionSummary.value.gameVersions,
+ ]),
+ ]),
+ loaderTypes: sortStringValues([
+ ...new Set([
+ ...projectVersionFilterOptionSummary.value.loaderTypes,
+ ...analyticsDataFilterOptionSummary.value.loaderTypes,
+ ]),
+ ]),
+ versionIds: sortStringValues([
+ ...new Set([
+ ...projectVersionFilterOptionSummary.value.versionIds,
+ ...analyticsDataFilterOptionSummary.value.versionIds,
+ ]),
+ ]),
+ }))
+ const isAnalyticsFilterOptionsLoading = computed(() => isAnalyticsFilterOptionsFetching.value)
+
+ watch(
+ [
+ selectedFilters,
+ filterOptions,
+ hasFetchedFilterOptionProjectVersions,
+ hasFetchedAnalyticsFilterOptions,
+ ],
+ ([
+ nextSelectedFilters,
+ nextFilterOptions,
+ hasFetchedVersionFilterOptions,
+ hasFetchedAnalyticsOptions,
+ ]) => {
+ if (!hasFetchedVersionFilterOptions || !hasFetchedAnalyticsOptions) {
+ return
+ }
+
+ const sanitizedFilters = sanitizeAnalyticsSelectedFiltersForAvailableOptions(
+ nextSelectedFilters,
+ nextFilterOptions,
+ )
+ if (!areSelectedFiltersEqual(nextSelectedFilters, sanitizedFilters)) {
+ selectedFilters.value = sanitizedFilters
+ }
+ },
+ { deep: true },
+ )
+
+ const previousFetchRequest = computed(() => buildPreviousFetchRequest(fetchRequest.value))
+ const hasPreviousPeriodComparison = computed(() => previousFetchRequest.value !== null)
+
+ const {
+ data: previousTimeSliceData,
+ isFetching: previousFetching,
+ refetch: refetchPreviousTimeSlices,
+ } = useQuery({
+ queryKey: computed(() => [
+ 'analytics',
+ 'dashboard',
+ analyticsQueryUserId.value,
+ 'previous',
+ previousFetchRequest.value,
+ ]),
+ queryFn: () => {
+ if (!isAnalyticsFetchRequestReady(previousFetchRequest.value)) {
+ return []
+ }
+
+ return fetchAnalyticsTimeSlices(previousFetchRequest.value, (request) =>
+ client.labrinth.analytics_v3.fetch(request),
+ )
+ },
+ enabled: computed(() => isAnalyticsFetchRequestReady(previousFetchRequest.value)),
+ gcTime: ANALYTICS_TIME_SLICES_GC_TIME_MS,
+ })
+
+ const timeSlices = shallowRef([])
+ const previousTimeSlices = shallowRef([])
+ const displayedSelectedProjectIds = ref([...selectedProjectIds.value])
+ const displayedSelectedGroupBy = ref(selectedGroupBy.value)
+ const displayedSelectedBreakdown = ref(selectedBreakdown.value)
+ const displayedSelectedFilters = ref(
+ cloneAnalyticsSelectedFilters(selectedFilters.value),
+ )
+ const displayedFetchRequest = ref(
+ cloneAnalyticsFetchRequest(fetchRequest.value),
+ )
+ const displayedFilterOptions = ref(
+ cloneAnalyticsFilterOptions(filterOptions.value),
+ )
+ const displayedTimeSlices = shallowRef([])
+
+ function commitDisplayedAnalyticsState() {
+ displayedSelectedProjectIds.value = [...selectedProjectIds.value]
+ displayedSelectedGroupBy.value = selectedGroupBy.value
+ displayedSelectedBreakdown.value = selectedBreakdown.value
+ displayedSelectedFilters.value = cloneAnalyticsSelectedFilters(selectedFilters.value)
+ displayedFetchRequest.value = cloneAnalyticsFetchRequest(fetchRequest.value)
+ displayedFilterOptions.value = cloneAnalyticsFilterOptions(filterOptions.value)
+ displayedTimeSlices.value = timeSlices.value
+ }
+
+ watch(
+ currentTimeSliceData,
+ (nextTimeSlices) => {
+ if (nextTimeSlices === undefined) {
+ return
+ }
+ timeSlices.value = nextTimeSlices
+ },
+ { immediate: true },
+ )
+
+ watch(
+ previousTimeSliceData,
+ (nextTimeSlices) => {
+ previousTimeSlices.value = nextTimeSlices ?? []
+ },
+ { immediate: true },
+ )
+
+ watch(fetchRequest, (nextFetchRequest) => {
+ if (isAnalyticsFetchRequestReady(nextFetchRequest)) {
+ previousTimeSlices.value = []
+ return
+ }
+ timeSlices.value = []
+ previousTimeSlices.value = []
+ })
+
+ const analyticsVersionIds = computed(() => {
+ const versionIds = new Set()
+ for (const versionId of selectedFilters.value.version_id) {
+ const normalizedVersionId = versionId.trim()
+ if (normalizedVersionId.length > 0) {
+ versionIds.add(normalizedVersionId)
+ }
+ }
+
+ if (selectedBreakdown.value === 'version_id' || selectedFilters.value.version_id.length > 0) {
+ addVersionIdsFromTimeSlices(versionIds, timeSlices.value)
+ addVersionIdsFromTimeSlices(versionIds, previousTimeSlices.value)
+ }
+
+ return sortStringValues([...versionIds])
+ })
+
+ const { data: versions } = useQuery({
+ queryKey: computed(() => [
+ 'analytics',
+ 'dashboard',
+ analyticsQueryUserId.value,
+ 'versions',
+ analyticsVersionIds.value,
+ ]),
+ queryFn: () =>
+ fetchAnalyticsVersionMetadataByIds(analyticsVersionIds.value, (ids) =>
+ client.labrinth.versions_v3.getVersions(ids),
+ ),
+ enabled: computed(() => analyticsVersionIds.value.length > 0),
+ placeholderData: [],
+ gcTime: ANALYTICS_FILTER_OPTIONS_GC_TIME_MS,
+ })
+
+ const allVersionMetadata = computed(() => {
+ const versionsById = new Map()
+ for (const version of filterOptionProjectVersions.value ?? []) {
+ versionsById.set(version.id, version)
+ }
+ for (const version of versions.value ?? []) {
+ versionsById.set(version.id, version)
+ }
+ return [...versionsById.values()]
+ })
+
+ const versionNumbersById = computed(
+ () => new Map(allVersionMetadata.value.map((version) => [version.id, version.versionNumber])),
+ )
+ const versionPublishedDatesById = computed(
+ () => new Map(allVersionMetadata.value.map((version) => [version.id, version.datePublished])),
+ )
+ const versionProjectNamesById = computed(() => {
+ const projectNames = projectNamesById.value
+ const versionProjectNames = new Map()
+ for (const version of allVersionMetadata.value) {
+ const projectName = projectNames.get(version.projectId)
+ if (projectName) {
+ versionProjectNames.set(version.id, projectName)
+ }
+ }
+ addVersionProjectNamesFromTimeSlices(versionProjectNames, timeSlices.value, projectNames)
+ addVersionProjectNamesFromTimeSlices(
+ versionProjectNames,
+ previousTimeSlices.value,
+ projectNames,
+ )
+ return versionProjectNames
+ })
+ const versionProjectIconUrlsById = computed(() => {
+ const projectIconUrls = projectIconUrlsById.value
+ const versionProjectIconUrls = new Map()
+ for (const version of allVersionMetadata.value) {
+ const projectIconUrl = projectIconUrls.get(version.projectId)
+ if (projectIconUrl) {
+ versionProjectIconUrls.set(version.id, projectIconUrl)
+ }
+ }
+ return versionProjectIconUrls
+ })
+ const projectVersionDownloadsById = computed(
+ () => new Map(allVersionMetadata.value.map((version) => [version.id, version.downloads])),
+ )
+ const countryDownloadsByCode = computed(
+ () => analyticsDataFilterOptionSummary.value.countryDownloadsByCode,
+ )
+ const gameVersionDownloadsByVersion = computed(() => {
+ const downloadsByVersion = new Map()
+
+ for (const version of allVersionMetadata.value) {
+ for (const gameVersion of version.gameVersions) {
+ const normalizedGameVersion = gameVersion.trim()
+ if (normalizedGameVersion.length === 0) {
+ continue
+ }
+
+ downloadsByVersion.set(
+ normalizedGameVersion,
+ (downloadsByVersion.get(normalizedGameVersion) ?? 0) + version.downloads,
+ )
+ }
+ }
+
+ return downloadsByVersion
+ })
+
+ const selectedProjectIdSet = computed(() => new Set(selectedProjectIds.value))
+ const availableProjectIdSet = computed(() => new Set(availableProjectIds.value))
+
+ const currentTotals = computed(() =>
+ computeTotals(
+ timeSlices.value,
+ selectedProjectIdSet.value,
+ availableProjectIdSet.value,
+ projectStatusById.value,
+ selectedFilters.value,
+ ),
+ )
+ const previousTotals = computed(() =>
+ computeTotals(
+ previousTimeSlices.value,
+ selectedProjectIdSet.value,
+ availableProjectIdSet.value,
+ projectStatusById.value,
+ selectedFilters.value,
+ ),
+ )
+
+ const percentChanges = computed(() => ({
+ views: getPercentChange(currentTotals.value.views, previousTotals.value.views),
+ downloads: getPercentChange(currentTotals.value.downloads, previousTotals.value.downloads),
+ revenue: getPercentChange(currentTotals.value.revenue, previousTotals.value.revenue),
+ playtime: getPercentChange(currentTotals.value.playtime, previousTotals.value.playtime),
+ }))
+
+ const isLoading = computed(() => isCurrentTimeSliceLoading.value)
+ const isRefetching = computed(() => currentFetching.value || previousFetching.value)
+ watch(
+ [
+ isLoading,
+ currentTimeSliceData,
+ fetchRequest,
+ selectedProjectIds,
+ selectedGroupBy,
+ selectedBreakdown,
+ selectedFilters,
+ filterOptions,
+ ],
+ () => {
+ if (isLoading.value) {
+ return
+ }
+ if (
+ isAnalyticsFetchRequestReady(fetchRequest.value) &&
+ currentTimeSliceData.value === undefined
+ ) {
+ return
+ }
+
+ commitDisplayedAnalyticsState()
+ },
+ { flush: 'post', immediate: true },
+ )
+
+ async function refreshAnalyticsQuery() {
+ if (!isAnalyticsFetchRequestReady(fetchRequest.value)) {
+ return
+ }
+
+ const fetchRequestKey = JSON.stringify(fetchRequest.value)
+ const now = Date.now()
+ queryRefreshTimestamp.value =
+ now > queryRefreshTimestamp.value ? now : queryRefreshTimestamp.value + 1
+ await nextTick()
+
+ if (fetchRequest.value === null || JSON.stringify(fetchRequest.value) !== fetchRequestKey) {
+ return
+ }
+
+ const refetches = [refetchCurrentTimeSlices()]
+ if (previousFetchRequest.value !== null) {
+ refetches.push(refetchPreviousTimeSlices())
+ }
+
+ await Promise.all(refetches)
+ }
+
+ function resetAnalyticsQueryBuilder() {
+ if (isAnalyticsQueryBuilderDefault.value) {
+ return
+ }
+
+ const defaultQueryState = buildDefaultAnalyticsQueryBuilderState(availableProjectIds.value)
+ const defaultGraphState = buildDefaultAnalyticsGraphState()
+
+ selectedProjectIds.value = defaultQueryState.selectedProjectIds
+ selectedTimeframeMode.value = defaultQueryState.selectedTimeframeMode
+ selectedTimeframe.value = defaultQueryState.selectedTimeframe
+ selectedLastTimeframeAmount.value = defaultQueryState.selectedLastTimeframeAmount
+ selectedLastTimeframeUnit.value = defaultQueryState.selectedLastTimeframeUnit
+ selectedCustomTimeframeStartDate.value = defaultQueryState.selectedCustomTimeframeStartDate
+ selectedCustomTimeframeEndDate.value = defaultQueryState.selectedCustomTimeframeEndDate
+ selectedGroupBy.value = defaultQueryState.selectedGroupBy
+ selectedBreakdown.value = defaultQueryState.selectedBreakdown
+ selectedFilters.value = defaultQueryState.selectedFilters
+ activeStat.value = defaultGraphState.activeStat
+ activeGraphViewMode.value = defaultGraphState.activeGraphViewMode
+ isRatioMode.value = defaultGraphState.isRatioMode
+ showChartEvents.value = defaultGraphState.showChartEvents
+ hiddenGraphDatasetIds.value = defaultGraphState.hiddenGraphDatasetIds
+ isGraphDatasetSelectionActive.value = false
+ selectedGraphDatasetIds.value = []
+ queryResetToken.value += 1
+ }
+
+ function setFetchRequest(nextFetchRequest: Labrinth.Analytics.v3.FetchRequest) {
+ if (areAnalyticsFetchRequestsEqual(fetchRequest.value, nextFetchRequest)) {
+ return
+ }
+
+ fetchRequest.value = nextFetchRequest
+ }
+
+ function getVersionDisplayName(versionId: string): string {
+ return versionNumbersById.value.get(versionId) ?? versionId
+ }
+
+ function getVersionPublishedDate(versionId: string): string | undefined {
+ return versionPublishedDatesById.value.get(versionId)
+ }
+
+ function getVersionProjectName(versionId: string): string | undefined {
+ return versionProjectNamesById.value.get(versionId)
+ }
+
+ function getVersionProjectIconUrl(versionId: string): string | undefined {
+ return versionProjectIconUrlsById.value.get(versionId)
+ }
+
+ function setActiveStat(nextStat: AnalyticsDashboardStat) {
+ if (
+ !isAnalyticsDashboardStatRelevant(nextStat, selectedBreakdown.value, selectedFilters.value)
+ ) {
+ return
+ }
+
+ activeStat.value = nextStat
+ }
+
+ return {
+ hasProjectContext,
+ projectGroups,
+ projects,
+ selectedProjectIds,
+ selectedTimeframeMode,
+ selectedTimeframe,
+ selectedLastTimeframeAmount,
+ selectedLastTimeframeUnit,
+ selectedCustomTimeframeStartDate,
+ selectedCustomTimeframeEndDate,
+ selectedGroupBy,
+ selectedBreakdown,
+ selectedFilters,
+ queryRefreshTimestamp,
+ queryResetToken,
+ isAnalyticsQueryBuilderDefault,
+ fetchRequest,
+ displayedSelectedProjectIds,
+ displayedSelectedGroupBy,
+ displayedSelectedBreakdown,
+ displayedSelectedFilters,
+ displayedFetchRequest,
+ displayedFilterOptions,
+ filterOptions,
+ isAnalyticsFilterOptionsLoading,
+ versionNumbersById,
+ versionPublishedDatesById,
+ versionProjectNamesById,
+ versionProjectIconUrlsById,
+ projectStatusById,
+ availableProjectStatuses,
+ projectVersionDownloadsById,
+ gameVersionDownloadsByVersion,
+ countryDownloadsByCode,
+ timeSlices,
+ displayedTimeSlices,
+ previousTimeSlices,
+ isLoading,
+ isRefetching,
+ activeStat,
+ activeGraphViewMode,
+ isRatioMode,
+ showChartEvents,
+ hiddenGraphDatasetIds,
+ isGraphDatasetSelectionActive,
+ selectedGraphDatasetIds,
+ currentTotals,
+ previousTotals,
+ percentChanges,
+ hasPreviousPeriodComparison,
+ getRelevantAnalyticsDashboardStats,
+ isAnalyticsDashboardStatRelevant,
+ refreshAnalyticsQuery,
+ resetAnalyticsQueryBuilder,
+ getVersionDisplayName,
+ getVersionPublishedDate,
+ getVersionProjectName,
+ getVersionProjectIconUrl,
+ setFetchRequest,
+ setActiveStat,
+ }
+}
diff --git a/apps/frontend/src/providers/analytics/query-builder-url.ts b/apps/frontend/src/providers/analytics/query-builder-url.ts
new file mode 100644
index 0000000000..0e07fae4af
--- /dev/null
+++ b/apps/frontend/src/providers/analytics/query-builder-url.ts
@@ -0,0 +1,742 @@
+import type { LocationQuery, LocationQueryValue, LocationQueryValueRaw } from 'vue-router'
+
+export type AnalyticsQueryFilterCategory =
+ | 'project'
+ | 'project_status'
+ | 'country'
+ | 'monetization'
+ | 'user_agent'
+ | 'download_reason'
+ | 'version_id'
+ | 'game_version'
+ | 'loader_type'
+
+export type AnalyticsTimeframePreset =
+ | 'today'
+ | 'yesterday'
+ | 'last_7_days'
+ | 'last_14_days'
+ | 'last_30_days'
+ | 'last_90_days'
+ | 'last_180_days'
+ | 'year_to_date'
+ | 'all_time'
+
+export type AnalyticsTimeframeMode = 'preset' | 'last' | 'custom_range' | 'custom_datetime_range'
+export type AnalyticsLastTimeframeUnit = 'hours' | 'days' | 'weeks' | 'months'
+
+export type AnalyticsGroupByPreset = '1h' | '6h' | 'day' | 'week' | 'month' | 'year'
+
+export type AnalyticsBreakdownPreset =
+ | 'none'
+ | 'project'
+ | 'country'
+ | 'monetization'
+ | 'user_agent'
+ | 'download_reason'
+ | 'version_id'
+ | 'loader'
+ | 'game_version'
+
+export type AnalyticsDashboardStat = 'views' | 'downloads' | 'revenue' | 'playtime'
+export type AnalyticsGraphViewMode = 'line' | 'area' | 'bar'
+
+export type AnalyticsSelectedFilters = Record
+
+export type AnalyticsQueryBuilderState = {
+ selectedProjectIds: string[]
+ selectedTimeframeMode: AnalyticsTimeframeMode
+ selectedTimeframe: AnalyticsTimeframePreset
+ selectedLastTimeframeAmount: number
+ selectedLastTimeframeUnit: AnalyticsLastTimeframeUnit
+ selectedCustomTimeframeStartDate: string
+ selectedCustomTimeframeEndDate: string
+ selectedGroupBy: AnalyticsGroupByPreset
+ selectedBreakdown: AnalyticsBreakdownPreset
+ selectedFilters: AnalyticsSelectedFilters
+}
+
+export type AnalyticsGraphState = {
+ activeStat: AnalyticsDashboardStat
+ activeGraphViewMode: AnalyticsGraphViewMode
+ isRatioMode: boolean
+ showChartEvents: boolean
+ hiddenGraphDatasetIds: string[]
+}
+
+type MutableRouteQuery = Record
+
+export const DEFAULT_TIMEFRAME_PRESET: AnalyticsTimeframePreset = 'last_30_days'
+export const DEFAULT_TIMEFRAME_MODE: AnalyticsTimeframeMode = 'preset'
+export const DEFAULT_LAST_TIMEFRAME_AMOUNT = 1
+export const DEFAULT_LAST_TIMEFRAME_UNIT: AnalyticsLastTimeframeUnit = 'days'
+export const DEFAULT_GROUP_BY_PRESET: AnalyticsGroupByPreset = 'day'
+export const DEFAULT_BREAKDOWN_PRESET: AnalyticsBreakdownPreset = 'none'
+export const DEFAULT_ANALYTICS_DASHBOARD_STAT: AnalyticsDashboardStat = 'views'
+export const DEFAULT_ANALYTICS_GRAPH_VIEW_MODE: AnalyticsGraphViewMode = 'line'
+export const DEFAULT_ANALYTICS_GRAPH_RATIO_MODE = false
+export const DEFAULT_ANALYTICS_GRAPH_EVENTS_VISIBILITY = true
+
+const TIMEFRAME_PRESET_VALUES: AnalyticsTimeframePreset[] = [
+ 'today',
+ 'yesterday',
+ 'last_7_days',
+ 'last_14_days',
+ 'last_30_days',
+ 'last_90_days',
+ 'last_180_days',
+ 'year_to_date',
+ 'all_time',
+]
+
+const TIMEFRAME_MODE_VALUES: AnalyticsTimeframeMode[] = [
+ 'preset',
+ 'last',
+ 'custom_range',
+ 'custom_datetime_range',
+]
+const LAST_TIMEFRAME_UNIT_VALUES: AnalyticsLastTimeframeUnit[] = [
+ 'hours',
+ 'days',
+ 'weeks',
+ 'months',
+]
+
+const GROUP_BY_PRESET_VALUES: AnalyticsGroupByPreset[] = [
+ '1h',
+ '6h',
+ 'day',
+ 'week',
+ 'month',
+ 'year',
+]
+
+const BREAKDOWN_PRESET_VALUES: AnalyticsBreakdownPreset[] = [
+ 'none',
+ 'project',
+ 'country',
+ 'monetization',
+ 'user_agent',
+ 'download_reason',
+ 'version_id',
+ 'loader',
+ 'game_version',
+]
+
+const ANALYTICS_DASHBOARD_STAT_VALUES: AnalyticsDashboardStat[] = [
+ 'views',
+ 'downloads',
+ 'revenue',
+ 'playtime',
+]
+
+const ANALYTICS_GRAPH_VIEW_MODE_VALUES: AnalyticsGraphViewMode[] = ['line', 'area', 'bar']
+
+const PROJECT_STATUS_FILTER_VALUES = [
+ 'approved',
+ 'archived',
+ 'rejected',
+ 'draft',
+ 'unlisted',
+ 'withheld',
+ 'private',
+ 'other',
+]
+
+const QUERY_KEY_PROJECT_IDS = 'a_projects'
+const QUERY_KEY_TIMEFRAME_MODE = 'a_timeframe_mode'
+const QUERY_KEY_TIMEFRAME = 'a_timeframe'
+const QUERY_KEY_TIMEFRAME_LAST_AMOUNT = 'a_timeframe_last_amount'
+const QUERY_KEY_TIMEFRAME_LAST_UNIT = 'a_timeframe_last_unit'
+const QUERY_KEY_TIMEFRAME_START = 'a_timeframe_start'
+const QUERY_KEY_TIMEFRAME_END = 'a_timeframe_end'
+const QUERY_KEY_GROUP_BY = 'a_group_by'
+const QUERY_KEY_BREAKDOWN = 'a_breakdown'
+const QUERY_KEY_FILTER_PROJECT_STATUS = 'a_project_status'
+const QUERY_KEY_FILTER_COUNTRY = 'a_country'
+const QUERY_KEY_FILTER_MONETIZATION = 'a_monetization'
+const QUERY_KEY_FILTER_USER_AGENT = 'a_user_agent'
+const QUERY_KEY_FILTER_LEGACY_DOWNLOAD_SOURCE = 'a_download_source'
+const QUERY_KEY_FILTER_DOWNLOAD_REASON = 'a_download_reason'
+const QUERY_KEY_FILTER_VERSION_ID = 'a_version_id'
+const QUERY_KEY_FILTER_GAME_VERSION = 'a_game_version'
+const QUERY_KEY_FILTER_LOADER_TYPE = 'a_loader_type'
+const QUERY_KEY_STAT = 'a_stat'
+const QUERY_KEY_GRAPH_VIEW_MODE = 'a_chart'
+const QUERY_KEY_GRAPH_RATIO_MODE = 'a_ratio'
+const QUERY_KEY_GRAPH_EVENTS_VISIBILITY = 'a_events'
+const QUERY_KEY_GRAPH_HIDDEN_SERIES = 'a_hidden_series'
+const QUERY_KEY_LEGACY_GRAPH_TOP_BREAKDOWN_FILTER = 'a_top_breakdown'
+const QUERY_KEY_LEGACY_GRAPH_LEGEND_EXPANSION = 'a_legend_expanded'
+
+const URL_FILTER_CATEGORIES: Exclude[] = [
+ 'project_status',
+ 'country',
+ 'monetization',
+ 'user_agent',
+ 'download_reason',
+ 'version_id',
+ 'game_version',
+ 'loader_type',
+]
+
+const FILTER_QUERY_KEY_BY_CATEGORY: Record<
+ Exclude,
+ string
+> = {
+ project_status: QUERY_KEY_FILTER_PROJECT_STATUS,
+ country: QUERY_KEY_FILTER_COUNTRY,
+ monetization: QUERY_KEY_FILTER_MONETIZATION,
+ user_agent: QUERY_KEY_FILTER_USER_AGENT,
+ download_reason: QUERY_KEY_FILTER_DOWNLOAD_REASON,
+ version_id: QUERY_KEY_FILTER_VERSION_ID,
+ game_version: QUERY_KEY_FILTER_GAME_VERSION,
+ loader_type: QUERY_KEY_FILTER_LOADER_TYPE,
+}
+
+const ANALYTICS_QUERY_KEYS = [
+ QUERY_KEY_PROJECT_IDS,
+ QUERY_KEY_TIMEFRAME_MODE,
+ QUERY_KEY_TIMEFRAME,
+ QUERY_KEY_TIMEFRAME_LAST_AMOUNT,
+ QUERY_KEY_TIMEFRAME_LAST_UNIT,
+ QUERY_KEY_TIMEFRAME_START,
+ QUERY_KEY_TIMEFRAME_END,
+ QUERY_KEY_GROUP_BY,
+ QUERY_KEY_BREAKDOWN,
+ QUERY_KEY_FILTER_PROJECT_STATUS,
+ QUERY_KEY_FILTER_COUNTRY,
+ QUERY_KEY_FILTER_MONETIZATION,
+ QUERY_KEY_FILTER_USER_AGENT,
+ QUERY_KEY_FILTER_LEGACY_DOWNLOAD_SOURCE,
+ QUERY_KEY_FILTER_DOWNLOAD_REASON,
+ QUERY_KEY_FILTER_VERSION_ID,
+ QUERY_KEY_FILTER_GAME_VERSION,
+ QUERY_KEY_FILTER_LOADER_TYPE,
+ QUERY_KEY_STAT,
+ QUERY_KEY_GRAPH_VIEW_MODE,
+ QUERY_KEY_GRAPH_RATIO_MODE,
+ QUERY_KEY_GRAPH_EVENTS_VISIBILITY,
+ QUERY_KEY_GRAPH_HIDDEN_SERIES,
+ QUERY_KEY_LEGACY_GRAPH_TOP_BREAKDOWN_FILTER,
+ QUERY_KEY_LEGACY_GRAPH_LEGEND_EXPANSION,
+]
+
+export function buildEmptySelectedFilters(): AnalyticsSelectedFilters {
+ return {
+ project: [],
+ project_status: [],
+ country: [],
+ monetization: [],
+ user_agent: [],
+ download_reason: [],
+ version_id: [],
+ game_version: [],
+ loader_type: [],
+ }
+}
+
+function parseListQueryValue(
+ value: LocationQueryValue | LocationQueryValue[] | undefined,
+): string[] {
+ if (value === undefined) return []
+
+ const values = Array.isArray(value) ? value : [value]
+ const parsedValues: string[] = []
+ for (const item of values) {
+ if (!item) continue
+ const parts = item.split(',')
+ for (const part of parts) {
+ const trimmed = part.trim()
+ if (trimmed.length > 0) {
+ parsedValues.push(trimmed)
+ }
+ }
+ }
+
+ return Array.from(new Set(parsedValues))
+}
+
+function normalizeFilterQueryValues(
+ category: Exclude,
+ values: string[],
+): string[] {
+ if (category === 'project_status') {
+ return values
+ .map((value) => value.trim().toLowerCase())
+ .filter((value) => PROJECT_STATUS_FILTER_VALUES.includes(value))
+ }
+
+ if (category !== 'loader_type') {
+ return values
+ }
+
+ return Array.from(
+ new Set(values.map((value) => value.trim().toLowerCase()).filter((value) => value.length > 0)),
+ )
+}
+
+function parsePresetQueryValue(
+ 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 parseAnalyticsBreakdownQueryValue(
+ value: LocationQueryValue | LocationQueryValue[] | undefined,
+ fallbackValue: AnalyticsBreakdownPreset,
+): AnalyticsBreakdownPreset {
+ const rawValue = Array.isArray(value) ? value[0] : value
+ if (rawValue === 'download_source') return 'user_agent'
+ return parsePresetQueryValue(value, BREAKDOWN_PRESET_VALUES, fallbackValue)
+}
+
+function parsePositiveIntegerQueryValue(
+ value: LocationQueryValue | LocationQueryValue[] | undefined,
+ fallbackValue: number,
+): number {
+ const rawValue = Array.isArray(value) ? value[0] : value
+ if (!rawValue) return fallbackValue
+
+ const parsedValue = Number.parseInt(rawValue, 10)
+ if (!Number.isFinite(parsedValue) || parsedValue < 1) return fallbackValue
+ return parsedValue
+}
+
+function parseEnabledQueryValue(
+ value: LocationQueryValue | LocationQueryValue[] | undefined,
+): boolean {
+ const rawValue = Array.isArray(value) ? value[0] : value
+ return rawValue === '1'
+}
+
+function parseVisibleQueryValue(
+ value: LocationQueryValue | LocationQueryValue[] | undefined,
+): boolean {
+ const rawValue = Array.isArray(value) ? value[0] : value
+ return rawValue !== '0'
+}
+
+function getLocalDateQueryValue(date: Date): string {
+ const year = date.getFullYear()
+ const month = String(date.getMonth() + 1).padStart(2, '0')
+ const day = String(date.getDate()).padStart(2, '0')
+ return `${year}-${month}-${day}`
+}
+
+function getDefaultCustomStartDate(): string {
+ const date = new Date()
+ date.setDate(date.getDate() - 1)
+ return getLocalDateQueryValue(date)
+}
+
+function getDefaultCustomEndDate(): string {
+ return getLocalDateQueryValue(new Date())
+}
+
+function getDefaultCustomDateTimeValue(value: string): string {
+ return new Date(`${value}T00:00:00`).toISOString()
+}
+
+function parseDateQueryValue(
+ value: LocationQueryValue | LocationQueryValue[] | undefined,
+ fallbackValue: string,
+): string {
+ const rawValue = Array.isArray(value) ? value[0] : value
+ if (!rawValue || !/^\d{4}-\d{2}-\d{2}$/.test(rawValue)) return fallbackValue
+
+ const date = new Date(`${rawValue}T00:00:00`)
+ if (Number.isNaN(date.getTime())) return fallbackValue
+ if (getLocalDateQueryValue(date) !== rawValue) return fallbackValue
+
+ return rawValue
+}
+
+function parseDateTimeQueryValue(
+ value: LocationQueryValue | LocationQueryValue[] | undefined,
+ fallbackValue: string,
+): string {
+ const rawValue = Array.isArray(value) ? value[0] : value
+ if (!rawValue || !/^\d{4}-\d{2}-\d{2}T/.test(rawValue)) return fallbackValue
+
+ const date = new Date(rawValue)
+ if (Number.isNaN(date.getTime())) return fallbackValue
+
+ return date.toISOString()
+}
+
+function isTimeframeRangeEndBeforeStart(
+ mode: AnalyticsTimeframeMode,
+ startValue: string,
+ endValue: string,
+): boolean {
+ if (mode === 'custom_datetime_range') {
+ return new Date(endValue).getTime() < new Date(startValue).getTime()
+ }
+
+ return endValue < startValue
+}
+
+export function buildDefaultAnalyticsGraphState(): AnalyticsGraphState {
+ return {
+ activeStat: DEFAULT_ANALYTICS_DASHBOARD_STAT,
+ activeGraphViewMode: DEFAULT_ANALYTICS_GRAPH_VIEW_MODE,
+ isRatioMode: DEFAULT_ANALYTICS_GRAPH_RATIO_MODE,
+ showChartEvents: DEFAULT_ANALYTICS_GRAPH_EVENTS_VISIBILITY,
+ hiddenGraphDatasetIds: [],
+ }
+}
+
+export function buildDefaultAnalyticsQueryBuilderState(
+ availableProjectIds: string[],
+): AnalyticsQueryBuilderState {
+ return {
+ selectedProjectIds: [...availableProjectIds],
+ selectedTimeframeMode: DEFAULT_TIMEFRAME_MODE,
+ selectedTimeframe: DEFAULT_TIMEFRAME_PRESET,
+ selectedLastTimeframeAmount: DEFAULT_LAST_TIMEFRAME_AMOUNT,
+ selectedLastTimeframeUnit: DEFAULT_LAST_TIMEFRAME_UNIT,
+ selectedCustomTimeframeStartDate: getDefaultCustomStartDate(),
+ selectedCustomTimeframeEndDate: getDefaultCustomEndDate(),
+ selectedGroupBy: DEFAULT_GROUP_BY_PRESET,
+ selectedBreakdown: getDefaultAnalyticsBreakdownPreset(availableProjectIds),
+ selectedFilters: buildEmptySelectedFilters(),
+ }
+}
+
+export function getDefaultAnalyticsBreakdownPreset(
+ selectedProjectIds: readonly string[],
+): AnalyticsBreakdownPreset {
+ return selectedProjectIds.length > 1 ? 'project' : DEFAULT_BREAKDOWN_PRESET
+}
+
+export function getAnalyticsBreakdownPresetForProjectSelection(
+ breakdown: AnalyticsBreakdownPreset,
+ selectedProjectIds: readonly string[],
+): AnalyticsBreakdownPreset {
+ const defaultBreakdown = getDefaultAnalyticsBreakdownPreset(selectedProjectIds)
+ if (
+ (breakdown === 'none' && defaultBreakdown === 'project') ||
+ (breakdown === 'project' && defaultBreakdown === 'none')
+ ) {
+ return defaultBreakdown
+ }
+
+ return breakdown
+}
+
+export function isAnalyticsQueryBuilderStateDefault(
+ state: AnalyticsQueryBuilderState,
+ availableProjectIds: string[],
+): boolean {
+ const defaultState = buildDefaultAnalyticsQueryBuilderState(availableProjectIds)
+ const areDefaultProjectsSelected =
+ availableProjectIds.length === 0
+ ? state.selectedProjectIds.length === 0
+ : areAllProjectsSelected(state.selectedProjectIds, availableProjectIds)
+
+ return (
+ areDefaultProjectsSelected &&
+ state.selectedTimeframeMode === defaultState.selectedTimeframeMode &&
+ state.selectedTimeframe === defaultState.selectedTimeframe &&
+ state.selectedLastTimeframeAmount === defaultState.selectedLastTimeframeAmount &&
+ state.selectedLastTimeframeUnit === defaultState.selectedLastTimeframeUnit &&
+ state.selectedCustomTimeframeStartDate === defaultState.selectedCustomTimeframeStartDate &&
+ state.selectedCustomTimeframeEndDate === defaultState.selectedCustomTimeframeEndDate &&
+ state.selectedGroupBy === defaultState.selectedGroupBy &&
+ state.selectedBreakdown === getDefaultAnalyticsBreakdownPreset(state.selectedProjectIds) &&
+ areSelectedFiltersEqual(state.selectedFilters, defaultState.selectedFilters)
+ )
+}
+
+export function isAnalyticsGraphStateDefault(state: AnalyticsGraphState): boolean {
+ const defaultState = buildDefaultAnalyticsGraphState()
+
+ return (
+ state.activeStat === defaultState.activeStat &&
+ state.activeGraphViewMode === defaultState.activeGraphViewMode &&
+ state.isRatioMode === defaultState.isRatioMode &&
+ state.showChartEvents === defaultState.showChartEvents &&
+ areStringArraysEqual(state.hiddenGraphDatasetIds, defaultState.hiddenGraphDatasetIds)
+ )
+}
+
+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 readAnalyticsGraphState(query: LocationQuery): AnalyticsGraphState {
+ const defaultState = buildDefaultAnalyticsGraphState()
+
+ return {
+ activeStat: parsePresetQueryValue(
+ query[QUERY_KEY_STAT],
+ ANALYTICS_DASHBOARD_STAT_VALUES,
+ defaultState.activeStat,
+ ),
+ activeGraphViewMode: parsePresetQueryValue(
+ query[QUERY_KEY_GRAPH_VIEW_MODE],
+ ANALYTICS_GRAPH_VIEW_MODE_VALUES,
+ defaultState.activeGraphViewMode,
+ ),
+ isRatioMode: parseEnabledQueryValue(query[QUERY_KEY_GRAPH_RATIO_MODE]),
+ showChartEvents: parseVisibleQueryValue(query[QUERY_KEY_GRAPH_EVENTS_VISIBILITY]),
+ hiddenGraphDatasetIds: parseListQueryValue(query[QUERY_KEY_GRAPH_HIDDEN_SERIES]),
+ }
+}
+
+export function readAnalyticsQueryBuilderState(
+ query: LocationQuery,
+ availableProjectIds: string[],
+): AnalyticsQueryBuilderState {
+ const defaultState = buildDefaultAnalyticsQueryBuilderState(availableProjectIds)
+ const selectedProjectIdsFromQuery = parseListQueryValue(query[QUERY_KEY_PROJECT_IDS])
+ const selectedProjectIds =
+ selectedProjectIdsFromQuery.length > 0
+ ? selectedProjectIdsFromQuery
+ : defaultState.selectedProjectIds
+
+ const selectedFilters = buildEmptySelectedFilters()
+ for (const category of URL_FILTER_CATEGORIES) {
+ const categoryQueryKey = FILTER_QUERY_KEY_BY_CATEGORY[category]
+ const rawQueryValue =
+ category === 'user_agent' && query[categoryQueryKey] === undefined
+ ? query[QUERY_KEY_FILTER_LEGACY_DOWNLOAD_SOURCE]
+ : query[categoryQueryKey]
+ selectedFilters[category] = normalizeFilterQueryValues(
+ category,
+ parseListQueryValue(rawQueryValue),
+ )
+ }
+
+ const selectedTimeframeMode = parsePresetQueryValue(
+ query[QUERY_KEY_TIMEFRAME_MODE],
+ TIMEFRAME_MODE_VALUES,
+ defaultState.selectedTimeframeMode,
+ )
+ const isCustomDateTimeRange = selectedTimeframeMode === 'custom_datetime_range'
+ const parseTimeframeRangeQueryValue = isCustomDateTimeRange
+ ? parseDateTimeQueryValue
+ : parseDateQueryValue
+ const customTimeframeStartFallback = isCustomDateTimeRange
+ ? getDefaultCustomDateTimeValue(defaultState.selectedCustomTimeframeStartDate)
+ : defaultState.selectedCustomTimeframeStartDate
+ const customTimeframeEndFallback = isCustomDateTimeRange
+ ? getDefaultCustomDateTimeValue(defaultState.selectedCustomTimeframeEndDate)
+ : defaultState.selectedCustomTimeframeEndDate
+
+ const selectedCustomTimeframeStartDate = parseTimeframeRangeQueryValue(
+ query[QUERY_KEY_TIMEFRAME_START],
+ customTimeframeStartFallback,
+ )
+ const rawCustomTimeframeEndDate = parseTimeframeRangeQueryValue(
+ query[QUERY_KEY_TIMEFRAME_END],
+ customTimeframeEndFallback,
+ )
+ const selectedCustomTimeframeEndDate = isTimeframeRangeEndBeforeStart(
+ selectedTimeframeMode,
+ selectedCustomTimeframeStartDate,
+ rawCustomTimeframeEndDate,
+ )
+ ? selectedCustomTimeframeStartDate
+ : rawCustomTimeframeEndDate
+
+ const selectedBreakdown = getAnalyticsBreakdownPresetForProjectSelection(
+ parseAnalyticsBreakdownQueryValue(
+ query[QUERY_KEY_BREAKDOWN],
+ getDefaultAnalyticsBreakdownPreset(selectedProjectIds),
+ ),
+ selectedProjectIds,
+ )
+
+ return {
+ selectedProjectIds,
+ selectedTimeframeMode,
+ selectedTimeframe: parsePresetQueryValue(
+ query[QUERY_KEY_TIMEFRAME],
+ TIMEFRAME_PRESET_VALUES,
+ defaultState.selectedTimeframe,
+ ),
+ selectedLastTimeframeAmount: parsePositiveIntegerQueryValue(
+ query[QUERY_KEY_TIMEFRAME_LAST_AMOUNT],
+ defaultState.selectedLastTimeframeAmount,
+ ),
+ selectedLastTimeframeUnit: parsePresetQueryValue(
+ query[QUERY_KEY_TIMEFRAME_LAST_UNIT],
+ LAST_TIMEFRAME_UNIT_VALUES,
+ defaultState.selectedLastTimeframeUnit,
+ ),
+ selectedCustomTimeframeStartDate,
+ selectedCustomTimeframeEndDate,
+ selectedGroupBy: parsePresetQueryValue(
+ query[QUERY_KEY_GROUP_BY],
+ GROUP_BY_PRESET_VALUES,
+ defaultState.selectedGroupBy,
+ ),
+ selectedBreakdown,
+ selectedFilters,
+ }
+}
+
+export function hasAnalyticsBreakdownQuery(query: LocationQuery): boolean {
+ return parseListQueryValue(query[QUERY_KEY_BREAKDOWN]).length > 0
+}
+
+export function hasAnalyticsProjectSelectionQuery(query: LocationQuery): boolean {
+ return parseListQueryValue(query[QUERY_KEY_PROJECT_IDS]).length > 0
+}
+
+export function buildAnalyticsQueryBuilderRouteQuery(
+ currentRouteQuery: LocationQuery,
+ state: AnalyticsQueryBuilderState,
+ availableProjectIds: string[],
+ graphState?: AnalyticsGraphState,
+): MutableRouteQuery {
+ const nextRouteQuery = {
+ ...currentRouteQuery,
+ } as MutableRouteQuery
+
+ const projectIdsQueryValue = areAllProjectsSelected(state.selectedProjectIds, availableProjectIds)
+ ? undefined
+ : serializeListQueryValue(state.selectedProjectIds)
+ const isCustomTimeframeMode =
+ state.selectedTimeframeMode === 'custom_range' ||
+ state.selectedTimeframeMode === 'custom_datetime_range'
+
+ nextRouteQuery[QUERY_KEY_PROJECT_IDS] = projectIdsQueryValue
+ nextRouteQuery[QUERY_KEY_TIMEFRAME_MODE] =
+ state.selectedTimeframeMode !== DEFAULT_TIMEFRAME_MODE ? state.selectedTimeframeMode : undefined
+ nextRouteQuery[QUERY_KEY_TIMEFRAME] =
+ state.selectedTimeframeMode === 'preset' && state.selectedTimeframe !== DEFAULT_TIMEFRAME_PRESET
+ ? state.selectedTimeframe
+ : undefined
+ nextRouteQuery[QUERY_KEY_TIMEFRAME_LAST_AMOUNT] =
+ state.selectedTimeframeMode === 'last' ? String(state.selectedLastTimeframeAmount) : undefined
+ nextRouteQuery[QUERY_KEY_TIMEFRAME_LAST_UNIT] =
+ state.selectedTimeframeMode === 'last' ? state.selectedLastTimeframeUnit : undefined
+ nextRouteQuery[QUERY_KEY_TIMEFRAME_START] = isCustomTimeframeMode
+ ? state.selectedCustomTimeframeStartDate
+ : undefined
+ nextRouteQuery[QUERY_KEY_TIMEFRAME_END] = isCustomTimeframeMode
+ ? state.selectedCustomTimeframeEndDate
+ : undefined
+ nextRouteQuery[QUERY_KEY_GROUP_BY] =
+ state.selectedGroupBy !== DEFAULT_GROUP_BY_PRESET ? state.selectedGroupBy : undefined
+ const defaultBreakdown = getDefaultAnalyticsBreakdownPreset(state.selectedProjectIds)
+ const selectedBreakdown = getAnalyticsBreakdownPresetForProjectSelection(
+ state.selectedBreakdown,
+ state.selectedProjectIds,
+ )
+ nextRouteQuery[QUERY_KEY_BREAKDOWN] =
+ selectedBreakdown !== defaultBreakdown ? selectedBreakdown : undefined
+
+ for (const category of URL_FILTER_CATEGORIES) {
+ const categoryQueryKey = FILTER_QUERY_KEY_BY_CATEGORY[category]
+ nextRouteQuery[categoryQueryKey] = serializeListQueryValue(state.selectedFilters[category])
+ }
+ nextRouteQuery[QUERY_KEY_FILTER_LEGACY_DOWNLOAD_SOURCE] = undefined
+
+ if (graphState) {
+ nextRouteQuery[QUERY_KEY_STAT] =
+ graphState.activeStat !== DEFAULT_ANALYTICS_DASHBOARD_STAT ? graphState.activeStat : undefined
+ nextRouteQuery[QUERY_KEY_GRAPH_VIEW_MODE] =
+ graphState.activeGraphViewMode !== DEFAULT_ANALYTICS_GRAPH_VIEW_MODE
+ ? graphState.activeGraphViewMode
+ : undefined
+ nextRouteQuery[QUERY_KEY_GRAPH_RATIO_MODE] = graphState.isRatioMode ? '1' : undefined
+ nextRouteQuery[QUERY_KEY_GRAPH_EVENTS_VISIBILITY] = graphState.showChartEvents ? undefined : '0'
+ nextRouteQuery[QUERY_KEY_LEGACY_GRAPH_TOP_BREAKDOWN_FILTER] = undefined
+ nextRouteQuery[QUERY_KEY_LEGACY_GRAPH_LEGEND_EXPANSION] = undefined
+ nextRouteQuery[QUERY_KEY_GRAPH_HIDDEN_SERIES] = serializeListQueryValue(
+ [...graphState.hiddenGraphDatasetIds].sort((left, right) => left.localeCompare(right)),
+ )
+ }
+
+ return nextRouteQuery
+}
+
+export function hasAnalyticsQueryBuilderRouteChange(
+ currentRouteQuery: LocationQuery,
+ nextRouteQuery: MutableRouteQuery,
+): boolean {
+ return ANALYTICS_QUERY_KEYS.some(
+ (key) => !areQueryValuesEqual(currentRouteQuery[key], nextRouteQuery[key]),
+ )
+}
diff --git a/apps/frontend/src/utils/analytics.js b/apps/frontend/src/utils/analytics.js
deleted file mode 100644
index bb409886a6..0000000000
--- a/apps/frontend/src/utils/analytics.js
+++ /dev/null
@@ -1,493 +0,0 @@
-import { injectI18n, useDebugLogger } from '@modrinth/ui'
-import dayjs from 'dayjs'
-import { computed, ref, watch } from 'vue'
-
-import { useTheme } from '~/composables/nuxt-accessors.ts'
-
-// note: build step can miss unix import for some reason, so
-// we have to import it like this
-
-const { unix } = dayjs
-
-export function useCountryNames(style = 'long') {
- const { locale } = injectI18n()
- const displayNames = computed(
- () => new Intl.DisplayNames([locale.value], { type: 'region', style }),
- )
- return function formatCountryName(code) {
- try {
- return displayNames.value.of(code) ?? code
- } catch {
- return code
- }
- }
-}
-
-export const countryCodeToName = (code) => {
- const formatCountryName = useCountryNames()
-
- return formatCountryName(code)
-}
-
-export const countryCodeToFlag = (code) => {
- if (code === 'XX') {
- return undefined
- }
- return `https://flagcdn.com/h240/${code.toLowerCase()}.png`
-}
-
-export const formatTimestamp = (timestamp) => {
- return unix(timestamp).format()
-}
-
-export const formatPercent = (value, sum) => {
- return `${((value / sum) * 100).toFixed(2)}%`
-}
-
-const hashProjectId = (projectId) => {
- return projectId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % 30
-}
-
-export const defaultColors = [
- '#ff496e', // Original: Bright pink
- '#ffa347', // Original: Bright orange
- '#1bd96a', // Original: Bright green
- '#4f9cff', // Original: Bright blue
- '#c78aff', // Original: Bright purple
- '#ffeb3b', // Added: Bright yellow
- '#00bcd4', // Added: Bright cyan
- '#ff5722', // Added: Bright red-orange
- '#9c27b0', // Added: Bright deep purple
- '#3f51b5', // Added: Bright indigo
- '#009688', // Added: Bright teal
- '#cddc39', // Added: Bright lime
- '#795548', // Added: Bright brown
- '#607d8b', // Added: Bright blue-grey
-]
-
-/**
- * @param {string | number} value
- * @returns {string} color
- */
-export const getDefaultColor = (value) => {
- if (typeof value === 'string') {
- value = hashProjectId(value)
- }
- return defaultColors[value % defaultColors.length]
-}
-
-export const intToRgba = (color, projectId = 'Unknown', theme = 'dark', alpha = '1') => {
- const hash = hashProjectId(projectId)
-
- if (!color || color === 0) {
- return getDefaultColor(hash)
- }
-
- // if color is a string, return that instead
- if (typeof color === 'string') {
- return color
- }
-
- // Extract RGB values
- let r = (color >> 16) & 255
- let g = (color >> 8) & 255
- let b = color & 255
-
- // Hash function to alter color slightly based on project_id
- r = (r + hash) % 256
- g = (g + hash) % 256
- b = (b + hash) % 256
-
- // Adjust brightness for theme
- const brightness = r * 0.299 + g * 0.587 + b * 0.114
- const threshold = theme === 'dark' ? 50 : 200
- if (theme === 'dark' && brightness < threshold) {
- // Increase brightness for dark theme
- r += threshold / 2
- g += threshold / 2
- b += threshold / 2
- } else if (theme === 'light' && brightness > threshold) {
- // Decrease brightness for light theme
- r -= threshold / 4
- g -= threshold / 4
- b -= threshold / 4
- }
-
- // Ensure RGB values are within 0-255
- r = Math.min(255, Math.max(0, r))
- g = Math.min(255, Math.max(0, g))
- b = Math.min(255, Math.max(0, b))
-
- return `rgba(${r}, ${g}, ${b}, ${alpha})`
-}
-
-const emptyAnalytics = {
- sum: 0,
- len: 0,
- chart: {
- labels: [],
- data: [],
- sumData: [
- {
- name: '',
- data: [],
- },
- ],
- colors: [],
- defaultColors: [],
- },
- projectIds: [],
-}
-
-export const analyticsSetToCSVString = (analytics) => {
- if (!analytics) {
- return ''
- }
-
- const newline = '\n'
- const labels = analytics.chart.labels
- const projects = analytics.chart.data
-
- const projectNames = projects.map((p) => p.name)
-
- const header = ['Date', ...projectNames].join(',')
-
- const data = labels.map((label, i) => {
- const values = projects.map((p) => p.data?.[i] || '')
- return [label, ...values].join(',')
- })
-
- return [header, ...data].join(newline)
-}
-
-export const processAnalytics = (category, projects, labelFn, sortFn, mapFn, chartName, theme) => {
- if (!category || !projects) {
- return emptyAnalytics
- }
-
- // Get an intersection of category keys and project ids
- const projectIds = projects.map((p) => p.id)
- const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id))
-
- if (!loadedProjectIds?.length) {
- return emptyAnalytics
- }
-
- const loadedProjectData = loadedProjectIds.map((id) => category[id])
-
- // Convert each project's data into a list of [unix_ts_str, number] pairs
- const projectData = loadedProjectData
- .map((data) => Object.entries(data))
- .map((data) => data.sort(sortFn))
- .map((data) => (mapFn ? data.map(mapFn) : data))
-
- // Each project may not include the same timestamps, so we should use the union of all timestamps
- const timestamps = Array.from(
- new Set(projectData.flatMap((data) => data.map(([ts]) => ts))),
- ).sort()
-
- const chartData = projectData
- .map((data, i) => {
- const project = projects.find((p) => p.id === loadedProjectIds[i])
- if (!project) {
- throw new Error(`Project ${loadedProjectIds[i]} not found`)
- }
-
- return {
- name: `${project.title}`,
- data: timestamps.map((ts) => {
- const entry = data.find(([ets]) => ets === ts)
- return entry ? entry[1] : 0
- }),
- id: project.id,
- color: project.color,
- }
- })
- .sort(
- (a, b) =>
- b.data.reduce((acc, cur) => acc + cur, 0) - a.data.reduce((acc, cur) => acc + cur, 0),
- )
-
- const projectIdsSortedBySum = chartData.map((p) => p.id)
-
- return {
- // The total count of all the values across all projects
- sum: projectData.reduce((acc, cur) => acc + cur.reduce((a, c) => a + c[1], 0), 0),
- len: timestamps.length,
- chart: {
- labels: timestamps.map(labelFn),
- data: chartData.map((x) => ({ name: x.name, data: x.data })),
- sumData: [
- {
- name: chartName,
- data: timestamps.map((ts) => {
- const entries = projectData.flat().filter(([ets]) => ets === ts)
- return entries.reduce((acc, cur) => acc + cur[1], 0)
- }),
- },
- ],
- colors: projectData.map((_, i) => {
- const project = chartData[i]
-
- return intToRgba(project.color, project.id, theme)
- }),
- defaultColors: projectData.map((_, i) => {
- const project = chartData[i]
- return getDefaultColor(project.id)
- }),
- },
- projectIds: projectIdsSortedBySum,
- }
-}
-
-export const processAnalyticsByCountry = (category, projects, sortFn) => {
- if (!category || !projects) {
- return {
- sum: 0,
- len: 0,
- data: [],
- }
- }
-
- // Get an intersection of category keys and project ids
- const projectIds = projects.map((p) => p.id)
- const loadedProjectIds = Object.keys(category).filter((id) => projectIds.includes(id))
-
- if (!loadedProjectIds?.length) {
- return {
- sum: 0,
- len: 0,
- data: [],
- }
- }
-
- const loadedProjectData = loadedProjectIds.map((id) => category[id])
-
- // Convert each project's data into a list of [countrycode, number] pairs
- // Fold into a single list with summed values for each country over all projects
-
- const countrySums = new Map()
-
- loadedProjectData.forEach((data) => {
- Object.entries(data).forEach(([country, value]) => {
- const countryCode = country || 'XX'
- const current = countrySums.get(countryCode) || 0
- countrySums.set(countryCode, current + value)
- })
- })
-
- const entries = Array.from(countrySums.entries())
-
- return {
- sum: entries.reduce((acc, cur) => acc + cur[1], 0),
- len: entries.length,
- data: entries.sort(sortFn),
- }
-}
-
-const sortCount = ([, a], [, b]) => b - a
-const sortTimestamp = ([a], [b]) => a - b
-const roundValue = ([ts, value]) => [ts, Math.round(parseFloat(value) * 100) / 100]
-
-const processCountryAnalytics = (c, projects) => processAnalyticsByCountry(c, projects, sortCount)
-const processNumberAnalytics = (c, projects, theme) =>
- processAnalytics(c, projects, formatTimestamp, sortTimestamp, null, 'Downloads', theme)
-const processRevAnalytics = (c, projects, theme) =>
- processAnalytics(c, projects, formatTimestamp, sortTimestamp, roundValue, 'Revenue', theme)
-
-const useFetchAnalytics = (
- url,
- baseOptions = {
- apiVersion: 3,
- },
-) => {
- return useBaseFetch(url, baseOptions)
-}
-
-/**
- * @param {Ref} projects
- * @param {undefined | () => any} onDataRefresh
- */
-export const useFetchAllAnalytics = (
- onDataRefresh,
- projects,
- selectedProjects,
- personalRevenue = false,
- startDate = ref(dayjs().subtract(30, 'days')),
- endDate = ref(dayjs()),
- timeResolution = ref(1440),
-) => {
- const debug = useDebugLogger('useFetchAllAnalytics')
- debug('init', {
- projectCount: projects.value?.length,
- personalRevenue,
- startDate: startDate.value?.toISOString(),
- endDate: endDate.value?.toISOString(),
- })
-
- const downloadData = ref(null)
- const viewData = ref(null)
- const revenueData = ref(null)
- const downloadsByCountry = ref(null)
- const viewsByCountry = ref(null)
- const loading = ref(true)
- const error = ref(null)
-
- const formattedData = computed(() => ({
- downloads: processNumberAnalytics(downloadData.value, selectedProjects.value),
- views: processNumberAnalytics(viewData.value, selectedProjects.value),
- revenue: processRevAnalytics(revenueData.value, selectedProjects.value),
- downloadsByCountry: processCountryAnalytics(downloadsByCountry.value, selectedProjects.value),
- viewsByCountry: processCountryAnalytics(viewsByCountry.value, selectedProjects.value),
- }))
-
- const theme = useTheme()
-
- const totalData = computed(() => ({
- downloads: processNumberAnalytics(downloadData.value, projects.value, theme.active),
- views: processNumberAnalytics(viewData.value, projects.value, theme.active),
- revenue: processRevAnalytics(revenueData.value, projects.value, theme.active),
- }))
-
- const buildQuery = () => {
- const q = {
- start_date: startDate.value.toISOString(),
- end_date: endDate.value.toISOString(),
- resolution_minutes: timeResolution.value,
- }
-
- if (projects.value?.length) {
- q.project_ids = JSON.stringify(projects.value.map((p) => p.id))
- }
-
- return q
- }
-
- const fetchData = async (query) => {
- debug('fetchData called', { query })
- const normalQuery = new URLSearchParams(query)
- const revenueQuery = new URLSearchParams(query)
-
- if (personalRevenue) {
- revenueQuery.delete('project_ids')
- }
-
- const qs = normalQuery.toString()
- const revenueQs = revenueQuery.toString()
-
- try {
- loading.value = true
- error.value = null
-
- debug('fetching all 5 endpoints...')
- const responses = await Promise.all([
- useFetchAnalytics(`analytics/downloads?${qs}`),
- useFetchAnalytics(`analytics/views?${qs}`),
- useFetchAnalytics(`analytics/revenue?${revenueQs}`),
- useFetchAnalytics(`analytics/countries/downloads?${qs}`),
- useFetchAnalytics(`analytics/countries/views?${qs}`),
- ])
- debug('all 5 endpoints resolved', {
- downloads: Object.keys(responses[0] || {}).length,
- views: Object.keys(responses[1] || {}).length,
- revenue: Object.keys(responses[2] || {}).length,
- })
-
- const projectIds = new Set()
- if (projects.value) {
- projects.value.forEach((p) => projectIds.add(p.id))
- } else {
- Object.keys(responses[0] || {}).forEach((id) => projectIds.add(id))
- }
-
- debug('filtering to projectIds', { count: projectIds.size })
-
- const filterProjectIds = (data) => {
- const filtered = {}
- Object.entries(data).forEach(([id, values]) => {
- if (projectIds.has(id)) {
- filtered[id] = values
- }
- })
- return filtered
- }
-
- downloadData.value = filterProjectIds(responses[0] || {})
- viewData.value = filterProjectIds(responses[1] || {})
- revenueData.value = filterProjectIds(responses[2] || {})
-
- downloadsByCountry.value = responses[3] || {}
- viewsByCountry.value = responses[4] || {}
- } catch (e) {
- debug('fetchData error', e)
- error.value = e
- } finally {
- loading.value = false
- debug('fetchData done, loading=false')
- }
- }
-
- const fetch = async () => {
- debug('fetch() called', { projectCount: projects.value?.length })
- await fetchData(buildQuery())
- if (onDataRefresh) {
- onDataRefresh()
- }
- }
-
- watch(
- [() => startDate.value, () => endDate.value, () => timeResolution.value, () => projects.value],
- (newVals, oldVals) => {
- debug('watch triggered', { new: newVals, old: oldVals })
- fetch()
- },
- )
-
- const validProjectIds = computed(() => {
- const ids = new Set()
-
- if (downloadData.value) {
- Object.keys(downloadData.value).forEach((id) => ids.add(id))
- }
-
- if (viewData.value) {
- Object.keys(viewData.value).forEach((id) => ids.add(id))
- }
-
- if (revenueData.value) {
- // revenue will always have all project ids, but the ids may have an empty object or a ton of keys below a cent (0.00...) as values. We want to filter those out
- Object.entries(revenueData.value).forEach(([id, data]) => {
- if (Object.keys(data).length) {
- if (Object.values(data).some((v) => v >= 0.01)) {
- ids.add(id)
- }
- }
- })
- }
-
- return Array.from(ids)
- })
-
- return {
- // Configuration
- timeResolution,
-
- startDate,
- endDate,
-
- // Data
- downloadData,
- viewData,
- revenueData,
- downloadsByCountry,
- viewsByCountry,
-
- // Computed state
- validProjectIds,
- formattedData,
- totalData,
- loading,
- error,
- fetch,
- }
-}
diff --git a/packages/api-client/src/modules/index.ts b/packages/api-client/src/modules/index.ts
index 7219d12e55..4c14f580e5 100644
--- a/packages/api-client/src/modules/index.ts
+++ b/packages/api-client/src/modules/index.ts
@@ -13,6 +13,7 @@ import { KyrosFilesV0Module } from './kyros/files/v0'
import { KyrosLogsV1Module } from './kyros/logs/v1'
import { LabrinthVersionsV2Module, LabrinthVersionsV3Module } from './labrinth'
import { LabrinthAffiliateInternalModule } from './labrinth/affiliate/internal'
+import { LabrinthAnalyticsV3Module } from './labrinth/analytics/v3'
import { LabrinthAuthInternalModule } from './labrinth/auth/internal'
import { LabrinthAuthV2Module } from './labrinth/auth/v2'
import { LabrinthBillingInternalModule } from './labrinth/billing/internal'
@@ -72,6 +73,7 @@ export const MODULE_REGISTRY = {
kyros_files_v0: KyrosFilesV0Module,
kyros_logs_v1: KyrosLogsV1Module,
labrinth_affiliate_internal: LabrinthAffiliateInternalModule,
+ labrinth_analytics_v3: LabrinthAnalyticsV3Module,
labrinth_auth_internal: LabrinthAuthInternalModule,
labrinth_auth_v2: LabrinthAuthV2Module,
labrinth_billing_internal: LabrinthBillingInternalModule,
diff --git a/packages/api-client/src/modules/labrinth/analytics/v3.ts b/packages/api-client/src/modules/labrinth/analytics/v3.ts
new file mode 100644
index 0000000000..2ab5178b10
--- /dev/null
+++ b/packages/api-client/src/modules/labrinth/analytics/v3.ts
@@ -0,0 +1,97 @@
+import { AbstractModule } from '../../../core/abstract-module'
+import type { Labrinth } from '../types'
+
+export class LabrinthAnalyticsV3Module extends AbstractModule {
+ public getModuleID(): string {
+ return 'labrinth_analytics_v3'
+ }
+
+ /**
+ * Fetch analytics data for the authenticated user's accessible projects
+ * and affiliate codes.
+ *
+ * @param data - Analytics request body defining time range and requested metrics
+ * @returns Promise resolving to the analytics response, with time slices in `metrics`
+ *
+ * @example
+ * ```typescript
+ * const response = await client.labrinth.analytics_v3.fetch({
+ * time_range: {
+ * start: '2026-01-01T00:00:00Z',
+ * end: '2026-02-01T00:00:00Z',
+ * resolution: { slices: 31 },
+ * },
+ * project_ids: ['A1B2C3D4'],
+ * return_metrics: {
+ * project_views: { bucket_by: ['project_id'] },
+ * },
+ * })
+ * const timeSlices = response.metrics
+ * ```
+ */
+ public async fetch(
+ data: Labrinth.Analytics.v3.FetchRequest,
+ ): Promise {
+ return this.client.request('/analytics', {
+ api: 'labrinth',
+ version: 3,
+ method: 'POST',
+ body: data,
+ })
+ }
+
+ /**
+ * Fetch all analytics events.
+ * GET /v3/analytics-event
+ */
+ public async getEvents(): Promise {
+ return this.client.request('/analytics-event', {
+ api: 'labrinth',
+ version: 3,
+ method: 'GET',
+ })
+ }
+
+ /**
+ * Create an analytics event.
+ * POST /v3/analytics-event
+ */
+ public async createEvent(
+ data: Labrinth.Analytics.v3.AnalyticsEventUpsert,
+ ): Promise {
+ return this.client.request('/analytics-event', {
+ api: 'labrinth',
+ version: 3,
+ method: 'POST',
+ body: data,
+ })
+ }
+
+ /**
+ * Edit an analytics event.
+ * PATCH /v3/analytics-event/{id}
+ */
+ public async editEvent(
+ id: Labrinth.Analytics.v3.AnalyticsEventId,
+ data: Labrinth.Analytics.v3.AnalyticsEventUpsert,
+ ): Promise {
+ return this.client.request(`/analytics-event/${id}`, {
+ api: 'labrinth',
+ version: 3,
+ method: 'PATCH',
+ body: data,
+ })
+ }
+
+ /**
+ * Delete an analytics event.
+ * DELETE /v3/analytics-event/{id}
+ */
+ public async deleteEvent(id: Labrinth.Analytics.v3.AnalyticsEventId): Promise {
+ return this.client.request(`/analytics-event/${id}`, {
+ api: 'labrinth',
+ version: 3,
+ method: 'DELETE',
+ })
+ }
+}
diff --git a/packages/api-client/src/modules/labrinth/index.ts b/packages/api-client/src/modules/labrinth/index.ts
index 883bac31d7..d5eedb3adc 100644
--- a/packages/api-client/src/modules/labrinth/index.ts
+++ b/packages/api-client/src/modules/labrinth/index.ts
@@ -1,3 +1,4 @@
+export * from './analytics/v3'
export * from './auth/internal'
export * from './auth/v2'
export * from './billing/internal'
diff --git a/packages/api-client/src/modules/labrinth/types.ts b/packages/api-client/src/modules/labrinth/types.ts
index 098e46d19f..b3d4daa081 100644
--- a/packages/api-client/src/modules/labrinth/types.ts
+++ b/packages/api-client/src/modules/labrinth/types.ts
@@ -238,6 +238,164 @@ export namespace Labrinth {
}
}
+ export namespace Analytics {
+ export namespace v3 {
+ export type AnalyticsEventId = number
+ export type AnalyticsEventMetricKind = 'views' | 'revenue' | 'downloads' | 'playtime'
+
+ export type AnalyticsEvent = {
+ announcement_url: string | null
+ for_metric_kind: AnalyticsEventMetricKind[] | null
+ title: string
+ ends: string
+ id: AnalyticsEventId
+ starts: string
+ }
+
+ export type AnalyticsEventUpsert = {
+ announcement_url: string | null
+ for_metric_kind: AnalyticsEventMetricKind[] | null
+ title: string
+ ends: string
+ starts: string
+ }
+
+ export type FetchRequest = {
+ time_range: TimeRange
+ return_metrics: ReturnMetrics
+ project_ids?: string[]
+ }
+
+ export type TimeRange = {
+ start: string
+ end: string
+ resolution: TimeRangeResolution
+ }
+
+ export type TimeRangeResolution = { slices: number } | { minutes: number }
+
+ export type ReturnMetrics = {
+ project_views?: Metrics
+ project_downloads?: Metrics
+ project_playtime?: Metrics
+ project_revenue?: Metrics
+ affiliate_code_clicks?: Metrics
+ affiliate_code_conversions?: Metrics
+ affiliate_code_revenue?: Metrics
+ }
+
+ export type Metrics = {
+ bucket_by?: F[]
+ }
+
+ export type ProjectViewsField =
+ | 'project_id'
+ | 'domain'
+ | 'site_path'
+ | 'monetized'
+ | 'country'
+
+ export type ProjectDownloadsField =
+ | 'project_id'
+ | 'version_id'
+ | 'user_agent'
+ | 'site_path'
+ | 'country'
+ | 'monetized'
+ | 'reason'
+ | 'game_version'
+ | 'loader'
+
+ export type ProjectPlaytimeField =
+ | 'project_id'
+ | 'version_id'
+ | 'loader'
+ | 'game_version'
+ | 'country'
+
+ export type ProjectRevenueField = 'project_id'
+
+ export type DownloadReason = 'standalone' | 'dependency' | 'modpack' | 'update'
+
+ export type AffiliateCodeClicksField = 'affiliate_code_id'
+
+ export type AffiliateCodeConversionsField = 'affiliate_code_id'
+
+ export type AffiliateCodeRevenueField = 'affiliate_code_id'
+
+ export type FetchResponse = {
+ metrics: TimeSlice[]
+ }
+
+ export type TimeSlice = AnalyticsData[]
+
+ export type AnalyticsData = ProjectAnalytics | AffiliateCodeAnalytics
+
+ export type ProjectAnalytics = {
+ source_project: string
+ } & ProjectMetrics
+
+ export type ProjectMetrics =
+ | ({ metric_kind: 'views' } & ProjectViews)
+ | ({ metric_kind: 'downloads' } & ProjectDownloads)
+ | ({ metric_kind: 'playtime' } & ProjectPlaytime)
+ | ({ metric_kind: 'revenue' } & ProjectRevenue)
+
+ export type ProjectViews = {
+ domain?: string
+ site_path?: string
+ monetized?: boolean
+ country?: string
+ views: number
+ }
+
+ export type ProjectDownloads = {
+ user_agent?: string
+ site_path?: string
+ version_id?: string
+ country?: string
+ monetized?: boolean
+ reason?: DownloadReason
+ game_version?: string
+ loader?: string
+ downloads: number
+ }
+
+ export type ProjectPlaytime = {
+ version_id?: string
+ loader?: string
+ game_version?: string
+ country?: string
+ seconds: number
+ }
+
+ export type ProjectRevenue = {
+ revenue: string
+ }
+
+ export type AffiliateCodeAnalytics = {
+ source_affiliate_code: string
+ } & AffiliateCodeMetrics
+
+ export type AffiliateCodeMetrics =
+ | ({ metric_kind: 'clicks' } & AffiliateCodeClicks)
+ | ({ metric_kind: 'conversions' } & AffiliateCodeConversions)
+ | ({ metric_kind: 'revenue' } & AffiliateCodeRevenue)
+
+ export type AffiliateCodeClicks = {
+ clicks: number
+ }
+
+ export type AffiliateCodeConversions = {
+ conversions: number
+ }
+
+ export type AffiliateCodeRevenue = {
+ revenue: string
+ }
+ }
+ }
+
export namespace Auth {
export namespace Internal {
export type SubscriptionStatus = {
diff --git a/packages/assets/generated-icons.ts b/packages/assets/generated-icons.ts
index c5cb8747fe..d854abd3a1 100644
--- a/packages/assets/generated-icons.ts
+++ b/packages/assets/generated-icons.ts
@@ -46,6 +46,9 @@ import _CalendarArrowDownIcon from './icons/calendar-arrow-down.svg?component'
import _CardIcon from './icons/card.svg?component'
import _ChangeSkinIcon from './icons/change-skin.svg?component'
import _ChartIcon from './icons/chart.svg?component'
+import _ChartAreaIcon from './icons/chart-area.svg?component'
+import _ChartColumnBigIcon from './icons/chart-column-big.svg?component'
+import _ChartSplineIcon from './icons/chart-spline.svg?component'
import _CheckIcon from './icons/check.svg?component'
import _CheckCheckIcon from './icons/check-check.svg?component'
import _CheckCircleIcon from './icons/check-circle.svg?component'
@@ -179,6 +182,7 @@ import _PaintbrushIcon from './icons/paintbrush.svg?component'
import _PaletteIcon from './icons/palette.svg?component'
import _PencilIcon from './icons/pencil.svg?component'
import _PickaxeIcon from './icons/pickaxe.svg?component'
+import _PinIcon from './icons/pin.svg?component'
import _PlayIcon from './icons/play.svg?component'
import _PlugIcon from './icons/plug.svg?component'
import _PlusIcon from './icons/plus.svg?component'
@@ -370,6 +374,8 @@ import _ToggleRightIcon from './icons/toggle-right.svg?component'
import _TransferIcon from './icons/transfer.svg?component'
import _TrashIcon from './icons/trash.svg?component'
import _TrashExclamationIcon from './icons/trash-exclamation.svg?component'
+import _TrendingDownIcon from './icons/trending-down.svg?component'
+import _TrendingUpIcon from './icons/trending-up.svg?component'
import _TriangleAlertIcon from './icons/triangle-alert.svg?component'
import _UnderlineIcon from './icons/underline.svg?component'
import _UndoIcon from './icons/undo.svg?component'
@@ -438,6 +444,9 @@ export const CalendarArrowDownIcon = _CalendarArrowDownIcon
export const CardIcon = _CardIcon
export const ChangeSkinIcon = _ChangeSkinIcon
export const ChartIcon = _ChartIcon
+export const ChartAreaIcon = _ChartAreaIcon
+export const ChartColumnBigIcon = _ChartColumnBigIcon
+export const ChartSplineIcon = _ChartSplineIcon
export const CheckIcon = _CheckIcon
export const CheckCheckIcon = _CheckCheckIcon
export const CheckCircleIcon = _CheckCircleIcon
@@ -571,6 +580,7 @@ export const PaintbrushIcon = _PaintbrushIcon
export const PaletteIcon = _PaletteIcon
export const PencilIcon = _PencilIcon
export const PickaxeIcon = _PickaxeIcon
+export const PinIcon = _PinIcon
export const PlayIcon = _PlayIcon
export const PlugIcon = _PlugIcon
export const PlusIcon = _PlusIcon
@@ -762,6 +772,8 @@ export const ToggleRightIcon = _ToggleRightIcon
export const TransferIcon = _TransferIcon
export const TrashIcon = _TrashIcon
export const TrashExclamationIcon = _TrashExclamationIcon
+export const TrendingDownIcon = _TrendingDownIcon
+export const TrendingUpIcon = _TrendingUpIcon
export const TriangleAlertIcon = _TriangleAlertIcon
export const UnderlineIcon = _UnderlineIcon
export const UndoIcon = _UndoIcon
diff --git a/packages/assets/icons/chart-area.svg b/packages/assets/icons/chart-area.svg
new file mode 100644
index 0000000000..506cbf4d3d
--- /dev/null
+++ b/packages/assets/icons/chart-area.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/packages/assets/icons/chart-column-big.svg b/packages/assets/icons/chart-column-big.svg
new file mode 100644
index 0000000000..aa179bef1e
--- /dev/null
+++ b/packages/assets/icons/chart-column-big.svg
@@ -0,0 +1,17 @@
+
+
diff --git a/packages/assets/icons/chart-spline.svg b/packages/assets/icons/chart-spline.svg
new file mode 100644
index 0000000000..b8049c7538
--- /dev/null
+++ b/packages/assets/icons/chart-spline.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/packages/assets/icons/pin.svg b/packages/assets/icons/pin.svg
new file mode 100644
index 0000000000..4a5b1d45f6
--- /dev/null
+++ b/packages/assets/icons/pin.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/packages/assets/icons/trending-down.svg b/packages/assets/icons/trending-down.svg
new file mode 100644
index 0000000000..92ee278e05
--- /dev/null
+++ b/packages/assets/icons/trending-down.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/packages/assets/icons/trending-up.svg b/packages/assets/icons/trending-up.svg
new file mode 100644
index 0000000000..f73d3eff13
--- /dev/null
+++ b/packages/assets/icons/trending-up.svg
@@ -0,0 +1,16 @@
+
+
diff --git a/packages/ui/package.json b/packages/ui/package.json
index c56288e96b..d33f07a92a 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -85,6 +85,7 @@
"lru-cache": "^11.2.4",
"markdown-it": "^13.0.2",
"motion-v": "^2.2.1",
+ "overlayscrollbars": "^2.15.1",
"postprocessing": "^6.37.6",
"qrcode.vue": "^3.4.1",
"three": "^0.172.0",
diff --git a/packages/ui/src/components/base/ButtonStyled.vue b/packages/ui/src/components/base/ButtonStyled.vue
index 730edc3338..80b0b05b2b 100644
--- a/packages/ui/src/components/base/ButtonStyled.vue
+++ b/packages/ui/src/components/base/ButtonStyled.vue
@@ -188,7 +188,7 @@ const colorVariables = computed(() => {
}
const hoverColors = JSON.parse(JSON.stringify(colors))
const boxShadow =
- props.type === 'chip' && colorVar.value ? `0 0 0 2px ${colorVar.value}` : defaultShadow
+ props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_icon: ${colors.icon}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_hover-icon: ${hoverColors.icon}; --_box-shadow: ${boxShadow};`
}
@@ -226,7 +226,7 @@ const colorVariables = computed(() => {
}
const boxShadow =
- props.type === 'chip' && colorVar.value ? `0 0 0 2px ${colorVar.value}` : defaultShadow
+ props.type === 'chip' && colorVar.value ? `0 0 0 1px ${colorVar.value}` : defaultShadow
return `--_bg: ${colors.bg}; --_text: ${colors.text}; --_hover-bg: ${hoverColors.bg}; --_hover-text: ${hoverColors.text}; --_box-shadow: ${boxShadow};`
})
@@ -266,7 +266,7 @@ const fontSize = computed(() => {
> *:first-child
> *:first-child
> :is(button, a, .button-like):first-child {
- @apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
+ @apply flex cursor-pointer flex-row items-center justify-center border-solid border border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
box-shadow: var(--_box-shadow, inset 0 0 0 transparent);
transition:
scale 0.125s ease-in-out,
diff --git a/packages/ui/src/components/base/Checkbox.vue b/packages/ui/src/components/base/Checkbox.vue
index 34cb4ca12c..4e8fcbd7a4 100644
--- a/packages/ui/src/components/base/Checkbox.vue
+++ b/packages/ui/src/components/base/Checkbox.vue
@@ -35,7 +35,7 @@ import { CheckIcon, MinusIcon } from '@modrinth/assets'
import type { HTMLAttributes } from 'vue'
const emit = defineEmits<{
- 'update:modelValue': [boolean]
+ 'update:modelValue': [modelValue: boolean, event?: MouseEvent]
}>()
const props = withDefaults(
@@ -59,9 +59,9 @@ const props = withDefaults(
},
)
-function toggle() {
+function toggle(event: MouseEvent) {
if (!props.disabled) {
- emit('update:modelValue', !props.modelValue)
+ emit('update:modelValue', !props.modelValue, event)
}
}
diff --git a/packages/ui/src/components/base/Chips.vue b/packages/ui/src/components/base/Chips.vue
index e25f1f1073..ed5ef89fc8 100644
--- a/packages/ui/src/components/base/Chips.vue
+++ b/packages/ui/src/components/base/Chips.vue
@@ -75,6 +75,7 @@ function toggleItem(item: T) {
flex-wrap: wrap;
.btn {
+ border: 1px solid var(--surface-5);
&.capitalize {
text-transform: capitalize;
}
@@ -91,11 +92,9 @@ function toggleItem(item: T) {
}
.selected {
- color: var(--color-contrast);
+ color: var(--color-brand);
background-color: var(--color-brand-highlight);
- box-shadow:
- inset 0 0 0 transparent,
- 0 0 0 1px var(--color-brand);
+ border: 1px solid var(--color-brand);
}
}
diff --git a/packages/ui/src/components/base/Combobox.vue b/packages/ui/src/components/base/Combobox.vue
index eb50ece3bb..2443e98863 100644
--- a/packages/ui/src/components/base/Combobox.vue
+++ b/packages/ui/src/components/base/Combobox.vue
@@ -47,13 +47,13 @@
ref="triggerRef"
role="button"
tabindex="0"
- class="relative flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-surface-4 px-4 py-2.5 text-left transition-all duration-200 text-button-text"
+ class="relative flex min-h-5 w-full items-center justify-between overflow-hidden rounded-xl bg-surface-4 px-4 py-2.5 text-left transition-all duration-200 text-button-text gap-2.5"
:class="[
props.triggerClass,
{
'z-[9999]': isOpen,
'cursor-not-allowed opacity-50': disabled,
- 'cursor-pointer hover:brightness-125 active:brightness-125': !disabled,
+ 'cursor-pointer hover:brightness-110 active:brightness-110': !disabled,
},
]"
:aria-expanded="isOpen"
@@ -95,6 +95,7 @@
ref="dropdownRef"
class="fixed z-[9999] flex flex-col overflow-hidden rounded-[14px] bg-surface-4 border border-solid border-surface-5"
:class="[
+ props.dropdownClass,
openDirection === 'up' ? 'shadow-[0_-25px_50px_-12px_rgb(0,0,0,0.25)]' : 'shadow-2xl',
]"
:style="dropdownStyle"
@@ -104,59 +105,73 @@
>
-
-
-
-
diff --git a/apps/frontend/src/providers/analytics/analytics.ts b/apps/frontend/src/providers/analytics/analytics.ts
new file mode 100644
index 0000000000..4549150ad9
--- /dev/null
+++ b/apps/frontend/src/providers/analytics/analytics.ts
@@ -0,0 +1,2559 @@
+import type { Labrinth } from '@modrinth/api-client'
+import { createContext, injectModrinthClient, type ProjectPageContext } from '@modrinth/ui'
+import { useQuery, useQueryClient } from '@tanstack/vue-query'
+import type { ComputedRef, Ref } from 'vue'
+
+import {
+ getEnabledAnalyticsStatsForState,
+ getProjectStatusFilterValue,
+ PROJECT_STATUS_FILTER_VALUES,
+ type ProjectStatusFilterValue,
+ sanitizeAnalyticsSelectedFilters,
+} from '~/components/analytics/query-builder/query-filter/queryFilter'
+import { fetchSegmentedWith } from '~/utils/fetch-helpers.ts'
+
+import type { OrganizationContext } from '../organization-context'
+import {
+ type AnalyticsBreakdownPreset,
+ type AnalyticsDashboardStat,
+ type AnalyticsGraphViewMode,
+ type AnalyticsGroupByPreset,
+ type AnalyticsLastTimeframeUnit,
+ type AnalyticsSelectedFilters,
+ type AnalyticsTimeframeMode,
+ type AnalyticsTimeframePreset,
+ areSelectedFiltersEqual,
+ areStringArraysEqual,
+ buildAnalyticsQueryBuilderRouteQuery,
+ buildDefaultAnalyticsGraphState,
+ buildDefaultAnalyticsQueryBuilderState,
+ getAnalyticsBreakdownPresetForProjectSelection,
+ getDefaultAnalyticsBreakdownPreset,
+ hasAnalyticsBreakdownQuery,
+ hasAnalyticsProjectSelectionQuery,
+ hasAnalyticsQueryBuilderRouteChange,
+ isAnalyticsGraphStateDefault,
+ isAnalyticsQueryBuilderStateDefault,
+ readAnalyticsGraphState,
+ readAnalyticsQueryBuilderState,
+} from './query-builder-url'
+
+export type {
+ AnalyticsBreakdownPreset,
+ AnalyticsDashboardStat,
+ AnalyticsGraphState,
+ AnalyticsGraphViewMode,
+ AnalyticsGroupByPreset,
+ AnalyticsLastTimeframeUnit,
+ AnalyticsQueryFilterCategory,
+ AnalyticsSelectedFilters,
+ AnalyticsTimeframeMode,
+ AnalyticsTimeframePreset,
+} from './query-builder-url'
+
+const MINECRAFT_JAVA_SERVER_PROJECT_TYPE = 'minecraft_java_server'
+const ANALYTICS_START_TIMESTAMP = '2023-01-01T00:00:00.000Z'
+export const ANALYTICS_START_DATE_INPUT_VALUE = ANALYTICS_START_TIMESTAMP.slice(0, 10)
+const ANALYTICS_START_TIME = new Date(ANALYTICS_START_TIMESTAMP).getTime()
+const REVENUE_GROUP_BY_FALLBACK: AnalyticsGroupByPreset = 'day'
+const REVENUE_MIN_TIMEFRAME_MS = 1 * 24 * 60 * 60 * 1000 // need at least 1 day in timeframe range to show revenue
+const ANALYTICS_DAY_MS = 24 * 60 * 60 * 1000
+const ANALYTICS_MAX_TIME_SLICES = 256 // controls granularity allowed in "group by" for timeframe ranges
+const ANALYTICS_TIME_SLICES_GC_TIME_MS = 30 * 1000
+const ANALYTICS_PREFETCH_GC_TIME_MS = 15 * 1000
+const ANALYTICS_FILTER_OPTIONS_GC_TIME_MS = 60 * 1000
+const ANALYTICS_PROJECT_IDS_FETCH_BATCH_SIZE = 20
+const ANALYTICS_PROJECT_IDS_FETCH_BATCH_DELAY_MS = 300
+
+type ProjectTypeMetadata = {
+ project_type?: string | null
+ project_types?: readonly string[] | null
+}
+
+type AnalyticsProjectFetchRequest = Labrinth.Analytics.v3.FetchRequest & {
+ project_ids: string[]
+}
+
+type AnalyticsDashboardProjectSource = ProjectTypeMetadata & {
+ id: string
+ name?: string | null
+ title?: string | null
+ icon_url?: string | null
+ downloads?: number | null
+ status?: string | null
+}
+
+type AnalyticsDashboardUserProjectSource = AnalyticsDashboardProjectSource & {
+ organization?: string | null
+}
+
+export interface AnalyticsDashboardProject {
+ id: string
+ name: string
+ iconUrl?: string
+ downloads: number
+ status: ProjectStatusFilterValue
+}
+
+export interface AnalyticsDashboardProjectGroup {
+ key?: string
+ title?: string
+ projects: AnalyticsDashboardProject[]
+}
+
+export interface AnalyticsDashboardTotals {
+ views: number
+ downloads: number
+ revenue: number
+ playtime: number
+}
+
+export interface AnalyticsDashboardPercentChanges {
+ views: number
+ downloads: number
+ revenue: number
+ playtime: number
+}
+
+export interface AnalyticsDashboardFilterOptions {
+ countries: string[]
+ downloadSources: string[]
+ downloadReasons: string[]
+ gameVersions: string[]
+ loaderTypes: string[]
+ versionIds: string[]
+}
+
+export interface NormalizedAnalyticsSelectedFilters {
+ country: ReadonlySet
-
-
- Analytics
- -- 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. -
-
-
-
-
-
-
+
+
-
-
-
- {{ item.label }}
-
-
- {{ item.subLabel }}
-
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
-
+
-
+
+
+
+ {{ item.label }}
+
+
+ {{ item.subLabel }}
+
+
+
@@ -171,8 +186,11 @@
+
+
diff --git a/packages/ui/src/components/base/DropdownFilterBar.vue b/packages/ui/src/components/base/DropdownFilterBar.vue
index 2cc71a73c1..d38f82d8bd 100644
--- a/packages/ui/src/components/base/DropdownFilterBar.vue
+++ b/packages/ui/src/components/base/DropdownFilterBar.vue
@@ -19,12 +19,22 @@
:searchable="preview.category.searchable"
:search-placeholder="preview.category.searchPlaceholder"
:trigger-class="previewTriggerClass"
- :dropdown-min-width="preview.category.previewDropdownMinWidth ?? '18rem'"
+ :dropdown-width="getPreviewDropdownWidth(preview.category)"
+ :dropdown-min-width="getPreviewDropdownMinWidth(preview.category)"
show-selection-actions
@update:model-value="(nextValue) => setPreviewSelectedValues(preview.key, nextValue)"
@open="openPreviewFilterDraft(preview.key)"
@close="commitPreviewFilterDraft(preview.key)"
>
+
+
@@ -48,6 +58,24 @@
@@ -65,7 +93,7 @@
-
+
@@ -80,7 +108,7 @@
+
{{ activeCategorySelectionLabel }}
-
+
| + |
|
@@ -33,6 +33,7 @@
`text-${column.align ?? 'left'}`,
column.enableSorting ? 'cursor-pointer select-none' : '',
]"
+ :style="column.width ? { width: column.width } : undefined"
@click="column.enableSorting ? handleSort(column.key) : undefined"
>
+ |
|
import { ChevronDownIcon, ChevronUpIcon } from '@modrinth/assets'
-import { computed, toRef, useSlots } from 'vue'
+import { computed, ref, toRef, useSlots } from 'vue'
import { useVirtualScroll } from '../../composables/virtual-scroll'
import Checkbox from './Checkbox.vue'
@@ -140,6 +144,7 @@ export interface TableColumn
+
+ `,
+ }),
+}
+
+export const DropdownClass: StoryObj = {
+ render: () => ({
+ components: { Combobox },
+ data: () => ({
+ selected: undefined,
+ options: [
+ { value: 'fabric', label: 'Fabric' },
+ { value: 'forge', label: 'Forge' },
+ { value: 'neoforge', label: 'NeoForge' },
+ ],
+ }),
+ template: /*html*/ `
+
+
+ `,
+ }),
+}
+
export const Disabled: Story = {
args: {
options: [{ value: '1', label: 'Option 1' }],
@@ -72,40 +131,40 @@ export const Disabled: Story = {
},
}
-export const WithSubLabels: Story = {
+export const SearchableWithIcons: Story = {
args: {
options: [
{ value: 'download', label: 'Download', icon: DownloadIcon },
{ value: 'share', label: 'Share', icon: ShareIcon },
{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
- { type: 'divider' },
{ value: 'settings', label: 'Settings', icon: SettingsIcon },
{ value: 'profile', label: 'Profile', icon: UserIcon },
- { type: 'divider' },
- { value: 'delete', label: 'Delete', icon: TrashIcon, disabled: true },
+ { value: 'delete', label: 'Delete', icon: TrashIcon },
],
placeholder: 'Select an action',
- listbox: false,
+ searchable: true,
+ searchPlaceholder: 'Search actions...',
},
}
-export const SearchableWithIcons: Story = {
+export const WithDividers: Story = {
args: {
options: [
{ value: 'download', label: 'Download', icon: DownloadIcon },
{ value: 'share', label: 'Share', icon: ShareIcon },
{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
+ { type: 'divider' },
{ value: 'settings', label: 'Settings', icon: SettingsIcon },
{ value: 'profile', label: 'Profile', icon: UserIcon },
- { value: 'delete', label: 'Delete', icon: TrashIcon },
+ { type: 'divider' },
+ { value: 'delete', label: 'Delete', icon: TrashIcon, disabled: true },
],
placeholder: 'Select an action',
- searchable: true,
- searchPlaceholder: 'Search actions...',
+ listbox: false,
},
}
-export const WithSelectedOption: Story = {
+export const WithSubLabel: Story = {
args: {
modelValue: '2',
options: [
@@ -117,32 +176,30 @@ export const WithSelectedOption: Story = {
},
}
-export const SearchableNoFilter: Story = {
+export const MixedSubLabels: Story = {
args: {
options: [
- { value: 'download', label: 'Download', icon: DownloadIcon },
- { value: 'share', label: 'Share', icon: ShareIcon },
- { value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
- { value: 'settings', label: 'Settings', icon: SettingsIcon },
- { value: 'profile', label: 'Profile', icon: UserIcon },
+ { value: '1', label: 'Minecraft', subLabel: 'The base game' },
+ { value: '2', label: 'Fabric' },
+ { value: '3', label: 'Forge', subLabel: 'Supports most mods' },
+ { value: '4', label: 'NeoForge' },
+ { value: '5', label: 'Quilt', subLabel: 'Fabric-compatible' },
],
- searchable: true,
- searchPlaceholder: 'Search actions...',
- disableSearchFilter: true,
},
}
-export const SearchableModpacks: Story = {
+export const SearchableNoFilter: Story = {
args: {
options: [
{ value: 'download', label: 'Download', icon: DownloadIcon },
{ value: 'share', label: 'Share', icon: ShareIcon },
{ value: 'favorite', label: 'Add to favorites', icon: HeartIcon },
{ value: 'settings', label: 'Settings', icon: SettingsIcon },
+ { value: 'profile', label: 'Profile', icon: UserIcon },
],
searchable: true,
- searchPlaceholder: 'Search modpacks...',
- noOptionsMessage: 'No modpacks found',
+ searchPlaceholder: 'Search actions...',
+ disableSearchFilter: true,
},
}
@@ -194,15 +251,48 @@ export const WithDropdownFooter: StoryObj = {
}),
}
-export const MixedSubLabels: Story = {
- args: {
- options: [
- { value: '1', label: 'Minecraft', subLabel: 'The base game' },
- { value: '2', label: 'Fabric' },
- { value: '3', label: 'Forge', subLabel: 'Supports most mods' },
- { value: '4', label: 'NeoForge' },
- { value: '5', label: 'Quilt', subLabel: 'Fabric-compatible' },
- ],
+export const DropdownFooterOnly: StoryObj = {
+ render: () => ({
+ components: { Combobox },
+ data: () => ({
+ selected: undefined,
+ options: [],
+ }),
+ template: /*html*/ `
+
+
+ `,
+ }),
+ parameters: {
+ docs: {
+ description: {
+ story:
+ 'Covers dropdowns whose only rendered content is the footer slot, such as the analytics custom date range picker.',
+ },
+ },
},
}
@@ -258,3 +348,22 @@ export const SearchableWithOptionAndSelectionAffix: StoryObj = {
`,
}),
}
+
+export const ManyOptionsOverflow: Story = {
+ args: {
+ options: Array.from({ length: 40 }, (_, index) => ({
+ value: `${index + 1}`,
+ label: `Option ${index + 1}`,
+ })),
+ placeholder: 'Select an option',
+ maxHeight: 380,
+ },
+ parameters: {
+ docs: {
+ description: {
+ story:
+ 'Covers long option lists where the dropdown content should scroll within its max height.',
+ },
+ },
+ },
+}
diff --git a/packages/ui/src/stories/base/DropdownFilterBar.stories.ts b/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
index 94971c2eac..be074b0b36 100644
--- a/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
+++ b/packages/ui/src/stories/base/DropdownFilterBar.stories.ts
@@ -1,3 +1,4 @@
+import { BoxIcon } from '@modrinth/assets'
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { ref } from 'vue'
@@ -55,10 +56,57 @@ const searchableCategories = [
searchPlaceholder: 'Search versions...',
submenuClass: 'w-[360px]',
options: [
- { value: '1.21.5', label: '1.21.5' },
- { value: '1.21.4', label: '1.21.4' },
- { value: '1.20.1', label: '1.20.1' },
- { value: '1.19.2', label: '1.19.2' },
+ { value: '1.21.5', label: '1.21.5', searchTerms: ['Sodium'] },
+ { value: '1.21.4', label: '1.21.4', searchTerms: ['Sodium'] },
+ { value: '1.20.1', label: '1.20.1', searchTerms: ['Iris'] },
+ { value: '1.19.2', label: '1.19.2', searchTerms: ['Mod Menu'] },
+ ],
+ },
+]
+
+const largeVersionOptions = Array.from({ length: 250 }, (_, index) => {
+ const version = `1.${Math.floor(index / 10) + 1}.${index % 10}`
+ const project = `Project ${Math.floor(index / 25) + 1}`
+ return {
+ value: `version-${index + 1}`,
+ label: version,
+ searchTerms: [project],
+ }
+})
+
+const mixedWidthCategories = [
+ {
+ key: 'status',
+ label: 'Status',
+ options: [
+ { value: 'active', label: 'Active' },
+ { value: 'archived', label: 'Archived' },
+ { value: 'draft', label: 'Draft' },
+ ],
+ },
+ {
+ key: 'country',
+ label: 'Country',
+ searchable: true,
+ searchPlaceholder: 'Search countries...',
+ submenuClass: 'w-[324px]',
+ options: [
+ { value: 'US', label: 'United States' },
+ { value: 'CA', label: 'Canada' },
+ { value: 'DE', label: 'Germany' },
+ { value: 'JP', label: 'Japan' },
+ ],
+ },
+ {
+ key: 'version',
+ label: 'Project version',
+ searchable: true,
+ searchPlaceholder: 'Search project versions...',
+ submenuClass: 'w-[368px]',
+ options: [
+ { value: 'sodium-1.21.5', label: 'Sodium 1.21.5' },
+ { value: 'iris-1.21.4', label: 'Iris 1.21.4' },
+ { value: 'mod-menu-1.20.1', label: 'Mod Menu 1.20.1' },
],
},
]
@@ -90,11 +138,21 @@ export const WithAppliedFilters: Story = {
status: ['active'],
type: ['mod', 'plugin'],
})
- return { categories: defaultCategories, selected }
+ const clearEvents = ref(0)
+ function handleClear() {
+ clearEvents.value += 1
+ }
+
+ return { categories: defaultCategories, clearEvents, handleClear, selected }
},
template: /* html */ `
+
+
+ Dropdown footer content
+
+ This dropdown has no options and stays open because its footer slot is content.
+
+
+
+
+
+
-
`,
}),
@@ -107,6 +165,37 @@ export const WithAppliedFilters: Story = {
},
}
+export const WithClearOverride: Story = {
+ render: () => ({
+ components: { DropdownFilterBar },
+ setup() {
+ const selected = ref
+
+ `,
+ }),
+ args: {
+ modelValue: {},
+ categories: defaultCategories,
+ showClear: true,
+ },
+}
+
export const WithFilterIcon: Story = {
render: () => ({
components: { DropdownFilterBar },
@@ -133,14 +222,33 @@ export const WithFilterIcon: Story = {
export const SearchableCategories: Story = {
render: () => ({
- components: { DropdownFilterBar },
+ components: { BoxIcon, DropdownFilterBar },
setup() {
const selected = ref
-
`,
}),
@@ -150,11 +258,165 @@ export const SearchableCategories: Story = {
},
}
-export const CustomControls: Story = {
+export const MixedSubmenuWidthsNearEdge: Story = {
render: () => ({
components: { DropdownFilterBar },
setup() {
const selected = ref
+
+ `,
+ }),
+ args: {
+ modelValue: {},
+ categories: mixedWidthCategories,
+ },
+ parameters: {
+ docs: {
+ description: {
+ story:
+ 'Covers mixed submenu widths near the viewport edge so all add-menu submenus open on the same side.',
+ },
+ },
+ },
+}
+
+export const VirtualizedPreview: Story = {
+ render: () => ({
+ components: { BoxIcon, DropdownFilterBar },
+ setup() {
+ const selected = ref
+
+ `,
+ }),
+ args: {
+ modelValue: {
+ version: ['version-3', 'version-47', 'version-132'],
+ },
+ categories: [
+ {
+ key: 'version',
+ label: 'Version',
+ searchable: true,
+ searchPlaceholder: 'Search versions...',
+ submenuClass: 'w-[360px]',
+ previewDropdownWidth: '360px',
+ options: largeVersionOptions,
+ },
+ ],
+ },
+}
+
+export const VirtualizedSubmenu: Story = {
+ render: () => ({
+ components: { BoxIcon, DropdownFilterBar },
+ setup() {
+ const selected = ref
+
+ `,
+ }),
+ args: {
+ modelValue: {},
+ categories: [
+ {
+ key: 'version',
+ label: 'Version',
+ searchable: true,
+ searchPlaceholder: 'Search versions...',
+ submenuClass: 'w-[360px]',
+ options: largeVersionOptions,
+ },
+ ],
+ },
+ parameters: {
+ docs: {
+ description: {
+ story:
+ 'Covers the add-menu submenu with flush rows, square hover states, and OverlayScrollbars.',
+ },
+ },
+ },
+}
+
+export const CustomControls: Story = {
+ render: () => ({
+ components: { DropdownFilterBar },
+ setup() {
+ const selected = ref
@@ -193,12 +455,33 @@ export const CustomControls: Story = {
+
+
+
+ Versions above
+
+
+ downloads
+
+
`,
}),
args: {
- modelValue: {},
+ modelValue: {
+ version: ['1.21.5'],
+ },
categories: searchableCategories,
},
}
diff --git a/packages/ui/src/stories/base/MultiSelect.stories.ts b/packages/ui/src/stories/base/MultiSelect.stories.ts
index 5fc6d00bd0..8320edf99e 100644
--- a/packages/ui/src/stories/base/MultiSelect.stories.ts
+++ b/packages/ui/src/stories/base/MultiSelect.stories.ts
@@ -1,4 +1,4 @@
-import { CheckIcon } from '@modrinth/assets'
+import { BoxIcon, CheckIcon } from '@modrinth/assets'
import type { Meta, StoryObj } from '@storybook/vue3-vite'
import { computed, ref } from 'vue'
@@ -43,6 +43,14 @@ export const Default: Story = {
modelValue: ['en', 'es', 'fr', 'zh-CN'],
placeholder: 'Select languages',
},
+ parameters: {
+ docs: {
+ description: {
+ story:
+ 'Options render flush to the dropdown edges with full-width hover and selected states.',
+ },
+ },
+ },
}
export const WithSearch: Story = {
@@ -53,6 +61,48 @@ export const WithSearch: Story = {
},
}
+export const WithOptionRightSlot: Story = {
+ args: {
+ options: [
+ { value: 'sodium-1.21.5', label: '1.21.5', searchTerms: ['Sodium'] },
+ { value: 'sodium-1.21.4', label: '1.21.4', searchTerms: ['Sodium'] },
+ { value: 'iris-1.20.1', label: '1.20.1', searchTerms: ['Iris'] },
+ { value: 'modmenu-1.19.2', label: '1.19.2', searchTerms: ['Mod Menu'] },
+ ],
+ modelValue: ['sodium-1.21.5'],
+ placeholder: 'Select versions',
+ searchable: true,
+ searchPlaceholder: 'Search versions',
+ },
+ render: (args) => ({
+ components: { BoxIcon, MultiSelect },
+ setup() {
+ const selected = ref(args.modelValue)
+ const projectNames: Record
+
+ `,
+ }),
+}
+
export const WithSelectAll: Story = {
args: {
...Default.args,
@@ -62,6 +112,16 @@ export const WithSelectAll: Story = {
},
}
+export const WithRightCheckbox: Story = {
+ args: {
+ ...Default.args,
+ searchable: true,
+ includeSelectAllOption: true,
+ checkboxPosition: 'right',
+ searchPlaceholder: 'Search languages',
+ },
+}
+
export const WithSelectionActions: Story = {
args: {
...Default.args,
@@ -71,6 +131,26 @@ export const WithSelectionActions: Story = {
},
}
+export const WithSections: Story = {
+ args: {
+ options: [
+ { value: 'iris', label: 'Iris' },
+ { value: 'sodium', label: 'Sodium' },
+ { type: 'section-header', label: 'LambdAurora' },
+ { value: 'lambda-better-grass', label: 'LambdaBetterGrass', searchTerms: ['LambdAurora'] },
+ { value: 'auroras-decorations', label: "Aurora's Decorations", searchTerms: ['LambdAurora'] },
+ { type: 'section-header', label: 'Terraformers' },
+ { value: 'modmenu', label: 'Mod Menu', searchTerms: ['Terraformers'] },
+ { value: 'terraform-api', label: 'Terraform API', searchTerms: ['Terraformers'] },
+ ],
+ modelValue: ['iris', 'modmenu'],
+ placeholder: 'Select projects',
+ searchable: true,
+ showSelectionActions: true,
+ searchPlaceholder: 'Search projects',
+ },
+}
+
export const WithTopSlot: Story = {
args: {
...Default.args,
@@ -249,6 +329,50 @@ export const WithBottomSlot: Story = {
}),
}
+export const VirtualizedLargeList: Story = {
+ args: {
+ options: Array.from({ length: 250 }, (_, index) => {
+ const version = `1.${Math.floor(index / 10) + 1}.${index % 10}`
+ return {
+ value: `version-${index + 1}`,
+ label: version,
+ searchTerms: [`Project ${Math.floor(index / 25) + 1}`],
+ }
+ }),
+ modelValue: ['version-3', 'version-47', 'version-132'],
+ placeholder: 'Select versions',
+ searchable: true,
+ searchPlaceholder: 'Search versions',
+ showSelectionActions: true,
+ maxHeight: 320,
+ },
+ render: (args) => ({
+ components: { BoxIcon, MultiSelect },
+ setup() {
+ const selected = ref(args.modelValue)
+ function getProjectName(value: string) {
+ const optionIndex = Number(value.replace('version-', '')) - 1
+ return `Project ${Math.floor(optionIndex / 25) + 1}`
+ }
+ return { args, getProjectName, selected }
+ },
+ template: /*html*/ `
+
+
+ `,
+ }),
+}
+
export const NoOptions: Story = {
args: {
...Default.args,
diff --git a/packages/ui/src/stories/base/Table.stories.ts b/packages/ui/src/stories/base/Table.stories.ts
index 4d578c077d..65c0dc38a0 100644
--- a/packages/ui/src/stories/base/Table.stories.ts
+++ b/packages/ui/src/stories/base/Table.stories.ts
@@ -28,6 +28,20 @@ const sampleUsers: User[] = [
role: 'Admin',
},
]
+const rangeSelectionUsers: User[] = Array.from({ length: 10 }, (_, index): User => {
+ const id = String(index + 1)
+ const paddedId = id.padStart(2, '0')
+ const statuses: User['status'][] = ['active', 'inactive', 'pending']
+ const roles = ['Admin', 'Editor', 'Maintainer', 'Reviewer', 'User']
+
+ return {
+ id,
+ name: `Member ${paddedId}`,
+ email: `member-${paddedId}@example.com`,
+ status: statuses[index % statuses.length],
+ role: roles[index % roles.length],
+ }
+})
const meta = {
title: 'Base/Table',
@@ -68,7 +82,7 @@ export const WithSelection: StoryObj = {
{ key: 'status', label: 'Status' },
{ key: 'role', label: 'Role' },
]
- const data = sampleUsers
+ const data = rangeSelectionUsers
const selectedIds = refClick a checkbox, then Shift-click another checkbox to select or clear the range. +Selected IDs: {{ selectedIds.join(', ') || 'None' }} + + `, + }), +} + +export const WithSelectionData: StoryObj = { + args: {}, + render: () => ({ + components: { Table }, + setup() { + const columns = [ + { key: 'name', label: 'Name' }, + { key: 'email', label: 'Email' }, + { key: 'status', label: 'Status' }, + { key: 'role', label: 'Role' }, + ] + const selectionData = rangeSelectionUsers + const data = selectionData.filter((_, index) => index === 1 || index === 5) + const selectedIds = ref
+
+ `,
+ }),
+}
+
+export const WithSelectionIds: StoryObj = {
+ args: {},
+ render: () => ({
+ components: { Table },
+ setup() {
+ const columns = [
+ { key: 'name', label: 'Name' },
+ { key: 'email', label: 'Email' },
+ { key: 'status', label: 'Status' },
+ { key: 'role', label: 'Role' },
+ ]
+ const data = rangeSelectionUsers.filter((_, index) => index === 1 || index === 5)
+ const selectionIds = rangeSelectionUsers.map((user) => user.id)
+ const selectedIds = refOnly rows 2 and 6 are visible; Shift-clicking between them selects IDs 2 through 6 from selectionData. +Selected IDs: {{ selectedIds.join(', ') || 'None' }} +
+
`,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 73d2dde664..765745886b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -302,6 +302,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
@@ -712,6 +715,9 @@ importers:
motion-v:
specifier: ^2.2.1
version: 2.2.1(@vueuse/core@11.3.0(vue@3.5.27(typescript@5.9.3)))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(vue@3.5.27(typescript@5.9.3))
+ overlayscrollbars:
+ specifier: ^2.15.1
+ version: 2.15.1
postprocessing:
specifier: ^6.37.6
version: 6.38.2(three@0.172.0)
@@ -2492,6 +2498,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==}
@@ -5399,6 +5408,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'}
@@ -11539,6 +11552,8 @@ snapshots:
'@jsdevtools/ono@7.1.3': {}
+ '@kurkle/color@0.3.4': {}
+
'@kwsites/file-exists@1.1.1':
dependencies:
debug: 4.4.3
@@ -13302,7 +13317,7 @@ snapshots:
eslint-visitor-keys: 4.2.1
espree: 10.4.0
estraverse: 5.3.0
- picomatch: 4.0.3
+ picomatch: 4.0.4
transitivePeerDependencies:
- supports-color
- typescript
@@ -14869,6 +14884,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:
@@ -15551,7 +15570,7 @@ snapshots:
eslint-import-context: 0.1.9(unrs-resolver@1.11.1)
is-glob: 4.0.3
minimatch: 10.1.2
- semver: 7.7.3
+ semver: 7.7.4
stable-hash-x: 0.2.0
unrs-resolver: 1.11.1
optionalDependencies:
@@ -15586,7 +15605,7 @@ snapshots:
espree: 10.4.0
esquery: 1.7.0
parse-imports-exports: 0.2.4
- semver: 7.7.3
+ semver: 7.7.4
spdx-expression-parse: 4.0.0
transitivePeerDependencies:
- supports-color
@@ -15684,7 +15703,7 @@ snapshots:
read-pkg-up: 7.0.1
regexp-tree: 0.1.27
regjsparser: 0.10.0
- semver: 7.7.3
+ semver: 7.7.4
strip-indent: 3.0.0
eslint-plugin-vue@10.7.0(@stylistic/eslint-plugin@2.13.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(@typescript-eslint/parser@8.54.0(eslint@9.39.2(jiti@2.6.1))(typescript@5.9.3))(eslint@9.39.2(jiti@2.6.1))(vue-eslint-parser@10.2.0(eslint@9.39.2(jiti@2.6.1))):
@@ -15723,7 +15742,7 @@ snapshots:
natural-compare: 1.4.0
nth-check: 2.1.1
postcss-selector-parser: 6.1.2
- semver: 7.7.3
+ semver: 7.7.4
vue-eslint-parser: 9.4.3(eslint@9.39.2(jiti@2.6.1))
xml-name-validator: 4.0.0
transitivePeerDependencies:
@@ -20350,7 +20369,7 @@ snapshots:
espree: 9.6.1
esquery: 1.7.0
lodash: 4.17.23
- semver: 7.7.3
+ semver: 7.7.4
transitivePeerDependencies:
- supports-color
Only rows 2 and 6 are visible; Shift-clicking between them selects IDs 2 through 6 from selectionIds. Selected IDs: {{ selectedIds.join(', ') || 'None' }} |
|---|