From 22133a01becd01e6d8e85ab17ed192baf640f811 Mon Sep 17 00:00:00 2001
From: "Dardenne Florent (dafl)" <dafl@odoo.com>
Date: Wed, 3 Aug 2022 12:12:08 +0000
Subject: [PATCH] [IMP] web: add cumulative line chart

The cumulative option on line chart is useful for displaying
cumulative information graphically.

closes odoo/odoo#97394

Task-id: 2146487
Signed-off-by: FrancoisGe <fge@odoo.com>
---
 .../src/views/graph/graph_arch_parser.js      |  3 ++
 .../src/views/graph/graph_controller.js       |  5 ++
 .../src/views/graph/graph_controller.xml      |  4 ++
 .../web/static/src/views/graph/graph_model.js |  2 +-
 .../static/src/views/graph/graph_renderer.js  |  9 +++-
 .../web/static/src/views/graph/graph_view.js  |  1 +
 .../static/tests/views/graph_view_tests.js    | 50 +++++++++++++++++++
 7 files changed, 72 insertions(+), 2 deletions(-)

diff --git a/addons/web/static/src/views/graph/graph_arch_parser.js b/addons/web/static/src/views/graph/graph_arch_parser.js
index caa1e021090..d01f91d4d82 100644
--- a/addons/web/static/src/views/graph/graph_arch_parser.js
+++ b/addons/web/static/src/views/graph/graph_arch_parser.js
@@ -22,6 +22,9 @@ export class GraphArchParser extends XMLParser {
                     if (node.hasAttribute("stacked")) {
                         archInfo.stacked = archParseBoolean(node.getAttribute("stacked"));
                     }
+                    if (node.hasAttribute("cumulated")) {
+                        archInfo.cumulated = archParseBoolean(node.getAttribute("cumulated"));
+                    }
                     const mode = node.getAttribute("type");
                     if (mode && MODES.includes(mode)) {
                         archInfo.mode = mode;
diff --git a/addons/web/static/src/views/graph/graph_controller.js b/addons/web/static/src/views/graph/graph_controller.js
index 0e1ddd3dd4c..c77923e058d 100644
--- a/addons/web/static/src/views/graph/graph_controller.js
+++ b/addons/web/static/src/views/graph/graph_controller.js
@@ -112,6 +112,11 @@ export class GraphController extends Component {
         const { stacked } = this.model.metaData;
         this.model.updateMetaData({ stacked: !stacked });
     }
+
+    toggleCumulated() {
+        const { cumulated } = this.model.metaData;
+        this.model.updateMetaData({ cumulated: !cumulated });
+    }
 }
 
 GraphController.template = "web.GraphView";
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index ec97f5b03c6..75049f4574b 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -38,6 +38,10 @@
                 t-on-click="toggleStacked"
                 t-att-class="{ active: model.metaData.stacked }"
             />
+            <button class="btn btn-secondary fa fa-signal o_graph_button" data-tooltip="Cumulative" aria-label="Cumulative"
+                t-on-click="toggleCumulated"
+                t-att-class="{ active: model.metaData.cumulated }"
+            />
         </div>
         <div t-if="model.metaData.mode !== 'pie' and model.metaData.domains.length === 1" class="btn-group" role="toolbar" aria-label="Sort graph" name="toggleOrderToolbar">
             <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
diff --git a/addons/web/static/src/views/graph/graph_model.js b/addons/web/static/src/views/graph/graph_model.js
index 04acdc7ce88..9f9f7744667 100644
--- a/addons/web/static/src/views/graph/graph_model.js
+++ b/addons/web/static/src/views/graph/graph_model.js
@@ -125,7 +125,7 @@ export class GraphModel extends Model {
 
     /**
      * Only supposed to be called to change one or several parameters among
-     * "measure", "mode", "order", and "stacked".
+     * "measure", "mode", "order", "stacked" and "cumulated".
      * @param {Object} params
      */
     async updateMetaData(params) {
diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js
index 4709dee3ea6..01d596396d9 100644
--- a/addons/web/static/src/views/graph/graph_renderer.js
+++ b/addons/web/static/src/views/graph/graph_renderer.js
@@ -318,7 +318,7 @@ export class GraphRenderer extends Component {
      * @returns {Object}
      */
     getLineChartData() {
-        const { groupBy, domains, stacked } = this.model.metaData;
+        const { groupBy, domains, stacked, cumulated } = this.model.metaData;
         const data = this.model.data;
         for (let index = 0; index < data.datasets.length; ++index) {
             const dataset = data.datasets[index];
@@ -348,6 +348,13 @@ export class GraphRenderer extends Component {
             if (stacked) {
                 dataset.backgroundColor = hexToRGBA(dataset.borderColor, 0.4);
             }
+            if (cumulated) {
+                let accumulator = 0;
+                dataset.data = dataset.data.map((value) => {
+                    accumulator += value;
+                    return accumulator;
+                });
+            }
         }
         if (data.datasets.length === 1 && data.datasets[0].originIndex === 0) {
             const dataset = data.datasets[0];
diff --git a/addons/web/static/src/views/graph/graph_view.js b/addons/web/static/src/views/graph/graph_view.js
index 9d93e085ab8..19f5170fa4b 100644
--- a/addons/web/static/src/views/graph/graph_view.js
+++ b/addons/web/static/src/views/graph/graph_view.js
@@ -43,6 +43,7 @@ export const graphView = {
                 order: archInfo.order || null,
                 resModel: resModel,
                 stacked: "stacked" in archInfo ? archInfo.stacked : true,
+                cumulated: archInfo.cumulated || false,
                 title: archInfo.title || _lt("Untitled"),
             };
         }
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index a97c4cca226..74862fc4df2 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -1024,6 +1024,56 @@ QUnit.module("Views", (hooks) => {
         checkDatasets(assert, graph, keysToEvaluate, expectedDatasets);
     });
 
+    QUnit.test("Cumulative prop and default line chart", async function (assert) {
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="line" stacked="0">
+                    <field name="bar"/>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+
+        assert.strictEqual(graph.model.metaData.mode, "line", "should be in line chart mode.");
+        assert.strictEqual(
+            graph.model.metaData.cumulated,
+            false,
+            "should not be cumulative by default."
+        );
+
+        await click(target, '[data-tooltip="Cumulative"]');
+        assert.strictEqual(graph.model.metaData.cumulated, true, "should be in cumulative");
+        const expectedDatasets = [
+            {
+                data: [1, 4],
+            },
+            {
+                data: [4, 4],
+            },
+        ];
+        checkDatasets(assert, graph, ["data"], expectedDatasets);
+    });
+
+    QUnit.test("Default cumulative prop", async function (assert) {
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="line" stacked="0" cumulated="1">
+                    <field name="bar"/>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+
+        assert.strictEqual(graph.model.metaData.mode, "line", "should be in line chart mode.");
+        assert.strictEqual(graph.model.metaData.cumulated, true, "should be in cumulative");
+    });
+
     QUnit.test("line chart rendering (no groupBy, several domains)", async function (assert) {
         assert.expect(7);
         const graph = await makeView({