🎨 add customized pie components (packages/frontend/src/widgets/server-metric/pie-co...)

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>

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>

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>