refactor(LineChart): Converted to composition API

frontend/src/components/LineChart.vue

@@ -1,19 +1,5 @@
-<template>
-	<Line
-		:ref="`chart-${chartId}`"
-		:chart-options="chartOptions"
-		:chart-data="data"
-		:chart-id="chartId"
-		:dataset-id-key="datasetIdKey"
-		:plugins="plugins"
-		:css-classes="cssClasses"
-		:styles="chartStyles"
-		:width="width"
-		:height="height"
-	/>
-</template>
-
-<script>
+<script setup lang="ts">
+import { computed } from "vue";
 import { Line } from "vue-chartjs";
 import {
 	Chart as ChartJS,
@@ -38,64 +24,42 @@ ChartJS.register(
 	LineController
 );
 
-export default {
-	name: "LineChart",
-	// eslint-disable-next-line vue/no-reserved-component-names
-	components: { Line },
-	props: {
-		chartId: {
-			type: String,
-			default: "line-chart"
-		},
-		datasetIdKey: {
-			type: String,
-			default: "label"
-		},
-		width: {
-			type: Number,
-			default: 200
-		},
-		height: {
-			type: Number,
-			default: 200
-		},
-		cssClasses: {
-			default: "",
-			type: String
-		},
-		styles: {
-			type: Object,
-			default: () => {}
-		},
-		plugins: {
-			type: Object,
-			default: () => {}
-		},
-		data: {
-			type: Object,
-			default: () => {}
-		},
-		options: {
-			type: Object,
-			default: () => {}
-		}
-	},
-	computed: {
-		chartStyles() {
-			return {
-				position: "relative",
-				height: this.height,
-				...this.styles
-			};
-		},
-		chartOptions() {
-			return {
-				responsive: true,
-				maintainAspectRatio: false,
-				resizeDelay: 10,
-				...this.options
-			};
-		}
-	}
-};
+const props = defineProps({
+	chartId: { type: String, default: "line-chart" },
+	datasetIdKey: { type: String, default: "label" },
+	width: { type: Number, default: 200 },
+	height: { type: Number, default: 200 },
+	cssClasses: { default: "", type: String },
+	styles: { type: Object, default: () => {} },
+	plugins: { type: Object, default: () => {} },
+	data: { type: Object, default: () => {} },
+	options: { type: Object, default: () => {} }
+});
+
+const chartStyles = computed(() => ({
+	position: "relative",
+	height: props.height,
+	...props.styles
+}));
+const chartOptions = computed(() => ({
+	responsive: true,
+	maintainAspectRatio: false,
+	resizeDelay: 10,
+	...props.options
+}));
 </script>
+
+<template>
+	<Line
+		:ref="`chart-${chartId}`"
+		:chart-options="chartOptions"
+		:chart-data="data"
+		:chart-id="chartId"
+		:dataset-id-key="datasetIdKey"
+		:plugins="plugins"
+		:css-classes="cssClasses"
+		:styles="chartStyles"
+		:width="width"
+		:height="height"
+	/>
+</template>