From bdf08c8a54d670928576ba47921eadf7f4705ad6 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Wed, 24 May 2023 17:33:31 +0900 Subject: [PATCH] refactor --- .../src/widgets/server-metric/pie.vue | 27 ++++++++++--------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/packages/frontend/src/widgets/server-metric/pie.vue b/packages/frontend/src/widgets/server-metric/pie.vue index 868dbc0484..398815a6ae 100644 --- a/packages/frontend/src/widgets/server-metric/pie.vue +++ b/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 { - transform-origin: center; - transform: rotate(-90deg); - transition: stroke-dashoffset 0.5s ease; - } +.circle { + transform-origin: center; + transform: rotate(-90deg); + transition: stroke-dashoffset 0.5s ease; +} - > text { - font-size: 0.15px; - fill: currentColor; - } +.text { + font-size: 0.15px; + fill: currentColor; } </style>