From f66d09561433d4aa732c8071412721f6887f5c28 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Thu, 27 Feb 2025 01:27:25 -0500
Subject: [PATCH] Adjust styling of utilization graphs

---
 pvc-vue/src/components/ClusterOverview.vue | 102 ++++++++++++++-------
 1 file changed, 68 insertions(+), 34 deletions(-)

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index e26d74d..33c55b2 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -152,12 +152,14 @@
             <div class="card-header">
               <h6 class="card-title mb-0">
                 <span class="metric-label">CPU Utilization</span>
-                <span class="metric-value">
-                  {{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
-                </span>
               </h6>
             </div>
             <div class="card-body">
+              <div class="metric-percentage">
+                <h4 class="metric-value">
+                  {{ metricsData.cpu.data[metricsData.cpu.data.length - 1] || 0 }}%
+                </h4>
+              </div>
               <Line :data="cpuChartData" :options="chartOptions" />
             </div>
           </div>
@@ -166,12 +168,14 @@
             <div class="card-header">
               <h6 class="card-title mb-0">
                 <span class="metric-label">Memory Utilization</span>
-                <span class="metric-value">
-                  {{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
-                </span>
               </h6>
             </div>
             <div class="card-body">
+              <div class="metric-percentage">
+                <h4 class="metric-value">
+                  {{ metricsData.memory.data[metricsData.memory.data.length - 1] || 0 }}%
+                </h4>
+              </div>
               <Line :data="memoryChartData" :options="chartOptions" />
             </div>
           </div>
@@ -180,12 +184,14 @@
             <div class="card-header">
               <h6 class="card-title mb-0">
                 <span class="metric-label">Storage Utilization</span>
-                <span class="metric-value">
-                  {{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
-                </span>
               </h6>
             </div>
             <div class="card-body">
+              <div class="metric-percentage">
+                <h4 class="metric-value">
+                  {{ metricsData.storage?.data[metricsData.storage?.data.length - 1] || 0 }}%
+                </h4>
+              </div>
               <Line :data="storageChartData" :options="chartOptions" />
             </div>
           </div>
@@ -406,7 +412,15 @@ const cpuChartData = computed(() => ({
     label: 'CPU',
     data: props.metricsData.cpu.data,
     borderColor: 'rgb(75, 192, 192)',
-    fill: false
+    fill: true,
+    backgroundColor: 'rgba(75, 192, 192, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(75, 192, 192, 0.5)',
+    pointBorderWidth: 1.5
   }]
 }));
 
@@ -416,7 +430,15 @@ const memoryChartData = computed(() => ({
     label: 'Memory',
     data: props.metricsData.memory.data,
     borderColor: 'rgb(153, 102, 255)',
-    fill: false
+    fill: true,
+    backgroundColor: 'rgba(153, 102, 255, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(153, 102, 255, 0.5)',
+    pointBorderWidth: 1.5
   }]
 }));
 
@@ -426,7 +448,15 @@ const storageChartData = computed(() => ({
     label: 'Storage',
     data: props.metricsData.storage?.data || [],
     borderColor: 'rgb(255, 159, 64)',
-    fill: false
+    fill: true,
+    backgroundColor: 'rgba(255, 159, 64, 0.1)',
+    borderWidth: 1.5,
+    tension: 0.4,
+    pointRadius: 0,
+    pointHoverRadius: 4,
+    pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',
+    pointBorderColor: 'rgba(255, 159, 64, 0.5)',
+    pointBorderWidth: 1.5
   }]
 }));
 
@@ -452,21 +482,12 @@ const chartOptions = {
       }
     },
     y: {
-      display: true,
+      display: false,
       grid: {
-        display: true
+        display: false
       },
       min: 0,
-      max: 100,
-      ticks: {
-        stepSize: 20
-      }
-    }
-  },
-  elements: {
-    point: {
-      radius: 0,
-      hoverRadius: 4
+      max: 100
     }
   },
   animation: false,
@@ -673,19 +694,15 @@ const chartOptions = {
   padding: 0.5rem;
   display: flex;
   flex-direction: column;
-  justify-content: center;  /* Center vertically */
-  align-items: center;      /* Center horizontally */
-}
-
-.metric-card .card-body > * {
-  margin: 0;  /* Remove any default margins */
+  position: relative;
 }
 
 .metric-card .metric-value {
-  font-size: 1.25rem;
+  font-size: 1.25rem;  /* Return to original size for metric cards */
   font-weight: bold;
   color: #333;
-  line-height: 1;  /* Tighter line height */
+  line-height: 1;
+  margin: 0;
 }
 
 .card-header h6 {
@@ -700,9 +717,26 @@ const chartOptions = {
   color: #666;
 }
 
-.metric-value {
-  font-weight: bold;
+.metric-percentage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255, 255, 255, 0.5);
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgba(0,0,0,0.05);
+  z-index: 2;
+}
+
+/* Style for the percentage overlay in graphs */
+.metric-percentage .metric-value {
+  font-size: 2.5rem;
+  font-weight: normal;  /* Match health graph */
   color: #333;
+  line-height: 1;
+  margin: 0;
+  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
 }
 
 @media (max-width: 1400px) {