[FIX] web: graph_renderer: show graph title

Since odoo/enterprise@e3b0d2a, the title wasn't set anymore.

This logic is now moved in the graph renderer to be able to
set a title in every graphs.

For now, we only use the title attribute for pie charts embedded
in dashboard views.
Additional tests has been added in 'web_dashboard' (enterprise).

2 files changed, 27 insertions, 6 deletions

diff --git a/addons/web/static/src/js/views/graph/graph_renderer.js b/addons/web/static/src/js/views/graph/graph_renderer.js
index 5942da9ed97..653281ad214 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -35,6 +35,7 @@ return AbstractRenderer.extend({
         this._super.apply(this, arguments);
         this.isComparison = !!state.comparisonData;
         this.stacked = this.isComparison ? false : params.stacked;
+        this.title = params.title || '';
     },
     /**
      * @override
@@ -446,20 +447,39 @@ return AbstractRenderer.extend({
                 chart.tooltip.chartContainer(self.$('.o_graph_svg_container').last()[0]);
             }
         }
-        var chart1 = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.data);
+        var chart = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.data);
 
         // FIXME: When 'orient' is right for Y axis, horizontal lines aren't displayed correctly
-        chart1.dispatch.on('renderEnd', function () {
+        chart.dispatch.on('renderEnd', function () {
             $('.nv-y .tick > line').attr('x2', function (i, value) {
                 return Math.abs(value);
             });
         })
 
-        chartResize(chart1);
+        chartResize(chart);
+
         if (this.state.mode === 'pie' && this.isComparison) {
-            var chart2 = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.comparisonData);
-            chartResize(chart2);
-            chart1.update();
+            // Render graph title
+            var timeRangeMenuData = this.state.context.timeRangeMenuData;
+            var chartTitle = this.title + ' (' + timeRangeMenuData.timeRangeDescription + ')';
+            this.$('.o_graph_svg_container').last().prepend($('<label/>', {
+                text: chartTitle,
+            }));
+
+            // Instantiate comparison graph
+            var comparisonChart = this['_render' + _.str.capitalize(this.state.mode) + 'Chart'](this.state.comparisonData);
+            // Render comparison graph title
+            var comparisonChartTitle = this.title + ' (' + timeRangeMenuData.comparisonTimeRangeDescription + ')';
+            this.$('.o_graph_svg_container').last().prepend($('<label/>', {
+                text: comparisonChartTitle,
+            }));
+            chartResize(comparisonChart);
+
+            chart.update();
+        } else if (this.title) {
+            this.$('.o_graph_svg_container').last().prepend($('<label/>', {
+                text: this.title,
+            }));
         }
     },
     /**
diff --git a/addons/web/static/src/js/views/graph/graph_view.js b/addons/web/static/src/js/views/graph/graph_view.js
index 23ab4cecd01..a55da16c6da 100644
--- a/addons/web/static/src/js/views/graph/graph_view.js
+++ b/addons/web/static/src/js/views/graph/graph_view.js
@@ -81,6 +81,7 @@ var GraphView = AbstractView.extend({
         this.controllerParams.measures = measures;
         this.controllerParams.groupableFields = groupableFields;
         this.rendererParams.stacked = this.arch.attrs.stacked !== "False";
+        this.rendererParams.title = this.arch.attrs.title; // TODO: use attrs.string instead
 
         this.loadParams.mode = this.arch.attrs.type || 'bar';
         this.loadParams.measure = measure || '__count__';