refactor(client): use composition api
This commit is contained in:
		
							parent
							
								
									4efee455b1
								
							
						
					
					
						commit
						a6fff86099
					
				
					 1 changed files with 43 additions and 54 deletions
				
			
		|  | @ -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 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); | ||||
| 
 | ||||
| function draw(): void { | ||||
| 	const stats = props.src.slice().reverse(); | ||||
| 	const peak = Math.max.apply(null, stats) || 1; | ||||
| 
 | ||||
| 			const polylinePoints = stats.map((n, i) => [ | ||||
| 				i * (this.viewBoxX / (stats.length - 1)), | ||||
| 				(1 - (n / peak)) * this.viewBoxY | ||||
| 	const _polylinePoints = stats.map((n, i) => [ | ||||
| 		i * (viewBoxX / (stats.length - 1)), | ||||
| 		(1 - (n / peak)) * viewBoxY, | ||||
| 	]); | ||||
| 
 | ||||
| 			this.polylinePoints = polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); | ||||
| 	polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); | ||||
| 
 | ||||
| 			this.polygonPoints = `0,${ this.viewBoxY } ${ this.polylinePoints } ${ this.viewBoxX },${ this.viewBoxY }`; | ||||
| 	polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`; | ||||
| 
 | ||||
| 			this.headX = polylinePoints[polylinePoints.length - 1][0]; | ||||
| 			this.headY = polylinePoints[polylinePoints.length - 1][1]; | ||||
| 		} | ||||
| 	} | ||||
| 	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> | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue