From c903b53fdf801d9c16e147b9f97e707ec000f342 Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Mon, 12 May 2025 10:34:05 +0800
Subject: [PATCH] Update StatusCharts.vue

---
 .../frontend/src/components/StatusCharts.vue  | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/StatusCharts.vue b/packages/frontend/src/components/StatusCharts.vue
index 907fd4e..2a1bba8 100644
--- a/packages/frontend/src/components/StatusCharts.vue
+++ b/packages/frontend/src/components/StatusCharts.vue
@@ -1,19 +1,36 @@
 <template>
   <div class="status-charts grid grid-cols-1 gap-4 mt-4">
     <div class="chart-container bg-header rounded p-3">
-      <h5 class="text-sm font-medium mb-2 text-text-secondary">CPU 使用率</h5>
+      <div class="flex justify-between items-center mb-2">
+        <h5 class="text-sm font-medium text-text-secondary">CPU 使用率</h5>
+        <span class="text-xs text-text-tertiary ml-2">
+          {{ cpuChartData.datasets[0].data[MAX_DATA_POINTS - 1]?.toFixed(1) }}%
+        </span>
+      </div>
       <div class="chart-wrapper h-40">
         <Line :data="cpuChartData" :options="percentageChartOptions" :key="cpuChartKey" />
       </div>
     </div>
     <div class="chart-container bg-header rounded p-3">
-      <h5 class="text-sm font-medium mb-2 text-text-secondary">{{ memoryChartTitle }}</h5>
+      <div class="flex justify-between items-center mb-2">
+        <h5 class="text-sm font-medium text-text-secondary">{{ memoryChartTitle }}</h5>
+        <span class="text-xs text-text-tertiary ml-2">
+          {{ memoryChartData.datasets[0].data[MAX_DATA_POINTS - 1]?.toFixed(1) }} {{ memoryUnitIsGB ? 'GB' : 'MB' }}
+        </span>
+      </div>
       <div class="chart-wrapper h-40">
         <Line :data="memoryChartData" :options="memoryChartOptions" :key="memoryChartKey" />
       </div>
     </div>
     <div class="chart-container bg-header rounded p-3">
-      <h5 class="text-sm font-medium mb-2 text-text-secondary">{{ networkChartTitle }}</h5>
+      <div class="flex justify-between items-center mb-2">
+        <h5 class="text-sm font-medium text-text-secondary">{{ networkChartTitle }}</h5>
+        <span class="text-xs text-text-tertiary ml-2">
+          ↓ {{ networkChartData.datasets[0].data[MAX_DATA_POINTS - 1]?.toFixed(1) }}
+          ↑ {{ networkChartData.datasets[1].data[MAX_DATA_POINTS - 1]?.toFixed(1) }}
+          {{ networkRateUnitIsMB ? 'MB/s' : 'KB/s' }}
+        </span>
+      </div>
       <div class="chart-wrapper h-40">
         <Line :data="networkChartData" :options="networkChartOptions" :key="networkChartKey" />
       </div>