From bb6aec1ac35fca2e7cb17ff1f194895fdd8021db Mon Sep 17 00:00:00 2001
From: Hiral Bhavsar <hbh@odoo.com>
Date: Mon, 24 Dec 2018 13:37:59 +0000
Subject: [PATCH] [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
---
 .../src/js/views/graph/graph_renderer.js      |  7 ++++++-
 addons/web/static/src/scss/graph_view.scss    | 21 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

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;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }