[IMP] charts: limit trending line degree range

Task Description This task aims to add a maximum value for the trending line degree (for a polynomial model), fixed to the minimum value between 10 and 1 below the number of points in the series. Related Task closes #5022 Task: 4207820 Signed-off-by: Lucas Lefèvre (lul) <[email protected]>
odoo · Oct 24, 2024 · 977b8f2 · 977b8f2
1 parent 9f337f3
commit 977b8f2
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 19 deletions.
diff --git a/src/components/side_panel/chart/chart_with_axis/design_panel.ts b/src/components/side_panel/chart/chart_with_axis/design_panel.ts
@@ -1,7 +1,8 @@
 import { Component, useState } from "@odoo/owl";
-import { getColorsPalette, getNthColor, setColorAlpha, toHex } from "../../../../helpers";
+import { getColorsPalette, getNthColor, range, setColorAlpha, toHex } from "../../../../helpers";
 import { CHART_AXIS_CHOICES, getDefinedAxis } from "../../../../helpers/figures/charts";
 import { _t } from "../../../../translation";
+import { ChartJSRuntime } from "../../../../types/chart";
 import {
   ChartWithAxisDefinition,
   Color,
@@ -76,6 +77,10 @@ export class ChartWithAxisDesignPanel<P extends Props = Props> extends Component
     return this.props.definition.dataSets.map((d, i) => d.label ?? `${ChartTerms.Series} ${i + 1}`);
   }
 
+  getPolynomialDegrees(): number[] {
+    return range(1, this.getMaxPolynomialDegree() + 1);
+  }
+
   updateSerieEditor(ev) {
     const chartId = this.props.figureId;
     const selectedIndex = ev.target.selectedIndex;
@@ -205,12 +210,7 @@ export class ChartWithAxisDesignPanel<P extends Props = Props> extends Component
 
   onChangePolynomialDegree(ev: InputEvent) {
     const element = ev.target as HTMLInputElement;
-    const order = parseInt(element.value || "1");
-    if (order < 2) {
-      element.value = `${this.getTrendLineConfiguration()?.order ?? 2}`;
-      return;
-    }
-    this.updateTrendLineValue({ order });
+    this.updateTrendLineValue({ order: parseInt(element.value) });
   }
 
   getTrendLineColor() {
@@ -235,4 +235,9 @@ export class ChartWithAxisDesignPanel<P extends Props = Props> extends Component
     };
     this.props.updateChart(this.props.figureId, { dataSets });
   }
+
+  getMaxPolynomialDegree() {
+    const runtime = this.env.model.getters.getChartRuntime(this.props.figureId) as ChartJSRuntime;
+    return Math.min(10, runtime.chartJsConfig.data.datasets[this.state.index].data.length - 1);
+  }
 }
diff --git a/src/components/side_panel/chart/chart_with_axis/design_panel.xml b/src/components/side_panel/chart/chart_with_axis/design_panel.xml
@@ -102,13 +102,16 @@
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
                   <span class="o-section-subtitle">Degree</span>
-                  <input
+                  <select
                     t-att-value="trend.order"
-                    type="number"
-                    class="w-100 o-input trend-order-input"
-                    t-on-change="this.onChangePolynomialDegree"
-                    min="1"
-                  />
+                    class="o-input trend-order-input"
+                    t-on-change="this.onChangePolynomialDegree">
+                    <t t-foreach="getPolynomialDegrees()" t-as="degree" t-key="degree">
+                      <option t-att-value="degree">
+                        <t t-esc="degree"/>
+                      </option>
+                    </t>
+                  </select>
                 </div>
               </div>
               <div class="d-flex align-items-center">

diff --git a/src/components/side_panel/chart/combo_chart/combo_chart_design_panel.xml b/src/components/side_panel/chart/combo_chart/combo_chart_design_panel.xml
@@ -111,13 +111,16 @@
                 </div>
                 <div class="w-50 ms-3" t-if="trendType === 'polynomial'">
                   <span class="o-section-subtitle">Degree</span>
-                  <input
+                  <select
                     t-att-value="trend.order"
-                    type="number"
-                    class="w-100 o-input trend-order-input"
-                    t-on-change="this.onChangePolynomialDegree"
-                    min="1"
-                  />
+                    class="o-input trend-order-input"
+                    t-on-change="this.onChangePolynomialDegree">
+                    <t t-foreach="getPolynomialDegrees()" t-as="degree" t-key="degree">
+                      <option t-att-value="degree">
+                        <t t-esc="degree"/>
+                      </option>
+                    </t>
+                  </select>
                 </div>
               </div>
               <div class="d-flex align-items-center">

diff --git a/tests/figures/chart/charts_component.test.ts b/tests/figures/chart/charts_component.test.ts
@@ -1733,6 +1733,31 @@ describe("charts", () => {
       }
     );
 
+    test.each(["bar", "line", "scatter", "combo"] as const)(
+      "Polynome degree choices are limited by the number of points",
+      async (type: "bar" | "line" | "scatter" | "combo") => {
+        createChart(
+          model,
+          {
+            dataSets: [
+              { dataRange: "B1:B5", trend: { type: "polynomial", order: 3, display: true } },
+            ],
+            labelRange: "A1:A5",
+            type,
+            dataSetsHaveTitle: false,
+          },
+          chartId,
+          sheetId
+        );
+        await mountChartSidePanel(chartId);
+        await openChartDesignSidePanel(model, env, fixture, chartId);
+
+        const selectElement = fixture.querySelector(".trend-order-input") as HTMLSelectElement;
+        const optionValues = [...selectElement.options].map((o) => o.value);
+        expect(optionValues).toEqual(["1", "2", "3", "4"]);
+      }
+    );
+
     test.each(["bar", "line", "scatter", "combo"] as const)(
       "Can change trend line color",
       async (type: "bar" | "line" | "scatter" | "combo") => {