[FIX] survey: let Chart.js handle the session graph max height automatically

Before this commit, the graph y scale in the survey manager screen was based on
the attendees count. But is some attendees do not answer the question, the bars
never reach the maximum height of the graph, and bars can stay really small.

Example: 10 attendees - 4 answers - A: 1 / B: 1 / C: 2

10 |
   |
   |
   |       |
0  |_|__|__|_
     A  B  C

After this commit, the max height of the graph is not set on the graph. So the
chart lib will handle itself the height and will adapt automatically the bars
height in function of the data given to the graph. Bars will always take full
height space, relatively to the count of the most voted answer.

Example: 10 attendees - 4 answers - A: 1 / B: 1 / C: 2

2  |       |
   |       |
   | |  |  |
0  |_|__|__|_
     A  B  C

Task ID: 2351455

closes odoo/odoo#59777

X-original-commit: ac64af033f0bbaa698aee424a5cab85fd9b967d2
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
David Beguin
2020-10-12 15:18:48 +00:00
committed by Thibault Delavallée
parent b6f6a0dacd
commit 26f4fc093c
2 changed files with 4 additions and 11 deletions
@@ -11,7 +11,6 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
this.questionType = options.questionType;
this.answersValidity = options.answersValidity;
this.hasCorrectAnswers = options.hasCorrectAnswers;
this.attendeesCount = options.attendeesCount || 0;
this.questionStatistics = this._processQuestionStatistics(options.questionStatistics);
this.showInputs = options.showInputs;
this.showAnswers = false;
@@ -35,6 +34,7 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
* that will automatically add animations to show the new number.
*
* @param {Object} questionStatistics object containing chart data (counts / labels / ...)
* @param {Integer} newAttendeesCount: max height of chart, not used anymore (deprecated)
*/
updateChart: function (questionStatistics, newAttendeesCount) {
if (questionStatistics) {
@@ -52,10 +52,6 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
this.chart.data.datasets[0].data[i] = value;
}
if (newAttendeesCount) {
this.chart.config.options.scales.yAxes[0].ticks.max = newAttendeesCount + 1;
}
this.chart.update();
}
},
@@ -102,7 +98,7 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
* (see _getBackgroundColor for details)
* - The ticks are bigger and bolded to be able to see them better on a big screen (projector)
* - We don't use tooltips to keep it as simple as possible
* - We use a "suggestedMax" being the attendeesCount +1
* - We don't set a suggestedMin or Max so that Chart will adapt automatically himself based on the given data
* The '+1' part is a small trick to avoid the datalabels to be clipped in height
* - We use a custom 'datalabels' plugin to be able to display the number value on top of the
* associated bar of the chart.
@@ -140,8 +136,6 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
yAxes: [{
ticks: {
display: false,
suggestedMin: 0,
suggestedMax: this.attendeesCount + 1,
},
gridLines: {
display: false
@@ -167,7 +161,7 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
padding: {
left: 0,
right: 0,
top: 50,
top: 70,
bottom: 0
}
}
@@ -385,7 +385,7 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({
self.attendeesCount = questionResults.attendees_count;
if (self.resultsChart && questionResults.question_statistics_graph) {
self.resultsChart.updateChart(JSON.parse(questionResults.question_statistics_graph), self.attendeesCount);
self.resultsChart.updateChart(JSON.parse(questionResults.question_statistics_graph));
} else if (self.textAnswers) {
self.textAnswers.updateTextAnswers(questionResults.input_line_values);
}
@@ -452,7 +452,6 @@ publicWidget.registry.SurveySessionManage = publicWidget.Widget.extend({
if (!this.isStartScreen && this.showBarChart) {
this.resultsChart = new SurveySessionChart(this, {
attendeesCount: this.attendeesCount,
questionType: this.$el.data('questionType'),
answersValidity: this.$el.data('answersValidity'),
hasCorrectAnswers: this.hasCorrectAnswers,