Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-26 13:36:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
2023-11-05 07:42:11 +02:00
parent 1586a94021
commit aa84cb4b9b
4 changed files with 49 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
scripts/pi-hole/js/index.js
View File

@@ -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: {

2
scripts/pi-hole/lua/header_authenticated.lp
View File

@@ -16,6 +16,8 @@ mg.include('header.lp','r')
<script src="<?=pihole.fileversion('scripts/vendor/chart.umd.min.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/vendor/moment.min.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/vendor/chartjs-adapter-moment.js')?>"></script>
<script src="<?=pihole.fileversion('scripts/vendor/hammer.min.js')?>"></script> <!-- Needed for chartjs-plugin-zoom --->
<script src="<?=pihole.fileversion('scripts/vendor/chartjs-plugin-zoom.min.js')?>"></script>
</head>
<body class="<?=theme.name?> hold-transition sidebar-mini <? if pihole.boxedlayout() then ?>layout-boxed<? end ?> logged-in">
<noscript>

7
scripts/vendor/chartjs-plugin-zoom.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
scripts/vendor/hammer.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long