fix: radar

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

@@ -47,59 +47,24 @@
         stroke-width="0.5"
       />
 
-      <text
-        fill="#1D7063"
-        font-size="4"
-        font-weight="bold"
-        text-anchor="middle"
-        x="60"
-        y="8"
-      >
-        心肺耐力 ({{ radarData.cardio }})
+      <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"
-      >
-        上肢肌力 ({{ radarData.upperBodyStrength }})
+      <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"
-      >
-        下肢肌耐力 ({{ radarData.lowerBodyStrengthAndEndurance }})
+      <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"
-      >
-        柔軟度 ({{ radarData.flexibility }})
+      <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"
-      >
-        平衡、敏捷與行動 ({{ radarData.balanceAgilityAndMobility }})
+      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="end" x="10" y="44">
+        敏捷 ({{ radarData.balanceAgilityAndMobility }})
       </text>
     </svg>
 
@@ -118,36 +83,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(() => {
@@ -157,19 +122,17 @@ 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>
@@ -198,4 +161,8 @@ const userDataPoints = computed(() => {
 .radar-svg text {
   font-family: inherit;
 }
+
+.radar-svg {
+  overflow: visible;
+}
 </style>