From 45e9576a4d543c99eec500be05acb76d1d61622b Mon Sep 17 00:00:00 2001
From: "Lopes Marc (loma)" <loma@odoo.com>
Date: Wed, 21 Feb 2024 14:05:05 +0100
Subject: [PATCH] [FIX] survey: fix charts size on results page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Purpose
=======

When you go on any survey results page, you notice charts are smaller
than they used to be on version 16. But there are still readable. The
annoying part is when you click on the `print` btn or press `CTRL + P`,
the charts disappear from both the page and the window preview.

How to fix
==========

- add classes `w-100` and `h-auto` to the canvas elements containing
the charts

Also, we empty the before/after print events in the public widget. They
are no longer useful, but someone may have hooked in those function.
We want to avoid the fix breaks someone else code.

see #135683
task-3667969

closes odoo/odoo#152705

Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
---
 addons/survey/static/src/js/survey_result.js        | 10 +++++++---
 addons/survey/views/survey_templates_statistics.xml |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/addons/survey/static/src/js/survey_result.js b/addons/survey/static/src/js/survey_result.js
index c70280c727e..98d5ad60800 100644
--- a/addons/survey/static/src/js/survey_result.js
+++ b/addons/survey/static/src/js/survey_result.js
@@ -136,6 +136,11 @@ publicWidget.registry.SurveyResultChart = publicWidget.Widget.extend({
         await loadBundle("web.chartjs_lib");
     },
 
+    destroy: function () {
+        window.removeEventListener("afterprint", this._onAfterPrint);
+        window.removeEventListener("beforeprint", this._onBeforePrint);
+    },
+
     // -------------------------------------------------------------------------
     // Handlers
     // -------------------------------------------------------------------------
@@ -145,8 +150,7 @@ publicWidget.registry.SurveyResultChart = publicWidget.Widget.extend({
      * @private
      */
     _onBeforePrint: function () {
-        const printWidth = 630; // Value to fit any graphic into the width of an A4 portrait page
-        this.chart.resize(printWidth, Math.floor(printWidth / this.chart.aspectRatio));
+        // Kept in case someone hooked something here
     },
 
     /**
@@ -154,7 +158,7 @@ publicWidget.registry.SurveyResultChart = publicWidget.Widget.extend({
      * @private
      */
     _onAfterPrint: function () {
-        this.chart.resize();
+        // Kept in case someone hooked something here
     },
 
     // -------------------------------------------------------------------------
diff --git a/addons/survey/views/survey_templates_statistics.xml b/addons/survey/views/survey_templates_statistics.xml
index c5b32868a2f..b394d14664a 100644
--- a/addons/survey/views/survey_templates_statistics.xml
+++ b/addons/survey/views/survey_templates_statistics.xml
@@ -420,7 +420,7 @@
                 t-att-data-graph-data="graph_data"
                 t-att-data-right-answers="list(question_data['right_answers'].mapped('value'))">
                 <!-- canvas element for drawing bar chart -->
-                <canvas class="mx-auto"/>
+                <canvas class="mx-auto w-100 h-auto"/>
             </div>
             <div role="tabpanel" t-att-id="'survey_data_question_%d' % question.id"
                 t-attf-class="tab-pane #{'active' if not question_answered else ''}">
@@ -494,7 +494,7 @@
                 data-graph-type= "multi_bar"
                 t-att-data-graph-data="graph_data">
                 <!-- canvas element for drawing Multibar chart -->
-                <canvas class="mx-auto"/>
+                <canvas class="mx-auto w-100 h-auto"/>
             </div>
             <div role="tabpanel" t-attf-class="tab-pane #{'active' if not question_answered else ''}" t-att-id="'survey_data_question_%d' % question.id">
                 <table class="table table-hover table-sm text-end">