@odoo/o-spreadsheet 18.2.0 → 18.2.2

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.0
- * @date 2025-02-18T08:27:07.101Z
- * @hash d708714
+ * @version 18.2.2
+ * @date 2025-03-07T10:41:04.411Z
+ * @hash f567932
  */
 
 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';
@@ -4458,7 +4458,7 @@ function dichotomicSearch(data, target, mode, sortOrder, rangeLength, getValueIn
  * @param reverseSearch if true, search in the array starting from the end.
 
  */
-function linearSearch(data, target, mode, numberOfValues, getValueInData, reverseSearch = false) {
+function linearSearch(data, target, mode, numberOfValues, getValueInData, lookupCaches, reverseSearch = false) {
     if (target === undefined || target.value === null) {
         return -1;
     }
@@ -4467,17 +4467,48 @@ function linearSearch(data, target, mode, numberOfValues, getValueInData, revers
     }
     const _target = normalizeValue(target.value);
     const getValue = reverseSearch
-        ? (data, i) => getValueInData(data, numberOfValues - i - 1)
-        : getValueInData;
+        ? (data, i) => normalizeValue(getValueInData(data, numberOfValues - i - 1))
+        : (data, i) => normalizeValue(getValueInData(data, i));
+    // first check if the target is in the cache
+    const isNotWildcardTarget = mode !== "wildcard" ||
+        typeof _target !== "string" ||
+        !(_target.includes("*") || _target.includes("?"));
+    if (lookupCaches && isNotWildcardTarget) {
+        const searchMode = reverseSearch ? "reverseSearch" : "forwardSearch";
+        let cache = lookupCaches[searchMode].get(data);
+        if (cache === undefined) {
+            // build the cache for all the values
+            cache = new Map();
+            for (let i = 0; i < numberOfValues; i++) {
+                const value = getValue(data, i) ?? null;
+                if (!cache.has(value)) {
+                    cache.set(value, i);
+                }
+            }
+            lookupCaches[searchMode].set(data, cache);
+        }
+        if (cache.has(_target)) {
+            const resultIndex = cache.get(_target);
+            return reverseSearch ? numberOfValues - resultIndex - 1 : resultIndex;
+        }
+        if (mode === "strict") {
+            return -1;
+        }
+    }
+    // else perform the linear search
+    const resultIndex = _linearSearch(data, _target, mode, numberOfValues, getValue);
+    return reverseSearch && resultIndex !== -1 ? numberOfValues - resultIndex - 1 : resultIndex;
+}
+function _linearSearch(data, _target, mode, numberOfValues, getNormalizeValue) {
     let indexMatchTarget = (i) => {
-        return normalizeValue(getValue(data, i)) === _target;
+        return getNormalizeValue(data, i) === _target;
     };
     if (mode === "wildcard" &&
         typeof _target === "string" &&
         (_target.includes("*") || _target.includes("?"))) {
         const regExp = wildcardToRegExp(_target);
         indexMatchTarget = (i) => {
-            const value = normalizeValue(getValue(data, i));
+            const value = getNormalizeValue(data, i);
             if (typeof value === "string") {
                 return regExp.test(value);
             }
@@ -4488,7 +4519,7 @@ function linearSearch(data, target, mode, numberOfValues, getValueInData, revers
     let closestMatchIndex = -1;
     if (mode === "nextSmaller") {
         indexMatchTarget = (i) => {
-            const value = normalizeValue(getValue(data, i));
+            const value = getNormalizeValue(data, i);
             if ((!closestMatch && compareCellValues(_target, value) >= 0) ||
                 (compareCellValues(_target, value) >= 0 && compareCellValues(value, closestMatch) > 0)) {
                 closestMatch = value;
@@ -4499,7 +4530,7 @@ function linearSearch(data, target, mode, numberOfValues, getValueInData, revers
     }
     if (mode === "nextGreater") {
         indexMatchTarget = (i) => {
-            const value = normalizeValue(getValue(data, i));
+            const value = getNormalizeValue(data, i);
             if ((!closestMatch && compareCellValues(_target, value) <= 0) ||
                 (compareCellValues(_target, value) <= 0 && compareCellValues(value, closestMatch) < 0)) {
                 closestMatch = value;
@@ -4510,12 +4541,10 @@ function linearSearch(data, target, mode, numberOfValues, getValueInData, revers
     }
     for (let i = 0; i < numberOfValues; i++) {
         if (indexMatchTarget(i)) {
-            return reverseSearch ? numberOfValues - i - 1 : i;
+            return i;
         }
     }
-    return reverseSearch && closestMatchIndex !== -1
-        ? numberOfValues - closestMatchIndex - 1
-        : closestMatchIndex;
+    return closestMatchIndex;
 }
 /**
  * Normalize a value.
@@ -6071,8 +6100,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,
@@ -6084,8 +6114,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,
@@ -6489,10 +6520,11 @@ class UuidGenerator {
      *
      */
     smallUuid() {
-        //@ts-ignore
-        if (window.crypto && window.crypto.getRandomValues) {
-            //@ts-ignore
-            return ([1e7] + -1e3).replace(/[018]/g, (c) => (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16));
+        if (window.crypto) {
+            return "10000000-1000".replace(/[01]/g, (c) => {
+                const n = Number(c);
+                return (n ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (n / 4)))).toString(16);
+            });
         }
         else {
             // mainly for jest and other browsers that do not have the crypto functionality
@@ -6507,10 +6539,11 @@ class UuidGenerator {
      * This method should be used when you need to avoid collisions at all costs, like the id of a revision.
      */
     uuidv4() {
-        //@ts-ignore
-        if (window.crypto && window.crypto.getRandomValues) {
-            //@ts-ignore
-            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16));
+        if (window.crypto) {
+            return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) => {
+                const n = Number(c);
+                return (n ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (n / 4)))).toString(16);
+            });
         }
         else {
             // mainly for jest and other browsers that do not have the crypto functionality
@@ -9501,150 +9534,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
@@ -10189,79 +10078,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 };
 }
 
 /**
@@ -10843,6 +10994,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 = {
@@ -18684,7 +19128,7 @@ const HLOOKUP = {
         const _isSorted = toBoolean(isSorted.value);
         const colIndex = _isSorted
             ? dichotomicSearch(_range, searchKey, "nextSmaller", "asc", _range.length, getValueFromRange)
-            : linearSearch(_range, searchKey, "wildcard", _range.length, getValueFromRange);
+            : linearSearch(_range, searchKey, "wildcard", _range.length, getValueFromRange, this.lookupCaches);
         const col = _range[colIndex];
         if (col === undefined) {
             return valueNotAvailable(searchKey);
@@ -18839,7 +19283,7 @@ const MATCH = {
                 index = dichotomicSearch(_range, searchKey, "nextSmaller", "asc", rangeLen, getElement);
                 break;
             case 0:
-                index = linearSearch(_range, searchKey, "wildcard", rangeLen, getElement);
+                index = linearSearch(_range, searchKey, "wildcard", rangeLen, getElement, this.lookupCaches);
                 break;
             case -1:
                 index = dichotomicSearch(_range, searchKey, "nextGreater", "desc", rangeLen, getElement);
@@ -18907,7 +19351,7 @@ const VLOOKUP = {
         const _isSorted = toBoolean(isSorted.value);
         const rowIndex = _isSorted
             ? dichotomicSearch(_range, searchKey, "nextSmaller", "asc", _range[0].length, getValueFromRange)
-            : linearSearch(_range, searchKey, "wildcard", _range[0].length, getValueFromRange);
+            : linearSearch(_range, searchKey, "wildcard", _range[0].length, getValueFromRange, this.lookupCaches);
         const value = _range[_index - 1][rowIndex];
         if (value === undefined) {
             return valueNotAvailable(searchKey);
@@ -18963,7 +19407,7 @@ const XLOOKUP = {
         const reverseSearch = _searchMode === -1;
         const index = _searchMode === 2 || _searchMode === -2
             ? dichotomicSearch(_lookupRange, searchKey, mode, _searchMode === 2 ? "asc" : "desc", rangeLen, getElement)
-            : linearSearch(_lookupRange, searchKey, mode, rangeLen, getElement, reverseSearch);
+            : linearSearch(_lookupRange, searchKey, mode, rangeLen, getElement, this.lookupCaches, reverseSearch);
         if (index !== -1) {
             return lookupDirection === "col"
                 ? _returnRange.map((col) => [col[index]])
@@ -22295,7 +22739,7 @@ autofillRulesRegistry
     condition: (cell) => !cell.isFormula &&
         evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text &&
         alphaNumericValueRegExp.test(cell.content),
-    generateRule: (cell, cells) => {
+    generateRule: (cell, cells, direction) => {
         const numberPostfix = parseInt(cell.content.match(numberPostfixRegExp)[0]);
         const prefix = cell.content.match(stringPrefixRegExp)[0];
         const numberPostfixLength = cell.content.length - prefix.length;
@@ -22303,7 +22747,10 @@ autofillRulesRegistry
             alphaNumericValueRegExp.test(evaluatedCell.value)) // get consecutive alphanumeric cells, no matter what the prefix is
             .filter((cell) => prefix === (cell.value ?? "").toString().match(stringPrefixRegExp)[0])
             .map((cell) => parseInt((cell.value ?? "").toString().match(numberPostfixRegExp)[0]));
-        const increment = calculateIncrementBasedOnGroup(group);
+        let increment = calculateIncrementBasedOnGroup(group);
+        if (["up", "left"].includes(direction) && group.length === 1) {
+            increment = -increment;
+        }
         return {
             type: "ALPHANUMERIC_INCREMENT_MODIFIER",
             prefix,
@@ -22366,10 +22813,13 @@ autofillRulesRegistry
     .add("increment_number", {
     condition: (cell) => !cell.isFormula &&
         evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number,
-    generateRule: (cell, cells) => {
+    generateRule: (cell, cells, direction) => {
         const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number &&
             !isDateTimeFormat(evaluatedCell.format || "")).map((cell) => Number(cell.value));
-        const increment = calculateIncrementBasedOnGroup(group);
+        let increment = calculateIncrementBasedOnGroup(group);
+        if (["up", "left"].includes(direction) && group.length === 1) {
+            increment = -increment;
+        }
         const evaluation = evaluateLiteral(cell, { locale: DEFAULT_LOCALE });
         return {
             type: "INCREMENT_MODIFIER",
@@ -22413,343 +22863,6 @@ function getDateIntervals(dates) {
 
 const cellPopoverRegistry = new Registry();
 
-const GAUGE_PADDING_SIDE = 30;
-const GAUGE_PADDING_TOP = 10;
-const GAUGE_PADDING_BOTTOM = 20;
-const GAUGE_LABELS_FONT_SIZE = 12;
-const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
-const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
-const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
-const GAUGE_TITLE_SECTION_HEIGHT = 25;
-function drawGaugeChart(canvas, runtime) {
-    const canvasBoundingRect = canvas.getBoundingClientRect();
-    canvas.width = canvasBoundingRect.width;
-    canvas.height = canvasBoundingRect.height;
-    const ctx = canvas.getContext("2d");
-    const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
-    drawBackground(ctx, config);
-    drawGauge(ctx, config);
-    drawInflectionValues(ctx, config);
-    drawLabels(ctx, config);
-    drawTitle(ctx, config);
-}
-function drawGauge(ctx, config) {
-    ctx.save();
-    const gauge = config.gauge;
-    const arcCenterX = gauge.rect.x + gauge.rect.width / 2;
-    const arcCenterY = gauge.rect.y + gauge.rect.height;
-    const arcRadius = gauge.rect.height - gauge.arcWidth / 2;
-    if (arcRadius < 0) {
-        return;
-    }
-    const gaugeAngle = gauge.percentage === 1 ? 0 : Math.PI * (1 + gauge.percentage);
-    // Gauge background
-    ctx.strokeStyle = GAUGE_BACKGROUND_COLOR;
-    ctx.beginPath();
-    ctx.lineWidth = gauge.arcWidth;
-    ctx.arc(arcCenterX, arcCenterY, arcRadius, gaugeAngle, 0);
-    ctx.stroke();
-    // Gauge value
-    ctx.strokeStyle = gauge.color;
-    ctx.beginPath();
-    ctx.arc(arcCenterX, arcCenterY, arcRadius, Math.PI, gaugeAngle);
-    ctx.stroke();
-    ctx.restore();
-}
-function drawBackground(ctx, config) {
-    ctx.save();
-    ctx.fillStyle = config.backgroundColor;
-    ctx.fillRect(0, 0, config.width, config.height);
-    ctx.restore();
-}
-function drawLabels(ctx, config) {
-    for (const label of [config.minLabel, config.maxLabel, config.gaugeValue]) {
-        ctx.save();
-        ctx.textAlign = "center";
-        ctx.fillStyle = label.color;
-        ctx.font = `${label.fontSize}px ${DEFAULT_FONT}`;
-        ctx.fillText(label.label, label.textPosition.x, label.textPosition.y);
-        ctx.restore();
-    }
-}
-function drawInflectionValues(ctx, config) {
-    const { x: rectX, y: rectY, width, height } = config.gauge.rect;
-    for (const inflectionValue of config.inflectionValues) {
-        ctx.save();
-        ctx.translate(rectX + width / 2 - 0.5, rectY + height - 0.5); // -0.5 for sharper lines. see RendererPlugin.drawBorders comment
-        ctx.rotate(Math.PI / 2 - inflectionValue.rotation);
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = chartMutedFontColor(config.backgroundColor) + "aa";
-        ctx.beginPath();
-        ctx.moveTo(0, -(height - config.gauge.arcWidth));
-        ctx.lineTo(0, -height - 3);
-        ctx.stroke();
-        ctx.textAlign = "center";
-        ctx.font = `${inflectionValue.fontSize}px ${DEFAULT_FONT}`;
-        ctx.fillStyle = inflectionValue.color;
-        const textY = -height - GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN - inflectionValue.offset;
-        ctx.fillText(inflectionValue.label, 0, textY);
-        ctx.restore();
-    }
-}
-function drawTitle(ctx, config) {
-    ctx.save();
-    const title = config.title;
-    ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
-    ctx.textBaseline = "middle";
-    ctx.fillStyle = title.color;
-    ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
-    ctx.restore();
-}
-function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
-    const maxValue = runtime.maxValue;
-    const minValue = runtime.minValue;
-    const gaugeValue = runtime.gaugeValue;
-    const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
-    const gaugeArcWidth = gaugeRect.width / 6;
-    const gaugePercentage = gaugeValue
-        ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
-        : 0;
-    const gaugeValuePosition = {
-        x: boundingRect.width / 2,
-        y: gaugeRect.y + gaugeRect.height - gaugeRect.height / 12,
-    };
-    let gaugeValueFontSize = GAUGE_DEFAULT_VALUE_FONT_SIZE;
-    // Scale down the font size if the gaugeRect is too small
-    if (gaugeRect.height < 300) {
-        gaugeValueFontSize = gaugeValueFontSize * (gaugeRect.height / 300);
-    }
-    // Scale down the font size if the text is too long
-    const maxTextWidth = gaugeRect.width / 2;
-    const gaugeLabel = gaugeValue?.label || "-";
-    if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
-        gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
-    }
-    const minLabelPosition = {
-        x: gaugeRect.x + gaugeArcWidth / 2,
-        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
-    };
-    const maxLabelPosition = {
-        x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
-        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
-    };
-    const textColor = chartMutedFontColor(runtime.background);
-    const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
-    let x = 0, titleWidth = 0, titleHeight = 0;
-    if (runtime.title.text) {
-        ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "px"));
-    }
-    switch (runtime.title.align) {
-        case "right":
-            x = boundingRect.width - titleWidth - CHART_PADDING$1;
-            break;
-        case "center":
-            x = (boundingRect.width - titleWidth) / 2;
-            break;
-        case "left":
-        default:
-            x = CHART_PADDING$1;
-            break;
-    }
-    return {
-        width: boundingRect.width,
-        height: boundingRect.height,
-        title: {
-            label: runtime.title.text ?? "",
-            fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
-            textPosition: {
-                x,
-                y: CHART_PADDING_TOP + titleHeight / 2,
-            },
-            color: runtime.title.color ?? textColor,
-            bold: runtime.title.bold,
-            italic: runtime.title.italic,
-        },
-        backgroundColor: runtime.background,
-        gauge: {
-            rect: gaugeRect,
-            arcWidth: gaugeArcWidth,
-            percentage: clip(gaugePercentage, 0, 1),
-            color: getGaugeColor(runtime),
-        },
-        inflectionValues,
-        gaugeValue: {
-            label: gaugeLabel,
-            textPosition: gaugeValuePosition,
-            fontSize: gaugeValueFontSize,
-            color: textColor,
-        },
-        minLabel: {
-            label: runtime.minValue.label,
-            textPosition: minLabelPosition,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-        },
-        maxLabel: {
-            label: runtime.maxValue.label,
-            textPosition: maxLabelPosition,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-        },
-    };
-}
-/**
- * Get the rectangle in which the gauge will be drawn, based on the bounding rectangle of the canvas and leaving
- * space for the title and labels.
- */
-function getGaugeRect(boundingRect, title) {
-    const titleHeight = title ? GAUGE_TITLE_SECTION_HEIGHT : 0;
-    const drawHeight = boundingRect.height - GAUGE_PADDING_BOTTOM - titleHeight - GAUGE_PADDING_TOP;
-    const drawWidth = boundingRect.width - GAUGE_PADDING_SIDE * 2;
-    let gaugeWidth;
-    let gaugeHeight;
-    if (drawWidth > 2 * drawHeight) {
-        gaugeWidth = 2 * drawHeight;
-        gaugeHeight = drawHeight;
-    }
-    else {
-        gaugeWidth = drawWidth;
-        gaugeHeight = drawWidth / 2;
-    }
-    const gaugeX = GAUGE_PADDING_SIDE + (drawWidth - gaugeWidth) / 2;
-    const gaugeY = titleHeight + GAUGE_PADDING_TOP + (drawHeight - gaugeHeight) / 2;
-    return {
-        x: gaugeX,
-        y: gaugeY,
-        width: gaugeWidth,
-        height: gaugeHeight,
-    };
-}
-/**
- * Get the infliction values of the gauge, and where to draw them (the angle from the center of the gauge at which they are drawn).
- *
- * Also compute an offset for the text so that it doesn't overlap with other text.
- */
-function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
-    const maxValue = runtime.maxValue;
-    const minValue = runtime.minValue;
-    const gaugeCircleCenter = {
-        x: gaugeRect.x + gaugeRect.width / 2,
-        y: gaugeRect.y + gaugeRect.height,
-    };
-    const textStyle = { fontSize: GAUGE_LABELS_FONT_SIZE };
-    const inflectionValues = [];
-    const inflectionValuesTextRects = [];
-    for (const inflectionValue of runtime.inflectionValues) {
-        const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
-        const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
-        const angle = Math.PI - Math.PI * percentage;
-        const textRect = getRectangleTangentToCircle(angle, // angle between X axis and the point where the rectangle is tangent to the circle
-        gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, // radius of the gauge circle + margin below text
-        gaugeCircleCenter.x, // center of the gauge circle
-        gaugeCircleCenter.y, // center of the gauge circle
-        labelWidth + 2, // width of the text + some margin
-        GAUGE_LABELS_FONT_SIZE // height of the text
-        );
-        let offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect))
-            ? GAUGE_LABELS_FONT_SIZE
-            : 0;
-        inflectionValuesTextRects.push(textRect);
-        inflectionValues.push({
-            rotation: angle,
-            label: inflectionValue.label,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-            offset,
-        });
-    }
-    return inflectionValues;
-}
-function getGaugeColor(runtime) {
-    const gaugeValue = runtime.gaugeValue?.value;
-    if (gaugeValue === undefined) {
-        return GAUGE_BACKGROUND_COLOR;
-    }
-    for (let i = 0; i < runtime.inflectionValues.length; i++) {
-        const inflectionValue = runtime.inflectionValues[i];
-        if (inflectionValue.operator === "<" && gaugeValue < inflectionValue.value) {
-            return runtime.colors[i];
-        }
-        else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
-            return runtime.colors[i];
-        }
-    }
-    return runtime.colors.at(-1);
-}
-function getSegmentsOfRectangle(rectangle) {
-    return [
-        { start: rectangle.topLeft, end: rectangle.topRight },
-        { start: rectangle.topRight, end: rectangle.bottomRight },
-        { start: rectangle.bottomRight, end: rectangle.bottomLeft },
-        { start: rectangle.bottomLeft, end: rectangle.topLeft },
-    ];
-}
-/**
- * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
- * is not handled.
- */
-function doSegmentIntersect(segment1, segment2) {
-    const A = segment1.start;
-    const B = segment1.end;
-    const C = segment2.start;
-    const D = segment2.end;
-    /**
-     * Line segment intersection algorithm
-     * https://bryceboe.com/2006/10/23/line-segment-intersection-algorithm/
-     */
-    function ccw(a, b, c) {
-        return (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x);
-    }
-    return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
-}
-function doRectanglesIntersect(rect1, rect2) {
-    const segments1 = getSegmentsOfRectangle(rect1);
-    const segments2 = getSegmentsOfRectangle(rect2);
-    for (const segment1 of segments1) {
-        for (const segment2 of segments2) {
-            if (doSegmentIntersect(segment1, segment2)) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-/**
- *  Get the rectangle that is tangent to a circle at a given angle.
- *
- * @param angle angle between X axis and the point where the rectangle is tangent to the circle
- */
-function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
-    const x = cos * radius;
-    const y = sin * radius;
-    // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
-    const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
-    const y2 = cos * (rectWidth / 2);
-    const bottomRight = {
-        x: x + x2 + circleCenterX,
-        y: circleCenterY - (y - y2),
-    };
-    const bottomLeft = {
-        x: x - x2 + circleCenterX,
-        y: circleCenterY - (y + y2),
-    };
-    // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
-    const xp = cos * (radius + rectHeight);
-    const yp = sin * (radius + rectHeight);
-    const topLeft = {
-        x: xp - x2 + circleCenterX,
-        y: circleCenterY - (yp + y2),
-    };
-    const topRight = {
-        x: xp + x2 + circleCenterX,
-        y: circleCenterY - (yp - y2),
-    };
-    return { bottomLeft, bottomRight, topRight, topLeft };
-}
-
 class GaugeChartComponent extends Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     canvas = useRef("chartContainer");
@@ -22782,72 +22895,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
  */
@@ -22913,6 +22960,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",
@@ -22925,6 +22973,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",
@@ -22934,6 +22983,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
 /**
@@ -25355,29 +25405,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;
                 }
@@ -25386,11 +25441,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)
@@ -25398,58 +25459,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;
 }
 
 // -------------------------------------
@@ -28302,7 +28414,7 @@ function getBarChartData(definition, dataSets, labelRange, getters) {
 }
 function getPyramidChartData(definition, dataSets, labelRange, getters) {
     const barChartData = getBarChartData(definition, dataSets, labelRange, getters);
-    const barDataset = barChartData.dataSetsValues;
+    const barDataset = barChartData.dataSetsValues.filter((ds) => !ds.hidden);
     const pyramidDatasetValues = [];
     if (barDataset[0]) {
         const pyramidData = barDataset[0].data.map((value) => (value > 0 ? value : 0));
@@ -28617,11 +28729,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;
@@ -28779,10 +28892,8 @@ function getChartDatasetFormat(getters, allDataSets, axis) {
 function getChartDatasetValues(getters, dataSets) {
     const datasetValues = [];
     for (const [dsIndex, ds] of Object.entries(dataSets)) {
-        if (getters.isColHidden(ds.dataRange.sheetId, ds.dataRange.zone.left)) {
-            continue;
-        }
         let label;
+        let hidden = getters.isColHidden(ds.dataRange.sheetId, ds.dataRange.zone.left);
         if (ds.labelCell) {
             const labelRange = ds.labelCell;
             const cell = labelRange
@@ -28809,9 +28920,9 @@ function getChartDatasetValues(getters, dataSets) {
             data.fill(1);
         }
         else if (data.every((cell) => cell === undefined || cell === null || !isNumber(cell.toString(), DEFAULT_LOCALE))) {
-            continue;
+            hidden = true;
         }
-        datasetValues.push({ data, label });
+        datasetValues.push({ data, label, hidden });
     }
     return datasetValues;
 }
@@ -28822,12 +28933,13 @@ function getBarChartDatasets(definition, args) {
     const colors = getChartColorsGenerator(definition, dataSetsValues.length);
     const trendDatasets = [];
     for (const index in dataSetsValues) {
-        let { label, data } = dataSetsValues[index];
+        let { label, data, hidden } = dataSetsValues[index];
         label = definition.dataSets?.[index].label || label;
         const backgroundColor = colors.next();
         const dataset = {
             label,
             data,
+            hidden,
             borderColor: definition.background || BACKGROUND_CHART_COLOR,
             borderWidth: definition.stacked ? 1 : 0,
             backgroundColor,
@@ -28860,6 +28972,9 @@ function getWaterfallDatasetAndLabels(definition, args) {
     const labelsWithSubTotals = [];
     let lastValue = 0;
     for (const dataSetsValue of dataSetsValues) {
+        if (dataSetsValue.hidden) {
+            continue;
+        }
         for (let i = 0; i < dataSetsValue.data.length; i++) {
             const data = dataSetsValue.data[i];
             labelsWithSubTotals.push(labels[i]);
@@ -28895,7 +29010,7 @@ function getLineChartDatasets(definition, args) {
     const trendDatasets = [];
     const colors = getChartColorsGenerator(definition, dataSetsValues.length);
     for (let index = 0; index < dataSetsValues.length; index++) {
-        let { label, data } = dataSetsValues[index];
+        let { label, data, hidden } = dataSetsValues[index];
         label = definition.dataSets?.[index].label || label;
         const color = colors.next();
         if (axisType && ["linear", "time"].includes(axisType)) {
@@ -28905,6 +29020,7 @@ function getLineChartDatasets(definition, args) {
         const dataset = {
             label,
             data,
+            hidden,
             tension: 0, // 0 -> render straight lines, which is much faster
             borderColor: color,
             backgroundColor: areaChart ? setColorAlpha(color, LINE_FILL_TRANSPARENCY) : color,
@@ -28937,7 +29053,9 @@ function getPieChartDatasets(definition, args) {
     const dataSets = [];
     const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
     const backgroundColor = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
-    for (const { label, data } of dataSetsValues) {
+    for (const { label, data, hidden } of dataSetsValues) {
+        if (hidden)
+            continue;
         const dataset = {
             label,
             data,
@@ -28955,7 +29073,7 @@ function getComboChartDatasets(definition, args) {
     const colors = getChartColorsGenerator(definition, dataSetsValues.length);
     const trendDatasets = [];
     for (let index = 0; index < dataSetsValues.length; index++) {
-        let { label, data } = dataSetsValues[index];
+        let { label, data, hidden } = dataSetsValues[index];
         label = definition.dataSets?.[index].label || label;
         const design = definition.dataSets?.[index];
         const color = colors.next();
@@ -28963,6 +29081,7 @@ function getComboChartDatasets(definition, args) {
         const dataset = {
             label: label,
             data,
+            hidden,
             borderColor: color,
             backgroundColor: color,
             yAxisID: definition.dataSets?.[index].yAxisId || "y",
@@ -28987,7 +29106,7 @@ function getRadarChartDatasets(definition, args) {
     const fill = definition.fillArea ?? false;
     const colors = getChartColorsGenerator(definition, dataSetsValues.length);
     for (let i = 0; i < dataSetsValues.length; i++) {
-        let { label, data } = dataSetsValues[i];
+        let { label, data, hidden } = dataSetsValues[i];
         if (definition.dataSets?.[i]?.label) {
             label = definition.dataSets[i].label;
         }
@@ -28995,6 +29114,7 @@ function getRadarChartDatasets(definition, args) {
         const dataset = {
             label,
             data,
+            hidden,
             borderColor,
             backgroundColor: borderColor,
         };
@@ -29140,6 +29260,11 @@ function getPieChartLegend(definition, args) {
                 hidden: false,
                 lineWidth: 2,
             })),
+            filter: (legendItem, data) => {
+                return "datasetIndex" in legendItem
+                    ? !data.datasets[legendItem.datasetIndex].hidden
+                    : true;
+            },
         },
     };
 }
@@ -29201,6 +29326,11 @@ function getWaterfallChartLegend(definition, args) {
                 }
                 return legendValues;
             },
+            filter: (legendItem, data) => {
+                return "datasetIndex" in legendItem
+                    ? !data.datasets[legendItem.datasetIndex].hidden
+                    : true;
+            },
         },
         onClick: () => { }, // Disables click interaction with the waterfall chart legend items
     };
@@ -29284,6 +29414,11 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
                     ...legendLabelConfig,
                 };
             }),
+            filter: (legendItem, data) => {
+                return "datasetIndex" in legendItem
+                    ? !data.datasets[legendItem.datasetIndex].hidden
+                    : true;
+            },
         },
     };
 }
@@ -29617,7 +29752,7 @@ const templates = /* xml */ `
     <div
       class="o-chart-custom-tooltip border rounded px-2 py-1 pe-none mw-100 position-absolute text-nowrap shadow opacity-100">
       <table class="overflow-hidden m-0">
-        <thead>
+        <thead t-if="title">
           <tr>
             <th class="o-tooltip-title align-baseline border-0 text-truncate" t-esc="title" t-attf-style="max-width: {{ labelsMaxWidth }}"/>
           </tr>
@@ -29678,8 +29813,8 @@ function getBarChartTooltip(definition, args) {
                     ? undefined
                     : "";
             },
+            beforeLabel: (tooltipItem) => tooltipItem.dataset?.label || tooltipItem.label,
             label: function (tooltipItem) {
-                const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
                 const horizontalChart = definition.horizontal;
                 let yLabel = horizontalChart ? tooltipItem.parsed.x : tooltipItem.parsed.y;
                 if (yLabel === undefined || yLabel === null) {
@@ -29687,7 +29822,7 @@ function getBarChartTooltip(definition, args) {
                 }
                 const axisId = horizontalChart ? tooltipItem.dataset.xAxisID : tooltipItem.dataset.yAxisID;
                 const yLabelStr = formatChartDatasetValue(args.axisFormats, args.locale)(yLabel, axisId);
-                return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+                return yLabelStr;
             },
         },
     };
@@ -29712,21 +29847,18 @@ function getLineChartTooltip(definition, args) {
             const formattedX = formatValue(label, { locale, format: labelFormat });
             const axisId = tooltipItem.dataset.yAxisID || "y";
             const formattedY = formatValue(dataSetPoint, { locale, format: axisFormats?.[axisId] });
-            const dataSetTitle = tooltipItem.dataset.label;
-            return formattedX
-                ? `${dataSetTitle}: (${formattedX}, ${formattedY})`
-                : `${dataSetTitle}: ${formattedY}`;
+            return formattedX ? `(${formattedX}, ${formattedY})` : `${formattedY}`;
         };
     }
     else {
         tooltip.callbacks.label = function (tooltipItem) {
-            const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
             const yLabel = tooltipItem.parsed.y;
             const axisId = tooltipItem.dataset.yAxisID;
             const yLabelStr = formatChartDatasetValue(axisFormats, locale)(yLabel, axisId);
-            return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+            return yLabelStr;
         };
     }
+    tooltip.callbacks.beforeLabel = (tooltipItem) => tooltipItem.dataset?.label || tooltipItem.label;
     tooltip.callbacks.title = function (tooltipItems) {
         const displayTooltipTitle = axisType !== "linear" &&
             tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID);
@@ -29744,17 +29876,15 @@ function getPieChartTooltip(definition, args) {
             title: function (tooltipItems) {
                 return tooltipItems[0].dataset.label;
             },
+            beforeLabel: (tooltipItem) => tooltipItem.label || tooltipItem.dataset.label,
             label: function (tooltipItem) {
                 const data = tooltipItem.dataset.data;
                 const dataIndex = tooltipItem.dataIndex;
                 const percentage = calculatePercentage(data, dataIndex);
-                const xLabel = tooltipItem.label || tooltipItem.dataset.label;
                 const yLabel = tooltipItem.parsed.y ?? tooltipItem.parsed;
                 const toolTipFormat = !format && yLabel >= 1000 ? "#,##" : format;
                 const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-                return xLabel
-                    ? `${xLabel}: ${yLabelStr} (${percentage}%)`
-                    : `${yLabelStr} (${percentage}%)`;
+                return `${yLabelStr} (${percentage}%)`;
             },
         },
     };
@@ -29767,16 +29897,17 @@ function getWaterfallChartTooltip(definition, args) {
         enabled: false,
         external: customTooltipHandler,
         callbacks: {
-            label: function (tooltipItem) {
-                const [lastValue, currentValue] = tooltipItem.raw;
-                const yLabel = currentValue - lastValue;
+            beforeLabel: function (tooltipItem) {
                 const dataSeriesIndex = labels.length
                     ? Math.floor(tooltipItem.dataIndex / labels.length)
                     : 0;
-                const dataSeriesLabel = dataSeriesLabels[dataSeriesIndex];
+                return dataSeriesLabels[dataSeriesIndex];
+            },
+            label: function (tooltipItem) {
+                const [lastValue, currentValue] = tooltipItem.raw;
+                const yLabel = currentValue - lastValue;
                 const toolTipFormat = !format && Math.abs(yLabel) > 1000 ? "#,##" : format;
-                const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-                return dataSeriesLabel ? `${dataSeriesLabel}: ${yLabelStr}` : yLabelStr;
+                return formatValue(yLabel, { format: toolTipFormat, locale });
             },
         },
     };
@@ -29800,11 +29931,10 @@ function getRadarChartTooltip(definition, args) {
         enabled: false,
         external: customTooltipHandler,
         callbacks: {
+            beforeLabel: (tooltipItem) => tooltipItem.dataset?.label || tooltipItem.label,
             label: function (tooltipItem) {
-                const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
                 const yLabel = tooltipItem.parsed.r;
-                const formattedY = formatValue(yLabel, { format: axisFormats?.r, locale });
-                return xLabel ? `${xLabel}: ${formattedY}` : formattedY;
+                return formatValue(yLabel, { format: axisFormats?.r, locale });
             },
         },
     };
@@ -29819,13 +29949,12 @@ function getGeoChartTooltip(definition, args) {
             return tooltipItem.raw.value !== undefined;
         },
         callbacks: {
+            beforeLabel: (tooltipItem) => tooltipItem.raw.feature.properties.name,
             label: function (tooltipItem) {
                 const rawItem = tooltipItem.raw;
-                const xLabel = rawItem.feature.properties.name;
                 const yLabel = rawItem.value;
                 const toolTipFormat = !format && Math.abs(yLabel) >= 1000 ? "#,##" : format;
-                const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-                return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+                return formatValue(yLabel, { format: toolTipFormat, locale });
             },
         },
     };
@@ -29845,7 +29974,8 @@ function customTooltipHandler({ chart, tooltip }) {
         return;
     }
     const tooltipItems = tooltip.body.map((body, index) => {
-        let [label, value] = body.lines[0].split(":").map((str) => str.trim());
+        let label = body.before[0];
+        let value = body.lines[0];
         if (!value) {
             value = label;
             label = "";
@@ -32458,10 +32588,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,
@@ -34013,6 +34139,7 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
   formatChartDatasetValue: formatChartDatasetValue,
   formatTickValue: formatTickValue,
+  getChartJSConstructor: getChartJSConstructor,
   getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
   getDefinedAxis: getDefinedAxis,
   getPieColors: getPieColors,
@@ -37813,6 +37940,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) {
@@ -37847,12 +37979,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),
@@ -38122,10 +38253,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();
             },
@@ -38403,6 +38534,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;
@@ -39819,8 +39953,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);
+            }
         }
     }
     /**
@@ -40122,8 +40264,7 @@ css /* scss */ `
     }
 
     .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
+      margin-top: 1px;
 
       .o-semi-bold {
         /* FIXME: to remove in favor of Bootstrap
@@ -40174,10 +40315,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) {
@@ -40201,13 +40343,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;
@@ -46681,9 +46839,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;
@@ -46739,26 +46895,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;
@@ -51637,8 +51800,8 @@ class Border extends Component {
 css /* scss */ `
   .o-corner {
     position: absolute;
-    height: 6px;
-    width: 6px;
+    height: 8px;
+    width: 8px;
     border: 1px solid white;
   }
   .o-corner-nw,
@@ -59999,6 +60162,10 @@ class Evaluator {
         this.compilationParams = buildCompilationParameters(this.context, this.getters, this.computeAndSave.bind(this));
         this.compilationParams.evalContext.updateDependencies = this.updateDependencies.bind(this);
         this.compilationParams.evalContext.addDependencies = this.addDependencies.bind(this);
+        this.compilationParams.evalContext.lookupCaches = {
+            forwardSearch: new Map(),
+            reverseSearch: new Map(),
+        };
     }
     createEmptyPositionSet() {
         const sheetSizes = {};
@@ -60608,6 +60775,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);
@@ -60619,8 +60787,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
@@ -60643,7 +60812,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);
+            }
         }
     }
     /**
@@ -62871,7 +63044,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.
@@ -73353,7 +73526,7 @@ function numberRef(reference) {
   `;
 }
 
-function addFormula(formula, value) {
+function addFormula(formula, value, formulaSpillRange) {
     if (!formula) {
         return { attrs: [], node: escapeXml `` };
     }
@@ -73361,10 +73534,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) {
@@ -74354,7 +74534,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;
                     }
@@ -74640,6 +74820,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",
@@ -74648,6 +74852,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;
 }
 /**
@@ -75564,6 +75772,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.0";
-__info__.date = "2025-02-18T08:27:07.101Z";
-__info__.hash = "d708714";
+__info__.version = "18.2.2";
+__info__.date = "2025-03-07T10:41:04.411Z";
+__info__.hash = "f567932";