From d752050a1147325fdfd422d7a8bdd63da1fa16a9 Mon Sep 17 00:00:00 2001
From: Stephan de Wit <stephan.de.wit@deciso.com>
Date: Wed, 22 Jan 2025 13:26:23 +0100
Subject: [PATCH] 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                         | 7 +++++++
 src/opnsense/www/js/widgets/InterfaceStatistics.js         | 7 -------
 src/opnsense/www/js/widgets/ThermalSensors.js              | 2 +-
 src/opnsense/www/js/widgets/Traffic.js                     | 4 ++--
 .../themes/opnsense-dark/assets/stylesheets/dashboard.scss | 7 +++++++
 .../www/themes/opnsense/assets/stylesheets/dashboard.scss  | 7 +++++++
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/opnsense/www/css/dashboard.css b/src/opnsense/www/css/dashboard.css
index 8810c162f..d6b09d26b 100644
--- a/src/opnsense/www/css/dashboard.css
+++ b/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 {
diff --git a/src/opnsense/www/js/widgets/InterfaceStatistics.js b/src/opnsense/www/js/widgets/InterfaceStatistics.js
index 7ae874d30..3b00860eb 100644
--- a/src/opnsense/www/js/widgets/InterfaceStatistics.js
+++ b/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', {
diff --git a/src/opnsense/www/js/widgets/ThermalSensors.js b/src/opnsense/www/js/widgets/ThermalSensors.js
index cb07d81d9..4ea265e57 100644
--- a/src/opnsense/www/js/widgets/ThermalSensors.js
+++ b/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>
diff --git a/src/opnsense/www/js/widgets/Traffic.js b/src/opnsense/www/js/widgets/Traffic.js
index 2456668b0..8f0bb8431 100644
--- a/src/opnsense/www/js/widgets/Traffic.js
+++ b/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>
diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
index a10e71623..a779cd8b3 100644
--- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/dashboard.scss
+++ b/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 {
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
index 66dd0d3fc..ae06e5bb4 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
+++ b/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 {