From 63f3aae9e65f1af7629df98a031abc73a16108fd Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Wed, 11 Oct 2023 00:26:25 +0000
Subject: [PATCH] remove hover effects for small charts

---
 scripts/account.js |  2 +-
 scripts/chart.js   | 24 +++++++++++++++++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/scripts/account.js b/scripts/account.js
index 051e46b..1626aac 100644
--- a/scripts/account.js
+++ b/scripts/account.js
@@ -82,7 +82,7 @@ function createResourceUsageChart (container, resourceName, resourceAvail, resou
 				hoverOffset: 4
 			}]
 		},
-		breakpoint: "680px"
+		breakpoint: 680
 	}
 	chart.style = "margin: 10px;";
 }
diff --git a/scripts/chart.js b/scripts/chart.js
index 2ac6aa8..24a8ba9 100644
--- a/scripts/chart.js
+++ b/scripts/chart.js
@@ -76,14 +76,25 @@ class ResourceChart extends HTMLElement {
 					tooltip: {
 						enabled: true
 					}
-				}
+				},
+				interaction: {
+					mode: "nearest"
+				},
+				onHover: function(e, activeElements) {
+						if (window.innerWidth <= data.breakpoint) {
+							updateTooltipShow(e.chart, false);
+						}
+						else {
+							updateTooltipShow(e.chart, true);
+						}
+				  },
 			},
 		}
 
-		createChart(this.canvas, chartData);
+		this.chart = createChart(this.canvas, chartData);
 
 		if (data.breakpoint) {
-			this.responsiveStyle.media = `screen and (width <= ${data.breakpoint})`;
+			this.responsiveStyle.media = `screen and (width <= ${data.breakpoint}px)`;
 		}
 		else {
 			this.responsiveStyle.media = "not all";
@@ -99,4 +110,11 @@ function createChart (ctx, data) {
 	return new Chart(ctx, data);
 }
 
+// this is a really bad way to do this, but chartjs api does not expose many ways to dynamically set hover and tooltip options 
+function updateTooltipShow (chart, enabled) {
+	chart.options.plugins.tooltip.enabled = enabled;
+	chart.options.interaction.mode = enabled ? "nearest" : null;
+	chart.update();
+}
+
 customElements.define("resource-chart", ResourceChart);