From 4ba03a86c6268a7d81733d5638160f9acf1819ee Mon Sep 17 00:00:00 2001
From: cyril59310 <archas.cyril@hotmail.fr>
Date: Fri, 2 Jan 2026 20:38:17 +0100
Subject: [PATCH 1/7] Chart improvement

---
 src/components/PingChart.vue | 42 ++++++++++++++++++++++++------------
 src/lang/en.json             |  5 ++++-
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 3dcc74fa..a2c43930 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -25,12 +25,12 @@
 </template>
 
 <script lang="js">
-import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip } from "chart.js";
+import { BarController, BarElement, Chart, Filler, LinearScale, LineController, LineElement, PointElement, TimeScale, Tooltip, Legend } from "chart.js";
 import "chartjs-adapter-dayjs-4";
 import { Line } from "vue-chartjs";
 import { UP, DOWN, PENDING, MAINTENANCE } from "../util.ts";
 
-Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler);
+Chart.register(LineController, BarController, LineElement, PointElement, TimeScale, BarElement, LinearScale, Tooltip, Filler, Legend);
 
 export default {
     components: { Line },
@@ -148,8 +148,10 @@ export default {
                         backgroundColor: this.$root.theme === "light" ? "rgba(212,232,222,1.0)" : "rgba(32,42,38,1.0)",
                         bodyColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                         titleColor: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
+                        // No longer rely solely on datasetIndex === 0; we want to hide tooltips only for the bars
                         filter: function (tooltipItem) {
-                            return tooltipItem.datasetIndex === 0;  // Hide tooltip on Bar Chart
+                            const ds = tooltipItem?.chart?.data?.datasets?.[tooltipItem.datasetIndex];
+                            return ds && ds.type !== "bar";
                         },
                         callbacks: {
                             label: (context) => {
@@ -158,7 +160,19 @@ export default {
                         }
                     },
                     legend: {
-                        display: false,
+                        // Enable the legend and display only the non-bar datasets (the lines)
+                        display: true,
+                        position: "top",
+                        align: "end",
+                        labels: {
+                            color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
+                            usePointStyle: true,
+                            // Filter to display only the lines in the legend
+                            filter: function (legendItem, data) {
+                                const ds = data.datasets[legendItem.datasetIndex];
+                                return ds && ds.type !== "bar";
+                            },
+                        },
                     },
                 },
             };
@@ -363,10 +377,10 @@ export default {
                         data: pingData,
                         fill: "origin",
                         tension: 0.2,
-                        borderColor: "#5CDD8B",
-                        backgroundColor: "#5CDD8B38",
+                        borderColor: "#4ABF74",
+                        backgroundColor: "#4ABF7438",
                         yAxisID: "y",
-                        label: "ping",
+                        label: this.$t("avgPing") || "Avg Ping",
                     },
                     {
                         // Bar Chart
@@ -495,27 +509,27 @@ export default {
                         borderColor: "#5CDD8B",
                         backgroundColor: "#5CDD8B06",
                         yAxisID: "y",
-                        label: "avg-ping",
+                        label: this.$t("avgPing") || "Avg Ping",
                     },
                     {
                         // minimum ping chart
                         data: minPingData,
                         fill: "origin",
                         tension: 0.2,
-                        borderColor: "#3CBD6B38",
-                        backgroundColor: "#5CDD8B06",
+                        borderColor: "#2F9C59",
+                        backgroundColor: "#2F9C5914",
                         yAxisID: "y",
-                        label: "min-ping",
+                        label: this.$t("minPing") || "Min Ping",
                     },
                     {
                         // maximum ping chart
                         data: maxPingData,
                         fill: "origin",
                         tension: 0.2,
-                        borderColor: "#7CBD6B38",
-                        backgroundColor: "#5CDD8B06",
+                        borderColor: "#175c32",
+                        backgroundColor: "#1E7A4214",
                         yAxisID: "y",
-                        label: "max-ping",
+                        label: this.$t("maxPing") || "Max Ping",
                     },
                     {
                         // Bar Chart
diff --git a/src/lang/en.json b/src/lang/en.json
index b6cefcef..e4f09172 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1224,5 +1224,8 @@
     "domainExpiryDescription": "Trigger notification when domain names expires in:",
     "minimumIntervalWarning": "Intervals below 20 seconds may result in poor performance.",
     "lowIntervalWarning": "Are you sure want to set the interval value below 20 seconds? Performance may be degraded, particularly if there are a large number of monitors.",
-    "imageResetConfirmation": "Image reset to default"
+    "imageResetConfirmation": "Image reset to default",
+    "avgPing": "Avg Ping",
+    "maxPing": "Max Ping",
+    "minPing": "Min Ping"
 }

From e409266e331e0f0ab0819c962a0a93fad0d14fde Mon Sep 17 00:00:00 2001
From: cyril59310 <archas.cyril@hotmail.fr>
Date: Fri, 2 Jan 2026 21:02:26 +0100
Subject: [PATCH 2/7] Moved to the left and darkened

---
 src/components/PingChart.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index a2c43930..eb7d4616 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -163,7 +163,7 @@ export default {
                         // Enable the legend and display only the non-bar datasets (the lines)
                         display: true,
                         position: "top",
-                        align: "end",
+                        align: "start",
                         labels: {
                             color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                             usePointStyle: true,
@@ -501,16 +501,6 @@ export default {
 
             return {
                 datasets: [
-                    {
-                        // average ping chart
-                        data: avgPingData,
-                        fill: "origin",
-                        tension: 0.2,
-                        borderColor: "#5CDD8B",
-                        backgroundColor: "#5CDD8B06",
-                        yAxisID: "y",
-                        label: this.$t("avgPing") || "Avg Ping",
-                    },
                     {
                         // minimum ping chart
                         data: minPingData,
@@ -521,12 +511,22 @@ export default {
                         yAxisID: "y",
                         label: this.$t("minPing") || "Min Ping",
                     },
+                    {
+                        // average ping chart
+                        data: avgPingData,
+                        fill: "origin",
+                        tension: 0.2,
+                        borderColor: "#5CDD8B",
+                        backgroundColor: "#5CDD8B06",
+                        yAxisID: "y",
+                        label: this.$t("avgPing") || "Avg Ping",
+                    },
                     {
                         // maximum ping chart
                         data: maxPingData,
                         fill: "origin",
                         tension: 0.2,
-                        borderColor: "#175c32",
+                        borderColor: "#124526",
                         backgroundColor: "#1E7A4214",
                         yAxisID: "y",
                         label: this.$t("maxPing") || "Max Ping",

From 8f0e396a00015454e63659580054e6f99fd236cd Mon Sep 17 00:00:00 2001
From: cyril59310 <archas.cyril@hotmail.fr>
Date: Fri, 2 Jan 2026 22:16:41 +0100
Subject: [PATCH 3/7] update colors

---
 src/components/PingChart.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index eb7d4616..d3691ee8 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -166,7 +166,6 @@ export default {
                         align: "start",
                         labels: {
                             color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
-                            usePointStyle: true,
                             // Filter to display only the lines in the legend
                             filter: function (legendItem, data) {
                                 const ds = data.datasets[legendItem.datasetIndex];
@@ -506,7 +505,7 @@ export default {
                         data: minPingData,
                         fill: "origin",
                         tension: 0.2,
-                        borderColor: "#2F9C59",
+                        borderColor: "#126331",
                         backgroundColor: "#2F9C5914",
                         yAxisID: "y",
                         label: this.$t("minPing") || "Min Ping",
@@ -526,7 +525,7 @@ export default {
                         data: maxPingData,
                         fill: "origin",
                         tension: 0.2,
-                        borderColor: "#124526",
+                        borderColor: "#21b55a",
                         backgroundColor: "#1E7A4214",
                         yAxisID: "y",
                         label: this.$t("maxPing") || "Max Ping",

From c7641a3c8087765f8fdd0c16c09d57219742cd3d Mon Sep 17 00:00:00 2001
From: cyril59310 <archas.cyril@hotmail.fr>
Date: Fri, 2 Jan 2026 22:21:36 +0100
Subject: [PATCH 4/7] Indicates that the legend is clickable

---
 src/components/PingChart.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index d3691ee8..9eb644ac 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -164,6 +164,17 @@ export default {
                         display: true,
                         position: "top",
                         align: "start",
+                       // Indicates that the legend is clickable (cursor pointer)
+                        onHover: function (event, legendItem, legend) {
+                            if (legend && legend.chart && legend.chart.canvas) {
+                                legend.chart.canvas.style.cursor = "pointer";
+                            }
+                        },
+                        onLeave: function (event, legendItem, legend) {
+                            if (legend && legend.chart && legend.chart.canvas) {
+                                legend.chart.canvas.style.cursor = "";
+                            }
+                        },
                         labels: {
                             color: this.$root.theme === "light" ? "rgba(12,12,18,1.0)" : "rgba(220,220,220,1.0)",
                             // Filter to display only the lines in the legend

From 79f542cc8d4ef26abb4c1936b0e2d02f29d875a9 Mon Sep 17 00:00:00 2001
From: cyril59310 <archas.cyril@hotmail.fr>
Date: Fri, 2 Jan 2026 23:05:35 +0100
Subject: [PATCH 5/7] fix

---
 src/components/PingChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 9eb644ac..dfe3a7bc 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -164,7 +164,7 @@ export default {
                         display: true,
                         position: "top",
                         align: "start",
-                       // Indicates that the legend is clickable (cursor pointer)
+                        // Indicates that the legend is clickable (cursor pointer)
                         onHover: function (event, legendItem, legend) {
                             if (legend && legend.chart && legend.chart.canvas) {
                                 legend.chart.canvas.style.cursor = "pointer";

From a1b48890200c7db0bd0b8cb2a998440c62f3c66c Mon Sep 17 00:00:00 2001
From: cyril59310 <archas.cyril@hotmail.fr>
Date: Sat, 3 Jan 2026 00:36:48 +0100
Subject: [PATCH 6/7] add legend in label

---
 src/components/PingChart.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index dfe3a7bc..6306acdd 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -155,7 +155,8 @@ export default {
                         },
                         callbacks: {
                             label: (context) => {
-                                return ` ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
+                                const label = context.dataset.label || '';
+                                return `${label} ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
                             },
                         }
                     },
@@ -390,7 +391,7 @@ export default {
                         borderColor: "#4ABF74",
                         backgroundColor: "#4ABF7438",
                         yAxisID: "y",
-                        label: this.$t("avgPing") || "Avg Ping",
+                        label: this.$t("avgPing"),
                     },
                     {
                         // Bar Chart
@@ -519,7 +520,7 @@ export default {
                         borderColor: "#126331",
                         backgroundColor: "#2F9C5914",
                         yAxisID: "y",
-                        label: this.$t("minPing") || "Min Ping",
+                        label: this.$t("minPing"),
                     },
                     {
                         // average ping chart
@@ -529,7 +530,7 @@ export default {
                         borderColor: "#5CDD8B",
                         backgroundColor: "#5CDD8B06",
                         yAxisID: "y",
-                        label: this.$t("avgPing") || "Avg Ping",
+                        label: this.$t("avgPing"),
                     },
                     {
                         // maximum ping chart
@@ -539,7 +540,7 @@ export default {
                         borderColor: "#21b55a",
                         backgroundColor: "#1E7A4214",
                         yAxisID: "y",
-                        label: this.$t("maxPing") || "Max Ping",
+                        label: this.$t("maxPing"),
                     },
                     {
                         // Bar Chart

From 691fe5d160d90e41975ea8ad2cb191e9d146a07c Mon Sep 17 00:00:00 2001
From: cyril59310 <archas.cyril@hotmail.fr>
Date: Sat, 3 Jan 2026 00:39:20 +0100
Subject: [PATCH 7/7] fix

---
 src/components/PingChart.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/PingChart.vue b/src/components/PingChart.vue
index 6306acdd..f26bf473 100644
--- a/src/components/PingChart.vue
+++ b/src/components/PingChart.vue
@@ -155,7 +155,7 @@ export default {
                         },
                         callbacks: {
                             label: (context) => {
-                                const label = context.dataset.label || '';
+                                const label = context.dataset.label;
                                 return `${label} ${new Intl.NumberFormat().format(context.parsed.y)} ms`;
                             },
                         }