refactor(client): use composition api

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

@@ -9,82 +9,71 @@
 			<polygon
 				:points="polygonPoints"
 				fill="#fff"
-				fill-opacity="0.5"/>
+				fill-opacity="0.5"
+			/>
 			<polyline
 				:points="polylinePoints"
 				fill="none"
 				stroke="#fff"
-				stroke-width="2"/>
+				stroke-width="2"
+			/>
 			<circle
 				:cx="headX"
 				:cy="headY"
 				r="3"
-				fill="#fff"/>
+				fill="#fff"
+			/>
 		</mask>
 	</defs>
 	<rect
 		x="-10" y="-10"
 		:width="viewBoxX + 20" :height="viewBoxY + 20"
-		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"/>
+		:style="`stroke: none; fill: url(#${ gradientId }); mask: url(#${ maskId })`"
+	/>
 </svg>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onUnmounted, watch } from 'vue';
 import { v4 as uuid } from 'uuid';
-import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		src: {
-			type: Array,
-			required: true
-		}
-	},
-	data() {
-		return {
-			viewBoxX: 50,
-			viewBoxY: 30,
-			gradientId: uuid(),
-			maskId: uuid(),
-			polylinePoints: '',
-			polygonPoints: '',
-			headX: null,
-			headY: null,
-			clock: null
-		};
-	},
-	watch: {
-		src() {
-			this.draw();
-		}
-	},
-	created() {
-		this.draw();
+const props = defineProps<{
+	src: number[];
+}>();
 
-		// Vueが何故かWatchを発動させない場合があるので
-		this.clock = window.setInterval(this.draw, 1000);
-	},
-	beforeUnmount() {
-		window.clearInterval(this.clock);
-	},
-	methods: {
-		draw() {
-			const stats = this.src.slice().reverse();
-			const peak = Math.max.apply(null, stats) || 1;
+const viewBoxX = 50;
+const viewBoxY = 50;
+const gradientId = uuid();
+const maskId = uuid();
+let polylinePoints = $ref('');
+let polygonPoints = $ref('');
+let headX = $ref<number | null>(null);
+let headY = $ref<number | null>(null);
+let clock = $ref<number | null>(null);
 
-			const polylinePoints = stats.map((n, i) => [
-				i * (this.viewBoxX / (stats.length - 1)),
-				(1 - (n / peak)) * this.viewBoxY
-			]);
+function draw(): void {
+	const stats = props.src.slice().reverse();
+	const peak = Math.max.apply(null, stats) || 1;
 
-			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
+	const _polylinePoints = stats.map((n, i) => [
+		i * (viewBoxX / (stats.length - 1)),
+		(1 - (n / peak)) * viewBoxY,
+	]);
 
-			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`;
+	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' ');
 
-			this.headX = polylinePoints[polylinePoints.length - 1][0];
-			this.headY = polylinePoints[polylinePoints.length - 1][1];
-		}
-	}
+	polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`;
+
+	headX = _polylinePoints[_polylinePoints.length - 1][0];
+	headY = _polylinePoints[_polylinePoints.length - 1][1];
+}
+
+watch(() => props.src, draw, { immediate: true });
+
+// Vueが何故かWatchを発動させない場合があるので
+clock = window.setInterval(draw, 1000);
+
+onUnmounted(() => {
+	window.clearInterval(clock);
 });
 </script>