From 95cc608edfcaba4d047ab1204167b69be20a9261 Mon Sep 17 00:00:00 2001
From: HidemaruOwO <owner@v-sli.me>
Date: Mon, 26 Aug 2024 00:53:53 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20added=20new=20types=20of=20server?=
 =?UTF-8?q?=20metrics=20(packages/client/src/widgets/server-metric/cpu.vue?=
 =?UTF-8?q?,=20packages/client/src/widgets/server-metric/disk.vue,=20packa?=
 =?UTF-8?q?ges/client/src/widgets/server-metric/index.vue,=20packages/clie?=
 =?UTF-8?q?nt/src/widgets/server-metric/mem.vue,=20packages/client/src/wid?=
 =?UTF-8?q?gets/server-metric/pie-large.vue)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/widgets/server-metric/cpu.vue  |  2 +-
 .../client/src/widgets/server-metric/disk.vue |  2 +-
 .../src/widgets/server-metric/index.vue       | 20 +++++-
 .../client/src/widgets/server-metric/mem.vue  |  2 +-
 .../src/widgets/server-metric/pie-large.vue   | 62 +++++++++++++++++++
 5 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 packages/client/src/widgets/server-metric/pie-large.vue

diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index 67e8c66..535081b 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from "vue";
-import XPie from "./pie.vue";
+import XPie from "./pie-large.vue";
 import icon from "@/scripts/icon";
 
 const props = defineProps<{
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index a04dc2a..5bdbff4 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -13,7 +13,7 @@
 <script lang="ts" setup>
 import { computed } from "vue";
 
-import XPie from "./pie.vue";
+import XPie from "./pie-large.vue";
 import bytes from "@/filters/bytes";
 import icon from "@/scripts/icon";
 
diff --git a/packages/client/src/widgets/server-metric/index.vue b/packages/client/src/widgets/server-metric/index.vue
index 67fa9ca..30ef33b 100644
--- a/packages/client/src/widgets/server-metric/index.vue
+++ b/packages/client/src/widgets/server-metric/index.vue
@@ -26,6 +26,21 @@
 				: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>
@@ -38,6 +53,9 @@ import type {
 	WidgetComponentProps,
 } from "../widget";
 import { useWidgetPropsManager } from "../widget";
+import XCpu from "./cpu.vue";
+import XMemory from "./mem.vue";
+import XDisk from "./disk.vue";
 import XCpuMemory from "./cpu-mem.vue";
 import MkContainer from "@/components/MkContainer.vue";
 import type { GetFormResultType } from "@/scripts/form";
@@ -85,7 +103,7 @@ os.apiGet("server-info", {}).then((res) => {
 });
 
 const toggleView = () => {
-	widgetProps.view = (widgetProps.view + 1) % 1;
+	widgetProps.view = (widgetProps.view + 1) % 4;
 	save();
 };
 
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
index b83c28e..9b6f3ca 100644
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from "vue";
-import XPie from "./pie.vue";
+import XPie from "./pie-large.vue";
 import bytes from "@/filters/bytes";
 import icon from "@/scripts/icon";
 
diff --git a/packages/client/src/widgets/server-metric/pie-large.vue b/packages/client/src/widgets/server-metric/pie-large.vue
new file mode 100644
index 0000000..28de857
--- /dev/null
+++ b/packages/client/src/widgets/server-metric/pie-large.vue
@@ -0,0 +1,62 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<svg :class="$style.root" 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)"
+		:class="$style.circle"
+	/>
+	<circle
+		:r="r"
+		cx="50%" cy="50%"
+		:stroke-dasharray="Math.PI * (r * 2)"
+		:stroke-dashoffset="strokeDashoffset"
+		fill="none"
+		stroke-width="0.1"
+		:class="$style.circle"
+		:stroke="color"
+	/>
+	<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (value * 100).toFixed(0) }}%</text>
+</svg>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+
+const props = defineProps<{
+	value: number;
+}>();
+
+const r = 0.45;
+
+const color = computed(() => `hsl(${180 - props.value * 180}, 80%, 70%)`);
+const strokeDashoffset = computed(
+	() => (1 - props.value) * (Math.PI * (r * 2)),
+);
+</script>
+
+<style lang="scss" module>
+.root {
+	display: block;
+	height: 100%;
+}
+
+.circle {
+	transform-origin: center;
+	transform: rotate(-90deg);
+	transition: stroke-dashoffset 0.5s ease;
+	stroke-linecap: round;
+}
+
+.text {
+	font-size: 0.15px;
+	fill: currentColor;
+}
+</style>