From e2e0135a753feca96e2de0010b693fc5026cdaf3 Mon Sep 17 00:00:00 2001 From: Nicolas Lempereur Date: Thu, 14 Feb 2019 13:27:01 +0000 Subject: [FIX] web: first and last line chart x label shown The graph view displaying a line chart has had some recent changes in b23a9813202. Now it is of the full width of container but when there is less than 4 labels (thanks to c4937132a38) the first and last labels may be cut because they are by default aligned on the middle with its tick (so for the first label, the half left may be missing, and the last the half right may be missing). With this change, we align labels as expected. This could be done in CSS sheet (with `.nv-axisMin-x > text { text-transform: start!important; }`) but here it is done only in the given instance. opw-1917560 closes #31116 --- addons/web/static/src/js/views/graph/graph_renderer.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'addons/web/static/src/js/views/graph/graph_renderer.js') 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..358426c86b9 100644 --- a/addons/web/static/src/js/views/graph/graph_renderer.js +++ b/addons/web/static/src/js/views/graph/graph_renderer.js @@ -451,6 +451,10 @@ return AbstractRenderer.extend({ // of the tiny margins. if (ticksLabels.length > 3) { $svgContainer.find('svg .nv-x g.nv-axisMaxMin-x > text').hide(); + } else { + // Since the graph is on full container have first and last label in the container + $svgContainer.find('svg .nv-x g.nv-axisMin-x > text').css({'text-anchor': 'start'}); + $svgContainer.find('svg .nv-x g.nv-axisMax-x > text').css({'text-anchor': 'end'}); } return chart; -- cgit v1.2.3 From 4b652ebe8afe05ffdce709c5e85180a1f47d68c1 Mon Sep 17 00:00:00 2001 From: Hiral Bhavsar Date: Mon, 17 Dec 2018 12:54:29 +0000 Subject: [IMP] web: properly display min and max abs when less that 3 abs. In graph line mode, min and max abs are displayed beyond the screen when there are less than 3 abs. This is happening because nvd3 fixes their text-anchor to 'middle'. The present commit fixes correctly their text-anchors to start and end respectively by using the '!important' rule (it seems difficult to do otherwise). Co-authored-by: Mohammed Shekha Related to Task: 1917958 --- addons/web/static/src/js/views/graph/graph_renderer.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'addons/web/static/src/js/views/graph/graph_renderer.js') 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 358426c86b9..2771159ab19 100644 --- a/addons/web/static/src/js/views/graph/graph_renderer.js +++ b/addons/web/static/src/js/views/graph/graph_renderer.js @@ -451,10 +451,6 @@ return AbstractRenderer.extend({ // of the tiny margins. if (ticksLabels.length > 3) { $svgContainer.find('svg .nv-x g.nv-axisMaxMin-x > text').hide(); - } else { - // Since the graph is on full container have first and last label in the container - $svgContainer.find('svg .nv-x g.nv-axisMin-x > text').css({'text-anchor': 'start'}); - $svgContainer.find('svg .nv-x g.nv-axisMax-x > text').css({'text-anchor': 'end'}); } return chart; -- cgit v1.2.3 From bb6aec1ac35fca2e7cb17ff1f194895fdd8021db Mon Sep 17 00:00:00 2001 From: Hiral Bhavsar Date: Mon, 24 Dec 2018 13:37:59 +0000 Subject: [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 Related to Task: 1917958 closes odoo/odoo#30288 --- addons/web/static/src/js/views/graph/graph_renderer.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'addons/web/static/src/js/views/graph/graph_renderer.js') 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 = $('
', {class: 'o_graph_svg_container'}); + var $svgContainer = $('
', { 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); -- cgit v1.2.3