[IMP] add date picker for date scale axis

This commit extends the axis customization to date type x scale

closes #7350

Task: 5159370
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>

Author: anhe-odoo

rollup.config.js

@@ -65,14 +65,14 @@ export default (commandLineArgs) => {
     // Only build one version to improve speed
     config = {
       input: "build/js/src/index.js",
-      external: ["@odoo/owl", "chart.js"],
+      external: ["@odoo/owl", "chart.js", "luxon"],
       output: [
         {
           name: "o_spreadsheet",
           extend: true,
           outro,
           banner: bundle.jsBanner(),
-          globals: { "@odoo/owl": "owl", "chart.js": "Chart" },
+          globals: { "@odoo/owl": "owl", "chart.js": "Chart", luxon: "luxon" },
           file: `build/o_spreadsheet.${extension}`,
           format: commandLineArgs.format,
         },
@@ -118,7 +118,7 @@ export default (commandLineArgs) => {
     config = [
       {
         input,
-        external: ["@odoo/owl", "chart.js"],
+        external: ["@odoo/owl", "chart.js", "luxon"],
         output,
         plugins,
       },

src/components/date_input/date_input.ts

@@ -0,0 +1,5 @@
+import { NumberInput } from "../number_input/number_input";
+
+export class DateInput extends NumberInput {
+  static template = "o-spreadsheet-DateInput";
+}

src/components/date_input/date_input.xml

@@ -0,0 +1,18 @@
+<templates>
+  <t t-name="o-spreadsheet-DateInput">
+    <input
+      type="date"
+      t-ref="{{refName}}"
+      t-att-class="inputClass"
+      t-att-id="props.id"
+      t-att-placeholder="props.placeholder"
+      t-on-change="save"
+      t-on-blur="save"
+      t-on-pointerdown="onMouseDown"
+      t-on-pointerup="onMouseUp"
+      t-on-keydown="onKeyDown"
+      t-att-min="props.min"
+      t-att-max="props.max"
+    />
+  </t>
+</templates>

src/components/figures/chart/chartJs/chartjs_minor_grid_plugin.ts

@@ -1,4 +1,4 @@
-import { Chart } from "chart.js";
+import type { Chart } from "chart.js";
 import { Color } from "../../../..";
 
 interface MinorGridOptions {

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

@@ -1,9 +1,15 @@
 import { _t } from "@odoo/o-spreadsheet-engine";
 import { CHART_AXIS_TITLE_FONT_SIZE } from "@odoo/o-spreadsheet-engine/constants";
-import { AxisGridType, AxisId, LineChartRuntime } from "@odoo/o-spreadsheet-engine/types/chart";
+import { toNumber } from "@odoo/o-spreadsheet-engine/functions/helpers";
+import {
+  AxisGridType,
+  AxisId,
+  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";
+import { deepCopy, formatValue } from "../../../../../helpers";
 import { getDefinedAxis } from "../../../../../helpers/figures/charts";
 import {
   AxisDesign,
@@ -12,6 +18,7 @@ import {
   TitleDesign,
   UID,
 } from "../../../../../types";
+import { DateInput } from "../../../../date_input/date_input";
 import { NumberInput } from "../../../../number_input/number_input";
 import { BadgeSelection } from "../../../components/badge_selection/badge_selection";
 import { Checkbox } from "../../../components/checkbox/checkbox";
@@ -32,7 +39,7 @@ interface Props {
 
 export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
   static template = "o-spreadsheet-AxisDesignEditor";
-  static components = { Section, ChartTitle, BadgeSelection, Checkbox, NumberInput };
+  static components = { Section, ChartTitle, BadgeSelection, Checkbox, NumberInput, DateInput };
   static props = { chartId: String, definition: Object, updateChart: Function, axesList: Array };
 
   state: { currentAxis: AxisId } = useState({ currentAxis: "x" });
@@ -73,12 +80,14 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
     this.props.updateChart(this.props.chartId, { axesDesign });
   }
 
-  get axisMin(): number | string {
-    return this.currentAxisDesign?.min ?? "";
+  get axisMin(): string | number {
+    const min = this.currentAxisDesign?.min;
+    return (this.isTimeAxis ? this.formatAxisBoundary(min) : min) ?? "";
   }
 
-  get axisMax(): number | string {
-    return this.currentAxisDesign?.max ?? "";
+  get axisMax(): string | number {
+    const max = this.currentAxisDesign?.max;
+    return (this.isTimeAxis ? this.formatAxisBoundary(max) : max) ?? "";
   }
 
   get isMajorGridEnabled(): boolean {
@@ -115,29 +124,55 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
   }
 
   updateAxisMin(value: string) {
-    const parsed = value === "" ? undefined : Number(value);
-    if (parsed === undefined || !isNaN(parsed)) {
+    const min = value === "" ? undefined : Number(value);
+    if (min === undefined || !isNaN(min)) {
       const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
       axesDesign[this.state.currentAxis] = {
         ...axesDesign[this.state.currentAxis],
-        min: parsed,
+        min,
       };
       this.props.updateChart(this.props.chartId, { axesDesign });
     }
   }
 
+  updateTimeAxisMin(value: string) {
+    const min = this.parseTimeAxisBoundaryValue(value);
+    if (min === null) {
+      return;
+    }
+    const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+    axesDesign[this.state.currentAxis] = {
+      ...axesDesign[this.state.currentAxis],
+      min,
+    };
+    this.props.updateChart(this.props.chartId, { axesDesign });
+  }
+
   updateAxisMax(value: string) {
-    const parsed = value === "" ? undefined : Number(value);
-    if (parsed === undefined || !isNaN(parsed)) {
+    const max = value === "" ? undefined : Number(value);
+    if (max === undefined || !isNaN(max)) {
       const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
       axesDesign[this.state.currentAxis] = {
         ...axesDesign[this.state.currentAxis],
-        max: parsed,
+        max,
       };
       this.props.updateChart(this.props.chartId, { axesDesign });
     }
   }
 
+  updateTimeAxisMax(value: string) {
+    const max = this.parseTimeAxisBoundaryValue(value);
+    if (max === null) {
+      return;
+    }
+    const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
+    axesDesign[this.state.currentAxis] = {
+      ...axesDesign[this.state.currentAxis],
+      max,
+    };
+    this.props.updateChart(this.props.chartId, { axesDesign });
+  }
+
   toggleMajorGrid(major: boolean) {
     const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
     let gridLines: AxisGridType = "none";
@@ -193,8 +228,39 @@ export class AxisDesignEditor extends Component<Props, SpreadsheetChildEnv> {
     if (this.isValueAxis) {
       return false;
     }
+    const axisType = this.getXAxisType();
+    return axisType === undefined || axisType === "category";
+  }
+
+  get isTimeAxis(): boolean {
+    return this.state.currentAxis === "x" && this.getXAxisType() === "time";
+  }
+
+  get canChangeMinorGridVisibility(): boolean {
+    if (this.isValueAxis) {
+      return true;
+    }
+    if (this.isCategoricalAxis) {
+      return false;
+    }
+    const type = this.props.definition.type;
+    return type === "line" || type === "scatter";
+  }
+
+  private parseTimeAxisBoundaryValue(value: string): number | undefined | null {
+    const dateNumber = toNumber(value, this.env.model.getters.getLocale());
+    return Number.isNaN(dateNumber) ? null : dateNumber;
+  }
+
+  private formatAxisBoundary(value: number | undefined): string | undefined {
+    if (value === undefined) {
+      return undefined;
+    }
+    return formatValue(value, { format: "yyyy-mm-dd", locale: this.env.model.getters.getLocale() });
+  }
+
+  private getXAxisType(): AxisType | undefined {
     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";
+    return runtime?.chartJsConfig.options?.scales?.x?.type as AxisType | undefined;
   }
 }

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

@@ -24,7 +24,14 @@
       <div class="d-flex">
         <div class="w-50">
           <span class="o-section-subtitle my-0">Minimum</span>
+          <DateInput
+            t-if="isTimeAxis"
+            class="'o-input w-100 time-axis-min-input'"
+            value="axisMin"
+            onChange.bind="updateTimeAxisMin"
+          />
           <NumberInput
+            t-else=""
             class="'o-input w-100 axis-min-input'"
             value="axisMin"
             onChange.bind="updateAxisMin"
@@ -33,7 +40,14 @@
         </div>
         <div class="w-50 ms-3">
           <span class="o-section-subtitle my-0">Maximum</span>
+          <DateInput
+            t-if="isTimeAxis"
+            class="'o-input w-100 time-axis-max-input'"
+            value="axisMax"
+            onChange.bind="updateTimeAxisMax"
+          />
           <NumberInput
+            t-else=""
             class="'o-input w-100 axis-max-input'"
             value="axisMax"
             onChange.bind="updateAxisMax"

src/components/spreadsheet/spreadsheet.css

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

src/helpers/chart_date.ts

@@ -1,6 +1,7 @@
 import type { TimeScaleOptions } from "chart.js";
 import { DeepPartial } from "chart.js/dist/types/utils";
-import { largeMax, largeMin, parseDateTime } from ".";
+import { DateTime } from "luxon";
+import { largeMax, largeMin } from ".";
 import { Alias, Format, Locale } from "../types";
 
 // -----------------------------------------------------------------------------
@@ -44,7 +45,7 @@ const Milliseconds = {
  * Regex to test if a format string is a date format that can be translated into a luxon time format
  */
 export const timeFormatLuxonCompatible =
-  /^((d|dd|m|mm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|yyyy|yy|hh|h|ss|a)$/i;
+  /^((d|dd|m|mm|mmm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|mmm|yyyy|yy|hh|h|ss|a)$/i;
 
 /** Get the time options for the XAxis of ChartJS */
 export function getChartTimeOptions(
@@ -73,7 +74,7 @@ export function getChartTimeOptions(
  *
  * https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens
  */
-function convertDateFormatForLuxon(format: Format): LuxonFormat {
+export function convertDateFormatForLuxon(format: Format): LuxonFormat {
   // "m" before "h" === month, "m" after "h" === minute
   const indexH = format.indexOf("h");
   if (indexH >= 0) {
@@ -122,11 +123,11 @@ function getBestTimeUnitForScale(
   format: LuxonFormat,
   locale: Locale
 ): TimeUnit | undefined {
-  const labelDates = labels.map((label) => parseDateTime(label, locale)?.jsDate);
+  const labelDates = labels.map((label) => DateTime.fromFormat(label, format));
   if (labelDates.some((date) => date === undefined) || labels.length < 2) {
     return undefined;
   }
-  const labelsTimestamps = labelDates.map((date) => date!.getTime());
+  const labelsTimestamps = labelDates.map((date) => date!.ts);
   const period = largeMax(labelsTimestamps) - largeMin(labelsTimestamps);
 
   const minUnit = getFormatMinDisplayUnit(format);

src/helpers/figures/charts/runtime/chartjs_scales.ts

@@ -203,6 +203,11 @@ export function getLineChartScales(
     const axis = {
       type: "time",
       time: getChartTimeOptions(labels, labelFormat, locale),
+      min: formatValue(definition.axesDesign?.x?.min ?? "", { format: labelFormat, locale }),
+      max: formatValue(definition.axesDesign?.x?.max ?? "", {
+        format: labelFormat,
+        locale,
+      }),
     };
     Object.assign(scales!.x!, axis);
     scales!.x!.ticks!.maxTicksLimit = 15;

tests/figures/chart/chart_plugin.test.ts

@@ -61,6 +61,7 @@ import { ChartPlugin } from "@odoo/o-spreadsheet-engine/plugins/core/chart";
 import { FigurePlugin } from "@odoo/o-spreadsheet-engine/plugins/core/figures";
 import { ScatterChartRuntime } from "@odoo/o-spreadsheet-engine/types/chart/scatter_chart";
 import { zoneToXc } from "../../../src/helpers";
+import { convertDateFormatForLuxon } from "../../../src/helpers/chart_date";
 import { BarChart } from "../../../src/helpers/figures/charts";
 import {
   getCategoryAxisTickLabels,
@@ -2796,28 +2797,32 @@ describe("Linear/Time charts", () => {
     expect(getChartConfiguration(model, chartId).options?.scales?.x?.type).toEqual("linear");
   });
 
-  test("time axis for line/bar chart with date labels", () => {
-    setFormat(model, "C2:C5", "m/d/yyyy");
-    createChart(
-      model,
-      {
-        type: "line",
-        dataSets: [{ dataRange: "B2:B5" }],
-        labelRange: "C2:C5",
-        labelsAsText: false,
-      },
-      chartId
-    );
-    const scale = getChartConfiguration(model, chartId).options.scales.x;
-    expect(scale.type).toEqual("time");
-    expect(scale.ticks?.callback).toBeUndefined();
-    expect(scale.time).toEqual({
-      displayFormats: { day: "M/d/yyyy" }, // luxon format
-      parser: "M/d/yyyy",
-      tooltipFormat: "M/d/yyyy",
-      unit: "day",
-    });
-  });
+  test.each(["mm/dd/yyyy", "yyyy-mm-dd", "dd/mm/yyyy", "d mmm yyyy"])(
+    "time axis for line/bar chart with date labels in format %s",
+    (format: string) => {
+      setFormat(model, "C2:C5", format);
+      createChart(
+        model,
+        {
+          type: "line",
+          dataSets: [{ dataRange: "B2:B5" }],
+          labelRange: "C2:C5",
+          labelsAsText: false,
+        },
+        chartId
+      );
+      const convertedFormat = convertDateFormatForLuxon(format);
+      const scale = getChartConfiguration(model, chartId).options.scales.x;
+      expect(scale.type).toEqual("time");
+      expect(scale.ticks?.callback).toBeUndefined();
+      expect(scale.time).toEqual({
+        displayFormats: { day: convertedFormat }, // luxon format
+        parser: convertedFormat,
+        tooltipFormat: convertedFormat,
+        unit: "day",
+      });
+    }
+  );
 
   test("time axis for line/bar chart with formulas w/ date format as labels", () => {
     setCellContent(model, "C2", "=DATE(2022,1,1)");