[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).

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,
+            }));
         }
     },
     /**

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__';

addons/web/static/src/js/widgets/pie_chart.js

@@ -41,7 +41,6 @@ var PieChart = Widget.extend({
             withControlPanel: false,
             isEmbedded: true,
             mode: 'pie',
-            title: modifiers.title || modifiers.measure || '',
         };
 
         this.viewInfo = {

addons/web/static/src/xml/pie_chart.xml

@@ -1,7 +1,7 @@
 <template>
 
 <t t-name="web.PieChart">
-    <graph type="pie">
+    <graph type="pie" t-att-title="modifiers.title || modifiers.measure">
         <field t-att-name="modifiers.groupby.split(':')[0]" t-att-interval="modifiers.groupby.split(':')[1]"/>
         <field t-if="modifiers.measure" t-att-name="modifiers.measure" type="measure"/>
     </graph>

addons/web/static/tests/views/graph_tests.js

@@ -106,6 +106,21 @@ QUnit.module('Views', {
         graph.destroy();
     });
 
+    QUnit.test('title attribute', function (assert) {
+        assert.expect(1);
+
+        var graph = createView({
+            View: GraphView,
+            model: "foo",
+            data: this.data,
+            arch: '<graph title="Partners" type="pie">' +
+                        '<field name="bar"/>' +
+                '</graph>',
+        });
+        assert.strictEqual(graph.$('label').text(), "Partners", "should have 'Partners as title'");
+        graph.destroy();
+    });
+
     QUnit.test('switching mode', function (assert) {
         assert.expect(6);
 

doc/reference/views.rst

@@ -876,6 +876,9 @@ following attributes:
   the name of a field to use in the view. If used for grouping (rather
   than aggregating)
 
+``title`` (optional)
+  string displayed on the top of the graph.
+
 ``type``
   indicates whether the field should be used as a grouping criteria or as an
   aggregated value within a group. Possible values are: