feat: radar

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

@@ -23,7 +23,7 @@
 
       <polygon
         fill="rgba(33, 150, 243, 0.12)"
-        :points="getPolygonPoints(65)"
+        :points="getPolygonPoints(50)"
         stroke="#2196F3"
         stroke-dasharray="1 1"
         stroke-width="0.5"
@@ -55,7 +55,7 @@
         x="60"
         y="8"
       >
-        心肺 ({{ radarData.cardio }})
+        心肺耐力 ({{ radarData.cardio }})
       </text>
 
       <text
@@ -66,7 +66,7 @@
         x="110"
         y="44"
       >
-        肌力 ({{ radarData.strength }})
+        上肢肌力 ({{ radarData.upperBodyStrength }})
       </text>
 
       <text
@@ -77,7 +77,7 @@
         x="94"
         y="104"
       >
-        平衡 ({{ radarData.balance }})
+        下肢肌耐力 ({{ radarData.lowerBodyStrengthAndEndurance }})
       </text>
 
       <text
@@ -88,7 +88,7 @@
         x="26"
         y="104"
       >
-        柔軟 ({{ radarData.flexibility }})
+        柔軟度 ({{ radarData.flexibility }})
       </text>
 
       <text
@@ -99,7 +99,7 @@
         x="10"
         y="44"
       >
-        敏捷 ({{ radarData.agility }})
+        平衡、敏捷與行動 ({{ radarData.balanceAgilityAndMobility }})
       </text>
     </svg>
 
@@ -119,17 +119,10 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
-
-interface RadarData {
-  strength: number;
-  balance: number;
-  flexibility: number;
-  agility: number;
-  cardio: number;
-}
+import type { PhysicalFitnessRadarData } from "@/utils/physical-fitness-radar";
 
 const { radarData } = defineProps<{
-  radarData: RadarData;
+  radarData: PhysicalFitnessRadarData;
 }>();
 
 const centerX = 60;
@@ -160,10 +153,10 @@ function getPolygonPoints(percent: number) {
 const userDataCoordArray = computed(() => {
   const values = [
     radarData.cardio,
-    radarData.strength,
-    radarData.balance,
+    radarData.upperBodyStrength,
+    radarData.lowerBodyStrengthAndEndurance,
     radarData.flexibility,
-    radarData.agility,
+    radarData.balanceAgilityAndMobility,
   ];
 
   return values.map((value, index) => {