From 18a32315ea1a476f050745291a40a249babd54b2 Mon Sep 17 00:00:00 2001
From: Joshua Boniface <joshuab@clearcable.ca>
Date: Wed, 26 Feb 2025 23:52:05 -0500
Subject: [PATCH] Improve graph data point display

---
 pvc-vue/src/components/ClusterOverview.vue | 20 +++++++++++---------
 pvc-vue/src/components/MetricsCharts.vue   |  3 ++-
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/pvc-vue/src/components/ClusterOverview.vue b/pvc-vue/src/components/ClusterOverview.vue
index 8a79aa7..fd70f40 100644
--- a/pvc-vue/src/components/ClusterOverview.vue
+++ b/pvc-vue/src/components/ClusterOverview.vue
@@ -172,8 +172,6 @@ const getDeltaClass = (delta) => {
 };
 
 const healthChartData = computed(() => {
-  const health = props.clusterData.cluster_health?.health || 0;
-  
   return {
     labels: props.metricsHistory.labels,
     datasets: [{
@@ -195,13 +193,17 @@ const healthChartData = computed(() => {
       },
       borderWidth: 1.5,
       tension: 0.4,
-      pointRadius: 2,
-      pointBackgroundColor: (ctx) => {
-        const value = ctx.parsed.y;
-        if (value > 90) return 'rgba(40, 167, 69, 0.2)';  // Green
-        if (value > 50) return 'rgba(255, 193, 7, 0.2)';  // Yellow
-        return 'rgba(220, 53, 69, 0.2)';                  // Red
-      }
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointBackgroundColor: 'rgba(255, 255, 255, 0.8)',  // Light background for all points
+      pointBorderColor: (ctx) => {
+        if (!ctx.raw) return 'rgba(0, 0, 0, 0.2)';
+        const value = ctx.raw;
+        if (value > 90) return 'rgba(40, 167, 69, 0.5)';  // Green
+        if (value > 50) return 'rgba(255, 193, 7, 0.5)';  // Yellow
+        return 'rgba(220, 53, 69, 0.5)';                  // Red
+      },
+      pointBorderWidth: 1.5
     }]
   };
 });
diff --git a/pvc-vue/src/components/MetricsCharts.vue b/pvc-vue/src/components/MetricsCharts.vue
index 161574f..bf68d6d 100644
--- a/pvc-vue/src/components/MetricsCharts.vue
+++ b/pvc-vue/src/components/MetricsCharts.vue
@@ -117,7 +117,8 @@ const chartOptions = {
       tension: 0.2
     },
     point: {
-      radius: 2
+      radius: 0,
+      hoverRadius: 4
     }
   },
   plugins: {