@odoo/o-spreadsheet 18.1.8 → 18.1.10

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.1.8
- * @date 2025-02-14T08:42:08.322Z
- * @hash 02682f4
+ * @version 18.1.10
+ * @date 2025-03-07T10:34:41.861Z
+ * @hash 31e4526
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -2218,17 +2218,7 @@ function toZoneWithoutBoundaryChanges(xc) {
  */
 function toUnboundedZone(xc) {
     const zone = toZoneWithoutBoundaryChanges(xc);
-    if (zone.right !== undefined && zone.right < zone.left) {
-        const tmp = zone.left;
-        zone.left = zone.right;
-        zone.right = tmp;
-    }
-    if (zone.bottom !== undefined && zone.bottom < zone.top) {
-        const tmp = zone.top;
-        zone.top = zone.bottom;
-        zone.bottom = tmp;
-    }
-    return zone;
+    return reorderZone(zone);
 }
 /**
  * Convert from a cartesian reference to a Zone.
@@ -2502,11 +2492,11 @@ function positions(zone) {
     return positions;
 }
 function reorderZone(zone) {
-    if (zone.left > zone.right) {
-        zone = { left: zone.right, right: zone.left, top: zone.top, bottom: zone.bottom };
+    if (zone.right !== undefined && zone.left > zone.right) {
+        zone = { ...zone, left: zone.right, right: zone.left };
     }
-    if (zone.top > zone.bottom) {
-        zone = { left: zone.left, right: zone.right, top: zone.bottom, bottom: zone.top };
+    if (zone.bottom !== undefined && zone.top > zone.bottom) {
+        zone = { ...zone, top: zone.bottom, bottom: zone.top };
     }
     return zone;
 }
@@ -3411,12 +3401,12 @@ function isTargetDependent(cmd) {
 function isRangeDependant(cmd) {
     return "ranges" in cmd;
 }
-function isZoneDependent(cmd) {
-    return "zone" in cmd;
-}
 function isPositionDependent(cmd) {
     return "col" in cmd && "row" in cmd && "sheetId" in cmd;
 }
+function isZoneDependent(cmd) {
+    return "sheetId" in cmd && "zone" in cmd;
+}
 const invalidateEvaluationCommands = new Set([
     "RENAME_SHEET",
     "DELETE_SHEET",
@@ -3428,6 +3418,7 @@ const invalidateEvaluationCommands = new Set([
     "REDO",
     "ADD_MERGE",
     "REMOVE_MERGE",
+    "DUPLICATE_SHEET",
     "UPDATE_LOCALE",
     "ADD_PIVOT",
     "UPDATE_PIVOT",
@@ -3457,7 +3448,6 @@ const invalidateChartEvaluationCommands = new Set([
 ]);
 const invalidateDependenciesCommands = new Set(["MOVE_RANGES"]);
 const invalidateCFEvaluationCommands = new Set([
-    "DUPLICATE_SHEET",
     "EVALUATE_CELLS",
     "ADD_CONDITIONAL_FORMAT",
     "REMOVE_CONDITIONAL_FORMAT",
@@ -3627,6 +3617,7 @@ var CommandResult;
     CommandResult["InvalidRange"] = "InvalidRange";
     CommandResult["InvalidZones"] = "InvalidZones";
     CommandResult["InvalidSheetId"] = "InvalidSheetId";
+    CommandResult["InvalidCellId"] = "InvalidCellId";
     CommandResult["InvalidFigureId"] = "InvalidFigureId";
     CommandResult["InputAlreadyFocused"] = "InputAlreadyFocused";
     CommandResult["MaximumRangesReached"] = "MaximumRangesReached";
@@ -4458,7 +4449,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 +4458,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 +4510,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 +4521,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 +4532,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 +6091,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 +6105,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 +6511,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 +6530,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
@@ -10034,70 +10058,341 @@ function getNextNonEmptyBar(bars, startIndex) {
     return bars.find((bar, i) => i > startIndex && bar.height !== 0);
 }
 
-window.Chart?.register(waterfallLinesPlugin);
-window.Chart?.register(chartShowValuesPlugin);
-class ChartJsComponent extends Component {
-    static template = "o-spreadsheet-ChartJsComponent";
-    static props = {
-        figure: Object,
+const GAUGE_PADDING_SIDE = 30;
+const GAUGE_PADDING_TOP = 10;
+const GAUGE_PADDING_BOTTOM = 20;
+const GAUGE_LABELS_FONT_SIZE = 12;
+const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
+const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
+const GAUGE_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,
     };
-    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];
+        }
+    }
+    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;
+            }
         }
-        this.chart.config.options = chartData.options;
-        this.chart.update();
     }
+    return false;
+}
+/**
+ *  Get the rectangle that is tangent to a circle at a given angle.
+ *
+ * @param angle angle between X axis and the point where the rectangle is tangent to the circle
+ */
+function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
+    const x = cos * radius;
+    const y = sin * radius;
+    // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
+    const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
+    const y2 = cos * (rectWidth / 2);
+    const bottomRight = {
+        x: x + x2 + circleCenterX,
+        y: circleCenterY - (y - y2),
+    };
+    const bottomLeft = {
+        x: x - x2 + circleCenterX,
+        y: circleCenterY - (y + y2),
+    };
+    // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
+    const xp = cos * (radius + rectHeight);
+    const yp = sin * (radius + rectHeight);
+    const topLeft = {
+        x: xp - x2 + circleCenterX,
+        y: circleCenterY - (yp + y2),
+    };
+    const topRight = {
+        x: xp + x2 + circleCenterX,
+        y: circleCenterY - (yp - y2),
+    };
+    return { bottomLeft, bottomRight, topRight, topLeft };
 }
 
 /**
@@ -10679,6 +10974,155 @@ 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 truncateLabel(label) {
+    if (!label) {
+        return "";
+    }
+    if (label.length > MAX_CHAR_LABEL) {
+        return label.substring(0, MAX_CHAR_LABEL) + "…";
+    }
+    return label;
+}
+function chartToImage(runtime, figure, type) {
+    // wrap the canvas in a div with a fixed size because chart.js would
+    // fill the whole page otherwise
+    const div = document.createElement("div");
+    div.style.width = `${figure.width}px`;
+    div.style.height = `${figure.height}px`;
+    const canvas = document.createElement("canvas");
+    div.append(canvas);
+    canvas.setAttribute("width", figure.width.toString());
+    canvas.setAttribute("height", figure.height.toString());
+    // we have to add the canvas to the DOM otherwise it won't be rendered
+    document.body.append(div);
+    if ("chartJsConfig" in runtime) {
+        const config = deepCopy(runtime.chartJsConfig);
+        config.plugins = [backgroundColorChartJSPlugin];
+        const Chart = getChartJSConstructor();
+        const chart = new Chart(canvas, config);
+        const imgContent = chart.toBase64Image();
+        chart.destroy();
+        div.remove();
+        return imgContent;
+    }
+    else if (type === "scorecard") {
+        const design = getScorecardConfiguration(figure, runtime);
+        drawScoreChart(design, canvas);
+        const imgContent = canvas.toDataURL();
+        div.remove();
+        return imgContent;
+    }
+    else if (type === "gauge") {
+        drawGaugeChart(canvas, runtime);
+        const imgContent = canvas.toDataURL();
+        div.remove();
+        return imgContent;
+    }
+    return undefined;
+}
+/**
+ * Custom chart.js plugin to set the background color of the canvas
+ * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
+ */
+const backgroundColorChartJSPlugin = {
+    id: "customCanvasBackgroundColor",
+    beforeDraw: (chart) => {
+        const { ctx } = chart;
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, chart.width, chart.height);
+        ctx.restore();
+    },
+};
+/** Return window.Chart, making sure all our extensions are loaded in ChartJS */
+function getChartJSConstructor() {
+    if (window.Chart && !window.Chart?.registry.plugins.get("chartShowValuesPlugin")) {
+        window.Chart.register(chartShowValuesPlugin);
+        window.Chart.register(waterfallLinesPlugin);
+    }
+    return window.Chart;
+}
+
+class ChartJsComponent extends 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 = {
@@ -12063,6 +12507,25 @@ const LN = {
     isExported: true,
 };
 // -----------------------------------------------------------------------------
+// LOG
+// -----------------------------------------------------------------------------
+const LOG = {
+    description: _t("The logarithm of a number, for a given base."),
+    args: [
+        arg("value (number)", _t("The value for which to calculate the logarithm.")),
+        arg("base (number, default=10)", _t("The base of the logarithm.")),
+    ],
+    compute: function (value, base = { value: 10 }) {
+        const _value = toNumber(value, this.locale);
+        const _base = toNumber(base, this.locale);
+        assert(() => _value > 0, _t("The value (%s) must be strictly positive.", _value.toString()));
+        assert(() => _base > 0, _t("The base (%s) must be strictly positive.", _base.toString()));
+        assert(() => _base !== 1, _t("The base must be different from 1."));
+        return Math.log10(_value) / Math.log10(_base);
+    },
+    isExported: true,
+};
+// -----------------------------------------------------------------------------
 // MOD
 // -----------------------------------------------------------------------------
 function mod(dividend, divisor) {
@@ -12602,6 +13065,7 @@ var math = /*#__PURE__*/Object.freeze({
   ISODD: ISODD,
   ISO_CEILING: ISO_CEILING,
   LN: LN,
+  LOG: LOG,
   MOD: MOD,
   MUNIT: MUNIT,
   ODD: ODD,
@@ -18500,7 +18964,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);
@@ -18655,7 +19119,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);
@@ -18723,7 +19187,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);
@@ -18779,7 +19243,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]])
@@ -22111,7 +22575,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;
@@ -22119,7 +22583,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,
@@ -22182,10 +22649,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",
@@ -22229,343 +22699,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");
@@ -22598,81 +22731,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 truncateLabel(label) {
-    if (!label) {
-        return "";
-    }
-    if (label.length > MAX_CHAR_LABEL) {
-        return label.substring(0, MAX_CHAR_LABEL) + "…";
-    }
-    return label;
-}
-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
  */
@@ -22734,6 +22792,7 @@ const DRAWING_NS_C = "http://schemas.openxmlformats.org/drawingml/2006/chart";
 const CONTENT_TYPES = {
     workbook: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml",
     sheet: "application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml",
+    metadata: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheetMetadata+xml",
     sharedStrings: "application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml",
     styles: "application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml",
     drawing: "application/vnd.openxmlformats-officedocument.drawing+xml",
@@ -22746,6 +22805,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",
@@ -22755,6 +22815,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
 /**
@@ -25320,29 +25381,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;
                 }
@@ -25351,11 +25417,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)
@@ -25363,58 +25435,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;
 }
 
 // -------------------------------------
@@ -28267,7 +28390,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));
@@ -28582,11 +28705,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;
@@ -28744,10 +28868,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
@@ -28774,9 +28896,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;
 }
@@ -28787,12 +28909,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,
@@ -28825,6 +28948,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]);
@@ -28860,7 +28986,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)) {
@@ -28870,6 +28996,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,
@@ -28902,11 +29029,13 @@ 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,
-            borderColor: BACKGROUND_CHART_COLOR,
+            borderColor: definition.background || "#FFFFFF",
             backgroundColor,
             hoverOffset: 30,
         };
@@ -28920,7 +29049,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();
@@ -28928,6 +29057,7 @@ function getComboChartDatasets(definition, args) {
         const dataset = {
             label: label,
             data,
+            hidden,
             borderColor: color,
             backgroundColor: color,
             yAxisID: definition.dataSets?.[index].yAxisId || "y",
@@ -28952,7 +29082,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;
         }
@@ -28960,6 +29090,7 @@ function getRadarChartDatasets(definition, args) {
         const dataset = {
             label,
             data,
+            hidden,
             borderColor,
             backgroundColor: borderColor,
         };
@@ -29105,6 +29236,11 @@ function getPieChartLegend(definition, args) {
                 hidden: false,
                 lineWidth: 2,
             })),
+            filter: (legendItem, data) => {
+                return "datasetIndex" in legendItem
+                    ? !data.datasets[legendItem.datasetIndex].hidden
+                    : true;
+            },
         },
     };
 }
@@ -29166,6 +29302,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
     };
@@ -29249,6 +29390,11 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
                     ...legendLabelConfig,
                 };
             }),
+            filter: (legendItem, data) => {
+                return "datasetIndex" in legendItem
+                    ? !data.datasets[legendItem.datasetIndex].hidden
+                    : true;
+            },
         },
     };
 }
@@ -32261,10 +32407,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,
@@ -33038,6 +33180,100 @@ function* iterateChildren(el) {
 function getOpenedMenus() {
     return Array.from(document.querySelectorAll(".o-spreadsheet .o-menu"));
 }
+function getCurrentSelection(el) {
+    let { startElement, endElement, startSelectionOffset, endSelectionOffset } = getStartAndEndSelection(el);
+    let startSizeBefore = findSelectionIndex(el, startElement, startSelectionOffset);
+    let endSizeBefore = findSelectionIndex(el, endElement, endSelectionOffset);
+    return {
+        start: startSizeBefore,
+        end: endSizeBefore,
+    };
+}
+function getStartAndEndSelection(el) {
+    const selection = document.getSelection();
+    return {
+        startElement: selection.anchorNode || el,
+        startSelectionOffset: selection.anchorOffset,
+        endElement: selection.focusNode || el,
+        endSelectionOffset: selection.focusOffset,
+    };
+}
+/**
+ * Computes the text 'index' inside this.el based on the currently selected node and its offset.
+ * The selected node is either a Text node or an Element node.
+ *
+ * case 1 -Text node:
+ * the offset is the number of characters from the start of the node. We have to add this offset to the
+ * content length of all previous nodes.
+ *
+ * case 2 - Element node:
+ * the offset is the number of child nodes before the selected node. We have to add the content length of
+ * all the nodes prior to the selected node as well as the content of the child node before the offset.
+ *
+ * See the MDN documentation for more details.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
+ * https://developer.mozilla.org/en-US/docs/Web/API/Range/endOffset
+ *
+ */
+function findSelectionIndex(el, nodeToFind, nodeOffset) {
+    let usedCharacters = 0;
+    let it = iterateChildren(el);
+    let current = it.next();
+    let isFirstParagraph = true;
+    while (!current.done && current.value !== nodeToFind) {
+        if (!current.value.hasChildNodes()) {
+            if (current.value.textContent) {
+                usedCharacters += current.value.textContent.length;
+            }
+        }
+        // One new paragraph = one new line character, except for the first paragraph
+        if (current.value.nodeName === "P" ||
+            (current.value.nodeName === "DIV" && current.value !== el) // On paste, the HTML may contain <div> instead of <p>
+        ) {
+            if (isFirstParagraph) {
+                isFirstParagraph = false;
+            }
+            else {
+                usedCharacters++;
+            }
+        }
+        current = it.next();
+    }
+    if (current.value !== nodeToFind) {
+        /** This situation can happen if the code is called while the selection is not currently on the element.
+         * In this case, we return 0 because we don't know the size of the text before the selection.
+         *
+         * A known occurrence is triggered since the introduction of commit d4663158 (PR #2038).
+         */
+        return 0;
+    }
+    else {
+        if (!current.value.hasChildNodes()) {
+            usedCharacters += nodeOffset;
+        }
+        else {
+            const children = [...current.value.childNodes].slice(0, nodeOffset);
+            usedCharacters += children.reduce((acc, child, index) => {
+                if (child.textContent !== null) {
+                    // need to account for paragraph nodes that implicitly add a new line
+                    // except for the last paragraph
+                    let chars = child.textContent.length;
+                    if (child.nodeName === "P" && index !== children.length - 1) {
+                        chars++;
+                    }
+                    return acc + chars;
+                }
+                else {
+                    return acc;
+                }
+            }, 0);
+        }
+    }
+    if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent === "") {
+        usedCharacters++;
+    }
+    return usedCharacters;
+}
 const letterRegex = /^[a-zA-Z]$/;
 /**
  * Transform a keyboard event into a shortcut string that represent this event. The letters keys will be uppercased.
@@ -33708,6 +33944,7 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   drawScoreChart: drawScoreChart,
   formatChartDatasetValue: formatChartDatasetValue,
   formatTickValue: formatTickValue,
+  getChartJSConstructor: getChartJSConstructor,
   getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
   getDefinedAxis: getDefinedAxis,
   getPieColors: getPieColors,
@@ -37591,6 +37828,9 @@ class GenericChartConfigPanel extends Component {
         this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
             dataSets: this.dataSeriesRanges,
         });
+        if (this.state.datasetDispatchResult.isSuccessful) {
+            this.dataSeriesRanges = this.env.model.getters.getChartDefinition(this.props.figureId).dataSets;
+        }
     }
     getDataSeriesRanges() {
         return this.dataSeriesRanges;
@@ -38273,7 +38513,7 @@ css /* scss */ `
   .o-font-size-editor {
     height: calc(100% - 4px);
     input.o-font-size {
-      outline-color: ${SELECTION_BORDER_COLOR};
+      outline: none;
       height: 20px;
       width: 23px;
     }
@@ -39886,6 +40126,10 @@ class ContentEditableHelper {
         if (currentStart === start && currentEnd === end) {
             return;
         }
+        if (selection.rangeCount === 0) {
+            const range = document.createRange();
+            selection.addRange(range);
+        }
         const currentRange = selection.getRangeAt(0);
         let range;
         if (this.el.contains(currentRange.startContainer)) {
@@ -39913,8 +40157,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);
+            }
         }
     }
     /**
@@ -40048,7 +40300,7 @@ class ContentEditableHelper {
         if (!focusedNode || !this.el.contains(focusedNode))
             return;
         const element = focusedNode instanceof HTMLElement ? focusedNode : focusedNode.parentElement;
-        element?.scrollIntoView({ block: "nearest" });
+        element?.scrollIntoView?.({ block: "nearest" });
     }
     /**
      * remove the current selection of the user
@@ -40068,100 +40320,7 @@ class ContentEditableHelper {
      * finds the indexes of the current selection.
      * */
     getCurrentSelection() {
-        let { startElement, endElement, startSelectionOffset, endSelectionOffset } = this.getStartAndEndSelection();
-        let startSizeBefore = this.findSelectionIndex(startElement, startSelectionOffset);
-        let endSizeBefore = this.findSelectionIndex(endElement, endSelectionOffset);
-        return {
-            start: startSizeBefore,
-            end: endSizeBefore,
-        };
-    }
-    /**
-     * Computes the text 'index' inside this.el based on the currently selected node and its offset.
-     * The selected node is either a Text node or an Element node.
-     *
-     * case 1 -Text node:
-     * the offset is the number of characters from the start of the node. We have to add this offset to the
-     * content length of all previous nodes.
-     *
-     * case 2 - Element node:
-     * the offset is the number of child nodes before the selected node. We have to add the content length of
-     * all the bnodes prior to the selected node as well as the content of the child node before the offset.
-     *
-     * See the MDN documentation for more details.
-     * https://developer.mozilla.org/en-US/docs/Web/API/Range/startOffset
-     * https://developer.mozilla.org/en-US/docs/Web/API/Range/endOffset
-     *
-     */
-    findSelectionIndex(nodeToFind, nodeOffset) {
-        let usedCharacters = 0;
-        let it = iterateChildren(this.el);
-        let current = it.next();
-        let isFirstParagraph = true;
-        while (!current.done && current.value !== nodeToFind) {
-            if (!current.value.hasChildNodes()) {
-                if (current.value.textContent) {
-                    usedCharacters += current.value.textContent.length;
-                }
-            }
-            // One new paragraph = one new line character, except for the first paragraph
-            if (current.value.nodeName === "P" ||
-                (current.value.nodeName === "DIV" && current.value !== this.el) // On paste, the HTML may contain <div> instead of <p>
-            ) {
-                if (isFirstParagraph) {
-                    isFirstParagraph = false;
-                }
-                else {
-                    usedCharacters++;
-                }
-            }
-            current = it.next();
-        }
-        if (current.value !== nodeToFind) {
-            /** This situation can happen if the code is called while the selection is not currently on the ContentEditableHelper.
-             * In this case, we return 0 because we don't know the size of the text before the selection.
-             *
-             * A known occurence is triggered since the introduction of commit d4663158 (PR #2038).
-             *
-             * FIXME: find a way to test eventhough the selection API is not available in jsDOM.
-             */
-            return 0;
-        }
-        else {
-            if (!current.value.hasChildNodes()) {
-                usedCharacters += nodeOffset;
-            }
-            else {
-                const children = [...current.value.childNodes].slice(0, nodeOffset);
-                usedCharacters += children.reduce((acc, child, index) => {
-                    if (child.textContent !== null) {
-                        // need to account for paragraph nodes that implicitely add a new line
-                        // except for the last paragraph
-                        let chars = child.textContent.length;
-                        if (child.nodeName === "P" && index !== children.length - 1) {
-                            chars++;
-                        }
-                        return acc + chars;
-                    }
-                    else {
-                        return acc;
-                    }
-                }, 0);
-            }
-        }
-        if (nodeToFind.nodeName === "P" && !isFirstParagraph && nodeToFind.textContent === "") {
-            usedCharacters++;
-        }
-        return usedCharacters;
-    }
-    getStartAndEndSelection() {
-        const selection = document.getSelection();
-        return {
-            startElement: selection.anchorNode || this.el,
-            startSelectionOffset: selection.anchorOffset,
-            endElement: selection.focusNode || this.el,
-            endSelectionOffset: selection.focusOffset,
-        };
+        return getCurrentSelection(this.el);
     }
     getText() {
         let text = "";
@@ -40311,8 +40470,7 @@ css /* scss */ `
     }
 
     .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
+      margin-top: 1px;
 
       .o-semi-bold {
         /* FIXME: to remove in favor of Bootstrap
@@ -40363,10 +40521,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) {
@@ -40390,13 +40549,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;
@@ -46333,9 +46508,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;
@@ -46391,29 +46564,33 @@ class PivotSidePanelStore extends SpreadsheetStore {
             this.applyUpdate();
         }
     }
-    isDynamicPivotInViewport() {
-        const sheetId = this.getters.getActiveSheetId();
-        for (const col of this.getters.getSheetViewVisibleCols()) {
-            for (const row of this.getters.getSheetViewVisibleRows()) {
-                const isDynamicPivot = this.getters.isSpillPivotFormula({ sheetId, col, row });
-                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;
@@ -53116,6 +53293,10 @@ class CellPlugin extends CorePlugin {
                 return this.checkValidations(cmd, this.checkCellOutOfSheet, this.checkUselessUpdateCell);
             case "CLEAR_CELL":
                 return this.checkValidations(cmd, this.checkCellOutOfSheet, this.checkUselessClearCell);
+            case "UPDATE_CELL_POSITION":
+                return !cmd.cellId || this.cells[cmd.sheetId]?.[cmd.cellId]
+                    ? "Success" /* CommandResult.Success */
+                    : "InvalidCellId" /* CommandResult.InvalidCellId */;
             default:
                 return "Success" /* CommandResult.Success */;
         }
@@ -53160,6 +53341,9 @@ class CellPlugin extends CorePlugin {
             case "DELETE_CONTENT":
                 this.clearZones(cmd.sheetId, cmd.target);
                 break;
+            case "DELETE_SHEET": {
+                this.history.update("cells", cmd.sheetId, undefined);
+            }
         }
     }
     clearZones(sheetId, zones) {
@@ -53950,6 +54134,9 @@ class ConditionalFormatPlugin extends CorePlugin {
     allowDispatch(cmd) {
         switch (cmd.type) {
             case "ADD_CONDITIONAL_FORMAT":
+                if (cmd.ranges.some((rangeData) => !this.getters.tryGetSheet(rangeData._sheetId))) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
                 return this.checkValidations(cmd, this.checkCFRule, this.checkEmptyRange, this.checkCFHasChanged);
             case "CHANGE_CONDITIONAL_FORMAT_PRIORITY":
                 return this.checkValidPriorityChange(cmd.cfId, cmd.delta, cmd.sheetId);
@@ -54366,8 +54553,17 @@ class DataValidationPlugin extends CorePlugin {
     allowDispatch(cmd) {
         switch (cmd.type) {
             case "ADD_DATA_VALIDATION_RULE":
+                if (!this.getters.tryGetSheet(cmd.sheetId)) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
+                if (cmd.ranges.some((rangeData) => !this.getters.tryGetSheet(rangeData._sheetId))) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
                 return this.checkValidations(cmd, this.chainValidations(this.checkEmptyRange, this.checkValidRange, this.checkCriterionTypeIsValid, this.checkCriterionHasValidNumberOfValues, this.checkCriterionValuesAreValid));
             case "REMOVE_DATA_VALIDATION_RULE":
+                if (!this.getters.tryGetSheet(cmd.sheetId)) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
                 if (!this.rules[cmd.sheetId].find((rule) => rule.id === cmd.id)) {
                     return "UnknownDataValidationRule" /* CommandResult.UnknownDataValidationRule */;
                 }
@@ -54594,6 +54790,7 @@ class DataValidationPlugin extends CorePlugin {
 class FigurePlugin extends CorePlugin {
     static getters = ["getFigures", "getFigure", "getFigureSheetId"];
     figures = {};
+    insertionOrders = []; // TODO use a list in master
     // ---------------------------------------------------------------------------
     // Command Handling
     // ---------------------------------------------------------------------------
@@ -54696,11 +54893,14 @@ class FigurePlugin extends CorePlugin {
     }
     addFigure(figure, sheetId) {
         this.history.update("figures", sheetId, figure.id, figure);
+        this.history.update("insertionOrders", this.insertionOrders.length, figure.id);
     }
     deleteSheet(sheetId) {
+        this.history.update("insertionOrders", this.insertionOrders.filter((id) => !this.figures[sheetId]?.[id]));
         this.history.update("figures", sheetId, undefined);
     }
     removeFigure(id, sheetId) {
+        this.history.update("insertionOrders", this.insertionOrders.filter((figureId) => figureId !== id));
         this.history.update("figures", sheetId, id, undefined);
     }
     checkFigureExists(sheetId, figureId) {
@@ -54719,7 +54919,14 @@ class FigurePlugin extends CorePlugin {
     // Getters
     // ---------------------------------------------------------------------------
     getFigures(sheetId) {
-        return Object.values(this.figures[sheetId] || {}).filter(isDefined);
+        const figures = [];
+        for (const figureId of this.insertionOrders) {
+            const figure = this.figures[sheetId]?.[figureId];
+            if (figure) {
+                figures.push(figure);
+            }
+        }
+        return figures;
     }
     getFigure(sheetId, figureId) {
         return this.figures[sheetId]?.[figureId];
@@ -54732,11 +54939,9 @@ class FigurePlugin extends CorePlugin {
     // ---------------------------------------------------------------------------
     import(data) {
         for (let sheet of data.sheets) {
-            const figures = {};
-            sheet.figures.forEach((figure) => {
-                figures[figure.id] = figure;
-            });
-            this.figures[sheet.id] = figures;
+            for (const figure of sheet.figures) {
+                this.addFigure(figure, sheet.id);
+            }
         }
     }
     export(data) {
@@ -56162,6 +56367,9 @@ class SheetPlugin extends CorePlugin {
             case "CREATE_SHEET": {
                 return this.checkValidations(cmd, this.checkSheetName, this.checkSheetPosition);
             }
+            case "DUPLICATE_SHEET": {
+                return this.sheets[cmd.sheetIdTo] ? "DuplicatedSheetId" /* CommandResult.DuplicatedSheetId */ : "Success" /* CommandResult.Success */;
+            }
             case "MOVE_SHEET":
                 try {
                     const currentIndex = this.orderedSheetIds.findIndex((id) => id === cmd.sheetId);
@@ -56973,6 +57181,10 @@ class SheetPlugin extends CorePlugin {
     checkZonesAreInSheet(cmd) {
         if (!("sheetId" in cmd))
             return "Success" /* CommandResult.Success */;
+        if ("ranges" in cmd &&
+            cmd.ranges.some((rangeData) => rangeData._sheetId !== "" && !this.getters.tryGetSheet(rangeData._sheetId))) {
+            return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+        }
         return this.checkZonesExistInSheet(cmd.sheetId, this.getCommandZones(cmd));
     }
 }
@@ -56981,6 +57193,7 @@ let nextTableId = 1;
 class TablePlugin extends CorePlugin {
     static getters = ["getCoreTable", "getCoreTables", "getCoreTableMatchingTopLeft"];
     tables = {};
+    insertionOrders = {};
     adaptRanges(applyChange, sheetId) {
         const sheetIds = sheetId ? [sheetId] : this.getters.getSheetIds();
         for (const sheetId of sheetIds) {
@@ -56992,6 +57205,9 @@ class TablePlugin extends CorePlugin {
     allowDispatch(cmd) {
         switch (cmd.type) {
             case "CREATE_TABLE":
+                if (cmd.ranges.some((rangeData) => !this.getters.tryGetSheet(rangeData._sheetId) || rangeData._sheetId !== cmd.sheetId)) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
                 const zones = cmd.ranges.map((rangeData) => this.getters.getRangeFromRangeData(rangeData).zone);
                 if (!areZonesContinuous(zones)) {
                     return "NonContinuousTargets" /* CommandResult.NonContinuousTargets */;
@@ -57022,11 +57238,13 @@ class TablePlugin extends CorePlugin {
         switch (cmd.type) {
             case "CREATE_SHEET":
                 this.history.update("tables", cmd.sheetId, {});
+                this.history.update("insertionOrders", cmd.sheetId, []);
                 break;
             case "DELETE_SHEET": {
                 const tables = { ...this.tables };
                 delete tables[cmd.sheetId];
                 this.history.update("tables", tables);
+                this.history.update("insertionOrders", cmd.sheetId, undefined);
                 break;
             }
             case "DUPLICATE_SHEET": {
@@ -57038,6 +57256,9 @@ class TablePlugin extends CorePlugin {
                             : this.copyStaticTableForSheet(cmd.sheetIdTo, table);
                 }
                 this.history.update("tables", cmd.sheetIdTo, newTables);
+                this.history.update("insertionOrders", cmd.sheetIdTo, [
+                    ...(this.insertionOrders[cmd.sheetId] ?? []),
+                ]);
                 break;
             }
             case "CREATE_TABLE": {
@@ -57051,6 +57272,10 @@ class TablePlugin extends CorePlugin {
                     ? this.createDynamicTable(id, union, config)
                     : this.createStaticTable(id, cmd.tableType, union, config);
                 this.history.update("tables", cmd.sheetId, newTable.id, newTable);
+                this.history.update("insertionOrders", cmd.sheetId, [
+                    ...(this.insertionOrders[cmd.sheetId] ?? []),
+                    newTable.id,
+                ]);
                 break;
             }
             case "REMOVE_TABLE": {
@@ -57061,6 +57286,7 @@ class TablePlugin extends CorePlugin {
                     }
                 }
                 this.history.update("tables", cmd.sheetId, tables);
+                this.history.update("insertionOrders", cmd.sheetId, this.insertionOrders[cmd.sheetId]?.filter((id) => id in tables));
                 break;
             }
             case "UPDATE_TABLE": {
@@ -57096,7 +57322,14 @@ class TablePlugin extends CorePlugin {
         }
     }
     getCoreTables(sheetId) {
-        return this.tables[sheetId] ? Object.values(this.tables[sheetId]).filter(isDefined) : [];
+        const tables = [];
+        for (const tableId of this.insertionOrders[sheetId] || []) {
+            const table = this.tables[sheetId][tableId];
+            if (table) {
+                tables.push(table);
+            }
+        }
+        return tables;
     }
     getCoreTable({ sheetId, col, row }) {
         return this.getCoreTables(sheetId).find((table) => isInside(col, row, table.range.zone));
@@ -57379,6 +57612,7 @@ class TablePlugin extends CorePlugin {
     // ---------------------------------------------------------------------------
     import(data) {
         for (const sheet of data.sheets) {
+            const tableIds = [];
             for (const tableData of sheet.tables || []) {
                 const uuid = `${nextTableId++}`;
                 const tableConfig = tableData.config || DEFAULT_TABLE_CONFIG;
@@ -57388,7 +57622,9 @@ class TablePlugin extends CorePlugin {
                     ? this.createDynamicTable(uuid, range, tableConfig)
                     : this.createStaticTable(uuid, tableType, range, tableConfig);
                 this.history.update("tables", sheet.id, table.id, table);
+                tableIds.push(table.id);
             }
+            this.history.update("insertionOrders", sheet.id, tableIds);
         }
     }
     export(data) {
@@ -57428,7 +57664,10 @@ class HeaderGroupingPlugin extends CorePlugin {
     allowDispatch(cmd) {
         switch (cmd.type) {
             case "GROUP_HEADERS": {
-                const { start, end } = cmd;
+                const { start, end, sheetId } = cmd;
+                if (!this.getters.tryGetSheet(sheetId)) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
                 if (!this.getters.doesHeadersExist(cmd.sheetId, cmd.dimension, [start, end])) {
                     return "InvalidHeaderGroupStartEnd" /* CommandResult.InvalidHeaderGroupStartEnd */;
                 }
@@ -57441,7 +57680,10 @@ class HeaderGroupingPlugin extends CorePlugin {
                 break;
             }
             case "UNGROUP_HEADERS": {
-                const { start, end } = cmd;
+                const { start, end, sheetId } = cmd;
+                if (!this.getters.tryGetSheet(sheetId)) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
                 if (!this.getters.doesHeadersExist(cmd.sheetId, cmd.dimension, [start, end])) {
                     return "InvalidHeaderGroupStartEnd" /* CommandResult.InvalidHeaderGroupStartEnd */;
                 }
@@ -57452,6 +57694,9 @@ class HeaderGroupingPlugin extends CorePlugin {
             }
             case "UNFOLD_HEADER_GROUP":
             case "FOLD_HEADER_GROUP":
+                if (!this.getters.tryGetSheet(cmd.sheetId)) {
+                    return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+                }
                 const group = this.findGroupWithStartEnd(cmd.sheetId, cmd.dimension, cmd.start, cmd.end);
                 if (!group) {
                     return "UnknownHeaderGroup" /* CommandResult.UnknownHeaderGroup */;
@@ -57852,6 +58097,9 @@ class PivotCorePlugin extends CorePlugin {
                 return this.checkDuplicatedMeasureIds(cmd.pivot);
             }
             case "UPDATE_PIVOT": {
+                if (!(cmd.pivotId in this.pivots)) {
+                    return "PivotIdNotFound" /* CommandResult.PivotIdNotFound */;
+                }
                 if (deepEquals(cmd.pivot, this.pivots[cmd.pivotId]?.definition)) {
                     return "NoChanges" /* CommandResult.NoChanges */;
                 }
@@ -57868,6 +58116,8 @@ class PivotCorePlugin extends CorePlugin {
                     return "EmptyName" /* CommandResult.EmptyName */;
                 }
                 break;
+            case "REMOVE_PIVOT":
+            case "DUPLICATE_PIVOT":
             case "INSERT_PIVOT": {
                 if (!(cmd.pivotId in this.pivots)) {
                     return "PivotIdNotFound" /* CommandResult.PivotIdNotFound */;
@@ -57917,7 +58167,7 @@ class PivotCorePlugin extends CorePlugin {
                 break;
             }
             case "UPDATE_PIVOT": {
-                this.history.update("pivots", cmd.pivotId, "definition", cmd.pivot);
+                this.history.update("pivots", cmd.pivotId, "definition", deepCopy(cmd.pivot));
                 this.compileCalculatedMeasures(cmd.pivot.measures);
                 break;
             }
@@ -57988,7 +58238,7 @@ class PivotCorePlugin extends CorePlugin {
     // Private
     // -------------------------------------------------------------------------
     addPivot(pivotId, pivot, formulaId = this.nextFormulaId.toString()) {
-        this.history.update("pivots", pivotId, { definition: pivot, formulaId });
+        this.history.update("pivots", pivotId, { definition: deepCopy(pivot), formulaId });
         this.compileCalculatedMeasures(pivot.measures);
         this.history.update("formulaIds", formulaId, pivotId);
         this.history.update("nextFormulaId", this.nextFormulaId + 1);
@@ -59574,6 +59824,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 = {};
@@ -60176,6 +60430,7 @@ class EvaluationPlugin extends UIPlugin {
     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);
@@ -60187,8 +60442,9 @@ class EvaluationPlugin extends UIPlugin {
             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
@@ -60211,7 +60467,11 @@ class EvaluationPlugin extends UIPlugin {
                 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);
+            }
         }
     }
     /**
@@ -62418,7 +62678,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.
@@ -62894,6 +63154,9 @@ function updateChartRangesTransformation(toTransform, executed) {
     };
 }
 function createSheetTransformation(toTransform, executed) {
+    if (toTransform.sheetId === executed.sheetId) {
+        toTransform = { ...toTransform, sheetId: `${toTransform.sheetId}~` };
+    }
     if (toTransform.name === executed.name) {
         return {
             ...toTransform,
@@ -63537,15 +63800,6 @@ class Session extends EventBus {
         }
         this.sendPendingMessage();
     }
-    dropPendingRevision(revisionId) {
-        this.revisions.drop(revisionId);
-        const revisionIds = this.pendingMessages
-            .filter((message) => message.type === "REMOTE_REVISION")
-            .map((message) => message.nextRevisionId);
-        this.trigger("pending-revisions-dropped", { revisionIds });
-        this.waitingAck = false;
-        this.waitingUndoRedoAck = false;
-    }
     /**
      * Send the next pending message
      */
@@ -63554,15 +63808,14 @@ class Session extends EventBus {
         if (!message)
             return;
         if (message.type === "REMOTE_REVISION") {
-            const revision = this.revisions.get(message.nextRevisionId);
+            let revision = this.revisions.get(message.nextRevisionId);
             if (revision.commands.length === 0) {
                 /**
-                 * The command is empty, we have to drop all the next local revisions
+                 * The command is empty, we have to rebase all the next local revisions
                  * to avoid issues with undo/redo
                  */
-                this.dropPendingRevision(revision.id);
-                this.pendingMessages = [];
-                return;
+                this.revisions.rebase(revision.id);
+                revision = this.revisions.get(message.nextRevisionId);
             }
             message = {
                 ...message,
@@ -63598,18 +63851,16 @@ class Session extends EventBus {
             case "REVISION_UNDONE": {
                 this.waitingAck = false;
                 this.pendingMessages = this.pendingMessages.filter((msg) => msg.nextRevisionId !== message.nextRevisionId);
-                const pendingRemoteRevisions = this.pendingMessages.filter((message) => message.type === "REMOTE_REVISION");
-                const firstTransformedRevisionIndex = pendingRemoteRevisions.findIndex((message) => !deepEquals(message.commands, this.revisions.get(message.nextRevisionId).commands));
-                if (firstTransformedRevisionIndex !== -1) {
+                const firstPendingRevisionId = this.pendingMessages.findIndex((message) => message.type === "REMOTE_REVISION");
+                if (firstPendingRevisionId !== -1) {
                     /**
                      * Some revisions undergo transformations that may cause issues with
                      * undo/redo if the transformation is destructive (we don't get back
                      * the original command by transforming it with the inverse).
-                     * To prevent these problems, we must discard all subsequent local
+                     * To prevent these problems, we must rebase all subsequent local
                      * revisions.
                      */
-                    this.dropPendingRevision(this.pendingMessages[firstTransformedRevisionIndex].nextRevisionId);
-                    this.pendingMessages = this.pendingMessages.slice(0, firstTransformedRevisionIndex);
+                    this.revisions.rebase(this.pendingMessages[firstPendingRevisionId].nextRevisionId);
                 }
                 this.serverRevisionId = message.nextRevisionId;
                 this.processedRevisions.add(message.nextRevisionId);
@@ -64737,6 +64988,10 @@ class SheetUIPlugin extends UIPlugin {
      */
     checkZonesAreInSheet(cmd) {
         const sheetId = "sheetId" in cmd ? cmd.sheetId : this.getters.tryGetActiveSheetId();
+        if ("ranges" in cmd &&
+            cmd.ranges.some((rangeData) => !this.getters.tryGetSheet(rangeData._sheetId))) {
+            return "InvalidSheetId" /* CommandResult.InvalidSheetId */;
+        }
         const zones = this.getters.getCommandZones(cmd);
         if (!sheetId && zones.length > 0) {
             return "NoActiveSheet" /* CommandResult.NoActiveSheet */;
@@ -65291,7 +65546,6 @@ class HistoryPlugin extends UIPlugin {
         super(config);
         this.session = config.session;
         this.session.on("new-local-state-update", this, this.onNewLocalStateUpdate);
-        this.session.on("pending-revisions-dropped", this, ({ revisionIds }) => this.drop(revisionIds));
         this.session.on("snapshot", this, () => {
             this.undoStack = [];
             this.redoStack = [];
@@ -65361,10 +65615,6 @@ class HistoryPlugin extends UIPlugin {
         const lastNonRedoRevision = this.getPossibleRevisionToRepeat();
         return canRepeatRevision(lastNonRedoRevision);
     }
-    drop(revisionIds) {
-        this.undoStack = this.undoStack.filter((id) => !revisionIds.includes(id));
-        this.redoStack = [];
-    }
     onNewLocalStateUpdate({ id }) {
         this.undoStack.push(id);
         this.redoStack = [];
@@ -68068,7 +68318,9 @@ class HeaderPositionsUIPlugin extends UIPlugin {
             case "UNGROUP_HEADERS":
             case "GROUP_HEADERS":
             case "CREATE_SHEET":
-                this.headerPositions[cmd.sheetId] = this.computeHeaderPositionsOfSheet(cmd.sheetId);
+                if (this.getters.tryGetSheet(cmd.sheetId)) {
+                    this.headerPositions[cmd.sheetId] = this.computeHeaderPositionsOfSheet(cmd.sheetId);
+                }
                 break;
             case "DUPLICATE_SHEET":
                 this.headerPositions[cmd.sheetIdTo] = deepCopy(this.headerPositions[cmd.sheetId]);
@@ -68076,12 +68328,14 @@ class HeaderPositionsUIPlugin extends UIPlugin {
         }
     }
     finalize() {
-        if (this.isDirty) {
-            for (const sheetId of this.getters.getSheetIds()) {
+        for (const sheetId of this.getters.getSheetIds()) {
+            // sheets can be created without this plugin being aware of it
+            // in concurrent situations.
+            if (this.isDirty || !this.headerPositions[sheetId]) {
                 this.headerPositions[sheetId] = this.computeHeaderPositionsOfSheet(sheetId);
             }
-            this.isDirty = false;
         }
+        this.isDirty = false;
     }
     /**
      * Returns the size, start and end coordinates of a column on an unfolded sheet
@@ -71502,9 +71756,16 @@ class SelectiveHistory {
         this.fastForward();
         this.insert(redoId, this.buildEmpty(redoId), insertAfter);
     }
-    drop(operationId) {
+    rebase(operationId) {
+        const operation = this.get(operationId);
+        const execution = [...this.tree.execution(this.HEAD_BRANCH).startAfter(operationId)];
         this.revertBefore(operationId);
+        const baseId = this.HEAD_OPERATION.id;
         this.tree.drop(operationId);
+        this.insert(operationId, operation, baseId);
+        for (const { operation } of execution) {
+            this.insert(operation.id, operation.data, this.HEAD_OPERATION.id);
+        }
     }
     /**
      * Revert the state as it was *before* the given operation was executed.
@@ -72947,7 +73208,7 @@ function numberRef(reference) {
   `;
 }
 
-function addFormula(formula, value) {
+function addFormula(formula, value, formulaSpillRange) {
     if (!formula) {
         return { attrs: [], node: escapeXml `` };
     }
@@ -72955,10 +73216,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) {
@@ -73948,7 +74216,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;
                     }
@@ -74234,6 +74502,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",
@@ -74242,6 +74534,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;
 }
 /**
@@ -74615,6 +74911,11 @@ class Model extends EventBus {
             dispatch: (command) => {
                 const result = this.checkDispatchAllowed(command);
                 if (!result.isSuccessful) {
+                    // core views plugins need to be invalidated
+                    this.dispatchToHandlers(this.coreHandlers, {
+                        type: "UNDO",
+                        commands: [command],
+                    });
                     return;
                 }
                 this.isReplayingCommand = true;
@@ -75121,6 +75422,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, 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.1.8";
-__info__.date = "2025-02-14T08:42:08.322Z";
-__info__.hash = "02682f4";
+__info__.version = "18.1.10";
+__info__.date = "2025-03-07T10:34:41.861Z";
+__info__.hash = "31e4526";