diff --git a/index.lp b/index.lp index f118a289..3cb316ef 100644 --- a/index.lp +++ b/index.lp @@ -83,7 +83,8 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')

Total queries over last 24 hours

- + +
@@ -102,7 +103,8 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')

Client activity over last 24 hours

- + +
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; +}