From e71557a60fc3cabd582f9858e0940f941b963bac Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Wed, 8 Nov 2023 10:25:03 +0100
Subject: [PATCH 1/2] Show Reset Zoom button when zoomed in

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 index.lp                    |  6 ++++--
 scripts/pi-hole/js/index.js | 25 +++++++++++++++++++++++++
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/index.lp b/index.lp
index f118a289..652c1db7 100644
--- a/index.lp
+++ b/index.lp
@@ -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">
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 6c364896..79f701c5 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -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 */

From b44a07446dedab6d4ae2821d44029a34c1d508de Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Wed, 8 Nov 2023 16:52:21 -0300
Subject: [PATCH 2/2] Small desing adjustment and simplify selector

- use class to style buttons and info icons (move style to pi-hole.css)
- add negative margin to avoid small jump when the button is shown
- use the new classes to simplify jquery selectors
---
 index.lp                    |  8 ++++----
 scripts/pi-hole/js/index.js | 14 +++++++-------
 style/pi-hole.css           |  6 ++++++
 3 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/index.lp b/index.lp
index 652c1db7..3cb316ef 100644
--- a/index.lp
+++ b/index.lp
@@ -83,8 +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>
-                <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>
+                <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">
@@ -103,8 +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>
-                <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>
+                <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">
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 79f701c5..6dd50fb9 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -428,12 +428,12 @@ $(function () {
   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();
+  $(".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("[data-sel='zoom-info']").show();
+    $(this).parent().find(".zoom-info").show();
     // Hide the reset zoom button
     $(this).hide();
   });
@@ -465,14 +465,14 @@ $(function () {
         // 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();
+          $(chart.canvas).parent().parent().parent().find(".zoom-info").show();
           // Hide the reset zoom button
-          $(chart.canvas).parent().parent().parent().find("[data-sel^='zoom-reset']").hide();
+          $(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("[data-sel='zoom-info']").hide();
+          $(chart.canvas).parent().parent().parent().find(".zoom-info").hide();
           // Show the reset zoom button
-          $(chart.canvas).parent().parent().parent().find("[data-sel^='zoom-reset']").show();
+          $(chart.canvas).parent().parent().parent().find(".zoom-reset").show();
         }
       },
     },
diff --git a/style/pi-hole.css b/style/pi-hole.css
index a060616b..662a3366 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -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;
+}