@odoo/o-spreadsheet 17.4.24 → 17.4.25

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 17.4.24
- * @date 2025-02-25T05:58:55.802Z
- * @hash 163efbd
+ * @version 17.4.25
+ * @date 2025-03-07T10:33:20.607Z
+ * @hash 765f110
  */
 
 (function (exports, owl) {
@@ -5058,8 +5058,9 @@
           if (zone.bottom !== zone.top && zone.left != zone.right) {
               if (zone.right) {
                   for (let j = zone.left; j <= zone.right; ++j) {
+                      const datasetOptions = j === zone.left ? dataSet : { yAxisId: dataSet.yAxisId };
                       postProcessedRanges.push({
-                          ...dataSet,
+                          ...datasetOptions,
                           dataRange: `${sheetPrefix}${zoneToXc({
                             left: j,
                             right: j,
@@ -5071,8 +5072,9 @@
               }
               else {
                   for (let j = zone.top; j <= zone.bottom; ++j) {
+                      const datasetOptions = j === zone.top ? dataSet : { yAxisId: dataSet.yAxisId };
                       postProcessedRanges.push({
-                          ...dataSet,
+                          ...datasetOptions,
                           dataRange: `${sheetPrefix}${zoneToXc({
                             left: zone.left,
                             right: zone.right,
@@ -10831,70 +10833,347 @@ stores.inject(MyMetaStore, storeInstance);
       return bars.find((bar, i) => i > startIndex && bar.height !== 0);
   }
 
-  window.Chart?.register(waterfallLinesPlugin);
-  window.Chart?.register(chartShowValuesPlugin);
-  class ChartJsComponent extends owl.Component {
-      static template = "o-spreadsheet-ChartJsComponent";
-      static props = {
-          figure: Object,
+  const GAUGE_PADDING_SIDE = 30;
+  const GAUGE_PADDING_TOP = 10;
+  const GAUGE_PADDING_BOTTOM = 20;
+  const GAUGE_LABELS_FONT_SIZE = 12;
+  const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
+  const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
+  const GAUGE_TEXT_COLOR = "#666666";
+  const GAUGE_TEXT_COLOR_HIGH_CONTRAST = "#C8C8C8";
+  const GAUGE_INFLECTION_MARKER_COLOR = "#666666aa";
+  const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
+  const GAUGE_TITLE_SECTION_HEIGHT = 25;
+  const GAUGE_TITLE_FONT_SIZE = DEFAULT_CHART_FONT_SIZE;
+  const GAUGE_TITLE_PADDING_LEFT = DEFAULT_CHART_PADDING;
+  const GAUGE_TITLE_PADDING_TOP = DEFAULT_CHART_PADDING;
+  function drawGaugeChart(canvas, runtime) {
+      const canvasBoundingRect = canvas.getBoundingClientRect();
+      canvas.width = canvasBoundingRect.width;
+      canvas.height = canvasBoundingRect.height;
+      const ctx = canvas.getContext("2d");
+      const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
+      drawBackground(ctx, config);
+      drawGauge(ctx, config);
+      drawInflectionValues(ctx, config);
+      drawLabels(ctx, config);
+      drawTitle(ctx, config);
+  }
+  function drawGauge(ctx, config) {
+      ctx.save();
+      const gauge = config.gauge;
+      const arcCenterX = gauge.rect.x + gauge.rect.width / 2;
+      const arcCenterY = gauge.rect.y + gauge.rect.height;
+      const arcRadius = gauge.rect.height - gauge.arcWidth / 2;
+      if (arcRadius < 0) {
+          return;
+      }
+      const gaugeAngle = gauge.percentage === 1 ? 0 : Math.PI * (1 + gauge.percentage);
+      // Gauge background
+      ctx.strokeStyle = GAUGE_BACKGROUND_COLOR;
+      ctx.beginPath();
+      ctx.lineWidth = gauge.arcWidth;
+      ctx.arc(arcCenterX, arcCenterY, arcRadius, gaugeAngle, 0);
+      ctx.stroke();
+      // Gauge value
+      ctx.strokeStyle = gauge.color;
+      ctx.beginPath();
+      ctx.arc(arcCenterX, arcCenterY, arcRadius, Math.PI, gaugeAngle);
+      ctx.stroke();
+      ctx.restore();
+  }
+  function drawBackground(ctx, config) {
+      ctx.save();
+      ctx.fillStyle = config.backgroundColor;
+      ctx.fillRect(0, 0, config.width, config.height);
+      ctx.restore();
+  }
+  function drawLabels(ctx, config) {
+      for (const label of [config.minLabel, config.maxLabel, config.gaugeValue]) {
+          ctx.save();
+          ctx.textAlign = "center";
+          ctx.fillStyle = label.color;
+          ctx.font = `${label.fontSize}px ${DEFAULT_FONT}`;
+          ctx.fillText(label.label, label.textPosition.x, label.textPosition.y);
+          ctx.restore();
+      }
+  }
+  function drawInflectionValues(ctx, config) {
+      const { x: rectX, y: rectY, width, height } = config.gauge.rect;
+      for (const inflectionValue of config.inflectionValues) {
+          ctx.save();
+          ctx.translate(rectX + width / 2 - 0.5, rectY + height - 0.5); // -0.5 for sharper lines. see RendererPlugin.drawBorders comment
+          ctx.rotate(Math.PI / 2 - inflectionValue.rotation);
+          ctx.lineWidth = 2;
+          ctx.strokeStyle = GAUGE_INFLECTION_MARKER_COLOR;
+          ctx.beginPath();
+          ctx.moveTo(0, -(height - config.gauge.arcWidth));
+          ctx.lineTo(0, -height - 3);
+          ctx.stroke();
+          ctx.textAlign = "center";
+          ctx.font = `${inflectionValue.fontSize}px ${DEFAULT_FONT}`;
+          ctx.fillStyle = inflectionValue.color;
+          const textY = -height - GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN - inflectionValue.offset;
+          ctx.fillText(inflectionValue.label, 0, textY);
+          ctx.restore();
+      }
+  }
+  function drawTitle(ctx, config) {
+      ctx.save();
+      const title = config.title;
+      ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
+      ctx.textBaseline = "middle";
+      ctx.fillStyle = title.color;
+      ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
+      ctx.restore();
+  }
+  function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
+      const maxValue = runtime.maxValue;
+      const minValue = runtime.minValue;
+      const gaugeValue = runtime.gaugeValue;
+      const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
+      const gaugeArcWidth = gaugeRect.width / 6;
+      const gaugePercentage = gaugeValue
+          ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
+          : 0;
+      const gaugeValuePosition = {
+          x: boundingRect.width / 2,
+          y: gaugeRect.y + gaugeRect.height - gaugeRect.height / 12,
       };
-      canvas = owl.useRef("graphContainer");
-      chart;
-      currentRuntime;
-      get background() {
-          return this.chartRuntime.background;
+      let gaugeValueFontSize = GAUGE_DEFAULT_VALUE_FONT_SIZE;
+      // Scale down the font size if the gaugeRect is too small
+      if (gaugeRect.height < 300) {
+          gaugeValueFontSize = gaugeValueFontSize * (gaugeRect.height / 300);
       }
-      get canvasStyle() {
-          return `background-color: ${this.background}`;
+      // Scale down the font size if the text is too long
+      const maxTextWidth = gaugeRect.width / 2;
+      const gaugeLabel = gaugeValue?.label || "-";
+      if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
+          gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
       }
-      get chartRuntime() {
-          const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
-          if (!("chartJsConfig" in runtime)) {
-              throw new Error("Unsupported chart runtime");
-          }
-          return runtime;
+      const minLabelPosition = {
+          x: gaugeRect.x + gaugeArcWidth / 2,
+          y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
+      };
+      const maxLabelPosition = {
+          x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
+          y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
+      };
+      const textColor = getContrastedTextColor(runtime.background);
+      const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
+      let x = 0, titleWidth = 0, titleHeight = 0;
+      if (runtime.title.text) {
+          ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { ...runtime.title, fontSize: GAUGE_TITLE_FONT_SIZE }, "px"));
       }
-      setup() {
-          owl.onMounted(() => {
-              const runtime = this.chartRuntime;
-              this.currentRuntime = runtime;
-              // Note: chartJS modify the runtime in place, so it's important to give it a copy
-              this.createChart(deepCopy(runtime.chartJsConfig));
-          });
-          owl.onWillUnmount(() => this.chart?.destroy());
-          owl.useEffect(() => {
-              const runtime = this.chartRuntime;
-              if (runtime !== this.currentRuntime) {
-                  if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
-                      this.chart?.destroy();
-                      this.createChart(deepCopy(runtime.chartJsConfig));
-                  }
-                  else {
-                      this.updateChartJs(deepCopy(runtime));
-                  }
-                  this.currentRuntime = runtime;
-              }
+      switch (runtime.title.align) {
+          case "right":
+              x = boundingRect.width - titleWidth - GAUGE_TITLE_PADDING_LEFT;
+              break;
+          case "center":
+              x = (boundingRect.width - titleWidth) / 2;
+              break;
+          case "left":
+          default:
+              x = GAUGE_TITLE_PADDING_LEFT;
+              break;
+      }
+      return {
+          width: boundingRect.width,
+          height: boundingRect.height,
+          title: {
+              label: runtime.title.text ?? "",
+              fontSize: GAUGE_TITLE_FONT_SIZE,
+              textPosition: {
+                  x,
+                  y: GAUGE_TITLE_PADDING_TOP + titleHeight / 2,
+              },
+              color: runtime.title.color ?? textColor,
+              bold: runtime.title.bold,
+              italic: runtime.title.italic,
+          },
+          backgroundColor: runtime.background,
+          gauge: {
+              rect: gaugeRect,
+              arcWidth: gaugeArcWidth,
+              percentage: clip(gaugePercentage, 0, 1),
+              color: getGaugeColor(runtime),
+          },
+          inflectionValues,
+          gaugeValue: {
+              label: gaugeLabel,
+              textPosition: gaugeValuePosition,
+              fontSize: gaugeValueFontSize,
+              color: textColor,
+          },
+          minLabel: {
+              label: runtime.minValue.label,
+              textPosition: minLabelPosition,
+              fontSize: GAUGE_LABELS_FONT_SIZE,
+              color: textColor,
+          },
+          maxLabel: {
+              label: runtime.maxValue.label,
+              textPosition: maxLabelPosition,
+              fontSize: GAUGE_LABELS_FONT_SIZE,
+              color: textColor,
+          },
+      };
+  }
+  /**
+   * Get the rectangle in which the gauge will be drawn, based on the bounding rectangle of the canvas and leaving
+   * space for the title and labels.
+   */
+  function getGaugeRect(boundingRect, title) {
+      const titleHeight = title ? GAUGE_TITLE_SECTION_HEIGHT : 0;
+      const drawHeight = boundingRect.height - GAUGE_PADDING_BOTTOM - titleHeight - GAUGE_PADDING_TOP;
+      const drawWidth = boundingRect.width - GAUGE_PADDING_SIDE * 2;
+      let gaugeWidth;
+      let gaugeHeight;
+      if (drawWidth > 2 * drawHeight) {
+          gaugeWidth = 2 * drawHeight;
+          gaugeHeight = drawHeight;
+      }
+      else {
+          gaugeWidth = drawWidth;
+          gaugeHeight = drawWidth / 2;
+      }
+      const gaugeX = GAUGE_PADDING_SIDE + (drawWidth - gaugeWidth) / 2;
+      const gaugeY = titleHeight + GAUGE_PADDING_TOP + (drawHeight - gaugeHeight) / 2;
+      return {
+          x: gaugeX,
+          y: gaugeY,
+          width: gaugeWidth,
+          height: gaugeHeight,
+      };
+  }
+  /**
+   * Get the infliction values of the gauge, and where to draw them (the angle from the center of the gauge at which they are drawn).
+   *
+   * Also compute an offset for the text so that it doesn't overlap with other text.
+   */
+  function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
+      const maxValue = runtime.maxValue;
+      const minValue = runtime.minValue;
+      const gaugeCircleCenter = {
+          x: gaugeRect.x + gaugeRect.width / 2,
+          y: gaugeRect.y + gaugeRect.height,
+      };
+      const textStyle = { fontSize: GAUGE_LABELS_FONT_SIZE };
+      const inflectionValues = [];
+      const inflectionValuesTextRects = [];
+      for (const inflectionValue of runtime.inflectionValues) {
+          const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
+          const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
+          const angle = Math.PI - Math.PI * percentage;
+          const textRect = getRectangleTangentToCircle(angle, // angle between X axis and the point where the rectangle is tangent to the circle
+          gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, // radius of the gauge circle + margin below text
+          gaugeCircleCenter.x, // center of the gauge circle
+          gaugeCircleCenter.y, // center of the gauge circle
+          labelWidth + 2, // width of the text + some margin
+          GAUGE_LABELS_FONT_SIZE // height of the text
+          );
+          let offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect))
+              ? GAUGE_LABELS_FONT_SIZE
+              : 0;
+          inflectionValuesTextRects.push(textRect);
+          inflectionValues.push({
+              rotation: angle,
+              label: inflectionValue.label,
+              fontSize: GAUGE_LABELS_FONT_SIZE,
+              color: textColor,
+              offset,
           });
       }
-      createChart(chartData) {
-          const canvas = this.canvas.el;
-          const ctx = canvas.getContext("2d");
-          this.chart = new window.Chart(ctx, chartData);
+      return inflectionValues;
+  }
+  function getGaugeColor(runtime) {
+      const gaugeValue = runtime.gaugeValue?.value;
+      if (gaugeValue === undefined) {
+          return GAUGE_BACKGROUND_COLOR;
       }
-      updateChartJs(chartRuntime) {
-          const chartData = chartRuntime.chartJsConfig;
-          if (chartData.data && chartData.data.datasets) {
-              this.chart.data = chartData.data;
-              if (chartData.options?.plugins?.title) {
-                  this.chart.config.options.plugins.title = chartData.options.plugins.title;
+      let colorIndex = 0;
+      while (runtime.inflectionValues[colorIndex]?.value <= gaugeValue) {
+          colorIndex++;
+      }
+      return runtime.colors[colorIndex];
+  }
+  function getContrastedTextColor(backgroundColor) {
+      return relativeLuminance(backgroundColor) > 0.3
+          ? GAUGE_TEXT_COLOR
+          : GAUGE_TEXT_COLOR_HIGH_CONTRAST;
+  }
+  function getSegmentsOfRectangle(rectangle) {
+      return [
+          { start: rectangle.topLeft, end: rectangle.topRight },
+          { start: rectangle.topRight, end: rectangle.bottomRight },
+          { start: rectangle.bottomRight, end: rectangle.bottomLeft },
+          { start: rectangle.bottomLeft, end: rectangle.topLeft },
+      ];
+  }
+  /**
+   * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
+   * is not handled.
+   */
+  function doSegmentIntersect(segment1, segment2) {
+      const A = segment1.start;
+      const B = segment1.end;
+      const C = segment2.start;
+      const D = segment2.end;
+      /**
+       * Line segment intersection algorithm
+       * https://bryceboe.com/2006/10/23/line-segment-intersection-algorithm/
+       */
+      function ccw(a, b, c) {
+          return (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x);
+      }
+      return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
+  }
+  function doRectanglesIntersect(rect1, rect2) {
+      const segments1 = getSegmentsOfRectangle(rect1);
+      const segments2 = getSegmentsOfRectangle(rect2);
+      for (const segment1 of segments1) {
+          for (const segment2 of segments2) {
+              if (doSegmentIntersect(segment1, segment2)) {
+                  return true;
               }
           }
-          else {
-              this.chart.data.datasets = [];
-          }
-          this.chart.config.options = chartData.options;
-          this.chart.update();
       }
+      return false;
+  }
+  /**
+   *  Get the rectangle that is tangent to a circle at a given angle.
+   *
+   * @param angle angle between X axis and the point where the rectangle is tangent to the circle
+   */
+  function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
+      const cos = Math.cos(angle);
+      const sin = Math.sin(angle);
+      // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
+      const x = cos * radius;
+      const y = sin * radius;
+      // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
+      const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
+      const y2 = cos * (rectWidth / 2);
+      const bottomRight = {
+          x: x + x2 + circleCenterX,
+          y: circleCenterY - (y - y2),
+      };
+      const bottomLeft = {
+          x: x - x2 + circleCenterX,
+          y: circleCenterY - (y + y2),
+      };
+      // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
+      const xp = cos * (radius + rectHeight);
+      const yp = sin * (radius + rectHeight);
+      const topLeft = {
+          x: xp - x2 + circleCenterX,
+          y: circleCenterY - (yp + y2),
+      };
+      const topRight = {
+          x: xp + x2 + circleCenterX,
+          y: circleCenterY - (yp - y2),
+      };
+      return { bottomLeft, bottomRight, topRight, topLeft };
   }
 
   /**
@@ -11560,6 +11839,364 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /**
+   * This file contains helpers that are common to different runtime charts (mainly
+   * line, bar and pie charts)
+   */
+  /**
+   * Get the data from a dataSet
+   */
+  function getData(getters, ds) {
+      if (ds.dataRange) {
+          const labelCellZone = ds.labelCell ? [ds.labelCell.zone] : [];
+          const dataZone = recomputeZones([ds.dataRange.zone], labelCellZone)[0];
+          if (dataZone === undefined) {
+              return [];
+          }
+          const dataRange = getters.getRangeFromZone(ds.dataRange.sheetId, dataZone);
+          return getters.getRangeValues(dataRange).map((value) => (value === "" ? undefined : value));
+      }
+      return [];
+  }
+  function filterEmptyDataPoints(labels, datasets) {
+      const numberOfDataPoints = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length || 0));
+      const dataPointsIndexes = range(0, numberOfDataPoints).filter((dataPointIndex) => {
+          const label = labels[dataPointIndex];
+          const values = datasets.map((dataset) => dataset.data?.[dataPointIndex]);
+          return label || values.some((value) => value === 0 || Boolean(value));
+      });
+      return {
+          labels: dataPointsIndexes.map((i) => labels[i] || ""),
+          dataSetsValues: datasets.map((dataset) => ({
+              ...dataset,
+              data: dataPointsIndexes.map((i) => dataset.data[i]),
+          })),
+      };
+  }
+  /**
+   * Aggregates data based on labels
+   */
+  function aggregateDataForLabels(labels, datasets) {
+      const parseNumber = (value) => (typeof value === "number" ? value : 0);
+      const labelSet = new Set(labels);
+      const labelMap = {};
+      labelSet.forEach((label) => {
+          labelMap[label] = new Array(datasets.length).fill(0);
+      });
+      for (const indexOfLabel of range(0, labels.length)) {
+          const label = labels[indexOfLabel];
+          for (const indexOfDataset of range(0, datasets.length)) {
+              labelMap[label][indexOfDataset] += parseNumber(datasets[indexOfDataset].data[indexOfLabel]);
+          }
+      }
+      return {
+          labels: Array.from(labelSet),
+          dataSetsValues: datasets.map((dataset, indexOfDataset) => ({
+              ...dataset,
+              data: Array.from(labelSet).map((label) => labelMap[label][indexOfDataset]),
+          })),
+      };
+  }
+  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, { format, locale, truncateLabels = true, horizontalChart, }) {
+      const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
+      const 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 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 toolTipFormat = !format && Math.abs(yLabel) >= 1000 ? "#,##" : format;
+                          const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                          return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+                      },
+                  },
+              },
+          },
+      };
+      return {
+          type: chart.type,
+          options,
+          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, shouldRemoveFirstLabel) {
+      if (!range)
+          return undefined;
+      const { sheetId, zone } = range;
+      const formats = positions(zone).map((position) => getters.getEvaluatedCell({ sheetId, ...position }).format);
+      if (shouldRemoveFirstLabel) {
+          formats.shift();
+      }
+      return formats.find((format) => format !== undefined);
+  }
+  function getChartLabelValues(getters, dataSets, labelRange) {
+      let labels = { values: [], formattedValues: [] };
+      if (labelRange) {
+          if (!labelRange.invalidXc && !labelRange.invalidSheetName) {
+              labels = {
+                  formattedValues: getters.getRangeFormattedValues(labelRange),
+                  values: getters.getRangeValues(labelRange).map((val) => String(val ?? "")),
+              };
+          }
+      }
+      else if (dataSets.length === 1) {
+          for (let i = 0; i < getData(getters, dataSets[0]).length; i++) {
+              labels.formattedValues.push("");
+              labels.values.push("");
+          }
+      }
+      else {
+          if (dataSets[0]) {
+              const ranges = getData(getters, dataSets[0]);
+              labels = {
+                  formattedValues: range(0, ranges.length).map((r) => r.toString()),
+                  values: labels.formattedValues,
+              };
+          }
+      }
+      return labels;
+  }
+  /**
+   * Get the format to apply to the the dataset values. This format is defined as the first format
+   * found in the dataset ranges that isn't a date format.
+   */
+  function getChartDatasetFormat(getters, dataSets) {
+      for (const ds of dataSets) {
+          const formatsInDataset = getters.getRangeFormats(ds.dataRange);
+          const format = formatsInDataset.find((f) => f !== undefined && !isDateTimeFormat(f));
+          if (format)
+              return format;
+      }
+      return undefined;
+  }
+  function getChartDatasetValues(getters, dataSets) {
+      const datasetValues = [];
+      for (const [dsIndex, ds] of Object.entries(dataSets)) {
+          let label;
+          if (ds.labelCell) {
+              const labelRange = ds.labelCell;
+              const cell = labelRange
+                  ? getters.getEvaluatedCell({
+                      sheetId: labelRange.sheetId,
+                      col: labelRange.zone.left,
+                      row: labelRange.zone.top,
+                  })
+                  : undefined;
+              label =
+                  cell && labelRange
+                      ? truncateLabel(cell.formattedValue)
+                      : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
+          }
+          else {
+              label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`;
+          }
+          let data = ds.dataRange ? getData(getters, ds) : [];
+          if (data.every((e) => typeof e === "string" && !isEvaluationError(e))) {
+              // In this case, we want a chart based on the string occurrences count
+              // This will be done by associating each string with a value of 1 and
+              // the using the classical aggregation method to sum the values.
+              data.fill(1);
+          }
+          datasetValues.push({ data, label });
+      }
+      return datasetValues;
+  }
+  /**
+   * 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).
+   *
+   * See https://www.chartjs.org/docs/latest/charts/area.html#filling-modes
+   */
+  function getFillingMode(index, stackedChart) {
+      if (!stackedChart) {
+          return "origin";
+      }
+      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 = getChartJSConstructor();
+          const chart = new 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();
+      },
+  };
+  /** Return window.Chart, making sure all our extensions are loaded in ChartJS */
+  function getChartJSConstructor() {
+      if (window.Chart && !window.Chart?.registry.plugins.get("chartShowValuesPlugin")) {
+          window.Chart.register(chartShowValuesPlugin);
+          window.Chart.register(waterfallLinesPlugin);
+      }
+      return window.Chart;
+  }
+
+  class ChartJsComponent extends owl.Component {
+      static template = "o-spreadsheet-ChartJsComponent";
+      static props = {
+          figure: Object,
+      };
+      canvas = owl.useRef("graphContainer");
+      chart;
+      currentRuntime;
+      get background() {
+          return this.chartRuntime.background;
+      }
+      get canvasStyle() {
+          return `background-color: ${this.background}`;
+      }
+      get chartRuntime() {
+          const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
+          if (!("chartJsConfig" in runtime)) {
+              throw new Error("Unsupported chart runtime");
+          }
+          return runtime;
+      }
+      setup() {
+          owl.onMounted(() => {
+              const runtime = this.chartRuntime;
+              this.currentRuntime = runtime;
+              // Note: chartJS modify the runtime in place, so it's important to give it a copy
+              this.createChart(deepCopy(runtime.chartJsConfig));
+          });
+          owl.onWillUnmount(() => this.chart?.destroy());
+          owl.useEffect(() => {
+              const runtime = this.chartRuntime;
+              if (runtime !== this.currentRuntime) {
+                  if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
+                      this.chart?.destroy();
+                      this.createChart(deepCopy(runtime.chartJsConfig));
+                  }
+                  else {
+                      this.updateChartJs(deepCopy(runtime));
+                  }
+                  this.currentRuntime = runtime;
+              }
+          });
+      }
+      createChart(chartData) {
+          const canvas = this.canvas.el;
+          const ctx = canvas.getContext("2d");
+          const Chart = getChartJSConstructor();
+          this.chart = new Chart(ctx, chartData);
+      }
+      updateChartJs(chartRuntime) {
+          const chartData = chartRuntime.chartJsConfig;
+          if (chartData.data && chartData.data.datasets) {
+              this.chart.data = chartData.data;
+              if (chartData.options?.plugins?.title) {
+                  this.chart.config.options.plugins.title = chartData.options.plugins.title;
+              }
+          }
+          else {
+              this.chart.data.datasets = [];
+          }
+          this.chart.config.options = chartData.options;
+          this.chart.update();
+      }
+  }
+
   class ScorecardChart extends owl.Component {
       static template = "o-spreadsheet-ScorecardChart";
       static props = {
@@ -24400,7 +25037,7 @@ stores.inject(MyMetaStore, storeInstance);
       condition: (cell) => !cell.isFormula &&
           evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text &&
           alphaNumericValueRegExp.test(cell.content),
-      generateRule: (cell, cells) => {
+      generateRule: (cell, cells, direction) => {
           const numberPostfix = parseInt(cell.content.match(numberPostfixRegExp)[0]);
           const prefix = cell.content.match(stringPrefixRegExp)[0];
           const numberPostfixLength = cell.content.length - prefix.length;
@@ -24408,7 +25045,10 @@ stores.inject(MyMetaStore, storeInstance);
               alphaNumericValueRegExp.test(evaluatedCell.value)) // get consecutive alphanumeric cells, no matter what the prefix is
               .filter((cell) => prefix === (cell.value ?? "").toString().match(stringPrefixRegExp)[0])
               .map((cell) => parseInt((cell.value ?? "").toString().match(numberPostfixRegExp)[0]));
-          const increment = calculateIncrementBasedOnGroup(group);
+          let increment = calculateIncrementBasedOnGroup(group);
+          if (["up", "left"].includes(direction) && group.length === 1) {
+              increment = -increment;
+          }
           return {
               type: "ALPHANUMERIC_INCREMENT_MODIFIER",
               prefix,
@@ -24437,9 +25077,12 @@ stores.inject(MyMetaStore, storeInstance);
       .add("increment_number", {
       condition: (cell) => !cell.isFormula &&
           evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number,
-      generateRule: (cell, cells) => {
+      generateRule: (cell, cells, direction) => {
           const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number).map((cell) => Number(cell.value));
-          const increment = calculateIncrementBasedOnGroup(group);
+          let increment = calculateIncrementBasedOnGroup(group);
+          if (["up", "left"].includes(direction) && group.length === 1) {
+              increment = -increment;
+          }
           const evaluation = evaluateLiteral(cell, { locale: DEFAULT_LOCALE });
           return {
               type: "INCREMENT_MODIFIER",
@@ -24450,349 +25093,6 @@ stores.inject(MyMetaStore, storeInstance);
       sequence: 40,
   });
 
-  const GAUGE_PADDING_SIDE = 30;
-  const GAUGE_PADDING_TOP = 10;
-  const GAUGE_PADDING_BOTTOM = 20;
-  const GAUGE_LABELS_FONT_SIZE = 12;
-  const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
-  const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
-  const GAUGE_TEXT_COLOR = "#666666";
-  const GAUGE_TEXT_COLOR_HIGH_CONTRAST = "#C8C8C8";
-  const GAUGE_INFLECTION_MARKER_COLOR = "#666666aa";
-  const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
-  const GAUGE_TITLE_SECTION_HEIGHT = 25;
-  const GAUGE_TITLE_FONT_SIZE = DEFAULT_CHART_FONT_SIZE;
-  const GAUGE_TITLE_PADDING_LEFT = DEFAULT_CHART_PADDING;
-  const GAUGE_TITLE_PADDING_TOP = DEFAULT_CHART_PADDING;
-  function drawGaugeChart(canvas, runtime) {
-      const canvasBoundingRect = canvas.getBoundingClientRect();
-      canvas.width = canvasBoundingRect.width;
-      canvas.height = canvasBoundingRect.height;
-      const ctx = canvas.getContext("2d");
-      const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
-      drawBackground(ctx, config);
-      drawGauge(ctx, config);
-      drawInflectionValues(ctx, config);
-      drawLabels(ctx, config);
-      drawTitle(ctx, config);
-  }
-  function drawGauge(ctx, config) {
-      ctx.save();
-      const gauge = config.gauge;
-      const arcCenterX = gauge.rect.x + gauge.rect.width / 2;
-      const arcCenterY = gauge.rect.y + gauge.rect.height;
-      const arcRadius = gauge.rect.height - gauge.arcWidth / 2;
-      if (arcRadius < 0) {
-          return;
-      }
-      const gaugeAngle = gauge.percentage === 1 ? 0 : Math.PI * (1 + gauge.percentage);
-      // Gauge background
-      ctx.strokeStyle = GAUGE_BACKGROUND_COLOR;
-      ctx.beginPath();
-      ctx.lineWidth = gauge.arcWidth;
-      ctx.arc(arcCenterX, arcCenterY, arcRadius, gaugeAngle, 0);
-      ctx.stroke();
-      // Gauge value
-      ctx.strokeStyle = gauge.color;
-      ctx.beginPath();
-      ctx.arc(arcCenterX, arcCenterY, arcRadius, Math.PI, gaugeAngle);
-      ctx.stroke();
-      ctx.restore();
-  }
-  function drawBackground(ctx, config) {
-      ctx.save();
-      ctx.fillStyle = config.backgroundColor;
-      ctx.fillRect(0, 0, config.width, config.height);
-      ctx.restore();
-  }
-  function drawLabels(ctx, config) {
-      for (const label of [config.minLabel, config.maxLabel, config.gaugeValue]) {
-          ctx.save();
-          ctx.textAlign = "center";
-          ctx.fillStyle = label.color;
-          ctx.font = `${label.fontSize}px ${DEFAULT_FONT}`;
-          ctx.fillText(label.label, label.textPosition.x, label.textPosition.y);
-          ctx.restore();
-      }
-  }
-  function drawInflectionValues(ctx, config) {
-      const { x: rectX, y: rectY, width, height } = config.gauge.rect;
-      for (const inflectionValue of config.inflectionValues) {
-          ctx.save();
-          ctx.translate(rectX + width / 2 - 0.5, rectY + height - 0.5); // -0.5 for sharper lines. see RendererPlugin.drawBorders comment
-          ctx.rotate(Math.PI / 2 - inflectionValue.rotation);
-          ctx.lineWidth = 2;
-          ctx.strokeStyle = GAUGE_INFLECTION_MARKER_COLOR;
-          ctx.beginPath();
-          ctx.moveTo(0, -(height - config.gauge.arcWidth));
-          ctx.lineTo(0, -height - 3);
-          ctx.stroke();
-          ctx.textAlign = "center";
-          ctx.font = `${inflectionValue.fontSize}px ${DEFAULT_FONT}`;
-          ctx.fillStyle = inflectionValue.color;
-          const textY = -height - GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN - inflectionValue.offset;
-          ctx.fillText(inflectionValue.label, 0, textY);
-          ctx.restore();
-      }
-  }
-  function drawTitle(ctx, config) {
-      ctx.save();
-      const title = config.title;
-      ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
-      ctx.textBaseline = "middle";
-      ctx.fillStyle = title.color;
-      ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
-      ctx.restore();
-  }
-  function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
-      const maxValue = runtime.maxValue;
-      const minValue = runtime.minValue;
-      const gaugeValue = runtime.gaugeValue;
-      const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
-      const gaugeArcWidth = gaugeRect.width / 6;
-      const gaugePercentage = gaugeValue
-          ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
-          : 0;
-      const gaugeValuePosition = {
-          x: boundingRect.width / 2,
-          y: gaugeRect.y + gaugeRect.height - gaugeRect.height / 12,
-      };
-      let gaugeValueFontSize = GAUGE_DEFAULT_VALUE_FONT_SIZE;
-      // Scale down the font size if the gaugeRect is too small
-      if (gaugeRect.height < 300) {
-          gaugeValueFontSize = gaugeValueFontSize * (gaugeRect.height / 300);
-      }
-      // Scale down the font size if the text is too long
-      const maxTextWidth = gaugeRect.width / 2;
-      const gaugeLabel = gaugeValue?.label || "-";
-      if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
-          gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
-      }
-      const minLabelPosition = {
-          x: gaugeRect.x + gaugeArcWidth / 2,
-          y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
-      };
-      const maxLabelPosition = {
-          x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
-          y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
-      };
-      const textColor = getContrastedTextColor(runtime.background);
-      const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
-      let x = 0, titleWidth = 0, titleHeight = 0;
-      if (runtime.title.text) {
-          ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { ...runtime.title, fontSize: GAUGE_TITLE_FONT_SIZE }, "px"));
-      }
-      switch (runtime.title.align) {
-          case "right":
-              x = boundingRect.width - titleWidth - GAUGE_TITLE_PADDING_LEFT;
-              break;
-          case "center":
-              x = (boundingRect.width - titleWidth) / 2;
-              break;
-          case "left":
-          default:
-              x = GAUGE_TITLE_PADDING_LEFT;
-              break;
-      }
-      return {
-          width: boundingRect.width,
-          height: boundingRect.height,
-          title: {
-              label: runtime.title.text ?? "",
-              fontSize: GAUGE_TITLE_FONT_SIZE,
-              textPosition: {
-                  x,
-                  y: GAUGE_TITLE_PADDING_TOP + titleHeight / 2,
-              },
-              color: runtime.title.color ?? textColor,
-              bold: runtime.title.bold,
-              italic: runtime.title.italic,
-          },
-          backgroundColor: runtime.background,
-          gauge: {
-              rect: gaugeRect,
-              arcWidth: gaugeArcWidth,
-              percentage: clip(gaugePercentage, 0, 1),
-              color: getGaugeColor(runtime),
-          },
-          inflectionValues,
-          gaugeValue: {
-              label: gaugeLabel,
-              textPosition: gaugeValuePosition,
-              fontSize: gaugeValueFontSize,
-              color: textColor,
-          },
-          minLabel: {
-              label: runtime.minValue.label,
-              textPosition: minLabelPosition,
-              fontSize: GAUGE_LABELS_FONT_SIZE,
-              color: textColor,
-          },
-          maxLabel: {
-              label: runtime.maxValue.label,
-              textPosition: maxLabelPosition,
-              fontSize: GAUGE_LABELS_FONT_SIZE,
-              color: textColor,
-          },
-      };
-  }
-  /**
-   * Get the rectangle in which the gauge will be drawn, based on the bounding rectangle of the canvas and leaving
-   * space for the title and labels.
-   */
-  function getGaugeRect(boundingRect, title) {
-      const titleHeight = title ? GAUGE_TITLE_SECTION_HEIGHT : 0;
-      const drawHeight = boundingRect.height - GAUGE_PADDING_BOTTOM - titleHeight - GAUGE_PADDING_TOP;
-      const drawWidth = boundingRect.width - GAUGE_PADDING_SIDE * 2;
-      let gaugeWidth;
-      let gaugeHeight;
-      if (drawWidth > 2 * drawHeight) {
-          gaugeWidth = 2 * drawHeight;
-          gaugeHeight = drawHeight;
-      }
-      else {
-          gaugeWidth = drawWidth;
-          gaugeHeight = drawWidth / 2;
-      }
-      const gaugeX = GAUGE_PADDING_SIDE + (drawWidth - gaugeWidth) / 2;
-      const gaugeY = titleHeight + GAUGE_PADDING_TOP + (drawHeight - gaugeHeight) / 2;
-      return {
-          x: gaugeX,
-          y: gaugeY,
-          width: gaugeWidth,
-          height: gaugeHeight,
-      };
-  }
-  /**
-   * Get the infliction values of the gauge, and where to draw them (the angle from the center of the gauge at which they are drawn).
-   *
-   * Also compute an offset for the text so that it doesn't overlap with other text.
-   */
-  function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
-      const maxValue = runtime.maxValue;
-      const minValue = runtime.minValue;
-      const gaugeCircleCenter = {
-          x: gaugeRect.x + gaugeRect.width / 2,
-          y: gaugeRect.y + gaugeRect.height,
-      };
-      const textStyle = { fontSize: GAUGE_LABELS_FONT_SIZE };
-      const inflectionValues = [];
-      const inflectionValuesTextRects = [];
-      for (const inflectionValue of runtime.inflectionValues) {
-          const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
-          const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
-          const angle = Math.PI - Math.PI * percentage;
-          const textRect = getRectangleTangentToCircle(angle, // angle between X axis and the point where the rectangle is tangent to the circle
-          gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, // radius of the gauge circle + margin below text
-          gaugeCircleCenter.x, // center of the gauge circle
-          gaugeCircleCenter.y, // center of the gauge circle
-          labelWidth + 2, // width of the text + some margin
-          GAUGE_LABELS_FONT_SIZE // height of the text
-          );
-          let offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect))
-              ? GAUGE_LABELS_FONT_SIZE
-              : 0;
-          inflectionValuesTextRects.push(textRect);
-          inflectionValues.push({
-              rotation: angle,
-              label: inflectionValue.label,
-              fontSize: GAUGE_LABELS_FONT_SIZE,
-              color: textColor,
-              offset,
-          });
-      }
-      return inflectionValues;
-  }
-  function getGaugeColor(runtime) {
-      const gaugeValue = runtime.gaugeValue?.value;
-      if (gaugeValue === undefined) {
-          return GAUGE_BACKGROUND_COLOR;
-      }
-      let colorIndex = 0;
-      while (runtime.inflectionValues[colorIndex]?.value <= gaugeValue) {
-          colorIndex++;
-      }
-      return runtime.colors[colorIndex];
-  }
-  function getContrastedTextColor(backgroundColor) {
-      return relativeLuminance(backgroundColor) > 0.3
-          ? GAUGE_TEXT_COLOR
-          : GAUGE_TEXT_COLOR_HIGH_CONTRAST;
-  }
-  function getSegmentsOfRectangle(rectangle) {
-      return [
-          { start: rectangle.topLeft, end: rectangle.topRight },
-          { start: rectangle.topRight, end: rectangle.bottomRight },
-          { start: rectangle.bottomRight, end: rectangle.bottomLeft },
-          { start: rectangle.bottomLeft, end: rectangle.topLeft },
-      ];
-  }
-  /**
-   * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
-   * is not handled.
-   */
-  function doSegmentIntersect(segment1, segment2) {
-      const A = segment1.start;
-      const B = segment1.end;
-      const C = segment2.start;
-      const D = segment2.end;
-      /**
-       * Line segment intersection algorithm
-       * https://bryceboe.com/2006/10/23/line-segment-intersection-algorithm/
-       */
-      function ccw(a, b, c) {
-          return (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x);
-      }
-      return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
-  }
-  function doRectanglesIntersect(rect1, rect2) {
-      const segments1 = getSegmentsOfRectangle(rect1);
-      const segments2 = getSegmentsOfRectangle(rect2);
-      for (const segment1 of segments1) {
-          for (const segment2 of segments2) {
-              if (doSegmentIntersect(segment1, segment2)) {
-                  return true;
-              }
-          }
-      }
-      return false;
-  }
-  /**
-   *  Get the rectangle that is tangent to a circle at a given angle.
-   *
-   * @param angle angle between X axis and the point where the rectangle is tangent to the circle
-   */
-  function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
-      const cos = Math.cos(angle);
-      const sin = Math.sin(angle);
-      // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
-      const x = cos * radius;
-      const y = sin * radius;
-      // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
-      const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
-      const y2 = cos * (rectWidth / 2);
-      const bottomRight = {
-          x: x + x2 + circleCenterX,
-          y: circleCenterY - (y - y2),
-      };
-      const bottomLeft = {
-          x: x - x2 + circleCenterX,
-          y: circleCenterY - (y + y2),
-      };
-      // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
-      const xp = cos * (radius + rectHeight);
-      const yp = sin * (radius + rectHeight);
-      const topLeft = {
-          x: xp - x2 + circleCenterX,
-          y: circleCenterY - (yp + y2),
-      };
-      const topRight = {
-          x: xp + x2 + circleCenterX,
-          y: circleCenterY - (yp - y2),
-      };
-      return { bottomLeft, bottomRight, topRight, topLeft };
-  }
-
   class GaugeChartComponent extends owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
       canvas = owl.useRef("chartContainer");
@@ -24825,290 +25125,6 @@ stores.inject(MyMetaStore, storeInstance);
       return color;
   }
 
-  /**
-   * This file contains helpers that are common to different runtime charts (mainly
-   * line, bar and pie charts)
-   */
-  /**
-   * Get the data from a dataSet
-   */
-  function getData(getters, ds) {
-      if (ds.dataRange) {
-          const labelCellZone = ds.labelCell ? [ds.labelCell.zone] : [];
-          const dataZone = recomputeZones([ds.dataRange.zone], labelCellZone)[0];
-          if (dataZone === undefined) {
-              return [];
-          }
-          const dataRange = getters.getRangeFromZone(ds.dataRange.sheetId, dataZone);
-          return getters.getRangeValues(dataRange).map((value) => (value === "" ? undefined : value));
-      }
-      return [];
-  }
-  function filterEmptyDataPoints(labels, datasets) {
-      const numberOfDataPoints = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length || 0));
-      const dataPointsIndexes = range(0, numberOfDataPoints).filter((dataPointIndex) => {
-          const label = labels[dataPointIndex];
-          const values = datasets.map((dataset) => dataset.data?.[dataPointIndex]);
-          return label || values.some((value) => value === 0 || Boolean(value));
-      });
-      return {
-          labels: dataPointsIndexes.map((i) => labels[i] || ""),
-          dataSetsValues: datasets.map((dataset) => ({
-              ...dataset,
-              data: dataPointsIndexes.map((i) => dataset.data[i]),
-          })),
-      };
-  }
-  /**
-   * Aggregates data based on labels
-   */
-  function aggregateDataForLabels(labels, datasets) {
-      const parseNumber = (value) => (typeof value === "number" ? value : 0);
-      const labelSet = new Set(labels);
-      const labelMap = {};
-      labelSet.forEach((label) => {
-          labelMap[label] = new Array(datasets.length).fill(0);
-      });
-      for (const indexOfLabel of range(0, labels.length)) {
-          const label = labels[indexOfLabel];
-          for (const indexOfDataset of range(0, datasets.length)) {
-              labelMap[label][indexOfDataset] += parseNumber(datasets[indexOfDataset].data[indexOfLabel]);
-          }
-      }
-      return {
-          labels: Array.from(labelSet),
-          dataSetsValues: datasets.map((dataset, indexOfDataset) => ({
-              ...dataset,
-              data: Array.from(labelSet).map((label) => labelMap[label][indexOfDataset]),
-          })),
-      };
-  }
-  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, { format, locale, truncateLabels = true, horizontalChart, }) {
-      const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
-      const 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 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 toolTipFormat = !format && Math.abs(yLabel) >= 1000 ? "#,##" : format;
-                          const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-                          return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
-                      },
-                  },
-              },
-          },
-      };
-      return {
-          type: chart.type,
-          options,
-          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, shouldRemoveFirstLabel) {
-      if (!range)
-          return undefined;
-      const { sheetId, zone } = range;
-      const formats = positions(zone).map((position) => getters.getEvaluatedCell({ sheetId, ...position }).format);
-      if (shouldRemoveFirstLabel) {
-          formats.shift();
-      }
-      return formats.find((format) => format !== undefined);
-  }
-  function getChartLabelValues(getters, dataSets, labelRange) {
-      let labels = { values: [], formattedValues: [] };
-      if (labelRange) {
-          if (!labelRange.invalidXc && !labelRange.invalidSheetName) {
-              labels = {
-                  formattedValues: getters.getRangeFormattedValues(labelRange),
-                  values: getters.getRangeValues(labelRange).map((val) => String(val ?? "")),
-              };
-          }
-      }
-      else if (dataSets.length === 1) {
-          for (let i = 0; i < getData(getters, dataSets[0]).length; i++) {
-              labels.formattedValues.push("");
-              labels.values.push("");
-          }
-      }
-      else {
-          if (dataSets[0]) {
-              const ranges = getData(getters, dataSets[0]);
-              labels = {
-                  formattedValues: range(0, ranges.length).map((r) => r.toString()),
-                  values: labels.formattedValues,
-              };
-          }
-      }
-      return labels;
-  }
-  /**
-   * Get the format to apply to the the dataset values. This format is defined as the first format
-   * found in the dataset ranges that isn't a date format.
-   */
-  function getChartDatasetFormat(getters, dataSets) {
-      for (const ds of dataSets) {
-          const formatsInDataset = getters.getRangeFormats(ds.dataRange);
-          const format = formatsInDataset.find((f) => f !== undefined && !isDateTimeFormat(f));
-          if (format)
-              return format;
-      }
-      return undefined;
-  }
-  function getChartDatasetValues(getters, dataSets) {
-      const datasetValues = [];
-      for (const [dsIndex, ds] of Object.entries(dataSets)) {
-          let label;
-          if (ds.labelCell) {
-              const labelRange = ds.labelCell;
-              const cell = labelRange
-                  ? getters.getEvaluatedCell({
-                      sheetId: labelRange.sheetId,
-                      col: labelRange.zone.left,
-                      row: labelRange.zone.top,
-                  })
-                  : undefined;
-              label =
-                  cell && labelRange
-                      ? truncateLabel(cell.formattedValue)
-                      : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
-          }
-          else {
-              label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`;
-          }
-          let data = ds.dataRange ? getData(getters, ds) : [];
-          if (data.every((e) => typeof e === "string" && !isEvaluationError(e))) {
-              // In this case, we want a chart based on the string occurrences count
-              // This will be done by associating each string with a value of 1 and
-              // the using the classical aggregation method to sum the values.
-              data.fill(1);
-          }
-          datasetValues.push({ data, label });
-      }
-      return datasetValues;
-  }
-  /**
-   * 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).
-   *
-   * See https://www.chartjs.org/docs/latest/charts/area.html#filling-modes
-   */
-  function getFillingMode(index, stackedChart) {
-      if (!stackedChart) {
-          return "origin";
-      }
-      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;
-      }
-      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();
-      },
-  };
-
   class BarChart extends AbstractChart {
       dataSets;
       labelRange;
@@ -25529,11 +25545,12 @@ stores.inject(MyMetaStore, storeInstance);
   }
   let missingTimeAdapterAlreadyWarned = false;
   function isLuxonTimeAdapterInstalled() {
-      if (!window.Chart) {
+      const Chart = getChartJSConstructor();
+      if (!Chart) {
           return false;
       }
       // @ts-ignore
-      const adapter = new window.Chart._adapters._date({});
+      const adapter = new Chart._adapters._date({});
       const isInstalled = adapter._id === "luxon";
       if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
           missingTimeAdapterAlreadyWarned = true;
@@ -25550,7 +25567,8 @@ stores.inject(MyMetaStore, storeInstance);
               generateLabels(chart) {
                   // color the legend labels with the dataset color, without any transparency
                   const { data } = chart;
-                  const labels = window.Chart.defaults.plugins.legend.labels.generateLabels(chart);
+                  const Chart = getChartJSConstructor();
+                  const labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
                   for (const [index, label] of labels.entries()) {
                       label.fillStyle = data.datasets[index].borderColor;
                   }
@@ -40932,6 +40950,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.MAX_SIZE_MARGIN = 90;
           this.MIN_ELEMENT_SIZE = MIN_COL_WIDTH;
       }
+      get sheetId() {
+          return this.env.model.getters.getActiveSheetId();
+      }
       _getEvOffset(ev) {
           return ev.offsetX;
       }
@@ -40954,10 +40975,10 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getEdgeScrollCol(position, position, position);
       }
       _getDimensionsInViewport(index) {
-          return this.env.model.getters.getColDimensionsInViewport(this.env.model.getters.getActiveSheetId(), index);
+          return this.env.model.getters.getColDimensionsInViewport(this.sheetId, index);
       }
       _getElementSize(index) {
-          return this.env.model.getters.getColSize(this.env.model.getters.getActiveSheetId(), index);
+          return this.env.model.getters.getColSize(this.sheetId, index);
       }
       _getMaxSize() {
           return this.colResizerRef.el.clientWidth;
@@ -40968,7 +40989,7 @@ stores.inject(MyMetaStore, storeInstance);
           const cols = this.env.model.getters.getActiveCols();
           this.env.model.dispatch("RESIZE_COLUMNS_ROWS", {
               dimension: "COL",
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               elements: cols.has(index) ? [...cols] : [index],
               size,
           });
@@ -40981,7 +41002,7 @@ stores.inject(MyMetaStore, storeInstance);
               elements.push(colIndex);
           }
           const result = this.env.model.dispatch("MOVE_COLUMNS_ROWS", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               dimension: "COL",
               base: this.state.base,
               elements,
@@ -41000,7 +41021,7 @@ stores.inject(MyMetaStore, storeInstance);
       _fitElementSize(index) {
           const cols = this.env.model.getters.getActiveCols();
           this.env.model.dispatch("AUTORESIZE_COLUMNS", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               cols: cols.has(index) ? [...cols] : [index],
           });
       }
@@ -41011,7 +41032,7 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getActiveCols();
       }
       _getPreviousVisibleElement(index) {
-          const sheetId = this.env.model.getters.getActiveSheetId();
+          const sheetId = this.sheetId;
           let row;
           for (row = index - 1; row >= 0; row--) {
               if (!this.env.model.getters.isColHidden(sheetId, row)) {
@@ -41022,7 +41043,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       unhide(hiddenElements) {
           this.env.model.dispatch("UNHIDE_COLUMNS_ROWS", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               elements: hiddenElements,
               dimension: "COL",
           });
@@ -41038,7 +41059,7 @@ stores.inject(MyMetaStore, storeInstance);
     left: 0;
     right: 0;
     width: ${HEADER_WIDTH}px;
-    height: 100%;
+    height: calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH}px);
     &.o-dragging {
       cursor: grabbing;
     }
@@ -41096,6 +41117,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.MIN_ELEMENT_SIZE = MIN_ROW_HEIGHT;
       }
       rowResizerRef;
+      get sheetId() {
+          return this.env.model.getters.getActiveSheetId();
+      }
       _getEvOffset(ev) {
           return ev.offsetY;
       }
@@ -41118,10 +41142,10 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getEdgeScrollRow(position, position, position);
       }
       _getDimensionsInViewport(index) {
-          return this.env.model.getters.getRowDimensionsInViewport(this.env.model.getters.getActiveSheetId(), index);
+          return this.env.model.getters.getRowDimensionsInViewport(this.sheetId, index);
       }
       _getElementSize(index) {
-          return this.env.model.getters.getRowSize(this.env.model.getters.getActiveSheetId(), index);
+          return this.env.model.getters.getRowSize(this.sheetId, index);
       }
       _getMaxSize() {
           return this.rowResizerRef.el.clientHeight;
@@ -41132,7 +41156,7 @@ stores.inject(MyMetaStore, storeInstance);
           const rows = this.env.model.getters.getActiveRows();
           this.env.model.dispatch("RESIZE_COLUMNS_ROWS", {
               dimension: "ROW",
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               elements: rows.has(index) ? [...rows] : [index],
               size,
           });
@@ -41145,7 +41169,7 @@ stores.inject(MyMetaStore, storeInstance);
               elements.push(rowIndex);
           }
           const result = this.env.model.dispatch("MOVE_COLUMNS_ROWS", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               dimension: "ROW",
               base: this.state.base,
               elements,
@@ -41164,7 +41188,7 @@ stores.inject(MyMetaStore, storeInstance);
       _fitElementSize(index) {
           const rows = this.env.model.getters.getActiveRows();
           this.env.model.dispatch("AUTORESIZE_ROWS", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               rows: rows.has(index) ? [...rows] : [index],
           });
       }
@@ -41175,7 +41199,7 @@ stores.inject(MyMetaStore, storeInstance);
           return this.env.model.getters.getActiveRows();
       }
       _getPreviousVisibleElement(index) {
-          const sheetId = this.env.model.getters.getActiveSheetId();
+          const sheetId = this.sheetId;
           let row;
           for (row = index - 1; row >= 0; row--) {
               if (!this.env.model.getters.isRowHidden(sheetId, row)) {
@@ -41186,7 +41210,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       unhide(hiddenElements) {
           this.env.model.dispatch("UNHIDE_COLUMNS_ROWS", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
+              sheetId: this.sheetId,
               dimension: "ROW",
               elements: hiddenElements,
           });
@@ -43149,6 +43173,7 @@ stores.inject(MyMetaStore, storeInstance);
   const CONTENT_TYPES = {
       workbook: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml",
       sheet: "application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml",
+      metadata: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheetMetadata+xml",
       sharedStrings: "application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml",
       styles: "application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml",
       drawing: "application/vnd.openxmlformats-officedocument.drawing+xml",
@@ -43161,6 +43186,7 @@ stores.inject(MyMetaStore, storeInstance);
   const XLSX_RELATION_TYPE = {
       document: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument",
       sheet: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet",
+      metadata: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/sheetMetadata",
       sharedStrings: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings",
       styles: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles",
       drawing: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/drawing",
@@ -43170,6 +43196,7 @@ stores.inject(MyMetaStore, storeInstance);
       hyperlink: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink",
       image: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
   };
+  const ARRAY_FORMULA_URI = "bdbb8cdc-fa1e-496e-a857-3c3f30c029c3";
   const RELATIONSHIP_NSR = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
   const HEIGHT_FACTOR = 0.75; // 100px => 75 u
   /**
@@ -45017,29 +45044,33 @@ stores.inject(MyMetaStore, storeInstance);
    * In all the sheets, replace the table-only references in the formula cells with standard references.
    */
   function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
-      for (let sheet of convertedSheets) {
-          const tables = xlsxSheets.find((s) => s.sheetName === sheet.name).tables;
+      for (let tableSheet of convertedSheets) {
+          const tables = xlsxSheets.find((s) => s.sheetName === tableSheet.name).tables;
           for (let table of tables) {
               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 refIndex;
-                      while ((refIndex = cell.content.indexOf(tabRef)) !== -1) {
-                          let reference = cell.content.slice(refIndex + tabRef.length);
-                          // Expression can either be tableName[colName] or tableName[[#This Row], [colName]]
-                          let endIndex = reference.indexOf("]");
-                          if (reference.startsWith(`[`)) {
-                              endIndex = reference.indexOf("]", endIndex + 1);
-                              endIndex = reference.indexOf("]", endIndex + 1);
+              for (let sheet of convertedSheets) {
+                  for (let xc in sheet.cells) {
+                      const cell = sheet.cells[xc];
+                      if (cell && cell.content && cell.content.startsWith("=")) {
+                          let refIndex;
+                          while ((refIndex = cell.content.indexOf(tabRef)) !== -1) {
+                              let endIndex = refIndex + tabRef.length;
+                              let openBrackets = 1;
+                              while (openBrackets > 0 && endIndex < cell.content.length) {
+                                  if (cell.content[endIndex] === "[") {
+                                      openBrackets++;
+                                  }
+                                  else if (cell.content[endIndex] === "]") {
+                                      openBrackets--;
+                                  }
+                                  endIndex++;
+                              }
+                              let reference = cell.content.slice(refIndex + tabRef.length, endIndex - 1);
+                              const sheetPrefix = tableSheet.id === sheet.id ? "" : tableSheet.name + "!";
+                              const convertedRef = convertTableReference(sheetPrefix, reference, table, xc);
+                              cell.content =
+                                  cell.content.slice(0, refIndex) + convertedRef + cell.content.slice(endIndex);
                           }
-                          reference = reference.slice(0, endIndex);
-                          const convertedRef = convertTableReference(reference, table, xc);
-                          cell.content =
-                              cell.content.slice(0, refIndex) +
-                                  convertedRef +
-                                  cell.content.slice(tabRef.length + refIndex + endIndex + 1);
                       }
                   }
               }
@@ -45047,11 +45078,17 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   /**
-   * Convert table-specific references in formulas into standard references.
+   * Convert table-specific references in formulas into standard references. A table reference is composed of columns names,
+   * and of keywords determining the rows of the table to reference.
    *
    * A reference in a table can have the form (only the part between brackets should be given to this function):
    *  - tableName[colName] : reference to the whole column "colName"
+   *  - tableName[#keyword] : reference to the whatever row the keyword refers to
    *  - tableName[[#keyword], [colName]] : reference to some of the element(s) of the column colName
+   *  - tableName[[#keyword], [colName]:[col2Name]] : reference to some of the element(s) of the columns colName to col2Name
+   *  - tableName[[#keyword1], [#keyword2], [colName]] : reference to all the rows referenced by the keywords in the column colName
+   *  - tableName[[#keyword1], [colName], [#keyword2]]: the keywords and colName can be in any order
+   *
    *
    * The available keywords are :
    * - #All : all the column (including totals)
@@ -45059,58 +45096,109 @@ stores.inject(MyMetaStore, storeInstance);
    * - #Headers : only the header of the column
    * - #Totals : only the totals of the column
    * - #This Row : only the element in the same row as the cell
+   *
+   * Note that the only valid combination of multiple keywords are #Data + #Totals and #Headers + #Data.
    */
-  function convertTableReference(expr, table, cellXc) {
-      const refElements = expr.split(",");
+  function convertTableReference(sheetPrefix, expr, table, cellXc) {
+      // TODO: Ideally we'd want to make a real tokenizer, this simple approach won't work if for example the column name
+      // contain # or , characters. But that's probably an edge case that we can ignore for now.
+      const parts = expr.split(",").map((part) => part.trim());
       const tableZone = toZone(table.ref);
-      const refZone = { ...tableZone };
-      let isReferencedZoneValid = true;
-      // Single column reference
-      if (refElements.length === 1) {
-          const colRelativeIndex = table.cols.findIndex((col) => col.name === refElements[0]);
-          refZone.left = refZone.right = colRelativeIndex + tableZone.left;
-          if (table.headerRowCount) {
-              refZone.top += table.headerRowCount;
-          }
-          if (table.totalsRowCount) {
-              refZone.bottom -= 1;
+      const colIndexes = [];
+      const rowIndexes = [];
+      const foundKeywords = [];
+      for (const part of parts) {
+          if (removeBrackets(part).startsWith("#")) {
+              const keyWord = removeBrackets(part);
+              foundKeywords.push(keyWord);
+              switch (keyWord) {
+                  case "#All":
+                      rowIndexes.push(tableZone.top, tableZone.bottom);
+                      break;
+                  case "#Data":
+                      const top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
+                      const bottom = table.totalsRowCount
+                          ? tableZone.bottom - table.totalsRowCount
+                          : tableZone.bottom;
+                      rowIndexes.push(top, bottom);
+                      break;
+                  case "#This Row":
+                      rowIndexes.push(toCartesian(cellXc).row);
+                      break;
+                  case "#Headers":
+                      if (!table.headerRowCount) {
+                          return CellErrorType.InvalidReference;
+                      }
+                      rowIndexes.push(tableZone.top);
+                      break;
+                  case "#Totals":
+                      if (!table.totalsRowCount) {
+                          return CellErrorType.InvalidReference;
+                      }
+                      rowIndexes.push(tableZone.bottom);
+                      break;
+              }
           }
-      }
-      // Other references
-      else {
-          switch (refElements[0].slice(1, refElements[0].length - 1)) {
-              case "#All":
-                  refZone.top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
-                  refZone.bottom = tableZone.bottom;
-                  break;
-              case "#Data":
-                  refZone.top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
-                  refZone.bottom = table.totalsRowCount ? tableZone.bottom + 1 : tableZone.bottom;
-                  break;
-              case "#This Row":
-                  refZone.top = refZone.bottom = toCartesian(cellXc).row;
-                  break;
-              case "#Headers":
-                  refZone.top = refZone.bottom = tableZone.top;
-                  if (!table.headerRowCount) {
-                      isReferencedZoneValid = false;
-                  }
-                  break;
-              case "#Totals":
-                  refZone.top = refZone.bottom = tableZone.bottom;
-                  if (!table.totalsRowCount) {
-                      isReferencedZoneValid = false;
+          else {
+              const columns = part
+                  .split(":")
+                  .map((part) => part.trim())
+                  .map(removeBrackets);
+              if (colIndexes.length) {
+                  return CellErrorType.InvalidReference;
+              }
+              const colRelativeIndex = table.cols.findIndex((col) => col.name === columns[0]);
+              if (colRelativeIndex === -1) {
+                  return CellErrorType.InvalidReference;
+              }
+              colIndexes.push(colRelativeIndex + tableZone.left);
+              if (columns[1]) {
+                  const colRelativeIndex2 = table.cols.findIndex((col) => col.name === columns[1]);
+                  if (colRelativeIndex2 === -1) {
+                      return CellErrorType.InvalidReference;
                   }
-                  break;
+                  colIndexes.push(colRelativeIndex2 + tableZone.left);
+              }
           }
-          const colRef = refElements[1].slice(1, refElements[1].length - 1);
-          const colRelativeIndex = table.cols.findIndex((col) => col.name === colRef);
-          refZone.left = refZone.right = colRelativeIndex + tableZone.left;
       }
-      if (!isReferencedZoneValid) {
+      if (!areKeywordsCompatible(foundKeywords)) {
           return CellErrorType.InvalidReference;
       }
-      return refZone.top !== refZone.bottom ? zoneToXc(refZone) : toXC(refZone.left, refZone.top);
+      if (rowIndexes.length === 0) {
+          const top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
+          const bottom = table.totalsRowCount
+              ? tableZone.bottom - table.totalsRowCount
+              : tableZone.bottom;
+          rowIndexes.push(top, bottom);
+      }
+      if (colIndexes.length === 0) {
+          colIndexes.push(tableZone.left, tableZone.right);
+      }
+      const refZone = {
+          top: Math.min(...rowIndexes),
+          left: Math.min(...colIndexes),
+          bottom: Math.max(...rowIndexes),
+          right: Math.max(...colIndexes),
+      };
+      return sheetPrefix + zoneToXc(refZone);
+  }
+  function removeBrackets(str) {
+      return str.startsWith("[") && str.endsWith("]") ? str.slice(1, str.length - 1) : str;
+  }
+  function areKeywordsCompatible(keywords) {
+      if (keywords.length < 2) {
+          return true;
+      }
+      else if (keywords.length > 2) {
+          return false;
+      }
+      else if (keywords.includes("#Data") && keywords.includes("#Totals")) {
+          return true;
+      }
+      else if (keywords.includes("#Headers") && keywords.includes("#Data")) {
+          return true;
+      }
+      return false;
   }
 
   // -------------------------------------
@@ -54940,6 +55028,9 @@ stores.inject(MyMetaStore, storeInstance);
       // Export
       // ---------------------------------------------------------------------------
       exportForExcel(data) {
+          for (const sheet of data.sheets) {
+              sheet.formulaSpillRanges = {};
+          }
           for (const position of this.evaluator.getEvaluatedPositions()) {
               const evaluatedCell = this.evaluator.getEvaluatedCell(position);
               const xc = toXC(position.col, position.row);
@@ -54951,8 +55042,9 @@ stores.inject(MyMetaStore, storeInstance);
               const exportedSheetData = data.sheets.find((sheet) => sheet.id === position.sheetId);
               const formulaCell = this.getCorrespondingFormulaCell(position);
               if (formulaCell) {
+                  const cell = this.getters.getCell(position);
                   isExported = isExportableToExcel(formulaCell.compiledFormula.tokens);
-                  isFormula = isExported;
+                  isFormula = isExported && cell?.content === formulaCell.content;
                   if (!isExported) {
                       // If the cell contains a non-exported formula and that is evaluates to
                       // nothing* ,we don't export it.
@@ -54976,6 +55068,10 @@ stores.inject(MyMetaStore, storeInstance);
                   content = !isExported ? newContent : exportedCellData.content;
               }
               exportedSheetData.cells[xc] = { ...exportedCellData, value, isFormula, content, format };
+              const spillZone = this.getSpreadZone(position);
+              if (spillZone) {
+                  exportedSheetData.formulaSpillRanges[xc] = this.getters.getRangeString(this.getters.getRangeFromZone(position.sheetId, spillZone), position.sheetId);
+              }
           }
       }
       /**
@@ -56626,7 +56722,7 @@ stores.inject(MyMetaStore, storeInstance);
       getRule(cell, cells) {
           const rules = autofillRulesRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
           const rule = rules.find((rule) => rule.condition(cell, cells));
-          return rule && rule.generateRule(cell, cells);
+          return rule && this.direction && rule.generateRule(cell, cells, this.direction);
       }
       /**
        * Create the generator to be able to autofill the next cells.
@@ -61708,7 +61804,8 @@ stores.inject(MyMetaStore, storeInstance);
               ? this.getters.getSheetViewVisibleCols()
               : this.getters.getSheetViewVisibleRows();
           const startIndex = visibleHeaders.findIndex((header) => referenceHeaderIndex >= header);
-          const endIndex = visibleHeaders.findIndex((header) => targetHeaderIndex <= header);
+          let endIndex = visibleHeaders.findIndex((header) => targetHeaderIndex <= header);
+          endIndex = endIndex === -1 ? visibleHeaders.length : endIndex;
           const relevantIndexes = visibleHeaders.slice(startIndex, endIndex);
           let offset = 0;
           for (const i of relevantIndexes) {
@@ -66954,7 +67051,7 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  function addFormula(cell) {
+  function addFormula(cell, formulaSpillRange) {
       const formula = cell.content;
       if (!formula) {
           return { attrs: [], node: escapeXml `` };
@@ -66963,10 +67060,17 @@ stores.inject(MyMetaStore, storeInstance);
       if (type === undefined) {
           return { attrs: [], node: escapeXml `` };
       }
-      const attrs = [["t", type]];
+      const attrs = [
+          ["cm", "1"],
+          ["t", type],
+      ];
       const XlsxFormula = adaptFormulaToExcel(formula);
       const exportedValue = adaptFormulaValueToExcel(cell.value);
-      const node = escapeXml /*xml*/ `<f>${XlsxFormula}</f><v>${exportedValue}</v>`;
+      // We treat all formulas as array formulas (a simple formula
+      // is an array formula that spills on only one cell) to avoid
+      // trying to detect spilling sub-formulas which is not a trivial task.
+      let node;
+      node = escapeXml /*xml*/ `<f t="array" ref="${formulaSpillRange}">${XlsxFormula}</f><v>${exportedValue}</v>`;
       return { attrs, node };
   }
   function addContent(content, sharedStrings, forceString = false) {
@@ -67810,7 +67914,7 @@ stores.inject(MyMetaStore, storeInstance);
                   let cellNode = escapeXml ``;
                   // Either formula or static value inside the cell
                   if (cell.isFormula) {
-                      const res = addFormula(cell);
+                      const res = addFormula(cell, sheet.formulaSpillRanges[xc] ?? xc);
                       if (!res) {
                           continue;
                       }
@@ -68085,6 +68189,30 @@ stores.inject(MyMetaStore, storeInstance);
     `;
           files.push(createXMLFile(parseXML(sheetXml), `xl/worksheets/sheet${sheetIndex}.xml`, "sheet"));
       }
+      const sheetMetadataXml = escapeXml /*xml*/ `
+    <metadata xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:xda="http://schemas.microsoft.com/office/spreadsheetml/2017/dynamicarray">
+        <metadataTypes count="1">
+            <metadataType name="XLDAPR" minSupportedVersion="120000" copy="1" pasteAll="1"
+                pasteValues="1" merge="1" splitFirst="1" rowColShift="1" clearFormats="1"
+                clearComments="1" assign="1" coerce="1" cellMeta="1" />
+        </metadataTypes>
+        <futureMetadata name="XLDAPR" count="1">
+            <bk>
+                <extLst>
+                    <ext uri="{${ARRAY_FORMULA_URI}}">
+                        <xda:dynamicArrayProperties fDynamic="1" fCollapsed="0" />
+                    </ext>
+                </extLst>
+            </bk>
+        </futureMetadata>
+        <cellMetadata count="1">
+            <bk>
+                <rc t="1" v="0" />
+            </bk>
+        </cellMetadata>
+    </metadata>
+  `;
+      files.push(createXMLFile(parseXML(sheetMetadataXml), "xl/metadata.xml", "metadata"));
       addRelsToFile(construct.relsFiles, "xl/_rels/workbook.xml.rels", {
           type: XLSX_RELATION_TYPE.sharedStrings,
           target: "sharedStrings.xml",
@@ -68093,6 +68221,10 @@ stores.inject(MyMetaStore, storeInstance);
           type: XLSX_RELATION_TYPE.styles,
           target: "styles.xml",
       });
+      addRelsToFile(construct.relsFiles, "xl/_rels/workbook.xml.rels", {
+          type: XLSX_RELATION_TYPE.metadata,
+          target: "metadata.xml",
+      });
       return files;
   }
   /**
@@ -69023,9 +69155,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "17.4.24";
-  __info__.date = "2025-02-25T05:58:55.802Z";
-  __info__.hash = "163efbd";
+  __info__.version = "17.4.25";
+  __info__.date = "2025-03-07T10:33:20.607Z";
+  __info__.hash = "765f110";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);