Defer chartjs animation until they are in viewport (#2810)

scripts/pi-hole/js/index.js

@@ -5,12 +5,19 @@
  *  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;
 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;
@@ -111,10 +118,9 @@ function updateQueryTypesPie() {
     queryTypePieChart.data.datasets[0] = dd;
     queryTypePieChart.data.labels = k;
     $("#query-types-pie .overlay").hide();
-    queryTypePieChart.update();
-
-    // Don't use rotation animation for further updates
-    queryTypePieChart.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");
   })
     .done(function () {
       // Reload graph after minute
@@ -233,10 +239,11 @@ 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
@@ -493,11 +500,13 @@ $(function () {
           grid: {
             color: gridColor,
             offset: false,
-            drawBorder: false,
           },
           ticks: {
             color: ticksColor,
           },
+          border: {
+            display: false,
+          },
         },
         y: {
           stacked: true,
@@ -508,7 +517,9 @@ $(function () {
           },
           grid: {
             color: gridColor,
-            drawBorder: false,
+          },
+          border: {
+            display: false,
           },
         },
       },
@@ -588,7 +599,9 @@ $(function () {
             grid: {
               color: gridColor,
               offset: false,
-              drawBorder: false,
+            },
+            border: {
+              display: false,
             },
             ticks: {
               color: ticksColor,
@@ -603,7 +616,9 @@ $(function () {
             stacked: true,
             grid: {
               color: gridColor,
-              drawBorder: false,
+            },
+            border: {
+              display: false,
             },
           },
         },

scripts/pi-hole/js/settings-system.js

@@ -5,13 +5,20 @@
  *  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;
 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,9 @@ function updateCachePie(data) {
   cachePieChart.data.datasets[0] = dd;
   cachePieChart.data.labels = k;
   $("#cache-pie-chart .overlay").hide();
-  cachePieChart.update();
-
-  // Don't use rotation animation for further updates
-  cachePieChart.options.animation.duration = 0;
+  // Passing 'none' will prevent rotation animation for further updates
+  //https://www.chartjs.org/docs/latest/developers/updates.html#preventing-animations
+  cachePieChart.update("none");
 }
 
 function updateHostInfo() {

scripts/pi-hole/lua/header_authenticated.lp

@@ -14,6 +14,7 @@ mg.include('header.lp','r')
     <script src="<?=pihole.fileversion('scripts/vendor/datatables.select.min.js')?>"></script>
     <script src="<?=pihole.fileversion('scripts/vendor/datatables.buttons.min.js')?>"></script>
     <script src="<?=pihole.fileversion('scripts/vendor/chart.umd.min.js')?>"></script>
+    <script src="<?=pihole.fileversion('scripts/vendor/chartjs-plugin-deferred.min.js')?>"></script>
     <script src="<?=pihole.fileversion('scripts/vendor/moment.min.js')?>"></script>
     <script src="<?=pihole.fileversion('scripts/vendor/chartjs-adapter-moment.js')?>"></script>
 </head>

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;t<o;++t)d(e=r[t])&&(f(e),e.$deferred.appeared=!0,e.update());n.ticking=!1})))}function i(t){if(t.nodeType===Node.ELEMENT_NODE){var r=e.getStyle(t,"overflow-x"),n=e.getStyle(t,"overflow-y");return"auto"===r||"scroll"===r||"auto"===n||"scroll"===n}return t.nodeType===Node.DOCUMENT_NODE}function f(e){e.$deferred.elements.forEach((function(r){var n=r[t].charts;n.splice(n.indexOf(e),1),n.length||(r.removeEventListener("scroll",o),delete r[t])})),e.$deferred.elements=[]}return{id:"deferred",defaults:{xOffset:0,yOffset:0,delay:0},beforeInit:function(e,r,n){e.$deferred={options:n,appeared:!1,delayed:!1,loaded:!1,elements:[]},function(e){for(var r,n,d=e.canvas.parentElement;d;)i(d)&&(0===(n=(r=d[t]||(d[t]={})).charts||(r.charts=[])).length&&d.addEventListener("scroll",o),n.push(e),e.$deferred.elements.push(d)),d=d.parentElement||d.ownerDocument}(e)},beforeDatasetsUpdate:function(e,t,n){var o=e.$deferred;if(!o.loaded){if(!o.appeared&&!d(e))return!1;if(o.appeared=!0,o.loaded=!0,f(e),n.delay>0)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)}}}));