[IMP] add date picker for date scale axis

This commit extends the axis customization to date type x scale

Task: 5159370

Author: anhe-odoo

src/components/side_panel/chart/building_blocks/axis_design/axis_design_editor.ts

@@ -1,6 +1,6 @@
 import { _t } from "@odoo/o-spreadsheet-engine";
 import { CHART_AXIS_TITLE_FONT_SIZE } from "@odoo/o-spreadsheet-engine/constants";
-import { LineChartRuntime } from "@odoo/o-spreadsheet-engine/types/chart";
+import { AxisType, LineChartRuntime } from "@odoo/o-spreadsheet-engine/types/chart";
 import { SpreadsheetChildEnv } from "@odoo/o-spreadsheet-engine/types/spreadsheet_env";
 import { Component, useState } from "@odoo/owl";
 import { deepCopy } from "../../../../../helpers";
@@ -77,18 +77,28 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
     this.props.updateChart(this.props.chartId, { axesDesign });
   }
 
-  get axisMin(): number | undefined {
-    return this.currentAxisDesign?.min;
+  get axisMin(): string | number | undefined {
+    const min = this.currentAxisDesign?.min;
+    return this.isTimeAxis ? this.formatAxisBoundary(min) : min;
   }
 
-  get axisMax(): number | undefined {
-    return this.currentAxisDesign?.max;
+  get axisMax(): string | number | undefined {
+    const max = this.currentAxisDesign?.max;
+    return this.isTimeAxis ? this.formatAxisBoundary(max) : max;
   }
 
   get axisScaleType(): AxisScaleType {
     return this.currentAxisDesign?.scaleType ?? "linear";
   }
 
+  get axisBoundsInputType(): "number" | "date" {
+    return this.isTimeAxis ? "date" : "number";
+  }
+
+  get axisBoundsInputStep(): string | null {
+    return this.isTimeAxis ? "1" : null;
+  }
+
   get isMajorGridEnabled(): boolean {
     const designValue = this.currentAxisDesign?.grid?.major;
     if (designValue !== undefined) {
@@ -114,29 +124,29 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
   }
 
   updateAxisMin(ev: InputEvent) {
-    const value = (ev.target as HTMLInputElement).value.trim();
-    const parsed = value === "" ? undefined : Number(value);
-    if (parsed === undefined || !isNaN(parsed)) {
-      const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
-      axesDesign[this.state.currentAxis] = {
-        ...axesDesign[this.state.currentAxis],
-        min: parsed,
-      };
-      this.props.updateChart(this.props.chartId, { axesDesign });
+    const parsed = this.parseAxisBoundaryValue(ev);
+    if (parsed === null) {
+      return;
     }
+    const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+    axesDesign[this.state.currentAxis] = {
+      ...axesDesign[this.state.currentAxis],
+      min: parsed,
+    };
+    this.props.updateChart(this.props.chartId, { axesDesign });
   }
 
   updateAxisMax(ev: InputEvent) {
-    const value = (ev.target as HTMLInputElement).value.trim();
-    const parsed = value === "" ? undefined : Number(value);
-    if (parsed === undefined || !isNaN(parsed)) {
-      const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
-      axesDesign[this.state.currentAxis] = {
-        ...axesDesign[this.state.currentAxis],
-        max: parsed,
-      };
-      this.props.updateChart(this.props.chartId, { axesDesign });
+    const parsed = this.parseAxisBoundaryValue(ev);
+    if (parsed === null) {
+      return;
     }
+    const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+    axesDesign[this.state.currentAxis] = {
+      ...axesDesign[this.state.currentAxis],
+      max: parsed,
+    };
+    this.props.updateChart(this.props.chartId, { axesDesign });
   }
 
   updateAxisScaleType(ev: InputEvent) {
@@ -198,9 +208,12 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
     if (this.state.currentAxis !== "x") {
       return false;
     }
-    const runtime = this.env.model.getters.getChartRuntime(this.props.chartId) as LineChartRuntime;
-    const axisType = runtime?.chartJsConfig.options?.scales?.x?.type;
-    return axisType === undefined || axisType === "time";
+    const axisType = this.getXAxisType();
+    return axisType === undefined || axisType === "category";
+  }
+
+  get isTimeAxis(): boolean {
+    return this.state.currentAxis === "x" && this.getXAxisType() === "time";
   }
 
   get canChangeMinorGridVisibility(): boolean {
@@ -213,4 +226,43 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
     const type = this.props.definition.type;
     return type === "line" || type === "scatter";
   }
+
+  private parseAxisBoundaryValue(ev: InputEvent): number | undefined | null {
+    const input = ev.target as HTMLInputElement;
+    const value = input.value.trim();
+    if (value === "") {
+      return undefined;
+    }
+    if (this.isTimeAxis) {
+      const timestamp = this.getTimestampFromInput(input);
+      return Number.isNaN(timestamp) ? null : timestamp;
+    }
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? null : parsed;
+  }
+
+  private formatAxisBoundary(value: number | string | undefined): string | undefined {
+    if (value === undefined) {
+      return undefined;
+    }
+    const timestamp = typeof value === "number" ? value : Date.parse(value);
+    if (Number.isNaN(timestamp)) {
+      return typeof value === "string" ? value : undefined;
+    }
+    const date = new Date(timestamp);
+    return date.toISOString().split("T")[0];
+  }
+
+  private getTimestampFromInput(input: HTMLInputElement): number {
+    const valueAsNumber = (input as any).valueAsNumber as number | undefined;
+    if (typeof valueAsNumber === "number" && !Number.isNaN(valueAsNumber)) {
+      return valueAsNumber;
+    }
+    return Date.parse(input.value);
+  }
+
+  private getXAxisType(): AxisType | undefined {
+    const runtime = this.env.model.getters.getChartRuntime(this.props.chartId) as LineChartRuntime;
+    return runtime?.chartJsConfig.options?.scales?.x?.type as AxisType | undefined;
+  }
 }

src/components/side_panel/chart/building_blocks/axis_design/axis_design_editor.xml

@@ -24,27 +24,29 @@
         <div class="w-50">
           <span class="o-section-subtitle my-0">Minimum</span>
           <input
-            type="number"
+            t-att-type="axisBoundsInputType"
             class="o-input w-100"
             data-testid="axis-min-input"
             t-att-value="axisMin"
+            t-att-step="axisBoundsInputStep"
             t-on-change="updateAxisMin"
           />
         </div>
         <div class="w-50 ms-3">
           <span class="o-section-subtitle my-0">Maximum</span>
           <input
-            type="number"
+            t-att-type="axisBoundsInputType"
             class="o-input w-100"
             data-testid="axis-max-input"
             t-att-value="axisMax"
+            t-att-step="axisBoundsInputStep"
             t-on-change="updateAxisMax"
           />
         </div>
       </div>
     </Section>
     <Section
-      t-if="!isCategoricalAxis"
+      t-if="!isCategoricalAxis and !isTimeAxis"
       class="'pt-0 o-axis-scale-section'"
       title.translate="Scale type">
       <select

src/components/spreadsheet/spreadsheet.css

@@ -125,6 +125,7 @@
   }
 
   .o-input[type="number"],
+  .o-input[type="date"],
   .o-number-input {
     border-width: 0 0 1px 0;
     /* Remove number input arrows */

tests/figures/chart/charts_component.test.ts

@@ -714,6 +714,65 @@ describe("charts", () => {
     }
   );
 
+  test("can edit chart time axis limits", async () => {
+    const model = createModelFromGrid({
+      A2: "=DATE(2022,1,1)",
+      A3: "=DATE(2022,1,2)",
+      A4: "=DATE(2022,1,3)",
+      A5: "=DATE(2022,1,4)",
+    });
+    setFormat(model, "A2:A5", "m/d/yyyy");
+    createChart(
+      model,
+      {
+        dataSets: [{ dataRange: "B2:B5" }],
+        labelRange: "A2:A5",
+        type: "line",
+        labelsAsText: false,
+      },
+      chartId
+    );
+    await mountChartSidePanel(chartId, model);
+    await openChartDesignSidePanel(model, env, fixture, chartId);
+
+    const minInput = fixture.querySelector('[data-testid="axis-min-input"]') as HTMLInputElement;
+    expect(minInput.type).toBe("date");
+
+    await setInputValueAndTrigger(minInput, "2022-01-02");
+    let definition = model.getters.getChartDefinition(chartId) as LineChartDefinition;
+    expect(definition.axesDesign?.x?.min).toEqual(Date.parse("2022-01-02"));
+
+    const maxInput = fixture.querySelector('[data-testid="axis-max-input"]') as HTMLInputElement;
+    await setInputValueAndTrigger(maxInput, "2022-01-04");
+    definition = model.getters.getChartDefinition(chartId) as LineChartDefinition;
+    expect(definition.axesDesign?.x?.max).toEqual(Date.parse("2022-01-04"));
+  });
+
+  test("Axis scale type is not editable for time axis", async () => {
+    const model = createModelFromGrid({
+      A2: "=DATE(2022,1,1)",
+      A3: "=DATE(2022,1,2)",
+      A4: "=DATE(2022,1,3)",
+      A5: "=DATE(2022,1,4)",
+    });
+    setFormat(model, "A2:A5", "m/d/yyyy");
+    createChart(
+      model,
+      {
+        dataSets: [{ dataRange: "B2:B5" }],
+        labelRange: "A2:A5",
+        type: "line",
+        labelsAsText: false,
+      },
+      chartId
+    );
+    await mountChartSidePanel(chartId, model);
+    await openChartDesignSidePanel(model, env, fixture, chartId);
+
+    const scaleSelect = fixture.querySelector('[data-testid="axis-scale-select"]');
+    expect(scaleSelect).toBeNull();
+  });
+
   test.each(["min", "max"])("can edit chart vertical axis %s limit", async (boundarie: string) => {
     createChart(
       model,