From 88c41a1b43f7cc72d948af96e8eef038e267a158 Mon Sep 17 00:00:00 2001
From: ToBinio <tobias.frischmann@proton.me>
Date: Thu, 30 Apr 2026 10:55:08 +0200
Subject: [PATCH] add description to all filter items

---
 app/components/filter/Item.vue |  57 ++++++++------
 app/pages/charts.vue           | 131 ++++++++++++++++++++++++++-------
 2 files changed, 137 insertions(+), 51 deletions(-)

diff --git a/app/components/filter/Item.vue b/app/components/filter/Item.vue
index 8ae6092..9d28c51 100644
--- a/app/components/filter/Item.vue
+++ b/app/components/filter/Item.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-	const model = defineModel();
+	const model = defineModel<string>();
 
 	const { canClear = false, options } = defineProps<{
 		shouldDisplay: boolean;
 		title: string;
 		explanation: string;
-		options: string[];
+		options: { value: string; description: string }[];
 		canClear?: boolean;
 	}>();
 
@@ -18,41 +18,49 @@
 			model.value = option;
 		}
 	}
+
+	function getOptionDescription(option: string | undefined): string {
+		return options.find((o) => o.value === option)?.description ?? "";
+	}
 </script>
 
 <template>
 	<Transition>
 		<div v-if="shouldDisplay" id="main" class="flex flex-col transition-all">
-			<button
-				type="button"
-				@click="() => isOpen = !isOpen"
-				class="cursor-pointer transition flex justify-between items-center"
-			>
-				<abbr
-					class="no-underline text-sm text-neutral-400"
-					:title="explanation"
-					id="title"
+			<h2>
+				<button
+					type="button"
+					@click="() => isOpen = !isOpen"
+					class="w-full cursor-pointer transition flex justify-between items-center"
 				>
-					{{ title }}
-				</abbr>
-				<icon
-					name="akar-icons:chevron-up"
-					:class="{'rotate-180': !isOpen}"
-					size="15"
-				/>
-			</button>
+					<abbr
+						class="no-underline text-sm text-neutral-400"
+						:title="explanation"
+						id="title"
+					>
+						{{ title }}
+					</abbr>
+					<icon
+						name="akar-icons:chevron-up"
+						:class="{'rotate-180': !isOpen}"
+						size="15"
+					/>
+				</button>
+			</h2>
 			<div class="min-h-4 relative">
-				<div>
+				<h3>
 					<button
 						type="button"
 						class="absolute z-0 font-bold content-between justify-between enabled:cursor-pointer"
 						:class="{'hover:text-neutral-400': canClear}"
 						@click="model = undefined"
 						:disabled="!canClear"
+						:title="getOptionDescription(model)"
 					>
 						{{ model }}
 					</button>
-				</div>
+					<span class="sr-only"> {{ getOptionDescription(model) }} </span>
+				</h3>
 				<div
 					class="bg-zinc-900 z-10 relative flex flex-col max-h-48 overflow-scroll transition-all px-1 border-l-2 border-zinc-800"
 					:class="{'max-h-0!': !isOpen}"
@@ -60,11 +68,12 @@
 					<button
 						type="button"
 						class="text-left hover:bg-zinc-800 rounded cursor-pointer px-1"
-						:class="{'font-bold': option === model}"
+						:class="{'font-bold': option.value === model}"
 						v-for="option in options"
-						@click="onSelect(option)"
+						:title="option.description"
+						@click="onSelect(option.value)"
 					>
-						{{ option }}
+						{{ option.value }}
 					</button>
 				</div>
 			</div>
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index cbf5edf..a6088b2 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -37,13 +37,27 @@
 	const time = useFilterItem("time", "all");
 	const times = computed(() => {
 		if (isProjectStats.value) {
-			return ["all", "last 30 days", "today"];
+			return [
+				{ value: "all", description: "Display Full available history" },
+				{ value: "last 30 days", description: "Display only last 30 days" },
+				{ value: "today", description: "Display only Today" },
+			];
 		}
 		if (isRevenueStats.value) {
-			return ["all", "last 30 days", "raw"];
+			return [
+				{ value: "all", description: "Display Full available history" },
+				{ value: "last 30 days", description: "Display only last 30 days" },
+				{
+					value: "raw",
+					description: "Display Full available time with out smoothing",
+				},
+			];
 		}
 
-		return ["all", "last 30 days"];
+		return [
+			{ value: "all", description: "Display Full available history" },
+			{ value: "last 30 days", description: "Display only last 30 days" },
+		];
 	});
 
 	const aggregate = useFilterItem("aggregate", "yes");
@@ -54,19 +68,46 @@
 
 	const versionFrom = useFilterNullableItem("version_from", undefined);
 	const versionTo = useFilterNullableItem("version_to", undefined);
-	const { to, from } = await useVersionRange(
+	const { to: toRaw, from: fromRaw } = await useVersionRange(
 		versionGroup,
 		versionTo,
 		versionFrom,
 	);
 
+	const to = computed(() =>
+		toRaw.value.map((v) => {
+			return {
+				value: v,
+				description: `The Minecraft version ${v} is the first to be displayed`,
+			};
+		}),
+	);
+	const from = computed(() =>
+		fromRaw.value.map((v) => {
+			return {
+				value: v,
+				description: `The Minecraft version ${v} is the last to be displayed`,
+			};
+		}),
+	);
+
 	watch([versionGroup], () => {
 		versionFrom.value = undefined;
 		versionTo.value = undefined;
 	});
 
-	const gameVersions = await useGameVersions(versionGroup);
-	const defaultVersion = computed(() => gameVersions.value[0] as string);
+	const gameVersionsRaw = await useGameVersions(versionGroup);
+	const defaultVersion = computed(() => gameVersionsRaw.value[0] as string);
+
+	const gameVersions = computed(() =>
+		gameVersionsRaw.value.map((v) => {
+			return {
+				value: v,
+				description: `Only display the Minecraft version ${v}`,
+			};
+		}),
+	);
+
 	const version = useFilterItem("version", defaultVersion);
 
 	const isGroupData = computed(() => {
@@ -122,40 +163,73 @@
 					:should-display="true"
 					v-model="projectType"
 					:options="[
-                        'mod',
-                        'plugin',
-                        'datapack',
-                        'shader',
-                        'resourcepack',
-                        'modpack',
-                        'projects',
-                        'versions',
-                        'authors',
-                        'files',
-                        'revenue',
+                        {
+                          value: 'mod',
+                          description: 'Minecraft Mods on Modrinth',
+                        },
+                        {
+                          value: 'plugin',
+                          description: 'Minecraft Plugins on Modrinth',
+                        },
+                        {
+                          value: 'datapack',
+                          description: 'Minecraft Datapacks on Modrinth',
+                        },
+                        {
+                          value: 'shader',
+                          description: 'Minecraft Shaders on Modrinth',
+                        },
+                        {
+                          value: 'resourcepack',
+                          description: 'Minecraft Resourcepacks on Modrinth',
+                        },
+                        {
+                          value: 'modpack',
+                          description: 'Minecraft Modpacks on Modrinth',
+                        },
+                        {
+                          value: 'projects',
+                          description: 'Number of Projects on Modrinth',
+                        },
+                        {
+                          value: 'versions',
+                          description: 'Number of Versions on Modrinth',
+                        },
+                        {
+                          value: 'authors',
+                          description: 'Number of Authors on Modrinth',
+                        },
+                        {
+                          value: 'files',
+                          description: 'Number of Files on Modrinth',
+                        },
+                        {
+                          value: 'revenue',
+                          description: 'Revenue on Modrinth',
+                        },
                     ]"
 					title="Type"
-					explanation=""
+					explanation="What type of project should be displayed"
 				/>
 
 				<FilterItem
 					:should-display="isProjectStats"
 					v-model="stat"
-					:options="['count', 'downloads', 'versions']"
+					:options="[{ value: 'count', description: 'Number projects supporting each version / loader' }, { value: 'downloads', description: 'Number of Downloads per Version / Loader' }, { value: 'versions', description: 'Number of Versions existing per Version / Loader' }]"
 					title="Stat"
-					explanation=""
+					explanation="What information about the projects should be displayed"
 				/>
 				<FilterItem
 					:should-display="isProjectStats"
 					v-model="versionGroup"
-					:options="['major', 'minor', 'all', 'unified']"
+					:options="[{ value: 'major', description: 'Grouped by Major Minecraft version' }, { value: 'minor', description: 'Grouped by Minor Minecraft version' }, { value: 'all', description: 'All Minecraft versions seperatly' }, { value: 'unified', description: 'Unify all Minecraft versions' }]"
 					title="Version Group"
-					explanation="What type of Minecraft versions should be displayed"
+					explanation="How should Minecraft versions be grouped"
 				/>
 				<FilterItem
 					:should-display="isProjectStats"
 					v-model="exclusive"
-					:options="['yes', 'no']"
+					:options="[{ value: 'yes', description: 'Filter out versions that support multiple launchers' }, { value: 'no', description: 'Show all versions' }]"
 					title="Exclusive"
 					explanation="Only show Versions made for a single launcher"
 				/>
@@ -164,7 +238,7 @@
 					v-model="time"
 					:options="times"
 					title="Time"
-					explanation=""
+					explanation="What Time period should be displayed"
 				/>
 
 				<FilterItem
@@ -192,7 +266,7 @@
 					v-model="version"
 					:options="gameVersions"
 					title="Version"
-					explanation=""
+					explanation="Which version should be displayed"
 				/>
 
 				<FilterItem
@@ -203,9 +277,12 @@
                         !isRevenueStats
                     "
 					v-model="aggregate"
-					:options="['yes', 'no']"
+					:options="[
+						{ value: 'yes', description: 'Show absolute values' },
+						{ value: 'no', description: 'Show absulute value changes from the previous version' },
+					]"
 					title="Aggregate"
-					explanation=""
+					explanation="Should the data be displayed as absolute values or changes from the previous version"
 				/>
 			</div>
 		</SideBar>
-- 
2.51.2