From 74110a94d79078a3af578ded3171de8ee855bf08 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Thu, 27 Feb 2025 00:02:04 -0500
Subject: [PATCH] Improve chart titles

---
 pvc-vue/src/components/MetricsCharts.vue | 39 +++++++++++++++++++-----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/pvc-vue/src/components/MetricsCharts.vue b/pvc-vue/src/components/MetricsCharts.vue
index bf68d6d..0e85262 100644
--- a/pvc-vue/src/components/MetricsCharts.vue
+++ b/pvc-vue/src/components/MetricsCharts.vue
@@ -9,7 +9,12 @@
         <div class="metric-item">
           <div class="card">
             <div class="card-header">
-              <h6 class="card-title mb-0">CPU</h6>
+              <h6 class="card-title mb-0">
+                CPU
+                <span class="current-value">
+                  {{ props.metricsData.cpu.data[props.metricsData.cpu.data.length - 1] || 0 }}%
+                </span>
+              </h6>
             </div>
             <div class="card-body">
               <Line
@@ -24,7 +29,12 @@
         <div class="metric-item">
           <div class="card">
             <div class="card-header">
-              <h6 class="card-title mb-0">Memory</h6>
+              <h6 class="card-title mb-0">
+                Memory
+                <span class="current-value">
+                  {{ props.metricsData.memory.data[props.metricsData.memory.data.length - 1] || 0 }}%
+                </span>
+              </h6>
             </div>
             <div class="card-body">
               <Line
@@ -39,7 +49,12 @@
         <div class="metric-item">
           <div class="card">
             <div class="card-header">
-              <h6 class="card-title mb-0">Storage</h6>
+              <h6 class="card-title mb-0">
+                Storage
+                <span class="current-value">
+                  {{ props.metricsData.storage?.data[props.metricsData.storage?.data.length - 1] || 0 }}%
+                </span>
+              </h6>
             </div>
             <div class="card-body">
               <Line
@@ -123,7 +138,8 @@ const chartOptions = {
   },
   plugins: {
     legend: {
-      position: 'top'
+      position: 'top',
+      display: false  // Hide legend completely
     }
   },
   animation: false,
@@ -144,7 +160,7 @@ const healthChartData = computed(() => ({
 const cpuChartData = computed(() => ({
   labels: props.metricsData.cpu.labels,
   datasets: [{
-    label: 'CPU %',
+    label: 'CPU',
     data: props.metricsData.cpu.data,
     borderColor: 'rgb(75, 192, 192)',
     fill: false
@@ -154,7 +170,7 @@ const cpuChartData = computed(() => ({
 const memoryChartData = computed(() => ({
   labels: props.metricsData.memory.labels,
   datasets: [{
-    label: 'Memory %',
+    label: 'Memory',
     data: props.metricsData.memory.data,
     borderColor: 'rgb(153, 102, 255)',
     fill: false
@@ -164,7 +180,7 @@ const memoryChartData = computed(() => ({
 const storageChartData = computed(() => ({
   labels: props.metricsData.storage?.labels || [],
   datasets: [{
-    label: 'Storage %',
+    label: 'Storage',
     data: props.metricsData.storage?.data || [],
     borderColor: 'rgb(255, 159, 64)',
     fill: false
@@ -216,5 +232,14 @@ const storageChartData = computed(() => ({
 .card-header h6 {
   font-size: 0.95rem;
   font-weight: 600;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.current-value {
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: #333;
 }
 </style>