LAB/pi-hole_web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2026-01-09 06:20:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

Show Reset Zoom button when zoomed in

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER 2023-11-08 10:25:03 +01:00
parent 1b7666b998
commit e71557a60f
No known key found for this signature in database
GPG Key ID: 00135ACBD90B28DD
2 changed files with 29 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
index.lp
View File

@ -83,7 +83,8 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
<div class="box" id="queries-over-time">
<div class="box-header with-border">
<h3 class="box-title">Total queries over last 24 hours</h3>
<span class="pull-right" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
<button class="btn btn-xs btn-default pull-right" data-sel="zoom-reset-history" style="display:none;"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right" data-sel="zoom-info" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
</div>
<div class="box-body">
<div class="chart" style="width: 100%; height: 180px">
@ -102,7 +103,8 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
<div class="box" id="clients">
<div class="box-header with-border">
<h3 class="box-title">Client activity over last 24 hours</h3>
<span class="pull-right" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
<button class="btn btn-xs btn-default pull-right" data-sel="zoom-reset-clients" style="display:none;"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right" data-sel="zoom-info" data-toggle="tooltip" title="You can zoom this graph by either holding down the [Ctrl] key and using your mouse wheel or by using the &quot;pinch&quot; multi-touch gesture. You can furthermore click and drag to pan the graph."><i class="fa fa-info-circle"></i></span>
</div>
<div class="box-body">
<div class="chart" style="width: 100%; height: 180px">

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

@ -427,6 +427,17 @@ $(function () {
// Pull in data via AJAX
updateSummaryData();
// On click of the "Reset zoom" buttons, the closest chart to the button is reset
$("[data-sel^='zoom-reset']").on("click", function () {
if ($(this).data("sel") === "zoom-reset-clients") clientsChart.resetZoom();
else timeLineChart.resetZoom();
// Show the closest info icon to the current chart
$(this).parent().find("[data-sel='zoom-info']").show();
// Hide the reset zoom button
$(this).hide();
});
const zoomPlugin = {
/* Allow zooming only on the y axis */
zoom: {
@ -449,6 +460,20 @@ $(function () {
chart.options.scales.y.ticks.callback = function (value) {
return value.toFixed(0);
};
// Update the top right info icon and reset zoom button depending on the
// current zoom level
if (chart.getZoomLevel() === 1) {
// Show the closest info icon to the current chart
$(chart.canvas).parent().parent().parent().find("[data-sel='zoom-info']").show();
// Hide the reset zoom button
$(chart.canvas).parent().parent().parent().find("[data-sel^='zoom-reset']").hide();
} else {
// Hide the closest info icon to the current chart
$(chart.canvas).parent().parent().parent().find("[data-sel='zoom-info']").hide();
// Show the reset zoom button
$(chart.canvas).parent().parent().parent().find("[data-sel^='zoom-reset']").show();
}
},
},
/* Allow panning only on the y axis */