[FIX] spreadsheet: added cumulative mode for odoo line chart

Fixed cumulative attribute not passing from odoo and also added a checkbox to
the odooLineChart side panel, enabling users to easily switch between cumulative
and non-cumulative display modes.
the chart shows cumulative data, offering a comprehensive view of data progression.
Deselection displays regular non-cumulative data.

Task-3420844

closes odoo/odoo#138708

X-original-commit: 90eeb7318a6ac1b0d1a4a41715f3a895f3d5d8b6
Related: odoo/enterprise#48954
Signed-off-by: Lucas Lefèvre (lul) <lul@odoo.com>

addons/spreadsheet/static/src/chart/odoo_chart/odoo_line_chart.js

@@ -21,6 +21,7 @@ export class OdooLineChart extends OdooChart {
         super(definition, sheetId, getters);
         this.verticalAxisPosition = definition.verticalAxisPosition;
         this.stacked = definition.stacked;
+        this.cumulative = definition.cumulative;
     }
 
     getDefinition() {
@@ -28,6 +29,7 @@ export class OdooLineChart extends OdooChart {
             ...super.getDefinition(),
             verticalAxisPosition: this.verticalAxisPosition,
             stacked: this.stacked,
+            cumulative: this.cumulative,
         };
     }
 }
@@ -49,13 +51,21 @@ function createOdooChartRuntime(chart, getters) {
     const locale = getters.getLocale();
     const chartJsConfig = getLineConfiguration(chart, labels, locale);
     const colors = new ChartColors();
-    for (const [index, { label, data }] of datasets.entries()) {
+    for (let [index, { label, data }] of datasets.entries()) {
         const color = colors.next();
         const backgroundRGBA = colorToRGBA(color);
         if (chart.stacked) {
             // use the transparency of Odoo to keep consistency
             backgroundRGBA.a = LINE_FILL_TRANSPARENCY;
         }
+        if (chart.cumulative) {
+            let accumulator = 0;
+            data = data.map((value) => {
+                accumulator += value;
+                return accumulator;
+            });
+        }
+
         const backgroundColor = rgbaToHex(backgroundRGBA);
         const dataset = {
             label,

addons/spreadsheet/static/tests/charts/model/odoo_chart_plugin_test.js

@@ -481,4 +481,40 @@ QUnit.module("spreadsheet > odoo chart plugin", {}, () => {
             assert.deepEqual(chartDataSource.getData(), { datasets: [], labels: [] });
         }
     );
+
+    QUnit.test("Line chart to support cumulative data", async (assert) => {
+        const { model } = await createSpreadsheetWithChart({ type: "odoo_line" });
+        const sheetId = model.getters.getActiveSheetId();
+        const chartId = model.getters.getChartIds(sheetId)[0];
+        const definition = model.getters.getChartDefinition(chartId);
+        await waitForDataSourcesLoaded(model);
+        assert.deepEqual(
+            model.getters.getChartRuntime(chartId).chartJsConfig.data.datasets[0].data,
+            [1, 3]
+        );
+        model.dispatch("UPDATE_CHART", {
+            definition: {
+                ...definition,
+                cumulative: true,
+            },
+            id: chartId,
+            sheetId,
+        });
+        assert.deepEqual(
+            model.getters.getChartRuntime(chartId).chartJsConfig.data.datasets[0].data,
+            [1, 4]
+        );
+        model.dispatch("UPDATE_CHART", {
+            definition: {
+                ...definition,
+                cumulative: false,
+            },
+            id: chartId,
+            sheetId,
+        });
+        assert.deepEqual(
+            model.getters.getChartRuntime(chartId).chartJsConfig.data.datasets[0].data,
+            [1, 3]
+        );
+    });
 });