From d06d5ceedbde882ba1dc659a247433001e57ab5d Mon Sep 17 00:00:00 2001
From: Anthony Hendrickx <anhe@odoo.com>
Date: Tue, 24 Sep 2024 16:46:24 +0200
Subject: [PATCH] [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

Task: 4207820
---
 .../chart/chart_with_axis/design_panel.ts     | 19 ++++++++------
 .../chart/chart_with_axis/design_panel.xml    | 15 ++++++-----
 .../combo_chart/combo_chart_design_panel.xml  | 15 ++++++-----
 tests/figures/chart/charts_component.test.ts  | 25 +++++++++++++++++++
 4 files changed, 55 insertions(+), 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
index 0108a87533..7250b36aac 100644
--- 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
index a9441455d6..446b036ada 100644
--- 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
index c41ab4adb4..5be73de299 100644
--- 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
index 0fb5f4f5f4..5dc705b81c 100644
--- 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") => {