diff options
Diffstat (limited to 'packages/frontend/src/widgets/server-metric/cpu-mem.vue')
| -rw-r--r-- | packages/frontend/src/widgets/server-metric/cpu-mem.vue | 56 |
1 files changed, 28 insertions, 28 deletions
diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue index c656d75429..9196ae209f 100644 --- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue +++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue @@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only </template> <script lang="ts" setup> -import { onMounted, onBeforeUnmount } from 'vue'; +import { onMounted, onBeforeUnmount, ref } from 'vue'; import { v4 as uuid } from 'uuid'; const props = defineProps<{ @@ -83,23 +83,23 @@ const props = defineProps<{ meta: any }>(); -let viewBoxX: number = $ref(50); -let viewBoxY: number = $ref(30); -let stats: any[] = $ref([]); +const viewBoxX = ref<number>(50); +const viewBoxY = ref<number>(30); +const stats = ref<any[]>([]); const cpuGradientId = uuid(); const cpuMaskId = uuid(); const memGradientId = uuid(); const memMaskId = uuid(); -let cpuPolylinePoints: string = $ref(''); -let memPolylinePoints: string = $ref(''); -let cpuPolygonPoints: string = $ref(''); -let memPolygonPoints: string = $ref(''); -let cpuHeadX: any = $ref(null); -let cpuHeadY: any = $ref(null); -let memHeadX: any = $ref(null); -let memHeadY: any = $ref(null); -let cpuP: string = $ref(''); -let memP: string = $ref(''); +const cpuPolylinePoints = ref<string>(''); +const memPolylinePoints = ref<string>(''); +const cpuPolygonPoints = ref<string>(''); +const memPolygonPoints = ref<string>(''); +const cpuHeadX = ref<any>(null); +const cpuHeadY = ref<any>(null); +const memHeadX = ref<any>(null); +const memHeadY = ref<any>(null); +const cpuP = ref<string>(''); +const memP = ref<string>(''); onMounted(() => { props.connection.on('stats', onStats); @@ -115,24 +115,24 @@ onBeforeUnmount(() => { }); function onStats(connStats) { - stats.push(connStats); - if (stats.length > 50) stats.shift(); + stats.value.push(connStats); + if (stats.value.length > 50) stats.value.shift(); - let cpuPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - s.cpu) * viewBoxY]); - let memPolylinePointsStats = stats.map((s, i) => [viewBoxX - ((stats.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY]); - cpuPolylinePoints = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' '); - memPolylinePoints = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' '); + let cpuPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - s.cpu) * viewBoxY.value]); + let memPolylinePointsStats = stats.value.map((s, i) => [viewBoxX.value - ((stats.value.length - 1) - i), (1 - (s.mem.active / props.meta.mem.total)) * viewBoxY.value]); + cpuPolylinePoints.value = cpuPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' '); + memPolylinePoints.value = memPolylinePointsStats.map(xy => `${xy[0]},${xy[1]}`).join(' '); - cpuPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`; - memPolygonPoints = `${viewBoxX - (stats.length - 1)},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`; + cpuPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${cpuPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`; + memPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${viewBoxY.value} ${memPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`; - cpuHeadX = cpuPolylinePointsStats.at(-1)![0]; - cpuHeadY = cpuPolylinePointsStats.at(-1)![1]; - memHeadX = memPolylinePointsStats.at(-1)![0]; - memHeadY = memPolylinePointsStats.at(-1)![1]; + cpuHeadX.value = cpuPolylinePointsStats.at(-1)![0]; + cpuHeadY.value = cpuPolylinePointsStats.at(-1)![1]; + memHeadX.value = memPolylinePointsStats.at(-1)![0]; + memHeadY.value = memPolylinePointsStats.at(-1)![1]; - cpuP = (connStats.cpu * 100).toFixed(0); - memP = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0); + cpuP.value = (connStats.cpu * 100).toFixed(0); + memP.value = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0); } function onStatsLog(statsLog) { |