diff options
Diffstat (limited to 'addons/web')
| -rw-r--r-- | addons/web/static/src/js/views/graph/graph_renderer.js | 7 | ||||
| -rw-r--r-- | addons/web/static/src/scss/graph_view.scss | 21 |
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; + } + } + } + } + } } } } |