[FIX] web: graph: line chart color

Before this commit, in a line chart in comparison mode with one groupby,
if only data comming from the comparison period were displayed, the line
(with red border) would be filled incorrectly with a blue color while it
was not supposed to be filled at all (the blue filling is supposed to be
reserved to data comming from the reference period).

closes odoo/odoo#82577

Forward-port-of: https://github.com/odoo/odoo/commit/6747d982a56af0525cf52732c43351081831d32f
X-original-commit: 519e205a4b34fdecfe6b938ff4a6e93a02c2bda2
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

addons/web/static/src/legacy/js/views/graph/graph_renderer.js

@@ -165,7 +165,7 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
                 dataset.pointBackgroundColor = dataset.borderColor;
                 dataset.pointBorderColor = "rgba(0,0,0,0.2)";
             }
-            if (data.datasets.length === 1) {
+            if (data.datasets.length === 1 && data.datasets[0].originIndex === 0) {
                 const dataset = data.datasets[0];
                 dataset.fill = "origin";
                 dataset.backgroundColor = hexToRGBA(COLORS[0], 0.4);

addons/web/static/src/views/graph/graph_renderer.js

@@ -344,7 +344,7 @@ export class GraphRenderer extends Component {
             dataset.pointBackgroundColor = dataset.borderColor;
             dataset.pointBorderColor = "rgba(0,0,0,0.2)";
         }
-        if (data.datasets.length === 1) {
+        if (data.datasets.length === 1 && data.datasets[0].originIndex === 0) {
             const dataset = data.datasets[0];
             dataset.fill = "origin";
             dataset.backgroundColor = hexToRGBA(getColor(0), 0.4);

addons/web/static/tests/legacy/views/graph_tests.js

@@ -459,6 +459,43 @@ QUnit.module('Views', {
         graph.destroy();
     });
 
+    QUnit.test('no filling color for period of comparison', async function (assert) {
+        assert.expect(1);
+
+        const unpatchDate = patchDate(2020, 4, 19, 1, 0, 0);
+
+        this.data.foo.records.forEach((r) => {
+            if (r.date) {
+                r.date = r.date.replace(/\d\d\d\d/, "2019");
+            }
+        });
+
+        const graph = await createView({
+            View: GraphView,
+            model: "foo",
+            data: this.data,
+            context: { search_default_date_filter: 1, },
+            arch: '<graph type="line">' +
+                        '<field name="product_id"/>' +
+                '</graph>',
+            archs: {
+                'foo,false,search': `
+                    <search>
+                        <filter name="date_filter" domain="[]" date="date" default_period="this_year"/>
+                    </search>
+                `,
+            },
+        });
+
+        await cpHelpers.toggleComparisonMenu(graph.el);
+        await cpHelpers.toggleMenuItem(graph.el, 'Date: Previous period');
+
+        checkDatasets(assert, graph, ["data", "backgroundColor"], { data: [4, 2] });
+
+        unpatchDate();
+        graph.destroy();
+    });
+
     QUnit.test('no content helper after update', async function (assert) {
         assert.expect(6);
 

addons/web/static/tests/views/graph_view_tests.js

@@ -3549,4 +3549,40 @@ QUnit.module("Views", (hooks) => {
 
         checkLabels(assert, graph, ['', '']);
     });
+
+    QUnit.test('no filling color for period of comparison', async function (assert) {
+        assert.expect(1);
+
+        patchDate(2020, 4, 19, 1, 0, 0);
+
+        serverData.models.foo.records.forEach((r) => {
+            if (r.date) {
+                r.date = r.date.replace(/\d\d\d\d/, "2019");
+            }
+        });
+
+        const graph = await makeView({
+            type: "graph",
+            resModel: "foo",
+            serverData,
+            context: { search_default_date_filter: 1, },
+            arch: `
+                <graph type="line">
+                    <field name="product_id"/>
+                </graph>
+            `,
+            searchViewArch: `
+                <search>
+                    <filter name="date_filter" domain="[]" date="date" default_period="this_year"/>
+                </search>
+            `,
+        });
+
+        await toggleComparisonMenu(graph);
+        await toggleMenuItem(graph, 'Date: Previous period');
+
+        checkDatasets(assert, graph, "backgroundColor", {
+            "backgroundColor": undefined,
+        });
+    });
 });