fix: radar

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

@@ -47,59 +47,24 @@
         stroke-width="0.5"
       />
 
-      <text
+      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="middle" x="60" y="8">
-        fill="#1D7063"
+        心肺 ({{ radarData.cardio }})
-        font-size="4"
-        font-weight="bold"
-        text-anchor="middle"
-        x="60"
-        y="8"
-      >
-        心肺耐力 ({{ radarData.cardio }})
       </text>
 
-      <text
+      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="start" x="110" y="44">
-        fill="#1D7063"
+        上肢 ({{ radarData.upperBodyStrength }})
-        font-size="4"
-        font-weight="bold"
-        text-anchor="start"
-        x="110"
-        y="44"
-      >
-        上肢肌力 ({{ radarData.upperBodyStrength }})
       </text>
 
-      <text
+      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="start" x="94" y="104">
-        fill="#1D7063"
+        下肢 ({{ radarData.lowerBodyStrengthAndEndurance }})
-        font-size="4"
-        font-weight="bold"
-        text-anchor="start"
-        x="94"
-        y="104"
-      >
-        下肢肌耐力 ({{ radarData.lowerBodyStrengthAndEndurance }})
       </text>
 
-      <text
+      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="end" x="26" y="104">
-        fill="#1D7063"
+        柔軟 ({{ radarData.flexibility }})
-        font-size="4"
-        font-weight="bold"
-        text-anchor="end"
-        x="26"
-        y="104"
-      >
-        柔軟度 ({{ radarData.flexibility }})
       </text>
 
-      <text
+      <text fill="#1D7063" font-size="4" font-weight="bold" text-anchor="end" x="10" y="44">
-        fill="#1D7063"
+        敏捷 ({{ radarData.balanceAgilityAndMobility }})
-        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 { computed } from 'vue'
-import type { PhysicalFitnessRadarData } from "@/utils/physical-fitness-radar";
+import type { PhysicalFitnessRadarData } from '@/utils/physical-fitness-radar'
 
 const { radarData } = defineProps<{
-  radarData: PhysicalFitnessRadarData;
+  radarData: PhysicalFitnessRadarData
-}>();
+}>()
 
-const centerX = 60;
+const centerX = 60
-const centerY = 60;
+const centerY = 60
-const radius = 45;
+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 pointRadius = (percent / 100) * radius
-  const points = [];
+  const points = []
 
   for (let index = 0; index < 5; index++) {
-    const point = getAxisEndPoint(index, pointRadius);
+    const point = getAxisEndPoint(index, pointRadius)
-    points.push(`${point.x},${point.y}`);
+    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;
+    const pointRadius = (Math.max(5, Math.min(100, value)) / 100) * radius
-    return getAxisEndPoint(index, pointRadius);
+    return getAxisEndPoint(index, pointRadius)
-  });
+  })
-});
+})
 
 const userDataPoints = computed(() => {
-  return userDataCoordArray.value
+  return userDataCoordArray.value.map((point) => `${point.x},${point.y}`).join(' ')
-    .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>

app/citizen-frontend/src/pages/index.vue

@@ -55,12 +55,15 @@
             <v-col
               v-for="summary in radarSummaries"
               :key="summary.label"
-              class="text-center border pa-2"
+              class="radar-summary text-center border pa-2"
-              cols="12"
-              sm="6"
-              md="4"
             >
-              <div>{{ summary.label }}</div>
+              <v-tooltip :text="summary.tip" location="top">
+                <template #activator="{ props }">
+                  <span v-bind="props" class="radar-summary-label" tabindex="0">
+                    {{ summary.label }}
+                  </span>
+                </template>
+              </v-tooltip>
 
               <div class="font-weight-black">
                 {{ summary.score }}
@@ -389,19 +392,22 @@ const radarSummaries = computed(() => {
 
   return [
     {
-      label: '上肢肌力',
+      label: '上肢',
+      tip: '上肢肌力',
       score: physicalFitnessRadarData.value.upperBodyStrength,
     },
     {
-      label: '下肢肌耐力',
+      label: '下肢',
+      tip: '下肢肌耐力',
       score: physicalFitnessRadarData.value.lowerBodyStrengthAndEndurance,
     },
-    { label: '心肺耐力', score: physicalFitnessRadarData.value.cardio },
+    { label: '心肺', tip: '心肺耐力', score: physicalFitnessRadarData.value.cardio },
     {
-      label: '平衡、敏捷與行動',
+      label: '敏捷',
+      tip: '平衡、敏捷與行動',
       score: physicalFitnessRadarData.value.balanceAgilityAndMobility,
     },
-    { label: '柔軟度', score: physicalFitnessRadarData.value.flexibility },
+    { label: '柔軟', tip: '柔軟度', score: physicalFitnessRadarData.value.flexibility },
   ]
 })
 
@@ -567,6 +573,15 @@ function updateTodayTimeString() {
 </script>
 
 <style scoped>
+.radar-summary {
+  flex: 0 0 20%;
+  max-width: 20%;
+}
+
+.radar-summary-label {
+  cursor: help;
+}
+
 .passport-card {
   background: linear-gradient(135deg, #1d7063 0%, #145248 100%);
   border: 1px solid rgba(71, 194, 166, 0.3);