[IMP] charts: limit trending line degree range

src/components/side_panel/chart/chart_with_axis/design_panel.ts

@@ -2,6 +2,7 @@ import { Component, useState } from "@odoo/owl";
 import { getColorsPalette, getNthColor, 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 Array.from({ length: Math.min(10, this.getMaxPolynomialDegree()) }, (_, i) => i + 1);
+ }
+
  updateSerieEditor(ev) {
  const chartId = this.props.figureId;
  const selectedIndex = ev.target.selectedIndex;
@@ -210,6 +215,11 @@ export class ChartWithAxisDesignPanel<P extends Props = Props> extends Component
  element.value = `${this.getTrendLineConfiguration()?.order ?? 2}`;
  return;
  }
+ const maxOrder = this.getMaxPolynomialDegree();
+ if (order > maxOrder) {
+ element.value = `${this.getTrendLineConfiguration()?.order ?? maxOrder}`;
+ return;
+ }
  this.updateTrendLineValue({ order });
  }
 
@@ -235,4 +245,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);
+ }
 }

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">

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">

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") => {