reformat

app/citizen-frontend/src/components/HealthRadarChart.vue

@@ -47,23 +47,58 @@
         stroke-width="0.5"
       />
 
-      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="middle" x="60" y="8">
+      <text
+        fill="#1D7063"
+        font-size="4"
+        font-weight="bold"
+        text-anchor="middle"
+        x="60"
+        y="8"
+      >
         心肺 ({{ radarData.cardio }})
       </text>
 
-      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="start" x="110" y="44">
+      <text
+        fill="#1D7063"
+        font-size="4"
+        font-weight="bold"
+        text-anchor="start"
+        x="110"
+        y="44"
+      >
         上肢 ({{ radarData.upperBodyStrength }})
       </text>
 
-      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="start" x="94" y="104">
+      <text
+        fill="#1D7063"
+        font-size="4"
+        font-weight="bold"
+        text-anchor="start"
+        x="94"
+        y="104"
+      >
         下肢 ({{ radarData.lowerBodyStrengthAndEndurance }})
       </text>
 
-      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="end" x="26" y="104">
+      <text
+        fill="#1D7063"
+        font-size="4"
+        font-weight="bold"
+        text-anchor="end"
+        x="26"
+        y="104"
+      >
         柔軟 ({{ radarData.flexibility }})
       </text>
 
-      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="end" x="10" y="44">
+      <text
+        fill="#1D7063"
+        font-size="4"
+        font-weight="bold"
+        text-anchor="end"
+        x="10"
+        y="44"
+      >
         敏捷 ({{ radarData.balanceAgilityAndMobility }})
       </text>
     </svg>
@@ -83,36 +118,36 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import type { PhysicalFitnessRadarData } from '@/utils/physical-fitness-radar'
+import { computed } from "vue";
+import type { PhysicalFitnessRadarData } from "@/utils/physical-fitness-radar";
 
 const { radarData } = defineProps<{
-  radarData: PhysicalFitnessRadarData
-}>()
+  radarData: PhysicalFitnessRadarData;
+}>();
 
-const centerX = 60
-const centerY = 60
-const radius = 45
+const centerX = 60;
+const centerY = 60;
+const radius = 45;
 
 function getAxisEndPoint(index: number, pointRadius = radius) {
-  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / 5
+  const angle = -Math.PI / 2 + (index * 2 * Math.PI) / 5;
 
   return {
     x: centerX + pointRadius * Math.cos(angle),
     y: centerY + pointRadius * Math.sin(angle),
-  }
+  };
 }
 
 function getPolygonPoints(percent: number) {
-  const pointRadius = (percent / 100) * radius
-  const points = []
+  const pointRadius = (percent / 100) * radius;
+  const points = [];
 
   for (let index = 0; index < 5; index++) {
-    const point = getAxisEndPoint(index, pointRadius)
-    points.push(`${point.x},${point.y}`)
+    const point = getAxisEndPoint(index, pointRadius);
+    points.push(`${point.x},${point.y}`);
   }
 
-  return points.join(' ')
+  return points.join(" ");
 }
 
 const userDataCoordArray = computed(() => {
@@ -122,17 +157,19 @@ const userDataCoordArray = computed(() => {
     radarData.lowerBodyStrengthAndEndurance,
     radarData.flexibility,
     radarData.balanceAgilityAndMobility,
-  ]
+  ];
 
   return values.map((value, index) => {
-    const pointRadius = (Math.max(5, Math.min(100, value)) / 100) * radius
-    return getAxisEndPoint(index, pointRadius)
-  })
-})
+    const pointRadius = (Math.max(5, Math.min(100, value)) / 100) * radius;
+    return getAxisEndPoint(index, pointRadius);
+  });
+});
 
 const userDataPoints = computed(() => {
-  return userDataCoordArray.value.map((point) => `${point.x},${point.y}`).join(' ')
-})
+  return userDataCoordArray.value
+    .map((point) => `${point.x},${point.y}`)
+    .join(" ");
+});
 </script>
 
 <style scoped>