[FIX] survey: fix charts size on results page

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>
This commit is contained in:
Lopes Marc (loma)
2024-03-06 14:30:36 +00:00
parent 751d555efa
commit 45e9576a4d
2 changed files with 9 additions and 5 deletions
+7 -3
View File
@@ -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
},
// -------------------------------------------------------------------------
@@ -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">