[FIX] charts: time axis broken with long formatted date

In the charts, we truncate the labels if they are too long
(>20 characters)[1]. But in line chart with time axis, chartJS parses
the labels to get a date. This parsing obviously fails if the label
is truncated.

This commit fixes the issue by not truncating the labels if the
axis is a time axis.

[1] e.g. a format like "12/04/2024 12:34:56 AM".

closes #4148

Task: 3857242
X-original-commit: 49a41ed
Signed-off-by: Rémi Rahir (rar) <rar@odoo.com>
Signed-off-by: Adrien Minne (adrm) <adrm@odoo.com>

src/helpers/figures/charts/chart_common_line_scatter.ts

@@ -114,10 +114,10 @@ function isLuxonTimeAdapterInstalled() {
 function getLineOrScatterConfiguration(
   chart: LineChart | ScatterChart,
   labels: string[],
-  localeFormat: LocaleFormat
+  options: LocaleFormat & { truncateLabels?: boolean }
 ): Required<ChartConfiguration> {
   const fontColor = chartFontColor(chart.background);
-  const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
+  const config = getDefaultChartJsRuntime(chart, labels, fontColor, options);
 
   const legend: DeepPartial<LegendOptions<"line">> = {
     labels: {
@@ -160,7 +160,7 @@ function getLineOrScatterConfiguration(
         callback: (value) => {
           value = Number(value);
           if (isNaN(value)) return value;
-          const { locale, format } = localeFormat;
+          const { locale, format } = options;
           return formatValue(value, {
             locale,
             format: !format && Math.abs(value) >= 1000 ? "#,##" : format,
@@ -208,9 +208,10 @@ export function createLineOrScatterChartRuntime(
   }
 
   const locale = getters.getLocale();
+  const truncateLabels = axisType === "category";
   const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
-  const localeFormat = { format: dataSetFormat, locale };
-  const config = getLineOrScatterConfiguration(chart, labels, localeFormat);
+  const options = { format: dataSetFormat, locale, truncateLabels };
+  const config = getLineOrScatterConfiguration(chart, labels, options);
   const labelFormat = getChartLabelFormat(getters, chart.labelRange)!;
   if (axisType === "time") {
     const axis = {

src/helpers/figures/charts/chart_ui_common.ts

@@ -103,7 +103,7 @@ export function getDefaultChartJsRuntime(
   chart: AbstractChart,
   labels: string[],
   fontColor: Color,
-  { format, locale }: LocaleFormat
+  { format, locale, truncateLabels }: LocaleFormat & { truncateLabels?: boolean }
 ): Required<ChartConfiguration> {
   const options: ChartOptions = {
     // https://www.chartjs.org/docs/latest/general/responsive.html
@@ -151,7 +151,7 @@ export function getDefaultChartJsRuntime(
     type: chart.type as ChartType,
     options,
     data: {
-      labels: labels.map(truncateLabel),
+      labels: truncateLabels ? labels.map(truncateLabel) : labels,
       datasets: [],
     },
     platform: undefined as unknown as typeof BasePlatform, // This key is optional and will be set by chart.js

tests/figures/chart/chart_plugin.test.ts

@@ -1,6 +1,6 @@
 import { ChartType, TooltipItem } from "chart.js";
 import { CommandResult, Model } from "../../../src";
-import { zoneToXc } from "../../../src/helpers";
+import { toZone, zoneToXc } from "../../../src/helpers";
 import { ChartDefinition, UID } from "../../../src/types";
 import {
   BarChartDefinition,
@@ -33,10 +33,11 @@ import {
 import { getPlugin, mockChart, nextTick, target } from "../../test_helpers/helpers";
 
 import { ChartTerms } from "../../../src/components/translations_terms";
-import { FIGURE_ID_SPLITTER } from "../../../src/constants";
+import { FIGURE_ID_SPLITTER, MAX_CHAR_LABEL } from "../../../src/constants";
 import { BarChart } from "../../../src/helpers/figures/charts";
 import { ChartPlugin } from "../../../src/plugins/core";
 import { FR_LOCALE } from "../../test_helpers/constants";
+import { getCellContent } from "../../test_helpers/getters_helpers";
 
 jest.mock("../../../src/helpers/uuid", () => require("../../__mocks__/uuid"));
 
@@ -1986,6 +1987,33 @@ describe("Linear/Time charts", () => {
     expect(chart.data!.datasets![0].data![1]).toEqual({ y: undefined, x: "1/17/1900" });
   });
 
+  test("date chart: long labels are not truncated", () => {
+    model.dispatch("SET_FORMATTING", {
+      sheetId: model.getters.getActiveSheetId(),
+      target: [toZone("C2")],
+      format: "m/d/yyyy hh:mm:ss a",
+    });
+    setCellContent(model, "C2", "300");
+    setCellContent(model, "B2", "10");
+    const formattedValue = getCellContent(model, "C2");
+    expect(formattedValue).toEqual("10/26/1900 12:00:00 AM");
+    expect(formattedValue.length).toBeGreaterThan(MAX_CHAR_LABEL);
+    createChart(
+      model,
+      {
+        type: "line",
+        dataSets: ["B2"],
+        labelRange: "C2",
+        labelsAsText: false,
+        dataSetsHaveTitle: false,
+      },
+      chartId
+    );
+    const chart = (model.getters.getChartRuntime(chartId) as LineChartRuntime).chartJsConfig;
+    expect(chart.data!.labels![0]).toEqual(formattedValue);
+    expect(chart.data!.datasets![0].data![0]).toEqual({ y: 10, x: formattedValue });
+  });
+
   test("linear chart: label 0 isn't set to undefined", () => {
     setCellContent(model, "B2", "0");
     setCellContent(model, "B3", "1");