From a3e61cb72b1d5f46f0b314baf73d0243609eddff Mon Sep 17 00:00:00 2001
From: HidemaruOwO <owner@v-sli.me>
Date: Wed, 29 Jan 2025 10:15:14 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20edit=20cpu-mem=20like=20cherrypi?=
 =?UTF-8?q?ck=20=20(packages/frontend/src/widgets/server-metric/cpu-me...)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/widgets/server-metric/cpu-mem.vue     | 176 ++++--------------
 1 file changed, 38 insertions(+), 138 deletions(-)

diff --git a/packages/frontend/src/widgets/server-metric/cpu-mem.vue b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
index 469075e2c4..6c656873ab 100644
--- a/packages/frontend/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/frontend/src/widgets/server-metric/cpu-mem.vue
@@ -1,174 +1,74 @@
 <!--
-SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-FileCopyrightText: syuilo and misskey-project & noridev and misskey-project
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="lcfyofjk">
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="cpuGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="cpuMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="cpuPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="cpuPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="cpuHeadX"
-					:cy="cpuHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ cpuGradientId }); mask: url(#${ cpuMaskId })`"
-		/>
-		<text x="1" y="5">CPU <tspan>{{ cpuP }}%</tspan></text>
-	</svg>
-	<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`">
-		<defs>
-			<linearGradient :id="memGradientId" x1="0" x2="0" y1="1" y2="0">
-				<stop offset="0%" stop-color="hsl(180, 80%, 70%)"></stop>
-				<stop offset="100%" stop-color="hsl(0, 80%, 70%)"></stop>
-			</linearGradient>
-			<mask :id="memMaskId" x="0" y="0" :width="viewBoxX" :height="viewBoxY">
-				<polygon
-					:points="memPolygonPoints"
-					fill="#fff"
-					fill-opacity="0.5"
-				/>
-				<polyline
-					:points="memPolylinePoints"
-					fill="none"
-					stroke="#fff"
-					stroke-width="1"
-				/>
-				<circle
-					:cx="memHeadX"
-					:cy="memHeadY"
-					r="1.5"
-					fill="#fff"
-				/>
-			</mask>
-		</defs>
-		<rect
-			x="-2" y="-2"
-			:width="viewBoxX + 4" :height="viewBoxY + 4"
-			:style="`stroke: none; fill: url(#${ memGradientId }); mask: url(#${ memMaskId })`"
-		/>
-		<text x="1" y="5">MEM <tspan>{{ memP }}%</tspan></text>
-	</svg>
+<div :class="$style.root">
+	<XPie :class="$style.pie" :value="cpuUsage"/>
+	<div :class="$style.div">
+		<p>CPU</p>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (cpuUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
+	</div>
+	<XPie :class="$style.pie" :value="memUsage"/>
+	<div :class="$style.div">
+		<p>RAM</p>
+		<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (memUsage * 100).toFixed(1) }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
+	</div>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onBeforeUnmount, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
+import XPie from './pie-compact.vue';
 
 const props = defineProps<{
 	connection: Misskey.ChannelConnection<Misskey.Channels['serverStats']>,
 	meta: Misskey.entities.ServerInfoResponse
 }>();
 
-const viewBoxX = ref<number>(50);
-const viewBoxY = ref<number>(30);
-const stats = ref<Misskey.entities.ServerStats[]>([]);
-const cpuGradientId = uuid();
-const cpuMaskId = uuid();
-const memGradientId = uuid();
-const memMaskId = uuid();
-const cpuPolylinePoints = ref<string>('');
-const memPolylinePoints = ref<string>('');
-const cpuPolygonPoints = ref<string>('');
-const memPolygonPoints = ref<string>('');
-const cpuHeadX = ref<number>();
-const cpuHeadY = ref<number>();
-const memHeadX = ref<number>();
-const memHeadY = ref<number>();
-const cpuP = ref<string>('');
-const memP = ref<string>('');
+const cpuUsage = ref<number>(0);
+const memUsage = ref<number>(0);
 
 onMounted(() => {
 	props.connection.on('stats', onStats);
-	props.connection.on('statsLog', onStatsLog);
-	props.connection.send('requestLog', {
-		id: Math.random().toString().substring(2, 10),
-		length: 50,
-	});
 });
 
 onBeforeUnmount(() => {
 	props.connection.off('stats', onStats);
-	props.connection.off('statsLog', onStatsLog);
 });
 
-function onStats(connStats: Misskey.entities.ServerStats) {
-	stats.value.push(connStats);
-	if (stats.value.length > 50) stats.value.shift();
-
-	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.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.value = cpuPolylinePointsStats.at(-1)![0];
-	cpuHeadY.value = cpuPolylinePointsStats.at(-1)![1];
-	memHeadX.value = memPolylinePointsStats.at(-1)![0];
-	memHeadY.value = memPolylinePointsStats.at(-1)![1];
-
-	cpuP.value = (connStats.cpu * 100).toFixed(0);
-	memP.value = (connStats.mem.active / props.meta.mem.total * 100).toFixed(0);
-}
-
-function onStatsLog(statsLog: Misskey.entities.ServerStatsLog) {
-	for (const revStats of statsLog.toReversed()) {
-		onStats(revStats);
-	}
+function onStats(stats: Misskey.entities.ServerStats) {
+	cpuUsage.value = stats.cpu;
+	memUsage.value = stats.mem.active / props.meta.mem.total;
 }
 </script>
 
-<style lang="scss" scoped>
-.lcfyofjk {
+<style lang="scss" module>
+.root {
 	display: flex;
+	padding: 16px 32px;
+}
 
-	> svg {
-		display: block;
-		padding: 10px;
-		width: 50%;
+.pie {
+	height: 42px;
+	flex-shrink: 0;
+	margin-right: 8px;
+}
 
-		&:first-child {
-			padding-right: 5px;
-		}
+.div {
+	flex: 1;
+	margin: auto;
 
-		&:last-child {
-			padding-left: 5px;
-		}
-
-		> text {
-			font-size: 4.5px;
-			fill: currentColor;
-
-			> tspan {
-				opacity: 0.5;
-			}
-		}
+	> p {
+		margin: 0 0 2px;
+		font-size: 0.8em;
 	}
 }
+
+.text {
+	font-weight: bold;
+	fill: currentColor;
+}
 </style>