@odoo/o-spreadsheet 18.2.1 → 18.2.2

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.2.1
- * @date 2025-02-25T06:03:13.262Z
- * @hash 3b4b5c9
+ * @version 18.2.2
+ * @date 2025-03-07T10:41:04.411Z
+ * @hash f567932
  */
 
 (function (exports, owl) {
@@ -6101,8 +6101,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,
@@ -6114,8 +6115,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,
@@ -9533,150 +9535,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  /**
-   * This file is largely inspired by owl 1.
-   * `css` tag has been removed from owl 2 without workaround to manage css.
-   * So, the solution was to import the behavior of owl 1 directly in our
-   * codebase, with one difference: the css is added to the sheet as soon as the
-   * css tag is executed. In owl 1, the css was added as soon as a Component was
-   * created for the first time.
-   */
-  const STYLESHEETS = {};
-  let nextId = 0;
-  /**
-   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
-   * an inline stylesheet with just the following code:
-   * ```js
-   *     css`.component-a { color: red; }`;
-   * ```
-   */
-  function css(strings, ...args) {
-      const name = `__sheet__${nextId++}`;
-      const value = String.raw(strings, ...args);
-      registerSheet(name, value);
-      activateSheet(name);
-      return name;
-  }
-  function processSheet(str) {
-      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-      const selectorStack = [];
-      const parts = [];
-      let rules = [];
-      function generateSelector(stackIndex, parentSelector) {
-          const parts = [];
-          for (const selector of selectorStack[stackIndex]) {
-              let part = (parentSelector && parentSelector + " " + selector) || selector;
-              if (part.includes("&")) {
-                  part = selector.replace(/&/g, parentSelector || "");
-              }
-              if (stackIndex < selectorStack.length - 1) {
-                  part = generateSelector(stackIndex + 1, part);
-              }
-              parts.push(part);
-          }
-          return parts.join(", ");
-      }
-      function generateRules() {
-          if (rules.length) {
-              parts.push(generateSelector(0) + " {");
-              parts.push(...rules);
-              parts.push("}");
-              rules = [];
-          }
-      }
-      while (tokens.length) {
-          let token = tokens.shift();
-          if (token === "}") {
-              generateRules();
-              selectorStack.pop();
-          }
-          else {
-              if (tokens[0] === "{") {
-                  generateRules();
-                  selectorStack.push(token.split(/\s*,\s*/));
-                  tokens.shift();
-              }
-              if (tokens[0] === ";") {
-                  rules.push("  " + token + ";");
-              }
-          }
-      }
-      return parts.join("\n");
-  }
-  function registerSheet(id, css) {
-      const sheet = document.createElement("style");
-      sheet.textContent = processSheet(css);
-      STYLESHEETS[id] = sheet;
-  }
-  function activateSheet(id) {
-      const sheet = STYLESHEETS[id];
-      sheet.setAttribute("component", id);
-      document.head.appendChild(sheet);
-  }
-  function getTextDecoration({ strikethrough, underline, }) {
-      if (!strikethrough && !underline) {
-          return "none";
-      }
-      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
-  }
-  /**
-   * Convert the cell style to CSS properties.
-   */
-  function cellStyleToCss(style) {
-      const attributes = cellTextStyleToCss(style);
-      if (!style)
-          return attributes;
-      if (style.fillColor) {
-          attributes["background"] = style.fillColor;
-      }
-      return attributes;
-  }
-  /**
-   * Convert the cell text style to CSS properties.
-   */
-  function cellTextStyleToCss(style) {
-      const attributes = {};
-      if (!style)
-          return attributes;
-      if (style.bold) {
-          attributes["font-weight"] = "bold";
-      }
-      if (style.italic) {
-          attributes["font-style"] = "italic";
-      }
-      if (style.strikethrough || style.underline) {
-          let decoration = style.strikethrough ? "line-through" : "";
-          decoration = style.underline ? decoration + " underline" : decoration;
-          attributes["text-decoration"] = decoration;
-      }
-      if (style.textColor) {
-          attributes["color"] = style.textColor;
-      }
-      return attributes;
-  }
-  /**
-   * Transform CSS properties into a CSS string.
-   */
-  function cssPropertiesToCss(attributes) {
-      let styleStr = "";
-      for (const attName in attributes) {
-          if (!attributes[attName]) {
-              continue;
-          }
-          styleStr += `${attName}:${attributes[attName]}; `;
-      }
-      return styleStr;
-  }
-  function getElementMargins(el) {
-      const style = window.getComputedStyle(el);
-      return {
-          top: parseInt(style.marginTop, 10) || 0,
-          bottom: parseInt(style.marginBottom, 10) || 0,
-          left: parseInt(style.marginLeft, 10) || 0,
-          right: parseInt(style.marginRight, 10) || 0,
-      };
-  }
-
   const TREND_LINE_XAXIS_ID = "x1";
   /**
    * This file contains helpers that are common to different charts (mainly
@@ -10221,79 +10079,341 @@ stores.inject(MyMetaStore, storeInstance);
       return bars.find((bar, i) => i > startIndex && bar.height !== 0);
   }
 
-  window.Chart?.register(waterfallLinesPlugin);
-  window.Chart?.register(chartShowValuesPlugin);
-  css /* scss */ `
-  .o-spreadsheet {
-    .o-chart-custom-tooltip {
-      font-size: 12px;
-      background-color: #fff;
-      z-index: ${ComponentsImportance.FigureTooltip};
-    }
+  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_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
+  const GAUGE_TITLE_SECTION_HEIGHT = 25;
+  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);
   }
-`;
-  class ChartJsComponent extends owl.Component {
-      static template = "o-spreadsheet-ChartJsComponent";
-      static props = {
-          figure: Object,
+  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 = chartMutedFontColor(config.backgroundColor) + "aa";
+          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 = chartMutedFontColor(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, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "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 - CHART_PADDING$1;
+              break;
+          case "center":
+              x = (boundingRect.width - titleWidth) / 2;
+              break;
+          case "left":
+          default:
+              x = CHART_PADDING$1;
+              break;
+      }
+      return {
+          width: boundingRect.width,
+          height: boundingRect.height,
+          title: {
+              label: runtime.title.text ?? "",
+              fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
+              textPosition: {
+                  x,
+                  y: CHART_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;
-              }
+      for (let i = 0; i < runtime.inflectionValues.length; i++) {
+          const inflectionValue = runtime.inflectionValues[i];
+          if (inflectionValue.operator === "<" && gaugeValue < inflectionValue.value) {
+              return runtime.colors[i];
           }
-          else {
-              this.chart.data.datasets = [];
+          else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
+              return runtime.colors[i];
           }
-          this.chart.config.options = chartData.options;
-          this.chart.update();
       }
+      return runtime.colors.at(-1);
+  }
+  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 };
   }
 
   /**
@@ -10875,6 +10995,299 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 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;
+  }
+
+  /**
+   * This file is largely inspired by owl 1.
+   * `css` tag has been removed from owl 2 without workaround to manage css.
+   * So, the solution was to import the behavior of owl 1 directly in our
+   * codebase, with one difference: the css is added to the sheet as soon as the
+   * css tag is executed. In owl 1, the css was added as soon as a Component was
+   * created for the first time.
+   */
+  const STYLESHEETS = {};
+  let nextId = 0;
+  /**
+   * CSS tag helper for defining inline stylesheets.  With this, one can simply define
+   * an inline stylesheet with just the following code:
+   * ```js
+   *     css`.component-a { color: red; }`;
+   * ```
+   */
+  function css(strings, ...args) {
+      const name = `__sheet__${nextId++}`;
+      const value = String.raw(strings, ...args);
+      registerSheet(name, value);
+      activateSheet(name);
+      return name;
+  }
+  function processSheet(str) {
+      const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
+      const selectorStack = [];
+      const parts = [];
+      let rules = [];
+      function generateSelector(stackIndex, parentSelector) {
+          const parts = [];
+          for (const selector of selectorStack[stackIndex]) {
+              let part = (parentSelector && parentSelector + " " + selector) || selector;
+              if (part.includes("&")) {
+                  part = selector.replace(/&/g, parentSelector || "");
+              }
+              if (stackIndex < selectorStack.length - 1) {
+                  part = generateSelector(stackIndex + 1, part);
+              }
+              parts.push(part);
+          }
+          return parts.join(", ");
+      }
+      function generateRules() {
+          if (rules.length) {
+              parts.push(generateSelector(0) + " {");
+              parts.push(...rules);
+              parts.push("}");
+              rules = [];
+          }
+      }
+      while (tokens.length) {
+          let token = tokens.shift();
+          if (token === "}") {
+              generateRules();
+              selectorStack.pop();
+          }
+          else {
+              if (tokens[0] === "{") {
+                  generateRules();
+                  selectorStack.push(token.split(/\s*,\s*/));
+                  tokens.shift();
+              }
+              if (tokens[0] === ";") {
+                  rules.push("  " + token + ";");
+              }
+          }
+      }
+      return parts.join("\n");
+  }
+  function registerSheet(id, css) {
+      const sheet = document.createElement("style");
+      sheet.textContent = processSheet(css);
+      STYLESHEETS[id] = sheet;
+  }
+  function activateSheet(id) {
+      const sheet = STYLESHEETS[id];
+      sheet.setAttribute("component", id);
+      document.head.appendChild(sheet);
+  }
+  function getTextDecoration({ strikethrough, underline, }) {
+      if (!strikethrough && !underline) {
+          return "none";
+      }
+      return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+  }
+  /**
+   * Convert the cell style to CSS properties.
+   */
+  function cellStyleToCss(style) {
+      const attributes = cellTextStyleToCss(style);
+      if (!style)
+          return attributes;
+      if (style.fillColor) {
+          attributes["background"] = style.fillColor;
+      }
+      return attributes;
+  }
+  /**
+   * Convert the cell text style to CSS properties.
+   */
+  function cellTextStyleToCss(style) {
+      const attributes = {};
+      if (!style)
+          return attributes;
+      if (style.bold) {
+          attributes["font-weight"] = "bold";
+      }
+      if (style.italic) {
+          attributes["font-style"] = "italic";
+      }
+      if (style.strikethrough || style.underline) {
+          let decoration = style.strikethrough ? "line-through" : "";
+          decoration = style.underline ? decoration + " underline" : decoration;
+          attributes["text-decoration"] = decoration;
+      }
+      if (style.textColor) {
+          attributes["color"] = style.textColor;
+      }
+      return attributes;
+  }
+  /**
+   * Transform CSS properties into a CSS string.
+   */
+  function cssPropertiesToCss(attributes) {
+      let styleStr = "";
+      for (const attName in attributes) {
+          if (!attributes[attName]) {
+              continue;
+          }
+          styleStr += `${attName}:${attributes[attName]}; `;
+      }
+      return styleStr;
+  }
+  function getElementMargins(el) {
+      const style = window.getComputedStyle(el);
+      return {
+          top: parseInt(style.marginTop, 10) || 0,
+          bottom: parseInt(style.marginBottom, 10) || 0,
+          left: parseInt(style.marginLeft, 10) || 0,
+          right: parseInt(style.marginRight, 10) || 0,
+      };
+  }
+
+  css /* scss */ `
+  .o-spreadsheet {
+    .o-chart-custom-tooltip {
+      font-size: 12px;
+      background-color: #fff;
+      z-index: ${ComponentsImportance.FigureTooltip};
+    }
+  }
+`;
+  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 = {
@@ -22327,7 +22740,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;
@@ -22335,7 +22748,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,
@@ -22398,10 +22814,13 @@ 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 &&
               !isDateTimeFormat(evaluatedCell.format || "")).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",
@@ -22445,343 +22864,6 @@ stores.inject(MyMetaStore, storeInstance);
 
   const cellPopoverRegistry = new Registry();
 
-  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_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
-  const GAUGE_TITLE_SECTION_HEIGHT = 25;
-  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 = chartMutedFontColor(config.backgroundColor) + "aa";
-          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 = chartMutedFontColor(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, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "px"));
-      }
-      switch (runtime.title.align) {
-          case "right":
-              x = boundingRect.width - titleWidth - CHART_PADDING$1;
-              break;
-          case "center":
-              x = (boundingRect.width - titleWidth) / 2;
-              break;
-          case "left":
-          default:
-              x = CHART_PADDING$1;
-              break;
-      }
-      return {
-          width: boundingRect.width,
-          height: boundingRect.height,
-          title: {
-              label: runtime.title.text ?? "",
-              fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
-              textPosition: {
-                  x,
-                  y: CHART_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;
-      }
-      for (let i = 0; i < runtime.inflectionValues.length; i++) {
-          const inflectionValue = runtime.inflectionValues[i];
-          if (inflectionValue.operator === "<" && gaugeValue < inflectionValue.value) {
-              return runtime.colors[i];
-          }
-          else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
-              return runtime.colors[i];
-          }
-      }
-      return runtime.colors.at(-1);
-  }
-  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");
@@ -22814,72 +22896,6 @@ 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 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
    */
@@ -22945,6 +22961,7 @@ stores.inject(MyMetaStore, storeInstance);
       macroEnabledTemplateWorkbook: "application/vnd.ms-excel.template.macroEnabled.main+xml",
       excelAddInWorkbook: "application/vnd.ms-excel.addin.macroEnabled.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",
@@ -22957,6 +22974,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",
@@ -22966,6 +22984,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
   /**
@@ -25387,29 +25406,34 @@ 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);
-                  let cellContent = sheet.cells[xc];
-                  if (cellContent?.startsWith("=")) {
-                      let refIndex;
-                      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(`[`)) {
-                              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];
+                      let cellContent = sheet.cells[xc];
+                      if (cell && cellContent && cellContent.startsWith("=")) {
+                          let refIndex;
+                          while ((refIndex = cellContent.indexOf(tabRef)) !== -1) {
+                              let endIndex = refIndex + tabRef.length;
+                              let openBrackets = 1;
+                              while (openBrackets > 0 && endIndex < cellContent.length) {
+                                  if (cellContent[endIndex] === "[") {
+                                      openBrackets++;
+                                  }
+                                  else if (cellContent[endIndex] === "]") {
+                                      openBrackets--;
+                                  }
+                                  endIndex++;
+                              }
+                              let reference = cellContent.slice(refIndex + tabRef.length, endIndex - 1);
+                              const sheetPrefix = tableSheet.id === sheet.id ? "" : tableSheet.name + "!";
+                              const convertedRef = convertTableReference(sheetPrefix, reference, table, xc);
+                              cellContent =
+                                  cellContent.slice(0, refIndex) + convertedRef + cellContent.slice(endIndex);
                           }
-                          reference = reference.slice(0, endIndex);
-                          const convertedRef = convertTableReference(reference, table, xc);
-                          cellContent =
-                              cellContent.slice(0, refIndex) +
-                                  convertedRef +
-                                  cellContent.slice(tabRef.length + refIndex + endIndex + 1);
                       }
                       sheet.cells[xc] = cellContent;
                   }
@@ -25418,11 +25442,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)
@@ -25430,58 +25460,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;
   }
 
   // -------------------------------------
@@ -28649,11 +28730,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;
@@ -32507,10 +32589,6 @@ stores.inject(MyMetaStore, storeInstance);
               this.currentDisplayValue = newDisplay;
               if (!anchor)
                   return;
-              el.style.top = "";
-              el.style.left = "";
-              el.style["max-height"] = "";
-              el.style["max-width"] = "";
               const propsMaxSize = { width: this.props.maxWidth, height: this.props.maxHeight };
               let elDims = {
                   width: el.getBoundingClientRect().width,
@@ -34062,6 +34140,7 @@ stores.inject(MyMetaStore, storeInstance);
     duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
     formatChartDatasetValue: formatChartDatasetValue,
     formatTickValue: formatTickValue,
+    getChartJSConstructor: getChartJSConstructor,
     getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
     getDefinedAxis: getDefinedAxis,
     getPieColors: getPieColors,
@@ -37862,6 +37941,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
       updateColors(colors) {
           this.colors = colors;
+          const colorGenerator = new ColorGenerator(this.ranges.length, this.colors);
+          this.ranges = this.ranges.map((range) => ({
+              ...range,
+              color: colorGenerator.next(),
+          }));
       }
       confirm() {
           for (const range of this.selectionInputs) {
@@ -37896,12 +37980,11 @@ stores.inject(MyMetaStore, storeInstance);
        * e.g. ["A1", "Sheet2!B3", "E12"]
        */
       get selectionInputs() {
-          const generator = new ColorGenerator(this.ranges.length, this.colors);
           return this.ranges.map((input, index) => Object.assign({}, input, {
               color: this.hasMainFocus &&
                   this.focusedRangeIndex !== null &&
                   this.getters.isRangeValid(input.xc)
-                  ? generator.next()
+                  ? input.color
                   : null,
               isFocused: this.hasMainFocus && this.focusedRangeIndex === index,
               isValidRange: input.xc === "" || this.getters.isRangeValid(input.xc),
@@ -38171,10 +38254,10 @@ stores.inject(MyMetaStore, storeInstance);
                   if (originalIndex === finalIndex) {
                       return;
                   }
-                  const draggedItems = [...draggableIds];
-                  draggedItems.splice(originalIndex, 1);
-                  draggedItems.splice(finalIndex, 0, rangeId);
-                  this.props.onSelectionReordered?.(this.store.selectionInputs.map((range) => draggedItems.indexOf(range.id)));
+                  const indexes = range(0, draggableIds.length);
+                  indexes.splice(originalIndex, 1);
+                  indexes.splice(finalIndex, 0, originalIndex);
+                  this.props.onSelectionReordered?.(indexes);
                   this.props.onSelectionConfirmed?.();
                   this.store.confirm();
               },
@@ -38452,6 +38535,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
               dataSets: this.dataSets,
           });
+          if (this.state.datasetDispatchResult.isSuccessful) {
+              this.dataSets = this.env.model.getters.getChartDefinition(this.props.figureId).dataSets;
+          }
       }
       getDataSeriesRanges() {
           return this.dataSets;
@@ -39868,8 +39954,16 @@ stores.inject(MyMetaStore, storeInstance);
               }
               let startNode = this.findChildAtCharacterIndex(start);
               let endNode = this.findChildAtCharacterIndex(end);
-              range.setStart(startNode.node, startNode.offset);
-              range.setEnd(endNode.node, endNode.offset);
+              // setEnd (setStart) will result in a collapsed range if the end point is before the start point
+              // https://developer.mozilla.org/en-US/docs/Web/API/Range/setEnd
+              if (start <= end) {
+                  range.setStart(startNode.node, startNode.offset);
+                  range.setEnd(endNode.node, endNode.offset);
+              }
+              else {
+                  range.setStart(endNode.node, endNode.offset);
+                  range.setEnd(startNode.node, startNode.offset);
+              }
           }
       }
       /**
@@ -40171,8 +40265,7 @@ stores.inject(MyMetaStore, storeInstance);
     }
 
     .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
+      margin-top: 1px;
 
       .o-semi-bold {
         /* FIXME: to remove in favor of Bootstrap
@@ -40223,10 +40316,11 @@ stores.inject(MyMetaStore, storeInstance);
       });
       compositionActive = false;
       spreadsheetRect = useSpreadsheetRect();
-      get assistantStyle() {
+      get assistantStyleProperties() {
           const composerRect = this.composerRef.el.getBoundingClientRect();
           const assistantStyle = {};
-          assistantStyle["min-width"] = `${this.props.rect?.width || ASSISTANT_WIDTH}px`;
+          const minWidth = Math.min(this.props.rect?.width || Infinity, ASSISTANT_WIDTH);
+          assistantStyle["min-width"] = `${minWidth}px`;
           const proposals = this.autoCompleteState.provider?.proposals;
           const proposalsHaveDescription = proposals?.some((proposal) => proposal.description);
           if (this.functionDescriptionState.showDescription || proposalsHaveDescription) {
@@ -40250,13 +40344,29 @@ stores.inject(MyMetaStore, storeInstance);
               }
           }
           else {
-              assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom}px`;
+              assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom - 1}px`; // -1: margin
               if (composerRect.left + ASSISTANT_WIDTH + SCROLLBAR_WIDTH + CLOSE_ICON_RADIUS >
                   this.spreadsheetRect.width) {
                   assistantStyle.right = `${CLOSE_ICON_RADIUS}px`;
               }
           }
-          return cssPropertiesToCss(assistantStyle);
+          return assistantStyle;
+      }
+      get assistantStyle() {
+          const allProperties = this.assistantStyleProperties;
+          return cssPropertiesToCss({
+              "max-height": allProperties["max-height"],
+              width: allProperties["width"],
+              "min-width": allProperties["min-width"],
+          });
+      }
+      get assistantContainerStyle() {
+          const allProperties = this.assistantStyleProperties;
+          return cssPropertiesToCss({
+              top: allProperties["top"],
+              right: allProperties["right"],
+              transform: allProperties["transform"],
+          });
       }
       // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
       shouldProcessInputEvents = false;
@@ -46730,9 +46840,7 @@ stores.inject(MyMetaStore, storeInstance);
                   pivot: this.draft,
               });
               this.draft = null;
-              if (!this.alreadyNotified &&
-                  !this.isDynamicPivotInViewport() &&
-                  this.isStaticPivotInViewport()) {
+              if (!this.alreadyNotified && this.isUpdatedPivotVisibleInViewportOnlyAsStaticPivot()) {
                   const formulaId = this.getters.getPivotFormulaId(this.pivotId);
                   const pivotExample = `=PIVOT(${formulaId})`;
                   this.alreadyNotified = true;
@@ -46788,26 +46896,33 @@ stores.inject(MyMetaStore, storeInstance);
               this.applyUpdate();
           }
       }
-      isDynamicPivotInViewport() {
-          for (const position of this.getters.getVisibleCellPositions()) {
-              const isDynamicPivot = this.getters.isSpillPivotFormula(position);
-              if (isDynamicPivot) {
-                  return true;
-              }
-          }
-          return false;
-      }
-      isStaticPivotInViewport() {
+      /**
+       * @returns true if the updated pivot is visible in the viewport only as a
+       * static pivot and not as a dynamic pivot
+       */
+      isUpdatedPivotVisibleInViewportOnlyAsStaticPivot() {
+          let staticPivotCount = 0;
+          const updatedPivotFormulaId = this.getters.getPivotFormulaId(this.pivotId);
           for (const position of this.getters.getVisibleCellPositions()) {
               const cell = this.getters.getCell(position);
               if (cell?.isFormula) {
                   const pivotFunction = getFirstPivotFunction(cell.compiledFormula.tokens);
-                  if (pivotFunction && pivotFunction.functionName !== "PIVOT") {
-                      return true;
+                  const pivotFormulaId = pivotFunction?.args[0]?.value;
+                  if (pivotFunction && updatedPivotFormulaId === pivotFormulaId.toString()) {
+                      if (pivotFunction.functionName === "PIVOT") {
+                          // if we have at least one dynamic pivot visible inserted the viewport
+                          // we return false
+                          return false;
+                      }
+                      else {
+                          staticPivotCount++;
+                      }
                   }
               }
           }
-          return false;
+          // we return true if there are only static pivots visible inserted the viewport,
+          // otherwise false
+          return staticPivotCount > 0;
       }
       addDefaultDateTimeGranularity(fields, definition) {
           const { columns, rows } = definition;
@@ -60661,6 +60776,7 @@ stores.inject(MyMetaStore, storeInstance);
       exportForExcel(data) {
           for (const sheet of data.sheets) {
               sheet.cellValues = {};
+              sheet.formulaSpillRanges = {};
           }
           for (const position of this.evaluator.getEvaluatedPositions()) {
               const evaluatedCell = this.evaluator.getEvaluatedCell(position);
@@ -60672,8 +60788,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 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
@@ -60696,7 +60813,11 @@ stores.inject(MyMetaStore, storeInstance);
                   content = !isExported ? newContent : exportedCellData;
               }
               exportedSheetData.cells[xc] = content;
-              exportedSheetData.cellValues[xc] = value;
+              exportedSheetData.cellValues[xc] = evaluatedCell.type !== "error" ? value : undefined;
+              const spillZone = this.getSpreadZone(position);
+              if (spillZone) {
+                  exportedSheetData.formulaSpillRanges[xc] = this.getters.getRangeString(this.getters.getRangeFromZone(position.sheetId, spillZone), position.sheetId);
+              }
           }
       }
       /**
@@ -62924,7 +63045,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.
@@ -73406,7 +73527,7 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  function addFormula(formula, value) {
+  function addFormula(formula, value, formulaSpillRange) {
       if (!formula) {
           return { attrs: [], node: escapeXml `` };
       }
@@ -73414,10 +73535,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(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) {
@@ -74407,7 +74535,7 @@ stores.inject(MyMetaStore, storeInstance);
                   let cellNode = escapeXml ``;
                   // Either formula or static value inside the cell
                   if (content?.startsWith("=") && value !== undefined) {
-                      const res = addFormula(content, value);
+                      const res = addFormula(content, value, sheet.formulaSpillRanges[xc] ?? xc);
                       if (!res) {
                           continue;
                       }
@@ -74693,6 +74821,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",
@@ -74701,6 +74853,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;
   }
   /**
@@ -75662,9 +75818,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.2.1";
-  __info__.date = "2025-02-25T06:03:13.262Z";
-  __info__.hash = "3b4b5c9";
+  __info__.version = "18.2.2";
+  __info__.date = "2025-03-07T10:41:04.411Z";
+  __info__.hash = "f567932";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);