system: adjust CSS for ChartJS v4

maintainAspectRatio has changed to respect the container height.
This has introduced issues as is described in the issue linked in
this commit. Since some of the chart containers rely on maintainAspectRatio
being set to false, setting the aspect-ratio in CSS there will cause
those charts to ignore this setting, causing infinite scaling. These
containers are excluded from the workaround using
canvas-container-noaspectratio. Since these charts do not change
in height, they are not subject to the same degree of responsiveness.

While here, using a chart with an overflowable widget seems unnecessary
and is causing visual artifacts. Eventually we want to split up the
"expansion" logic to their own widgets or configurable setting anyway.

src/opnsense/www/css/dashboard.css

@@ -141,8 +141,15 @@ td {
     margin: 5px;
 }
 
+.canvas-container-noaspectratio {
+    position: relative;
+}
+
 .canvas-container {
     position: relative;
+    /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */
+    aspect-ratio: 2;
+    overflow: hidden;
 }
 
 .cpu-canvas-container {

src/opnsense/www/js/widgets/InterfaceStatistics.js

@@ -36,13 +36,6 @@ export default class InterfaceStatistics extends BaseTableWidget {
         this.sortedData = [];
     }
 
-    getGridOptions() {
-        return {
-            // trigger overflow-y:scroll after 650px height
-            sizeToContent: 650,
-        };
-    }
-
     getMarkup() {
         let $container = $('<div id="if-stats-container"></div>');
         let $table = this.createTable('interface-statistics-table', {

src/opnsense/www/js/widgets/ThermalSensors.js

@@ -37,7 +37,7 @@ export default class ThermalSensors extends BaseWidget {
     getMarkup() {
         return $(`
             <div class="${this.id}-chart-container" style="margin-left: 10px; margin-right: 10px;">
-                <div class="canvas-container" style="position: relative;">
+                <div class="canvas-container-noaspectratio" style="position: relative;">
                     <canvas id="${this.id}-chart"></canvas>
                 </div>
             </div>

src/opnsense/www/js/widgets/Traffic.js

@@ -199,11 +199,11 @@ export default class Traffic extends BaseWidget {
         return $(`
             <div class="traffic-charts-container">
                 <h3>${this.translations.trafficin}</h3>
-                <div class="canvas-container">
+                <div class="canvas-container-noaspectratio">
                     <canvas id="traffic-in"></canvas>
                 </div>
                 <h3>${this.translations.trafficout}</h3>
-                <div class="canvas-container">
+                <div class="canvas-container-noaspectratio">
                     <canvas id="traffic-out"></canvas>
                 </div>
             </div>

src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss

@@ -142,8 +142,15 @@ td {
     margin: 5px;
 }
 
+.canvas-container-noaspectratio {
+    position: relative;
+}
+
 .canvas-container {
     position: relative;
+    /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */
+    aspect-ratio: 2;
+    overflow: hidden;
 }
 
 .cpu-canvas-container {

src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss

@@ -142,8 +142,15 @@ td {
     margin: 5px;
 }
 
+.canvas-container-noaspectratio {
+    position: relative;
+}
+
 .canvas-container {
     position: relative;
+    /* ChartJS v4 workaround: https://github.com/chartjs/Chart.js/issues/11005 */
+    aspect-ratio: 2;
+    overflow: hidden;
 }
 
 .cpu-canvas-container {