diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 0582ce0b..ce9bf78a 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -420,6 +420,35 @@ $(function () {
// Pull in data via AJAX
updateSummaryData();
+ const zoomPlugin = {
+ /* Allow zooming only on the y axis */
+ zoom: {
+ enabled: true,
+ wheel: {
+ enabled: true,
+ modifierKey: "ctrl" /* Modifier key required for zooming via mouse wheel */,
+ },
+ pinch: {
+ enabled: true,
+ },
+ mode: "y",
+ },
+ /* Allow panning only on the y axis */
+ pan: {
+ enabled: true,
+ mode: "y",
+ },
+ limits: {
+ y: {
+ /* Users are not allowed to zoom out further than the initial range */
+ min: "original",
+ max: "original",
+ /* Users are not allowed to zoom in further than a range of 10 queries */
+ minRange: 10,
+ },
+ },
+ };
+
var gridColor = utils.getCSSval("graphs-grid", "background-color");
var ticksColor = utils.getCSSval("graphs-ticks", "color");
var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
@@ -477,6 +506,7 @@ $(function () {
},
},
},
+ zoom: zoomPlugin,
},
scales: {
x: {
@@ -510,6 +540,7 @@ $(function () {
color: gridColor,
drawBorder: false,
},
+ min: 0,
},
},
elements: {
@@ -572,6 +603,7 @@ $(function () {
},
},
},
+ zoom: zoomPlugin,
},
scales: {
x: {
@@ -605,6 +637,7 @@ $(function () {
color: gridColor,
drawBorder: false,
},
+ min: 0,
},
},
elements: {
diff --git a/scripts/pi-hole/lua/header_authenticated.lp b/scripts/pi-hole/lua/header_authenticated.lp
index c2333f02..82bd8419 100644
--- a/scripts/pi-hole/lua/header_authenticated.lp
+++ b/scripts/pi-hole/lua/header_authenticated.lp
@@ -16,6 +16,8 @@ mg.include('header.lp','r')
+
+