[FIX] line chart: show tick labels on x axes

Before this commit all x axis labels were not displayed because
ticksLabels was empty.

Now, we show all labels except the first one and the last one
because they are truncate.

We need at least two intermediate labels to know the scale and
the direction.
So, we only remove labels when there is more than 3 data points.

2 files changed, 32 insertions, 5 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 b18e508d420..05852722083 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -365,7 +365,7 @@ return AbstractRenderer.extend({
                 }
             }
 
-            if (!tickValues) {
+            if (!tickValues.length) {
                 tickValues = graphData.map(function (d, i) {
                     return i;
                 });
@@ -415,6 +415,13 @@ return AbstractRenderer.extend({
             }
         }
 
+        // Delete first and last label because there is no enough space because
+        // of the tiny margins.
+        if (ticksLabels.length > 3) {
+            ticksLabels[0] = [];
+            ticksLabels[ticksLabels.length - 1] = [];
+        }
+
         var $svgContainer = $('<div/>', {class: 'o_graph_svg_container'});
         this.$el.append($svgContainer);
         var svg = d3.select($svgContainer[0]).append('svg');
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index 595ed3f31dd..2d46cd4411c 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -26,6 +26,7 @@ QUnit.module('Views', {
                     {id: 5, foo: 4, bar: false, product_id: 41, date: "2016-05-01"},
                     {id: 6, foo: 63, bar: false, product_id: 41},
                     {id: 7, foo: 42, bar: false, product_id: 41},
+                    {id: 8, foo: 48, bar: false, product_id: 41, date: "2016-04-01"},
                 ]
             },
             product: {
@@ -84,8 +85,8 @@ QUnit.module('Views', {
             // So, instead we will do some white box testing.
             assert.strictEqual(graph.model.chart.data[0].value, 3,
                 "should have first datapoint with value 3");
-            assert.strictEqual(graph.model.chart.data[1].value, 4,
-                "should have first datapoint with value 4");
+            assert.strictEqual(graph.model.chart.data[1].value, 5,
+                "should have first datapoint with value 5");
             graph.destroy();
             done();
         });
@@ -167,6 +168,24 @@ QUnit.module('Views', {
         });
     });
 
+    QUnit.test('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
@@ -731,7 +750,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('Undefined should appear in bar, pie graph but not in line graph', function (assert) {
-        assert.expect(4);
+        assert.expect(5);
         
         var graph = createView({
             View: GraphView,
@@ -744,7 +763,8 @@ QUnit.module('Views', {
         });
 
         assert.strictEqual(graph.$("svg.nvd3-svg:contains('Undefined')").length, 0);
-        assert.strictEqual(graph.$("svg.nvd3-svg:contains('January')").length, 1);
+        assert.strictEqual(graph.$("svg.nvd3-svg:contains('January')").length, 0);
+        assert.strictEqual(graph.$("svg.nvd3-svg:contains('March')").length, 1);
 
         graph.$buttons.find('.o_graph_button[data-mode=bar]').click();
         assert.strictEqual(graph.$("svg.nvd3-svg:contains('Undefined')").length, 1);