@odoo/o-spreadsheet 18.2.1 → 18.2.3

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.3
+ * @date 2025-03-12T15:32:36.274Z
+ * @hash 81b0e08
  */
 
 (function (exports, owl) {
@@ -424,7 +424,6 @@
    * Sparse arrays remain sparse.
    */
   function deepCopy(obj) {
-      const result = Array.isArray(obj) ? [] : {};
       switch (typeof obj) {
           case "object": {
               if (obj === null) {
@@ -436,8 +435,18 @@
               else if (!(isPlainObject(obj) || obj instanceof Array)) {
                   throw new Error("Unsupported type: only objects and arrays are supported");
               }
-              for (const key in obj) {
-                  result[key] = deepCopy(obj[key]);
+              const result = Array.isArray(obj) ? new Array(obj.length) : {};
+              if (Array.isArray(obj)) {
+                  for (let i = 0, len = obj.length; i < len; i++) {
+                      if (i in obj) {
+                          result[i] = deepCopy(obj[i]);
+                      }
+                  }
+              }
+              else {
+                  for (const key in obj) {
+                      result[key] = deepCopy(obj[key]);
+                  }
               }
               return result;
           }
@@ -2700,21 +2709,30 @@
       return mergedZones;
   }
 
+  const globalReverseLookup$1 = new WeakMap();
+  const globalIdCounter = new WeakMap();
   /**
    * Get the id of the given item (its key in the given dictionary).
    * If the given item does not exist in the dictionary, it creates one with a new id.
    */
   function getItemId(item, itemsDic) {
-      for (const key in itemsDic) {
-          if (deepEquals(itemsDic[key], item)) {
-              return parseInt(key, 10);
-          }
+      if (!globalReverseLookup$1.has(itemsDic)) {
+          globalReverseLookup$1.set(itemsDic, new Map());
+          globalIdCounter.set(itemsDic, 0);
+      }
+      const reverseLookup = globalReverseLookup$1.get(itemsDic);
+      const canonical = getCanonicalRepresentation(item);
+      if (reverseLookup.has(canonical)) {
+          const id = reverseLookup.get(canonical);
+          itemsDic[id] = item;
+          return id;
       }
       // Generate new Id if the item didn't exist in the dictionary
-      const ids = Object.keys(itemsDic);
-      const maxId = ids.length === 0 ? 0 : largeMax(ids.map((id) => parseInt(id, 10)));
-      itemsDic[maxId + 1] = item;
-      return maxId + 1;
+      const newId = globalIdCounter.get(itemsDic) + 1;
+      reverseLookup.set(canonical, newId);
+      globalIdCounter.set(itemsDic, newId);
+      itemsDic[newId] = item;
+      return newId;
   }
   function groupItemIdsByZones(positionsByItemId) {
       const result = {};
@@ -2738,6 +2756,33 @@
           }
       }
   }
+  function getCanonicalRepresentation(item) {
+      if (item === null)
+          return "null";
+      if (item === undefined)
+          return "undefined";
+      if (typeof item !== "object")
+          return String(item);
+      if (Array.isArray(item)) {
+          const len = item.length;
+          let result = "[";
+          for (let i = 0; i < len; i++) {
+              if (i > 0)
+                  result += ",";
+              result += getCanonicalRepresentation(item[i]);
+          }
+          return result + "]";
+      }
+      const keys = Object.keys(item).sort();
+      let repr = "{";
+      for (const key of keys) {
+          if (item[key] !== undefined) {
+              repr += `"${key}":${getCanonicalRepresentation(item[key])},`;
+          }
+      }
+      repr += "}";
+      return repr;
+  }
 
   // -----------------------------------------------------------------------------
   // Date Type
@@ -6101,8 +6146,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 +6160,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,
@@ -8288,7 +8335,8 @@
               const possibleValues = pivot
                   .getPossibleFieldValues(columns[i])
                   .map((v) => v.value);
-              if (!possibleValues.includes(sortedColumn.domain[i].value)) {
+              if (!possibleValues.includes(sortedColumn.domain[i].value) &&
+                  !(sortedColumn.domain[i].value === null && possibleValues.includes(""))) {
                   return false;
               }
           }
@@ -9533,150 +9581,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 +10125,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 +11041,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 = {
@@ -10906,6 +11365,7 @@ stores.inject(MyMetaStore, storeInstance);
   const autoCompleteProviders = new Registry();
 
   autoCompleteProviders.add("dataValidation", {
+      displayAllOnInitialContent: true,
       getProposals(tokenAtCursor, content) {
           if (content.startsWith("=")) {
               return [];
@@ -21202,6 +21662,15 @@ stores.inject(MyMetaStore, storeInstance);
               const exactMatch = proposals?.find((p) => p.text === tokenAtCursor.value);
               // remove tokens that are likely to be other parts of the formula that slipped in the token if it's a string
               const searchTerm = tokenAtCursor.value.replace(/[ ,\(\)]/g, "");
+              if (this._currentContent === this.initialContent &&
+                  provider.displayAllOnInitialContent &&
+                  proposals?.length) {
+                  return {
+                      proposals,
+                      selectProposal: provider.selectProposal,
+                      autoSelectFirstProposal: provider.autoSelectFirstProposal ?? false,
+                  };
+              }
               if (exactMatch && this._currentContent !== this.initialContent) {
                   // this means the user has chosen a proposal
                   return;
@@ -22202,586 +22671,255 @@ stores.inject(MyMetaStore, storeInstance);
   /**
    * Get the consecutive evaluated cells that can pass the filter function (e.g. certain type filter).
    * Return the one which contains the given cell
-   */
-  function getGroup(cell, cells, filter) {
-      let group = [];
-      let found = false;
-      for (let x of cells) {
-          if (x === cell) {
-              found = true;
-          }
-          const cellValue = x === undefined || x.isFormula
-              ? undefined
-              : evaluateLiteral(x, { locale: DEFAULT_LOCALE, format: x.format });
-          if (cellValue && filter(cellValue)) {
-              group.push(cellValue);
-          }
-          else {
-              if (found) {
-                  return group;
-              }
-              group = [];
-          }
-      }
-      return group;
-  }
-  /**
-   * Get the average steps between numbers
-   */
-  function getAverageIncrement(group) {
-      const averages = [];
-      let last = group[0];
-      for (let i = 1; i < group.length; i++) {
-          const current = group[i];
-          averages.push(current - last);
-          last = current;
-      }
-      return averages.reduce((a, b) => a + b, 0) / averages.length;
-  }
-  /**
-   * Get the step for a group
-   */
-  function calculateIncrementBasedOnGroup(group) {
-      let increment = 1;
-      if (group.length >= 2) {
-          increment = getAverageIncrement(group) * group.length;
-      }
-      return increment;
-  }
-  /**
-   * Iterates on a list of date intervals.
-   * if every interval is the same, return the interval
-   * Otherwise return undefined
-   *
-   */
-  function getEqualInterval(intervals) {
-      if (intervals.length < 2) {
-          return intervals[0] || { years: 0, months: 0, days: 0 };
-      }
-      const equal = intervals.every((interval) => interval.years === intervals[0].years &&
-          interval.months === intervals[0].months &&
-          interval.days === intervals[0].days);
-      return equal ? intervals[0] : undefined;
-  }
-  /**
-   * Based on a group of dates, calculate the increment that should be applied
-   * to the next date.
-   *
-   * This will compute the date difference in calendar terms (years, months, days)
-   * In order to make abstraction of leap years and months with different number of days.
-   *
-   * In case the dates are not equidistant in calendar terms, no rule can be extrapolated
-   * In case of equidistant dates, we either have in that order:
-   *  - exact date interval (e.g. +n year OR +n month OR +n day) in which case we increment by the same interval
-   *  - exact day interval (e.g. +n days) in which case we increment by the same day interval
-   *  - equidistant dates but not the same interval, in which case we return increment of the same interval
-   *
-   * */
-  function calculateDateIncrementBasedOnGroup(group) {
-      if (group.length < 2) {
-          return 1;
-      }
-      const jsDates = group.map((date) => toJsDate(date, DEFAULT_LOCALE));
-      const datesIntervals = getDateIntervals(jsDates);
-      const datesEquidistantInterval = getEqualInterval(datesIntervals);
-      if (datesEquidistantInterval === undefined) {
-          // dates are not equidistant in terms of years, months or days, thus no rule can be extrapolated
-          return undefined;
-      }
-      // The dates are apart by an exact interval of years, months or days
-      // but not a combination of them
-      const exactDateInterval = Object.values(datesEquidistantInterval).filter((value) => value !== 0).length === 1;
-      const isSameDay = Object.values(datesEquidistantInterval).every((el) => el === 0); // handles time values (strict decimals)
-      if (!exactDateInterval || isSameDay) {
-          const timeIntervals = jsDates
-              .map((date, index) => {
-              if (index === 0) {
-                  return 0;
-              }
-              const previous = jsDates[index - 1];
-              return Math.floor(date.getTime()) - Math.floor(previous.getTime());
-          })
-              .slice(1);
-          const equidistantDates = timeIntervals.every((interval) => interval === timeIntervals[0]);
-          if (equidistantDates) {
-              return group.length * (group[1] - group[0]);
-          }
-      }
-      return {
-          years: datesEquidistantInterval.years * group.length,
-          months: datesEquidistantInterval.months * group.length,
-          days: datesEquidistantInterval.days * group.length,
-      };
-  }
-  autofillRulesRegistry
-      .add("simple_value_copy", {
-      condition: (cell, cells) => {
-          return (cells.length === 1 && !cell.isFormula && !(cell.format && isDateTimeFormat(cell.format)));
-      },
-      generateRule: () => {
-          return { type: "COPY_MODIFIER" };
-      },
-      sequence: 10,
-  })
-      .add("increment_alphanumeric_value", {
-      condition: (cell) => !cell.isFormula &&
-          evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text &&
-          alphaNumericValueRegExp.test(cell.content),
-      generateRule: (cell, cells) => {
-          const numberPostfix = parseInt(cell.content.match(numberPostfixRegExp)[0]);
-          const prefix = cell.content.match(stringPrefixRegExp)[0];
-          const numberPostfixLength = cell.content.length - prefix.length;
-          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.text &&
-              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);
-          return {
-              type: "ALPHANUMERIC_INCREMENT_MODIFIER",
-              prefix,
-              current: numberPostfix,
-              increment,
-              numberPostfixLength,
-          };
-      },
-      sequence: 15,
-  })
-      .add("copy_text", {
-      condition: (cell) => !cell.isFormula &&
-          evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text,
-      generateRule: () => {
-          return { type: "COPY_MODIFIER" };
-      },
-      sequence: 20,
-  })
-      .add("update_formula", {
-      condition: (cell) => cell.isFormula,
-      generateRule: (_, cells) => {
-          return { type: "FORMULA_MODIFIER", increment: cells.length, current: 0 };
-      },
-      sequence: 30,
-  })
-      .add("increment_dates", {
-      condition: (cell, cells) => {
-          return (!cell.isFormula &&
-              evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number &&
-              !!cell.format &&
-              isDateTimeFormat(cell.format));
-      },
-      generateRule: (cell, cells) => {
-          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number &&
-              !!evaluatedCell.format &&
-              isDateTimeFormat(evaluatedCell.format)).map((cell) => Number(cell.value));
-          const increment = calculateDateIncrementBasedOnGroup(group);
-          if (increment === undefined) {
-              return { type: "COPY_MODIFIER" };
-          }
-          /**  requires to detect the current date (requires to be an integer value  with the right format)
-           * detect  if year  or if month or if day then extrapolate increment required (+1 month, +1 year + 1 day)
-           */
-          const evaluation = evaluateLiteral(cell, { locale: DEFAULT_LOCALE });
-          if (typeof increment === "object") {
-              return {
-                  type: "DATE_INCREMENT_MODIFIER",
-                  increment,
-                  current: evaluation.type === CellValueType.number ? evaluation.value : 0,
-              };
-          }
-          return {
-              type: "INCREMENT_MODIFIER",
-              increment,
-              current: evaluation.type === CellValueType.number ? evaluation.value : 0,
-          };
-      },
-      sequence: 25,
-  })
-      .add("increment_number", {
-      condition: (cell) => !cell.isFormula &&
-          evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number,
-      generateRule: (cell, cells) => {
-          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number &&
-              !isDateTimeFormat(evaluatedCell.format || "")).map((cell) => Number(cell.value));
-          const increment = calculateIncrementBasedOnGroup(group);
-          const evaluation = evaluateLiteral(cell, { locale: DEFAULT_LOCALE });
-          return {
-              type: "INCREMENT_MODIFIER",
-              increment,
-              current: evaluation.type === CellValueType.number ? evaluation.value : 0,
-          };
-      },
-      sequence: 40,
-  });
-  /**
-   * Returns the date intervals between consecutive dates of an array
-   * in the format of { years: number, months: number, days: number }
-   *
-   * The split is necessary to make abstraction of leap years and
-   * months with different number of days.
-   *
-   * @param dates
-   */
-  function getDateIntervals(dates) {
-      if (dates.length < 2) {
-          return [{ years: 0, months: 0, days: 0 }];
-      }
-      const res = dates.map((date, index) => {
-          if (index === 0) {
-              return { years: 0, months: 0, days: 0 };
-          }
-          const previous = DateTime.fromTimestamp(dates[index - 1].getTime());
-          const years = getTimeDifferenceInWholeYears(previous, date);
-          const months = getTimeDifferenceInWholeMonths(previous, date) % 12;
-          previous.setFullYear(previous.getFullYear() + years);
-          previous.setMonth(previous.getMonth() + months);
-          const days = getTimeDifferenceInWholeDays(previous, date);
-          return {
-              years,
-              months,
-              days,
-          };
-      });
-      return res.slice(1);
-  }
-
-  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];
+   */
+  function getGroup(cell, cells, filter) {
+      let group = [];
+      let found = false;
+      for (let x of cells) {
+          if (x === cell) {
+              found = true;
           }
-          else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
-              return runtime.colors[i];
+          const cellValue = x === undefined || x.isFormula
+              ? undefined
+              : evaluateLiteral(x, { locale: DEFAULT_LOCALE, format: x.format });
+          if (cellValue && filter(cellValue)) {
+              group.push(cellValue);
+          }
+          else {
+              if (found) {
+                  return group;
+              }
+              group = [];
           }
       }
-      return runtime.colors.at(-1);
+      return group;
   }
-  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 },
-      ];
+  /**
+   * Get the average steps between numbers
+   */
+  function getAverageIncrement(group) {
+      const averages = [];
+      let last = group[0];
+      for (let i = 1; i < group.length; i++) {
+          const current = group[i];
+          averages.push(current - last);
+          last = current;
+      }
+      return averages.reduce((a, b) => a + b, 0) / averages.length;
   }
   /**
-   * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
-   * is not handled.
+   * Get the step for a group
    */
-  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);
+  function calculateIncrementBasedOnGroup(group) {
+      let increment = 1;
+      if (group.length >= 2) {
+          increment = getAverageIncrement(group) * group.length;
       }
-      return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
+      return increment;
   }
-  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;
+  /**
+   * Iterates on a list of date intervals.
+   * if every interval is the same, return the interval
+   * Otherwise return undefined
+   *
+   */
+  function getEqualInterval(intervals) {
+      if (intervals.length < 2) {
+          return intervals[0] || { years: 0, months: 0, days: 0 };
+      }
+      const equal = intervals.every((interval) => interval.years === intervals[0].years &&
+          interval.months === intervals[0].months &&
+          interval.days === intervals[0].days);
+      return equal ? intervals[0] : undefined;
+  }
+  /**
+   * Based on a group of dates, calculate the increment that should be applied
+   * to the next date.
+   *
+   * This will compute the date difference in calendar terms (years, months, days)
+   * In order to make abstraction of leap years and months with different number of days.
+   *
+   * In case the dates are not equidistant in calendar terms, no rule can be extrapolated
+   * In case of equidistant dates, we either have in that order:
+   *  - exact date interval (e.g. +n year OR +n month OR +n day) in which case we increment by the same interval
+   *  - exact day interval (e.g. +n days) in which case we increment by the same day interval
+   *  - equidistant dates but not the same interval, in which case we return increment of the same interval
+   *
+   * */
+  function calculateDateIncrementBasedOnGroup(group) {
+      if (group.length < 2) {
+          return 1;
+      }
+      const jsDates = group.map((date) => toJsDate(date, DEFAULT_LOCALE));
+      const datesIntervals = getDateIntervals(jsDates);
+      const datesEquidistantInterval = getEqualInterval(datesIntervals);
+      if (datesEquidistantInterval === undefined) {
+          // dates are not equidistant in terms of years, months or days, thus no rule can be extrapolated
+          return undefined;
+      }
+      // The dates are apart by an exact interval of years, months or days
+      // but not a combination of them
+      const exactDateInterval = Object.values(datesEquidistantInterval).filter((value) => value !== 0).length === 1;
+      const isSameDay = Object.values(datesEquidistantInterval).every((el) => el === 0); // handles time values (strict decimals)
+      if (!exactDateInterval || isSameDay) {
+          const timeIntervals = jsDates
+              .map((date, index) => {
+              if (index === 0) {
+                  return 0;
               }
+              const previous = jsDates[index - 1];
+              return Math.floor(date.getTime()) - Math.floor(previous.getTime());
+          })
+              .slice(1);
+          const equidistantDates = timeIntervals.every((interval) => interval === timeIntervals[0]);
+          if (equidistantDates) {
+              return group.length * (group[1] - group[0]);
           }
       }
-      return false;
+      return {
+          years: datesEquidistantInterval.years * group.length,
+          months: datesEquidistantInterval.months * group.length,
+          days: datesEquidistantInterval.days * group.length,
+      };
   }
+  autofillRulesRegistry
+      .add("simple_value_copy", {
+      condition: (cell, cells) => {
+          return (cells.length === 1 && !cell.isFormula && !(cell.format && isDateTimeFormat(cell.format)));
+      },
+      generateRule: () => {
+          return { type: "COPY_MODIFIER" };
+      },
+      sequence: 10,
+  })
+      .add("increment_alphanumeric_value", {
+      condition: (cell) => !cell.isFormula &&
+          evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text &&
+          alphaNumericValueRegExp.test(cell.content),
+      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;
+          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.text &&
+              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]));
+          let increment = calculateIncrementBasedOnGroup(group);
+          if (["up", "left"].includes(direction) && group.length === 1) {
+              increment = -increment;
+          }
+          return {
+              type: "ALPHANUMERIC_INCREMENT_MODIFIER",
+              prefix,
+              current: numberPostfix,
+              increment,
+              numberPostfixLength,
+          };
+      },
+      sequence: 15,
+  })
+      .add("copy_text", {
+      condition: (cell) => !cell.isFormula &&
+          evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text,
+      generateRule: () => {
+          return { type: "COPY_MODIFIER" };
+      },
+      sequence: 20,
+  })
+      .add("update_formula", {
+      condition: (cell) => cell.isFormula,
+      generateRule: (_, cells) => {
+          return { type: "FORMULA_MODIFIER", increment: cells.length, current: 0 };
+      },
+      sequence: 30,
+  })
+      .add("increment_dates", {
+      condition: (cell, cells) => {
+          return (!cell.isFormula &&
+              evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number &&
+              !!cell.format &&
+              isDateTimeFormat(cell.format));
+      },
+      generateRule: (cell, cells) => {
+          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number &&
+              !!evaluatedCell.format &&
+              isDateTimeFormat(evaluatedCell.format)).map((cell) => Number(cell.value));
+          const increment = calculateDateIncrementBasedOnGroup(group);
+          if (increment === undefined) {
+              return { type: "COPY_MODIFIER" };
+          }
+          /**  requires to detect the current date (requires to be an integer value  with the right format)
+           * detect  if year  or if month or if day then extrapolate increment required (+1 month, +1 year + 1 day)
+           */
+          const evaluation = evaluateLiteral(cell, { locale: DEFAULT_LOCALE });
+          if (typeof increment === "object") {
+              return {
+                  type: "DATE_INCREMENT_MODIFIER",
+                  increment,
+                  current: evaluation.type === CellValueType.number ? evaluation.value : 0,
+              };
+          }
+          return {
+              type: "INCREMENT_MODIFIER",
+              increment,
+              current: evaluation.type === CellValueType.number ? evaluation.value : 0,
+          };
+      },
+      sequence: 25,
+  })
+      .add("increment_number", {
+      condition: (cell) => !cell.isFormula &&
+          evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number,
+      generateRule: (cell, cells, direction) => {
+          const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number &&
+              !isDateTimeFormat(evaluatedCell.format || "")).map((cell) => Number(cell.value));
+          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",
+              increment,
+              current: evaluation.type === CellValueType.number ? evaluation.value : 0,
+          };
+      },
+      sequence: 40,
+  });
   /**
-   *  Get the rectangle that is tangent to a circle at a given angle.
+   * Returns the date intervals between consecutive dates of an array
+   * in the format of { years: number, months: number, days: number }
    *
-   * @param angle angle between X axis and the point where the rectangle is tangent to the circle
+   * The split is necessary to make abstraction of leap years and
+   * months with different number of days.
+   *
+   * @param dates
    */
-  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 };
+  function getDateIntervals(dates) {
+      if (dates.length < 2) {
+          return [{ years: 0, months: 0, days: 0 }];
+      }
+      const res = dates.map((date, index) => {
+          if (index === 0) {
+              return { years: 0, months: 0, days: 0 };
+          }
+          const previous = DateTime.fromTimestamp(dates[index - 1].getTime());
+          const years = getTimeDifferenceInWholeYears(previous, date);
+          const months = getTimeDifferenceInWholeMonths(previous, date) % 12;
+          previous.setFullYear(previous.getFullYear() + years);
+          previous.setMonth(previous.getMonth() + months);
+          const days = getTimeDifferenceInWholeDays(previous, date);
+          return {
+              years,
+              months,
+              days,
+          };
+      });
+      return res.slice(1);
   }
 
+  const cellPopoverRegistry = new Registry();
+
   class GaugeChartComponent extends owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
       canvas = owl.useRef("chartContainer");
@@ -22814,72 +22952,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 +23017,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 +23030,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 +23040,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
   /**
@@ -24341,16 +24416,25 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return id;
   }
+  const globalReverseLookup = new WeakMap();
   function pushElement(property, propertyList) {
-      let len = propertyList.length;
-      const operator = typeof property === "object" ? deepEquals : (a, b) => a === b;
-      for (let i = 0; i < len; i++) {
-          if (operator(property, propertyList[i])) {
-              return i;
+      let reverseLookup = globalReverseLookup.get(propertyList);
+      if (!reverseLookup) {
+          reverseLookup = new Map();
+          for (let i = 0; i < propertyList.length; i++) {
+              const canonical = getCanonicalRepresentation(propertyList[i]);
+              reverseLookup.set(canonical, i);
           }
+          globalReverseLookup.set(propertyList, reverseLookup);
+      }
+      const canonical = getCanonicalRepresentation(property);
+      if (reverseLookup.has(canonical)) {
+          return reverseLookup.get(canonical);
       }
-      propertyList[propertyList.length] = property;
-      return propertyList.length - 1;
+      const maxId = propertyList.length;
+      propertyList.push(property);
+      reverseLookup.set(canonical, maxId);
+      return maxId;
   }
   const chartIds = [];
   /**
@@ -25387,29 +25471,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 +25507,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 +25525,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;
   }
 
   // -------------------------------------
@@ -26135,7 +26281,7 @@ stores.inject(MyMetaStore, storeInstance);
                   title: { text: chartTitle },
                   type: CHART_TYPE_CONVERSION_MAP[chartType],
                   dataSets: this.extractChartDatasets(this.querySelectorAll(rootChartElement, `c:${chartType}`), chartType),
-                  labelRange: this.extractChildTextContent(rootChartElement, `c:ser ${chartType === "scatterChart" ? "c:numRef" : "c:cat"} c:f`),
+                  labelRange: this.extractLabelRange(chartType, rootChartElement),
                   backgroundColor: this.extractChildAttr(rootChartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                       default: "ffffff",
                   }).asString(),
@@ -26147,6 +26293,13 @@ stores.inject(MyMetaStore, storeInstance);
               };
           })[0];
       }
+      extractLabelRange(chartType, rootChartElement) {
+          if (chartType === "scatterChart") {
+              return (this.extractChildTextContent(rootChartElement, `c:ser c:strRef c:f`) ||
+                  this.extractChildTextContent(rootChartElement, `c:ser c:numRef c:f`));
+          }
+          return this.extractChildTextContent(rootChartElement, `c:ser c:cat c:f`);
+      }
       extractComboChart(chartElement) {
           // Title can be separated into multiple xml elements (for styling and such), we only import the text
           const chartTitle = this.mapOnElements({ parent: chartElement, query: "c:title a:t" }, (textElement) => {
@@ -28649,11 +28802,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 +32661,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 +34212,7 @@ stores.inject(MyMetaStore, storeInstance);
     duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
     formatChartDatasetValue: formatChartDatasetValue,
     formatTickValue: formatTickValue,
+    getChartJSConstructor: getChartJSConstructor,
     getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
     getDefinedAxis: getDefinedAxis,
     getPieColors: getPieColors,
@@ -36321,6 +36472,7 @@ stores.inject(MyMetaStore, storeInstance);
               fingerprintStore.enable();
           }
       },
+      isReadonlyAllowed: true,
       icon: "o-spreadsheet-Icon.IRREGULARITY_MAP",
   };
   const viewFormulas = {
@@ -37862,6 +38014,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 +38053,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 +38327,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 +38608,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 +40027,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 +40338,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 +40389,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 +40417,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 +46913,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 +46969,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;
@@ -50346,6 +50534,71 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class UnhideRowHeaders extends owl.Component {
+      static template = "o-spreadsheet-UnhideRowHeaders";
+      static props = {
+          headersGroups: Array,
+          headerRange: Object,
+          offset: { type: Number, optional: true },
+      };
+      static defaultProps = { offset: 0 };
+      get sheetId() {
+          return this.env.model.getters.getActiveSheetId();
+      }
+      getUnhidePreviousButtonStyle(hiddenIndex) {
+          const rect = this.env.model.getters.getRect(positionToZone({ col: 0, row: hiddenIndex }));
+          const y = rect.y + rect.height - HEADER_HEIGHT;
+          return cssPropertiesToCss({ top: y - this.props.offset + "px", "margin-right": "1px" });
+      }
+      getUnhideNextButtonStyle(hiddenIndex) {
+          const rect = this.env.model.getters.getRect(positionToZone({ col: 0, row: hiddenIndex }));
+          const y = rect.y - HEADER_HEIGHT;
+          return cssPropertiesToCss({ top: y - this.props.offset + "px", "margin-right": "1px" });
+      }
+      unhide(hiddenElements) {
+          this.env.model.dispatch("UNHIDE_COLUMNS_ROWS", {
+              sheetId: this.sheetId,
+              dimension: "ROW",
+              elements: hiddenElements,
+          });
+      }
+      isVisible(header) {
+          return header >= this.props.headerRange.start && header <= this.props.headerRange.end;
+      }
+  }
+  class UnhideColumnHeaders extends owl.Component {
+      static template = "o-spreadsheet-UnhideColumnHeaders";
+      static props = {
+          headersGroups: Array,
+          headerRange: Object,
+          offset: { type: Number, optional: true },
+      };
+      static defaultProps = { offset: 0 };
+      get sheetId() {
+          return this.env.model.getters.getActiveSheetId();
+      }
+      getUnhidePreviousButtonStyle(hiddenIndex) {
+          const rect = this.env.model.getters.getRect(positionToZone({ col: hiddenIndex, row: 0 }));
+          const x = rect.x + rect.width - HEADER_WIDTH;
+          return cssPropertiesToCss({ left: x - this.props.offset + "px" });
+      }
+      getUnhideNextButtonStyle(hiddenIndex) {
+          const rect = this.env.model.getters.getRect(positionToZone({ col: hiddenIndex, row: 0 }));
+          const x = rect.x - HEADER_WIDTH;
+          return cssPropertiesToCss({ left: x - this.props.offset + "px" });
+      }
+      unhide(hiddenElements) {
+          this.env.model.dispatch("UNHIDE_COLUMNS_ROWS", {
+              sheetId: this.sheetId,
+              dimension: "COL",
+              elements: hiddenElements,
+          });
+      }
+      isVisible(header) {
+          return header >= this.props.headerRange.start && header <= this.props.headerRange.end;
+      }
+  }
+
   class AbstractResizer extends owl.Component {
       static props = {
           onOpenContextMenu: Function,
@@ -50564,6 +50817,7 @@ stores.inject(MyMetaStore, storeInstance);
     left: ${HEADER_WIDTH}px;
     right: 0;
     height: ${HEADER_HEIGHT}px;
+    width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH}px);
     &.o-dragging {
       cursor: grabbing;
     }
@@ -50613,6 +50867,7 @@ stores.inject(MyMetaStore, storeInstance);
           onOpenContextMenu: Function,
       };
       static template = "o-spreadsheet-ColResizer";
+      static components = { UnhideColumnHeaders };
       colResizerRef;
       setup() {
           super.setup();
@@ -50621,6 +50876,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;
       }
@@ -50643,10 +50901,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;
@@ -50657,7 +50915,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,
           });
@@ -50670,7 +50928,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,
@@ -50689,7 +50947,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],
           });
       }
@@ -50700,7 +50958,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)) {
@@ -50711,13 +50969,38 @@ 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",
           });
       }
-      getUnhideButtonStyle(hiddenIndex) {
-          return cssPropertiesToCss({ left: this._getDimensionsInViewport(hiddenIndex).start + "px" });
+      get mainUnhideHeadersProps() {
+          const { left, right } = this.env.model.getters.getActiveMainViewport();
+          const { xSplit } = this.env.model.getters.getPaneDivisions(this.sheetId);
+          const hiddenGroups = this.env.model.getters.getHiddenColsGroups(this.sheetId);
+          const index = hiddenGroups.findIndex((group) => group[0] >= xSplit - 1);
+          return {
+              headersGroups: hiddenGroups.slice(index),
+              offset: this.env.model.getters.getMainViewportCoordinates().x,
+              headerRange: { start: left, end: right },
+          };
+      }
+      get frozenUnhideHeadersProps() {
+          const { xSplit } = this.env.model.getters.getPaneDivisions(this.sheetId);
+          const hiddenGroups = this.env.model.getters.getHiddenColsGroups(this.sheetId);
+          const index = hiddenGroups.findIndex((group) => group[0] >= xSplit - 1);
+          return {
+              headersGroups: hiddenGroups.slice(0, index + 1),
+              headerRange: { start: 0, end: xSplit - 1 },
+          };
+      }
+      get frozenContainerStyle() {
+          return cssPropertiesToCss({
+              width: this.env.model.getters.getMainViewportCoordinates().x + "px",
+          });
+      }
+      get hasFrozenPane() {
+          return this.env.model.getters.getPaneDivisions(this.sheetId).xSplit > 0;
       }
   }
   css /* scss */ `
@@ -50727,7 +51010,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;
     }
@@ -50777,6 +51060,7 @@ stores.inject(MyMetaStore, storeInstance);
           onOpenContextMenu: Function,
       };
       static template = "o-spreadsheet-RowResizer";
+      static components = { UnhideRowHeaders };
       setup() {
           super.setup();
           this.rowResizerRef = owl.useRef("rowResizer");
@@ -50785,6 +51069,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;
       }
@@ -50807,10 +51094,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;
@@ -50821,7 +51108,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,
           });
@@ -50834,7 +51121,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,
@@ -50853,7 +51140,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],
           });
       }
@@ -50864,7 +51151,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)) {
@@ -50873,15 +51160,33 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return row;
       }
-      unhide(hiddenElements) {
-          this.env.model.dispatch("UNHIDE_COLUMNS_ROWS", {
-              sheetId: this.env.model.getters.getActiveSheetId(),
-              dimension: "ROW",
-              elements: hiddenElements,
+      get mainUnhideHeadersProps() {
+          const { top, bottom } = this.env.model.getters.getActiveMainViewport();
+          const { ySplit } = this.env.model.getters.getPaneDivisions(this.sheetId);
+          const hiddenGroups = this.env.model.getters.getHiddenRowsGroups(this.sheetId);
+          const index = hiddenGroups.findIndex((group) => group[0] >= ySplit - 1);
+          return {
+              headersGroups: hiddenGroups.slice(index),
+              offset: this.env.model.getters.getMainViewportCoordinates().y,
+              headerRange: { start: top, end: bottom },
+          };
+      }
+      get frozenUnhideHeadersProps() {
+          const { ySplit } = this.env.model.getters.getPaneDivisions(this.sheetId);
+          const hiddenGroups = this.env.model.getters.getHiddenRowsGroups(this.sheetId);
+          const index = hiddenGroups.findIndex((group) => group[0] >= ySplit - 1);
+          return {
+              headersGroups: hiddenGroups.slice(0, index + 1),
+              headerRange: { start: 0, end: ySplit - 1 },
+          };
+      }
+      get frozenContainerStyle() {
+          return cssPropertiesToCss({
+              height: this.env.model.getters.getMainViewportCoordinates().y + "px",
           });
       }
-      getUnhideButtonStyle(hiddenIndex) {
-          return cssPropertiesToCss({ top: this._getDimensionsInViewport(hiddenIndex).start + "px" });
+      get hasFrozenPane() {
+          return this.env.model.getters.getPaneDivisions(this.sheetId).ySplit > 0;
       }
   }
   css /* scss */ `
@@ -60661,6 +60966,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 +60978,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 +61003,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 +63235,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.
@@ -67645,7 +67956,7 @@ stores.inject(MyMetaStore, storeInstance);
        *
        */
       getFullRect(zone) {
-          const targetZone = intersection(zone, this);
+          const targetZone = intersection(zone, this.boundaries);
           const scrollDeltaX = this.snapCorrection.x;
           const scrollDeltaY = this.snapCorrection.y;
           if (targetZone) {
@@ -68113,7 +68424,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) {
@@ -68238,11 +68550,12 @@ stores.inject(MyMetaStore, storeInstance);
        * column of the current viewport
        */
       getColDimensionsInViewport(sheetId, col) {
+          const { top } = this.getMainInternalViewport(sheetId);
           const zone = {
               left: col,
               right: col,
-              top: 0,
-              bottom: this.getters.getNumberRows(sheetId) - 1,
+              top: top,
+              bottom: top,
           };
           const { x, width } = this.getVisibleRect(zone);
           const start = x - this.gridOffsetX;
@@ -68253,9 +68566,10 @@ stores.inject(MyMetaStore, storeInstance);
        * of the current viewport
        */
       getRowDimensionsInViewport(sheetId, row) {
+          const { left } = this.getMainInternalViewport(sheetId);
           const zone = {
               left: 0,
-              right: this.getters.getNumberCols(sheetId) - 1,
+              right: left,
               top: row,
               bottom: row,
           };
@@ -73406,7 +73720,7 @@ stores.inject(MyMetaStore, storeInstance);
   `;
   }
 
-  function addFormula(formula, value) {
+  function addFormula(formula, value, formulaSpillRange) {
       if (!formula) {
           return { attrs: [], node: escapeXml `` };
       }
@@ -73414,10 +73728,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) {
@@ -74200,7 +74521,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           if (alignAttrs.length > 0) {
               attributes.push(["applyAlignment", "1"]); // for Libre Office
-              styleNodes.push(escapeXml /*xml*/ `<xf ${formatAttributes(attributes)}>${escapeXml /*xml*/ `<alignment ${formatAttributes(alignAttrs)} />`}</xf> `);
+              styleNodes.push(escapeXml /*xml*/ `<xf ${formatAttributes(attributes)}><alignment ${formatAttributes(alignAttrs)} /></xf> `);
           }
           else {
               styleNodes.push(escapeXml /*xml*/ `<xf ${formatAttributes(attributes)} />`);
@@ -74368,6 +74689,9 @@ stores.inject(MyMetaStore, storeInstance);
   }
   function addRows(construct, data, sheet) {
       const rowNodes = [];
+      const styles = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.styles));
+      const borders = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.borders));
+      const formats = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.formats));
       for (let r = 0; r < sheet.rowNumber; r++) {
           const rowAttrs = [["r", r + 1]];
           const row = sheet.rows[r] || {};
@@ -74383,9 +74707,6 @@ stores.inject(MyMetaStore, storeInstance);
           if (row.collapsed) {
               rowAttrs.push(["collapsed", 1]);
           }
-          const styles = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.styles));
-          const borders = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.borders));
-          const formats = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.formats));
           const cellNodes = [];
           for (let c = 0; c < sheet.colNumber; c++) {
               const xc = toXC(c, r);
@@ -74407,7 +74728,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 +75014,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 +75046,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 +76011,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.3";
+  __info__.date = "2025-03-12T15:32:36.274Z";
+  __info__.hash = "81b0e08";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);