fix: analytics post release bugs (#6291)

* fix: previous period data was included in the table

* fix: revenue displaying stale data when viewing it from different metric and grouped by 6 hour or 1 hour

* fix: remove staletime on analytics query so switching tabs does not refersh query

* feat: add monetization alert

* fix-small: missing space in tooltip

* fix: incorrect y-axis formatting for trailing decimal 0s

* fix: switching tabs resets table series selection due to other refetches

* fix: always show month first in chart tooltip

* fix: change all time start date to be project published date

* fix: increase length on project name column

* fix: unknown download source data points not showing for download source breakdown

* fix: double unknown for loader

* fix: no data on country labeling incorrectly as "Unknown" instead of "Other"

* fix: date picker number inputs showing arrows

* fix: stat card showing enormous percentage for prev period by switching it to absolute value difference after 1000%

* fix: decimal values for playtime being rounded badly, resulting in 0.04 becoming 0.0

* fix: chips having stroke

* refactor: pnpm prepr

* fix: spacing in annoucement link

* fix: legend scroll shadow on top of event tooltip

apps/frontend/src/components/analytics-dashboard/stat-cards/StatCards.vue

@@ -1,21 +1,45 @@
 <template>
-	<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
-		<StatCard
-			v-for="card in statCards"
-			:key="card.key"
-			:label="card.label"
-			:stat-label="card.statLabel"
-			:vs-prev-period-percent="card.vsPrevPeriodPercent"
-			:icon="card.icon"
-			:active="activeStat === card.key"
-			:disabled="card.disabled"
-			@click="setActiveStat(card.key)"
-		/>
+	<div class="flex w-full flex-col gap-3">
+		<Admonition
+			v-if="showMonetizationBanner"
+			type="info"
+			:header="formatMessage(analyticsStatCardMessages.monetizationBannerTitle)"
+			show-actions-underneath
+			dismissible
+			@dismiss="dismissMonetizationBanner"
+		>
+			<div class="text-primary">
+				{{ formatMessage(analyticsStatCardMessages.monetizationBannerBody) }}
+			</div>
+			<template #actions>
+				<ButtonStyled color="blue">
+					<a href="https://modrinth.com/legal/cmp-info" target="_blank" class="w-fit !px-4">
+						{{ formatMessage(analyticsStatCardMessages.monetizationBannerLearnMore) }}
+						<RightArrowIcon aria-hidden="true" />
+					</a>
+				</ButtonStyled>
+			</template>
+		</Admonition>
+		<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+			<StatCard
+				v-for="card in statCards"
+				:key="card.key"
+				:label="card.label"
+				:stat-label="card.statLabel"
+				:vs-prev-period-percent="card.vsPrevPeriodPercent"
+				:icon="card.icon"
+				:active="activeStat === card.key"
+				:disabled="card.disabled"
+				@click="setActiveStat(card.key)"
+			/>
+		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-import { useFormatNumber, useVIntl } from '@modrinth/ui'
+import { RightArrowIcon } from '@modrinth/assets'
+import { Admonition, ButtonStyled, useFormatNumber, useVIntl } from '@modrinth/ui'
+import { useLocalStorage } from '@vueuse/core'
 
 import {
 	type AnalyticsDashboardStat,
@@ -25,10 +49,13 @@ import {
 import { analyticsStatCardMessages, formatAnalyticsStatLabel } from '../analytics-messages.ts'
 import StatCard from './StatCard.vue'
 
+const MONETIZATION_BANNER_DISMISSED_KEY = 'analytics-monetization-banner-dismissed'
+
 const {
 	activeStat,
 	setActiveStat,
 	currentTotals,
+	previousTotals,
 	percentChanges,
 	hasPreviousPeriodComparison,
 	selectedBreakdowns,
@@ -36,6 +63,11 @@ const {
 } = injectAnalyticsDashboardContext()
 const formatNumber = useFormatNumber()
 const { formatMessage } = useVIntl()
+const monetizationBannerDismissed = useLocalStorage(MONETIZATION_BANNER_DISMISSED_KEY, false)
+const showMonetizationBanner = computed(
+	() => selectedBreakdowns.value.includes('monetization') && !monetizationBannerDismissed.value,
+)
+const MAX_PREVIOUS_PERIOD_PERCENT_DISPLAY = 1000
 
 const compactNumberFormatter = computed(
 	() =>
@@ -57,16 +89,79 @@ function formatStatNumber(value: number): string {
 
 function formatPercent(value: number): string {
 	const rounded = Math.round(value * 10) / 10
+	if (rounded === 0) {
+		return '0%'
+	}
+
 	const signPrefix = rounded > 0 ? '+' : ''
 	return `${signPrefix}${rounded.toFixed(1)}%`
 }
 
-function formatPreviousPeriodPercent(value: number): string | null {
+function formatSignedStatNumber(value: number): string {
+	const signPrefix = value > 0 ? '+' : ''
+	return `${signPrefix}${formatStatNumber(value)}`
+}
+
+function formatSignedRevenue(value: number): string {
+	const signPrefix = value > 0 ? '+' : value < 0 ? '-' : ''
+	return `${signPrefix}${formatMessage(analyticsStatCardMessages.revenueValue, {
+		value: formatStatNumber(Math.abs(value)),
+	})}`
+}
+
+function formatSignedPlaytimeHours(value: number): string {
+	const rounded = Math.round(value * 10) / 10
+	if (rounded === 0) {
+		return '0'
+	}
+
+	if (Math.abs(rounded) >= 1000) {
+		const signPrefix = rounded > 0 ? '+' : ''
+		return `${signPrefix}${compactNumberFormatter.value.format(rounded)}`
+	}
+
+	const signPrefix = rounded > 0 ? '+' : ''
+	return `${signPrefix}${rounded.toFixed(1)}`
+}
+
+function formatSignedPlaytime(value: number): string {
+	return formatMessage(analyticsStatCardMessages.playtimeHours, {
+		hours: formatSignedPlaytimeHours(value / 3600),
+	})
+}
+
+function formatPreviousPeriodComparison(
+	stat: AnalyticsDashboardStat,
+	percentChange: number,
+	currentValue: number,
+	previousValue: number,
+): string | null {
 	if (!hasPreviousPeriodComparison.value) {
 		return null
 	}
 
-	return formatPercent(value)
+	const delta = currentValue - previousValue
+	if (previousValue === 0 && currentValue === 0) {
+		return formatPercent(percentChange)
+	}
+
+	if (previousValue !== 0 && Math.abs(percentChange) <= MAX_PREVIOUS_PERIOD_PERCENT_DISPLAY) {
+		return formatPercent(percentChange)
+	}
+
+	switch (stat) {
+		case 'revenue':
+			return formatSignedRevenue(delta)
+		case 'playtime':
+			return formatSignedPlaytime(delta)
+		case 'views':
+		case 'downloads':
+			return formatSignedStatNumber(delta)
+	}
+}
+
+function dismissMonetizationBanner() {
+	monetizationBannerDismissed.value = true
 }
 
 const statCards = computed<
@@ -83,7 +178,12 @@ const statCards = computed<
 		key: 'views',
 		label: formatAnalyticsStatLabel('views', formatMessage),
 		statLabel: formatStatNumber(currentTotals.value.views),
-		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.views),
+		vsPrevPeriodPercent: formatPreviousPeriodComparison(
+			'views',
+			percentChanges.value.views,
+			currentTotals.value.views,
+			previousTotals.value.views,
+		),
 		icon: 'eye',
 		disabled: !isAnalyticsDashboardStatRelevant('views', selectedBreakdowns.value),
 	},
@@ -91,7 +191,12 @@ const statCards = computed<
 		key: 'downloads',
 		label: formatAnalyticsStatLabel('downloads', formatMessage),
 		statLabel: formatStatNumber(currentTotals.value.downloads),
-		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.downloads),
+		vsPrevPeriodPercent: formatPreviousPeriodComparison(
+			'downloads',
+			percentChanges.value.downloads,
+			currentTotals.value.downloads,
+			previousTotals.value.downloads,
+		),
 		icon: 'download',
 		disabled: !isAnalyticsDashboardStatRelevant('downloads', selectedBreakdowns.value),
 	},
@@ -101,7 +206,12 @@ const statCards = computed<
 		statLabel: formatMessage(analyticsStatCardMessages.revenueValue, {
 			value: formatStatNumber(currentTotals.value.revenue),
 		}),
-		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.revenue),
+		vsPrevPeriodPercent: formatPreviousPeriodComparison(
+			'revenue',
+			percentChanges.value.revenue,
+			currentTotals.value.revenue,
+			previousTotals.value.revenue,
+		),
 		icon: 'dollar',
 		disabled: !isAnalyticsDashboardStatRelevant('revenue', selectedBreakdowns.value),
 	},
@@ -111,7 +221,12 @@ const statCards = computed<
 		statLabel: formatMessage(analyticsStatCardMessages.playtimeHours, {
 			hours: formatStatNumber(currentTotals.value.playtime / 3600),
 		}),
-		vsPrevPeriodPercent: formatPreviousPeriodPercent(percentChanges.value.playtime),
+		vsPrevPeriodPercent: formatPreviousPeriodComparison(
+			'playtime',
+			percentChanges.value.playtime,
+			currentTotals.value.playtime,
+			previousTotals.value.playtime,
+		),
 		icon: 'clock',
 		disabled: !isAnalyticsDashboardStatRelevant('playtime', selectedBreakdowns.value),
 	},