✨ added new types of server metrics (packages/client/src/widgets/server-metric/cpu.vue, packages/client/src/widgets/server-metric/disk.vue, packages/client/src/widgets/server-metric/index.vue, packages/client/src/widgets/server-metric/mem.vue, packages/client/src/widgets/server-metric/pie-large.vue)

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<{

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";
 

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();
 };
 

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";
 

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>