From 29fd3784f715439f5c5fe766f68af2d86a520b30 Mon Sep 17 00:00:00 2001
From: HidemaruOwO <owner@v-sli.me>
Date: Sat, 24 Aug 2024 12:05:49 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20make=20change=20server=20metric,?=
 =?UTF-8?q?=20it=20looks=20like=20cherrypick=20one=20(packages/client/src/?=
 =?UTF-8?q?widgets/server-metric/cpu-mem.vue,=20packages/client/src/widget?=
 =?UTF-8?q?s/server-metric/index.vue,=20packages/client/src/widgets/server?=
 =?UTF-8?q?-metric/pie.vue)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/widgets/server-metric/cpu-mem.vue     | 133 +++++-------------
 .../src/widgets/server-metric/index.vue       |  20 +--
 .../client/src/widgets/server-metric/pie.vue  |  74 +++++-----
 3 files changed, 66 insertions(+), 161 deletions(-)

diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index 841e070..d094f19 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -1,89 +1,23 @@
+
 <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(189, 43%, 73%)"></stop>
-					<stop offset="100%" stop-color="hsl(343, 76%, 68%)"></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>{{ cpuUsage }}%</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(189, 43%, 73%)"></stop>
-					<stop offset="100%" stop-color="hsl(343, 76%, 68%)"></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>{{ memUsage }}%</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 }}<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 }}<span style="font-weight: normal; font-size: .75em; margin-left: 2px;">%</span></text>
+	</div>
+</div>
 </template>
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import { v4 as uuid } from "uuid";
+import XPie from "./pie.vue";
 
 const props = defineProps<{
 	connection: any;
@@ -164,31 +98,30 @@ function onStatsLog(statsLog) {
 }
 </script>
 
-<style lang="scss" scoped>
-.lcfyofjk {
+<style lang="scss" module>
+.root {
 	display: flex;
+	padding: 16px 32px;
+}
 
-	> svg {
-		display: block;
-		padding: 10px;
-		inline-size: 50%;
+.pie {
+	height: 42px;
+	flex-shrink: 0;
+	margin-right: 8px;
+}
 
-		&:first-child {
-			padding-inline-end: 5px;
-		}
+.div {
+	flex: 1;
+	margin: auto;
 
-		&:last-child {
-			padding-inline-start: 5px;
-		}
-
-		> text {
-			font-size: 5px;
-			fill: currentColor;
-
-			> tspan {
-				opacity: 0.5;
-			}
-		}
+	> p {
+		margin: 0 0 2px;
+		font-size: 0.8em;
 	}
 }
+
+.text {
+	font-weight: bold;
+	fill: currentColor;
+}
 </style>
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index c5cc549..67fa9ca 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -26,21 +26,6 @@
 				:connection="connection"
 				:meta="meta"
 			/>
-			<XCpu
-				v-else-if="widgetProps.view === 1"
-				:connection="connection"
-				:meta="meta"
-			/>
-			<XMemory
-				v-else-if="widgetProps.view === 2"
-				:connection="connection"
-				:meta="meta"
-			/>
-			<XDisk
-				v-else-if="widgetProps.view === 3"
-				:connection="connection"
-				:meta="meta"
-			/>
 		</div>
 	</MkContainer>
 </template>
@@ -54,9 +39,6 @@ import type {
 } from "../widget";
 import { useWidgetPropsManager } from "../widget";
 import XCpuMemory from "./cpu-mem.vue";
-import XCpu from "./cpu.vue";
-import XMemory from "./mem.vue";
-import XDisk from "./disk.vue";
 import MkContainer from "@/components/MkContainer.vue";
 import type { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
@@ -103,7 +85,7 @@ os.apiGet("server-info", {}).then((res) => {
 });
 
 const toggleView = () => {
-	widgetProps.view = (widgetProps.view + 1) % 4;
+	widgetProps.view = (widgetProps.view + 1) % 1;
 	save();
 };
 
diff --git a/packages/client/src/widgets/server-metric/pie.vue b/packages/client/src/widgets/server-metric/pie.vue
index 2c49542..97ea2f4 100644
--- a/packages/client/src/widgets/server-metric/pie.vue
+++ b/packages/client/src/widgets/server-metric/pie.vue
@@ -1,27 +1,24 @@
 <template>
-	<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
-		<circle
-			:r="r"
-			cx="50%"
-			cy="50%"
-			fill="none"
-			stroke-width="0.1"
-			stroke="rgba(0, 0, 0, 0.05)"
-		/>
-		<circle
-			:r="r"
-			cx="50%"
-			cy="50%"
-			:stroke-dasharray="Math.PI * (r * 2)"
-			:stroke-dashoffset="strokeDashoffset"
-			fill="none"
-			stroke-width="0.1"
-			:stroke="color"
-		/>
-		<text x="50%" y="50%" dy="0.05" text-anchor="middle">
-			{{ (value * 100).toFixed(1) }}%
-		</text>
-	</svg>
+<svg :class="$style.root" viewBox="0 0 1 1" preserveAspectRatio="none">
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		fill="none"
+		stroke-width="0.2"
+		stroke="rgba(0, 0, 0, 0.05)"
+		:class="$style.circle"
+	/>
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		:stroke-dasharray="Math.PI * (r * 2)"
+		:stroke-dashoffset="strokeDashoffset"
+		fill="none"
+		stroke-width="0.2"
+		:class="$style.circle"
+		:stroke="color"
+	/>
+</svg>
 </template>
 
 <script lang="ts" setup>
@@ -32,33 +29,26 @@ const props = defineProps<{
 	reverse?: boolean;
 }>();
 
-const r = 0.45;
+const r = 0.35;
 
 const color = computed(
-	() =>
-		`hsl(${
-			props.reverse ? props.value * 180 : 180 - props.value * 180
-		}, 80%, 70%)`,
+	() => `hsl(${180 - (props.value / 100) * 180}, 80%, 70%)`,
 );
 const strokeDashoffset = computed(
-	() => (1 - props.value) * (Math.PI * (r * 2)),
+	() => (1 - props.value / 100) * (Math.PI * (r * 2)),
 );
 </script>
 
-<style lang="scss" scoped>
-.hsalcinq {
+<style lang="scss" module>
+.root {
 	display: block;
-	block-size: 100%;
+	height: 100%;
+}
 
-	> circle {
-		transform-origin: center;
-		transform: rotate(-90deg);
-		transition: stroke-dashoffset 0.5s ease;
-	}
-
-	> text {
-		font-size: 0.15px;
-		fill: currentColor;
-	}
+.circle {
+	transform-origin: center;
+	transform: rotate(-90deg);
+	transition: stroke-dashoffset 0.5s ease;
+	stroke-linecap: round;
 }
 </style>