[FIX] charts: correct stacked checkbox label

This commit addresses an issue where the stacked checkbox label in the chart config panel was not updating when the chart type was changed. closes #5145 Task: 4251670 X-original-commit: 1aa1b2c Signed-off-by: Lucas Lefèvre (lul) <[email protected]> Signed-off-by: Dhrutik Patel (dhrp) <[email protected]>
odoo · Oct 28, 2024 · c53e769 · c53e769
1 parent 5ebba29
commit c53e769
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 2 deletions.
diff --git a/src/components/side_panel/chart/bar_chart/bar_chart_config_panel.ts b/src/components/side_panel/chart/bar_chart/bar_chart_config_panel.ts
@@ -1,8 +1,16 @@
+import { BarChartDefinition } from "../../../../types/chart";
 import { GenericChartConfigPanel } from "../building_blocks/generic_side_panel/config_panel";
 
 export class BarConfigPanel extends GenericChartConfigPanel {
   static template = "o-spreadsheet-BarConfigPanel";
 
+  get stackedLabel(): string {
+    const definition = this.props.definition as BarChartDefinition;
+    return definition.horizontal
+      ? this.chartTerms.StackedBarChart
+      : this.chartTerms.StackedColumnChart;
+  }
+
   onUpdateStacked(stacked: boolean) {
     this.props.updateChart(this.props.figureId, {
       stacked,

diff --git a/src/components/side_panel/chart/bar_chart/bar_chart_config_panel.xml b/src/components/side_panel/chart/bar_chart/bar_chart_config_panel.xml
@@ -4,7 +4,7 @@
       <Section class="'pt-0'">
         <Checkbox
           name="'stacked'"
-          label="chartTerms.StackedBarChart"
+          label="stackedLabel"
           value="props.definition.stacked"
           onChange.bind="onUpdateStacked"
         />

diff --git a/src/components/side_panel/chart/line_chart/line_chart_config_panel.ts b/src/components/side_panel/chart/line_chart/line_chart_config_panel.ts
@@ -16,7 +16,9 @@ export class LineConfigPanel extends GenericChartConfigPanel {
 
   get stackedLabel(): string {
     const definition = this.props.definition as LineChartDefinition;
-    return definition.fillArea ? this.chartTerms.StackedAreaChart : this.chartTerms.StackedBarChart;
+    return definition.fillArea
+      ? this.chartTerms.StackedAreaChart
+      : this.chartTerms.StackedLineChart;
   }
 
   getLabelRangeOptions() {

diff --git a/src/components/translations_terms.ts b/src/components/translations_terms.ts
@@ -60,6 +60,7 @@ export const ChartTerms = {
   StackedBarChart: _t("Stacked bar chart"),
   StackedLineChart: _t("Stacked line chart"),
   StackedAreaChart: _t("Stacked area chart"),
+  StackedColumnChart: _t("Stacked column chart"),
   CumulativeData: _t("Cumulative data"),
   TreatLabelsAsText: _t("Treat labels as text"),
   AggregatedChart: _t("Aggregate"),

diff --git a/tests/figures/chart/charts_component.test.ts b/tests/figures/chart/charts_component.test.ts
@@ -2075,4 +2075,22 @@ describe("Change chart type", () => {
     });
     expect(select.value).toBe("stacked_line");
   });
+
+  test("Changing chart type updates the stacked checkbox label accordingly", async () => {
+    createChart(model, { type: "line" }, chartId);
+    await mountChartSidePanel(chartId);
+
+    expect(fixture.querySelector("label.o-checkbox")!.textContent).toBe("Stacked line chart");
+
+    updateChart(model, chartId, { fillArea: true }, sheetId);
+    await nextTick();
+    expect(fixture.querySelector("label.o-checkbox")!.textContent).toBe("Stacked area chart");
+
+    await changeChartType("bar");
+    expect(fixture.querySelector("label.o-checkbox")!.textContent).toBe("Stacked bar chart");
+
+    updateChart(model, chartId, { horizontal: false }, sheetId);
+    await nextTick();
+    expect(fixture.querySelector("label.o-checkbox")!.textContent).toBe("Stacked column chart");
+  });
 });