pi-hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2024-12-06 19:36:21 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Show Reset Zoom button when zoomed in (#2813)

Browse Source
This commit is contained in:
RD WebDesign
2023-11-08 18:02:30 -03:00
committed by GitHub
parent 1b7666b998 b44a07446d
commit 6c42c7d2f0
3 changed files with 35 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.lp
+4 -2
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 zoom-reset" data-sel="reset-history"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right 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 zoom-reset" data-sel="reset-clients"><i class="fas fa-undo"></i>&nbsp;Reset zoom</button>
<span class="pull-right 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">
scripts/pi-hole/js/index.js
+25
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
$(".zoom-reset").on("click", function () {
if ($(this).data("sel") === "reset-clients") clientsChart.resetZoom();
else timeLineChart.resetZoom();
// Show the closest info icon to the current chart
$(this).parent().find(".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(".zoom-info").show();
// Hide the reset zoom button
$(chart.canvas).parent().parent().parent().find(".zoom-reset").hide();
} else {
// Hide the closest info icon to the current chart
$(chart.canvas).parent().parent().parent().find(".zoom-info").hide();
// Show the reset zoom button
$(chart.canvas).parent().parent().parent().find(".zoom-reset").show();
}
},
},
/* Allow panning only on the y axis */
style/pi-hole.css
+6
View File
@@ -1398,3 +1398,9 @@ table.dataTable tbody > tr > .selected {
white 4%
);
}
/* Dashboard graphics: reset zoom button and info tooltip */
.zoom-reset {
display: none;
margin-top: -1px;
}