From 8f0c973248a05c5415394e228b08e9a46cb320c8 Mon Sep 17 00:00:00 2001
From: HidemaruOwO <owner@v-sli.me>
Date: Wed, 29 Jan 2025 10:14:39 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20add=20customized=20pie=20compone?=
 =?UTF-8?q?nts=20(packages/frontend/src/widgets/server-metric/pie-co...)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/widgets/server-metric/pie-compact.vue | 54 ++++++++++++++++
 .../src/widgets/server-metric/pie-large.vue   | 62 +++++++++++++++++++
 .../src/widgets/server-metric/pie.vue         |  8 ++-
 3 files changed, 121 insertions(+), 3 deletions(-)
 create mode 100644 packages/frontend/src/widgets/server-metric/pie-compact.vue
 create mode 100644 packages/frontend/src/widgets/server-metric/pie-large.vue

diff --git a/packages/frontend/src/widgets/server-metric/pie-compact.vue b/packages/frontend/src/widgets/server-metric/pie-compact.vue
new file mode 100644
index 0000000000..3d415428c9
--- /dev/null
+++ b/packages/frontend/src/widgets/server-metric/pie-compact.vue
@@ -0,0 +1,54 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project & noridev and cherrypick-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.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>
+import { computed } from 'vue';
+
+const props = defineProps<{
+	value: number;
+}>();
+
+const r = 0.35;
+
+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;
+}
+</style>
diff --git a/packages/frontend/src/widgets/server-metric/pie-large.vue b/packages/frontend/src/widgets/server-metric/pie-large.vue
new file mode 100644
index 0000000000..28de857f93
--- /dev/null
+++ b/packages/frontend/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>
diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue
index 400cbe9fa2..dcf6888c8c 100644
--- a/packages/frontend/src/widgets/server-metric/pie.vue
+++ b/packages/frontend/src/widgets/server-metric/pie.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:r="r"
 		cx="50%" cy="50%"
 		fill="none"
-		stroke-width="0.1"
+		stroke-width="0.15"
 		stroke="rgba(0, 0, 0, 0.05)"
 		:class="$style.circle"
 	/>
@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		:stroke-dasharray="Math.PI * (r * 2)"
 		:stroke-dashoffset="strokeDashoffset"
 		fill="none"
-		stroke-width="0.1"
+		stroke-width="0.15"
 		:class="$style.circle"
 		:stroke="color"
 	/>
@@ -34,7 +34,7 @@ const props = defineProps<{
 	value: number;
 }>();
 
-const r = 0.45;
+const r = 0.4;
 
 const color = computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
 const strokeDashoffset = computed(() => (1 - props.value) * (Math.PI * (r * 2)));
@@ -50,10 +50,12 @@ const strokeDashoffset = computed(() => (1 - props.value) * (Math.PI * (r * 2)))
 	transform-origin: center;
 	transform: rotate(-90deg);
 	transition: stroke-dashoffset 0.5s ease;
+	stroke-linecap: round;
 }
 
 .text {
 	font-size: 0.15px;
 	fill: currentColor;
+	font-weight: 700;
 }
 </style>