[FIX] web: several columns in line chart tooltips for large data

Currently tooltip goes out off the screen when the
graph view (in line mode) presents a large number
of groups.
The present commit splits the tooltip content in
three columns when the number of groups exceeds
20. This split is not done in mobile mode because
it is not an appropriate in that situation.

Co-authored-by: Mohammed Shekha <msh@openerp.com>

Related to Task: 1917958

closes odoo/odoo#30288

2 files changed, 27 insertions, 1 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 2771159ab19..ca295119be6 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -21,6 +21,7 @@ var CHART_TYPES = ['pie', 'bar', 'line'];
 
 // hide top legend when too many items for device size
 var MAX_LEGEND_LENGTH = 25 * (Math.max(1, config.device.size_class));
+var SPLIT_THRESHOLD = config.device.isMobile ? Infinity : 20;
 
 return AbstractRenderer.extend({
     className: "o_graph_container",
@@ -412,7 +413,11 @@ return AbstractRenderer.extend({
             }
         }
 
-        var $svgContainer = $('<div/>', {class: 'o_graph_svg_container'});
+        var $svgContainer = $('<div/>', { class: 'o_graph_svg_container'});
+        // Split the tooltip into columns for large data because some portion goes out off the screen.
+        if (data.length >= SPLIT_THRESHOLD) {
+            $svgContainer.addClass('o_tooltip_split_in_columns');
+        }
         this.$el.append($svgContainer);
         var svg = d3.select($svgContainer[0]).append('svg');
         svg.datum(data);
diff --git a/addons/web/static/src/scss/graph_view.scss b/addons/web/static/src/scss/graph_view.scss
index f78df83cc83..7e7852a4d7f 100644
--- a/addons/web/static/src/scss/graph_view.scss
+++ b/addons/web/static/src/scss/graph_view.scss
@@ -33,6 +33,27 @@
                     }
                 }
             }
+
+            /* Use less than 50% of the screen area for tooltip and show legends in 3 column of 33% each */
+            &.o_tooltip_split_in_columns .nvtooltip {
+                max-width: 48%;
+                tbody {
+                    display: flex;
+                    flex-flow: wrap;
+                    tr {
+                        width: 33%;
+                        td {
+                            display: inline-block;
+                            &.key {
+                                min-width: 160px;
+                                max-width: 70%;
+                                overflow-x: hidden;
+                                text-overflow: ellipsis;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }