refactor queue chart to composition API

packages/client/src/components/queue-chart.vue

@@ -2,8 +2,8 @@
 <canvas ref="chartEl"></canvas>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
 import {
 	Chart,
 	ArcElement,
@@ -42,18 +42,11 @@ Chart.register(
 	Filler,
 );
 
-export default defineComponent({
-	props: {
-		domain: {
-			type: String,
-			required: true,
-		},
-		connection: {
-			required: true,
-		},
-	},
+const props = defineProps<{
+	domain: string,
+	connection: any,
+}>();
 
-	setup(props) {
 const chartEl = ref<HTMLCanvasElement>(null);
 
 const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
@@ -211,14 +204,4 @@ export default defineComponent({
 		props.connection.off('statsLog', onStatsLog);
 	});
 });
-
-		return {
-			chartEl,
-		};
-	},
-});
 </script>
-
-<style lang="scss" scoped>
-
-</style>