[FIX] web: display empty pie chart for embedded view

Before this commit, every pie chart without any data displayed
the non content helper in the middle of the screen.
This behavior is intended most of the time except for embedded
pie chart (such as in the dashboard views).

Now, an embedded pie chart without any data is rendered and displays
the error message in the middle of it.
We had to render it with nv.d3 to match the size of the other
graph in comparison mode.

Another commit in enterprise will add a test for this fix.
For the moment, embedded empty pie charts are only used on
dasboard views.

2 files changed, 43 insertions, 20 deletions

diff --git a/addons/web/static/src/js/views/abstract_view.js b/addons/web/static/src/js/views/abstract_view.js
index d061349b7c8..7705ee5972e 100644
--- a/addons/web/static/src/js/views/abstract_view.js
+++ b/addons/web/static/src/js/views/abstract_view.js
@@ -108,10 +108,11 @@ var AbstractView = Class.extend({
         // the boolean parameter 'isEmbedded' determines if the view should be considered
         // as a subview. For now this is only used by the graph controller that appends a
         // 'Group By' button beside the 'Measures' button when the graph view is embedded.
-        this.isEmbedded = params.isEmbedded || false;
+        var isEmbedded = params.isEmbedded || false;
 
         this.rendererParams = {
             arch: this.arch,
+            isEmbedded: isEmbedded,
             noContentHelp: params.action && params.action.help,
         };
 
@@ -141,7 +142,7 @@ var AbstractView = Class.extend({
             },
             groupable: this.groupable,
             enableTimeRangeMenu: this.enableTimeRangeMenu,
-            isEmbedded: this.isEmbedded,
+            isEmbedded: isEmbedded,
             controllerID: params.controllerID,
             bannerRoute: this.arch.attrs.banner_route,
         };
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 653281ad214..45683b61bad 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -34,6 +34,7 @@ return AbstractRenderer.extend({
     init: function (parent, state, params) {
         this._super.apply(this, arguments);
         this.isComparison = !!state.comparisonData;
+        this.isEmbedded = params.isEmbedded;
         this.stacked = this.isComparison ? false : params.stacked;
         this.title = params.title || '';
     },
@@ -94,7 +95,7 @@ return AbstractRenderer.extend({
                 title: _t('Invalid mode for chart'),
                 message: _t('Cannot render chart with mode : ') + this.state.mode
             });
-        } else if (!this.state.data.length) {
+        } else if (!this.state.data.length &&  this.state.mode !== 'pie') {
             this.$el.empty();
             this.$el.append(qweb.render('GraphView.error', {
                 title: _t("No data to display"),
@@ -252,24 +253,33 @@ return AbstractRenderer.extend({
             return;
         }
         if (all_zero) {
-            this.$el.append(qweb.render('GraphView.error', {
-                title: _t("Invalid data"),
-                description: _t("Pie chart cannot display all zero numbers.. " +
-                    "Try to change your domain to display positive results"),
-            }));
-            return;
-        }
-        if (this.state.groupedBy.length) {
-            data = stateData.map(function (datapt) {
-                return {x:datapt.labels.join("/"), y: datapt.value};
+            if (this.isEmbedded) {
+                // add fake data to display an empty pie chart
+                data = [{
+                    x : "No data" ,
+                    y : 1
+                }];
+            } else {
+                this.$el.append(qweb.render('GraphView.error', {
+                    title: _t("Invalid data"),
+                    description: _t("Pie chart cannot display all zero numbers.. " +
+                        "Try to change your domain to display positive results"),
+                }));
+                return;
+            }
+        } else {
+            if (this.state.groupedBy.length) {
+                data = stateData.map(function (datapt) {
+                    return {x:datapt.labels.join("/"), y: datapt.value};
+                });
+            }
+
+            // We only keep groups where count > 0
+            data  = _.filter(data, function (elem, index) {
+                return stateData[index].count > 0;
             });
         }
 
-        // We only keep groups where count > 0
-        data  = _.filter(data, function (elem, index) {
-            return stateData[index].count > 0;
-        });
-
         var $svgContainer = $('<div/>', {class: 'o_graph_svg_container'});
         this.$el.append($svgContainer);
         var svg = d3.select($svgContainer[0]).append('svg');
@@ -277,15 +287,27 @@ return AbstractRenderer.extend({
 
         svg.transition().duration(100);
 
+        var color;
         var legend_right = config.device.size_class > config.device.SIZES.VSM;
+        if (all_zero) {
+            color = (['lightgrey']);
+            svg.append("text")
+                .attr("text-anchor", "middle")
+                .attr("x", "50%")
+                .attr("y", "50%")
+                .text(_t("No data to display"));
+        } else {
+            color = d3.scale.category10().range();
+        }
 
         var chart = nv.models.pieChart().labelType('percent');
         chart.options({
           delay: 250,
-          showLegend: legend_right || _.size(data) <= MAX_LEGEND_LENGTH,
+          showLegend: !all_zero && (legend_right || _.size(data) <= MAX_LEGEND_LENGTH),
           legendPosition: legend_right ? 'right' : 'top',
           transition: 100,
-          color: d3.scale.category10().range(),
+          color: color,
+          showLabels: all_zero ? false: true,
         });
 
         chart(svg);