fix: analytics post release bugs

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-header/AnalyticsChartLegend.vue

@@ -10,7 +10,7 @@
 		>
 			<div
 				v-if="showLegendTopFade"
-				class="pointer-events-none absolute left-0 right-0 top-0 z-10 h-5 bg-gradient-to-b from-surface-3 to-transparent"
+				class="z-1 pointer-events-none absolute left-0 right-0 top-0 h-5 bg-gradient-to-b from-surface-3 to-transparent"
 			/>
 		</Transition>
 
@@ -99,7 +99,7 @@
 		>
 			<div
 				v-if="showLegendBottomFade"
-				class="pointer-events-none absolute bottom-0 left-0 right-0 z-10 h-5 bg-gradient-to-t from-surface-3 to-transparent"
+				class="z-1 pointer-events-none absolute bottom-0 left-0 right-0 h-5 bg-gradient-to-t from-surface-3 to-transparent"
 			/>
 		</Transition>
 	</div>

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-plot/AnalyticsChartEvents.vue

@@ -132,7 +132,7 @@
 									:href="event.announcement_url"
 									target="_blank"
 									rel="noopener noreferrer"
-									class="mt-1.5 inline-flex items-center gap-1 text-sm font-medium text-primary underline !transition-all hover:text-contrast"
+									class="my-0.5 inline-flex items-center gap-1 text-xs font-medium text-primary underline !transition-all hover:text-contrast"
 								>
 									{{ formatMessage(analyticsChartMessages.seeAnnouncement) }}
 									<ExternalIcon class="size-3.5" aria-hidden="true" />

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-plot/AnalyticsChartTooltip.vue

@@ -18,7 +18,7 @@
 						({{ durationLabel }})
 					</span>
 				</span>
-				<span v-if="previousRangeLabel" class="min-w-0 truncate text-xs text-primary">
+				<span v-if="previousRangeLabel" class="min-w-0 space-x-1 truncate text-xs text-primary">
 					<span class="font-medium">{{ previousRangeLabel }}</span>
 					<span class="font-normal text-secondary">
 						{{ formatMessage(analyticsChartMessages.previousPeriodShort) }}
@@ -197,6 +197,7 @@ function getEntryAriaLabel(entry: AnalyticsChartTooltipEntry) {
 const ONE_DAY_MS = 24 * 60 * 60 * 1000
 const ONE_HOUR_MS = 60 * 60 * 1000
 const ONE_MINUTE_MS = 60 * 1000
+const DATE_LOCALE = 'en-US'
 
 function formatRangeLabel(
 	start: Date,
@@ -225,13 +226,13 @@ function formatRangeLabel(
 	}
 
 	if (includeTime) {
-		const startLabel = new Intl.DateTimeFormat(undefined, startOptions).format(start)
-		const endLabel = new Intl.DateTimeFormat(undefined, timeOptions).format(end)
+		const startLabel = new Intl.DateTimeFormat(DATE_LOCALE, startOptions).format(start)
+		const endLabel = new Intl.DateTimeFormat(DATE_LOCALE, timeOptions).format(end)
 		const range = `${startLabel}–${endLabel}`
 
 		if (!showTrailingYear) return range
 
-		const yearLabel = new Intl.DateTimeFormat(undefined, { year: 'numeric' }).format(end)
+		const yearLabel = new Intl.DateTimeFormat(DATE_LOCALE, { year: 'numeric' }).format(end)
 		return `${range}, ${yearLabel}`
 	}
 
@@ -244,13 +245,13 @@ function formatRangeLabel(
 		endOptions = { day: 'numeric' }
 	}
 
-	const startLabel = new Intl.DateTimeFormat(undefined, startOptions).format(start)
-	const endLabel = new Intl.DateTimeFormat(undefined, endOptions).format(end)
+	const startLabel = new Intl.DateTimeFormat(DATE_LOCALE, startOptions).format(start)
+	const endLabel = new Intl.DateTimeFormat(DATE_LOCALE, endOptions).format(end)
 	const range = `${startLabel}–${endLabel}`
 
 	if (!showTrailingYear) return range
 
-	const yearLabel = new Intl.DateTimeFormat(undefined, { year: 'numeric' }).format(end)
+	const yearLabel = new Intl.DateTimeFormat(DATE_LOCALE, { year: 'numeric' }).format(end)
 	return `${range}, ${yearLabel}`
 }
 

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-plot/use-analytics-chart-events.ts

@@ -40,7 +40,6 @@ export function useAnalyticsChartEvents(
 		placeholderData: [],
 		refetchOnMount: 'always',
 		retry: false,
-		staleTime: 0,
 	})
 
 	const localAnalyticsChartEvents = computed(() => analyticsEvents.value ?? [])

apps/frontend/src/components/analytics-dashboard/analytics-chart/analytics-chart-utils.ts

@@ -109,7 +109,7 @@ function getRegionDisplayNames(locale: string): Intl.DisplayNames | null {
 function formatCountryCode(countryCode: string, formatMessage: FormatMessage): string {
 	const normalized = countryCode.trim().toUpperCase()
 	if (normalized === OTHER_COUNTRY_CODE) {
-		return formatMessage(analyticsMessages.unknown)
+		return formatMessage(analyticsMessages.other)
 	}
 
 	if (!REGION_CODE_PATTERN.test(normalized)) {
@@ -146,6 +146,9 @@ export function formatBreakdownLabel(
 		normalizedLowercaseValue === 'other' ||
 		normalizedLowercaseValue === 'unknown'
 	) {
+		if (selectedBreakdown === 'country') {
+			return formatMessage(analyticsMessages.other)
+		}
 		return formatMessage(analyticsMessages.unknown)
 	}
 	if (selectedBreakdown === 'country') {
@@ -753,7 +756,7 @@ export function formatMetricValue(
 		case 'playtime': {
 			const hours = value / 3600
 			return formatMessage(analyticsStatCardMessages.playtimeHours, {
-				hours: hours.toFixed(1),
+				hours: Math.abs(hours) < 1 ? hours.toFixed(2) : hours.toFixed(1),
 			})
 		}
 		case 'views':
@@ -770,7 +773,11 @@ function formatSmallAxisNumber(value: number): string {
 	}
 
 	const formattedValue = Math.abs(value) < 1 ? value.toFixed(2) : value.toFixed(1)
-	return formattedValue.replace(/\.?0+$/, '')
+	return trimTrailingFractionZeros(formattedValue)
+}
+
+function trimTrailingFractionZeros(value: string): string {
+	return value.replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '')
 }
 
 const COMPACT_AXIS_UNITS = [
@@ -814,7 +821,7 @@ function formatCompactAxisValue(value: number): string {
 		return String(truncatedValue)
 	}
 
-	return roundedValue.toFixed(fractionDigitCount).replace(/\.?0+$/, '')
+	return trimTrailingFractionZeros(roundedValue.toFixed(fractionDigitCount))
 }
 
 export function formatAxisValue(

apps/frontend/src/components/analytics-dashboard/analytics-messages.ts

@@ -224,6 +224,19 @@ export const analyticsGraphTitleMessages = defineMessages({
 })
 
 export const analyticsStatCardMessages = defineMessages({
+	monetizationBannerTitle: {
+		id: 'analytics.stat.monetization-banner.title',
+		defaultMessage: 'How does monetization work?',
+	},
+	monetizationBannerBody: {
+		id: 'analytics.stat.monetization-banner.body',
+		defaultMessage:
+			'Only views and downloads made through Modrinth are eligible for monetization and must pass fraud-prevention filtering. Modrinth App downloads also require the user to be logged in. Because all projects have a similar ratio of monetized downloads, your revenue would not meaningfully change if all downloads were counted.',
+	},
+	monetizationBannerLearnMore: {
+		id: 'analytics.stat.monetization-banner.learn-more',
+		defaultMessage: 'Learn more',
+	},
 	revenueValue: {
 		id: 'analytics.stat.revenue-value',
 		defaultMessage: '${value}',

apps/frontend/src/components/analytics-dashboard/analytics-table/analytics-table-columns.ts

@@ -66,6 +66,7 @@ export function buildAnalyticsTableColumns({
 				key: getAnalyticsTableBreakdownColumnKey(breakdown),
 				label: getAnalyticsTableBreakdownColumnLabel(breakdown, formatMessage),
 				enableSorting: true,
+				width: breakdown === 'project' ? '25%' : undefined,
 			})
 		}
 	}
@@ -75,6 +76,7 @@ export function buildAnalyticsTableColumns({
 			key: 'project',
 			label: formatAnalyticsBreakdownLabel('project', formatMessage),
 			enableSorting: true,
+			width: '25%',
 		})
 	}
 

apps/frontend/src/components/analytics-dashboard/analytics-table/analytics-table-formatting.ts

@@ -40,10 +40,12 @@ export function formatAnalyticsTableCompactPlaytime(
 	formatMessage: FormatMessage,
 ): string {
 	const totalSeconds = Math.max(0, Math.round(value))
+	const hours = totalSeconds / SECONDS_PER_HOUR
+	const fractionDigits = hours < 1 ? 2 : 1
 	return formatMessage(analyticsStatCardMessages.playtimeHours, {
-		hours: (totalSeconds / SECONDS_PER_HOUR).toLocaleString(undefined, {
-			minimumFractionDigits: 1,
-			maximumFractionDigits: 1,
+		hours: hours.toLocaleString(undefined, {
+			minimumFractionDigits: fractionDigits,
+			maximumFractionDigits: fractionDigits,
 		}),
 	})
 }

apps/frontend/src/components/analytics-dashboard/analytics-table/analytics-table-row-builder.ts

@@ -12,6 +12,7 @@ import {
 	getSliceCount,
 } from '../analytics-chart/analytics-chart-utils'
 import type { FormatMessage } from '../analytics-messages'
+import { analyticsMessages } from '../analytics-messages'
 import {
 	ALL_BREAKDOWN_VALUE,
 	COMBINED_BREAKDOWN_LABEL_SEPARATOR,
@@ -64,6 +65,8 @@ export function buildAnalyticsTableRows({
 
 	const timeRange = fetchRequest.time_range
 	const sliceCount = getSliceCount(timeRange, timeSlices.length)
+	const currentTimeSlices =
+		timeSlices.length > sliceCount ? timeSlices.slice(timeSlices.length - sliceCount) : timeSlices
 	const includeDate = mode === 'date_breakdown'
 	const breakdownDisplayValues = new Map<string, string>()
 	const projectDisplayValues = new Map<string, string>()
@@ -119,9 +122,22 @@ export function buildAnalyticsTableRows({
 	}
 
 	function getCombinedBreakdownDisplay(displays: AnalyticsTableBreakdownDisplayValues) {
+		const unknownBreakdownLabel = formatMessage(analyticsMessages.unknown)
+		let hasUnknownBreakdownLabel = false
+
 		return selectedBreakdowns
 			.map((breakdown) => displays[breakdown])
 			.filter((displayValue): displayValue is string => Boolean(displayValue))
+			.filter((displayValue) => {
+				if (displayValue !== unknownBreakdownLabel) {
+					return true
+				}
+				if (hasUnknownBreakdownLabel) {
+					return false
+				}
+				hasUnknownBreakdownLabel = true
+				return true
+			})
 			.join(COMBINED_BREAKDOWN_LABEL_SEPARATOR)
 	}
 
@@ -184,7 +200,7 @@ export function buildAnalyticsTableRows({
 		}
 	}
 
-	timeSlices.forEach((slice, sliceIndex) => {
+	currentTimeSlices.forEach((slice, sliceIndex) => {
 		const bucketLabel = includeDate ? getBucketLabel(sliceIndex) : undefined
 
 		for (const point of slice) {

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

@@ -30,9 +30,10 @@ export function getAnalyticsBreakdownValue(
 		case 'user_agent': {
 			const downloadSource = normalizeBreakdownValue(
 				'user_agent' in point ? point.user_agent : undefined,
+				UNKNOWN_BREAKDOWN_VALUE,
 			)
-			return downloadSource === ALL_BREAKDOWN_VALUE
-				? ALL_BREAKDOWN_VALUE
+			return downloadSource === UNKNOWN_BREAKDOWN_VALUE
+				? UNKNOWN_BREAKDOWN_VALUE
 				: getDownloadSourceLabel(downloadSource, formatMessage)
 		}
 		case 'download_reason':
@@ -98,5 +99,12 @@ function normalizeBreakdownValue(
 	fallback = ALL_BREAKDOWN_VALUE,
 ): string {
 	const normalized = value?.trim()
+	const normalizedLowercase = normalized?.toLowerCase()
+	if (
+		fallback === UNKNOWN_BREAKDOWN_VALUE &&
+		(normalizedLowercase === 'unknown' || normalizedLowercase === 'other')
+	) {
+		return fallback
+	}
 	return normalized && normalized.length > 0 ? normalized : fallback
 }

apps/frontend/src/components/analytics-dashboard/query-builder/TimeframePicker.vue

@@ -52,6 +52,7 @@ const {
 	selectedCustomTimeframeEndDate,
 	selectedGroupBy,
 	queryRefreshTimestamp,
+	analyticsAllTimeStartDate,
 	refreshAnalyticsQuery,
 } = injectAnalyticsDashboardContext()
 
@@ -107,6 +108,7 @@ function handleTimeframeDraftChange(selection: TimeFramePickerSelection) {
 		customStartDate: selection.customStartDate,
 		customEndDate: selection.customEndDate,
 		nowTimestamp: queryRefreshTimestamp.value,
+		allTimeStartDate: analyticsAllTimeStartDate.value,
 	})
 	const { start, end } = ensureMinimumTimeRange(range.start, range.end)
 	const durationMinutes = Math.max(1, Math.floor((end.getTime() - start.getTime()) / 60000))

apps/frontend/src/components/analytics-dashboard/query-builder/index.vue

@@ -894,12 +894,6 @@ function isRevenueHourlyGroupBy(groupBy: AnalyticsGroupByPreset): boolean {
 	return groupBy === '1h' || groupBy === '6h'
 }
 
-function getAllTimeYearGroupStart(end: Date): Date {
-	const start = new Date(end)
-	start.setFullYear(2021)
-	return start
-}
-
 const groupByOptions = computed<ComboboxOption<AnalyticsGroupByPreset>[]>(() => {
 	const timeframeMinutes = selectedTimeframeDurationMinutes.value
 	const options = groupByPresetOptions.map((option) => {
@@ -1159,13 +1153,7 @@ function buildMetricFilters(
 
 const fetchRequest = computed<Labrinth.Analytics.v3.FetchRequest>(() => {
 	const rawRange = selectedTimeRange.value
-	const rawStart =
-		selectedTimeframeMode.value === 'preset' &&
-		selectedTimeframe.value === 'all_time' &&
-		selectedGroupBy.value === 'year'
-			? getAllTimeYearGroupStart(rawRange.end)
-			: rawRange.start
-	const { start, end } = ensureMinimumTimeRange(rawStart, rawRange.end)
+	const { start, end } = ensureMinimumTimeRange(rawRange.start, rawRange.end)
 
 	const groupByMs = getAnalyticsGroupByPresetMinutes(selectedGroupBy.value) * 60 * 1000
 	const desiredSlices = Math.max(1, Math.floor((end.getTime() - start.getTime()) / groupByMs))

apps/frontend/src/components/analytics-dashboard/query-builder/timeframe.ts

@@ -84,6 +84,7 @@ function subtractCalendarMonths(date: Date, months: number): Date {
 export function getTimeRangeForPreset(
 	preset: AnalyticsTimeframePreset,
 	nowTimestamp: number,
+	allTimeStartDate: Date = new Date(Date.UTC(2023, 0, 1, 0, 0, 0, 0)),
 ): AnalyticsTimeRange {
 	const now = getRoundedNow(nowTimestamp)
 	const end = new Date(now)
@@ -130,7 +131,7 @@ export function getTimeRangeForPreset(
 		}
 		case 'all_time':
 			return {
-				start: new Date(Date.UTC(2023, 0, 1, 0, 0, 0, 0)),
+				start: new Date(allTimeStartDate),
 				end,
 			}
 		default:
@@ -193,6 +194,7 @@ export function getAnalyticsTimeRange({
 	customStartDate,
 	customEndDate,
 	nowTimestamp,
+	allTimeStartDate,
 }: {
 	mode: AnalyticsTimeframeMode
 	preset: AnalyticsTimeframePreset
@@ -201,6 +203,7 @@ export function getAnalyticsTimeRange({
 	customStartDate: string
 	customEndDate: string
 	nowTimestamp: number
+	allTimeStartDate?: Date
 }): AnalyticsTimeRange {
 	switch (mode) {
 		case 'last':
@@ -211,7 +214,7 @@ export function getAnalyticsTimeRange({
 			return getTimeRangeForCustomDateTimeRange(customStartDate, customEndDate)
 		case 'preset':
 		default:
-			return getTimeRangeForPreset(preset, nowTimestamp)
+			return getTimeRangeForPreset(preset, nowTimestamp, allTimeStartDate)
 	}
 }
 
@@ -269,6 +272,7 @@ export function useSelectedAnalyticsTimeRange() {
 		selectedCustomTimeframeStartDate,
 		selectedCustomTimeframeEndDate,
 		queryRefreshTimestamp,
+		analyticsAllTimeStartDate,
 	} = injectAnalyticsDashboardContext()
 
 	const selectedTimeRange = computed(() =>
@@ -280,6 +284,7 @@ export function useSelectedAnalyticsTimeRange() {
 			customStartDate: selectedCustomTimeframeStartDate.value,
 			customEndDate: selectedCustomTimeframeEndDate.value,
 			nowTimestamp: queryRefreshTimestamp.value,
+			allTimeStartDate: analyticsAllTimeStartDate.value,
 		}),
 	)