From 5300028f14e58b54e2573d5b9f069c00dacab01c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20K=C3=B6nig?= Date: Mon, 6 Nov 2023 00:18:41 +0100 Subject: [PATCH 1/6] Defer chart loading MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Christian König --- scripts/pi-hole/js/index.js | 11 +++++++++-- scripts/pi-hole/lua/header_authenticated.lp | 1 + scripts/vendor/chartjs-plugin-deferred.min.js | 7 +++++++ 3 files changed, 17 insertions(+), 2 deletions(-) create mode 100644 scripts/vendor/chartjs-plugin-deferred.min.js diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 0582ce0b..0b1c8e0e 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -11,6 +11,13 @@ var timeLineChart, clientsChart; var queryTypePieChart, forwardDestinationPieChart; +// Register the ChartDeferred plugin to all charts: +Chart.register(ChartDeferred); +Chart.defaults.set('plugins.deferred', { + yOffset: '50%', + delay: 500 +}) + // Functions to update data in page var failures = 0; @@ -114,7 +121,7 @@ function updateQueryTypesPie() { queryTypePieChart.update(); // Don't use rotation animation for further updates - queryTypePieChart.options.animation.duration = 0; + //queryTypePieChart.options.animation.duration = 0; }) .done(function () { // Reload graph after minute @@ -236,7 +243,7 @@ function updateForwardDestinationsPie() { forwardDestinationPieChart.update(); // Don't use rotation animation for further updates - forwardDestinationPieChart.options.animation.duration = 0; + //forwardDestinationPieChart.options.animation.duration = 0; }) .done(function () { // Reload graph after one minute diff --git a/scripts/pi-hole/lua/header_authenticated.lp b/scripts/pi-hole/lua/header_authenticated.lp index c2333f02..7bfb4a2c 100644 --- a/scripts/pi-hole/lua/header_authenticated.lp +++ b/scripts/pi-hole/lua/header_authenticated.lp @@ -14,6 +14,7 @@ mg.include('header.lp','r') + diff --git a/scripts/vendor/chartjs-plugin-deferred.min.js b/scripts/vendor/chartjs-plugin-deferred.min.js new file mode 100644 index 00000000..81bc2505 --- /dev/null +++ b/scripts/vendor/chartjs-plugin-deferred.min.js @@ -0,0 +1,7 @@ +/*! + * chartjs-plugin-deferred v2.0.0 + * https://chartjs-plugin-deferred.netlify.app + * (c) 2016-2022 chartjs-plugin-deferred contributors + * Released under the MIT license + */ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("chart.js/helpers")):"function"==typeof define&&define.amd?define(["chart.js/helpers"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).ChartDeferred=t(e.Chart.helpers)}(this,(function(e){"use strict";var t="$chartjs_deferred";function r(t,r){r?window.setTimeout(t,r):e.requestAnimFrame.call(window,t)}function n(e,t){var r=parseInt(e,10);return isNaN(r)?0:"string"==typeof e&&-1!==e.indexOf("%")?r/100*t:r}function d(e){var t=e.$deferred.options,r=e.canvas;if(!r||null===r.offsetParent)return!1;var d=r.getBoundingClientRect(),o=n(t.yOffset||0,d.height),i=n(t.xOffset||0,d.width);return d.right-i>=0&&d.bottom-o>=0&&d.left+i<=window.innerWidth&&d.top+o<=window.innerHeight}function o(e){var n=e.target[t];n.ticking||(n.ticking=!0,r((function(){var e,t,r=n.charts.slice(),o=r.length;for(t=0;t0)return o.delayed=!0,r((function(){e.ctx&&(o.delayed=!1,e.update())}),n.delay),!1}if(o.delayed)return!1},destroy:function(e){f(e)}}})); From 097a404bf078ebc3db1aadd7f94aa75aa6d2a2fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20K=C3=B6nig?= Date: Mon, 6 Nov 2023 13:03:14 +0100 Subject: [PATCH 2/6] Don't show rotation animation for pie chart updates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Christian König --- scripts/pi-hole/js/index.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 0b1c8e0e..0a9dc5a6 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -118,10 +118,10 @@ function updateQueryTypesPie() { queryTypePieChart.data.datasets[0] = dd; queryTypePieChart.data.labels = k; $("#query-types-pie .overlay").hide(); - queryTypePieChart.update(); + // Passing 'none' will prevent rotation animation for further updates + //https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations + queryTypePieChart.update('none'); - // Don't use rotation animation for further updates - //queryTypePieChart.options.animation.duration = 0; }) .done(function () { // Reload graph after minute @@ -240,10 +240,12 @@ function updateForwardDestinationsPie() { forwardDestinationPieChart.data.datasets[0] = dd; // and push it at once $("#forward-destinations-pie .overlay").hide(); - forwardDestinationPieChart.update(); - // Don't use rotation animation for further updates - //forwardDestinationPieChart.options.animation.duration = 0; + // Passing 'none' will prevent rotation animation for further updates + //https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations + queryTypePieChart.update('none'); + forwardDestinationPieChart.update('none'); + }) .done(function () { // Reload graph after one minute From a55167973d92bb7ba029fd01c27cb10d35253e4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20K=C3=B6nig?= Date: Mon, 6 Nov 2023 13:34:17 +0100 Subject: [PATCH 3/6] Fix chartjs v4 migration: scales[id].grid.drawBorder > scales[id].border.display MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Christian König --- scripts/pi-hole/js/index.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 0a9dc5a6..564aa6ef 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -502,11 +502,13 @@ $(function () { grid: { color: gridColor, offset: false, - drawBorder: false, }, ticks: { color: ticksColor, }, + border: { + display: false, + }, }, y: { stacked: true, @@ -517,8 +519,10 @@ $(function () { }, grid: { color: gridColor, - drawBorder: false, }, + border: { + display: false, + } }, }, elements: { @@ -597,7 +601,9 @@ $(function () { grid: { color: gridColor, offset: false, - drawBorder: false, + }, + border: { + display: false, }, ticks: { color: ticksColor, @@ -612,7 +618,9 @@ $(function () { stacked: true, grid: { color: gridColor, - drawBorder: false, + }, + border: { + display: false, }, }, }, From 80fbb15280490a5a9ee22cfbccc0b7629218a71b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20K=C3=B6nig?= Date: Mon, 6 Nov 2023 19:42:34 +0100 Subject: [PATCH 4/6] Apply deferred chart loading also to cache pie at settings system MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Christian König --- scripts/pi-hole/js/settings-system.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/scripts/pi-hole/js/settings-system.js b/scripts/pi-hole/js/settings-system.js index c7f5c647..9befc225 100644 --- a/scripts/pi-hole/js/settings-system.js +++ b/scripts/pi-hole/js/settings-system.js @@ -12,6 +12,13 @@ var cachePieChart = null; var cacheSize = 0, cacheEntries = 0; +// Register the ChartDeferred plugin to all charts: +Chart.register(ChartDeferred); +Chart.defaults.set('plugins.deferred', { + yOffset: '50%', + delay: 500 +}) + function updateCachePie(data) { var v = [], c = [], @@ -69,10 +76,10 @@ function updateCachePie(data) { cachePieChart.data.datasets[0] = dd; cachePieChart.data.labels = k; $("#cache-pie-chart .overlay").hide(); - cachePieChart.update(); + // Passing 'none' will prevent rotation animation for further updates + //https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations + cachePieChart.update('none'); - // Don't use rotation animation for further updates - cachePieChart.options.animation.duration = 0; } function updateHostInfo() { From a06bbdf589cf211b878cf8671a166480b3b8bf32 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20K=C3=B6nig?= Date: Mon, 6 Nov 2023 21:04:31 +0100 Subject: [PATCH 5/6] Fix styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Christian König --- scripts/pi-hole/js/index.js | 18 ++++++++---------- scripts/pi-hole/js/settings-system.js | 11 +++++------ 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 564aa6ef..cc013a34 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -13,10 +13,10 @@ var queryTypePieChart, forwardDestinationPieChart; // Register the ChartDeferred plugin to all charts: Chart.register(ChartDeferred); -Chart.defaults.set('plugins.deferred', { - yOffset: '50%', - delay: 500 -}) +Chart.defaults.set("plugins.deferred", { + yOffset: "50%", + delay: 500, +}); // Functions to update data in page @@ -120,8 +120,7 @@ function updateQueryTypesPie() { $("#query-types-pie .overlay").hide(); // Passing 'none' will prevent rotation animation for further updates //https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations - queryTypePieChart.update('none'); - + queryTypePieChart.update("none"); }) .done(function () { // Reload graph after minute @@ -243,9 +242,8 @@ function updateForwardDestinationsPie() { // Passing 'none' will prevent rotation animation for further updates //https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations - queryTypePieChart.update('none'); - forwardDestinationPieChart.update('none'); - + queryTypePieChart.update("none"); + forwardDestinationPieChart.update("none"); }) .done(function () { // Reload graph after one minute @@ -522,7 +520,7 @@ $(function () { }, border: { display: false, - } + }, }, }, elements: { diff --git a/scripts/pi-hole/js/settings-system.js b/scripts/pi-hole/js/settings-system.js index 9befc225..417c137a 100644 --- a/scripts/pi-hole/js/settings-system.js +++ b/scripts/pi-hole/js/settings-system.js @@ -14,10 +14,10 @@ var cacheSize = 0, // Register the ChartDeferred plugin to all charts: Chart.register(ChartDeferred); -Chart.defaults.set('plugins.deferred', { - yOffset: '50%', - delay: 500 -}) +Chart.defaults.set("plugins.deferred", { + yOffset: "50%", + delay: 500, +}); function updateCachePie(data) { var v = [], @@ -78,8 +78,7 @@ function updateCachePie(data) { $("#cache-pie-chart .overlay").hide(); // Passing 'none' will prevent rotation animation for further updates //https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations - cachePieChart.update('none'); - + cachePieChart.update("none"); } function updateHostInfo() { From bb32db9ae8da0f0345ab32f8fb0ff644b8669c8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20K=C3=B6nig?= Date: Mon, 6 Nov 2023 21:11:55 +0100 Subject: [PATCH 6/6] Suppress no-undef warning MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Christian König --- scripts/pi-hole/js/index.js | 2 +- scripts/pi-hole/js/settings-system.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index cc013a34..b2e2cb29 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -5,7 +5,7 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ -/* global utils:false, Chart:false, apiFailure:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false */ +/* global utils:false, Chart:false, apiFailure:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false */ // Define global variables var timeLineChart, clientsChart; diff --git a/scripts/pi-hole/js/settings-system.js b/scripts/pi-hole/js/settings-system.js index 417c137a..307ea3a3 100644 --- a/scripts/pi-hole/js/settings-system.js +++ b/scripts/pi-hole/js/settings-system.js @@ -5,7 +5,7 @@ * This file is copyright under the latest version of the EUPL. * Please see LICENSE file for your rights under this license. */ -/* global apiFailure:false, Chart:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false */ +/* global apiFailure:false, Chart:false, THEME_COLORS:false, customTooltips:false, htmlLegendPlugin:false,doughnutTooltip:false, ChartDeferred:false */ var hostinfoTimer = null; var cachePieChart = null;