diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 6c364896..6dd50fb9 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
+ $(".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 */
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;
+}