[IMP] LineChart: cumulative chart

This commit introduces a new feature to the LineChart that allows users
to switch between cumulative and non-cumulative data modes using
a checkbox in the side panel.
When the cumulative mode is selected, the chart shows cumulative data,
providing a comprehensive view of data progression.

Task-3420844

closes #2851

X-original-commit: 1f43919
Signed-off-by: Adrien Minne (adrm) <adrm@odoo.com>
Signed-off-by: Aashish Thakur (aath) <aath@odoo.com>

Author: aath-odoo

src/components/side_panel/chart/line_chart/line_chart_config_panel.ts

@@ -29,4 +29,10 @@ export class LineConfigPanel extends LineBarPieConfigPanel {
       aggregated: ev.target.checked,
     });
   }
+
+  onUpdateCumulative(ev) {
+    this.props.updateChart(this.props.figureId, {
+      cumulative: ev.target.checked,
+    });
+  }
 }

src/components/side_panel/chart/line_chart/line_chart_config_panel.xml

@@ -14,6 +14,18 @@
             Stacked linechart
           </label>
         </div>
+        <div class="o-checkbox">
+          <label>
+            <input
+              type="checkbox"
+              name="cumulative"
+              t-att-checked="props.definition.cumulative"
+              t-on-change="onUpdateCumulative"
+              class="align-middle"
+            />
+            Cumulative data
+          </label>
+        </div>
       </div>
       <div class="o-section o-data-series">
         <div class="o-section-title">Data Series</div>

src/helpers/figures/charts/chart_factory.ts

@@ -176,6 +176,7 @@ export function getSmartChartDefinition(zone: Zone, getters: Getters): ChartDefi
       labelsAsText: false,
       stacked: false,
       aggregated: false,
+      cumulative: false,
       labelRange: labelRangeXc,
       type: "line",
       dataSetsHaveTitle,

src/helpers/figures/charts/line_chart.ts

@@ -66,6 +66,7 @@ export class LineChart extends AbstractChart {
   readonly aggregated?: boolean;
   readonly type = "line";
   readonly dataSetsHaveTitle: boolean;
+  readonly cumulative: boolean;
 
   constructor(definition: LineChartDefinition, sheetId: UID, getters: CoreGetters) {
     super(definition, sheetId, getters);
@@ -83,6 +84,7 @@ export class LineChart extends AbstractChart {
     this.stacked = definition.stacked;
     this.aggregated = definition.aggregated;
     this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+    this.cumulative = definition.cumulative;
   }
 
   static validateChartDefinition(
@@ -112,6 +114,7 @@ export class LineChart extends AbstractChart {
       labelRange: context.auxiliaryRange || undefined,
       stacked: false,
       aggregated: false,
+      cumulative: false,
     };
   }
 
@@ -140,6 +143,7 @@ export class LineChart extends AbstractChart {
       labelsAsText: this.labelsAsText,
       stacked: this.stacked,
       aggregated: this.aggregated,
+      cumulative: this.cumulative,
     };
   }
 
@@ -396,6 +400,17 @@ export function createLineChartRuntime(chart: LineChart, getters: Getters): Line
     if (chart.stacked) {
       backgroundRGBA.a = LINE_FILL_TRANSPARENCY;
     }
+    if (chart.cumulative) {
+      let accumulator = 0;
+      data = data.map((value) => {
+        if (!isNaN(value)) {
+          accumulator += parseFloat(value);
+          return accumulator;
+        }
+        return value;
+      });
+    }
+
     const backgroundColor = rgbaToHex(backgroundRGBA);
 
     const dataset: ChartDataSets = {

src/types/chart/chart.ts

@@ -57,6 +57,7 @@ export interface ExcelChartDefinition {
   readonly verticalAxisPosition: VerticalAxisPosition;
   readonly legendPosition: LegendPosition;
   readonly stacked?: boolean;
+  readonly cumulative?: boolean;
 }
 
 export interface ChartCreationContext {

src/types/chart/line_chart.ts

@@ -14,6 +14,7 @@ export interface LineChartDefinition {
   readonly labelsAsText: boolean;
   readonly stacked: boolean;
   readonly aggregated?: boolean;
+  readonly cumulative: boolean;
 }
 
 export type LineChartRuntime = {

src/xlsx/conversion/figure_conversion.ts

@@ -93,6 +93,7 @@ function convertChartData(chartData: ExcelChartDefinition): ChartDefinition | un
     legendPosition: chartData.legendPosition,
     stacked: chartData.stacked || false,
     aggregated: false,
+    cumulative: chartData.cumulative || false,
     labelsAsText: false,
   };
 }

tests/collaborative/collaborative_history.test.ts

@@ -458,6 +458,7 @@ describe("Collaborative local history", () => {
                 verticalAxisPosition: "left",
                 title: "Line",
                 stacked: false,
+                cumulative: false,
               },
             },
           ],

tests/menu_item_insert_chart.test.ts

@@ -391,6 +391,7 @@ describe("Insert chart menu item", () => {
     payload.definition.dataSetsHaveTitle = true;
     payload.definition.labelRange = "C1:C4";
     payload.definition.type = "line";
+    payload.definition.cumulative = false;
     payload.definition.labelsAsText = false;
     expect(dispatchSpy).toHaveBeenCalledWith("CREATE_CHART", payload);
   });
@@ -404,6 +405,7 @@ describe("Insert chart menu item", () => {
     payload.definition.dataSetsHaveTitle = true;
     payload.definition.labelRange = "C1:C4";
     payload.definition.type = "line";
+    payload.definition.cumulative = false;
     payload.definition.labelsAsText = false;
     expect(dispatchSpy).toHaveBeenCalledWith("CREATE_CHART", payload);
   });
@@ -426,6 +428,7 @@ describe("Insert chart menu item", () => {
     payload.definition.labelRange = "F1:F5";
     payload.definition.legendPosition = "top";
     payload.definition.type = "line";
+    payload.definition.cumulative = false;
     payload.definition.labelsAsText = false;
     expect(dispatchSpy).toHaveBeenCalledWith("CREATE_CHART", payload);
   });
@@ -480,6 +483,7 @@ describe("Insert chart menu item", () => {
     payload.definition.dataSets = ["L1:L3"];
     payload.definition.labelRange = "K1:K3";
     payload.definition.type = "line";
+    payload.definition.cumulative = false;
     payload.definition.labelsAsText = false;
     expect(dispatchSpy).toHaveBeenCalledWith("CREATE_CHART", payload);
     expect(zoneToXc(model.getters.getSelectedZone())).toBe("K1:L3");
@@ -499,6 +503,7 @@ describe("Insert chart menu item", () => {
     payload.definition.dataSets = ["L1:L3"];
     payload.definition.labelRange = "K1:K3";
     payload.definition.type = "line";
+    payload.definition.cumulative = false;
     payload.definition.labelsAsText = false;
     expect(dispatchSpy).toHaveBeenCalledWith("CREATE_CHART", payload);
     expect(zoneToXc(model.getters.getSelectedZone())).toBe("K1:L3");

tests/plugins/chart/basic_chart.test.ts

@@ -1963,6 +1963,36 @@ describe("Chart evaluation", () => {
     ).toBe("#REF");
   });
 });
+
+describe("Cumulative Data line chart", () => {
+  test("Chart to display cumulative data", () => {
+    createChart(
+      model,
+      {
+        dataSets: ["B2:B8"],
+        dataSetsHaveTitle: true,
+        labelRange: "A2",
+        type: "line",
+        cumulative: false,
+      },
+      "1"
+    );
+
+    const chartData = (model.getters.getChartRuntime("1") as LineChartRuntime).chartJsConfig.data!
+      .datasets![0].data;
+    const initialData = [11, 12, 13, "P4", 30];
+    const expectedCumulativeData = [11, 23, 36, "P4", 66];
+
+    expect(chartData).toEqual(initialData);
+
+    updateChart(model, "1", { cumulative: true });
+    const updatedChartData = (model.getters.getChartRuntime("1") as LineChartRuntime).chartJsConfig
+      .data!.datasets![0].data;
+
+    expect(updatedChartData).toEqual(expectedCumulativeData);
+  });
+});
+
 test("creating chart with single dataset should have legend position set as none, followed by changing it to top", async () => {
   createChart(
     model,