[FIX] chart: fix misalignment with trend line axis

Task Description

When inserting a trend line on a line chart, depending on the data
we sometimes have a misplaced trend line axis giving an alignment
issue between the trend line and the original plot. For example,
if you have these data :
A1 : A, B1 : 1
A2 : 2, B2 : 2
A3 : 3, B3 : 3
A4 : 4, B4 : 4
A5 : 5, B5 : 5
A6 : 6, B6 : 6
A7 : 7, B7 : 7
A8 : 8, B8 : 8

When you try to insert a linear trend line, the line won't be
aligned to the original line chart. This PR aims to fix this by
changing the labels and axis of the trend line.

Related Task

closes #5422

Task: 4251695
X-original-commit: 0b78315
Signed-off-by: Rémi Rahir (rar) <[email protected]>
Signed-off-by: Hendrickx Anthony (anhe) <[email protected]>

Author: anhe-odoo

src/functions/helper_statistical.ts

@@ -1,3 +1,4 @@
+import { Point } from "chart.js";
 import { DEFAULT_WINDOW_SIZE } from "../constants";
 import { isNumber, parseDateTime, range } from "../helpers";
 import { _t } from "../translation";
@@ -288,19 +289,20 @@ export function predictLinearValues(
 
 export function getMovingAverageValues(
   dataset: number[],
+  labels: number[],
   windowSize = DEFAULT_WINDOW_SIZE
-): (number | null)[] {
-  const values: (number | null)[] = [];
+): Point[] {
+  const values: Point[] = [];
   // Fill the starting values with null until we have a full window
   for (let i = 0; i < windowSize - 1; i++) {
-    values.push(null);
+    values.push({ x: labels[i], y: NaN });
   }
   for (let i = 0; i <= dataset.length - windowSize; i++) {
     let sum = 0;
     for (let j = i; j < i + windowSize; j++) {
       sum += dataset[j];
     }
-    values.push(sum / windowSize);
+    values.push({ x: labels[i + windowSize - 1], y: sum / windowSize });
   }
   return values;
 }

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

@@ -1,3 +1,4 @@
+import { Point } from "chart.js";
 import { ChartTerms } from "../../../../components/translations_terms";
 import {
   evaluatePolynomial,
@@ -60,7 +61,7 @@ export function getBarChartData(
     ? { x: leftAxisFormat || rightAxisFormat }
     : { y: leftAxisFormat, y1: rightAxisFormat };
 
-  const trendDataSetsValues: ((number | null)[] | undefined)[] = [];
+  const trendDataSetsValues: (Point[] | undefined)[] = [];
   for (const index in dataSetsValues) {
     const { data } = dataSetsValues[index];
 
@@ -139,7 +140,7 @@ export function getLineChartData(
   const labelsFormat = getChartLabelFormat(getters, labelRange);
   const axisFormats = { y: leftAxisFormat, y1: rightAxisFormat, x: labelsFormat };
 
-  const trendDataSetsValues: ((number | null)[] | undefined)[] = [];
+  const trendDataSetsValues: (Point[] | undefined)[] = [];
   for (const index in dataSetsValues) {
     let { data } = dataSetsValues[index];
     if (definition.cumulative) {
@@ -349,20 +350,20 @@ export function getTrendDatasetForLineChart(
   }
   const numberOfStep = 5 * trendLabels.length;
   const step = (xmax - xmin) / numberOfStep;
-  const newLabels = range(xmin, xmax + step / 2, step);
-  const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
-  if (!newValues.length) {
+  const trendNewLabels = range(xmin, xmax + step / 2, step);
+  const trendValues = interpolateData(config, filteredValues, filteredLabels, trendNewLabels);
+  if (!trendValues.length) {
     return;
   }
-  return newValues;
+  return trendValues;
 }
 
 function interpolateData(
   config: TrendConfiguration,
   values: number[],
   labels: number[],
   newLabels: number[]
-): (number | null)[] {
+): Point[] {
   if (values.length < 2 || labels.length < 2 || newLabels.length === 0) {
     return [];
   }
@@ -376,13 +377,21 @@ function interpolateData(
       case "polynomial": {
         const order = config.order;
         if (!order) {
-          return Array.from({ length: newLabels.length }, () => NaN);
+          return newLabels.map((x) => ({ x, y: NaN }));
         }
         if (order === 1) {
-          return predictLinearValues([values], [normalizedLabels], [normalizedNewLabels], true)[0];
+          return predictLinearValues(
+            [values],
+            [normalizedLabels],
+            [normalizedNewLabels],
+            true
+          )[0].map((y, i) => ({ x: newLabels[i], y }));
         }
         const coeffs = polynomialRegression(values, normalizedLabels, order, true).flat();
-        return normalizedNewLabels.map((v) => evaluatePolynomial(coeffs, v, order));
+        return normalizedNewLabels.map((x, i) => ({
+          x: newLabels[i],
+          y: evaluatePolynomial(coeffs, x, order),
+        }));
       }
       case "exponential": {
         const positiveLogValues: number[] = [];
@@ -394,28 +403,28 @@ function interpolateData(
           }
         }
         if (!filteredLabels.length) {
-          return Array.from({ length: newLabels.length }, () => NaN);
+          return newLabels.map((x) => ({ x, y: NaN }));
         }
         return expM(
           predictLinearValues([positiveLogValues], [filteredLabels], [normalizedNewLabels], true)
-        )[0];
+        )[0].map((y, i) => ({ x: newLabels[i], y }));
       }
       case "logarithmic": {
         return predictLinearValues(
           [values],
           logM([normalizedLabels]),
           logM([normalizedNewLabels]),
           true
-        )[0];
+        )[0].map((y, i) => ({ x: newLabels[i], y }));
       }
       case "trailingMovingAverage": {
-        return getMovingAverageValues(values, config.window);
+        return getMovingAverageValues(values, labels, config.window);
       }
       default:
-        return Array.from({ length: newLabels.length }, () => NaN);
+        return newLabels.map((x) => ({ x, y: NaN }));
     }
   } catch (e) {
-    return Array.from({ length: newLabels.length }, () => NaN);
+    return newLabels.map((x) => ({ x, y: NaN }));
   }
 }
 

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

@@ -1,4 +1,4 @@
-import { ChartDataset } from "chart.js";
+import { ChartDataset, Point } from "chart.js";
 import {
   BACKGROUND_CHART_COLOR,
   CHART_WATERFALL_NEGATIVE_COLOR,
@@ -328,7 +328,7 @@ export function getGeoChartDatasets(
 function getTrendingLineDataSet(
   dataset: ChartDataset<"line" | "bar">,
   config: TrendConfiguration,
-  data: (number | null)[]
+  data: Point[]
 ): ChartDataset<"line"> {
   const defaultBorderColor = colorToRGBA(dataset.backgroundColor as Color);
   defaultBorderColor.a = 1;

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

@@ -107,14 +107,18 @@ export function getLineChartScales(
     /* We add a second x axis here to draw the trend lines, with the labels length being
      * set so that the second axis points match the classical x axis
      */
-    const maxLength = Math.max(...trendDatasets.map((trendDataset) => trendDataset?.length || 0));
     scales[TREND_LINE_XAXIS_ID] = {
       ...(scales.x as any),
-      type: "category",
-      labels: range(0, maxLength).map((x) => x.toString()),
-      offset: false,
       display: false,
     };
+    if (axisType === "category") {
+      /* We add a second x axis here to draw the trend lines, with the labels length being
+       * set so that the second axis points match the classical x axis
+       */
+      const maxLength = Math.max(...trendDatasets.map((trendDataset) => trendDataset?.length || 0));
+      scales[TREND_LINE_XAXIS_ID]!["labels"] = range(0, maxLength).map((x) => x.toString());
+      scales[TREND_LINE_XAXIS_ID]!["offset"] = false;
+    }
   }
 
   return scales;

src/types/chart/chart.ts

@@ -1,3 +1,4 @@
+import { Point } from "chart.js";
 import { Align, Color, Format, Locale, Range } from "../../types";
 import { XlsxHexColor } from "../xlsx";
 import { BarChartDefinition, BarChartRuntime } from "./bar_chart";
@@ -169,7 +170,7 @@ export interface ChartRuntimeGenerationArgs {
   axisFormats: ChartAxisFormats;
   labels: string[];
   locale: Locale;
-  trendDataSetsValues?: ((number | null)[] | undefined)[];
+  trendDataSetsValues?: (Point[] | undefined)[];
   axisType?: AxisType;
 }