@odoo/o-spreadsheet 18.1.0-alpha.3 → 18.1.0-alpha.4

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.1.0-alpha.3
- * @date 2024-11-08T12:18:22.841Z
- * @hash 96dcfab
+ * @version 18.1.0-alpha.4
+ * @date 2024-11-13T15:06:47.769Z
+ * @hash e1ad985
  */
 
 (function (exports, owl) {
@@ -2562,6 +2562,18 @@
       }
       return result;
   }
+  function* iterateItemIdsPositions(sheetId, itemIdsByZones) {
+      for (const zoneXc in itemIdsByZones) {
+          const zone = toZone(zoneXc);
+          const itemId = itemIdsByZones[zoneXc];
+          for (let row = zone.top; row <= zone.bottom; row++) {
+              for (let col = zone.left; col <= zone.right; col++) {
+                  const position = { sheetId, col, row };
+                  yield [position, itemId];
+              }
+          }
+      }
+  }
 
   // -----------------------------------------------------------------------------
   // Date Type
@@ -9255,22 +9267,6 @@ stores.inject(MyMetaStore, storeInstance);
           y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
       }; // Position at the center of the scrollable viewport
   }
-  function getChartAxisTitleRuntime(design) {
-      if (design?.title?.text) {
-          const { text, color, align, italic, bold } = design.title;
-          return {
-              display: true,
-              text,
-              color,
-              font: {
-                  style: italic ? "italic" : "normal",
-                  weight: bold ? "bold" : "normal",
-              },
-              align: align === "left" ? "start" : align === "right" ? "end" : "center",
-          };
-      }
-      return;
-  }
   function getDefinedAxis(definition) {
       let useLeftAxis = false, useRightAxis = false;
       if ("horizontal" in definition && definition.horizontal) {
@@ -9287,148 +9283,6 @@ stores.inject(MyMetaStore, storeInstance);
       useLeftAxis ||= !useRightAxis;
       return { useLeftAxis, useRightAxis };
   }
-  function getChartAxis(definition, position, type, options) {
-      const { useLeftAxis, useRightAxis } = getDefinedAxis(definition);
-      if ((position === "left" && !useLeftAxis) || (position === "right" && !useRightAxis)) {
-          return undefined;
-      }
-      const fontColor = chartFontColor(definition.background);
-      let design;
-      if (position === "bottom") {
-          design = definition.axesDesign?.x;
-      }
-      else if (position === "left") {
-          design = definition.axesDesign?.y;
-      }
-      else {
-          design = definition.axesDesign?.y1;
-      }
-      if (type === "values") {
-          const displayGridLines = position === "left" ||
-              (position === "right" && !useLeftAxis) ||
-              (definition.type === "bar" && definition.horizontal === true);
-          return {
-              position: position,
-              title: getChartAxisTitleRuntime(design),
-              grid: {
-                  display: displayGridLines,
-              },
-              beginAtZero: true,
-              stacked: options?.stacked,
-              ticks: {
-                  color: fontColor,
-                  callback: formatTickValue(options),
-              },
-          };
-      }
-      else {
-          return {
-              ticks: {
-                  padding: 5,
-                  color: fontColor,
-              },
-              grid: {
-                  display: definition.type === "scatter",
-              },
-              stacked: options?.stacked,
-              title: getChartAxisTitleRuntime(design),
-          };
-      }
-  }
-  function computeChartPadding({ displayTitle, displayLegend, }) {
-      let top = 25;
-      if (displayTitle) {
-          top = 0;
-      }
-      else if (displayLegend) {
-          top = 10;
-      }
-      return { left: 20, right: 20, top, bottom: 10 };
-  }
-  function getTrendDatasetForBarChart(config, dataset) {
-      const filteredValues = [];
-      const filteredLabels = [];
-      const labels = [];
-      for (let i = 0; i < dataset.data.length; i++) {
-          if (typeof dataset.data[i] === "number") {
-              filteredValues.push(dataset.data[i]);
-              filteredLabels.push(i + 1);
-          }
-          labels.push(i + 1);
-      }
-      const newLabels = range(0.5, labels.length + 0.55, 0.2);
-      const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
-      if (!newValues.length) {
-          return;
-      }
-      return getFullTrendingLineDataSet(dataset, config, newValues);
-  }
-  function getFullTrendingLineDataSet(dataset, config, data) {
-      const defaultBorderColor = colorToRGBA(dataset.backgroundColor);
-      defaultBorderColor.a = 1;
-      const borderColor = config.color || lightenColor(rgbaToHex(defaultBorderColor), 0.5);
-      const backgroundRGBA = colorToRGBA(borderColor);
-      // @ts-expect-error
-      if (dataset?.fill) {
-          backgroundRGBA.a = LINE_FILL_TRANSPARENCY; // to support area charts
-      }
-      return {
-          ...dataset,
-          type: "line",
-          xAxisID: config.type !== "trailingMovingAverage" ? TREND_LINE_XAXIS_ID : "x",
-          label: dataset.label ? _t("Trend line for %s", dataset.label) : "",
-          data,
-          order: -1,
-          showLine: true,
-          pointRadius: 0,
-          backgroundColor: rgbaToHex(backgroundRGBA),
-          borderColor,
-          borderDash: [5, 5],
-          borderWidth: undefined,
-      };
-  }
-  function interpolateData(config, values, labels, newLabels) {
-      if (values.length < 2 || labels.length < 2 || newLabels.length === 0) {
-          return [];
-      }
-      const labelMin = Math.min(...labels);
-      const labelMax = Math.max(...labels);
-      const labelRange = labelMax - labelMin;
-      const normalizedLabels = labels.map((v) => (v - labelMin) / labelRange);
-      const normalizedNewLabels = newLabels.map((v) => (v - labelMin) / labelRange);
-      switch (config.type) {
-          case "polynomial": {
-              const order = config.order ?? 2;
-              if (order === 1) {
-                  return predictLinearValues([values], [normalizedLabels], [normalizedNewLabels], true)[0];
-              }
-              const coeffs = polynomialRegression(values, normalizedLabels, order, true).flat();
-              return normalizedNewLabels.map((v) => evaluatePolynomial(coeffs, v, order));
-          }
-          case "exponential": {
-              const positiveLogValues = [];
-              const filteredLabels = [];
-              for (let i = 0; i < values.length; i++) {
-                  if (values[i] > 0) {
-                      positiveLogValues.push(Math.log(values[i]));
-                      filteredLabels.push(normalizedLabels[i]);
-                  }
-              }
-              if (!filteredLabels.length) {
-                  return [];
-              }
-              return expM(predictLinearValues([positiveLogValues], [filteredLabels], [normalizedNewLabels], true))[0];
-          }
-          case "logarithmic": {
-              return predictLinearValues([values], logM([normalizedLabels]), logM([normalizedNewLabels]), true)[0];
-          }
-          case "trailingMovingAverage": {
-              return getMovingAverageValues(values, config.window);
-          }
-          default:
-              return [];
-      }
-  }
   function formatChartDatasetValue(axisFormats, locale) {
       return (value, axisId) => {
           const format = axisId ? axisFormats?.[axisId] : undefined;
@@ -9447,67 +9301,17 @@ stores.inject(MyMetaStore, storeInstance);
           });
       };
   }
-  function getChartColorsGenerator(definition, dataSetsSize) {
-      return new ColorGenerator(dataSetsSize, definition.dataSets.map((ds) => ds.backgroundColor));
-  }
   const CHART_AXIS_CHOICES = [
       { value: "left", label: _t("Left") },
       { value: "right", label: _t("Right") },
   ];
-  /* Callback used to make the legend interactive
-   * These are used to make the user able to hide/show a data series by
-   * clicking on the corresponding label in the legend. The onHover and
-   * onLeave callbacks are used to show a pointer when hovering an item
-   * of the legend so that the user knows it is clickable.
-   */
-  const INTERACTIVE_LEGEND_CONFIG = {
-      onHover: (event) => {
-          const target = event.native?.target;
-          if (!target) {
-              return;
-          }
-          //@ts-ignore
-          target.style.cursor = "pointer";
-      },
-      onLeave: (event) => {
-          const target = event.native?.target;
-          if (!target) {
-              return;
-          }
-          //@ts-ignore
-          target.style.cursor = "default";
-      },
-      onClick: (event, legendItem, legend) => {
-          if (!legend.legendItems) {
-              return;
-          }
-          const index = legend.legendItems.indexOf(legendItem);
-          if (legend.chart.isDatasetVisible(index)) {
-              legend.chart.hide(index);
-          }
-          else {
-              legend.chart.show(index);
-          }
-          event.native.preventDefault();
-          event.native.stopPropagation();
-      },
-  };
-  function getCustomLegendLabels(fontColor, legendLabelConfig) {
-      return {
-          labels: {
-              color: fontColor,
-              usePointStyle: true,
-              generateLabels: (chart) => chart.data.datasets.map((dataset, index) => ({
-                  text: dataset.label ?? "",
-                  fontColor,
-                  strokeStyle: dataset.borderColor,
-                  fillStyle: dataset.backgroundColor,
-                  hidden: !chart.isDatasetVisible(index),
-                  pointStyle: dataset.type === "line" ? "line" : "rect",
-                  ...legendLabelConfig,
-              })),
-          },
-      };
+  function getPieColors(colors, dataSetsValues) {
+      const pieColors = [];
+      const maxLength = largeMax(dataSetsValues.map((ds) => ds.data.length));
+      for (let i = 0; i <= maxLength; i++) {
+          pieColors.push(colors.next());
+      }
+      return pieColors;
   }
 
   /** This is a chartJS plugin that will draw the values of each data next to the point/bar/pie slice */
@@ -9533,9 +9337,10 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
               case "bar":
               case "line":
+              case "radar":
                   options.horizontal
                       ? drawHorizontalBarChartValues(chart, options, ctx)
-                      : drawLineOrBarChartValues(chart, options, ctx);
+                      : drawLineOrBarOrRadarChartValues(chart, options, ctx);
                   break;
           }
           ctx.restore();
@@ -9547,7 +9352,7 @@ stores.inject(MyMetaStore, storeInstance);
       ctx.lineWidth = 1;
       ctx.fillText(text, x, y);
   }
-  function drawLineOrBarChartValues(chart, options, ctx) {
+  function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
       const yMax = chart.chartArea.bottom;
       const yMin = chart.chartArea.top;
       const textsPositions = {};
@@ -9556,12 +9361,17 @@ stores.inject(MyMetaStore, storeInstance);
               return; // ignore trend lines
           }
           for (let i = 0; i < dataset._parsed.length; i++) {
-              const value = dataset._parsed[i].y;
-              const displayValue = options.callback(value - 0, dataset.yAxisID);
+              const parsedValue = dataset._parsed[i];
+              const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
+              if (isNaN(value)) {
+                  continue;
+              }
+              const axisId = chart.config.type === "radar" ? dataset.rAxisID : dataset.yAxisID;
+              const displayValue = options.callback(Number(value), axisId);
               const point = dataset.data[i];
               const xPosition = point.x;
               let yPosition = 0;
-              if (chart.config.type === "line") {
+              if (chart.config.type === "line" || chart.config.type === "radar") {
                   yPosition = point.y - 10;
               }
               else {
@@ -9594,8 +9404,11 @@ stores.inject(MyMetaStore, storeInstance);
               return; // ignore trend lines
           }
           for (let i = 0; i < dataset._parsed.length; i++) {
-              const value = dataset._parsed[i].x;
-              const displayValue = options.callback(value - 0, dataset.xAxisID);
+              const value = Number(dataset._parsed[i].x);
+              if (isNaN(value)) {
+                  continue;
+              }
+              const displayValue = options.callback(value, dataset.xAxisID);
               const point = dataset.data[i];
               const yPosition = point.y;
               let xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
@@ -22498,6 +22311,81 @@ stores.inject(MyMetaStore, storeInstance);
       return color;
   }
 
+  const CHART_COMMON_OPTIONS = {
+      // https://www.chartjs.org/docs/latest/general/responsive.html
+      responsive: true, // will resize when its container is resized
+      maintainAspectRatio: false, // doesn't maintain the aspect ratio (width/height =2 by default) so the user has the choice of the exact layout
+      elements: {
+          line: {
+              fill: false, // do not fill the area under line charts
+          },
+          point: {
+              hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
+          },
+      },
+      animation: false,
+  };
+  function truncateLabel(label) {
+      if (!label) {
+          return "";
+      }
+      if (label.length > MAX_CHAR_LABEL) {
+          return label.substring(0, MAX_CHAR_LABEL) + "…";
+      }
+      return label;
+  }
+  function chartToImage(runtime, figure, type) {
+      // wrap the canvas in a div with a fixed size because chart.js would
+      // fill the whole page otherwise
+      const div = document.createElement("div");
+      div.style.width = `${figure.width}px`;
+      div.style.height = `${figure.height}px`;
+      const canvas = document.createElement("canvas");
+      div.append(canvas);
+      canvas.setAttribute("width", figure.width.toString());
+      canvas.setAttribute("height", figure.height.toString());
+      // we have to add the canvas to the DOM otherwise it won't be rendered
+      document.body.append(div);
+      if ("chartJsConfig" in runtime) {
+          const config = deepCopy(runtime.chartJsConfig);
+          config.plugins = [backgroundColorChartJSPlugin];
+          const chart = new window.Chart(canvas, config);
+          const imgContent = chart.toBase64Image();
+          chart.destroy();
+          div.remove();
+          return imgContent;
+      }
+      else if (type === "scorecard") {
+          const design = getScorecardConfiguration(figure, runtime);
+          drawScoreChart(design, canvas);
+          const imgContent = canvas.toDataURL();
+          div.remove();
+          return imgContent;
+      }
+      else if (type === "gauge") {
+          drawGaugeChart(canvas, runtime);
+          const imgContent = canvas.toDataURL();
+          div.remove();
+          return imgContent;
+      }
+      return undefined;
+  }
+  /**
+   * Custom chart.js plugin to set the background color of the canvas
+   * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
+   */
+  const backgroundColorChartJSPlugin = {
+      id: "customCanvasBackgroundColor",
+      beforeDraw: (chart) => {
+          const { ctx } = chart;
+          ctx.save();
+          ctx.globalCompositeOperation = "destination-over";
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, chart.width, chart.height);
+          ctx.restore();
+      },
+  };
+
   /**
    * Represent a raw XML string
    */
@@ -23999,12 +23887,9 @@ stores.inject(MyMetaStore, storeInstance);
           return width;
       return Math.round((width / WIDTH_FACTOR) * 100) / 100;
   }
-  function extractStyle(cell, data) {
-      let style = {};
-      if (cell.style) {
-          style = data.styles[cell.style];
-      }
-      const format = extractFormat(cell, data);
+  function extractStyle(data, styleId, formatId, borderId) {
+      const style = styleId ? data.styles[styleId] : {};
+      const format = formatId ? data.formats[formatId] : undefined;
       const styles = {
           font: {
               size: style?.fontSize || DEFAULT_FONT_SIZE,
@@ -24018,7 +23903,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               : { reservedAttribute: "none" },
           numFmt: format ? { format: format, id: 0 /* id not used for export */ } : undefined,
-          border: cell.border || 0,
+          border: borderId || 0,
           alignment: {
               horizontal: style.align,
               vertical: style.verticalAlign
@@ -24033,12 +23918,6 @@ stores.inject(MyMetaStore, storeInstance);
       styles.font["italic"] = !!style?.italic || undefined;
       return styles;
   }
-  function extractFormat(cell, data) {
-      if (cell.format) {
-          return data.formats[cell.format];
-      }
-      return undefined;
-  }
   function normalizeStyle(construct, styles) {
       // Normalize this
       const numFmtId = convertFormat(styles["numFmt"], construct.numFmts);
@@ -24502,9 +24381,7 @@ stores.inject(MyMetaStore, storeInstance);
       }, {});
       for (let row of sheet.rows) {
           for (let cell of row.cells) {
-              cells[cell.xc] = {
-                  content: getCellValue(cell, hyperlinkMap, sharedStrings, warningManager),
-              };
+              cells[cell.xc] = getCellValue(cell, hyperlinkMap, sharedStrings, warningManager);
               if (cell.styleIndex) {
                   // + 1 : our indexes for normalized values begin at 1 and not 0
                   styles[cell.xc] = cell.styleIndex + 1;
@@ -24517,11 +24394,6 @@ stores.inject(MyMetaStore, storeInstance);
       for (let row of sheet.rows.filter((row) => row.styleIndex)) {
           for (let colIndex = 1; colIndex <= sheetDims[0]; colIndex++) {
               const xc = toXC(colIndex - 1, row.index - 1); // Excel indexes start at 1
-              let cell = cells[xc];
-              if (!cell) {
-                  cell = {};
-                  cells[xc] = cell;
-              }
               styles[xc] ??= row.styleIndex + 1;
               borders[xc] ??= data.styles[row.styleIndex].borderId + 1;
               formats[xc] ??= data.styles[row.styleIndex].numFmtId + 1;
@@ -24532,11 +24404,6 @@ stores.inject(MyMetaStore, storeInstance);
           for (let colIndex = col.min; colIndex <= Math.min(col.max, sheetDims[0]); colIndex++) {
               for (let rowIndex = 1; rowIndex <= sheetDims[1]; rowIndex++) {
                   const xc = toXC(colIndex - 1, rowIndex - 1); // Excel indexes start at 1
-                  let cell = cells[xc];
-                  if (!cell) {
-                      cell = {};
-                      cells[xc] = cell;
-                  }
                   styles[xc] ??= col.styleIndex + 1;
                   borders[xc] ??= data.styles[col.styleIndex].borderId + 1;
                   formats[xc] ??= data.styles[col.styleIndex].numFmtId + 1;
@@ -25029,11 +24896,11 @@ stores.inject(MyMetaStore, storeInstance);
               const tabRef = table.name + "[";
               for (let position of positions(toZone(table.ref))) {
                   const xc = toXC(position.col, position.row);
-                  const cell = sheet.cells[xc];
-                  if (cell && cell.content && cell.content.startsWith("=")) {
+                  let cellContent = sheet.cells[xc];
+                  if (cellContent?.startsWith("=")) {
                       let refIndex;
-                      while ((refIndex = cell.content.indexOf(tabRef)) !== -1) {
-                          let reference = cell.content.slice(refIndex + tabRef.length);
+                      while ((refIndex = cellContent.indexOf(tabRef)) !== -1) {
+                          let reference = cellContent.slice(refIndex + tabRef.length);
                           // Expression can either be tableName[colName] or tableName[[#This Row], [colName]]
                           let endIndex = reference.indexOf("]");
                           if (reference.startsWith(`[`)) {
@@ -25042,11 +24909,12 @@ stores.inject(MyMetaStore, storeInstance);
                           }
                           reference = reference.slice(0, endIndex);
                           const convertedRef = convertTableReference(reference, table, xc);
-                          cell.content =
-                              cell.content.slice(0, refIndex) +
+                          cellContent =
+                              cellContent.slice(0, refIndex) +
                                   convertedRef +
-                                  cell.content.slice(tabRef.length + refIndex + endIndex + 1);
+                                  cellContent.slice(tabRef.length + refIndex + endIndex + 1);
                       }
+                      sheet.cells[xc] = cellContent;
                   }
               }
           }
@@ -26553,7 +26421,7 @@ stores.inject(MyMetaStore, storeInstance);
       return relsFile;
   }
 
-  const EXCEL_IMPORT_VERSION = 21;
+  const EXCEL_IMPORT_VERSION = 24;
   class XlsxReader {
       warningManager;
       xmls;
@@ -27183,6 +27051,21 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return data;
       },
+  })
+      .add("migration_23", {
+      // Flatten cell content: { content: "value" } -> "value"
+      versionFrom: "23",
+      migrate(data) {
+          for (const sheet of data.sheets || []) {
+              for (const xc in sheet.cells) {
+                  const cell = sheet.cells[xc];
+                  if (cell) {
+                      sheet.cells[xc] = cell.content;
+                  }
+              }
+          }
+          return data;
+      },
   });
   function fixOverlappingFilters(data) {
       for (let sheet of data.sheets || []) {
@@ -27210,7 +27093,7 @@ stores.inject(MyMetaStore, storeInstance);
    * a breaking change is made in the way the state is handled, and an upgrade
    * function should be defined
    */
-  const CURRENT_VERSION = 23;
+  const CURRENT_VERSION = 24;
   const INITIAL_SHEET_ID = "Sheet1";
   /**
    * This function tries to load anything that could look like a valid
@@ -27474,6 +27357,7 @@ stores.inject(MyMetaStore, storeInstance);
           ...createEmptySheet(sheetId, name),
           charts: [],
           images: [],
+          cellValues: {},
       };
   }
   function createEmptyExcelWorkbookData() {
@@ -27736,10 +27620,480 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
+  const UNIT_LENGTH = {
+      second: 1000,
+      minute: 1000 * 60,
+      hour: 1000 * 3600,
+      day: 1000 * 3600 * 24,
+      month: 1000 * 3600 * 24 * 30,
+      year: 1000 * 3600 * 24 * 365,
+  };
+  const Milliseconds = {
+      inSeconds: function (milliseconds) {
+          return Math.floor(milliseconds / UNIT_LENGTH.second);
+      },
+      inMinutes: function (milliseconds) {
+          return Math.floor(milliseconds / UNIT_LENGTH.minute);
+      },
+      inHours: function (milliseconds) {
+          return Math.floor(milliseconds / UNIT_LENGTH.hour);
+      },
+      inDays: function (milliseconds) {
+          return Math.floor(milliseconds / UNIT_LENGTH.day);
+      },
+      inMonths: function (milliseconds) {
+          return Math.floor(milliseconds / UNIT_LENGTH.month);
+      },
+      inYears: function (milliseconds) {
+          return Math.floor(milliseconds / UNIT_LENGTH.year);
+      },
+  };
   /**
-   * This file contains helpers that are common to different runtime charts (mainly
-   * line, bar and pie charts)
+   * Regex to test if a format string is a date format that can be translated into a luxon time format
+   */
+  const timeFormatLuxonCompatible = /^((d|dd|m|mm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|yyyy|yy|hh|h|ss|a)$/i;
+  /** Get the time options for the XAxis of ChartJS */
+  function getChartTimeOptions(labels, labelFormat, locale) {
+      const luxonFormat = convertDateFormatForLuxon(labelFormat);
+      const timeUnit = getBestTimeUnitForScale(labels, luxonFormat, locale);
+      const displayFormats = {};
+      if (timeUnit) {
+          displayFormats[timeUnit] = luxonFormat;
+      }
+      return {
+          parser: luxonFormat,
+          displayFormats,
+          unit: timeUnit ?? false,
+      };
+  }
+  /**
+   * Convert the given date format into a format that moment.js understands.
+   *
+   * https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens
+   */
+  function convertDateFormatForLuxon(format) {
+      // "m" before "h" === month, "m" after "h" === minute
+      const indexH = format.indexOf("h");
+      if (indexH >= 0) {
+          format = format.slice(0, indexH).replace(/m/g, "M") + format.slice(indexH);
+      }
+      else {
+          format = format.replace(/m/g, "M");
+      }
+      // If we have an "a", we should display hours as AM/PM (h), otherwise display 24 hours format (H)
+      if (!format.includes("a")) {
+          format = format.replace(/h/g, "H");
+      }
+      return format;
+  }
+  /** Get the minimum time unit that the format is able to display */
+  function getFormatMinDisplayUnit(format) {
+      if (format.includes("s")) {
+          return "second";
+      }
+      else if (format.includes("m")) {
+          return "minute";
+      }
+      else if (format.includes("h") || format.includes("H")) {
+          return "hour";
+      }
+      else if (format.includes("d")) {
+          return "day";
+      }
+      else if (format.includes("M")) {
+          return "month";
+      }
+      return "year";
+  }
+  /**
+   * Returns the best time unit that should be used for the X axis of a chart in order to display all
+   * the labels correctly.
+   *
+   * There is two conditions :
+   *  - the format of the labels should be able to display the unit. For example if the format is "DD/MM/YYYY"
+   *    it makes no sense to try to use minutes in the X axis
+   *  - we want the "best fit" unit. For example if the labels span a period of several days, we want to use days
+   *    as a unit, but if they span 200 days, we'd like to use months instead
+   *
    */
+  function getBestTimeUnitForScale(labels, format, locale) {
+      const labelDates = labels.map((label) => parseDateTime(label, locale)?.jsDate);
+      if (labelDates.some((date) => date === undefined) || labels.length < 2) {
+          return undefined;
+      }
+      const labelsTimestamps = labelDates.map((date) => date.getTime());
+      const period = largeMax(labelsTimestamps) - largeMin(labelsTimestamps);
+      const minUnit = getFormatMinDisplayUnit(format);
+      if (UNIT_LENGTH.second >= UNIT_LENGTH[minUnit] && Milliseconds.inSeconds(period) < 180) {
+          return "second";
+      }
+      else if (UNIT_LENGTH.minute >= UNIT_LENGTH[minUnit] && Milliseconds.inMinutes(period) < 180) {
+          return "minute";
+      }
+      else if (UNIT_LENGTH.hour >= UNIT_LENGTH[minUnit] && Milliseconds.inHours(period) < 96) {
+          return "hour";
+      }
+      else if (UNIT_LENGTH.day >= UNIT_LENGTH[minUnit] && Milliseconds.inDays(period) < 90) {
+          return "day";
+      }
+      else if (UNIT_LENGTH.month >= UNIT_LENGTH[minUnit] && Milliseconds.inMonths(period) < 36) {
+          return "month";
+      }
+      return "year";
+  }
+
+  function getBarChartData(definition, dataSets, labelRange, getters) {
+      const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+      let labels = labelValues.formattedValues;
+      let dataSetsValues = getChartDatasetValues(getters, dataSets);
+      if (definition.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
+      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+      if (definition.aggregated) {
+          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+      }
+      const leftAxisFormat = getChartDatasetFormat(getters, dataSets, "left");
+      const rightAxisFormat = getChartDatasetFormat(getters, dataSets, "right");
+      const axisFormats = definition.horizontal
+          ? { x: leftAxisFormat || rightAxisFormat }
+          : { y: leftAxisFormat, y1: rightAxisFormat };
+      const trendDataSetsValues = [];
+      for (const index in dataSetsValues) {
+          const { data } = dataSetsValues[index];
+          const trend = definition.dataSets?.[index].trend;
+          if (!trend?.display || definition.horizontal) {
+              trendDataSetsValues.push(undefined);
+              continue;
+          }
+          const trendDataset = getTrendDatasetForBarChart(trend, data);
+          trendDataSetsValues.push(trendDataset);
+      }
+      return {
+          dataSetsValues,
+          trendDataSetsValues,
+          axisFormats,
+          labels,
+          locale: getters.getLocale(),
+      };
+  }
+  function getPyramidChartData(definition, dataSets, labelRange, getters) {
+      const barChartData = getBarChartData(definition, dataSets, labelRange, getters);
+      const barDataset = barChartData.dataSetsValues;
+      const pyramidDatasetValues = [];
+      if (barDataset[0]) {
+          const pyramidData = barDataset[0].data.map((value) => (value > 0 ? value : 0));
+          pyramidDatasetValues.push({ ...barDataset[0], data: pyramidData });
+      }
+      if (barDataset[1]) {
+          const pyramidData = barDataset[1].data.map((value) => (value > 0 ? -value : 0));
+          pyramidDatasetValues.push({ ...barDataset[1], data: pyramidData });
+      }
+      return {
+          ...barChartData,
+          dataSetsValues: pyramidDatasetValues,
+      };
+  }
+  function getLineChartData(definition, dataSets, labelRange, getters) {
+      const axisType = getChartAxisType(definition, labelRange, getters);
+      const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+      let labels = axisType === "linear" ? labelValues.values : labelValues.formattedValues;
+      let dataSetsValues = getChartDatasetValues(getters, dataSets);
+      if (definition.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
+      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+      if (axisType === "time") {
+          ({ labels, dataSetsValues } = fixEmptyLabelsForDateCharts(labels, dataSetsValues));
+      }
+      if (definition.aggregated) {
+          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+      }
+      const leftAxisFormat = getChartDatasetFormat(getters, dataSets, "left");
+      const rightAxisFormat = getChartDatasetFormat(getters, dataSets, "right");
+      const labelsFormat = getChartLabelFormat(getters, labelRange);
+      const axisFormats = { y: leftAxisFormat, y1: rightAxisFormat, x: labelsFormat };
+      const trendDataSetsValues = [];
+      for (const index in dataSetsValues) {
+          let { data } = dataSetsValues[index];
+          if (definition.cumulative) {
+              let accumulator = 0;
+              data = data.map((value) => {
+                  if (!isNaN(value)) {
+                      accumulator += parseFloat(value);
+                      return accumulator;
+                  }
+                  return value;
+              });
+              dataSetsValues[index] = { ...dataSetsValues[index], data };
+          }
+          const trend = definition.dataSets?.[index].trend;
+          if (!trend?.display) {
+              trendDataSetsValues.push(undefined);
+              continue;
+          }
+          trendDataSetsValues.push(getTrendDatasetForLineChart(trend, data, labels, axisType, getters.getLocale()));
+      }
+      return {
+          dataSetsValues,
+          axisFormats,
+          labels,
+          locale: getters.getLocale(),
+          trendDataSetsValues,
+          axisType,
+      };
+  }
+  function getPieChartData(definition, dataSets, labelRange, getters) {
+      const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+      let labels = labelValues.formattedValues;
+      let dataSetsValues = getChartDatasetValues(getters, dataSets);
+      if (definition.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
+      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+      if (definition.aggregated) {
+          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+      }
+      ({ dataSetsValues, labels } = filterNegativeValues(labels, dataSetsValues));
+      const dataSetFormat = getChartDatasetFormat(getters, dataSets, "left");
+      return {
+          dataSetsValues,
+          axisFormats: { y: dataSetFormat },
+          labels,
+          locale: getters.getLocale(),
+      };
+  }
+  function getRadarChartData(definition, dataSets, labelRange, getters) {
+      const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+      let labels = labelValues.formattedValues;
+      let dataSetsValues = getChartDatasetValues(getters, dataSets);
+      if (definition.dataSetsHaveTitle &&
+          dataSetsValues[0] &&
+          labels.length > dataSetsValues[0].data.length) {
+          labels.shift();
+      }
+      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+      if (definition.aggregated) {
+          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+      }
+      const dataSetFormat = getChartDatasetFormat(getters, dataSets, "left") ||
+          getChartDatasetFormat(getters, dataSets, "right");
+      const axisFormats = { r: dataSetFormat };
+      return {
+          dataSetsValues,
+          axisFormats,
+          labels,
+          locale: getters.getLocale(),
+      };
+  }
+  function getTrendDatasetForBarChart(config, data) {
+      const filteredValues = [];
+      const filteredLabels = [];
+      const labels = [];
+      for (let i = 0; i < data.length; i++) {
+          if (typeof data[i] === "number") {
+              filteredValues.push(data[i]);
+              filteredLabels.push(i + 1);
+          }
+          labels.push(i + 1);
+      }
+      const newLabels = range(0.5, labels.length + 0.55, 0.2);
+      const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
+      return newValues.length ? newValues : undefined;
+  }
+  function getTrendDatasetForLineChart(config, data, labels, axisType, locale) {
+      const filteredValues = [];
+      const filteredLabels = [];
+      const trendLabels = [];
+      const datasetLength = data.length;
+      if (datasetLength < 2) {
+          return;
+      }
+      switch (axisType) {
+          case "category":
+              for (let i = 0; i < datasetLength; i++) {
+                  if (typeof data[i] === "number") {
+                      filteredValues.push(data[i]);
+                      filteredLabels.push(i + 1);
+                  }
+                  trendLabels.push(i + 1);
+              }
+              break;
+          case "linear":
+              for (let i = 0; i < data.length; i++) {
+                  const label = Number(labels[i]);
+                  if (isNaN(label)) {
+                      continue;
+                  }
+                  if (typeof data[i] === "number") {
+                      filteredValues.push(data[i]);
+                      filteredLabels.push(label);
+                  }
+                  trendLabels.push(label);
+              }
+              break;
+          case "time":
+              for (let i = 0; i < data.length; i++) {
+                  const date = toNumber({ value: labels[i] }, locale);
+                  if (data[i] !== null) {
+                      filteredValues.push(data[i]);
+                      filteredLabels.push(date);
+                  }
+                  trendLabels.push(date);
+              }
+              break;
+      }
+      const xmin = Math.min(...trendLabels);
+      const xmax = Math.max(...trendLabels);
+      if (xmax === xmin) {
+          return;
+      }
+      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) {
+          return;
+      }
+      return newValues;
+  }
+  function interpolateData(config, values, labels, newLabels) {
+      if (values.length < 2 || labels.length < 2 || newLabels.length === 0) {
+          return [];
+      }
+      const labelMin = Math.min(...labels);
+      const labelMax = Math.max(...labels);
+      const labelRange = labelMax - labelMin;
+      const normalizedLabels = labels.map((v) => (v - labelMin) / labelRange);
+      const normalizedNewLabels = newLabels.map((v) => (v - labelMin) / labelRange);
+      switch (config.type) {
+          case "polynomial": {
+              const order = config.order ?? 2;
+              if (order === 1) {
+                  return predictLinearValues([values], [normalizedLabels], [normalizedNewLabels], true)[0];
+              }
+              const coeffs = polynomialRegression(values, normalizedLabels, order, true).flat();
+              return normalizedNewLabels.map((v) => evaluatePolynomial(coeffs, v, order));
+          }
+          case "exponential": {
+              const positiveLogValues = [];
+              const filteredLabels = [];
+              for (let i = 0; i < values.length; i++) {
+                  if (values[i] > 0) {
+                      positiveLogValues.push(Math.log(values[i]));
+                      filteredLabels.push(normalizedLabels[i]);
+                  }
+              }
+              if (!filteredLabels.length) {
+                  return [];
+              }
+              return expM(predictLinearValues([positiveLogValues], [filteredLabels], [normalizedNewLabels], true))[0];
+          }
+          case "logarithmic": {
+              return predictLinearValues([values], logM([normalizedLabels]), logM([normalizedNewLabels]), true)[0];
+          }
+          case "trailingMovingAverage": {
+              return getMovingAverageValues(values, config.window);
+          }
+          default:
+              return [];
+      }
+  }
+  function getChartAxisType(chart, labelRange, getters) {
+      if (isDateChart(chart, labelRange, getters) && isLuxonTimeAdapterInstalled()) {
+          return "time";
+      }
+      if (isLinearChart(chart, labelRange, getters)) {
+          return "linear";
+      }
+      return "category";
+  }
+  function isDateChart(definition, labelRange, getters) {
+      return !definition.labelsAsText && canBeDateChart(labelRange, getters);
+  }
+  function isLinearChart(definition, labelRange, getters) {
+      return !definition.labelsAsText && canBeLinearChart(labelRange, getters);
+  }
+  function canChartParseLabels(labelRange, getters) {
+      return canBeDateChart(labelRange, getters) || canBeLinearChart(labelRange, getters);
+  }
+  function canBeDateChart(labelRange, getters) {
+      if (!labelRange || !canBeLinearChart(labelRange, getters)) {
+          return false;
+      }
+      const labelFormat = getChartLabelFormat(getters, labelRange);
+      return Boolean(labelFormat && timeFormatLuxonCompatible.test(labelFormat));
+  }
+  function canBeLinearChart(labelRange, getters) {
+      if (!labelRange) {
+          return false;
+      }
+      const labels = getters.getRangeValues(labelRange);
+      if (labels.some((label) => isNaN(Number(label)) && label)) {
+          return false;
+      }
+      if (labels.every((label) => !label)) {
+          return false;
+      }
+      return true;
+  }
+  let missingTimeAdapterAlreadyWarned = false;
+  function isLuxonTimeAdapterInstalled() {
+      if (!window.Chart) {
+          return false;
+      }
+      // @ts-ignore
+      const adapter = new window.Chart._adapters._date({});
+      const isInstalled = adapter._id === "luxon";
+      if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
+          missingTimeAdapterAlreadyWarned = true;
+          console.warn("'chartjs-adapter-luxon' time adapter is not installed. Time scale axes are disabled.");
+      }
+      return isInstalled;
+  }
+  function filterNegativeValues(labels, datasets) {
+      const dataPointsIndexes = labels.reduce((indexes, label, i) => {
+          const shouldKeep = datasets.some((dataset) => {
+              const dataPoint = dataset.data[i];
+              return typeof dataPoint !== "number" || dataPoint >= 0;
+          });
+          if (shouldKeep) {
+              indexes.push(i);
+          }
+          return indexes;
+      }, []);
+      const filteredLabels = dataPointsIndexes.map((i) => labels[i] || "");
+      const filteredDatasets = datasets.map((dataset) => ({
+          ...dataset,
+          data: dataPointsIndexes.map((i) => {
+              const dataPoint = dataset.data[i];
+              return typeof dataPoint !== "number" || dataPoint >= 0 ? dataPoint : 0;
+          }),
+      }));
+      return { labels: filteredLabels, dataSetsValues: filteredDatasets };
+  }
+  function fixEmptyLabelsForDateCharts(labels, dataSetsValues) {
+      if (labels.length === 0 || labels.every((label) => !label)) {
+          return { labels, dataSetsValues };
+      }
+      const newLabels = [...labels];
+      const newDatasets = deepCopy(dataSetsValues);
+      for (let i = 0; i < newLabels.length; i++) {
+          if (!newLabels[i]) {
+              newLabels[i] = findNextDefinedValue(newLabels, i);
+              for (let ds of newDatasets) {
+                  ds.data[i] = undefined;
+              }
+          }
+      }
+      return { labels: newLabels, dataSetsValues: newDatasets };
+  }
   /**
    * Get the data from a dataSet
    */
@@ -27794,96 +28148,17 @@ stores.inject(MyMetaStore, storeInstance);
           })),
       };
   }
-  function truncateLabel(label) {
-      if (!label) {
-          return "";
-      }
-      if (label.length > MAX_CHAR_LABEL) {
-          return label.substring(0, MAX_CHAR_LABEL) + "…";
-      }
-      return label;
-  }
-  /**
-   * Get a default chart js configuration
-   */
-  function getDefaultChartJsRuntime(chart, labels, fontColor, { axisFormats, locale, truncateLabels = true, horizontalChart }) {
-      const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
-      const chartOptions = {
-          // https://www.chartjs.org/docs/latest/general/responsive.html
-          responsive: true, // will resize when its container is resized
-          maintainAspectRatio: false, // doesn't maintain the aspect ration (width/height =2 by default) so the user has the choice of the exact layout
-          layout: {
-              padding: {
-                  left: DEFAULT_CHART_PADDING,
-                  right: DEFAULT_CHART_PADDING,
-                  top: chartTitle.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
-                  bottom: DEFAULT_CHART_PADDING,
-              },
-          },
-          elements: {
-              line: {
-                  fill: false, // do not fill the area under line charts
-              },
-              point: {
-                  hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
-              },
-          },
-          animation: false,
-          plugins: {
-              title: {
-                  display: !!chartTitle.text,
-                  text: _t(chartTitle.text),
-                  color: chartTitle?.color ?? fontColor,
-                  align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
-                  font: {
-                      size: DEFAULT_CHART_FONT_SIZE,
-                      weight: chartTitle.bold ? "bold" : "normal",
-                      style: chartTitle.italic ? "italic" : "normal",
-                  },
-              },
-              legend: {
-                  // Disable default legend onClick (show/hide dataset), to allow us to set a global onClick on the chart container.
-                  // If we want to re-enable this in the future, we need to override the default onClick to stop the event propagation
-                  onClick: () => { },
-              },
-              tooltip: {
-                  callbacks: {
-                      label: function (tooltipItem) {
-                          const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
-                          // tooltipItem.parsed can be an object or a number for pie charts
-                          let yLabel = horizontalChart ? tooltipItem.parsed.x : tooltipItem.parsed.y;
-                          if (yLabel === undefined || yLabel === null) {
-                              yLabel = tooltipItem.parsed;
-                          }
-                          const axisId = horizontalChart
-                              ? tooltipItem.dataset.xAxisID
-                              : tooltipItem.dataset.yAxisID;
-                          const yLabelStr = formatChartDatasetValue(axisFormats, locale)(yLabel, axisId);
-                          return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
-                      },
-                  },
-              },
-          },
-      };
-      return {
-          type: chart.type,
-          options: chartOptions,
-          data: {
-              labels: truncateLabels ? labels.map(truncateLabel) : labels,
-              datasets: [],
-          },
-          platform: undefined, // This key is optional and will be set by chart.js
-          plugins: [],
-      };
-  }
   function getChartLabelFormat(getters, range) {
       if (!range)
           return undefined;
-      return getters.getEvaluatedCell({
-          sheetId: range.sheetId,
-          col: range.zone.left,
-          row: range.zone.top,
-      }).format;
+      const { sheetId, zone: { left, top, bottom }, } = range;
+      for (let row = top; row <= bottom; row++) {
+          const format = getters.getEvaluatedCell({ sheetId, col: left, row }).format;
+          if (format) {
+              return format;
+          }
+      }
+      return undefined;
   }
   function getChartLabelValues(getters, dataSets, labelRange) {
       let labels = { values: [], formattedValues: [] };
@@ -27975,6 +28250,218 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return datasetValues;
   }
+
+  function getBarChartDatasets(definition, args) {
+      const { dataSetsValues } = args;
+      const dataSets = [];
+      const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+      const trendDatasets = [];
+      for (const index in dataSetsValues) {
+          let { label, data } = dataSetsValues[index];
+          label = definition.dataSets?.[index].label || label;
+          const backgroundColor = colors.next();
+          const dataset = {
+              label,
+              data,
+              borderColor: BORDER_CHART_COLOR,
+              borderWidth: 1,
+              backgroundColor,
+              yAxisID: definition.horizontal ? "y" : definition.dataSets?.[index].yAxisId || "y",
+              xAxisID: "x",
+          };
+          dataSets.push(dataset);
+          const trendConfig = definition.dataSets?.[index].trend;
+          const trendData = args.trendDataSetsValues?.[index];
+          if (!trendConfig?.display || definition.horizontal || !trendData) {
+              continue;
+          }
+          trendDatasets.push(getTrendingLineDataSet(dataset, trendConfig, trendData));
+      }
+      dataSets.push(...trendDatasets);
+      return dataSets;
+  }
+  function getWaterfallDatasetAndLabels(definition, args) {
+      const { dataSetsValues, labels } = args;
+      const negativeColor = definition.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
+      const positiveColor = definition.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
+      const subTotalColor = definition.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
+      const backgroundColor = [];
+      const datasetValues = [];
+      const dataset = {
+          label: "",
+          data: datasetValues,
+          backgroundColor,
+      };
+      const labelsWithSubTotals = [];
+      let lastValue = 0;
+      for (const dataSetsValue of dataSetsValues) {
+          for (let i = 0; i < dataSetsValue.data.length; i++) {
+              const data = dataSetsValue.data[i];
+              labelsWithSubTotals.push(labels[i]);
+              if (isNaN(Number(data))) {
+                  datasetValues.push([lastValue, lastValue]);
+                  backgroundColor.push("");
+                  continue;
+              }
+              datasetValues.push([lastValue, data + lastValue]);
+              let color = data >= 0 ? positiveColor : negativeColor;
+              if (i === 0 && dataSetsValue === dataSetsValues[0] && definition.firstValueAsSubtotal) {
+                  color = subTotalColor;
+              }
+              backgroundColor.push(color);
+              lastValue += data;
+          }
+          if (definition.showSubTotals) {
+              labelsWithSubTotals.push(_t("Subtotal"));
+              datasetValues.push([0, lastValue]);
+              backgroundColor.push(subTotalColor);
+          }
+      }
+      return {
+          datasets: [dataset],
+          labels: labelsWithSubTotals.map(truncateLabel),
+      };
+  }
+  function getLineChartDatasets(definition, args) {
+      const { dataSetsValues, axisType, labels } = args;
+      const dataSets = [];
+      const areaChart = !!definition.fillArea;
+      const stackedChart = !!definition.stacked;
+      const trendDatasets = [];
+      const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+      for (let index = 0; index < dataSetsValues.length; index++) {
+          let { label, data } = dataSetsValues[index];
+          label = definition.dataSets?.[index].label || label;
+          const color = colors.next();
+          if (axisType && ["linear", "time"].includes(axisType)) {
+              // Replace empty string labels by undefined to make sure chartJS doesn't decide that "" is the same as 0
+              data = data.map((y, index) => ({ x: labels[index] || undefined, y }));
+          }
+          const dataset = {
+              label,
+              data,
+              tension: 0, // 0 -> render straight lines, which is much faster
+              borderColor: color,
+              backgroundColor: areaChart ? setColorAlpha(color, LINE_FILL_TRANSPARENCY) : color,
+              pointBackgroundColor: color,
+              fill: areaChart ? getFillingMode(index, stackedChart) : false,
+              yAxisID: definition.dataSets?.[index].yAxisId || "y",
+          };
+          dataSets.push(dataset);
+          const trendConfig = definition.dataSets?.[index].trend;
+          const trendData = args.trendDataSetsValues?.[index];
+          if (!trendConfig?.display || !trendData) {
+              continue;
+          }
+          trendDatasets.push(getTrendingLineDataSet(dataset, trendConfig, trendData));
+      }
+      dataSets.push(...trendDatasets);
+      return dataSets;
+  }
+  function getScatterChartDatasets(definition, args) {
+      const dataSets = getLineChartDatasets(definition, args);
+      for (const dataSet of dataSets) {
+          if (dataSet.xAxisID !== TREND_LINE_XAXIS_ID) {
+              dataSet.showLine = false;
+          }
+      }
+      return dataSets;
+  }
+  function getPieChartDatasets(definition, args) {
+      const { dataSetsValues } = args;
+      const dataSets = [];
+      const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
+      const backgroundColor = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
+      for (const { label, data } of dataSetsValues) {
+          const dataset = {
+              label,
+              data,
+              borderColor: BACKGROUND_CHART_COLOR,
+              backgroundColor,
+              hoverOffset: 30,
+          };
+          dataSets.push(dataset);
+      }
+      return dataSets;
+  }
+  function getComboChartDatasets(definition, args) {
+      const { dataSetsValues } = args;
+      const dataSets = [];
+      const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+      const trendDatasets = [];
+      for (let index = 0; index < dataSetsValues.length; index++) {
+          let { label, data } = dataSetsValues[index];
+          label = definition.dataSets?.[index].label || label;
+          const design = definition.dataSets?.[index];
+          const color = colors.next();
+          const type = design?.type ?? "line";
+          const dataset = {
+              label: label,
+              data,
+              borderColor: color,
+              backgroundColor: color,
+              yAxisID: definition.dataSets?.[index].yAxisId || "y",
+              xAxisID: "x",
+              type,
+              order: type === "bar" ? dataSetsValues.length + index : index,
+          };
+          dataSets.push(dataset);
+          const trendConfig = definition.dataSets?.[index].trend;
+          const trendData = args.trendDataSetsValues?.[index];
+          if (!trendConfig?.display || !trendData) {
+              continue;
+          }
+          trendDatasets.push(getTrendingLineDataSet(dataset, trendConfig, trendData));
+      }
+      dataSets.push(...trendDatasets);
+      return dataSets;
+  }
+  function getRadarChartDatasets(definition, args) {
+      const { dataSetsValues } = args;
+      const datasets = [];
+      const fill = definition.fillArea ?? false;
+      const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+      for (let i = 0; i < dataSetsValues.length; i++) {
+          let { label, data } = dataSetsValues[i];
+          if (definition.dataSets?.[i]?.label) {
+              label = definition.dataSets[i].label;
+          }
+          const borderColor = colors.next();
+          const dataset = {
+              label,
+              data,
+              borderColor,
+              backgroundColor: borderColor,
+          };
+          if (fill) {
+              dataset.backgroundColor = setColorAlpha(borderColor, LINE_FILL_TRANSPARENCY);
+              dataset.fill = "start"; // fills from the start of the axes (default is to start at 0)
+          }
+          datasets.push(dataset);
+      }
+      return datasets;
+  }
+  function getTrendingLineDataSet(dataset, config, data) {
+      const defaultBorderColor = colorToRGBA(dataset.backgroundColor);
+      defaultBorderColor.a = 1;
+      const borderColor = config.color || lightenColor(rgbaToHex(defaultBorderColor), 0.5);
+      return {
+          type: "line",
+          xAxisID: TREND_LINE_XAXIS_ID,
+          yAxisID: dataset.yAxisID,
+          label: dataset.label ? _t("Trend line for %s", dataset.label) : "",
+          data,
+          order: -1,
+          showLine: true,
+          pointRadius: 0,
+          backgroundColor: borderColor,
+          borderColor,
+          borderDash: [5, 5],
+          borderWidth: undefined,
+          fill: false,
+          pointBackgroundColor: borderColor,
+      };
+  }
   /**
    * If the chart is a stacked area chart, we want to fill until the next dataset.
    * If the chart is a simple area chart, we want to fill until the origin (bottom axis).
@@ -27987,57 +28474,639 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return index === 0 ? "origin" : "-1";
   }
-  function chartToImage(runtime, figure, type) {
-      // wrap the canvas in a div with a fixed size because chart.js would
-      // fill the whole page otherwise
-      const div = document.createElement("div");
-      div.style.width = `${figure.width}px`;
-      div.style.height = `${figure.height}px`;
-      const canvas = document.createElement("canvas");
-      div.append(canvas);
-      canvas.setAttribute("width", figure.width.toString());
-      canvas.setAttribute("height", figure.height.toString());
-      // we have to add the canvas to the DOM otherwise it won't be rendered
-      document.body.append(div);
-      if ("chartJsConfig" in runtime) {
-          const config = deepCopy(runtime.chartJsConfig);
-          config.plugins = [backgroundColorChartJSPlugin];
-          const chart = new window.Chart(canvas, config);
-          const imgContent = chart.toBase64Image();
-          chart.destroy();
-          div.remove();
-          return imgContent;
-      }
-      else if (type === "scorecard") {
-          const design = getScorecardConfiguration(figure, runtime);
-          drawScoreChart(design, canvas);
-          const imgContent = canvas.toDataURL();
-          div.remove();
-          return imgContent;
-      }
-      else if (type === "gauge") {
-          drawGaugeChart(canvas, runtime);
-          const imgContent = canvas.toDataURL();
-          div.remove();
-          return imgContent;
+  function getChartColorsGenerator(definition, dataSetsSize) {
+      return new ColorGenerator(dataSetsSize, definition.dataSets?.map((ds) => ds.backgroundColor) || []);
+  }
+
+  function getCommonChartLayout(definition) {
+      // TODO FIXME: this is unused ATM. All the charts should probably use this instead oh whatever padding they are using now
+      // also look into how DEFAULT_CHART_PADDING is used in scorecards, it look strange
+      return {
+          padding: {
+              left: DEFAULT_CHART_PADDING,
+              right: DEFAULT_CHART_PADDING,
+              top: definition.title?.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
+              bottom: DEFAULT_CHART_PADDING,
+          },
+      };
+  }
+  function getBarChartLayout(definition) {
+      return {
+          padding: computeChartPadding({
+              displayTitle: !!definition.title?.text,
+              displayLegend: definition.legendPosition === "top",
+          }),
+      };
+  }
+  function getLineChartLayout(definition) {
+      return {
+          padding: computeChartPadding({
+              displayTitle: !!definition.title?.text,
+              displayLegend: definition.legendPosition === "top",
+          }),
+      };
+  }
+  function getPieChartLayout(definition) {
+      return {
+          padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 },
+      };
+  }
+  function getWaterfallChartLayout(definition) {
+      return {
+          padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 },
+      };
+  }
+  function computeChartPadding({ displayTitle, displayLegend, }) {
+      let top = 25;
+      if (displayTitle) {
+          top = 0;
+      }
+      else if (displayLegend) {
+          top = 10;
+      }
+      return { left: 20, right: 20, top, bottom: 10 };
+  }
+
+  function getLegendDisplayOptions(definition, args) {
+      return {
+          display: definition.legendPosition !== "none",
+          position: definition.legendPosition !== "none" ? definition.legendPosition : undefined,
+      };
+  }
+  function getBarChartLegend(definition, args) {
+      return {
+          ...INTERACTIVE_LEGEND_CONFIG,
+          ...getLegendDisplayOptions(definition),
+          ...getCustomLegendLabels(chartFontColor(definition.background), {
+              pointStyle: "rect",
+              lineWidth: 3,
+          }),
+      };
+  }
+  function getLineChartLegend(definition, args) {
+      const filled = definition.fillArea;
+      const pointStyle = filled ? "rect" : "line";
+      const lineWidth = filled ? 2 : 3;
+      return {
+          ...INTERACTIVE_LEGEND_CONFIG,
+          ...getLegendDisplayOptions(definition),
+          ...getCustomLegendLabels(chartFontColor(definition.background), {
+              pointStyle,
+              lineWidth,
+          }),
+      };
+  }
+  function getPieChartLegend(definition, args) {
+      const { dataSetsValues } = args;
+      const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
+      const colors = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
+      return {
+          ...getLegendDisplayOptions(definition),
+          labels: {
+              color: chartFontColor(definition.background),
+              usePointStyle: true,
+              //@ts-ignore
+              generateLabels: (c) => 
+              //@ts-ignore
+              c.data.labels.map((label, index) => ({
+                  text: label,
+                  strokeStyle: colors[index],
+                  fillStyle: colors[index],
+                  pointStyle: "rect",
+                  hidden: false,
+                  lineWidth: 2,
+              })),
+          },
+      };
+  }
+  function getScatterChartLegend(definition, args) {
+      return {
+          ...INTERACTIVE_LEGEND_CONFIG,
+          ...getLegendDisplayOptions(definition),
+          labels: {
+              color: chartFontColor(definition.background),
+              boxHeight: 6,
+              usePointStyle: true,
+          },
+      };
+  }
+  function getComboChartLegend(definition, args) {
+      return {
+          ...INTERACTIVE_LEGEND_CONFIG,
+          ...getLegendDisplayOptions(definition),
+          ...getCustomLegendLabels(chartFontColor(definition.background), {
+              lineWidth: 3,
+          }),
+      };
+  }
+  function getWaterfallChartLegend(definition, args) {
+      const fontColor = chartFontColor(definition.background);
+      const negativeColor = definition.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
+      const positiveColor = definition.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
+      const subTotalColor = definition.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
+      return {
+          ...getLegendDisplayOptions(definition),
+          labels: {
+              usePointStyle: true,
+              generateLabels: () => {
+                  const legendValues = [
+                      {
+                          text: _t("Positive values"),
+                          fontColor,
+                          fillStyle: positiveColor,
+                          strokeStyle: positiveColor,
+                          pointStyle: "rect",
+                      },
+                      {
+                          text: _t("Negative values"),
+                          fontColor,
+                          fillStyle: negativeColor,
+                          strokeStyle: negativeColor,
+                          pointStyle: "rect",
+                      },
+                  ];
+                  if (definition.showSubTotals || definition.firstValueAsSubtotal) {
+                      legendValues.push({
+                          text: _t("Subtotals"),
+                          fontColor,
+                          fillStyle: subTotalColor,
+                          strokeStyle: subTotalColor,
+                          pointStyle: "rect",
+                      });
+                  }
+                  return legendValues;
+              },
+          },
+      };
+  }
+  function getRadarChartLegend(definition, args) {
+      const fill = definition.fillArea ?? false;
+      const pointStyle = fill ? "rect" : "line";
+      const lineWidth = fill ? 2 : 3;
+      return {
+          ...INTERACTIVE_LEGEND_CONFIG,
+          ...getLegendDisplayOptions(definition),
+          ...getCustomLegendLabels(chartFontColor(definition.background), {
+              pointStyle,
+              lineWidth,
+          }),
+      };
+  }
+  /* Callback used to make the legend interactive
+   * These are used to make the user able to hide/show a data series by
+   * clicking on the corresponding label in the legend. The onHover and
+   * onLeave callbacks are used to show a pointer when hovering an item
+   * of the legend so that the user knows it is clickable.
+   */
+  const INTERACTIVE_LEGEND_CONFIG = {
+      onHover: (event) => {
+          const target = event.native?.target;
+          if (!target) {
+              return;
+          }
+          //@ts-ignore
+          target.style.cursor = "pointer";
+      },
+      onLeave: (event) => {
+          const target = event.native?.target;
+          if (!target) {
+              return;
+          }
+          //@ts-ignore
+          target.style.cursor = "default";
+      },
+      onClick: (event, legendItem, legend) => {
+          if (!legend.legendItems) {
+              return;
+          }
+          const index = legend.legendItems.indexOf(legendItem);
+          if (legend.chart.isDatasetVisible(index)) {
+              legend.chart.hide(index);
+          }
+          else {
+              legend.chart.show(index);
+          }
+          event.native.preventDefault();
+          event.native.stopPropagation();
+      },
+  };
+  function getCustomLegendLabels(fontColor, legendLabelConfig) {
+      return {
+          labels: {
+              color: fontColor,
+              usePointStyle: true,
+              generateLabels: (chart) => chart.data.datasets.map((dataset, index) => ({
+                  text: dataset.label ?? "",
+                  fontColor,
+                  strokeStyle: dataset.borderColor,
+                  fillStyle: dataset.backgroundColor,
+                  hidden: !chart.isDatasetVisible(index),
+                  pointStyle: dataset.type === "line" ? "line" : "rect",
+                  ...legendLabelConfig,
+              })),
+          },
+      };
+  }
+
+  function getBarChartScales(definition, args) {
+      let scales = {};
+      const { trendDataSetsValues: trendDatasets, locale, axisFormats } = args;
+      const options = { stacked: definition.stacked, locale: locale };
+      if (definition.horizontal) {
+          scales.x = getChartAxis(definition, "bottom", "values", { ...options, format: axisFormats?.x });
+          scales.y = getChartAxis(definition, "left", "labels", options);
+      }
+      else {
+          scales.x = getChartAxis(definition, "bottom", "labels", options);
+          const leftAxisOptions = { ...options, format: axisFormats?.y };
+          scales.y = getChartAxis(definition, "left", "values", leftAxisOptions);
+          const rightAxisOptions = { ...options, format: axisFormats?.y1 };
+          scales.y1 = getChartAxis(definition, "right", "values", rightAxisOptions);
+      }
+      scales = removeFalsyAttributes(scales);
+      if (trendDatasets && trendDatasets.length && trendDatasets.some(isDefined)) {
+          /* 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,
+              labels: Array(maxLength).fill(""),
+              offset: false,
+              display: false,
+          };
+      }
+      return scales;
+  }
+  function getLineChartScales(definition, args) {
+      const { locale, axisType, trendDataSetsValues: trendDatasets, labels, axisFormats } = args;
+      const labelFormat = axisFormats?.x;
+      const stacked = definition.stacked;
+      let scales = {
+          x: getChartAxis(definition, "bottom", "labels", { locale }),
+          y: getChartAxis(definition, "left", "values", { locale, stacked, format: axisFormats?.y }),
+          y1: getChartAxis(definition, "right", "values", { locale, stacked, format: axisFormats?.y1 }),
+      };
+      scales = removeFalsyAttributes(scales);
+      if (axisType === "time" && labels && labelFormat) {
+          const axis = {
+              type: "time",
+              time: getChartTimeOptions(labels, labelFormat, locale),
+          };
+          Object.assign(scales.x, axis);
+          scales.x.ticks.maxTicksLimit = 15;
+      }
+      else if (axisType === "linear") {
+          scales.x.type = "linear";
+          scales.x.ticks.callback = (value) => formatValue(value, { format: labelFormat, locale });
+      }
+      if (trendDatasets && trendDatasets.length && trendDatasets.some(isDefined)) {
+          /* 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,
+              type: "category",
+              labels: range(0, maxLength).map((x) => x.toString()),
+              offset: false,
+              display: false,
+          };
+      }
+      return scales;
+  }
+  function getScatterChartScales(definition, args) {
+      const lineScales = getLineChartScales(definition, args);
+      return {
+          ...lineScales,
+          x: {
+              ...lineScales.x,
+              grid: { display: true },
+          },
+      };
+  }
+  function getWaterfallChartScales(definition, args) {
+      const { locale, axisFormats } = args;
+      const format = axisFormats?.y || axisFormats?.y1;
+      definition.dataSets;
+      const scales = {
+          x: {
+              ...getChartAxis(definition, "bottom", "labels", { locale }),
+              grid: { display: false },
+          },
+          y: {
+              // TODO FIXME: we should probably remove definition.verticalAxisPosition and put everything inside axesDesign/datasets
+              // like the other charts. We cannot use helpers like `getChartAxis` here because they look into definition.dataSet
+              // which have plain wrong information, eg. the yAxisId of the dataset being "y" when the data is actually displayed
+              // on the axis to the right.
+              position: definition.verticalAxisPosition,
+              ticks: {
+                  color: chartFontColor(definition.background),
+                  callback: formatTickValue({ locale, format }),
+              },
+              grid: {
+                  lineWidth: (context) => (context.tick.value === 0 ? 2 : 1),
+              },
+              title: getChartAxisTitleRuntime(definition.axesDesign?.y),
+          },
+      };
+      const verticalScale = scales?.y || scales?.y1;
+      if (verticalScale) {
+          verticalScale.grid = { lineWidth: (context) => (context.tick.value === 0 ? 2 : 1) };
+      }
+      return scales;
+  }
+  function getPyramidChartScales(definition, args) {
+      const scales = getBarChartScales(definition, args);
+      const scalesXCallback = scales.x.ticks.callback;
+      scales.x.ticks.callback = (value) => scalesXCallback(Math.abs(value));
+      return scales;
+  }
+  function getRadarChartScales(definition, args) {
+      const { locale, axisFormats } = args;
+      return {
+          r: {
+              ticks: {
+                  callback: formatTickValue({ format: axisFormats?.r, locale }),
+                  backdropColor: definition.background || "#FFFFFF",
+              },
+              pointLabels: { color: chartFontColor(definition.background) },
+          },
+      };
+  }
+  function getChartAxisTitleRuntime(design) {
+      if (design?.title?.text) {
+          const { text, color, align, italic, bold } = design.title;
+          return {
+              display: true,
+              text,
+              color,
+              font: {
+                  style: italic ? "italic" : "normal",
+                  weight: bold ? "bold" : "normal",
+              },
+              align: align === "left" ? "start" : align === "right" ? "end" : "center",
+          };
+      }
+      return;
+  }
+  function getChartAxis(definition, position, type, options) {
+      const { useLeftAxis, useRightAxis } = getDefinedAxis(definition);
+      if ((position === "left" && !useLeftAxis) || (position === "right" && !useRightAxis)) {
+          return undefined;
+      }
+      const fontColor = chartFontColor(definition.background);
+      let design;
+      if (position === "bottom") {
+          design = definition.axesDesign?.x;
+      }
+      else if (position === "left") {
+          design = definition.axesDesign?.y;
+      }
+      else {
+          design = definition.axesDesign?.y1;
+      }
+      if (type === "values") {
+          const displayGridLines = !(position === "right" && useLeftAxis);
+          return {
+              position: position,
+              title: getChartAxisTitleRuntime(design),
+              grid: {
+                  display: displayGridLines,
+              },
+              beginAtZero: true,
+              stacked: options?.stacked,
+              ticks: {
+                  color: fontColor,
+                  callback: formatTickValue(options),
+              },
+          };
+      }
+      else {
+          return {
+              ticks: {
+                  padding: 5,
+                  color: fontColor,
+              },
+              grid: {
+                  display: false,
+              },
+              stacked: options?.stacked,
+              title: getChartAxisTitleRuntime(design),
+          };
+      }
+  }
+
+  function getChartShowValues(definition, args) {
+      const { axisFormats, locale } = args;
+      return {
+          horizontal: "horizontal" in definition && definition.horizontal,
+          showValues: "showValues" in definition ? !!definition.showValues : false,
+          background: definition.background,
+          callback: formatChartDatasetValue(axisFormats, locale),
+      };
+  }
+
+  function getChartTitle(definition) {
+      const chartTitle = definition.title;
+      const fontColor = chartFontColor(definition.background);
+      return {
+          display: !!chartTitle.text,
+          text: _t(chartTitle.text),
+          color: chartTitle?.color ?? fontColor,
+          align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
+          font: {
+              size: DEFAULT_CHART_FONT_SIZE,
+              weight: chartTitle.bold ? "bold" : "normal",
+              style: chartTitle.italic ? "italic" : "normal",
+          },
+      };
+  }
+
+  function getBarChartTooltip(definition, args) {
+      return {
+          callbacks: {
+              title: function (tooltipItems) {
+                  return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
+                      ? undefined
+                      : "";
+              },
+              label: function (tooltipItem) {
+                  const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
+                  const horizontalChart = definition.horizontal;
+                  let yLabel = horizontalChart ? tooltipItem.parsed.x : tooltipItem.parsed.y;
+                  if (yLabel === undefined || yLabel === null) {
+                      yLabel = tooltipItem.parsed;
+                  }
+                  const axisId = horizontalChart ? tooltipItem.dataset.xAxisID : tooltipItem.dataset.yAxisID;
+                  const yLabelStr = formatChartDatasetValue(args.axisFormats, args.locale)(yLabel, axisId);
+                  return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+              },
+          },
+      };
+  }
+  function getLineChartTooltip(definition, args) {
+      const { axisType, locale, axisFormats } = args;
+      const labelFormat = axisFormats?.x;
+      const tooltip = { callbacks: {} };
+      if (axisType === "linear") {
+          tooltip.callbacks.label = (tooltipItem) => {
+              const dataSetPoint = tooltipItem.parsed.y;
+              let label = tooltipItem.parsed.x;
+              if (typeof label === "string" && isNumber(label, locale)) {
+                  label = toNumber(label, locale);
+              }
+              const formattedX = formatValue(label, { locale, format: labelFormat });
+              const axisId = tooltipItem.dataset.yAxisID || "y";
+              const formattedY = formatValue(dataSetPoint, { locale, format: axisFormats?.[axisId] });
+              const dataSetTitle = tooltipItem.dataset.label;
+              return formattedX
+                  ? `${dataSetTitle}: (${formattedX}, ${formattedY})`
+                  : `${dataSetTitle}: ${formattedY}`;
+          };
+      }
+      else {
+          tooltip.callbacks.label = function (tooltipItem) {
+              const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
+              const yLabel = tooltipItem.parsed.y;
+              const axisId = tooltipItem.dataset.yAxisID;
+              const yLabelStr = formatChartDatasetValue(axisFormats, locale)(yLabel, axisId);
+              return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+          };
+      }
+      tooltip.callbacks.title = function (tooltipItems) {
+          const displayTooltipTitle = axisType !== "linear" &&
+              tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID);
+          return displayTooltipTitle ? undefined : "";
+      };
+      return tooltip;
+  }
+  function getPieChartTooltip(definition, args) {
+      const { locale, axisFormats } = args;
+      const format = axisFormats?.y || axisFormats?.y1;
+      return {
+          callbacks: {
+              title: function (tooltipItems) {
+                  return tooltipItems[0].dataset.label;
+              },
+              label: function (tooltipItem) {
+                  const data = tooltipItem.dataset.data;
+                  const dataIndex = tooltipItem.dataIndex;
+                  const percentage = calculatePercentage(data, dataIndex);
+                  const xLabel = tooltipItem.label || tooltipItem.dataset.label;
+                  const yLabel = tooltipItem.parsed.y ?? tooltipItem.parsed;
+                  const toolTipFormat = !format && yLabel >= 1000 ? "#,##" : format;
+                  const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                  return xLabel
+                      ? `${xLabel}: ${yLabelStr} (${percentage}%)`
+                      : `${yLabelStr} (${percentage}%)`;
+              },
+          },
+      };
+  }
+  function getWaterfallChartTooltip(definition, args) {
+      const { dataSetsValues, locale, axisFormats, labels } = args;
+      const format = axisFormats?.y || axisFormats?.y1;
+      const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label);
+      return {
+          callbacks: {
+              label: function (tooltipItem) {
+                  const [lastValue, currentValue] = tooltipItem.raw;
+                  const yLabel = currentValue - lastValue;
+                  const dataSeriesIndex = labels.length
+                      ? Math.floor(tooltipItem.dataIndex / labels.length)
+                      : 0;
+                  const dataSeriesLabel = dataSeriesLabels[dataSeriesIndex];
+                  const toolTipFormat = !format && Math.abs(yLabel) > 1000 ? "#,##" : format;
+                  const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                  return dataSeriesLabel ? `${dataSeriesLabel}: ${yLabelStr}` : yLabelStr;
+              },
+          },
+      };
+  }
+  function getPyramidChartTooltip(definition, args) {
+      const tooltip = getBarChartTooltip(definition, args);
+      return {
+          ...tooltip,
+          callbacks: {
+              ...tooltip.callbacks,
+              label: (item) => {
+                  const tooltipItem = { ...item, parsed: { y: item.parsed.y, x: Math.abs(item.parsed.x) } };
+                  return (tooltip?.callbacks?.label)(tooltipItem);
+              },
+          },
+      };
+  }
+  function getRadarChartTooltip(definition, args) {
+      const { locale, axisFormats } = args;
+      return {
+          callbacks: {
+              label: function (tooltipItem) {
+                  const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
+                  const yLabel = tooltipItem.parsed.r;
+                  const formattedY = formatValue(yLabel, { format: axisFormats?.r, locale });
+                  return xLabel ? `${xLabel}: ${formattedY}` : formattedY;
+              },
+          },
+      };
+  }
+  function calculatePercentage(dataset, dataIndex) {
+      const numericData = dataset.filter((value) => typeof value === "number");
+      const total = numericData.reduce((sum, value) => sum + value, 0);
+      if (!total) {
+          return "";
       }
-      return undefined;
+      const percentage = (dataset[dataIndex] / total) * 100;
+      return percentage.toFixed(2);
   }
-  /**
-   * Custom chart.js plugin to set the background color of the canvas
-   * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
-   */
-  const backgroundColorChartJSPlugin = {
-      id: "customCanvasBackgroundColor",
-      beforeDraw: (chart) => {
-          const { ctx } = chart;
-          ctx.save();
-          ctx.globalCompositeOperation = "destination-over";
-          ctx.fillStyle = "#ffffff";
-          ctx.fillRect(0, 0, chart.width, chart.height);
-          ctx.restore();
-      },
-  };
+
+  var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    INTERACTIVE_LEGEND_CONFIG: INTERACTIVE_LEGEND_CONFIG,
+    canChartParseLabels: canChartParseLabels,
+    getBarChartData: getBarChartData,
+    getBarChartDatasets: getBarChartDatasets,
+    getBarChartLayout: getBarChartLayout,
+    getBarChartLegend: getBarChartLegend,
+    getBarChartScales: getBarChartScales,
+    getBarChartTooltip: getBarChartTooltip,
+    getChartLabelFormat: getChartLabelFormat,
+    getChartShowValues: getChartShowValues,
+    getChartTitle: getChartTitle,
+    getComboChartDatasets: getComboChartDatasets,
+    getComboChartLegend: getComboChartLegend,
+    getCommonChartLayout: getCommonChartLayout,
+    getData: getData,
+    getLineChartData: getLineChartData,
+    getLineChartDatasets: getLineChartDatasets,
+    getLineChartLayout: getLineChartLayout,
+    getLineChartLegend: getLineChartLegend,
+    getLineChartScales: getLineChartScales,
+    getLineChartTooltip: getLineChartTooltip,
+    getPieChartData: getPieChartData,
+    getPieChartDatasets: getPieChartDatasets,
+    getPieChartLayout: getPieChartLayout,
+    getPieChartLegend: getPieChartLegend,
+    getPieChartTooltip: getPieChartTooltip,
+    getPyramidChartData: getPyramidChartData,
+    getPyramidChartScales: getPyramidChartScales,
+    getPyramidChartTooltip: getPyramidChartTooltip,
+    getRadarChartData: getRadarChartData,
+    getRadarChartDatasets: getRadarChartDatasets,
+    getRadarChartLegend: getRadarChartLegend,
+    getRadarChartScales: getRadarChartScales,
+    getRadarChartTooltip: getRadarChartTooltip,
+    getScatterChartDatasets: getScatterChartDatasets,
+    getScatterChartLegend: getScatterChartLegend,
+    getScatterChartScales: getScatterChartScales,
+    getTrendDatasetForBarChart: getTrendDatasetForBarChart,
+    getTrendDatasetForLineChart: getTrendDatasetForLineChart,
+    getWaterfallChartLayout: getWaterfallChartLayout,
+    getWaterfallChartLegend: getWaterfallChartLegend,
+    getWaterfallChartScales: getWaterfallChartScales,
+    getWaterfallChartTooltip: getWaterfallChartTooltip,
+    getWaterfallDatasetAndLabels: getWaterfallDatasetAndLabels
+  });
 
   class BarChart extends AbstractChart {
       dataSets;
@@ -28169,121 +29238,27 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   function createBarChartRuntime(chart, getters) {
-      const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-      let labels = labelValues.formattedValues;
-      let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-      if (chart.dataSetsHaveTitle &&
-          dataSetsValues[0] &&
-          labels.length > dataSetsValues[0].data.length) {
-          labels.shift();
-      }
-      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-      if (chart.aggregated) {
-          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-      }
-      const leftAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-      const rightAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
-      const locale = getters.getLocale();
-      const fontColor = chartFontColor(chart.background);
-      const axisFormats = chart.horizontal
-          ? { x: leftAxisFormat || rightAxisFormat }
-          : { y: leftAxisFormat, y1: rightAxisFormat };
-      const config = getDefaultChartJsRuntime(chart, labels, fontColor, {
-          locale,
-          axisFormats,
-          horizontalChart: chart.horizontal,
-      });
-      const legend = {
-          ...INTERACTIVE_LEGEND_CONFIG,
-          ...getCustomLegendLabels(fontColor, {
-              pointStyle: "rect",
-              lineWidth: 3,
-          }),
-      };
-      if (chart.legendPosition === "none") {
-          legend.display = false;
-      }
-      else {
-          legend.position = chart.legendPosition;
-      }
-      config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-      config.options.layout = {
-          padding: computeChartPadding({
-              displayTitle: !!chart.title.text,
-              displayLegend: chart.legendPosition === "top",
-          }),
-      };
-      config.options.indexAxis = chart.horizontal ? "y" : "x";
-      config.options.scales = {};
       const definition = chart.getDefinition();
-      const options = { stacked: chart.stacked, locale };
-      if (chart.horizontal) {
-          const format = leftAxisFormat || rightAxisFormat;
-          config.options.scales.x = getChartAxis(definition, "bottom", "values", { ...options, format });
-          config.options.scales.y = getChartAxis(definition, "left", "labels", options);
-      }
-      else {
-          config.options.scales.x = getChartAxis(definition, "bottom", "labels", options);
-          const leftAxisOptions = { ...options, format: leftAxisFormat };
-          config.options.scales.y = getChartAxis(definition, "left", "values", leftAxisOptions);
-          const rightAxisOptions = { ...options, format: rightAxisFormat };
-          config.options.scales.y1 = getChartAxis(definition, "right", "values", rightAxisOptions);
-      }
-      config.options.scales = removeFalsyAttributes(config.options.scales);
-      config.options.plugins.chartShowValuesPlugin = {
-          showValues: chart.showValues,
-          background: chart.background,
-          horizontal: chart.horizontal,
-          callback: formatChartDatasetValue(axisFormats, locale),
+      const chartData = getBarChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          type: "bar",
+          data: {
+              labels: chartData.labels.map(truncateLabel),
+              datasets: getBarChartDatasets(definition, chartData),
+          },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              indexAxis: chart.horizontal ? "y" : "x",
+              layout: getBarChartLayout(definition),
+              scales: getBarChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getBarChartLegend(definition),
+                  tooltip: getBarChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+              },
+          },
       };
-      const colors = getChartColorsGenerator(definition, dataSetsValues.length);
-      const trendDatasets = [];
-      for (const index in dataSetsValues) {
-          let { label, data } = dataSetsValues[index];
-          if (definition.dataSets?.[index]?.label) {
-              label = definition.dataSets[index].label;
-          }
-          const backgroundColor = colors.next();
-          const dataset = {
-              label,
-              data,
-              borderColor: BORDER_CHART_COLOR,
-              borderWidth: 1,
-              backgroundColor,
-          };
-          config.data.datasets.push(dataset);
-          dataset.yAxisID = chart.horizontal ? "y" : definition.dataSets[index].yAxisId || "y";
-          dataset.xAxisID = "x";
-          const trend = definition.dataSets?.[index].trend;
-          if (!trend?.display || chart.horizontal) {
-              continue;
-          }
-          const trendDataset = getTrendDatasetForBarChart(trend, dataset);
-          if (trendDataset) {
-              trendDatasets.push(trendDataset);
-          }
-      }
-      if (trendDatasets.length) {
-          /* 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.data.length));
-          config.options.scales[TREND_LINE_XAXIS_ID] = {
-              ...config.options.scales.x,
-              labels: Array(maxLength).fill(""),
-              offset: false,
-              display: false,
-          };
-          /* These datasets must be inserted after the original
-           * datasets to ensure the way we distinguish the originals and trendLine datasets after
-           */
-          trendDatasets.forEach((x) => config.data.datasets.push(x));
-          config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-              return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
-                  ? undefined
-                  : "";
-          };
-      }
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
@@ -28416,102 +29391,26 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   function createComboChartRuntime(chart, getters) {
-      const mainDataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-      const lineDataSetsFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
-      const locale = getters.getLocale();
-      const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-      let labels = labelValues.formattedValues;
-      let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-      if (chart.dataSetsHaveTitle &&
-          dataSetsValues[0] &&
-          labels.length > dataSetsValues[0].data.length) {
-          labels.shift();
-      }
-      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-      if (chart.aggregated) {
-          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-      }
-      const fontColor = chartFontColor(chart.background);
-      const axisFormats = { y: mainDataSetFormat, y1: lineDataSetsFormat };
-      const config = getDefaultChartJsRuntime(chart, labels, fontColor, { locale, axisFormats });
-      const legend = {
-          ...INTERACTIVE_LEGEND_CONFIG,
-          ...getCustomLegendLabels(fontColor, {
-              lineWidth: 3,
-          }),
-      };
-      if (chart.legendPosition === "none") {
-          legend.display = false;
-      }
-      else {
-          legend.position = chart.legendPosition;
-      }
-      config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-      config.options.layout = {
-          padding: computeChartPadding({
-              displayTitle: !!chart.title.text,
-              displayLegend: chart.legendPosition === "top",
-          }),
-      };
       const definition = chart.getDefinition();
-      config.options.scales = {
-          x: getChartAxis(definition, "bottom", "labels", { locale }),
-          y: getChartAxis(definition, "left", "values", { locale, format: mainDataSetFormat }),
-          y1: getChartAxis(definition, "right", "values", { locale, format: lineDataSetsFormat }),
-      };
-      config.options.scales = removeFalsyAttributes(config.options.scales);
-      config.options.plugins.chartShowValuesPlugin = {
-          showValues: chart.showValues,
-          background: chart.background,
-          callback: formatChartDatasetValue(axisFormats, locale),
+      const chartData = getBarChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          type: "bar",
+          data: {
+              labels: chartData.labels.map(truncateLabel),
+              datasets: getComboChartDatasets(definition, chartData),
+          },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              layout: getBarChartLayout(definition),
+              scales: getBarChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getComboChartLegend(definition),
+                  tooltip: getBarChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+              },
+          },
       };
-      const colors = getChartColorsGenerator(definition, dataSetsValues.length);
-      let maxLength = 0;
-      const trendDatasets = [];
-      for (let [index, { label, data }] of dataSetsValues.entries()) {
-          const design = definition.dataSets[index];
-          const color = colors.next();
-          const type = design?.type ?? "line";
-          const dataset = {
-              label: design?.label ?? label,
-              data,
-              borderColor: color,
-              backgroundColor: color,
-              yAxisID: design?.yAxisId ?? "y",
-              type,
-              order: type === "bar" ? dataSetsValues.length + index : index,
-          };
-          config.data.datasets.push(dataset);
-          const trend = definition.dataSets?.[index].trend;
-          if (!trend?.display) {
-              continue;
-          }
-          maxLength = Math.max(maxLength, data.length);
-          const trendDataset = getTrendDatasetForBarChart(trend, dataset);
-          if (trendDataset) {
-              trendDatasets.push(trendDataset);
-          }
-      }
-      if (trendDatasets.length) {
-          /* 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 trendLinesMaxLength = Math.max(...trendDatasets.map((trend) => trend.data.length));
-          config.options.scales[TREND_LINE_XAXIS_ID] = {
-              labels: Array(Math.round(trendLinesMaxLength)).fill(""),
-              offset: false,
-              display: false,
-          };
-          /* These datasets must be inserted after the original datasets to ensure the way we
-           * distinguish the originals and trendLine datasets after
-           */
-          trendDatasets.forEach((x) => config.data.datasets.push(x));
-          config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-              return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
-                  ? undefined
-                  : "";
-          };
-      }
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
@@ -28754,417 +29653,6 @@ stores.inject(MyMetaStore, storeInstance);
       return clip(value, minValue, maxValue);
   }
 
-  const UNIT_LENGTH = {
-      second: 1000,
-      minute: 1000 * 60,
-      hour: 1000 * 3600,
-      day: 1000 * 3600 * 24,
-      month: 1000 * 3600 * 24 * 30,
-      year: 1000 * 3600 * 24 * 365,
-  };
-  const Milliseconds = {
-      inSeconds: function (milliseconds) {
-          return Math.floor(milliseconds / UNIT_LENGTH.second);
-      },
-      inMinutes: function (milliseconds) {
-          return Math.floor(milliseconds / UNIT_LENGTH.minute);
-      },
-      inHours: function (milliseconds) {
-          return Math.floor(milliseconds / UNIT_LENGTH.hour);
-      },
-      inDays: function (milliseconds) {
-          return Math.floor(milliseconds / UNIT_LENGTH.day);
-      },
-      inMonths: function (milliseconds) {
-          return Math.floor(milliseconds / UNIT_LENGTH.month);
-      },
-      inYears: function (milliseconds) {
-          return Math.floor(milliseconds / UNIT_LENGTH.year);
-      },
-  };
-  /**
-   * Regex to test if a format string is a date format that can be translated into a luxon time format
-   */
-  const timeFormatLuxonCompatible = /^((d|dd|m|mm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|yyyy|yy|hh|h|ss|a)$/i;
-  /** Get the time options for the XAxis of ChartJS */
-  function getChartTimeOptions(labels, labelFormat, locale) {
-      const luxonFormat = convertDateFormatForLuxon(labelFormat);
-      const timeUnit = getBestTimeUnitForScale(labels, luxonFormat, locale);
-      const displayFormats = {};
-      if (timeUnit) {
-          displayFormats[timeUnit] = luxonFormat;
-      }
-      return {
-          parser: luxonFormat,
-          displayFormats,
-          unit: timeUnit ?? false,
-      };
-  }
-  /**
-   * Convert the given date format into a format that moment.js understands.
-   *
-   * https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens
-   */
-  function convertDateFormatForLuxon(format) {
-      // "m" before "h" === month, "m" after "h" === minute
-      const indexH = format.indexOf("h");
-      if (indexH >= 0) {
-          format = format.slice(0, indexH).replace(/m/g, "M") + format.slice(indexH);
-      }
-      else {
-          format = format.replace(/m/g, "M");
-      }
-      // If we have an "a", we should display hours as AM/PM (h), otherwise display 24 hours format (H)
-      if (!format.includes("a")) {
-          format = format.replace(/h/g, "H");
-      }
-      return format;
-  }
-  /** Get the minimum time unit that the format is able to display */
-  function getFormatMinDisplayUnit(format) {
-      if (format.includes("s")) {
-          return "second";
-      }
-      else if (format.includes("m")) {
-          return "minute";
-      }
-      else if (format.includes("h") || format.includes("H")) {
-          return "hour";
-      }
-      else if (format.includes("d")) {
-          return "day";
-      }
-      else if (format.includes("M")) {
-          return "month";
-      }
-      return "year";
-  }
-  /**
-   * Returns the best time unit that should be used for the X axis of a chart in order to display all
-   * the labels correctly.
-   *
-   * There is two conditions :
-   *  - the format of the labels should be able to display the unit. For example if the format is "DD/MM/YYYY"
-   *    it makes no sense to try to use minutes in the X axis
-   *  - we want the "best fit" unit. For example if the labels span a period of several days, we want to use days
-   *    as a unit, but if they span 200 days, we'd like to use months instead
-   *
-   */
-  function getBestTimeUnitForScale(labels, format, locale) {
-      const labelDates = labels.map((label) => parseDateTime(label, locale)?.jsDate);
-      if (labelDates.some((date) => date === undefined) || labels.length < 2) {
-          return undefined;
-      }
-      const labelsTimestamps = labelDates.map((date) => date.getTime());
-      const period = largeMax(labelsTimestamps) - largeMin(labelsTimestamps);
-      const minUnit = getFormatMinDisplayUnit(format);
-      if (UNIT_LENGTH.second >= UNIT_LENGTH[minUnit] && Milliseconds.inSeconds(period) < 180) {
-          return "second";
-      }
-      else if (UNIT_LENGTH.minute >= UNIT_LENGTH[minUnit] && Milliseconds.inMinutes(period) < 180) {
-          return "minute";
-      }
-      else if (UNIT_LENGTH.hour >= UNIT_LENGTH[minUnit] && Milliseconds.inHours(period) < 96) {
-          return "hour";
-      }
-      else if (UNIT_LENGTH.day >= UNIT_LENGTH[minUnit] && Milliseconds.inDays(period) < 90) {
-          return "day";
-      }
-      else if (UNIT_LENGTH.month >= UNIT_LENGTH[minUnit] && Milliseconds.inMonths(period) < 36) {
-          return "month";
-      }
-      return "year";
-  }
-
-  function fixEmptyLabelsForDateCharts(labels, dataSetsValues) {
-      if (labels.length === 0 || labels.every((label) => !label)) {
-          return { labels, dataSetsValues };
-      }
-      const newLabels = [...labels];
-      const newDatasets = deepCopy(dataSetsValues);
-      for (let i = 0; i < newLabels.length; i++) {
-          if (!newLabels[i]) {
-              newLabels[i] = findNextDefinedValue(newLabels, i);
-              for (let ds of newDatasets) {
-                  ds.data[i] = undefined;
-              }
-          }
-      }
-      return { labels: newLabels, dataSetsValues: newDatasets };
-  }
-  function canChartParseLabels(labelRange, getters) {
-      return canBeDateChart(labelRange, getters) || canBeLinearChart(labelRange, getters);
-  }
-  function getChartAxisType(chart, getters) {
-      if (isDateChart(chart, getters) && isLuxonTimeAdapterInstalled()) {
-          return "time";
-      }
-      if (isLinearChart(chart, getters)) {
-          return "linear";
-      }
-      return "category";
-  }
-  function isDateChart(chart, getters) {
-      return !chart.labelsAsText && canBeDateChart(chart.labelRange, getters);
-  }
-  function isLinearChart(chart, getters) {
-      return !chart.labelsAsText && canBeLinearChart(chart.labelRange, getters);
-  }
-  function canBeDateChart(labelRange, getters) {
-      if (!labelRange || !canBeLinearChart(labelRange, getters)) {
-          return false;
-      }
-      const labelFormat = getters.getEvaluatedCell({
-          sheetId: labelRange.sheetId,
-          col: labelRange.zone.left,
-          row: labelRange.zone.top,
-      }).format;
-      return Boolean(labelFormat && timeFormatLuxonCompatible.test(labelFormat));
-  }
-  function canBeLinearChart(labelRange, getters) {
-      if (!labelRange) {
-          return false;
-      }
-      const labels = getters.getRangeValues(labelRange);
-      if (labels.some((label) => isNaN(Number(label)) && label)) {
-          return false;
-      }
-      if (labels.every((label) => !label)) {
-          return false;
-      }
-      return true;
-  }
-  let missingTimeAdapterAlreadyWarned = false;
-  function isLuxonTimeAdapterInstalled() {
-      if (!window.Chart) {
-          return false;
-      }
-      // @ts-ignore
-      const adapter = new window.Chart._adapters._date({});
-      const isInstalled = adapter._id === "luxon";
-      if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
-          missingTimeAdapterAlreadyWarned = true;
-          console.warn("'chartjs-adapter-luxon' time adapter is not installed. Time scale axes are disabled.");
-      }
-      return isInstalled;
-  }
-  function getTrendDatasetForLineChart(config, dataset, axisType, locale) {
-      const filteredValues = [];
-      const filteredLabels = [];
-      const labels = [];
-      const datasetLength = dataset.data.length;
-      if (datasetLength < 2) {
-          return;
-      }
-      switch (axisType) {
-          case "category":
-              for (let i = 0; i < datasetLength; i++) {
-                  if (typeof dataset.data[i] === "number") {
-                      filteredValues.push(dataset.data[i]);
-                      filteredLabels.push(i + 1);
-                  }
-                  labels.push(i + 1);
-              }
-              break;
-          case "linear":
-              for (const point of dataset.data) {
-                  const label = Number(point.x);
-                  if (isNaN(label)) {
-                      continue;
-                  }
-                  if (typeof point.y === "number") {
-                      filteredValues.push(point.y);
-                      filteredLabels.push(label);
-                  }
-                  labels.push(label);
-              }
-              break;
-          case "time":
-              for (const point of dataset.data) {
-                  const date = toNumber({ value: point.x }, locale);
-                  if (point.y !== null) {
-                      filteredValues.push(point.y);
-                      filteredLabels.push(date);
-                  }
-                  labels.push(date);
-              }
-              break;
-      }
-      const xmin = Math.min(...labels);
-      const xmax = Math.max(...labels);
-      if (xmax === xmin) {
-          return;
-      }
-      const numberOfStep = 5 * labels.length;
-      const step = (xmax - xmin) / numberOfStep;
-      const newLabels = range(xmin, xmax + step / 2, step);
-      const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
-      if (!newValues.length) {
-          return;
-      }
-      return getFullTrendingLineDataSet(dataset, config, newValues);
-  }
-  function createLineOrScatterChartRuntime(chart, getters) {
-      const axisType = getChartAxisType(chart, getters);
-      const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-      let labels = axisType === "linear" ? labelValues.values : labelValues.formattedValues;
-      let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-      if (chart.dataSetsHaveTitle &&
-          dataSetsValues[0] &&
-          labels.length > dataSetsValues[0].data.length) {
-          labels.shift();
-      }
-      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-      if (axisType === "time") {
-          ({ labels, dataSetsValues } = fixEmptyLabelsForDateCharts(labels, dataSetsValues));
-      }
-      if (chart.aggregated) {
-          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-      }
-      const locale = getters.getLocale();
-      const truncateLabels = axisType === "category";
-      const leftAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-      const rightAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
-      const axisFormats = { y: leftAxisFormat, y1: rightAxisFormat };
-      const options = { locale, truncateLabels, axisFormats };
-      const fontColor = chartFontColor(chart.background);
-      const config = getDefaultChartJsRuntime(chart, labels, fontColor, options);
-      const legend = {
-          ...INTERACTIVE_LEGEND_CONFIG,
-          labels: {
-              color: fontColor,
-          },
-      };
-      if (chart.legendPosition === "none") {
-          legend.display = false;
-      }
-      else {
-          legend.position = chart.legendPosition;
-      }
-      Object.assign(config.options.plugins.legend || {}, legend);
-      config.options.layout = {
-          padding: computeChartPadding({
-              displayTitle: !!chart.title.text,
-              displayLegend: chart.legendPosition === "top",
-          }),
-      };
-      const definition = chart.getDefinition();
-      const stacked = "stacked" in chart && chart.stacked;
-      config.options.scales = {
-          x: getChartAxis(definition, "bottom", "labels", { locale }),
-          y: getChartAxis(definition, "left", "values", { locale, stacked, format: leftAxisFormat }),
-          y1: getChartAxis(definition, "right", "values", { locale, stacked, format: rightAxisFormat }),
-      };
-      config.options.scales = removeFalsyAttributes(config.options.scales);
-      config.options.plugins.chartShowValuesPlugin = {
-          showValues: chart.showValues,
-          background: chart.background,
-          callback: formatChartDatasetValue(axisFormats, locale),
-      };
-      if (chart.dataSetsHaveTitle &&
-          dataSetsValues[0] &&
-          labels.length > dataSetsValues[0].data.length) {
-          labels.shift();
-      }
-      const labelFormat = getChartLabelFormat(getters, chart.labelRange);
-      if (axisType === "time") {
-          const axis = {
-              type: "time",
-              time: getChartTimeOptions(labels, labelFormat, locale),
-          };
-          Object.assign(config.options.scales.x, axis);
-          config.options.scales.x.ticks.maxTicksLimit = 15;
-      }
-      else if (axisType === "linear") {
-          config.options.scales.x.type = "linear";
-          config.options.scales.x.ticks.callback = (value) => formatValue(value, { format: labelFormat, locale });
-          config.options.plugins.tooltip.callbacks.label = (tooltipItem) => {
-              const dataSetPoint = dataSetsValues[tooltipItem.datasetIndex].data[tooltipItem.dataIndex];
-              let label = tooltipItem.label || labelValues.values[tooltipItem.dataIndex];
-              if (isNumber(label, locale)) {
-                  label = toNumber(label, locale);
-              }
-              const formattedX = formatValue(label, { locale, format: labelFormat });
-              const formattedY = formatValue(dataSetPoint, { locale, format: leftAxisFormat });
-              const dataSetTitle = tooltipItem.dataset.label;
-              return formattedX
-                  ? `${dataSetTitle}: (${formattedX}, ${formattedY})`
-                  : `${dataSetTitle}: ${formattedY}`;
-          };
-      }
-      const areaChart = "fillArea" in chart ? chart.fillArea : false;
-      const stackedChart = "stacked" in chart ? chart.stacked : false;
-      const cumulative = "cumulative" in chart ? chart.cumulative : false;
-      const colors = getChartColorsGenerator(definition, dataSetsValues.length);
-      let maxLength = 0;
-      const trendDatasets = [];
-      for (let [index, { label, data }] of dataSetsValues.entries()) {
-          if (cumulative) {
-              let accumulator = 0;
-              data = data.map((value) => {
-                  if (!isNaN(value)) {
-                      accumulator += parseFloat(value);
-                      return accumulator;
-                  }
-                  return value;
-              });
-          }
-          if (["linear", "time"].includes(axisType)) {
-              // Replace empty string labels by undefined to make sure chartJS doesn't decide that "" is the same as 0
-              data = data.map((y, index) => ({ x: labels[index] || undefined, y }));
-          }
-          const color = colors.next();
-          if (definition.dataSets?.[index]?.label) {
-              label = definition.dataSets[index].label;
-          }
-          const dataset = {
-              label,
-              data,
-              tension: 0, // 0 -> render straight lines, which is much faster
-              borderColor: color,
-              backgroundColor: areaChart ? setColorAlpha(color, LINE_FILL_TRANSPARENCY) : color,
-              pointBackgroundColor: color,
-              fill: areaChart ? getFillingMode(index, stackedChart) : false,
-              yAxisID: definition.dataSets[index].yAxisId || "y",
-          };
-          config.data.datasets.push(dataset);
-          const trend = definition.dataSets?.[index].trend;
-          if (!trend?.display) {
-              continue;
-          }
-          const trendDataset = getTrendDatasetForLineChart(trend, dataset, axisType, locale);
-          if (trendDataset) {
-              maxLength = Math.max(maxLength, trendDataset.data.length);
-              trendDatasets.push(trendDataset);
-          }
-      }
-      if (trendDatasets.length) {
-          /* 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
-           */
-          config.options.scales[TREND_LINE_XAXIS_ID] = {
-              ...config.options.scales.x,
-              type: "category",
-              labels: range(0, maxLength).map((x) => x.toString()),
-              offset: false,
-              display: false,
-          };
-          /* These datasets must be inserted after the original datasets to ensure the way we
-           * distinguish the originals and trendLine datasets after
-           */
-          trendDatasets.forEach((x) => config.data.datasets.push(x));
-      }
-      config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-          const displayTooltipTitle = axisType !== "linear" &&
-              tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID);
-          return displayTooltipTitle ? undefined : "";
-      };
-      return {
-          chartJsConfig: config,
-          background: chart.background || BACKGROUND_CHART_COLOR,
-      };
-  }
-
   class LineChart extends AbstractChart {
       dataSets;
       labelRange;
@@ -29304,18 +29792,30 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   function createLineChartRuntime(chart, getters) {
-      const { chartJsConfig, background } = createLineOrScatterChartRuntime(chart, getters);
-      const filled = chart.fillArea;
-      const pointStyle = filled ? "rect" : "line";
-      const lineWidth = filled ? 2 : 3;
-      chartJsConfig.options.plugins.legend.labels = {
-          ...chartJsConfig.options?.plugins?.legend?.labels,
-          ...getCustomLegendLabels(chartFontColor(background), {
-              pointStyle,
-              lineWidth,
-          }).labels,
+      const definition = chart.getDefinition();
+      const chartData = getLineChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          type: "line",
+          data: {
+              labels: chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+              datasets: getLineChartDatasets(definition, chartData),
+          },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              layout: getLineChartLayout(definition),
+              scales: getLineChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getLineChartLegend(definition),
+                  tooltip: getLineChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+              },
+          },
+      };
+      return {
+          chartJsConfig: config,
+          background: chart.background || BACKGROUND_CHART_COLOR,
       };
-      return { chartJsConfig, background };
   }
 
   class PieChart extends AbstractChart {
@@ -29426,126 +29926,26 @@ stores.inject(MyMetaStore, storeInstance);
           return new PieChart(definition, this.sheetId, this.getters);
       }
   }
-  function getPieConfiguration(chart, labels, localeFormat, colors) {
-      const fontColor = chartFontColor(chart.background);
-      const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
-      const legend = {
-          labels: {
-              color: fontColor,
-              usePointStyle: true,
-              //@ts-ignore
-              generateLabels: (c) => 
-              //@ts-ignore
-              c.data.labels.map((label, index) => ({
-                  text: label,
-                  strokeStyle: colors[index],
-                  fillStyle: colors[index],
-                  pointStyle: "rect",
-                  hidden: false,
-                  lineWidth: 2,
-              })),
+  function createPieChartRuntime(chart, getters) {
+      const definition = chart.getDefinition();
+      const chartData = getPieChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          type: chart.isDoughnut ? "doughnut" : "pie",
+          data: {
+              labels: chartData.labels.map(truncateLabel),
+              datasets: getPieChartDatasets(definition, chartData),
+          },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              layout: getPieChartLayout(definition),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getPieChartLegend(definition, chartData),
+                  tooltip: getPieChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+              },
           },
       };
-      if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
-          legend.display = false;
-      }
-      else {
-          legend.position = chart.legendPosition;
-      }
-      Object.assign(config.options.plugins.legend || {}, legend);
-      config.options.layout = {
-          padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
-      };
-      config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-          return tooltipItems[0].dataset.label;
-      };
-      config.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
-          const { format, locale } = localeFormat;
-          const data = tooltipItem.dataset.data;
-          const dataIndex = tooltipItem.dataIndex;
-          const percentage = calculatePercentage(data, dataIndex);
-          const xLabel = tooltipItem.label || tooltipItem.dataset.label;
-          const yLabel = tooltipItem.parsed.y ?? tooltipItem.parsed;
-          const toolTipFormat = !format && yLabel >= 1000 ? "#,##" : format;
-          const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-          return xLabel ? `${xLabel}: ${yLabelStr} (${percentage}%)` : `${yLabelStr} (${percentage}%)`;
-      };
-      config.options.plugins.chartShowValuesPlugin = {
-          showValues: chart.showValues,
-          callback: formatTickValue(localeFormat),
-      };
-      return config;
-  }
-  function getPieColors(colors, dataSetsValues) {
-      const pieColors = [];
-      const maxLength = largeMax(dataSetsValues.map((ds) => ds.data.length));
-      for (let i = 0; i <= maxLength; i++) {
-          pieColors.push(colors.next());
-      }
-      return pieColors;
-  }
-  function calculatePercentage(dataset, dataIndex) {
-      const numericData = dataset.filter((value) => typeof value === "number");
-      const total = numericData.reduce((sum, value) => sum + value, 0);
-      if (!total) {
-          return "";
-      }
-      const percentage = (dataset[dataIndex] / total) * 100;
-      return percentage.toFixed(2);
-  }
-  function filterNegativeValues(labels, datasets) {
-      const dataPointsIndexes = labels.reduce((indexes, label, i) => {
-          const shouldKeep = datasets.some((dataset) => {
-              const dataPoint = dataset.data[i];
-              return typeof dataPoint !== "number" || dataPoint >= 0;
-          });
-          if (shouldKeep) {
-              indexes.push(i);
-          }
-          return indexes;
-      }, []);
-      const filteredLabels = dataPointsIndexes.map((i) => labels[i] || "");
-      const filteredDatasets = datasets.map((dataset) => ({
-          ...dataset,
-          data: dataPointsIndexes.map((i) => {
-              const dataPoint = dataset.data[i];
-              return typeof dataPoint !== "number" || dataPoint >= 0 ? dataPoint : 0;
-          }),
-      }));
-      return { labels: filteredLabels, dataSetsValues: filteredDatasets };
-  }
-  function createPieChartRuntime(chart, getters) {
-      const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-      let labels = labelValues.formattedValues;
-      let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-      if (chart.dataSetsHaveTitle &&
-          dataSetsValues[0] &&
-          labels.length > dataSetsValues[0].data.length) {
-          labels.shift();
-      }
-      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-      if (chart.aggregated) {
-          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-      }
-      ({ dataSetsValues, labels } = filterNegativeValues(labels, dataSetsValues));
-      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-      const locale = getters.getLocale();
-      const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
-      const backgroundColor = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
-      const config = getPieConfiguration(chart, labels, { format: dataSetFormat, locale }, backgroundColor);
-      for (const { label, data } of dataSetsValues) {
-          const dataset = {
-              label,
-              data,
-              borderColor: BACKGROUND_CHART_COLOR,
-              backgroundColor,
-              hoverOffset: 30,
-          };
-          config.data.datasets.push(dataset);
-      }
-      if (chart.isDoughnut) {
-          config.type = "doughnut";
-      }
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
@@ -29663,27 +30063,27 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   function createPyramidChartRuntime(chart, getters) {
-      const barDef = { ...chart.getDefinition(), type: "bar" };
-      const barChart = new BarChart(barDef, chart.sheetId, getters);
-      const barRuntime = createBarChartRuntime(barChart, getters);
-      const config = barRuntime.chartJsConfig;
-      let datasets = config.data?.datasets;
-      if (datasets && datasets[0]) {
-          datasets[0].data = datasets[0].data.map((value) => (value > 0 ? value : 0));
-      }
-      if (datasets && datasets[1]) {
-          datasets[1].data = datasets[1].data.map((value) => (value > 0 ? -value : 0));
-      }
-      const scales = config.options.scales;
-      const scalesXCallback = scales.x.ticks.callback;
-      scales.x.ticks.callback = (value) => scalesXCallback(Math.abs(value));
-      const tooltipLabelCallback = config.options.plugins.tooltip.callbacks.label;
-      config.options.plugins.tooltip.callbacks.label = (item) => {
-          const tooltipItem = { ...item, parsed: { y: item.parsed.y, x: Math.abs(item.parsed.x) } };
-          return tooltipLabelCallback(tooltipItem);
+      const definition = chart.getDefinition();
+      const chartData = getPyramidChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          type: "bar",
+          data: {
+              labels: chartData.labels.map(truncateLabel),
+              datasets: getBarChartDatasets(definition, chartData),
+          },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              indexAxis: "y",
+              layout: getBarChartLayout(definition),
+              scales: getPyramidChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getBarChartLegend(definition),
+                  tooltip: getPyramidChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+              },
+          },
       };
-      const callback = config.options.plugins.chartShowValuesPlugin.callback;
-      config.options.plugins.chartShowValuesPlugin.callback = (x, axisId) => callback(Math.abs(x), axisId);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
@@ -29698,6 +30098,7 @@ stores.inject(MyMetaStore, storeInstance);
       dataSetsHaveTitle;
       dataSetDesign;
       fillArea;
+      showValues;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -29709,6 +30110,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
           this.dataSetDesign = definition.dataSets;
           this.fillArea = definition.fillArea;
+          this.showValues = definition.showValues;
       }
       static transformDefinition(definition, executed) {
           return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -29728,6 +30130,7 @@ stores.inject(MyMetaStore, storeInstance);
               type: "radar",
               labelRange: context.auxiliaryRange || undefined,
               fillArea: context.fillArea ?? false,
+              showValues: context.showValues ?? false,
           };
       }
       getContextCreation() {
@@ -29780,6 +30183,7 @@ stores.inject(MyMetaStore, storeInstance);
               stacked: this.stacked,
               aggregated: this.aggregated,
               fillArea: this.fillArea,
+              showValues: this.showValues,
           };
       }
       getDefinitionForExcel() {
@@ -29810,86 +30214,25 @@ stores.inject(MyMetaStore, storeInstance);
   }
   function createRadarChartRuntime(chart, getters) {
       const definition = chart.getDefinition();
-      const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-      let labels = labelValues.formattedValues;
-      let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-      if (chart.dataSetsHaveTitle &&
-          dataSetsValues[0] &&
-          labels.length > dataSetsValues[0].data.length) {
-          labels.shift();
-      }
-      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-      if (chart.aggregated) {
-          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-      }
-      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left") ||
-          getChartDatasetFormat(getters, chart.dataSets, "right");
-      const axisFormats = { r: dataSetFormat };
-      const locale = getters.getLocale();
-      const fontColor = chartFontColor(chart.background);
-      const config = getDefaultChartJsRuntime(chart, labels, fontColor, {
-          axisFormats,
-          locale,
-      });
-      const fill = definition.fillArea ?? false;
-      const pointStyle = fill ? "rect" : "line";
-      const lineWidth = fill ? 2 : 3;
-      const legend = {
-          ...INTERACTIVE_LEGEND_CONFIG,
-          ...getCustomLegendLabels(fontColor, {
-              pointStyle,
-              lineWidth,
-          }),
-      };
-      if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
-          legend.display = false;
-      }
-      else {
-          legend.position = chart.legendPosition;
-      }
-      config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-      config.options.plugins.tooltip = {
-          ...config.options.plugins?.tooltip,
-          callbacks: {
-              label: function (tooltipItem) {
-                  const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
-                  const yLabel = tooltipItem.parsed.r;
-                  const formattedY = formatValue(yLabel, { format: dataSetFormat, locale });
-                  return xLabel ? `${xLabel}: ${formattedY}` : formattedY;
-              },
+      const chartData = getRadarChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          type: "radar",
+          data: {
+              labels: chartData.labels.map(truncateLabel),
+              datasets: getRadarChartDatasets(definition, chartData),
           },
-      };
-      config.options.scales = {
-          r: {
-              ticks: {
-                  callback: formatTickValue({ format: dataSetFormat, locale }),
-                  backdropColor: chart.background || "#FFFFFF",
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              layout: getBarChartLayout(definition),
+              scales: getRadarChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getRadarChartLegend(definition),
+                  tooltip: getRadarChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
               },
-              pointLabels: { color: fontColor },
           },
       };
-      config.options.layout = {
-          padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
-      };
-      const colorGenerator = getChartColorsGenerator(definition, dataSetsValues.length);
-      for (let i = 0; i < dataSetsValues.length; i++) {
-          let { label, data } = dataSetsValues[i];
-          if (definition.dataSets?.[i]?.label) {
-              label = definition.dataSets[i].label;
-          }
-          const borderColor = colorGenerator.next();
-          const dataset = {
-              label,
-              data,
-              borderColor,
-              backgroundColor: borderColor,
-          };
-          if (fill) {
-              dataset.backgroundColor = setColorAlpha(borderColor, LINE_FILL_TRANSPARENCY);
-              dataset["fill"] = "start";
-          }
-          config.data.datasets.push(dataset);
-      }
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
@@ -30021,20 +30364,32 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   function createScatterChartRuntime(chart, getters) {
-      const { chartJsConfig, background } = createLineOrScatterChartRuntime(chart, getters);
-      // use chartJS line chart and disable the lines instead of chartJS scatter chart. This is because the scatter chart
-      // have less options than the line chart (it only works with linear labels)
-      chartJsConfig.type = "line";
-      const configOptions = chartJsConfig.options;
-      configOptions.plugins.legend.labels = {
-          ...configOptions.plugins?.legend?.labels,
-          boxHeight: 6,
-          usePointStyle: true,
+      const definition = chart.getDefinition();
+      const chartData = getLineChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const config = {
+          // use chartJS line chart and disable the lines instead of chartJS scatter chart. This is because the scatter chart
+          // have less options than the line chart (it only works with linear labels)
+          type: "line",
+          data: {
+              labels: chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+              datasets: getScatterChartDatasets(definition, chartData),
+          },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              layout: getLineChartLayout(definition),
+              scales: getScatterChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getScatterChartLegend(definition),
+                  tooltip: getLineChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+              },
+          },
+      };
+      return {
+          chartJsConfig: config,
+          background: chart.background || BACKGROUND_CHART_COLOR,
       };
-      for (const dataSet of chartJsConfig.data.datasets) {
-          dataSet.showLine = "showLine" in dataSet ? dataSet.showLine : false;
-      }
-      return { chartJsConfig, background };
   }
 
   class WaterfallChart extends AbstractChart {
@@ -30170,173 +30525,29 @@ stores.inject(MyMetaStore, storeInstance);
           return new WaterfallChart(definition, this.sheetId, this.getters);
       }
   }
-  function getWaterfallConfiguration(chart, labels, dataSeriesLabels, localeFormat) {
-      const { locale, format } = localeFormat;
-      const fontColor = chartFontColor(chart.background);
-      const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
-      const negativeColor = chart.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
-      const positiveColor = chart.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
-      const subTotalColor = chart.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
-      const pointStyle = "rect";
-      const legend = {
-          labels: {
-              usePointStyle: true,
-              generateLabels: () => {
-                  const legendValues = [
-                      {
-                          text: _t("Positive values"),
-                          fontColor,
-                          strokeStyle: positiveColor,
-                          fillStyle: positiveColor,
-                          pointStyle,
-                      },
-                      {
-                          text: _t("Negative values"),
-                          fontColor,
-                          strokeStyle: negativeColor,
-                          fillStyle: negativeColor,
-                          pointStyle,
-                      },
-                  ];
-                  if (chart.showSubTotals || chart.firstValueAsSubtotal) {
-                      legendValues.push({
-                          text: _t("Subtotals"),
-                          fontColor,
-                          strokeStyle: subTotalColor,
-                          fillStyle: subTotalColor,
-                          pointStyle,
-                      });
-                  }
-                  return legendValues;
-              },
-          },
-      };
-      if (chart.legendPosition === "none") {
-          legend.display = false;
-      }
-      else {
-          legend.position = chart.legendPosition;
-      }
-      config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-      config.options.layout = {
-          padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
-      };
-      config.options.scales = {
-          x: {
-              ticks: {
-                  padding: 5,
-                  color: fontColor,
-              },
-              grid: {
-                  display: false,
-              },
-              title: getChartAxisTitleRuntime(chart.axesDesign?.x),
+  function createWaterfallChartRuntime(chart, getters) {
+      const definition = chart.getDefinition();
+      const chartData = getBarChartData(definition, chart.dataSets, chart.labelRange, getters);
+      const { labels, datasets } = getWaterfallDatasetAndLabels(definition, chartData);
+      const config = {
+          type: "bar",
+          data: {
+              labels,
+              datasets,
           },
-          y: {
-              position: chart.verticalAxisPosition,
-              ticks: {
-                  color: fontColor,
-                  callback: (value) => {
-                      value = Number(value);
-                      if (isNaN(value))
-                          return value;
-                      return formatValue(value, {
-                          locale,
-                          format: !format && Math.abs(value) > 1000 ? "#,##" : format,
-                      });
-                  },
-              },
-              grid: {
-                  lineWidth: (context) => {
-                      return context.tick.value === 0 ? 2 : 1;
-                  },
+          options: {
+              ...CHART_COMMON_OPTIONS,
+              layout: getWaterfallChartLayout(definition),
+              scales: getWaterfallChartScales(definition, chartData),
+              plugins: {
+                  title: getChartTitle(definition),
+                  legend: getWaterfallChartLegend(definition),
+                  tooltip: getWaterfallChartTooltip(definition, chartData),
+                  chartShowValuesPlugin: getChartShowValues(definition, chartData),
+                  waterfallLinesPlugin: { showConnectorLines: definition.showConnectorLines },
               },
-              title: getChartAxisTitleRuntime(chart.axesDesign?.y),
           },
       };
-      config.options.plugins.tooltip = {
-          callbacks: {
-              label: function (tooltipItem) {
-                  const [lastValue, currentValue] = tooltipItem.raw;
-                  const yLabel = currentValue - lastValue;
-                  const dataSeriesIndex = Math.floor(tooltipItem.dataIndex / labels.length);
-                  const dataSeriesLabel = dataSeriesLabels[dataSeriesIndex];
-                  const toolTipFormat = !format && Math.abs(yLabel) > 1000 ? "#,##" : format;
-                  const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-                  return dataSeriesLabel ? `${dataSeriesLabel}: ${yLabelStr}` : yLabelStr;
-              },
-          },
-      };
-      config.options.plugins.waterfallLinesPlugin = { showConnectorLines: chart.showConnectorLines };
-      config.options.plugins.chartShowValuesPlugin = {
-          showValues: chart.showValues,
-          background: chart.background,
-          callback: formatTickValue(localeFormat),
-      };
-      return config;
-  }
-  function createWaterfallChartRuntime(chart, getters) {
-      const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-      let labels = labelValues.formattedValues;
-      let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-      if (chart.dataSetsHaveTitle &&
-          dataSetsValues[0] &&
-          labels.length > dataSetsValues[0].data.length) {
-          labels.shift();
-      }
-      ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-      if (chart.aggregated) {
-          ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-      }
-      if (chart.showSubTotals) {
-          labels.push(_t("Subtotal"));
-      }
-      const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left") ||
-          getChartDatasetFormat(getters, chart.dataSets, "right");
-      const locale = getters.getLocale();
-      const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label);
-      const config = getWaterfallConfiguration(chart, labels, dataSeriesLabels, {
-          format: dataSetFormat,
-          locale,
-      });
-      config.type = "bar";
-      const negativeColor = chart.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
-      const positiveColor = chart.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
-      const subTotalColor = chart.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
-      const backgroundColor = [];
-      const datasetValues = [];
-      const dataset = {
-          label: "",
-          data: datasetValues,
-          backgroundColor,
-      };
-      const labelsWithSubTotals = [];
-      let lastValue = 0;
-      for (const dataSetsValue of dataSetsValues) {
-          for (let i = 0; i < dataSetsValue.data.length; i++) {
-              const data = dataSetsValue.data[i];
-              labelsWithSubTotals.push(labels[i]);
-              if (isNaN(Number(data))) {
-                  datasetValues.push([lastValue, lastValue]);
-                  backgroundColor.push("");
-                  continue;
-              }
-              datasetValues.push([lastValue, data + lastValue]);
-              let color = data >= 0 ? positiveColor : negativeColor;
-              if (i === 0 && dataSetsValue === dataSetsValues[0] && chart.firstValueAsSubtotal) {
-                  color = subTotalColor;
-              }
-              backgroundColor.push(color);
-              lastValue += data;
-          }
-          if (chart.showSubTotals) {
-              labelsWithSubTotals.push(_t("Subtotal"));
-              datasetValues.push([0, lastValue]);
-              backgroundColor.push(subTotalColor);
-          }
-      }
-      config.data.datasets.push(dataset);
-      config.data.labels = labelsWithSubTotals.map(truncateLabel);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
@@ -30767,7 +30978,7 @@ stores.inject(MyMetaStore, storeInstance);
               env.model.dispatch("COPY");
               await env.clipboard.write(env.model.getters.getClipboardContent());
           },
-          icon: "o-spreadsheet-Icon.COPY",
+          icon: "o-spreadsheet-Icon.CLIPBOARD",
       };
   }
   function getCutMenuItem(figureId, env) {
@@ -32555,14 +32766,14 @@ stores.inject(MyMetaStore, storeInstance);
    * - Else returns a bar chart
    */
   function getSmartChartDefinition(zone, getters) {
+      const sheetId = getters.getActiveSheetId();
       let dataSetZone = zone;
       const singleColumn = zoneToDimension(zone).numberOfCols === 1;
       if (!singleColumn) {
           dataSetZone = { ...zone, left: zone.left + 1 };
       }
-      const dataRange = zoneToXc(dataSetZone);
+      const dataRange = zoneToXc(getters.getUnboundedZone(sheetId, dataSetZone));
       const dataSets = [{ dataRange, yAxisId: "y" }];
-      const sheetId = getters.getActiveSheetId();
       const topLeftCell = getters.getCell({ sheetId, col: zone.left, row: zone.top });
       if (getZoneArea(zone) === 1 && topLeftCell?.content) {
           return {
@@ -32582,10 +32793,7 @@ stores.inject(MyMetaStore, storeInstance);
       const dataSetsHaveTitle = !!cellsInFirstRow.find((cell) => cell.type !== CellValueType.empty && cell.type !== CellValueType.number);
       let labelRangeXc;
       if (!singleColumn) {
-          labelRangeXc = zoneToXc({
-              ...zone,
-              right: zone.left,
-          });
+          labelRangeXc = zoneToXc(getters.getUnboundedZone(sheetId, { ...zone, right: zone.left }));
       }
       // Only display legend for several datasets.
       const newLegendPos = dataSetZone.right === dataSetZone.left ? "none" : "top";
@@ -32629,6 +32837,51 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
+  var CHART_HELPERS = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AbstractChart: AbstractChart,
+    BarChart: BarChart,
+    CHART_AXIS_CHOICES: CHART_AXIS_CHOICES,
+    CHART_COMMON_OPTIONS: CHART_COMMON_OPTIONS,
+    GaugeChart: GaugeChart,
+    LineChart: LineChart,
+    PieChart: PieChart,
+    ScorecardChart: ScorecardChart$1,
+    TREND_LINE_XAXIS_ID: TREND_LINE_XAXIS_ID,
+    WaterfallChart: WaterfallChart,
+    adaptChartRange: adaptChartRange,
+    chartFactory: chartFactory,
+    chartFontColor: chartFontColor,
+    chartRuntimeFactory: chartRuntimeFactory,
+    chartToImage: chartToImage,
+    checkDataset: checkDataset,
+    checkLabelRange: checkLabelRange,
+    copyDataSetsWithNewSheetId: copyDataSetsWithNewSheetId,
+    copyLabelRangeWithNewSheetId: copyLabelRangeWithNewSheetId,
+    createBarChartRuntime: createBarChartRuntime,
+    createDataSets: createDataSets,
+    createGaugeChartRuntime: createGaugeChartRuntime,
+    createLineChartRuntime: createLineChartRuntime,
+    createPieChartRuntime: createPieChartRuntime,
+    createScorecardChartRuntime: createScorecardChartRuntime,
+    createWaterfallChartRuntime: createWaterfallChartRuntime,
+    drawScoreChart: drawScoreChart,
+    formatChartDatasetValue: formatChartDatasetValue,
+    formatTickValue: formatTickValue,
+    getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
+    getDefinedAxis: getDefinedAxis,
+    getPieColors: getPieColors,
+    getSmartChartDefinition: getSmartChartDefinition,
+    shouldRemoveFirstLabel: shouldRemoveFirstLabel,
+    toExcelDataset: toExcelDataset,
+    toExcelLabelRange: toExcelLabelRange,
+    transformChartDefinitionWithDataSetsWithZone: transformChartDefinitionWithDataSetsWithZone,
+    transformDefinition: transformDefinition,
+    truncateLabel: truncateLabel,
+    updateChartRangesWithDataSets: updateChartRangesWithDataSets,
+    validateChartDefinition: validateChartDefinition
+  });
+
   /**
    * Create a table on the selected zone, with UI warnings to the user if the creation fails.
    * If a single cell is selected, expand the selection to non-empty adjacent cells to create a table.
@@ -33202,7 +33455,7 @@ stores.inject(MyMetaStore, storeInstance);
           env.model.dispatch("COPY");
           await env.clipboard.write(env.model.getters.getClipboardContent());
       },
-      icon: "o-spreadsheet-Icon.COPY",
+      icon: "o-spreadsheet-Icon.CLIPBOARD",
   };
   const cut = {
       name: _t("Cut"),
@@ -36686,6 +36939,7 @@ stores.inject(MyMetaStore, storeInstance);
           currentColor: { type: String, optional: true },
           maxHeight: { type: Number, optional: true },
           anchorRect: Object,
+          disableNoColor: { type: Boolean, optional: true },
       };
       static defaultProps = { currentColor: "" };
       static components = { Popover };
@@ -37085,6 +37339,7 @@ stores.inject(MyMetaStore, storeInstance);
           currentColor: { type: String, optional: true },
           title: { type: String, optional: true },
           onColorPicked: Function,
+          disableNoColor: { type: Boolean, optional: true },
       };
       colorPickerButtonRef = owl.useRef("colorPickerButton");
       state;
@@ -40253,6 +40508,9 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       setColorScaleColor(target, color) {
+          if (!isColorValid(color)) {
+              return;
+          }
           const point = this.state.rules.colorScale[target];
           if (point) {
               point.color = Number.parseInt(color.slice(1), 16);
@@ -51163,16 +51421,11 @@ stores.inject(MyMetaStore, storeInstance);
       import(data) {
           // Borders
           if (Object.keys(data.borders || {}).length) {
-              for (let sheet of data.sheets) {
-                  for (const zoneXc in sheet.borders) {
-                      const borderId = sheet.borders[zoneXc];
+              for (const sheet of data.sheets) {
+                  for (const [position, borderId] of iterateItemIdsPositions(sheet.id, sheet.borders)) {
+                      const { sheetId, col, row } = position;
                       const border = data.borders[borderId];
-                      const zone = toZone(zoneXc);
-                      for (let row = zone.top; row <= zone.bottom; row++) {
-                          for (let col = zone.left; col <= zone.right; col++) {
-                              this.setBorder(sheet.id, col, row, border, false);
-                          }
-                      }
+                      this.setBorder(sheetId, col, row, border, false);
                   }
               }
           }
@@ -51205,23 +51458,17 @@ stores.inject(MyMetaStore, storeInstance);
           data.borders = borders;
       }
       exportForExcel(data) {
-          for (const sheet of data.sheets) {
-              for (let col = 0; col < sheet.colNumber; col++) {
-                  for (let row = 0; row < sheet.rowNumber; row++) {
-                      const border = this.getCellBorder({ sheetId: sheet.id, col, row });
-                      if (border) {
-                          const xc = toXC(col, row);
-                          sheet.cells[xc] ??= {};
-                          sheet.cells[xc].border = getItemId(border, data.borders);
-                      }
-                  }
-              }
-          }
+          this.export(data);
       }
   }
 
   class PositionMap {
       map = {};
+      constructor(entries = []) {
+          for (const [position, value] of entries) {
+              this.set(position, value);
+          }
+      }
       set({ sheetId, col, row }, value) {
           const map = this.map;
           if (!map[sheetId]) {
@@ -51458,10 +51705,10 @@ stores.inject(MyMetaStore, storeInstance);
               const cellsData = new PositionMap();
               // cells content
               for (const xc in sheet.cells) {
-                  if (sheet.cells[xc]?.content) {
+                  if (sheet.cells[xc]) {
                       const { col, row } = toCartesian(xc);
                       const position = { sheetId: sheet.id, col, row };
-                      cellsData.set(position, { content: sheet.cells[xc]?.content });
+                      cellsData.set(position, { content: sheet.cells[xc] });
                   }
               }
               // cells style and format
@@ -51469,20 +51716,13 @@ stores.inject(MyMetaStore, storeInstance);
                   ["style", sheet.styles],
                   ["format", sheet.formats],
               ]) {
-                  for (const zoneXc in valuesByZones) {
-                      const itemId = valuesByZones[zoneXc];
-                      const zone = toZone(zoneXc);
-                      for (let row = zone.top; row <= zone.bottom; row++) {
-                          for (let col = zone.left; col <= zone.right; col++) {
-                              const position = { sheetId, col, row };
-                              const cellData = cellsData.get(position);
-                              if (cellData) {
-                                  cellData[cellProperty] = itemId;
-                              }
-                              else {
-                                  cellsData.set(position, { [cellProperty]: itemId });
-                              }
-                          }
+                  for (const [position, itemId] of iterateItemIdsPositions(sheet.id, valuesByZones)) {
+                      const cellData = cellsData.get(position);
+                      if (cellData) {
+                          cellData[cellProperty] = itemId;
+                      }
+                      else {
+                          cellsData.set(position, { [cellProperty]: itemId });
                       }
                   }
               }
@@ -51524,9 +51764,7 @@ stores.inject(MyMetaStore, storeInstance);
                       positionsByFormat[formatId].push(position);
                   }
                   if (cell.content) {
-                      cells[xc] = {
-                          content: cell.content,
-                      };
+                      cells[xc] = cell.content;
                   }
               }
               _sheet.styles = groupItemIdsByZones(positionsByStyle);
@@ -51542,35 +51780,19 @@ stores.inject(MyMetaStore, storeInstance);
       }
       exportForExcel(data) {
           this.export(data);
-          for (const sheet of data.sheets) {
-              for (const cellId in this.getters.getCells(sheet.id)) {
-                  const { col, row } = this.getters.getCellPosition(cellId);
-                  const xc = toXC(col, row);
-                  const cell = this.getCellById(cellId);
-                  sheet.cells[xc] ??= {};
-                  if (cell?.format) {
-                      sheet.cells[xc].format = getItemId(cell.format, data.formats);
-                  }
-                  if (cell?.style) {
-                      sheet.cells[xc] ??= {};
-                      sheet.cells[xc].style = getItemId(this.removeDefaultStyleValues(cell.style), data.styles);
-                  }
-              }
-          }
-          const incompatible = [];
+          const incompatibleIds = [];
           for (const formatId in data.formats || []) {
               if (!isExcelCompatible(data.formats[formatId])) {
-                  incompatible.push(formatId);
+                  incompatibleIds.push(Number(formatId));
                   delete data.formats[formatId];
               }
           }
-          if (incompatible.length) {
+          if (incompatibleIds.length) {
               for (const sheet of data.sheets) {
-                  for (const xc in sheet.cells) {
-                      const cell = sheet.cells[xc];
-                      const format = cell?.format;
-                      if (format && incompatible.includes(format.toString())) {
-                          delete cell.format;
+                  for (const zoneXc in sheet.formats) {
+                      const formatId = sheet.formats[zoneXc];
+                      if (formatId && incompatibleIds.includes(formatId)) {
+                          delete sheet.formats[zoneXc];
                       }
                   }
               }
@@ -58369,42 +58591,44 @@ stores.inject(MyMetaStore, storeInstance);
       // Export
       // ---------------------------------------------------------------------------
       exportForExcel(data) {
+          for (const sheet of data.sheets) {
+              sheet.cellValues = {};
+          }
           for (const position of this.evaluator.getEvaluatedPositions()) {
               const evaluatedCell = this.evaluator.getEvaluatedCell(position);
               const xc = toXC(position.col, position.row);
               const value = evaluatedCell.value;
               let isFormula = false;
               let newContent = undefined;
-              let newFormat = undefined;
               let isExported = true;
               const exportedSheetData = data.sheets.find((sheet) => sheet.id === position.sheetId);
               const formulaCell = this.getCorrespondingFormulaCell(position);
               if (formulaCell) {
                   isExported = isExportableToExcel(formulaCell.compiledFormula.tokens);
                   isFormula = isExported;
-                  if (!isExported) {
-                      // If the cell contains a non-exported formula and that is evaluates to
-                      // nothing* ,we don't export it.
-                      // * non-falsy value are relevant and so are 0 and FALSE, which only leaves
-                      // the empty string.
-                      if (value !== "") {
-                          newContent = (value ?? "").toString();
-                          newFormat = evaluatedCell.format;
+                  // If the cell contains a non-exported formula and that is evaluates to
+                  // nothing* ,we don't export it.
+                  // * non-falsy value are relevant and so are 0 and FALSE, which only leaves
+                  // the empty string.
+                  if (!isExported && value !== "") {
+                      newContent = (value ?? "").toString();
+                      const newFormat = evaluatedCell.format;
+                      if (newFormat) {
+                          const newFormatId = getItemId(newFormat, data.formats);
+                          exportedSheetData.formats[xc] = newFormatId;
                       }
                   }
               }
-              const exportedCellData = exportedSheetData.cells[xc] || {};
-              const format = newFormat
-                  ? getItemId(newFormat, data.formats)
-                  : exportedCellData.format;
+              const exportedCellData = exportedSheetData.cells[xc];
               let content;
               if (isExported && isFormula && formulaCell instanceof FormulaCellWithDependencies) {
                   content = formulaCell.contentWithFixedReferences;
               }
               else {
-                  content = !isExported ? newContent : exportedCellData.content;
+                  content = !isExported ? newContent : exportedCellData;
               }
-              exportedSheetData.cells[xc] = { ...exportedCellData, value, isFormula, content, format };
+              exportedSheetData.cells[xc] = content;
+              exportedSheetData.cellValues[xc] = value;
           }
       }
       /**
@@ -64458,12 +64682,9 @@ stores.inject(MyMetaStore, storeInstance);
                       const headerString = this.getters.getEvaluatedCell(position).formattedValue;
                       const headerName = this.getUniqueColNameForExcel(i, headerString, headerNames);
                       headerNames.push(headerName);
-                      sheetData.cells[toXC(position.col, position.row)] = {
-                          ...sheetData.cells[toXC(position.col, position.row)],
-                          content: headerName,
-                          value: headerName,
-                          isFormula: false,
-                      };
+                      const xc = toXC(position.col, position.row);
+                      sheetData.cells[xc] = headerName;
+                      sheetData.cellValues[xc] = headerName;
                   }
                   tableData.filters = filters;
               }
@@ -71030,18 +71251,17 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  function addFormula(cell) {
-      const formula = cell.content;
+  function addFormula(formula, value) {
       if (!formula) {
           return { attrs: [], node: escapeXml `` };
       }
-      const type = getCellType(cell.value);
+      const type = getCellType(value);
       if (type === undefined) {
           return { attrs: [], node: escapeXml `` };
       }
       const attrs = [["t", type]];
       const XlsxFormula = adaptFormulaToExcel(formula);
-      const exportedValue = adaptFormulaValueToExcel(cell.value);
+      const exportedValue = adaptFormulaValueToExcel(value);
       const node = escapeXml /*xml*/ `<f>${XlsxFormula}</f><v>${exportedValue}</v>`;
       return { attrs, node };
   }
@@ -71810,7 +72030,7 @@ stores.inject(MyMetaStore, storeInstance);
       const columns = [];
       for (const i of range(0, zoneToDimension(tableZone).numberOfCols)) {
           const colHeaderXc = toXC(tableZone.left + i, tableZone.top);
-          const colName = sheetData.cells[colHeaderXc]?.content || `col${i}`;
+          const colName = sheetData.cells[colHeaderXc] || `col${i}`;
           const colAttributes = [
               ["id", i + 1], // id cannot be 0
               ["name", colName],
@@ -71819,7 +72039,7 @@ stores.inject(MyMetaStore, storeInstance);
               // Note: To be 100% complete, we could also add a `totalsRowLabel` attribute for total strings, and a tag
               // `<totalsRowFormula>` for the formula of the total. But those doesn't seem to be mandatory for Excel.
               const colTotalXc = toXC(tableZone.left + i, tableZone.bottom);
-              const colTotalContent = sheetData.cells[colTotalXc]?.content;
+              const colTotalContent = sheetData.cells[colTotalXc];
               if (colTotalContent?.startsWith("=")) {
                   colAttributes.push(["totalsRowFunction", "custom"]);
               }
@@ -71890,14 +72110,22 @@ stores.inject(MyMetaStore, storeInstance);
           if (row.collapsed) {
               rowAttrs.push(["collapsed", 1]);
           }
+          const styles = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.styles));
+          const borders = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.borders));
+          const formats = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.formats));
           const cellNodes = [];
           for (let c = 0; c < sheet.colNumber; c++) {
               const xc = toXC(c, r);
-              const cell = sheet.cells[xc];
-              if (cell) {
+              const content = sheet.cells[xc];
+              const value = sheet.cellValues[xc];
+              const position = { sheetId: sheet.id, col: c, row: r };
+              const styleId = styles.get(position);
+              const formatId = formats.get(position);
+              const borderId = borders.get(position);
+              if (content || styleId || formatId || borderId || value !== undefined) {
                   const attributes = [["r", xc]];
                   // style
-                  const id = normalizeStyle(construct, extractStyle(cell, data));
+                  const id = normalizeStyle(construct, extractStyle(data, styleId, formatId, borderId));
                   // don't add style if default
                   if (id) {
                       attributes.push(["s", id]);
@@ -71905,22 +72133,22 @@ stores.inject(MyMetaStore, storeInstance);
                   let additionalAttrs = [];
                   let cellNode = escapeXml ``;
                   // Either formula or static value inside the cell
-                  if (cell.isFormula) {
-                      const res = addFormula(cell);
+                  if (content?.startsWith("=") && value !== undefined) {
+                      const res = addFormula(content, value);
                       if (!res) {
                           continue;
                       }
                       ({ attrs: additionalAttrs, node: cellNode } = res);
                   }
-                  else if (cell.content && isMarkdownLink(cell.content)) {
-                      const { label } = parseMarkdownLink(cell.content);
+                  else if (content && isMarkdownLink(content)) {
+                      const { label } = parseMarkdownLink(content);
                       ({ attrs: additionalAttrs, node: cellNode } = addContent(label, construct.sharedStrings));
                   }
-                  else if (cell.content && cell.content !== "") {
+                  else if (content && content !== "") {
                       const isTableHeader = isCellTableHeader(c, r, sheet);
                       const isTableTotal = isCellTableTotal(c, r, sheet);
-                      const isPlainText = !!(cell.format && isTextFormat(data.formats[cell.format]));
-                      ({ attrs: additionalAttrs, node: cellNode } = addContent(cell.content, construct.sharedStrings, isTableHeader || isTableTotal || isPlainText));
+                      const isPlainText = !!(formatId && isTextFormat(data.formats[formatId]));
+                      ({ attrs: additionalAttrs, node: cellNode } = addContent(content, construct.sharedStrings, isTableHeader || isTableTotal || isPlainText));
                   }
                   attributes.push(...additionalAttrs);
                   // prettier-ignore
@@ -71969,7 +72197,7 @@ stores.inject(MyMetaStore, storeInstance);
       const cells = sheet.cells;
       const linkNodes = [];
       for (const xc in cells) {
-          const content = cells[xc]?.content;
+          const content = cells[xc];
           if (content && isMarkdownLink(content)) {
               const { label, url } = parseMarkdownLink(content);
               if (isSheetUrl(url)) {
@@ -72941,14 +73169,6 @@ stores.inject(MyMetaStore, storeInstance);
       createEmptyWorkbookData,
       createEmptySheet,
       createEmptyExcelSheet,
-      getDefaultChartJsRuntime,
-      getCustomLegendLabels,
-      chartFontColor,
-      getChartAxisTitleRuntime,
-      getChartAxisType,
-      getTrendDatasetForBarChart,
-      getTrendDatasetForLineChart,
-      getFillingMode,
       rgbaToHex,
       colorToRGBA,
       positionToZone,
@@ -72983,7 +73203,6 @@ stores.inject(MyMetaStore, storeInstance);
       createPivotFormula,
       areDomainArgsFieldsValid,
       splitReference,
-      formatTickValue,
   };
   const links = {
       isMarkdownLink,
@@ -73068,11 +73287,8 @@ stores.inject(MyMetaStore, storeInstance);
       DEFAULT_LOCALE,
       HIGHLIGHT_COLOR,
       PIVOT_TABLE_CONFIG,
-      TREND_LINE_XAXIS_ID,
-      CHART_AXIS_CHOICES,
-      INTERACTIVE_LEGEND_CONFIG,
-      ChartTerms,
   };
+  const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
   exports.AbstractCellClipboardHandler = AbstractCellClipboardHandler;
   exports.AbstractChart = AbstractChart;
@@ -73093,6 +73309,7 @@ stores.inject(MyMetaStore, storeInstance);
   exports.addFunction = addFunction;
   exports.addRenderingLayer = addRenderingLayer;
   exports.astToFormula = astToFormula;
+  exports.chartHelpers = chartHelpers;
   exports.compile = compile;
   exports.compileTokens = compileTokens;
   exports.components = components;
@@ -73120,9 +73337,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.1.0-alpha.3";
-  __info__.date = "2024-11-08T12:18:22.841Z";
-  __info__.hash = "96dcfab";
+  __info__.version = "18.1.0-alpha.4";
+  __info__.date = "2024-11-13T15:06:47.769Z";
+  __info__.hash = "e1ad985";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);