From 3e05740bee433efb5cf9a225c6595dc1b2207b0e Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sat, 23 Jul 2022 23:03:20 +0200
Subject: [PATCH] refactor queue chart to composition API

---
 .../client/src/components/queue-chart.vue     | 325 +++++++++---------
 1 file changed, 154 insertions(+), 171 deletions(-)

diff --git a/packages/client/src/components/queue-chart.vue b/packages/client/src/components/queue-chart.vue
index cc684295c..c7e829b61 100644
--- a/packages/client/src/components/queue-chart.vue
+++ b/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,183 +42,166 @@ Chart.register(
 	Filler,
 );
 
-export default defineComponent({
-	props: {
-		domain: {
-			type: String,
-			required: true,
+const props = defineProps<{
+	domain: string,
+	connection: any,
+}>();
+
+const chartEl = ref<HTMLCanvasElement>(null);
+
+const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
+
+// フォントカラー
+Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
+
+onMounted(() => {
+	const chartInstance = new Chart(chartEl.value, {
+		type: 'line',
+		data: {
+			labels: [],
+			datasets: [{
+				label: 'Process',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#00E396',
+				backgroundColor: '#00E3961A',
+				data: []
+			}, {
+				label: 'Active',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#00BCD4',
+				backgroundColor: '#00BCD41A',
+				data: []
+			}, {
+				label: 'Waiting',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#FFB300',
+				backgroundColor: '#FFB3001A',
+				yAxisID: 'y2',
+				data: []
+			}, {
+				label: 'Delayed',
+				pointRadius: 0,
+				tension: 0,
+				borderWidth: 2,
+				borderJoinStyle: 'round',
+				borderColor: '#E53935',
+				borderDash: [5, 5],
+				fill: false,
+				yAxisID: 'y2',
+				data: []
+			}],
 		},
-		connection: {
-			required: true,
-		},
-	},
-
-	setup(props) {
-		const chartEl = ref<HTMLCanvasElement>(null);
-
-		const gridColor = defaultStore.state.darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)';
-
-		// フォントカラー
-		Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
-
-		onMounted(() => {
-			const chartInstance = new Chart(chartEl.value, {
-				type: 'line',
-				data: {
-					labels: [],
-					datasets: [{
-						label: 'Process',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#00E396',
-						backgroundColor: '#00E3961A',
-						data: []
-					}, {
-						label: 'Active',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#00BCD4',
-						backgroundColor: '#00BCD41A',
-						data: []
-					}, {
-						label: 'Waiting',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#FFB300',
-						backgroundColor: '#FFB3001A',
-						yAxisID: 'y2',
-						data: []
-					}, {
-						label: 'Delayed',
-						pointRadius: 0,
-						tension: 0,
-						borderWidth: 2,
-						borderJoinStyle: 'round',
-						borderColor: '#E53935',
-						borderDash: [5, 5],
-						fill: false,
-						yAxisID: 'y2',
-						data: []
-					}],
+		options: {
+			aspectRatio: 2.5,
+			layout: {
+				padding: {
+					left: 16,
+					right: 16,
+					top: 16,
+					bottom: 8,
 				},
-				options: {
-					aspectRatio: 2.5,
-					layout: {
-						padding: {
-							left: 16,
-							right: 16,
-							top: 16,
-							bottom: 8,
-						},
+			},
+			scales: {
+				x: {
+					grid: {
+						display: true,
+						color: gridColor,
+						borderColor: '#0000',
 					},
-					scales: {
-						x: {
-							grid: {
-								display: true,
-								color: gridColor,
-								borderColor: '#0000',
-							},
-							ticks: {
-								display: false,
-								maxTicksLimit: 10
-							},
-						},
-						y: {
-							min: 0,
-							stack: 'queue',
-							stackWeight: 2,
-							grid: {
-								color: gridColor,
-								borderColor: '#0000',
-							},
-						},
-						y2: {
-							min: 0,
-							offset: true,
-							stack: 'queue',
-							stackWeight: 1,
-							grid: {
-								color: gridColor,
-								borderColor: '#0000',
-							},
-						},
-					},
-					interaction: {
-						intersect: false,
-					},
-					plugins: {
-						legend: {
-							position: 'bottom',
-							labels: {
-								boxWidth: 16,
-							},
-						},
-						tooltip: {
-							mode: 'index',
-							animation: {
-								duration: 0,
-							},
-						},
+					ticks: {
+						display: false,
+						maxTicksLimit: 10
 					},
 				},
-			});
+				y: {
+					min: 0,
+					stack: 'queue',
+					stackWeight: 2,
+					grid: {
+						color: gridColor,
+						borderColor: '#0000',
+					},
+				},
+				y2: {
+					min: 0,
+					offset: true,
+					stack: 'queue',
+					stackWeight: 1,
+					grid: {
+						color: gridColor,
+						borderColor: '#0000',
+					},
+				},
+			},
+			interaction: {
+				intersect: false,
+			},
+			plugins: {
+				legend: {
+					position: 'bottom',
+					labels: {
+						boxWidth: 16,
+					},
+				},
+				tooltip: {
+					mode: 'index',
+					animation: {
+						duration: 0,
+					},
+				},
+			},
+		},
+	});
 
-			const onStats = (stats) => {
-				chartInstance.data.labels.push('');
-				chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
-				chartInstance.data.datasets[1].data.push(stats[props.domain].active);
-				chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
-				chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
-				if (chartInstance.data.datasets[0].data.length > 200) {
-					chartInstance.data.labels.shift();
-					chartInstance.data.datasets[0].data.shift();
-					chartInstance.data.datasets[1].data.shift();
-					chartInstance.data.datasets[2].data.shift();
-					chartInstance.data.datasets[3].data.shift();
-				}
-				chartInstance.update();
-			};
+	const onStats = (stats) => {
+		chartInstance.data.labels.push('');
+		chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+		chartInstance.data.datasets[1].data.push(stats[props.domain].active);
+		chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
+		chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
+		if (chartInstance.data.datasets[0].data.length > 200) {
+			chartInstance.data.labels.shift();
+			chartInstance.data.datasets[0].data.shift();
+			chartInstance.data.datasets[1].data.shift();
+			chartInstance.data.datasets[2].data.shift();
+			chartInstance.data.datasets[3].data.shift();
+		}
+		chartInstance.update();
+	};
 
-			const onStatsLog = (statsLog) => {
-				for (const stats of [...statsLog].reverse()) {
-					chartInstance.data.labels.push('');
-					chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
-					chartInstance.data.datasets[1].data.push(stats[props.domain].active);
-					chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
-					chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
-					if (chartInstance.data.datasets[0].data.length > 200) {
-						chartInstance.data.labels.shift();
-						chartInstance.data.datasets[0].data.shift();
-						chartInstance.data.datasets[1].data.shift();
-						chartInstance.data.datasets[2].data.shift();
-						chartInstance.data.datasets[3].data.shift();
-					}
-				}
-				chartInstance.update();
-			};
+	const onStatsLog = (statsLog) => {
+		for (const stats of [...statsLog].reverse()) {
+			chartInstance.data.labels.push('');
+			chartInstance.data.datasets[0].data.push(stats[props.domain].activeSincePrevTick);
+			chartInstance.data.datasets[1].data.push(stats[props.domain].active);
+			chartInstance.data.datasets[2].data.push(stats[props.domain].waiting);
+			chartInstance.data.datasets[3].data.push(stats[props.domain].delayed);
+			if (chartInstance.data.datasets[0].data.length > 200) {
+				chartInstance.data.labels.shift();
+				chartInstance.data.datasets[0].data.shift();
+				chartInstance.data.datasets[1].data.shift();
+				chartInstance.data.datasets[2].data.shift();
+				chartInstance.data.datasets[3].data.shift();
+			}
+		}
+		chartInstance.update();
+	};
 
-			props.connection.on('stats', onStats);
-			props.connection.on('statsLog', onStatsLog);
+	props.connection.on('stats', onStats);
+	props.connection.on('statsLog', onStatsLog);
 
-			onUnmounted(() => {
-				props.connection.off('stats', onStats);
-				props.connection.off('statsLog', onStatsLog);
-			});
-		});
-
-		return {
-			chartEl,
-		};
-	},
+	onUnmounted(() => {
+		props.connection.off('stats', onStats);
+		props.connection.off('statsLog', onStatsLog);
+	});
 });
 </script>
-
-<style lang="scss" scoped>
-
-</style>