[IMP] web: graph legend tweaks when many item

The legend of the graph when there was too much items in it could
prevent user to see a part or even the whole graph.

On non-mobile device, move the Pie Chart legend to the right, thus if it
overflows the char is still visible and we can toggle the seen top
legend item.

Otherway, the legend on top is hidden when :

- there is more than 25 legend items and the device has width < 768
- there is more than 50 legend items and the device has 768 <= width < 992
- there is more than 75 legend items and the device has 992 <= width < 1200
- there is more than 100 legend items and the device has 1200 <= width

Since this is based only on the number of legend items but legend items
could have variable name lengths, there will still be edge case where
the legend obstruct the graphical data display.

In this situation the current way to cope with this further filter the
displayed data.

opw-653445

1 files changed, 10 insertions, 2 deletions

diff --git a/addons/web/static/src/js/views/graph_widget.js b/addons/web/static/src/js/views/graph_widget.js
index 989db33c289..340050eb0dc 100644
--- a/addons/web/static/src/js/views/graph_widget.js
+++ b/addons/web/static/src/js/views/graph_widget.js
@@ -1,6 +1,7 @@
 odoo.define('web.GraphWidget', function (require) {
 "use strict";
 
+var config = require('web.config');
 var core = require('web.core');
 var Model = require('web.DataModel');
 var Widget = require('web.Widget');
@@ -8,6 +9,9 @@ var Widget = require('web.Widget');
 var _t = core._t;
 var QWeb = core.qweb;
 
+// hide top legend when too many item for device size
+var MAX_LEGEND_LENGTH = 25 * (1 + config.device.size_class);
+
 return Widget.extend({
     init: function (parent, model, options) {
         this._super(parent);
@@ -159,7 +163,7 @@ return Widget.extend({
         chart.options({
           delay: 250,
           transition: 10,
-          showLegend: true,
+          showLegend: _.size(data) <= MAX_LEGEND_LENGTH,
           showXAxis: true,
           showYAxis: true,
           rightAlignYAxis: false,
@@ -209,9 +213,13 @@ return Widget.extend({
 
         svg.transition().duration(100);
 
+        var legend_right = config.device.size_class > config.device.SIZES.XS;
+
         var chart = nv.models.pieChart();
         chart.options({
           delay: 250,
+          showLegend: legend_right || _.size(data) <= MAX_LEGEND_LENGTH,
+          legendPosition: legend_right ? 'right' : 'top',
           transition: 100,
           color: d3.scale.category10().range(),
         });
@@ -285,7 +293,7 @@ return Widget.extend({
         chart.options({
           margin: {left: 50, right: 50},
           useInteractiveGuideline: true,
-          showLegend: true,
+          showLegend: _.size(data) <= MAX_LEGEND_LENGTH,
           showXAxis: true,
           showYAxis: true,
         });