chart switch to bar, tooltip only nonzero, sum

2 files changed, 31 insertions, 4 deletions

diff --git a/src/db_handler.py b/src/db_handler.py
index 7c40d51..7a436e6 100644
--- a/src/db_handler.py
+++ b/src/db_handler.py
@@ -65,7 +65,7 @@ FROM login_attempt la
 JOIN connection cn on cn.id = la.connection
 WHERE la.timestamp BETWEEN current_timestamp - interval '2 days' AND la.timestamp
 GROUP BY date_trunc('hour', la.timestamp), cn.ip
-ORDER BY COUNT(la.id)
+ORDER BY COUNT(la.id) DESC
 ;
                 """)
             histogram = cur.fetchall()
diff --git a/src/static/histogram.js b/src/static/histogram.js
index 228614c..80048ec 100644
--- a/src/static/histogram.js
+++ b/src/static/histogram.js
@@ -1,8 +1,16 @@
 var ctx = document.getElementById("histogram");
 
+const footer = (tooltipItems) => {
+  let sum = 0;
+
+  tooltipItems.forEach(function(tooltipItem) {
+    sum += tooltipItem.parsed.y;
+  });
+  return 'Sum: ' + sum;
+};
 
 var myChart = new Chart(ctx, {
-	type: "line",
+	type: "bar",
 	options: {
 		aspectRatio: 4,
 	},
@@ -11,17 +19,36 @@ var myChart = new Chart(ctx, {
 		datasets: datasets
 	},
 	options: {
+	interaction: {
+      intersect: false,
+      mode: 'index',
+    },
+       plugins: {
+      tooltip: {
+        filter: function (tooltipItem, data) {
+          // Your filtering logic here
+          console.log(tooltipItem, data);
+          return tooltipItem.raw != 0; // Show tooltip only for the first dataset
+        },
+        callbacks: {
+          footer: footer,
+        },
+      },
+    },
 		responsive: true,
 		maintainAspectRatio: false,
 
 		scales: {
+		    x: {
+		            stacked: true,
+		            },
 			y: {
 				stacked: true,
 				beginAtZero: true,
 				title: {
 					display: true,
 					text: 'SSH login attempts'
-				}
+				},
 			},
 		},
 		layout: {
@@ -30,7 +57,7 @@ var myChart = new Chart(ctx, {
 				right: 20,
 				top: 20,
 				bottom: 20
-			}
+			},
 		}
 	},
 });