From 756f4e14d77ee17336e6f108a8b3eab475e72004 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Fri, 18 Oct 2024 15:29:41 +0000
Subject: [PATCH] basic draft

---
 bun.lockb | 0 
 nuxt.config.ts | 18 +++++++++---------
 package.json | 1 +
 app/components/BarChart.vue | 80 --------------------------------------------------------------------------------
 app/components/Explanation.vue | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 app/components/LineChart.vue | 79 -------------------------------------------------------------------------------
 app/pages/charts.vue | 62 ++++++++++----------------------------------------------------
 server/tasks/analyze.ts | 1 +
 app/components/chart/BarChart.vue | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 app/components/chart/LineChart.vue | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 app/components/filter/Item.vue | 44 ++++++++++++++++++--------------------------
 11 file(s) changed, 243 insertion(s)(+), 246 deletion(s)(-)

diff --git a/bun.lockb b/bun.lockb
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/nuxt.config.ts b/nuxt.config.ts
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -22,16 +22,16 @@
 			},
 		},
 		devStorage: {
-			statistics: {
-				driver: "fs",
-				base: "./.data/statistics",
-			},
 			// statistics: {
-			// 	driver: "mongodb",
-			// 	connectionString: `${process.env.MONGODB_CONNECTION}`,
-			// 	databaseName: `${process.env.MONGODB_DB}`,
-			// 	collectionName: "stats",
+			// 	driver: "fs",
+			// 	base: "./.data/statistics",
 			// },
+			statistics: {
+				driver: "mongodb",
+				connectionString: `${process.env.MONGODB_CONNECTION}`,
+				databaseName: `${process.env.MONGODB_DB}`,
+				collectionName: "stats",
+			},
 		},
 		experimental: {
 			tasks: true,
@@ -44,6 +44,6 @@
 		},
 	},
 
-	modules: ["@nuxt/icon", "nuxt-posthog"],
+	modules: ["@nuxt/icon", "nuxt-posthog", "@nuxtjs/tailwindcss"],
 	compatibilityDate: "2024-07-05",
 });
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
 		"@iconify-json/mdi": "^1.2.1",
 		"@iconify-json/ph": "^1.2.1",
 		"@nuxt/icon": "^1.5.6",
+		"@nuxtjs/tailwindcss": "^6.12.2",
 		"nuxt-posthog": "^1.5.4"
 	}
 }
diff --git a/app/components/BarChart.vue b/app/components/BarChart.vue
deleted file mode 100644
--- a/app/components/BarChart.vue
+++ /dev/null
@@ -1,80 +0,0 @@
-<script setup lang="ts">
-import { Bar } from "vue-chartjs";
-
-const props = defineProps<{
-	data: StatExport | undefined;
-}>();
-
-const chartData = computed(() => {
-	if (!props.data) {
-		return {
-			labels: [],
-			datasets: [],
-		};
-	}
-
-	return {
-		labels: props.data.labels,
-		datasets: props.data.data.map((value) => {
-			return {
-				...value,
-				borderRadius: 3,
-			};
-		}),
-	};
-});
-
-const chartOptions = ref({
-	responsive: true,
-	maintainAspectRatio: false,
-	scales: {
-		x: {
-			stacked: true,
-			grid: {
-				color: "#1b1a1e",
-			},
-			ticks: {
-				color: "#8a8a8c",
-			},
-		},
-		y: {
-			stacked: true,
-			grid: {
-				color: "#1b1a1e",
-			},
-
-			ticks: {
-				color: "#8a8a8c",
-			},
-		},
-	},
-	plugins: {
-		legend: {
-			labels: {
-				color: "#8a8a8c",
-				useBorderRadius: true,
-			},
-		},
-	},
-});
-</script>
-
-<template>
-  <div id="container">
-    <Bar
-        :data="chartData"
-        :options="chartOptions"
-    />
-  </div>
-</template>
-<style scoped>
-#container {
-  flex: 1;
-
-  canvas {
-    position: absolute;
-    margin: 10px;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/app/components/Explanation.vue b/app/components/Explanation.vue
new file mode 100644
--- /dev/null
+++ b/app/components/Explanation.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+defineProps<{ explanation: string | undefined }>();
+</script>
+
+<template>
+  <div id="tooltip">
+    <Icon name="ph:question" size="25" style="color: var(--white)"/>
+    <div id="explanation" v-html="explanation">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#tooltip {
+  position: absolute;
+
+  top: 0;
+  right: 10px;
+
+  &:not(:hover) {
+    #explanation {
+      display: none;
+    }
+  }
+
+  #explanation {
+    position: absolute;
+    right: 0;
+
+    background-color: var(--surface-200);
+    padding: 10px;
+    border-radius: 10px;
+
+    width: 400px;
+    max-width: 90vw;
+  }
+}
+</style>
+
+<style>
+#explanation {
+  h4 {
+    font-weight: bold;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/LineChart.vue b/app/components/LineChart.vue
deleted file mode 100644
--- a/app/components/LineChart.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<script setup lang="ts">
-import { Line } from "vue-chartjs";
-
-const props = defineProps<{
-	data: StatExport | undefined;
-}>();
-
-const chartData = computed(() => {
-	if (!props.data) {
-		return {
-			labels: [],
-			datasets: [],
-		};
-	}
-
-	return {
-		labels: props.data.labels,
-		datasets: props.data.data.map((value) => {
-			return {
-				...value,
-				borderRadius: 3,
-				borderColor: value.backgroundColor,
-				tension: 0.1,
-			};
-		}),
-	};
-});
-
-const chartOptions = ref({
-	responsive: true,
-	maintainAspectRatio: false,
-	scales: {
-		x: {
-			grid: {
-				color: "#1b1a1e",
-			},
-			ticks: {
-				color: "#8a8a8c",
-			},
-		},
-		y: {
-			grid: {
-				color: "#1b1a1e",
-			},
-			ticks: {
-				color: "#8a8a8c",
-			},
-		},
-	},
-	plugins: {
-		legend: {
-			labels: {
-				color: "#8a8a8c",
-				useBorderRadius: true,
-			},
-		},
-	},
-});
-</script>
-
-<template>
-  <div id="container">
-    <Line
-        :data="chartData"
-        :options="chartOptions"
-    />
-  </div>
-</template>
-<style scoped>
-#container {
-  flex: 1;
-
-  canvas {
-    position: absolute;
-    margin: 10px;
-  }
-}
-
-</style>
\ No newline at end of file
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -61,9 +61,9 @@
 </script>
 
 <template>
-  <ClientOnly>
-    <Teleport to="#navBody">
-      <div id="links">
+  <div class="flex flex-1">
+    <div class="w-48 flex">
+      <div class="flex-1 flex flex-col gap-6 px-2">
         <FilterItem v-model="projectType" :options="['mod', 'plugin', 'datapack', 'shader', 'resourcepack', 'modpack', 'projects', 'versions', 'authors', 'files']" title="Type" explanation=""/>
         <If :state="!isGlobalStats">
           <FilterItem v-model="stat" :options="['count', 'downloads', 'versions']" title="Stat" explanation=""/>
@@ -77,55 +77,13 @@
           <FilterItem v-if="time != 'current'" v-model="version" :options="gameVersions" title="Version" explanation=""/>
         </If>
       </div>
-    </Teleport>
-  </ClientOnly>
+      <div class="border border-neutral-800 w-0.5 mb-2"></div>
+    </div>
 
-  <BarChart v-if="time == 'current' && !isGlobalStats" :data="data" :type="projectType as string"/>
-  <LineChart v-else :data="data" :type="projectType as string"/>
-
-  <div id="tooltip">
-    <Icon name="ph:question" size="25" style="color: var(--white)"/>
-    <div id="explanation" v-html="explanation">
+    <div class="flex flex-1">
+      <ChartBarChart v-if="time == 'current' && !isGlobalStats" :data="data" :type="projectType as string"/>
+      <ChartLineChart v-else :data="data" :type="projectType as string"/>
+      <Explanation :explanation="explanation"/>
     </div>
   </div>
-</template>
-
-<style scoped>
-#links{
-  display: flex;
-  gap: 20px;
-}
-
-#tooltip {
-  position: absolute;
-
-  top: 0;
-  right: 10px;
-
-  &:not(:hover) {
-    #explanation {
-      display: none;
-    }
-  }
-
-  #explanation {
-    position: absolute;
-    right: 0;
-
-    background-color: var(--surface-200);
-    padding: 10px;
-    border-radius: 10px;
-
-    width: 400px;
-    max-width: 90vw;
-  }
-}
-</style>
-
-<style>
-#explanation {
-  h4 {
-    margin: 0;
-  }
-}
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/server/tasks/analyze.ts b/server/tasks/analyze.ts
--- a/server/tasks/analyze.ts
+++ b/server/tasks/analyze.ts
@@ -9,6 +9,7 @@
 		description: "Update all the statistics",
 	},
 	async run() {
+		return {};
 		consola.log("starting analyze");
 
 		console.time("finish analyze");
diff --git a/app/components/chart/BarChart.vue b/app/components/chart/BarChart.vue
new file mode 100644
--- /dev/null
+++ b/app/components/chart/BarChart.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Bar } from "vue-chartjs";
+
+const props = defineProps<{
+	data: StatExport | undefined;
+}>();
+
+const chartData = computed(() => {
+	if (!props.data) {
+		return {
+			labels: [],
+			datasets: [],
+		};
+	}
+
+	return {
+		labels: props.data.labels,
+		datasets: props.data.data.map((value) => {
+			return {
+				...value,
+				borderRadius: 3,
+			};
+		}),
+	};
+});
+
+const chartOptions = ref({
+	responsive: true,
+	maintainAspectRatio: false,
+	scales: {
+		x: {
+			stacked: true,
+			grid: {
+				color: "#1b1a1e",
+			},
+			ticks: {
+				color: "#8a8a8c",
+			},
+		},
+		y: {
+			stacked: true,
+			grid: {
+				color: "#1b1a1e",
+			},
+
+			ticks: {
+				color: "#8a8a8c",
+			},
+		},
+	},
+	plugins: {
+		legend: {
+			labels: {
+				color: "#8a8a8c",
+				useBorderRadius: true,
+			},
+		},
+	},
+});
+</script>
+
+<template>
+  <div id="container">
+    <Bar
+        :data="chartData"
+        :options="chartOptions"
+    />
+  </div>
+</template>
+<style scoped>
+#container {
+  flex: 1;
+
+  canvas {
+    position: absolute;
+    margin: 10px;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/app/components/chart/LineChart.vue b/app/components/chart/LineChart.vue
new file mode 100644
--- /dev/null
+++ b/app/components/chart/LineChart.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { Line } from "vue-chartjs";
+
+const props = defineProps<{
+	data: StatExport | undefined;
+}>();
+
+const chartData = computed(() => {
+	if (!props.data) {
+		return {
+			labels: [],
+			datasets: [],
+		};
+	}
+
+	return {
+		labels: props.data.labels,
+		datasets: props.data.data.map((value) => {
+			return {
+				...value,
+				borderRadius: 3,
+				borderColor: value.backgroundColor,
+				tension: 0.1,
+			};
+		}),
+	};
+});
+
+const chartOptions = ref({
+	responsive: true,
+	maintainAspectRatio: false,
+	scales: {
+		x: {
+			grid: {
+				color: "#1b1a1e",
+			},
+			ticks: {
+				color: "#8a8a8c",
+			},
+		},
+		y: {
+			grid: {
+				color: "#1b1a1e",
+			},
+			ticks: {
+				color: "#8a8a8c",
+			},
+		},
+	},
+	plugins: {
+		legend: {
+			labels: {
+				color: "#8a8a8c",
+				useBorderRadius: true,
+			},
+		},
+	},
+});
+</script>
+
+<template>
+  <div id="container">
+    <Line
+        :data="chartData"
+        :options="chartOptions"
+    />
+  </div>
+</template>
+<style scoped>
+#container {
+  flex: 1;
+
+  canvas {
+    position: absolute;
+    margin: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/app/components/filter/Item.vue b/app/components/filter/Item.vue
--- a/app/components/filter/Item.vue
+++ b/app/components/filter/Item.vue
@@ -1,42 +1,34 @@
 <script setup lang="ts">
 const model = defineModel();
 
-const { canClear = false } = defineProps<{
+const { canClear = false, options } = defineProps<{
 	title: string;
 	explanation: string;
 	options: string[];
 	canClear?: boolean;
 }>();
+
+const open = ref(false);
 </script>
 
 <template>
-  <div id="main">
-    <abbr :title="explanation" id="title">{{ title }}</abbr>
-    <select v-model="model">
-      <option v-if="canClear" :value="undefined">
-      </option>
-      <option v-for="option in options" :value="option">
-        {{ option }}
-      </option>
-    </select>
+  <div class="flex flex-col">
+    <button @click="open = !open" class="transition flex justify-between items-center" >
+      <abbr class="no-underline text-sm text-neutral-400" :title="explanation" id="title">{{ title }}</abbr>
+      <icon name="ep:arrow-down-bold" :class="{'rotate-180': open}" size="15"/>
+    </button>
+    <div class="min-h-4">
+      <div class="absolute z-0">
+        {{ model }}
+      </div>
+      <div class="bg-black z-10 relative flex flex-col max-h-48 overflow-scroll transition-all" :class="{'max-h-0': !open}">
+        <button class="text-left" v-for="option in options" @click="model = option">
+          {{ option }}
+        </button>
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
-#main{
-  min-width: max-content;
-  background: var(--surface-200);
-  padding: 5px 10px;
-  border-radius: 5px;
-
-  #title {
-    font-size: small;
-    text-decoration: none;
-  }
-
-  select{
-    font-size: medium;
-    width: 100%;
-  }
-}
 </style>
\ No newline at end of file

--
tangled.sh