From 938750758907b23766348ed8d775b41a5cde3d69 Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Fri, 23 Oct 2026 21:44:00 +0530
Subject: [PATCH] fix(ec2): use chart.js/auto, watch currentTab, and ensure
 visible line points

---
 src/components/EC2InstanceDetailModal.vue | 51 ++++++++++++++++-------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/components/EC2InstanceDetailModal.vue b/src/components/EC2InstanceDetailModal.vue
index c9fed17..bf60152 100644
--- a/src/components/EC2InstanceDetailModal.vue
+++ b/src/components/EC2InstanceDetailModal.vue
@@ -374,7 +374,7 @@
 
 <script>
 import { Modal } from "bootstrap";
-import { Chart } from "chart.js";
+import Chart from "chart.js/auto";
 import dayjs from "dayjs";
 
 export default {
@@ -457,6 +457,13 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
             return null;
         },
     },
+    watch: {
+        currentTab() {
+            this.$nextTick(() => {
+                this.renderCharts();
+            });
+        },
+    },
     mounted() {
         this.modal = new Modal(this.$refs.modal);
     },
@@ -585,7 +592,11 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
                                 backgroundColor: "rgba(13, 202, 240, 0.15)",
                                 fill: true,
                                 tension: 0.25,
-                                pointRadius: values.length > 30 ? 0 : 2,
+                                borderWidth: 2,
+                                pointRadius: values.length > 50 ? 1 : 4,
+                                pointHoverRadius: 6,
+                                pointBackgroundColor: "#0dcaf0",
+                                pointBorderColor: "#ffffff",
                             },
                         ],
                         "%"
@@ -673,18 +684,24 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
                             {
                                 label: "Network In (KB/s)",
                                 data: inValues,
-                                borderColor: "#0d6efd",
-                                backgroundColor: "transparent",
+                                borderColor: "#38bdf8",
+                                backgroundColor: "rgba(56, 189, 248, 0.15)",
+                                fill: true,
                                 tension: 0.2,
-                                pointRadius: 0,
+                                borderWidth: 2,
+                                pointRadius: inValues.length > 50 ? 1 : 3,
+                                pointHoverRadius: 6,
                             },
                             {
                                 label: "Network Out (KB/s)",
                                 data: outValues,
-                                borderColor: "#6f42c1",
-                                backgroundColor: "transparent",
+                                borderColor: "#a855f7",
+                                backgroundColor: "rgba(168, 85, 247, 0.15)",
+                                fill: true,
                                 tension: 0.2,
-                                pointRadius: 0,
+                                borderWidth: 2,
+                                pointRadius: outValues.length > 50 ? 1 : 3,
+                                pointHoverRadius: 6,
                             },
                         ],
                         " KB/s"
@@ -709,18 +726,24 @@ sudo /opt/aws/amazon-cloudwatch-agent/bin/amazon-cloudwatch-agent-ctl \\
                             {
                                 label: "Read (KB/s)",
                                 data: readValues,
-                                borderColor: "#198754",
-                                backgroundColor: "transparent",
+                                borderColor: "#00e676",
+                                backgroundColor: "rgba(0, 230, 118, 0.15)",
+                                fill: true,
                                 tension: 0.2,
-                                pointRadius: 0,
+                                borderWidth: 2,
+                                pointRadius: readValues.length > 50 ? 1 : 3,
+                                pointHoverRadius: 6,
                             },
                             {
                                 label: "Write (KB/s)",
                                 data: writeValues,
-                                borderColor: "#dc3545",
-                                backgroundColor: "transparent",
+                                borderColor: "#f43f5e",
+                                backgroundColor: "rgba(244, 63, 94, 0.15)",
+                                fill: true,
                                 tension: 0.2,
-                                pointRadius: 0,
+                                borderWidth: 2,
+                                pointRadius: writeValues.length > 50 ? 1 : 3,
+                                pointHoverRadius: 6,
                             },
                         ],
                         " KB/s"