diff --git a/packages/client/src/components/mini-chart.vue b/packages/client/src/components/mini-chart.vue index 8c74eae87..345b6a0b0 100644 --- a/packages/client/src/components/mini-chart.vue +++ b/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>