diff options
Diffstat (limited to 'packages/frontend/src/components/MkMiniChart.vue')
| -rw-r--r-- | packages/frontend/src/components/MkMiniChart.vue | 20 |
1 files changed, 10 insertions, 10 deletions
diff --git a/packages/frontend/src/components/MkMiniChart.vue b/packages/frontend/src/components/MkMiniChart.vue index 8d2a147306..f0a2c232bd 100644 --- a/packages/frontend/src/components/MkMiniChart.vue +++ b/packages/frontend/src/components/MkMiniChart.vue @@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { watch } from 'vue'; +import { watch, ref } from 'vue'; import { v4 as uuid } from 'uuid'; import tinycolor from 'tinycolor2'; import { useInterval } from '@/scripts/use-interval.js'; @@ -43,11 +43,11 @@ const props = defineProps<{ const viewBoxX = 50; const viewBoxY = 50; const gradientId = 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 = ref(''); +const polygonPoints = ref(''); +const headX = ref<number | null>(null); +const headY = ref<number | null>(null); +const clock = ref<number | null>(null); const accent = tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--accent')); const color = accent.toRgbString(); @@ -60,12 +60,12 @@ function draw(): void { (1 - (n / peak)) * viewBoxY, ]); - polylinePoints = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); + polylinePoints.value = _polylinePoints.map(xy => `${xy[0]},${xy[1]}`).join(' '); - polygonPoints = `0,${ viewBoxY } ${ polylinePoints } ${ viewBoxX },${ viewBoxY }`; + polygonPoints.value = `0,${ viewBoxY } ${ polylinePoints.value } ${ viewBoxX },${ viewBoxY }`; - headX = _polylinePoints.at(-1)![0]; - headY = _polylinePoints.at(-1)![1]; + headX.value = _polylinePoints.at(-1)![0]; + headY.value = _polylinePoints.at(-1)![1]; } watch(() => props.src, draw, { immediate: true }); |