@odoo/o-spreadsheet 18.2.1 → 18.2.2

package/dist/o-spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.2.1
- * @date 2025-02-25T06:03:13.262Z
- * @hash 3b4b5c9
+ * @version 18.2.2
+ * @date 2025-03-07T10:41:04.411Z
+ * @hash f567932
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -6100,8 +6100,9 @@ function spreadRange(getters, dataSets) {
         if (zone.bottom !== zone.top && zone.left != zone.right) {
             if (zone.right) {
                 for (let j = zone.left; j <= zone.right; ++j) {
+                    const datasetOptions = j === zone.left ? dataSet : { yAxisId: dataSet.yAxisId };
                     postProcessedRanges.push({
-                        ...dataSet,
+                        ...datasetOptions,
                         dataRange: `${sheetPrefix}${zoneToXc({
                             left: j,
                             right: j,
@@ -6113,8 +6114,9 @@ function spreadRange(getters, dataSets) {
             }
             else {
                 for (let j = zone.top; j <= zone.bottom; ++j) {
+                    const datasetOptions = j === zone.top ? dataSet : { yAxisId: dataSet.yAxisId };
                     postProcessedRanges.push({
-                        ...dataSet,
+                        ...datasetOptions,
                         dataRange: `${sheetPrefix}${zoneToXc({
                             left: zone.left,
                             right: zone.right,
@@ -9532,150 +9534,6 @@ class ComposerFocusStore extends SpreadsheetStore {
     }
 }
 
-/**
- * This file is largely inspired by owl 1.
- * `css` tag has been removed from owl 2 without workaround to manage css.
- * So, the solution was to import the behavior of owl 1 directly in our
- * codebase, with one difference: the css is added to the sheet as soon as the
- * css tag is executed. In owl 1, the css was added as soon as a Component was
- * created for the first time.
- */
-const STYLESHEETS = {};
-let nextId = 0;
-/**
- * CSS tag helper for defining inline stylesheets.  With this, one can simply define
- * an inline stylesheet with just the following code:
- * ```js
- *     css`.component-a { color: red; }`;
- * ```
- */
-function css(strings, ...args) {
-    const name = `__sheet__${nextId++}`;
-    const value = String.raw(strings, ...args);
-    registerSheet(name, value);
-    activateSheet(name);
-    return name;
-}
-function processSheet(str) {
-    const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-    const selectorStack = [];
-    const parts = [];
-    let rules = [];
-    function generateSelector(stackIndex, parentSelector) {
-        const parts = [];
-        for (const selector of selectorStack[stackIndex]) {
-            let part = (parentSelector && parentSelector + " " + selector) || selector;
-            if (part.includes("&")) {
-                part = selector.replace(/&/g, parentSelector || "");
-            }
-            if (stackIndex < selectorStack.length - 1) {
-                part = generateSelector(stackIndex + 1, part);
-            }
-            parts.push(part);
-        }
-        return parts.join(", ");
-    }
-    function generateRules() {
-        if (rules.length) {
-            parts.push(generateSelector(0) + " {");
-            parts.push(...rules);
-            parts.push("}");
-            rules = [];
-        }
-    }
-    while (tokens.length) {
-        let token = tokens.shift();
-        if (token === "}") {
-            generateRules();
-            selectorStack.pop();
-        }
-        else {
-            if (tokens[0] === "{") {
-                generateRules();
-                selectorStack.push(token.split(/\s*,\s*/));
-                tokens.shift();
-            }
-            if (tokens[0] === ";") {
-                rules.push("  " + token + ";");
-            }
-        }
-    }
-    return parts.join("\n");
-}
-function registerSheet(id, css) {
-    const sheet = document.createElement("style");
-    sheet.textContent = processSheet(css);
-    STYLESHEETS[id] = sheet;
-}
-function activateSheet(id) {
-    const sheet = STYLESHEETS[id];
-    sheet.setAttribute("component", id);
-    document.head.appendChild(sheet);
-}
-function getTextDecoration({ strikethrough, underline, }) {
-    if (!strikethrough && !underline) {
-        return "none";
-    }
-    return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
-}
-/**
- * Convert the cell style to CSS properties.
- */
-function cellStyleToCss(style) {
-    const attributes = cellTextStyleToCss(style);
-    if (!style)
-        return attributes;
-    if (style.fillColor) {
-        attributes["background"] = style.fillColor;
-    }
-    return attributes;
-}
-/**
- * Convert the cell text style to CSS properties.
- */
-function cellTextStyleToCss(style) {
-    const attributes = {};
-    if (!style)
-        return attributes;
-    if (style.bold) {
-        attributes["font-weight"] = "bold";
-    }
-    if (style.italic) {
-        attributes["font-style"] = "italic";
-    }
-    if (style.strikethrough || style.underline) {
-        let decoration = style.strikethrough ? "line-through" : "";
-        decoration = style.underline ? decoration + " underline" : decoration;
-        attributes["text-decoration"] = decoration;
-    }
-    if (style.textColor) {
-        attributes["color"] = style.textColor;
-    }
-    return attributes;
-}
-/**
- * Transform CSS properties into a CSS string.
- */
-function cssPropertiesToCss(attributes) {
-    let styleStr = "";
-    for (const attName in attributes) {
-        if (!attributes[attName]) {
-            continue;
-        }
-        styleStr += `${attName}:${attributes[attName]}; `;
-    }
-    return styleStr;
-}
-function getElementMargins(el) {
-    const style = window.getComputedStyle(el);
-    return {
-        top: parseInt(style.marginTop, 10) || 0,
-        bottom: parseInt(style.marginBottom, 10) || 0,
-        left: parseInt(style.marginLeft, 10) || 0,
-        right: parseInt(style.marginRight, 10) || 0,
-    };
-}
-
 const TREND_LINE_XAXIS_ID = "x1";
 /**
  * This file contains helpers that are common to different charts (mainly
@@ -10220,79 +10078,341 @@ function getNextNonEmptyBar(bars, startIndex) {
     return bars.find((bar, i) => i > startIndex && bar.height !== 0);
 }
 
-window.Chart?.register(waterfallLinesPlugin);
-window.Chart?.register(chartShowValuesPlugin);
-css /* scss */ `
-  .o-spreadsheet {
-    .o-chart-custom-tooltip {
-      font-size: 12px;
-      background-color: #fff;
-      z-index: ${ComponentsImportance.FigureTooltip};
+const GAUGE_PADDING_SIDE = 30;
+const GAUGE_PADDING_TOP = 10;
+const GAUGE_PADDING_BOTTOM = 20;
+const GAUGE_LABELS_FONT_SIZE = 12;
+const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
+const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
+const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
+const GAUGE_TITLE_SECTION_HEIGHT = 25;
+function drawGaugeChart(canvas, runtime) {
+    const canvasBoundingRect = canvas.getBoundingClientRect();
+    canvas.width = canvasBoundingRect.width;
+    canvas.height = canvasBoundingRect.height;
+    const ctx = canvas.getContext("2d");
+    const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
+    drawBackground(ctx, config);
+    drawGauge(ctx, config);
+    drawInflectionValues(ctx, config);
+    drawLabels(ctx, config);
+    drawTitle(ctx, config);
+}
+function drawGauge(ctx, config) {
+    ctx.save();
+    const gauge = config.gauge;
+    const arcCenterX = gauge.rect.x + gauge.rect.width / 2;
+    const arcCenterY = gauge.rect.y + gauge.rect.height;
+    const arcRadius = gauge.rect.height - gauge.arcWidth / 2;
+    if (arcRadius < 0) {
+        return;
     }
-  }
-`;
-class ChartJsComponent extends Component {
-    static template = "o-spreadsheet-ChartJsComponent";
-    static props = {
-        figure: Object,
+    const gaugeAngle = gauge.percentage === 1 ? 0 : Math.PI * (1 + gauge.percentage);
+    // Gauge background
+    ctx.strokeStyle = GAUGE_BACKGROUND_COLOR;
+    ctx.beginPath();
+    ctx.lineWidth = gauge.arcWidth;
+    ctx.arc(arcCenterX, arcCenterY, arcRadius, gaugeAngle, 0);
+    ctx.stroke();
+    // Gauge value
+    ctx.strokeStyle = gauge.color;
+    ctx.beginPath();
+    ctx.arc(arcCenterX, arcCenterY, arcRadius, Math.PI, gaugeAngle);
+    ctx.stroke();
+    ctx.restore();
+}
+function drawBackground(ctx, config) {
+    ctx.save();
+    ctx.fillStyle = config.backgroundColor;
+    ctx.fillRect(0, 0, config.width, config.height);
+    ctx.restore();
+}
+function drawLabels(ctx, config) {
+    for (const label of [config.minLabel, config.maxLabel, config.gaugeValue]) {
+        ctx.save();
+        ctx.textAlign = "center";
+        ctx.fillStyle = label.color;
+        ctx.font = `${label.fontSize}px ${DEFAULT_FONT}`;
+        ctx.fillText(label.label, label.textPosition.x, label.textPosition.y);
+        ctx.restore();
+    }
+}
+function drawInflectionValues(ctx, config) {
+    const { x: rectX, y: rectY, width, height } = config.gauge.rect;
+    for (const inflectionValue of config.inflectionValues) {
+        ctx.save();
+        ctx.translate(rectX + width / 2 - 0.5, rectY + height - 0.5); // -0.5 for sharper lines. see RendererPlugin.drawBorders comment
+        ctx.rotate(Math.PI / 2 - inflectionValue.rotation);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = chartMutedFontColor(config.backgroundColor) + "aa";
+        ctx.beginPath();
+        ctx.moveTo(0, -(height - config.gauge.arcWidth));
+        ctx.lineTo(0, -height - 3);
+        ctx.stroke();
+        ctx.textAlign = "center";
+        ctx.font = `${inflectionValue.fontSize}px ${DEFAULT_FONT}`;
+        ctx.fillStyle = inflectionValue.color;
+        const textY = -height - GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN - inflectionValue.offset;
+        ctx.fillText(inflectionValue.label, 0, textY);
+        ctx.restore();
+    }
+}
+function drawTitle(ctx, config) {
+    ctx.save();
+    const title = config.title;
+    ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = title.color;
+    ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
+    ctx.restore();
+}
+function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
+    const maxValue = runtime.maxValue;
+    const minValue = runtime.minValue;
+    const gaugeValue = runtime.gaugeValue;
+    const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
+    const gaugeArcWidth = gaugeRect.width / 6;
+    const gaugePercentage = gaugeValue
+        ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
+        : 0;
+    const gaugeValuePosition = {
+        x: boundingRect.width / 2,
+        y: gaugeRect.y + gaugeRect.height - gaugeRect.height / 12,
     };
-    canvas = useRef("graphContainer");
-    chart;
-    currentRuntime;
-    get background() {
-        return this.chartRuntime.background;
+    let gaugeValueFontSize = GAUGE_DEFAULT_VALUE_FONT_SIZE;
+    // Scale down the font size if the gaugeRect is too small
+    if (gaugeRect.height < 300) {
+        gaugeValueFontSize = gaugeValueFontSize * (gaugeRect.height / 300);
     }
-    get canvasStyle() {
-        return `background-color: ${this.background}`;
+    // Scale down the font size if the text is too long
+    const maxTextWidth = gaugeRect.width / 2;
+    const gaugeLabel = gaugeValue?.label || "-";
+    if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
+        gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
     }
-    get chartRuntime() {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
-        if (!("chartJsConfig" in runtime)) {
-            throw new Error("Unsupported chart runtime");
-        }
-        return runtime;
+    const minLabelPosition = {
+        x: gaugeRect.x + gaugeArcWidth / 2,
+        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
+    };
+    const maxLabelPosition = {
+        x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
+        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
+    };
+    const textColor = chartMutedFontColor(runtime.background);
+    const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
+    let x = 0, titleWidth = 0, titleHeight = 0;
+    if (runtime.title.text) {
+        ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "px"));
     }
-    setup() {
-        onMounted(() => {
-            const runtime = this.chartRuntime;
-            this.currentRuntime = runtime;
-            // Note: chartJS modify the runtime in place, so it's important to give it a copy
-            this.createChart(deepCopy(runtime.chartJsConfig));
-        });
-        onWillUnmount(() => this.chart?.destroy());
-        useEffect(() => {
-            const runtime = this.chartRuntime;
-            if (runtime !== this.currentRuntime) {
-                if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
-                    this.chart?.destroy();
-                    this.createChart(deepCopy(runtime.chartJsConfig));
-                }
-                else {
-                    this.updateChartJs(deepCopy(runtime));
-                }
-                this.currentRuntime = runtime;
-            }
+    switch (runtime.title.align) {
+        case "right":
+            x = boundingRect.width - titleWidth - CHART_PADDING$1;
+            break;
+        case "center":
+            x = (boundingRect.width - titleWidth) / 2;
+            break;
+        case "left":
+        default:
+            x = CHART_PADDING$1;
+            break;
+    }
+    return {
+        width: boundingRect.width,
+        height: boundingRect.height,
+        title: {
+            label: runtime.title.text ?? "",
+            fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
+            textPosition: {
+                x,
+                y: CHART_PADDING_TOP + titleHeight / 2,
+            },
+            color: runtime.title.color ?? textColor,
+            bold: runtime.title.bold,
+            italic: runtime.title.italic,
+        },
+        backgroundColor: runtime.background,
+        gauge: {
+            rect: gaugeRect,
+            arcWidth: gaugeArcWidth,
+            percentage: clip(gaugePercentage, 0, 1),
+            color: getGaugeColor(runtime),
+        },
+        inflectionValues,
+        gaugeValue: {
+            label: gaugeLabel,
+            textPosition: gaugeValuePosition,
+            fontSize: gaugeValueFontSize,
+            color: textColor,
+        },
+        minLabel: {
+            label: runtime.minValue.label,
+            textPosition: minLabelPosition,
+            fontSize: GAUGE_LABELS_FONT_SIZE,
+            color: textColor,
+        },
+        maxLabel: {
+            label: runtime.maxValue.label,
+            textPosition: maxLabelPosition,
+            fontSize: GAUGE_LABELS_FONT_SIZE,
+            color: textColor,
+        },
+    };
+}
+/**
+ * Get the rectangle in which the gauge will be drawn, based on the bounding rectangle of the canvas and leaving
+ * space for the title and labels.
+ */
+function getGaugeRect(boundingRect, title) {
+    const titleHeight = title ? GAUGE_TITLE_SECTION_HEIGHT : 0;
+    const drawHeight = boundingRect.height - GAUGE_PADDING_BOTTOM - titleHeight - GAUGE_PADDING_TOP;
+    const drawWidth = boundingRect.width - GAUGE_PADDING_SIDE * 2;
+    let gaugeWidth;
+    let gaugeHeight;
+    if (drawWidth > 2 * drawHeight) {
+        gaugeWidth = 2 * drawHeight;
+        gaugeHeight = drawHeight;
+    }
+    else {
+        gaugeWidth = drawWidth;
+        gaugeHeight = drawWidth / 2;
+    }
+    const gaugeX = GAUGE_PADDING_SIDE + (drawWidth - gaugeWidth) / 2;
+    const gaugeY = titleHeight + GAUGE_PADDING_TOP + (drawHeight - gaugeHeight) / 2;
+    return {
+        x: gaugeX,
+        y: gaugeY,
+        width: gaugeWidth,
+        height: gaugeHeight,
+    };
+}
+/**
+ * Get the infliction values of the gauge, and where to draw them (the angle from the center of the gauge at which they are drawn).
+ *
+ * Also compute an offset for the text so that it doesn't overlap with other text.
+ */
+function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
+    const maxValue = runtime.maxValue;
+    const minValue = runtime.minValue;
+    const gaugeCircleCenter = {
+        x: gaugeRect.x + gaugeRect.width / 2,
+        y: gaugeRect.y + gaugeRect.height,
+    };
+    const textStyle = { fontSize: GAUGE_LABELS_FONT_SIZE };
+    const inflectionValues = [];
+    const inflectionValuesTextRects = [];
+    for (const inflectionValue of runtime.inflectionValues) {
+        const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
+        const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
+        const angle = Math.PI - Math.PI * percentage;
+        const textRect = getRectangleTangentToCircle(angle, // angle between X axis and the point where the rectangle is tangent to the circle
+        gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, // radius of the gauge circle + margin below text
+        gaugeCircleCenter.x, // center of the gauge circle
+        gaugeCircleCenter.y, // center of the gauge circle
+        labelWidth + 2, // width of the text + some margin
+        GAUGE_LABELS_FONT_SIZE // height of the text
+        );
+        let offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect))
+            ? GAUGE_LABELS_FONT_SIZE
+            : 0;
+        inflectionValuesTextRects.push(textRect);
+        inflectionValues.push({
+            rotation: angle,
+            label: inflectionValue.label,
+            fontSize: GAUGE_LABELS_FONT_SIZE,
+            color: textColor,
+            offset,
         });
     }
-    createChart(chartData) {
-        const canvas = this.canvas.el;
-        const ctx = canvas.getContext("2d");
-        this.chart = new window.Chart(ctx, chartData);
+    return inflectionValues;
+}
+function getGaugeColor(runtime) {
+    const gaugeValue = runtime.gaugeValue?.value;
+    if (gaugeValue === undefined) {
+        return GAUGE_BACKGROUND_COLOR;
     }
-    updateChartJs(chartRuntime) {
-        const chartData = chartRuntime.chartJsConfig;
-        if (chartData.data && chartData.data.datasets) {
-            this.chart.data = chartData.data;
-            if (chartData.options?.plugins?.title) {
-                this.chart.config.options.plugins.title = chartData.options.plugins.title;
-            }
+    for (let i = 0; i < runtime.inflectionValues.length; i++) {
+        const inflectionValue = runtime.inflectionValues[i];
+        if (inflectionValue.operator === "<" && gaugeValue < inflectionValue.value) {
+            return runtime.colors[i];
         }
-        else {
-            this.chart.data.datasets = [];
+        else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
+            return runtime.colors[i];
         }
-        this.chart.config.options = chartData.options;
-        this.chart.update();
     }
+    return runtime.colors.at(-1);
+}
+function getSegmentsOfRectangle(rectangle) {
+    return [
+        { start: rectangle.topLeft, end: rectangle.topRight },
+        { start: rectangle.topRight, end: rectangle.bottomRight },
+        { start: rectangle.bottomRight, end: rectangle.bottomLeft },
+        { start: rectangle.bottomLeft, end: rectangle.topLeft },
+    ];
+}
+/**
+ * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
+ * is not handled.
+ */
+function doSegmentIntersect(segment1, segment2) {
+    const A = segment1.start;
+    const B = segment1.end;
+    const C = segment2.start;
+    const D = segment2.end;
+    /**
+     * Line segment intersection algorithm
+     * https://bryceboe.com/2006/10/23/line-segment-intersection-algorithm/
+     */
+    function ccw(a, b, c) {
+        return (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x);
+    }
+    return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
+}
+function doRectanglesIntersect(rect1, rect2) {
+    const segments1 = getSegmentsOfRectangle(rect1);
+    const segments2 = getSegmentsOfRectangle(rect2);
+    for (const segment1 of segments1) {
+        for (const segment2 of segments2) {
+            if (doSegmentIntersect(segment1, segment2)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ *  Get the rectangle that is tangent to a circle at a given angle.
+ *
+ * @param angle angle between X axis and the point where the rectangle is tangent to the circle
+ */
+function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
+    const x = cos * radius;
+    const y = sin * radius;
+    // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
+    const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
+    const y2 = cos * (rectWidth / 2);
+    const bottomRight = {
+        x: x + x2 + circleCenterX,
+        y: circleCenterY - (y - y2),
+    };
+    const bottomLeft = {
+        x: x - x2 + circleCenterX,
+        y: circleCenterY - (y + y2),
+    };
+    // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
+    const xp = cos * (radius + rectHeight);
+    const yp = sin * (radius + rectHeight);
+    const topLeft = {
+        x: xp - x2 + circleCenterX,
+        y: circleCenterY - (yp + y2),
+    };
+    const topRight = {
+        x: xp + x2 + circleCenterX,
+        y: circleCenterY - (yp - y2),
+    };
+    return { bottomLeft, bottomRight, topRight, topLeft };
 }
 
 /**
@@ -10874,6 +10994,299 @@ class ScorecardChartConfigBuilder {
     }
 }
 
+const CHART_COMMON_OPTIONS = {
+    // https://www.chartjs.org/docs/latest/general/responsive.html
+    responsive: true, // will resize when its container is resized
+    maintainAspectRatio: false, // doesn't maintain the aspect ratio (width/height =2 by default) so the user has the choice of the exact layout
+    elements: {
+        line: {
+            fill: false, // do not fill the area under line charts
+        },
+        point: {
+            hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
+        },
+    },
+    animation: false,
+};
+function chartToImage(runtime, figure, type) {
+    // wrap the canvas in a div with a fixed size because chart.js would
+    // fill the whole page otherwise
+    const div = document.createElement("div");
+    div.style.width = `${figure.width}px`;
+    div.style.height = `${figure.height}px`;
+    const canvas = document.createElement("canvas");
+    div.append(canvas);
+    canvas.setAttribute("width", figure.width.toString());
+    canvas.setAttribute("height", figure.height.toString());
+    // we have to add the canvas to the DOM otherwise it won't be rendered
+    document.body.append(div);
+    if ("chartJsConfig" in runtime) {
+        const config = deepCopy(runtime.chartJsConfig);
+        config.plugins = [backgroundColorChartJSPlugin];
+        const Chart = getChartJSConstructor();
+        const chart = new Chart(canvas, config);
+        const imgContent = chart.toBase64Image();
+        chart.destroy();
+        div.remove();
+        return imgContent;
+    }
+    else if (type === "scorecard") {
+        const design = getScorecardConfiguration(figure, runtime);
+        drawScoreChart(design, canvas);
+        const imgContent = canvas.toDataURL();
+        div.remove();
+        return imgContent;
+    }
+    else if (type === "gauge") {
+        drawGaugeChart(canvas, runtime);
+        const imgContent = canvas.toDataURL();
+        div.remove();
+        return imgContent;
+    }
+    return undefined;
+}
+/**
+ * Custom chart.js plugin to set the background color of the canvas
+ * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
+ */
+const backgroundColorChartJSPlugin = {
+    id: "customCanvasBackgroundColor",
+    beforeDraw: (chart) => {
+        const { ctx } = chart;
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, chart.width, chart.height);
+        ctx.restore();
+    },
+};
+/** Return window.Chart, making sure all our extensions are loaded in ChartJS */
+function getChartJSConstructor() {
+    if (window.Chart && !window.Chart?.registry.plugins.get("chartShowValuesPlugin")) {
+        window.Chart.register(chartShowValuesPlugin);
+        window.Chart.register(waterfallLinesPlugin);
+    }
+    return window.Chart;
+}
+
+/**
+ * This file is largely inspired by owl 1.
+ * `css` tag has been removed from owl 2 without workaround to manage css.
+ * So, the solution was to import the behavior of owl 1 directly in our
+ * codebase, with one difference: the css is added to the sheet as soon as the
+ * css tag is executed. In owl 1, the css was added as soon as a Component was
+ * created for the first time.
+ */
+const STYLESHEETS = {};
+let nextId = 0;
+/**
+ * CSS tag helper for defining inline stylesheets.  With this, one can simply define
+ * an inline stylesheet with just the following code:
+ * ```js
+ *     css`.component-a { color: red; }`;
+ * ```
+ */
+function css(strings, ...args) {
+    const name = `__sheet__${nextId++}`;
+    const value = String.raw(strings, ...args);
+    registerSheet(name, value);
+    activateSheet(name);
+    return name;
+}
+function processSheet(str) {
+    const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
+    const selectorStack = [];
+    const parts = [];
+    let rules = [];
+    function generateSelector(stackIndex, parentSelector) {
+        const parts = [];
+        for (const selector of selectorStack[stackIndex]) {
+            let part = (parentSelector && parentSelector + " " + selector) || selector;
+            if (part.includes("&")) {
+                part = selector.replace(/&/g, parentSelector || "");
+            }
+            if (stackIndex < selectorStack.length - 1) {
+                part = generateSelector(stackIndex + 1, part);
+            }
+            parts.push(part);
+        }
+        return parts.join(", ");
+    }
+    function generateRules() {
+        if (rules.length) {
+            parts.push(generateSelector(0) + " {");
+            parts.push(...rules);
+            parts.push("}");
+            rules = [];
+        }
+    }
+    while (tokens.length) {
+        let token = tokens.shift();
+        if (token === "}") {
+            generateRules();
+            selectorStack.pop();
+        }
+        else {
+            if (tokens[0] === "{") {
+                generateRules();
+                selectorStack.push(token.split(/\s*,\s*/));
+                tokens.shift();
+            }
+            if (tokens[0] === ";") {
+                rules.push("  " + token + ";");
+            }
+        }
+    }
+    return parts.join("\n");
+}
+function registerSheet(id, css) {
+    const sheet = document.createElement("style");
+    sheet.textContent = processSheet(css);
+    STYLESHEETS[id] = sheet;
+}
+function activateSheet(id) {
+    const sheet = STYLESHEETS[id];
+    sheet.setAttribute("component", id);
+    document.head.appendChild(sheet);
+}
+function getTextDecoration({ strikethrough, underline, }) {
+    if (!strikethrough && !underline) {
+        return "none";
+    }
+    return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+}
+/**
+ * Convert the cell style to CSS properties.
+ */
+function cellStyleToCss(style) {
+    const attributes = cellTextStyleToCss(style);
+    if (!style)
+        return attributes;
+    if (style.fillColor) {
+        attributes["background"] = style.fillColor;
+    }
+    return attributes;
+}
+/**
+ * Convert the cell text style to CSS properties.
+ */
+function cellTextStyleToCss(style) {
+    const attributes = {};
+    if (!style)
+        return attributes;
+    if (style.bold) {
+        attributes["font-weight"] = "bold";
+    }
+    if (style.italic) {
+        attributes["font-style"] = "italic";
+    }
+    if (style.strikethrough || style.underline) {
+        let decoration = style.strikethrough ? "line-through" : "";
+        decoration = style.underline ? decoration + " underline" : decoration;
+        attributes["text-decoration"] = decoration;
+    }
+    if (style.textColor) {
+        attributes["color"] = style.textColor;
+    }
+    return attributes;
+}
+/**
+ * Transform CSS properties into a CSS string.
+ */
+function cssPropertiesToCss(attributes) {
+    let styleStr = "";
+    for (const attName in attributes) {
+        if (!attributes[attName]) {
+            continue;
+        }
+        styleStr += `${attName}:${attributes[attName]}; `;
+    }
+    return styleStr;
+}
+function getElementMargins(el) {
+    const style = window.getComputedStyle(el);
+    return {
+        top: parseInt(style.marginTop, 10) || 0,
+        bottom: parseInt(style.marginBottom, 10) || 0,
+        left: parseInt(style.marginLeft, 10) || 0,
+        right: parseInt(style.marginRight, 10) || 0,
+    };
+}
+
+css /* scss */ `
+  .o-spreadsheet {
+    .o-chart-custom-tooltip {
+      font-size: 12px;
+      background-color: #fff;
+      z-index: ${ComponentsImportance.FigureTooltip};
+    }
+  }
+`;
+class ChartJsComponent extends Component {
+    static template = "o-spreadsheet-ChartJsComponent";
+    static props = {
+        figure: Object,
+    };
+    canvas = useRef("graphContainer");
+    chart;
+    currentRuntime;
+    get background() {
+        return this.chartRuntime.background;
+    }
+    get canvasStyle() {
+        return `background-color: ${this.background}`;
+    }
+    get chartRuntime() {
+        const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
+        if (!("chartJsConfig" in runtime)) {
+            throw new Error("Unsupported chart runtime");
+        }
+        return runtime;
+    }
+    setup() {
+        onMounted(() => {
+            const runtime = this.chartRuntime;
+            this.currentRuntime = runtime;
+            // Note: chartJS modify the runtime in place, so it's important to give it a copy
+            this.createChart(deepCopy(runtime.chartJsConfig));
+        });
+        onWillUnmount(() => this.chart?.destroy());
+        useEffect(() => {
+            const runtime = this.chartRuntime;
+            if (runtime !== this.currentRuntime) {
+                if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
+                    this.chart?.destroy();
+                    this.createChart(deepCopy(runtime.chartJsConfig));
+                }
+                else {
+                    this.updateChartJs(deepCopy(runtime));
+                }
+                this.currentRuntime = runtime;
+            }
+        });
+    }
+    createChart(chartData) {
+        const canvas = this.canvas.el;
+        const ctx = canvas.getContext("2d");
+        const Chart = getChartJSConstructor();
+        this.chart = new Chart(ctx, chartData);
+    }
+    updateChartJs(chartRuntime) {
+        const chartData = chartRuntime.chartJsConfig;
+        if (chartData.data && chartData.data.datasets) {
+            this.chart.data = chartData.data;
+            if (chartData.options?.plugins?.title) {
+                this.chart.config.options.plugins.title = chartData.options.plugins.title;
+            }
+        }
+        else {
+            this.chart.data.datasets = [];
+        }
+        this.chart.config.options = chartData.options;
+        this.chart.update();
+    }
+}
+
 class ScorecardChart extends Component {
     static template = "o-spreadsheet-ScorecardChart";
     static props = {
@@ -22326,7 +22739,7 @@ autofillRulesRegistry
     condition: (cell) => !cell.isFormula &&
         evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.text &&
         alphaNumericValueRegExp.test(cell.content),
-    generateRule: (cell, cells) => {
+    generateRule: (cell, cells, direction) => {
         const numberPostfix = parseInt(cell.content.match(numberPostfixRegExp)[0]);
         const prefix = cell.content.match(stringPrefixRegExp)[0];
         const numberPostfixLength = cell.content.length - prefix.length;
@@ -22334,7 +22747,10 @@ autofillRulesRegistry
             alphaNumericValueRegExp.test(evaluatedCell.value)) // get consecutive alphanumeric cells, no matter what the prefix is
             .filter((cell) => prefix === (cell.value ?? "").toString().match(stringPrefixRegExp)[0])
             .map((cell) => parseInt((cell.value ?? "").toString().match(numberPostfixRegExp)[0]));
-        const increment = calculateIncrementBasedOnGroup(group);
+        let increment = calculateIncrementBasedOnGroup(group);
+        if (["up", "left"].includes(direction) && group.length === 1) {
+            increment = -increment;
+        }
         return {
             type: "ALPHANUMERIC_INCREMENT_MODIFIER",
             prefix,
@@ -22397,10 +22813,13 @@ autofillRulesRegistry
     .add("increment_number", {
     condition: (cell) => !cell.isFormula &&
         evaluateLiteral(cell, { locale: DEFAULT_LOCALE }).type === CellValueType.number,
-    generateRule: (cell, cells) => {
+    generateRule: (cell, cells, direction) => {
         const group = getGroup(cell, cells, (evaluatedCell) => evaluatedCell.type === CellValueType.number &&
             !isDateTimeFormat(evaluatedCell.format || "")).map((cell) => Number(cell.value));
-        const increment = calculateIncrementBasedOnGroup(group);
+        let increment = calculateIncrementBasedOnGroup(group);
+        if (["up", "left"].includes(direction) && group.length === 1) {
+            increment = -increment;
+        }
         const evaluation = evaluateLiteral(cell, { locale: DEFAULT_LOCALE });
         return {
             type: "INCREMENT_MODIFIER",
@@ -22444,343 +22863,6 @@ function getDateIntervals(dates) {
 
 const cellPopoverRegistry = new Registry();
 
-const GAUGE_PADDING_SIDE = 30;
-const GAUGE_PADDING_TOP = 10;
-const GAUGE_PADDING_BOTTOM = 20;
-const GAUGE_LABELS_FONT_SIZE = 12;
-const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
-const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
-const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
-const GAUGE_TITLE_SECTION_HEIGHT = 25;
-function drawGaugeChart(canvas, runtime) {
-    const canvasBoundingRect = canvas.getBoundingClientRect();
-    canvas.width = canvasBoundingRect.width;
-    canvas.height = canvasBoundingRect.height;
-    const ctx = canvas.getContext("2d");
-    const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
-    drawBackground(ctx, config);
-    drawGauge(ctx, config);
-    drawInflectionValues(ctx, config);
-    drawLabels(ctx, config);
-    drawTitle(ctx, config);
-}
-function drawGauge(ctx, config) {
-    ctx.save();
-    const gauge = config.gauge;
-    const arcCenterX = gauge.rect.x + gauge.rect.width / 2;
-    const arcCenterY = gauge.rect.y + gauge.rect.height;
-    const arcRadius = gauge.rect.height - gauge.arcWidth / 2;
-    if (arcRadius < 0) {
-        return;
-    }
-    const gaugeAngle = gauge.percentage === 1 ? 0 : Math.PI * (1 + gauge.percentage);
-    // Gauge background
-    ctx.strokeStyle = GAUGE_BACKGROUND_COLOR;
-    ctx.beginPath();
-    ctx.lineWidth = gauge.arcWidth;
-    ctx.arc(arcCenterX, arcCenterY, arcRadius, gaugeAngle, 0);
-    ctx.stroke();
-    // Gauge value
-    ctx.strokeStyle = gauge.color;
-    ctx.beginPath();
-    ctx.arc(arcCenterX, arcCenterY, arcRadius, Math.PI, gaugeAngle);
-    ctx.stroke();
-    ctx.restore();
-}
-function drawBackground(ctx, config) {
-    ctx.save();
-    ctx.fillStyle = config.backgroundColor;
-    ctx.fillRect(0, 0, config.width, config.height);
-    ctx.restore();
-}
-function drawLabels(ctx, config) {
-    for (const label of [config.minLabel, config.maxLabel, config.gaugeValue]) {
-        ctx.save();
-        ctx.textAlign = "center";
-        ctx.fillStyle = label.color;
-        ctx.font = `${label.fontSize}px ${DEFAULT_FONT}`;
-        ctx.fillText(label.label, label.textPosition.x, label.textPosition.y);
-        ctx.restore();
-    }
-}
-function drawInflectionValues(ctx, config) {
-    const { x: rectX, y: rectY, width, height } = config.gauge.rect;
-    for (const inflectionValue of config.inflectionValues) {
-        ctx.save();
-        ctx.translate(rectX + width / 2 - 0.5, rectY + height - 0.5); // -0.5 for sharper lines. see RendererPlugin.drawBorders comment
-        ctx.rotate(Math.PI / 2 - inflectionValue.rotation);
-        ctx.lineWidth = 2;
-        ctx.strokeStyle = chartMutedFontColor(config.backgroundColor) + "aa";
-        ctx.beginPath();
-        ctx.moveTo(0, -(height - config.gauge.arcWidth));
-        ctx.lineTo(0, -height - 3);
-        ctx.stroke();
-        ctx.textAlign = "center";
-        ctx.font = `${inflectionValue.fontSize}px ${DEFAULT_FONT}`;
-        ctx.fillStyle = inflectionValue.color;
-        const textY = -height - GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN - inflectionValue.offset;
-        ctx.fillText(inflectionValue.label, 0, textY);
-        ctx.restore();
-    }
-}
-function drawTitle(ctx, config) {
-    ctx.save();
-    const title = config.title;
-    ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
-    ctx.textBaseline = "middle";
-    ctx.fillStyle = title.color;
-    ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
-    ctx.restore();
-}
-function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
-    const maxValue = runtime.maxValue;
-    const minValue = runtime.minValue;
-    const gaugeValue = runtime.gaugeValue;
-    const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
-    const gaugeArcWidth = gaugeRect.width / 6;
-    const gaugePercentage = gaugeValue
-        ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
-        : 0;
-    const gaugeValuePosition = {
-        x: boundingRect.width / 2,
-        y: gaugeRect.y + gaugeRect.height - gaugeRect.height / 12,
-    };
-    let gaugeValueFontSize = GAUGE_DEFAULT_VALUE_FONT_SIZE;
-    // Scale down the font size if the gaugeRect is too small
-    if (gaugeRect.height < 300) {
-        gaugeValueFontSize = gaugeValueFontSize * (gaugeRect.height / 300);
-    }
-    // Scale down the font size if the text is too long
-    const maxTextWidth = gaugeRect.width / 2;
-    const gaugeLabel = gaugeValue?.label || "-";
-    if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
-        gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
-    }
-    const minLabelPosition = {
-        x: gaugeRect.x + gaugeArcWidth / 2,
-        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
-    };
-    const maxLabelPosition = {
-        x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
-        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
-    };
-    const textColor = chartMutedFontColor(runtime.background);
-    const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
-    let x = 0, titleWidth = 0, titleHeight = 0;
-    if (runtime.title.text) {
-        ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "px"));
-    }
-    switch (runtime.title.align) {
-        case "right":
-            x = boundingRect.width - titleWidth - CHART_PADDING$1;
-            break;
-        case "center":
-            x = (boundingRect.width - titleWidth) / 2;
-            break;
-        case "left":
-        default:
-            x = CHART_PADDING$1;
-            break;
-    }
-    return {
-        width: boundingRect.width,
-        height: boundingRect.height,
-        title: {
-            label: runtime.title.text ?? "",
-            fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
-            textPosition: {
-                x,
-                y: CHART_PADDING_TOP + titleHeight / 2,
-            },
-            color: runtime.title.color ?? textColor,
-            bold: runtime.title.bold,
-            italic: runtime.title.italic,
-        },
-        backgroundColor: runtime.background,
-        gauge: {
-            rect: gaugeRect,
-            arcWidth: gaugeArcWidth,
-            percentage: clip(gaugePercentage, 0, 1),
-            color: getGaugeColor(runtime),
-        },
-        inflectionValues,
-        gaugeValue: {
-            label: gaugeLabel,
-            textPosition: gaugeValuePosition,
-            fontSize: gaugeValueFontSize,
-            color: textColor,
-        },
-        minLabel: {
-            label: runtime.minValue.label,
-            textPosition: minLabelPosition,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-        },
-        maxLabel: {
-            label: runtime.maxValue.label,
-            textPosition: maxLabelPosition,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-        },
-    };
-}
-/**
- * Get the rectangle in which the gauge will be drawn, based on the bounding rectangle of the canvas and leaving
- * space for the title and labels.
- */
-function getGaugeRect(boundingRect, title) {
-    const titleHeight = title ? GAUGE_TITLE_SECTION_HEIGHT : 0;
-    const drawHeight = boundingRect.height - GAUGE_PADDING_BOTTOM - titleHeight - GAUGE_PADDING_TOP;
-    const drawWidth = boundingRect.width - GAUGE_PADDING_SIDE * 2;
-    let gaugeWidth;
-    let gaugeHeight;
-    if (drawWidth > 2 * drawHeight) {
-        gaugeWidth = 2 * drawHeight;
-        gaugeHeight = drawHeight;
-    }
-    else {
-        gaugeWidth = drawWidth;
-        gaugeHeight = drawWidth / 2;
-    }
-    const gaugeX = GAUGE_PADDING_SIDE + (drawWidth - gaugeWidth) / 2;
-    const gaugeY = titleHeight + GAUGE_PADDING_TOP + (drawHeight - gaugeHeight) / 2;
-    return {
-        x: gaugeX,
-        y: gaugeY,
-        width: gaugeWidth,
-        height: gaugeHeight,
-    };
-}
-/**
- * Get the infliction values of the gauge, and where to draw them (the angle from the center of the gauge at which they are drawn).
- *
- * Also compute an offset for the text so that it doesn't overlap with other text.
- */
-function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
-    const maxValue = runtime.maxValue;
-    const minValue = runtime.minValue;
-    const gaugeCircleCenter = {
-        x: gaugeRect.x + gaugeRect.width / 2,
-        y: gaugeRect.y + gaugeRect.height,
-    };
-    const textStyle = { fontSize: GAUGE_LABELS_FONT_SIZE };
-    const inflectionValues = [];
-    const inflectionValuesTextRects = [];
-    for (const inflectionValue of runtime.inflectionValues) {
-        const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
-        const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
-        const angle = Math.PI - Math.PI * percentage;
-        const textRect = getRectangleTangentToCircle(angle, // angle between X axis and the point where the rectangle is tangent to the circle
-        gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, // radius of the gauge circle + margin below text
-        gaugeCircleCenter.x, // center of the gauge circle
-        gaugeCircleCenter.y, // center of the gauge circle
-        labelWidth + 2, // width of the text + some margin
-        GAUGE_LABELS_FONT_SIZE // height of the text
-        );
-        let offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect))
-            ? GAUGE_LABELS_FONT_SIZE
-            : 0;
-        inflectionValuesTextRects.push(textRect);
-        inflectionValues.push({
-            rotation: angle,
-            label: inflectionValue.label,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-            offset,
-        });
-    }
-    return inflectionValues;
-}
-function getGaugeColor(runtime) {
-    const gaugeValue = runtime.gaugeValue?.value;
-    if (gaugeValue === undefined) {
-        return GAUGE_BACKGROUND_COLOR;
-    }
-    for (let i = 0; i < runtime.inflectionValues.length; i++) {
-        const inflectionValue = runtime.inflectionValues[i];
-        if (inflectionValue.operator === "<" && gaugeValue < inflectionValue.value) {
-            return runtime.colors[i];
-        }
-        else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
-            return runtime.colors[i];
-        }
-    }
-    return runtime.colors.at(-1);
-}
-function getSegmentsOfRectangle(rectangle) {
-    return [
-        { start: rectangle.topLeft, end: rectangle.topRight },
-        { start: rectangle.topRight, end: rectangle.bottomRight },
-        { start: rectangle.bottomRight, end: rectangle.bottomLeft },
-        { start: rectangle.bottomLeft, end: rectangle.topLeft },
-    ];
-}
-/**
- * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
- * is not handled.
- */
-function doSegmentIntersect(segment1, segment2) {
-    const A = segment1.start;
-    const B = segment1.end;
-    const C = segment2.start;
-    const D = segment2.end;
-    /**
-     * Line segment intersection algorithm
-     * https://bryceboe.com/2006/10/23/line-segment-intersection-algorithm/
-     */
-    function ccw(a, b, c) {
-        return (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x);
-    }
-    return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
-}
-function doRectanglesIntersect(rect1, rect2) {
-    const segments1 = getSegmentsOfRectangle(rect1);
-    const segments2 = getSegmentsOfRectangle(rect2);
-    for (const segment1 of segments1) {
-        for (const segment2 of segments2) {
-            if (doSegmentIntersect(segment1, segment2)) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-/**
- *  Get the rectangle that is tangent to a circle at a given angle.
- *
- * @param angle angle between X axis and the point where the rectangle is tangent to the circle
- */
-function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
-    const x = cos * radius;
-    const y = sin * radius;
-    // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
-    const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
-    const y2 = cos * (rectWidth / 2);
-    const bottomRight = {
-        x: x + x2 + circleCenterX,
-        y: circleCenterY - (y - y2),
-    };
-    const bottomLeft = {
-        x: x - x2 + circleCenterX,
-        y: circleCenterY - (y + y2),
-    };
-    // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
-    const xp = cos * (radius + rectHeight);
-    const yp = sin * (radius + rectHeight);
-    const topLeft = {
-        x: xp - x2 + circleCenterX,
-        y: circleCenterY - (yp + y2),
-    };
-    const topRight = {
-        x: xp + x2 + circleCenterX,
-        y: circleCenterY - (yp - y2),
-    };
-    return { bottomLeft, bottomRight, topRight, topLeft };
-}
-
 class GaugeChartComponent extends Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     canvas = useRef("chartContainer");
@@ -22813,72 +22895,6 @@ function toXlsxHexColor(color) {
     return color;
 }
 
-const CHART_COMMON_OPTIONS = {
-    // https://www.chartjs.org/docs/latest/general/responsive.html
-    responsive: true, // will resize when its container is resized
-    maintainAspectRatio: false, // doesn't maintain the aspect ratio (width/height =2 by default) so the user has the choice of the exact layout
-    elements: {
-        line: {
-            fill: false, // do not fill the area under line charts
-        },
-        point: {
-            hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
-        },
-    },
-    animation: false,
-};
-function chartToImage(runtime, figure, type) {
-    // wrap the canvas in a div with a fixed size because chart.js would
-    // fill the whole page otherwise
-    const div = document.createElement("div");
-    div.style.width = `${figure.width}px`;
-    div.style.height = `${figure.height}px`;
-    const canvas = document.createElement("canvas");
-    div.append(canvas);
-    canvas.setAttribute("width", figure.width.toString());
-    canvas.setAttribute("height", figure.height.toString());
-    // we have to add the canvas to the DOM otherwise it won't be rendered
-    document.body.append(div);
-    if ("chartJsConfig" in runtime) {
-        const config = deepCopy(runtime.chartJsConfig);
-        config.plugins = [backgroundColorChartJSPlugin];
-        const chart = new window.Chart(canvas, config);
-        const imgContent = chart.toBase64Image();
-        chart.destroy();
-        div.remove();
-        return imgContent;
-    }
-    else if (type === "scorecard") {
-        const design = getScorecardConfiguration(figure, runtime);
-        drawScoreChart(design, canvas);
-        const imgContent = canvas.toDataURL();
-        div.remove();
-        return imgContent;
-    }
-    else if (type === "gauge") {
-        drawGaugeChart(canvas, runtime);
-        const imgContent = canvas.toDataURL();
-        div.remove();
-        return imgContent;
-    }
-    return undefined;
-}
-/**
- * Custom chart.js plugin to set the background color of the canvas
- * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
- */
-const backgroundColorChartJSPlugin = {
-    id: "customCanvasBackgroundColor",
-    beforeDraw: (chart) => {
-        const { ctx } = chart;
-        ctx.save();
-        ctx.globalCompositeOperation = "destination-over";
-        ctx.fillStyle = "#ffffff";
-        ctx.fillRect(0, 0, chart.width, chart.height);
-        ctx.restore();
-    },
-};
-
 /**
  * Represent a raw XML string
  */
@@ -22944,6 +22960,7 @@ const CONTENT_TYPES = {
     macroEnabledTemplateWorkbook: "application/vnd.ms-excel.template.macroEnabled.main+xml",
     excelAddInWorkbook: "application/vnd.ms-excel.addin.macroEnabled.main+xml",
     sheet: "application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml",
+    metadata: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheetMetadata+xml",
     sharedStrings: "application/vnd.openxmlformats-officedocument.spreadsheetml.sharedStrings+xml",
     styles: "application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml",
     drawing: "application/vnd.openxmlformats-officedocument.drawing+xml",
@@ -22956,6 +22973,7 @@ const CONTENT_TYPES = {
 const XLSX_RELATION_TYPE = {
     document: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument",
     sheet: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet",
+    metadata: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/sheetMetadata",
     sharedStrings: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/sharedStrings",
     styles: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/styles",
     drawing: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/drawing",
@@ -22965,6 +22983,7 @@ const XLSX_RELATION_TYPE = {
     hyperlink: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink",
     image: "http://schemas.openxmlformats.org/officeDocument/2006/relationships/image",
 };
+const ARRAY_FORMULA_URI = "bdbb8cdc-fa1e-496e-a857-3c3f30c029c3";
 const RELATIONSHIP_NSR = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
 const HEIGHT_FACTOR = 0.75; // 100px => 75 u
 /**
@@ -25386,29 +25405,34 @@ function convertPivotTableConfig(pivotTable) {
  * In all the sheets, replace the table-only references in the formula cells with standard references.
  */
 function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
-    for (let sheet of convertedSheets) {
-        const tables = xlsxSheets.find((s) => s.sheetName === sheet.name).tables;
+    for (let tableSheet of convertedSheets) {
+        const tables = xlsxSheets.find((s) => s.sheetName === tableSheet.name).tables;
         for (let table of tables) {
             const tabRef = table.name + "[";
-            for (let position of positions(toZone(table.ref))) {
-                const xc = toXC(position.col, position.row);
-                let cellContent = sheet.cells[xc];
-                if (cellContent?.startsWith("=")) {
-                    let refIndex;
-                    while ((refIndex = cellContent.indexOf(tabRef)) !== -1) {
-                        let reference = cellContent.slice(refIndex + tabRef.length);
-                        // Expression can either be tableName[colName] or tableName[[#This Row], [colName]]
-                        let endIndex = reference.indexOf("]");
-                        if (reference.startsWith(`[`)) {
-                            endIndex = reference.indexOf("]", endIndex + 1);
-                            endIndex = reference.indexOf("]", endIndex + 1);
+            for (let sheet of convertedSheets) {
+                for (let xc in sheet.cells) {
+                    const cell = sheet.cells[xc];
+                    let cellContent = sheet.cells[xc];
+                    if (cell && cellContent && cellContent.startsWith("=")) {
+                        let refIndex;
+                        while ((refIndex = cellContent.indexOf(tabRef)) !== -1) {
+                            let endIndex = refIndex + tabRef.length;
+                            let openBrackets = 1;
+                            while (openBrackets > 0 && endIndex < cellContent.length) {
+                                if (cellContent[endIndex] === "[") {
+                                    openBrackets++;
+                                }
+                                else if (cellContent[endIndex] === "]") {
+                                    openBrackets--;
+                                }
+                                endIndex++;
+                            }
+                            let reference = cellContent.slice(refIndex + tabRef.length, endIndex - 1);
+                            const sheetPrefix = tableSheet.id === sheet.id ? "" : tableSheet.name + "!";
+                            const convertedRef = convertTableReference(sheetPrefix, reference, table, xc);
+                            cellContent =
+                                cellContent.slice(0, refIndex) + convertedRef + cellContent.slice(endIndex);
                         }
-                        reference = reference.slice(0, endIndex);
-                        const convertedRef = convertTableReference(reference, table, xc);
-                        cellContent =
-                            cellContent.slice(0, refIndex) +
-                                convertedRef +
-                                cellContent.slice(tabRef.length + refIndex + endIndex + 1);
                     }
                     sheet.cells[xc] = cellContent;
                 }
@@ -25417,11 +25441,17 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
     }
 }
 /**
- * Convert table-specific references in formulas into standard references.
+ * Convert table-specific references in formulas into standard references. A table reference is composed of columns names,
+ * and of keywords determining the rows of the table to reference.
  *
  * A reference in a table can have the form (only the part between brackets should be given to this function):
  *  - tableName[colName] : reference to the whole column "colName"
+ *  - tableName[#keyword] : reference to the whatever row the keyword refers to
  *  - tableName[[#keyword], [colName]] : reference to some of the element(s) of the column colName
+ *  - tableName[[#keyword], [colName]:[col2Name]] : reference to some of the element(s) of the columns colName to col2Name
+ *  - tableName[[#keyword1], [#keyword2], [colName]] : reference to all the rows referenced by the keywords in the column colName
+ *  - tableName[[#keyword1], [colName], [#keyword2]]: the keywords and colName can be in any order
+ *
  *
  * The available keywords are :
  * - #All : all the column (including totals)
@@ -25429,58 +25459,109 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
  * - #Headers : only the header of the column
  * - #Totals : only the totals of the column
  * - #This Row : only the element in the same row as the cell
+ *
+ * Note that the only valid combination of multiple keywords are #Data + #Totals and #Headers + #Data.
  */
-function convertTableReference(expr, table, cellXc) {
-    const refElements = expr.split(",");
+function convertTableReference(sheetPrefix, expr, table, cellXc) {
+    // TODO: Ideally we'd want to make a real tokenizer, this simple approach won't work if for example the column name
+    // contain # or , characters. But that's probably an edge case that we can ignore for now.
+    const parts = expr.split(",").map((part) => part.trim());
     const tableZone = toZone(table.ref);
-    const refZone = { ...tableZone };
-    let isReferencedZoneValid = true;
-    // Single column reference
-    if (refElements.length === 1) {
-        const colRelativeIndex = table.cols.findIndex((col) => col.name === refElements[0]);
-        refZone.left = refZone.right = colRelativeIndex + tableZone.left;
-        if (table.headerRowCount) {
-            refZone.top += table.headerRowCount;
-        }
-        if (table.totalsRowCount) {
-            refZone.bottom -= 1;
+    const colIndexes = [];
+    const rowIndexes = [];
+    const foundKeywords = [];
+    for (const part of parts) {
+        if (removeBrackets(part).startsWith("#")) {
+            const keyWord = removeBrackets(part);
+            foundKeywords.push(keyWord);
+            switch (keyWord) {
+                case "#All":
+                    rowIndexes.push(tableZone.top, tableZone.bottom);
+                    break;
+                case "#Data":
+                    const top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
+                    const bottom = table.totalsRowCount
+                        ? tableZone.bottom - table.totalsRowCount
+                        : tableZone.bottom;
+                    rowIndexes.push(top, bottom);
+                    break;
+                case "#This Row":
+                    rowIndexes.push(toCartesian(cellXc).row);
+                    break;
+                case "#Headers":
+                    if (!table.headerRowCount) {
+                        return CellErrorType.InvalidReference;
+                    }
+                    rowIndexes.push(tableZone.top);
+                    break;
+                case "#Totals":
+                    if (!table.totalsRowCount) {
+                        return CellErrorType.InvalidReference;
+                    }
+                    rowIndexes.push(tableZone.bottom);
+                    break;
+            }
         }
-    }
-    // Other references
-    else {
-        switch (refElements[0].slice(1, refElements[0].length - 1)) {
-            case "#All":
-                refZone.top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
-                refZone.bottom = tableZone.bottom;
-                break;
-            case "#Data":
-                refZone.top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
-                refZone.bottom = table.totalsRowCount ? tableZone.bottom + 1 : tableZone.bottom;
-                break;
-            case "#This Row":
-                refZone.top = refZone.bottom = toCartesian(cellXc).row;
-                break;
-            case "#Headers":
-                refZone.top = refZone.bottom = tableZone.top;
-                if (!table.headerRowCount) {
-                    isReferencedZoneValid = false;
-                }
-                break;
-            case "#Totals":
-                refZone.top = refZone.bottom = tableZone.bottom;
-                if (!table.totalsRowCount) {
-                    isReferencedZoneValid = false;
+        else {
+            const columns = part
+                .split(":")
+                .map((part) => part.trim())
+                .map(removeBrackets);
+            if (colIndexes.length) {
+                return CellErrorType.InvalidReference;
+            }
+            const colRelativeIndex = table.cols.findIndex((col) => col.name === columns[0]);
+            if (colRelativeIndex === -1) {
+                return CellErrorType.InvalidReference;
+            }
+            colIndexes.push(colRelativeIndex + tableZone.left);
+            if (columns[1]) {
+                const colRelativeIndex2 = table.cols.findIndex((col) => col.name === columns[1]);
+                if (colRelativeIndex2 === -1) {
+                    return CellErrorType.InvalidReference;
                 }
-                break;
+                colIndexes.push(colRelativeIndex2 + tableZone.left);
+            }
         }
-        const colRef = refElements[1].slice(1, refElements[1].length - 1);
-        const colRelativeIndex = table.cols.findIndex((col) => col.name === colRef);
-        refZone.left = refZone.right = colRelativeIndex + tableZone.left;
     }
-    if (!isReferencedZoneValid) {
+    if (!areKeywordsCompatible(foundKeywords)) {
         return CellErrorType.InvalidReference;
     }
-    return refZone.top !== refZone.bottom ? zoneToXc(refZone) : toXC(refZone.left, refZone.top);
+    if (rowIndexes.length === 0) {
+        const top = table.headerRowCount ? tableZone.top + table.headerRowCount : tableZone.top;
+        const bottom = table.totalsRowCount
+            ? tableZone.bottom - table.totalsRowCount
+            : tableZone.bottom;
+        rowIndexes.push(top, bottom);
+    }
+    if (colIndexes.length === 0) {
+        colIndexes.push(tableZone.left, tableZone.right);
+    }
+    const refZone = {
+        top: Math.min(...rowIndexes),
+        left: Math.min(...colIndexes),
+        bottom: Math.max(...rowIndexes),
+        right: Math.max(...colIndexes),
+    };
+    return sheetPrefix + zoneToXc(refZone);
+}
+function removeBrackets(str) {
+    return str.startsWith("[") && str.endsWith("]") ? str.slice(1, str.length - 1) : str;
+}
+function areKeywordsCompatible(keywords) {
+    if (keywords.length < 2) {
+        return true;
+    }
+    else if (keywords.length > 2) {
+        return false;
+    }
+    else if (keywords.includes("#Data") && keywords.includes("#Totals")) {
+        return true;
+    }
+    else if (keywords.includes("#Headers") && keywords.includes("#Data")) {
+        return true;
+    }
+    return false;
 }
 
 // -------------------------------------
@@ -28648,11 +28729,12 @@ function canBeLinearChart(definition, dataSets, labelRange, getters) {
 }
 let missingTimeAdapterAlreadyWarned = false;
 function isLuxonTimeAdapterInstalled() {
-    if (!window.Chart) {
+    const Chart = getChartJSConstructor();
+    if (!Chart) {
         return false;
     }
     // @ts-ignore
-    const adapter = new window.Chart._adapters._date({});
+    const adapter = new Chart._adapters._date({});
     const isInstalled = adapter._id === "luxon";
     if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
         missingTimeAdapterAlreadyWarned = true;
@@ -32506,10 +32588,6 @@ class Popover extends Component {
             this.currentDisplayValue = newDisplay;
             if (!anchor)
                 return;
-            el.style.top = "";
-            el.style.left = "";
-            el.style["max-height"] = "";
-            el.style["max-width"] = "";
             const propsMaxSize = { width: this.props.maxWidth, height: this.props.maxHeight };
             let elDims = {
                 width: el.getBoundingClientRect().width,
@@ -34061,6 +34139,7 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
   formatChartDatasetValue: formatChartDatasetValue,
   formatTickValue: formatTickValue,
+  getChartJSConstructor: getChartJSConstructor,
   getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
   getDefinedAxis: getDefinedAxis,
   getPieColors: getPieColors,
@@ -37861,6 +37940,11 @@ class SelectionInputStore extends SpreadsheetStore {
     }
     updateColors(colors) {
         this.colors = colors;
+        const colorGenerator = new ColorGenerator(this.ranges.length, this.colors);
+        this.ranges = this.ranges.map((range) => ({
+            ...range,
+            color: colorGenerator.next(),
+        }));
     }
     confirm() {
         for (const range of this.selectionInputs) {
@@ -37895,12 +37979,11 @@ class SelectionInputStore extends SpreadsheetStore {
      * e.g. ["A1", "Sheet2!B3", "E12"]
      */
     get selectionInputs() {
-        const generator = new ColorGenerator(this.ranges.length, this.colors);
         return this.ranges.map((input, index) => Object.assign({}, input, {
             color: this.hasMainFocus &&
                 this.focusedRangeIndex !== null &&
                 this.getters.isRangeValid(input.xc)
-                ? generator.next()
+                ? input.color
                 : null,
             isFocused: this.hasMainFocus && this.focusedRangeIndex === index,
             isValidRange: input.xc === "" || this.getters.isRangeValid(input.xc),
@@ -38170,10 +38253,10 @@ class SelectionInput extends Component {
                 if (originalIndex === finalIndex) {
                     return;
                 }
-                const draggedItems = [...draggableIds];
-                draggedItems.splice(originalIndex, 1);
-                draggedItems.splice(finalIndex, 0, rangeId);
-                this.props.onSelectionReordered?.(this.store.selectionInputs.map((range) => draggedItems.indexOf(range.id)));
+                const indexes = range(0, draggableIds.length);
+                indexes.splice(originalIndex, 1);
+                indexes.splice(finalIndex, 0, originalIndex);
+                this.props.onSelectionReordered?.(indexes);
                 this.props.onSelectionConfirmed?.();
                 this.store.confirm();
             },
@@ -38451,6 +38534,9 @@ class GenericChartConfigPanel extends Component {
         this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
             dataSets: this.dataSets,
         });
+        if (this.state.datasetDispatchResult.isSuccessful) {
+            this.dataSets = this.env.model.getters.getChartDefinition(this.props.figureId).dataSets;
+        }
     }
     getDataSeriesRanges() {
         return this.dataSets;
@@ -39867,8 +39953,16 @@ class ContentEditableHelper {
             }
             let startNode = this.findChildAtCharacterIndex(start);
             let endNode = this.findChildAtCharacterIndex(end);
-            range.setStart(startNode.node, startNode.offset);
-            range.setEnd(endNode.node, endNode.offset);
+            // setEnd (setStart) will result in a collapsed range if the end point is before the start point
+            // https://developer.mozilla.org/en-US/docs/Web/API/Range/setEnd
+            if (start <= end) {
+                range.setStart(startNode.node, startNode.offset);
+                range.setEnd(endNode.node, endNode.offset);
+            }
+            else {
+                range.setStart(endNode.node, endNode.offset);
+                range.setEnd(startNode.node, startNode.offset);
+            }
         }
     }
     /**
@@ -40170,8 +40264,7 @@ css /* scss */ `
     }
 
     .o-composer-assistant {
-      position: absolute;
-      margin: 1px 4px;
+      margin-top: 1px;
 
       .o-semi-bold {
         /* FIXME: to remove in favor of Bootstrap
@@ -40222,10 +40315,11 @@ class Composer extends Component {
     });
     compositionActive = false;
     spreadsheetRect = useSpreadsheetRect();
-    get assistantStyle() {
+    get assistantStyleProperties() {
         const composerRect = this.composerRef.el.getBoundingClientRect();
         const assistantStyle = {};
-        assistantStyle["min-width"] = `${this.props.rect?.width || ASSISTANT_WIDTH}px`;
+        const minWidth = Math.min(this.props.rect?.width || Infinity, ASSISTANT_WIDTH);
+        assistantStyle["min-width"] = `${minWidth}px`;
         const proposals = this.autoCompleteState.provider?.proposals;
         const proposalsHaveDescription = proposals?.some((proposal) => proposal.description);
         if (this.functionDescriptionState.showDescription || proposalsHaveDescription) {
@@ -40249,13 +40343,29 @@ class Composer extends Component {
             }
         }
         else {
-            assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom}px`;
+            assistantStyle["max-height"] = `${this.spreadsheetRect.height - composerRect.bottom - 1}px`; // -1: margin
             if (composerRect.left + ASSISTANT_WIDTH + SCROLLBAR_WIDTH + CLOSE_ICON_RADIUS >
                 this.spreadsheetRect.width) {
                 assistantStyle.right = `${CLOSE_ICON_RADIUS}px`;
             }
         }
-        return cssPropertiesToCss(assistantStyle);
+        return assistantStyle;
+    }
+    get assistantStyle() {
+        const allProperties = this.assistantStyleProperties;
+        return cssPropertiesToCss({
+            "max-height": allProperties["max-height"],
+            width: allProperties["width"],
+            "min-width": allProperties["min-width"],
+        });
+    }
+    get assistantContainerStyle() {
+        const allProperties = this.assistantStyleProperties;
+        return cssPropertiesToCss({
+            top: allProperties["top"],
+            right: allProperties["right"],
+            transform: allProperties["transform"],
+        });
     }
     // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
     shouldProcessInputEvents = false;
@@ -46729,9 +46839,7 @@ class PivotSidePanelStore extends SpreadsheetStore {
                 pivot: this.draft,
             });
             this.draft = null;
-            if (!this.alreadyNotified &&
-                !this.isDynamicPivotInViewport() &&
-                this.isStaticPivotInViewport()) {
+            if (!this.alreadyNotified && this.isUpdatedPivotVisibleInViewportOnlyAsStaticPivot()) {
                 const formulaId = this.getters.getPivotFormulaId(this.pivotId);
                 const pivotExample = `=PIVOT(${formulaId})`;
                 this.alreadyNotified = true;
@@ -46787,26 +46895,33 @@ class PivotSidePanelStore extends SpreadsheetStore {
             this.applyUpdate();
         }
     }
-    isDynamicPivotInViewport() {
-        for (const position of this.getters.getVisibleCellPositions()) {
-            const isDynamicPivot = this.getters.isSpillPivotFormula(position);
-            if (isDynamicPivot) {
-                return true;
-            }
-        }
-        return false;
-    }
-    isStaticPivotInViewport() {
+    /**
+     * @returns true if the updated pivot is visible in the viewport only as a
+     * static pivot and not as a dynamic pivot
+     */
+    isUpdatedPivotVisibleInViewportOnlyAsStaticPivot() {
+        let staticPivotCount = 0;
+        const updatedPivotFormulaId = this.getters.getPivotFormulaId(this.pivotId);
         for (const position of this.getters.getVisibleCellPositions()) {
             const cell = this.getters.getCell(position);
             if (cell?.isFormula) {
                 const pivotFunction = getFirstPivotFunction(cell.compiledFormula.tokens);
-                if (pivotFunction && pivotFunction.functionName !== "PIVOT") {
-                    return true;
+                const pivotFormulaId = pivotFunction?.args[0]?.value;
+                if (pivotFunction && updatedPivotFormulaId === pivotFormulaId.toString()) {
+                    if (pivotFunction.functionName === "PIVOT") {
+                        // if we have at least one dynamic pivot visible inserted the viewport
+                        // we return false
+                        return false;
+                    }
+                    else {
+                        staticPivotCount++;
+                    }
                 }
             }
         }
-        return false;
+        // we return true if there are only static pivots visible inserted the viewport,
+        // otherwise false
+        return staticPivotCount > 0;
     }
     addDefaultDateTimeGranularity(fields, definition) {
         const { columns, rows } = definition;
@@ -60660,6 +60775,7 @@ class EvaluationPlugin extends CoreViewPlugin {
     exportForExcel(data) {
         for (const sheet of data.sheets) {
             sheet.cellValues = {};
+            sheet.formulaSpillRanges = {};
         }
         for (const position of this.evaluator.getEvaluatedPositions()) {
             const evaluatedCell = this.evaluator.getEvaluatedCell(position);
@@ -60671,8 +60787,9 @@ class EvaluationPlugin extends CoreViewPlugin {
             const exportedSheetData = data.sheets.find((sheet) => sheet.id === position.sheetId);
             const formulaCell = this.getCorrespondingFormulaCell(position);
             if (formulaCell) {
+                const cell = this.getters.getCell(position);
                 isExported = isExportableToExcel(formulaCell.compiledFormula.tokens);
-                isFormula = isExported;
+                isFormula = isExported && cell?.content === formulaCell.content;
                 // If the cell contains a non-exported formula and that is evaluates to
                 // nothing* ,we don't export it.
                 // * non-falsy value are relevant and so are 0 and FALSE, which only leaves
@@ -60695,7 +60812,11 @@ class EvaluationPlugin extends CoreViewPlugin {
                 content = !isExported ? newContent : exportedCellData;
             }
             exportedSheetData.cells[xc] = content;
-            exportedSheetData.cellValues[xc] = value;
+            exportedSheetData.cellValues[xc] = evaluatedCell.type !== "error" ? value : undefined;
+            const spillZone = this.getSpreadZone(position);
+            if (spillZone) {
+                exportedSheetData.formulaSpillRanges[xc] = this.getters.getRangeString(this.getters.getRangeFromZone(position.sheetId, spillZone), position.sheetId);
+            }
         }
     }
     /**
@@ -62923,7 +63044,7 @@ class AutofillPlugin extends UIPlugin {
     getRule(cell, cells) {
         const rules = autofillRulesRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
         const rule = rules.find((rule) => rule.condition(cell, cells));
-        return rule && rule.generateRule(cell, cells);
+        return rule && this.direction && rule.generateRule(cell, cells, this.direction);
     }
     /**
      * Create the generator to be able to autofill the next cells.
@@ -73405,7 +73526,7 @@ function numberRef(reference) {
   `;
 }
 
-function addFormula(formula, value) {
+function addFormula(formula, value, formulaSpillRange) {
     if (!formula) {
         return { attrs: [], node: escapeXml `` };
     }
@@ -73413,10 +73534,17 @@ function addFormula(formula, value) {
     if (type === undefined) {
         return { attrs: [], node: escapeXml `` };
     }
-    const attrs = [["t", type]];
+    const attrs = [
+        ["cm", "1"],
+        ["t", type],
+    ];
     const XlsxFormula = adaptFormulaToExcel(formula);
     const exportedValue = adaptFormulaValueToExcel(value);
-    const node = escapeXml /*xml*/ `<f>${XlsxFormula}</f><v>${exportedValue}</v>`;
+    // We treat all formulas as array formulas (a simple formula
+    // is an array formula that spills on only one cell) to avoid
+    // trying to detect spilling sub-formulas which is not a trivial task.
+    let node;
+    node = escapeXml /*xml*/ `<f t="array" ref="${formulaSpillRange}">${XlsxFormula}</f><v>${exportedValue}</v>`;
     return { attrs, node };
 }
 function addContent(content, sharedStrings, forceString = false) {
@@ -74406,7 +74534,7 @@ function addRows(construct, data, sheet) {
                 let cellNode = escapeXml ``;
                 // Either formula or static value inside the cell
                 if (content?.startsWith("=") && value !== undefined) {
-                    const res = addFormula(content, value);
+                    const res = addFormula(content, value, sheet.formulaSpillRanges[xc] ?? xc);
                     if (!res) {
                         continue;
                     }
@@ -74692,6 +74820,30 @@ function createWorksheets(data, construct) {
     `;
         files.push(createXMLFile(parseXML(sheetXml), `xl/worksheets/sheet${sheetIndex}.xml`, "sheet"));
     }
+    const sheetMetadataXml = escapeXml /*xml*/ `
+    <metadata xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:xda="http://schemas.microsoft.com/office/spreadsheetml/2017/dynamicarray">
+        <metadataTypes count="1">
+            <metadataType name="XLDAPR" minSupportedVersion="120000" copy="1" pasteAll="1"
+                pasteValues="1" merge="1" splitFirst="1" rowColShift="1" clearFormats="1"
+                clearComments="1" assign="1" coerce="1" cellMeta="1" />
+        </metadataTypes>
+        <futureMetadata name="XLDAPR" count="1">
+            <bk>
+                <extLst>
+                    <ext uri="{${ARRAY_FORMULA_URI}}">
+                        <xda:dynamicArrayProperties fDynamic="1" fCollapsed="0" />
+                    </ext>
+                </extLst>
+            </bk>
+        </futureMetadata>
+        <cellMetadata count="1">
+            <bk>
+                <rc t="1" v="0" />
+            </bk>
+        </cellMetadata>
+    </metadata>
+  `;
+    files.push(createXMLFile(parseXML(sheetMetadataXml), "xl/metadata.xml", "metadata"));
     addRelsToFile(construct.relsFiles, "xl/_rels/workbook.xml.rels", {
         type: XLSX_RELATION_TYPE.sharedStrings,
         target: "sharedStrings.xml",
@@ -74700,6 +74852,10 @@ function createWorksheets(data, construct) {
         type: XLSX_RELATION_TYPE.styles,
         target: "styles.xml",
     });
+    addRelsToFile(construct.relsFiles, "xl/_rels/workbook.xml.rels", {
+        type: XLSX_RELATION_TYPE.metadata,
+        target: "metadata.xml",
+    });
     return files;
 }
 /**
@@ -75616,6 +75772,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.2.1";
-__info__.date = "2025-02-25T06:03:13.262Z";
-__info__.hash = "3b4b5c9";
+__info__.version = "18.2.2";
+__info__.date = "2025-03-07T10:41:04.411Z";
+__info__.hash = "f567932";