refactor

packages/frontend/src/widgets/server-metric/pie.vue

@@ -1,11 +1,12 @@
 <template>
-<svg class="hsalcinq" viewBox="0 0 1 1" preserveAspectRatio="none">
+<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"
@@ -16,7 +17,7 @@
 		stroke-width="0.1"
 		:stroke="color"
 	/>
-	<text x="50%" y="50%" dy="0.05" text-anchor="middle">{{ (value * 100).toFixed(0) }}%</text>
+	<text x="50%" y="50%" dy="0.05" text-anchor="middle" :class="$style.text">{{ (value * 100).toFixed(0) }}%</text>
 </svg>
 </template>
 
@@ -33,20 +34,20 @@ const color = $computed(() => `hsl(${180 - (props.value * 180)}, 80%, 70%)`);
 const strokeDashoffset = $computed(() => (1 - props.value) * (Math.PI * (r * 2)));
 </script>
 
-<style lang="scss" scoped>
-.hsalcinq {
+<style lang="scss" module>
+.root {
 	display: block;
 	height: 100%;
+}
 
-	> circle {
+.circle {
 	transform-origin: center;
 	transform: rotate(-90deg);
 	transition: stroke-dashoffset 0.5s ease;
 }
 
-	> text {
+.text {
 	font-size: 0.15px;
 	fill: currentColor;
 }
-}
 </style>