[FIX] web: prevent crash in line chart

Before this commit:
While user was opening first time line chart graph, at that time undefined
label values were not being converted into undefined string due to misplace
code. So it was giving traceback error

After this commit:
Code has been moved to proper place.

Joint work with msh-odoo

Issue-ID: 1882328

closes odoo/odoo#29306

2 files changed, 35 insertions, 9 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 0517e14c876..5deba9d69bd 100644
--- a/addons/web/static/src/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/js/views/graph/graph_renderer.js
@@ -332,8 +332,8 @@ return AbstractRenderer.extend({
         var self = this;
 
         // Remove Undefined of first GroupBy
-        var graphData = _.filter(this.state.data, function(elem){
-            return elem.labels[0] !== undefined;
+        var graphData = _.filter(this.state.data, function (elem) {
+            return elem.labels[0] !== undefined && elem.labels[0] !== _t("Undefined");
         });
 
         // undefined label value becomes a string 'Undefined' translated
@@ -386,10 +386,9 @@ return AbstractRenderer.extend({
             var tick = 0;
             var serie, tickLabel;
             var identity = function (p) {return p;};
-
-            for (var i = 0; i < this.state.data.length; i++) {
+            for (var i = 0; i < graphData.length; i++) {
                 if (graphData[i].labels[0] !== tickLabel) {
-                    tickLabel = this.state.data[i].labels[0];
+                    tickLabel = graphData[i].labels[0];
                     ticksLabels.push(tickLabel);
                     tick++;
                 }
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index 6dcafc20072..afa3ea9d0ef 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -762,7 +762,7 @@ QUnit.module('Views', {
 
     QUnit.test('Undefined should appear in bar, pie graph but not in line graph', function (assert) {
         assert.expect(4);
-        
+
         var graph = createView({
             View: GraphView,
             model: "foo",
@@ -773,15 +773,42 @@ QUnit.module('Views', {
                 '</graph>',
         });
 
-        assert.strictEqual(graph.$("svg.nvd3-svg:contains('Undefined')").length, 0);
-        assert.strictEqual(graph.$("svg.nvd3-svg:contains('March')").length, 1);
+        assert.strictEqual(graph.$("svg.nvd3-svg .nv-x:contains('Undefined')").length, 0);
+        assert.strictEqual(graph.$("svg.nvd3-svg:contains('January')").length, 1);
 
         graph.$buttons.find('.o_graph_button[data-mode=bar]').click();
-        assert.strictEqual(graph.$("svg.nvd3-svg:contains('Undefined')").length, 1);
+        assert.strictEqual(graph.$("svg.nvd3-svg .nv-x:contains('Undefined')").length, 1);
         assert.strictEqual(graph.$("svg.nvd3-svg:contains('January')").length, 1);
 
         graph.destroy();
     });
+
+    QUnit.test('Undefined should appear in bar, pie graph but not in line graph with multiple groupbys', function (assert) {
+        assert.expect(6);
+
+        var graph = createView({
+            View: GraphView,
+            model: "foo",
+            groupBy:['date', 'color_id'],
+            data: this.data,
+            arch: '<graph string="Partners" type="line">' +
+                        '<field name="bar"/>' +
+                '</graph>',
+        });
+
+        assert.strictEqual(graph.$("svg.nvd3-svg .nv-x:contains('Undefined')").length, 0);
+        assert.strictEqual(graph.$("svg.nvd3-svg:contains('January')").length, 1);
+
+        graph.$buttons.find('.o_graph_button[data-mode=bar]').click();
+        assert.strictEqual(graph.$("svg.nvd3-svg .nv-x:contains('Undefined')").length, 1);
+        assert.strictEqual(graph.$("svg.nvd3-svg:contains('January')").length, 1);
+
+        // Undefined should not appear after switching back to line chart
+        graph.$buttons.find('.o_graph_button[data-mode=line]').click();
+        assert.strictEqual(graph.$("svg.nvd3-svg .nv-x:contains('Undefined')").length, 0);
+        assert.strictEqual(graph.$("svg.nvd3-svg:contains('January')").length, 1);
+        graph.destroy();
+    });
 });
 
 });