From e99939f8636ba0d51eefd582b20b8849c1cd5c77 Mon Sep 17 00:00:00 2001
From: tobinio <Tobias.frischmann1@gmail.com>
Date: Sat, 5 Oct 2024 17:25:02 +0200
Subject: [PATCH] feat: render time charts as lineChart

---
 app/components/{Charts.vue => BarChart.vue} |  0
 app/components/LineChart.vue                | 79 +++++++++++++++++++++
 app/composables/useVersionRange.ts          |  4 +-
 app/pages/charts.vue                        | 13 +++-
 app/plugins/charts.ts                       |  4 ++
 5 files changed, 95 insertions(+), 5 deletions(-)
 rename app/components/{Charts.vue => BarChart.vue} (100%)
 create mode 100644 app/components/LineChart.vue

diff --git a/app/components/Charts.vue b/app/components/BarChart.vue
similarity index 100%
rename from app/components/Charts.vue
rename to app/components/BarChart.vue
diff --git a/app/components/LineChart.vue b/app/components/LineChart.vue
new file mode 100644
index 0000000..8a87089
--- /dev/null
+++ b/app/components/LineChart.vue
@@ -0,0 +1,79 @@
+<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/composables/useVersionRange.ts b/app/composables/useVersionRange.ts
index f470946..aa3401b 100644
--- a/app/composables/useVersionRange.ts
+++ b/app/composables/useVersionRange.ts
@@ -1,11 +1,11 @@
 import {useGameVersions} from "~/composables/useGameVersions";
 
-export function useVersionRange(
+export async function useVersionRange(
 	versionGroup: Ref<string | undefined>,
 	versionTo: Ref<string | undefined>,
 	versionFrom: Ref<string | undefined>,
 ) {
-	const versionNames = useGameVersions(versionGroup)
+	const versionNames = await useGameVersions(versionGroup)
 
 	const to = computed(() => {
 		if (!versionFrom.value) {
diff --git a/app/pages/charts.vue b/app/pages/charts.vue
index a1632da..e17a012 100644
--- a/app/pages/charts.vue
+++ b/app/pages/charts.vue
@@ -5,6 +5,7 @@ import { useExplanations } from "~/composables/useExplanations";
 import { useFilterItem } from "~/composables/useFilterItem";
 import { useVersionRange } from "#imports";
 import { useGameVersions } from "~/composables/useGameVersions";
+import BarChart from "~/components/BarChart.vue";
 
 const projectType = useFilterItem("projectType", "mod");
 const stat = useFilterItem("stat", "count");
@@ -18,10 +19,13 @@ const exclusiveBool = computed(() => exclusive.value === "yes");
 
 const versionFrom = useFilterItem("versionFrom", undefined);
 const versionTo = useFilterItem("versionFrom", undefined);
-const { to, from } = useVersionRange(versionGroup, versionTo, versionFrom);
+const { to, from } = await useVersionRange(versionGroup, versionTo, versionFrom);
 
 const gameVersions = await useGameVersions(versionGroup);
-const version = useFilterItem("version", gameVersions.value[gameVersions.value.length - 1]);
+const version = useFilterItem(
+	"version",
+	gameVersions.value[gameVersions.value.length - 1],
+);
 
 const url = computed(() => {
 	return time.value === "current" ? "/api/stats" : "/api/statsTime";
@@ -59,7 +63,10 @@ const explanation = computed(() => {
       <FilterItem v-if="time != 'current'" v-model="version" :options="gameVersions" title="Version" explanation=""/>
     </div>
   </Teleport>
-  <Charts :data="data" :type="projectType as string"/>
+
+  <BarChart v-if="time == 'current'" :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">
diff --git a/app/plugins/charts.ts b/app/plugins/charts.ts
index 7fbe14f..8481aaa 100644
--- a/app/plugins/charts.ts
+++ b/app/plugins/charts.ts
@@ -4,6 +4,8 @@ import {
 	Chart,
 	Legend,
 	LinearScale,
+	LineElement,
+	PointElement,
 	Title,
 	Tooltip,
 } from "chart.js";
@@ -12,9 +14,11 @@ export default defineNuxtPlugin(() => {
 	Chart.register(
 		CategoryScale,
 		LinearScale,
+		LineElement,
 		BarElement,
 		Title,
 		Tooltip,
 		Legend,
+		PointElement,
 	);
 });
-- 
2.51.2