@odoo/o-spreadsheet 18.2.1 → 18.2.3

package/dist/o-spreadsheet.esm.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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -423,7 +423,6 @@ function escapeRegExp(str) {
  * Sparse arrays remain sparse.
  */
 function deepCopy(obj) {
-    const result = Array.isArray(obj) ? [] : {};
     switch (typeof obj) {
         case "object": {
             if (obj === null) {
@@ -435,8 +434,18 @@ function deepCopy(obj) {
             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;
         }
@@ -2699,21 +2708,30 @@ function mergeContiguousZones(zones) {
     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 = {};
@@ -2737,6 +2755,33 @@ function* iterateItemIdsPositions(sheetId, itemIdsByZones) {
         }
     }
 }
+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
@@ -6100,8 +6145,9 @@ function spreadRange(getters, dataSets) {
         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,
@@ -6113,8 +6159,9 @@ function spreadRange(getters, dataSets) {
             }
             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,
@@ -8287,7 +8334,8 @@ function isSortedColumnValid(sortedColumn, pivot) {
             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;
             }
         }
@@ -9532,150 +9580,6 @@ class ComposerFocusStore extends SpreadsheetStore {
     }
 }
 
-/**
- * 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
@@ -10220,79 +10124,341 @@ function getNextNonEmptyBar(bars, startIndex) {
     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);
+}
+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;
     }
-  }
-`;
-class ChartJsComponent extends Component {
-    static template = "o-spreadsheet-ChartJsComponent";
-    static props = {
-        figure: Object,
+    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 = 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() {
-        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));
-        });
-        onWillUnmount(() => this.chart?.destroy());
-        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 };
 }
 
 /**
@@ -10874,6 +11040,299 @@ class ScorecardChartConfigBuilder {
     }
 }
 
+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 Component {
+    static template = "o-spreadsheet-ChartJsComponent";
+    static props = {
+        figure: Object,
+    };
+    canvas = 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() {
+        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));
+        });
+        onWillUnmount(() => this.chart?.destroy());
+        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 Component {
     static template = "o-spreadsheet-ScorecardChart";
     static props = {
@@ -10905,6 +11364,7 @@ class ScorecardChart extends Component {
 const autoCompleteProviders = new Registry();
 
 autoCompleteProviders.add("dataValidation", {
+    displayAllOnInitialContent: true,
     getProposals(tokenAtCursor, content) {
         if (content.startsWith("=")) {
             return [];
@@ -21201,6 +21661,15 @@ class AbstractComposerStore extends SpreadsheetStore {
             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;
@@ -22201,586 +22670,255 @@ const alphaNumericValueRegExp = /^(.*\D+)(\d+)$/;
 /**
  * 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 Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     canvas = useRef("chartContainer");
@@ -22813,72 +22951,6 @@ function toXlsxHexColor(color) {
     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
  */
@@ -22944,6 +23016,7 @@ const CONTENT_TYPES = {
     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",
@@ -22956,6 +23029,7 @@ const CONTENT_TYPES = {
 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",
@@ -22965,6 +23039,7 @@ const XLSX_RELATION_TYPE = {
     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
 /**
@@ -24340,16 +24415,25 @@ function addRelsToFile(relsFiles, path, rel) {
     }
     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 = [];
 /**
@@ -25386,29 +25470,34 @@ function convertPivotTableConfig(pivotTable) {
  * 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;
                 }
@@ -25417,11 +25506,17 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
     }
 }
 /**
- * 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)
@@ -25429,58 +25524,109 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
  * - #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;
 }
 
 // -------------------------------------
@@ -26134,7 +26280,7 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
                 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(),
@@ -26146,6 +26292,13 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             };
         })[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) => {
@@ -28648,11 +28801,12 @@ function canBeLinearChart(definition, dataSets, labelRange, getters) {
 }
 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;
@@ -32506,10 +32660,6 @@ class Popover extends Component {
             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,
@@ -34061,6 +34211,7 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
   formatChartDatasetValue: formatChartDatasetValue,
   formatTickValue: formatTickValue,
+  getChartJSConstructor: getChartJSConstructor,
   getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
   getDefinedAxis: getDefinedAxis,
   getPieColors: getPieColors,
@@ -36320,6 +36471,7 @@ const irregularityMap = {
             fingerprintStore.enable();
         }
     },
+    isReadonlyAllowed: true,
     icon: "o-spreadsheet-Icon.IRREGULARITY_MAP",
 };
 const viewFormulas = {
@@ -37861,6 +38013,11 @@ class SelectionInputStore extends SpreadsheetStore {
     }
     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) {
@@ -37895,12 +38052,11 @@ class SelectionInputStore extends SpreadsheetStore {
      * 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),
@@ -38170,10 +38326,10 @@ class SelectionInput extends Component {
                 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();
             },
@@ -38451,6 +38607,9 @@ class GenericChartConfigPanel extends Component {
         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;
@@ -39867,8 +40026,16 @@ class ContentEditableHelper {
             }
             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);
+            }
         }
     }
     /**
@@ -40170,8 +40337,7 @@ css /* scss */ `
     }
 
     .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
+      margin-top: 1px;
 
       .o-semi-bold {
         /* FIXME: to remove in favor of Bootstrap
@@ -40222,10 +40388,11 @@ class Composer extends Component {
     });
     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) {
@@ -40249,13 +40416,29 @@ class Composer extends Component {
             }
         }
         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;
@@ -46729,9 +46912,7 @@ class PivotSidePanelStore extends SpreadsheetStore {
                 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;
@@ -46787,26 +46968,33 @@ class PivotSidePanelStore extends SpreadsheetStore {
             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;
@@ -50345,6 +50533,71 @@ class GridPopover extends Component {
     }
 }
 
+class UnhideRowHeaders extends 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 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 Component {
     static props = {
         onOpenContextMenu: Function,
@@ -50563,6 +50816,7 @@ css /* scss */ `
     left: ${HEADER_WIDTH}px;
     right: 0;
     height: ${HEADER_HEIGHT}px;
+    width: calc(100% - ${HEADER_WIDTH + SCROLLBAR_WIDTH}px);
     &.o-dragging {
       cursor: grabbing;
     }
@@ -50612,6 +50866,7 @@ class ColResizer extends AbstractResizer {
         onOpenContextMenu: Function,
     };
     static template = "o-spreadsheet-ColResizer";
+    static components = { UnhideColumnHeaders };
     colResizerRef;
     setup() {
         super.setup();
@@ -50620,6 +50875,9 @@ class ColResizer extends AbstractResizer {
         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;
     }
@@ -50642,10 +50900,10 @@ class ColResizer extends AbstractResizer {
         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;
@@ -50656,7 +50914,7 @@ class ColResizer extends AbstractResizer {
         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,
         });
@@ -50669,7 +50927,7 @@ class ColResizer extends AbstractResizer {
             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,
@@ -50688,7 +50946,7 @@ class ColResizer extends AbstractResizer {
     _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],
         });
     }
@@ -50699,7 +50957,7 @@ class ColResizer extends AbstractResizer {
         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)) {
@@ -50710,13 +50968,38 @@ class ColResizer extends AbstractResizer {
     }
     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 */ `
@@ -50726,7 +51009,7 @@ css /* scss */ `
     left: 0;
     right: 0;
     width: ${HEADER_WIDTH}px;
-    height: 100%;
+    height: calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH}px);
     &.o-dragging {
       cursor: grabbing;
     }
@@ -50776,6 +51059,7 @@ class RowResizer extends AbstractResizer {
         onOpenContextMenu: Function,
     };
     static template = "o-spreadsheet-RowResizer";
+    static components = { UnhideRowHeaders };
     setup() {
         super.setup();
         this.rowResizerRef = useRef("rowResizer");
@@ -50784,6 +51068,9 @@ class RowResizer extends AbstractResizer {
         this.MIN_ELEMENT_SIZE = MIN_ROW_HEIGHT;
     }
     rowResizerRef;
+    get sheetId() {
+        return this.env.model.getters.getActiveSheetId();
+    }
     _getEvOffset(ev) {
         return ev.offsetY;
     }
@@ -50806,10 +51093,10 @@ class RowResizer extends AbstractResizer {
         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;
@@ -50820,7 +51107,7 @@ class RowResizer extends AbstractResizer {
         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,
         });
@@ -50833,7 +51120,7 @@ class RowResizer extends AbstractResizer {
             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,
@@ -50852,7 +51139,7 @@ class RowResizer extends AbstractResizer {
     _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],
         });
     }
@@ -50863,7 +51150,7 @@ class RowResizer extends AbstractResizer {
         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)) {
@@ -50872,15 +51159,33 @@ class RowResizer extends AbstractResizer {
         }
         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 */ `
@@ -60660,6 +60965,7 @@ class EvaluationPlugin extends CoreViewPlugin {
     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);
@@ -60671,8 +60977,9 @@ class EvaluationPlugin extends CoreViewPlugin {
             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
@@ -60695,7 +61002,11 @@ class EvaluationPlugin extends CoreViewPlugin {
                 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);
+            }
         }
     }
     /**
@@ -62923,7 +63234,7 @@ class AutofillPlugin extends UIPlugin {
     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.
@@ -67644,7 +67955,7 @@ class InternalViewport {
      *
      */
     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) {
@@ -68112,7 +68423,8 @@ class SheetViewPlugin extends UIPlugin {
             ? 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) {
@@ -68237,11 +68549,12 @@ class SheetViewPlugin extends UIPlugin {
      * 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;
@@ -68252,9 +68565,10 @@ class SheetViewPlugin extends UIPlugin {
      * 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,
         };
@@ -73405,7 +73719,7 @@ function numberRef(reference) {
   `;
 }
 
-function addFormula(formula, value) {
+function addFormula(formula, value, formulaSpillRange) {
     if (!formula) {
         return { attrs: [], node: escapeXml `` };
     }
@@ -73413,10 +73727,17 @@ function addFormula(formula, value) {
     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) {
@@ -74199,7 +74520,7 @@ function addStyles(styles) {
         }
         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)} />`);
@@ -74367,6 +74688,9 @@ function addColumns(cols) {
 }
 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] || {};
@@ -74382,9 +74706,6 @@ function addRows(construct, data, sheet) {
         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);
@@ -74406,7 +74727,7 @@ function addRows(construct, data, sheet) {
                 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;
                     }
@@ -74692,6 +75013,30 @@ function createWorksheets(data, construct) {
     `;
         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",
@@ -74700,6 +75045,10 @@ function createWorksheets(data, construct) {
         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;
 }
 /**
@@ -75616,6 +75965,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";