From aa84cb4b9b293ebf50d00d7912b6c99525e9b5b4 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 5 Nov 2023 07:42:11 +0200 Subject: [PATCH] Add zooming on the dashboard's two main graphs. You can zoom either with [Ctrl] + your mouse wheel (desktop) or the multi-touch "pinch" gesture (mobile). You can then drag with a single click (or finger) to move the graph up or down in case zooming wasn't that accurate Signed-off-by: DL6ER --- scripts/pi-hole/js/index.js | 33 +++++++++++++++++++++ scripts/pi-hole/lua/header_authenticated.lp | 2 ++ scripts/vendor/chartjs-plugin-zoom.min.js | 7 +++++ scripts/vendor/hammer.min.js | 7 +++++ 4 files changed, 49 insertions(+) create mode 100644 scripts/vendor/chartjs-plugin-zoom.min.js create mode 100644 scripts/vendor/hammer.min.js 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') + +