heartles/egirlskey
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2023-05-24 17:33:31 +09:00
parent 0513ff8b4e
commit bdf08c8a54
1 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/frontend/src/widgets/server-metric/pie.vue
View file

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