[FIX] web: line chart x ticks labels overlapp

Before this commit, we tried to hide some labels depending
of the available size of the graph.
However, it doesn't worked when the graph is updated.

A much simpler solution is to use the scale’s automatic tick
generator implemented in D3.
So, in this commit, we realized that 'tickValues' is unnecessary
because data are passed correctly (see 'svg.datum(data);') and
labels are defined in 'ticksLabels'. There is nothing else to do.

We had to remove the skipped test because 'renderEnd' is not triggered
for line chart. We need to update nv.d3.

We already tried to fix this issue in the following commit:
https://github.com/odoo-dev/odoo/commit/c4937132a38873761fa0ac0b41c983b917cb52f1

Documentation:
https://github.com/d3/d3-axis#axis_tickValues

closes odoo/odoo#27828

2 files changed, 0 insertions, 46 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 f923ade149b..0517e14c876 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -341,7 +341,6 @@ return AbstractRenderer.extend({
 
         var data = [];
         var ticksLabels = [];
-        var tickValues = [];
         var measure = this.state.fields[this.state.measure].string;
         var values;
 
@@ -363,18 +362,6 @@ return AbstractRenderer.extend({
                     key: measure + ' (compare)',
                     color: '#ff7f0e',
                 });
-
-                if (this.state.comparisonData.length > graphData.length) {
-                    tickValues = this.state.comparisonData.map(function (d, i) {
-                        return i;
-                    });
-                }
-            }
-
-            if (!tickValues.length) {
-                tickValues = graphData.map(function (d, i) {
-                    return i;
-                });
             }
 
             for (i = 0; i < graphData.length; i++) {
@@ -403,7 +390,6 @@ return AbstractRenderer.extend({
             for (var i = 0; i < this.state.data.length; i++) {
                 if (graphData[i].labels[0] !== tickLabel) {
                     tickLabel = this.state.data[i].labels[0];
-                    tickValues.push(tick);
                     ticksLabels.push(tickLabel);
                     tick++;
                 }
@@ -438,7 +424,6 @@ return AbstractRenderer.extend({
         });
         chart.forceY([0]);
         chart.xAxis
-            .tickValues(tickValues)
             .tickFormat(function (d) {
                 return ticksLabels[d];
             });
@@ -491,19 +476,6 @@ return AbstractRenderer.extend({
                 $('.nv-y .tick > line').attr('x2', function (i, value) {
                     return Math.abs(value);
                 });
-
-                // We don't need to show all labels
-                $('.o_graph_svg_container svg .nv-x g.tick > text').show();
-                var $ticksText = $('svg .nv-x g.tick:not(.zero) > text');
-                var ticksLength = $ticksText.length;
-                var tickTextMargin = 5;
-                if (ticksLength) {
-                    var tickWidth = $ticksText[0].getBBox().width + tickTextMargin;
-                    var svgWidth = $('.o_graph_svg_container').width();
-                    var keepOneOf = Math.ceil(ticksLength / (svgWidth / tickWidth));
-                    // FIXME: should work with two line charts
-                    $('.o_graph_svg_container svg .nv-x g.tick:not(:nth-child(' + keepOneOf + 'n+1)) > text').hide();
-                }
             })
 
             chartResize(chart);
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index 51efff54427..6dcafc20072 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -168,24 +168,6 @@ QUnit.module('Views', {
         });
     });
 
-    QUnit.skip('displaying line chart data with multiple data point', function (assert) {
-        assert.expect(1);
-
-        var graph = createView({
-            View: GraphView,
-            model: "foo",
-            data: this.data,
-            arch: '<graph type="line">' +
-                        '<field name="date"/>' +
-                '</graph>',
-        });
-
-        assert.strictEqual(graph.$('.nv-x text').text(), "March 2016May 2016",
-            "should contain intermediate x labels only");
-
-        graph.destroy();
-    });
-
     QUnit.test('displaying line chart data with multiple groupbys', function (assert) {
         // this test makes sure the line chart shows all data labels (X axis) when
         // it is grouped by several fields