@odoo/o-spreadsheet 17.4.24 → 17.4.25

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 17.4.24
- * @date 2025-02-25T05:58:55.802Z
- * @hash 163efbd
+ * @version 17.4.25
+ * @date 2025-03-07T10:33:20.607Z
+ * @hash 765f110
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -5057,8 +5057,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,
@@ -5070,8 +5071,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,
@@ -10830,70 +10832,347 @@ 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_TEXT_COLOR = "#666666";
+const GAUGE_TEXT_COLOR_HIGH_CONTRAST = "#C8C8C8";
+const GAUGE_INFLECTION_MARKER_COLOR = "#666666aa";
+const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
+const GAUGE_TITLE_SECTION_HEIGHT = 25;
+const GAUGE_TITLE_FONT_SIZE = DEFAULT_CHART_FONT_SIZE;
+const GAUGE_TITLE_PADDING_LEFT = DEFAULT_CHART_PADDING;
+const GAUGE_TITLE_PADDING_TOP = DEFAULT_CHART_PADDING;
+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 = GAUGE_INFLECTION_MARKER_COLOR;
+        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 = getContrastedTextColor(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, { ...runtime.title, fontSize: GAUGE_TITLE_FONT_SIZE }, "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 - GAUGE_TITLE_PADDING_LEFT;
+            break;
+        case "center":
+            x = (boundingRect.width - titleWidth) / 2;
+            break;
+        case "left":
+        default:
+            x = GAUGE_TITLE_PADDING_LEFT;
+            break;
+    }
+    return {
+        width: boundingRect.width,
+        height: boundingRect.height,
+        title: {
+            label: runtime.title.text ?? "",
+            fontSize: GAUGE_TITLE_FONT_SIZE,
+            textPosition: {
+                x,
+                y: GAUGE_TITLE_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;
+    let colorIndex = 0;
+    while (runtime.inflectionValues[colorIndex]?.value <= gaugeValue) {
+        colorIndex++;
+    }
+    return runtime.colors[colorIndex];
+}
+function getContrastedTextColor(backgroundColor) {
+    return relativeLuminance(backgroundColor) > 0.3
+        ? GAUGE_TEXT_COLOR
+        : GAUGE_TEXT_COLOR_HIGH_CONTRAST;
+}
+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;
             }
         }
-        else {
-            this.chart.data.datasets = [];
-        }
-        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 };
 }
 
 /**
@@ -11559,6 +11838,364 @@ class KeyValueElement extends ScorecardScalableElement {
     }
 }
 
+/**
+ * This file contains helpers that are common to different runtime charts (mainly
+ * line, bar and pie charts)
+ */
+/**
+ * Get the data from a dataSet
+ */
+function getData(getters, ds) {
+    if (ds.dataRange) {
+        const labelCellZone = ds.labelCell ? [ds.labelCell.zone] : [];
+        const dataZone = recomputeZones([ds.dataRange.zone], labelCellZone)[0];
+        if (dataZone === undefined) {
+            return [];
+        }
+        const dataRange = getters.getRangeFromZone(ds.dataRange.sheetId, dataZone);
+        return getters.getRangeValues(dataRange).map((value) => (value === "" ? undefined : value));
+    }
+    return [];
+}
+function filterEmptyDataPoints(labels, datasets) {
+    const numberOfDataPoints = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length || 0));
+    const dataPointsIndexes = range(0, numberOfDataPoints).filter((dataPointIndex) => {
+        const label = labels[dataPointIndex];
+        const values = datasets.map((dataset) => dataset.data?.[dataPointIndex]);
+        return label || values.some((value) => value === 0 || Boolean(value));
+    });
+    return {
+        labels: dataPointsIndexes.map((i) => labels[i] || ""),
+        dataSetsValues: datasets.map((dataset) => ({
+            ...dataset,
+            data: dataPointsIndexes.map((i) => dataset.data[i]),
+        })),
+    };
+}
+/**
+ * Aggregates data based on labels
+ */
+function aggregateDataForLabels(labels, datasets) {
+    const parseNumber = (value) => (typeof value === "number" ? value : 0);
+    const labelSet = new Set(labels);
+    const labelMap = {};
+    labelSet.forEach((label) => {
+        labelMap[label] = new Array(datasets.length).fill(0);
+    });
+    for (const indexOfLabel of range(0, labels.length)) {
+        const label = labels[indexOfLabel];
+        for (const indexOfDataset of range(0, datasets.length)) {
+            labelMap[label][indexOfDataset] += parseNumber(datasets[indexOfDataset].data[indexOfLabel]);
+        }
+    }
+    return {
+        labels: Array.from(labelSet),
+        dataSetsValues: datasets.map((dataset, indexOfDataset) => ({
+            ...dataset,
+            data: Array.from(labelSet).map((label) => labelMap[label][indexOfDataset]),
+        })),
+    };
+}
+function truncateLabel(label) {
+    if (!label) {
+        return "";
+    }
+    if (label.length > MAX_CHAR_LABEL) {
+        return label.substring(0, MAX_CHAR_LABEL) + "…";
+    }
+    return label;
+}
+/**
+ * Get a default chart js configuration
+ */
+function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, truncateLabels = true, horizontalChart, }) {
+    const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
+    const 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 ration (width/height =2 by default) so the user has the choice of the exact layout
+        layout: {
+            padding: {
+                left: DEFAULT_CHART_PADDING,
+                right: DEFAULT_CHART_PADDING,
+                top: chartTitle.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
+                bottom: DEFAULT_CHART_PADDING,
+            },
+        },
+        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,
+        plugins: {
+            title: {
+                display: !!chartTitle.text,
+                text: _t(chartTitle.text),
+                color: chartTitle?.color ?? fontColor,
+                align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
+                font: {
+                    size: DEFAULT_CHART_FONT_SIZE,
+                    weight: chartTitle.bold ? "bold" : "normal",
+                    style: chartTitle.italic ? "italic" : "normal",
+                },
+            },
+            legend: {
+                // Disable default legend onClick (show/hide dataset), to allow us to set a global onClick on the chart container.
+                // If we want to re-enable this in the future, we need to override the default onClick to stop the event propagation
+                onClick: () => { },
+            },
+            tooltip: {
+                callbacks: {
+                    label: function (tooltipItem) {
+                        const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
+                        // tooltipItem.parsed can be an object or a number for pie charts
+                        let yLabel = horizontalChart ? tooltipItem.parsed.x : tooltipItem.parsed.y;
+                        if (yLabel === undefined || yLabel === null) {
+                            yLabel = tooltipItem.parsed;
+                        }
+                        const toolTipFormat = !format && Math.abs(yLabel) >= 1000 ? "#,##" : format;
+                        const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                        return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+                    },
+                },
+            },
+        },
+    };
+    return {
+        type: chart.type,
+        options,
+        data: {
+            labels: truncateLabels ? labels.map(truncateLabel) : labels,
+            datasets: [],
+        },
+        platform: undefined, // This key is optional and will be set by chart.js
+        plugins: [],
+    };
+}
+function getChartLabelFormat(getters, range, shouldRemoveFirstLabel) {
+    if (!range)
+        return undefined;
+    const { sheetId, zone } = range;
+    const formats = positions(zone).map((position) => getters.getEvaluatedCell({ sheetId, ...position }).format);
+    if (shouldRemoveFirstLabel) {
+        formats.shift();
+    }
+    return formats.find((format) => format !== undefined);
+}
+function getChartLabelValues(getters, dataSets, labelRange) {
+    let labels = { values: [], formattedValues: [] };
+    if (labelRange) {
+        if (!labelRange.invalidXc && !labelRange.invalidSheetName) {
+            labels = {
+                formattedValues: getters.getRangeFormattedValues(labelRange),
+                values: getters.getRangeValues(labelRange).map((val) => String(val ?? "")),
+            };
+        }
+    }
+    else if (dataSets.length === 1) {
+        for (let i = 0; i < getData(getters, dataSets[0]).length; i++) {
+            labels.formattedValues.push("");
+            labels.values.push("");
+        }
+    }
+    else {
+        if (dataSets[0]) {
+            const ranges = getData(getters, dataSets[0]);
+            labels = {
+                formattedValues: range(0, ranges.length).map((r) => r.toString()),
+                values: labels.formattedValues,
+            };
+        }
+    }
+    return labels;
+}
+/**
+ * Get the format to apply to the the dataset values. This format is defined as the first format
+ * found in the dataset ranges that isn't a date format.
+ */
+function getChartDatasetFormat(getters, dataSets) {
+    for (const ds of dataSets) {
+        const formatsInDataset = getters.getRangeFormats(ds.dataRange);
+        const format = formatsInDataset.find((f) => f !== undefined && !isDateTimeFormat(f));
+        if (format)
+            return format;
+    }
+    return undefined;
+}
+function getChartDatasetValues(getters, dataSets) {
+    const datasetValues = [];
+    for (const [dsIndex, ds] of Object.entries(dataSets)) {
+        let label;
+        if (ds.labelCell) {
+            const labelRange = ds.labelCell;
+            const cell = labelRange
+                ? getters.getEvaluatedCell({
+                    sheetId: labelRange.sheetId,
+                    col: labelRange.zone.left,
+                    row: labelRange.zone.top,
+                })
+                : undefined;
+            label =
+                cell && labelRange
+                    ? truncateLabel(cell.formattedValue)
+                    : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
+        }
+        else {
+            label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`;
+        }
+        let data = ds.dataRange ? getData(getters, ds) : [];
+        if (data.every((e) => typeof e === "string" && !isEvaluationError(e))) {
+            // In this case, we want a chart based on the string occurrences count
+            // This will be done by associating each string with a value of 1 and
+            // the using the classical aggregation method to sum the values.
+            data.fill(1);
+        }
+        datasetValues.push({ data, label });
+    }
+    return datasetValues;
+}
+/**
+ * If the chart is a stacked area chart, we want to fill until the next dataset.
+ * If the chart is a simple area chart, we want to fill until the origin (bottom axis).
+ *
+ * See https://www.chartjs.org/docs/latest/charts/area.html#filling-modes
+ */
+function getFillingMode(index, stackedChart) {
+    if (!stackedChart) {
+        return "origin";
+    }
+    return index === 0 ? "origin" : "-1";
+}
+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 = {
@@ -24399,7 +25036,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;
@@ -24407,7 +25044,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,
@@ -24436,9 +25076,12 @@ 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).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",
@@ -24449,349 +25092,6 @@ autofillRulesRegistry
     sequence: 40,
 });
 
-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_TEXT_COLOR = "#666666";
-const GAUGE_TEXT_COLOR_HIGH_CONTRAST = "#C8C8C8";
-const GAUGE_INFLECTION_MARKER_COLOR = "#666666aa";
-const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
-const GAUGE_TITLE_SECTION_HEIGHT = 25;
-const GAUGE_TITLE_FONT_SIZE = DEFAULT_CHART_FONT_SIZE;
-const GAUGE_TITLE_PADDING_LEFT = DEFAULT_CHART_PADDING;
-const GAUGE_TITLE_PADDING_TOP = DEFAULT_CHART_PADDING;
-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 = GAUGE_INFLECTION_MARKER_COLOR;
-        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 = getContrastedTextColor(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, { ...runtime.title, fontSize: GAUGE_TITLE_FONT_SIZE }, "px"));
-    }
-    switch (runtime.title.align) {
-        case "right":
-            x = boundingRect.width - titleWidth - GAUGE_TITLE_PADDING_LEFT;
-            break;
-        case "center":
-            x = (boundingRect.width - titleWidth) / 2;
-            break;
-        case "left":
-        default:
-            x = GAUGE_TITLE_PADDING_LEFT;
-            break;
-    }
-    return {
-        width: boundingRect.width,
-        height: boundingRect.height,
-        title: {
-            label: runtime.title.text ?? "",
-            fontSize: GAUGE_TITLE_FONT_SIZE,
-            textPosition: {
-                x,
-                y: GAUGE_TITLE_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;
-    }
-    let colorIndex = 0;
-    while (runtime.inflectionValues[colorIndex]?.value <= gaugeValue) {
-        colorIndex++;
-    }
-    return runtime.colors[colorIndex];
-}
-function getContrastedTextColor(backgroundColor) {
-    return relativeLuminance(backgroundColor) > 0.3
-        ? GAUGE_TEXT_COLOR
-        : GAUGE_TEXT_COLOR_HIGH_CONTRAST;
-}
-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");
@@ -24824,290 +25124,6 @@ function toXlsxHexColor(color) {
     return color;
 }
 
-/**
- * This file contains helpers that are common to different runtime charts (mainly
- * line, bar and pie charts)
- */
-/**
- * Get the data from a dataSet
- */
-function getData(getters, ds) {
-    if (ds.dataRange) {
-        const labelCellZone = ds.labelCell ? [ds.labelCell.zone] : [];
-        const dataZone = recomputeZones([ds.dataRange.zone], labelCellZone)[0];
-        if (dataZone === undefined) {
-            return [];
-        }
-        const dataRange = getters.getRangeFromZone(ds.dataRange.sheetId, dataZone);
-        return getters.getRangeValues(dataRange).map((value) => (value === "" ? undefined : value));
-    }
-    return [];
-}
-function filterEmptyDataPoints(labels, datasets) {
-    const numberOfDataPoints = Math.max(labels.length, ...datasets.map((dataset) => dataset.data?.length || 0));
-    const dataPointsIndexes = range(0, numberOfDataPoints).filter((dataPointIndex) => {
-        const label = labels[dataPointIndex];
-        const values = datasets.map((dataset) => dataset.data?.[dataPointIndex]);
-        return label || values.some((value) => value === 0 || Boolean(value));
-    });
-    return {
-        labels: dataPointsIndexes.map((i) => labels[i] || ""),
-        dataSetsValues: datasets.map((dataset) => ({
-            ...dataset,
-            data: dataPointsIndexes.map((i) => dataset.data[i]),
-        })),
-    };
-}
-/**
- * Aggregates data based on labels
- */
-function aggregateDataForLabels(labels, datasets) {
-    const parseNumber = (value) => (typeof value === "number" ? value : 0);
-    const labelSet = new Set(labels);
-    const labelMap = {};
-    labelSet.forEach((label) => {
-        labelMap[label] = new Array(datasets.length).fill(0);
-    });
-    for (const indexOfLabel of range(0, labels.length)) {
-        const label = labels[indexOfLabel];
-        for (const indexOfDataset of range(0, datasets.length)) {
-            labelMap[label][indexOfDataset] += parseNumber(datasets[indexOfDataset].data[indexOfLabel]);
-        }
-    }
-    return {
-        labels: Array.from(labelSet),
-        dataSetsValues: datasets.map((dataset, indexOfDataset) => ({
-            ...dataset,
-            data: Array.from(labelSet).map((label) => labelMap[label][indexOfDataset]),
-        })),
-    };
-}
-function truncateLabel(label) {
-    if (!label) {
-        return "";
-    }
-    if (label.length > MAX_CHAR_LABEL) {
-        return label.substring(0, MAX_CHAR_LABEL) + "…";
-    }
-    return label;
-}
-/**
- * Get a default chart js configuration
- */
-function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale, truncateLabels = true, horizontalChart, }) {
-    const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
-    const 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 ration (width/height =2 by default) so the user has the choice of the exact layout
-        layout: {
-            padding: {
-                left: DEFAULT_CHART_PADDING,
-                right: DEFAULT_CHART_PADDING,
-                top: chartTitle.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
-                bottom: DEFAULT_CHART_PADDING,
-            },
-        },
-        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,
-        plugins: {
-            title: {
-                display: !!chartTitle.text,
-                text: _t(chartTitle.text),
-                color: chartTitle?.color ?? fontColor,
-                align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
-                font: {
-                    size: DEFAULT_CHART_FONT_SIZE,
-                    weight: chartTitle.bold ? "bold" : "normal",
-                    style: chartTitle.italic ? "italic" : "normal",
-                },
-            },
-            legend: {
-                // Disable default legend onClick (show/hide dataset), to allow us to set a global onClick on the chart container.
-                // If we want to re-enable this in the future, we need to override the default onClick to stop the event propagation
-                onClick: () => { },
-            },
-            tooltip: {
-                callbacks: {
-                    label: function (tooltipItem) {
-                        const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
-                        // tooltipItem.parsed can be an object or a number for pie charts
-                        let yLabel = horizontalChart ? tooltipItem.parsed.x : tooltipItem.parsed.y;
-                        if (yLabel === undefined || yLabel === null) {
-                            yLabel = tooltipItem.parsed;
-                        }
-                        const toolTipFormat = !format && Math.abs(yLabel) >= 1000 ? "#,##" : format;
-                        const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-                        return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
-                    },
-                },
-            },
-        },
-    };
-    return {
-        type: chart.type,
-        options,
-        data: {
-            labels: truncateLabels ? labels.map(truncateLabel) : labels,
-            datasets: [],
-        },
-        platform: undefined, // This key is optional and will be set by chart.js
-        plugins: [],
-    };
-}
-function getChartLabelFormat(getters, range, shouldRemoveFirstLabel) {
-    if (!range)
-        return undefined;
-    const { sheetId, zone } = range;
-    const formats = positions(zone).map((position) => getters.getEvaluatedCell({ sheetId, ...position }).format);
-    if (shouldRemoveFirstLabel) {
-        formats.shift();
-    }
-    return formats.find((format) => format !== undefined);
-}
-function getChartLabelValues(getters, dataSets, labelRange) {
-    let labels = { values: [], formattedValues: [] };
-    if (labelRange) {
-        if (!labelRange.invalidXc && !labelRange.invalidSheetName) {
-            labels = {
-                formattedValues: getters.getRangeFormattedValues(labelRange),
-                values: getters.getRangeValues(labelRange).map((val) => String(val ?? "")),
-            };
-        }
-    }
-    else if (dataSets.length === 1) {
-        for (let i = 0; i < getData(getters, dataSets[0]).length; i++) {
-            labels.formattedValues.push("");
-            labels.values.push("");
-        }
-    }
-    else {
-        if (dataSets[0]) {
-            const ranges = getData(getters, dataSets[0]);
-            labels = {
-                formattedValues: range(0, ranges.length).map((r) => r.toString()),
-                values: labels.formattedValues,
-            };
-        }
-    }
-    return labels;
-}
-/**
- * Get the format to apply to the the dataset values. This format is defined as the first format
- * found in the dataset ranges that isn't a date format.
- */
-function getChartDatasetFormat(getters, dataSets) {
-    for (const ds of dataSets) {
-        const formatsInDataset = getters.getRangeFormats(ds.dataRange);
-        const format = formatsInDataset.find((f) => f !== undefined && !isDateTimeFormat(f));
-        if (format)
-            return format;
-    }
-    return undefined;
-}
-function getChartDatasetValues(getters, dataSets) {
-    const datasetValues = [];
-    for (const [dsIndex, ds] of Object.entries(dataSets)) {
-        let label;
-        if (ds.labelCell) {
-            const labelRange = ds.labelCell;
-            const cell = labelRange
-                ? getters.getEvaluatedCell({
-                    sheetId: labelRange.sheetId,
-                    col: labelRange.zone.left,
-                    row: labelRange.zone.top,
-                })
-                : undefined;
-            label =
-                cell && labelRange
-                    ? truncateLabel(cell.formattedValue)
-                    : (label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`);
-        }
-        else {
-            label = `${ChartTerms.Series} ${parseInt(dsIndex) + 1}`;
-        }
-        let data = ds.dataRange ? getData(getters, ds) : [];
-        if (data.every((e) => typeof e === "string" && !isEvaluationError(e))) {
-            // In this case, we want a chart based on the string occurrences count
-            // This will be done by associating each string with a value of 1 and
-            // the using the classical aggregation method to sum the values.
-            data.fill(1);
-        }
-        datasetValues.push({ data, label });
-    }
-    return datasetValues;
-}
-/**
- * If the chart is a stacked area chart, we want to fill until the next dataset.
- * If the chart is a simple area chart, we want to fill until the origin (bottom axis).
- *
- * See https://www.chartjs.org/docs/latest/charts/area.html#filling-modes
- */
-function getFillingMode(index, stackedChart) {
-    if (!stackedChart) {
-        return "origin";
-    }
-    return index === 0 ? "origin" : "-1";
-}
-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();
-    },
-};
-
 class BarChart extends AbstractChart {
     dataSets;
     labelRange;
@@ -25528,11 +25544,12 @@ function canBeLinearChart(chart, 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;
@@ -25549,7 +25566,8 @@ function getLineOrScatterConfiguration(chart, labels, options) {
             generateLabels(chart) {
                 // color the legend labels with the dataset color, without any transparency
                 const { data } = chart;
-                const labels = window.Chart.defaults.plugins.legend.labels.generateLabels(chart);
+                const Chart = getChartJSConstructor();
+                const labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
                 for (const [index, label] of labels.entries()) {
                     label.fillStyle = data.datasets[index].borderColor;
                 }
@@ -40931,6 +40949,9 @@ class ColResizer extends AbstractResizer {
         this.MAX_SIZE_MARGIN = 90;
         this.MIN_ELEMENT_SIZE = MIN_COL_WIDTH;
     }
+    get sheetId() {
+        return this.env.model.getters.getActiveSheetId();
+    }
     _getEvOffset(ev) {
         return ev.offsetX;
     }
@@ -40953,10 +40974,10 @@ class ColResizer extends AbstractResizer {
         return this.env.model.getters.getEdgeScrollCol(position, position, position);
     }
     _getDimensionsInViewport(index) {
-        return this.env.model.getters.getColDimensionsInViewport(this.env.model.getters.getActiveSheetId(), index);
+        return this.env.model.getters.getColDimensionsInViewport(this.sheetId, index);
     }
     _getElementSize(index) {
-        return this.env.model.getters.getColSize(this.env.model.getters.getActiveSheetId(), index);
+        return this.env.model.getters.getColSize(this.sheetId, index);
     }
     _getMaxSize() {
         return this.colResizerRef.el.clientWidth;
@@ -40967,7 +40988,7 @@ class ColResizer extends AbstractResizer {
         const cols = this.env.model.getters.getActiveCols();
         this.env.model.dispatch("RESIZE_COLUMNS_ROWS", {
             dimension: "COL",
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             elements: cols.has(index) ? [...cols] : [index],
             size,
         });
@@ -40980,7 +41001,7 @@ class ColResizer extends AbstractResizer {
             elements.push(colIndex);
         }
         const result = this.env.model.dispatch("MOVE_COLUMNS_ROWS", {
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             dimension: "COL",
             base: this.state.base,
             elements,
@@ -40999,7 +41020,7 @@ class ColResizer extends AbstractResizer {
     _fitElementSize(index) {
         const cols = this.env.model.getters.getActiveCols();
         this.env.model.dispatch("AUTORESIZE_COLUMNS", {
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             cols: cols.has(index) ? [...cols] : [index],
         });
     }
@@ -41010,7 +41031,7 @@ class ColResizer extends AbstractResizer {
         return this.env.model.getters.getActiveCols();
     }
     _getPreviousVisibleElement(index) {
-        const sheetId = this.env.model.getters.getActiveSheetId();
+        const sheetId = this.sheetId;
         let row;
         for (row = index - 1; row >= 0; row--) {
             if (!this.env.model.getters.isColHidden(sheetId, row)) {
@@ -41021,7 +41042,7 @@ class ColResizer extends AbstractResizer {
     }
     unhide(hiddenElements) {
         this.env.model.dispatch("UNHIDE_COLUMNS_ROWS", {
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             elements: hiddenElements,
             dimension: "COL",
         });
@@ -41037,7 +41058,7 @@ css /* scss */ `
     left: 0;
     right: 0;
     width: ${HEADER_WIDTH}px;
-    height: 100%;
+    height: calc(100% - ${HEADER_HEIGHT + SCROLLBAR_WIDTH}px);
     &.o-dragging {
       cursor: grabbing;
     }
@@ -41095,6 +41116,9 @@ class RowResizer extends AbstractResizer {
         this.MIN_ELEMENT_SIZE = MIN_ROW_HEIGHT;
     }
     rowResizerRef;
+    get sheetId() {
+        return this.env.model.getters.getActiveSheetId();
+    }
     _getEvOffset(ev) {
         return ev.offsetY;
     }
@@ -41117,10 +41141,10 @@ class RowResizer extends AbstractResizer {
         return this.env.model.getters.getEdgeScrollRow(position, position, position);
     }
     _getDimensionsInViewport(index) {
-        return this.env.model.getters.getRowDimensionsInViewport(this.env.model.getters.getActiveSheetId(), index);
+        return this.env.model.getters.getRowDimensionsInViewport(this.sheetId, index);
     }
     _getElementSize(index) {
-        return this.env.model.getters.getRowSize(this.env.model.getters.getActiveSheetId(), index);
+        return this.env.model.getters.getRowSize(this.sheetId, index);
     }
     _getMaxSize() {
         return this.rowResizerRef.el.clientHeight;
@@ -41131,7 +41155,7 @@ class RowResizer extends AbstractResizer {
         const rows = this.env.model.getters.getActiveRows();
         this.env.model.dispatch("RESIZE_COLUMNS_ROWS", {
             dimension: "ROW",
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             elements: rows.has(index) ? [...rows] : [index],
             size,
         });
@@ -41144,7 +41168,7 @@ class RowResizer extends AbstractResizer {
             elements.push(rowIndex);
         }
         const result = this.env.model.dispatch("MOVE_COLUMNS_ROWS", {
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             dimension: "ROW",
             base: this.state.base,
             elements,
@@ -41163,7 +41187,7 @@ class RowResizer extends AbstractResizer {
     _fitElementSize(index) {
         const rows = this.env.model.getters.getActiveRows();
         this.env.model.dispatch("AUTORESIZE_ROWS", {
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             rows: rows.has(index) ? [...rows] : [index],
         });
     }
@@ -41174,7 +41198,7 @@ class RowResizer extends AbstractResizer {
         return this.env.model.getters.getActiveRows();
     }
     _getPreviousVisibleElement(index) {
-        const sheetId = this.env.model.getters.getActiveSheetId();
+        const sheetId = this.sheetId;
         let row;
         for (row = index - 1; row >= 0; row--) {
             if (!this.env.model.getters.isRowHidden(sheetId, row)) {
@@ -41185,7 +41209,7 @@ class RowResizer extends AbstractResizer {
     }
     unhide(hiddenElements) {
         this.env.model.dispatch("UNHIDE_COLUMNS_ROWS", {
-            sheetId: this.env.model.getters.getActiveSheetId(),
+            sheetId: this.sheetId,
             dimension: "ROW",
             elements: hiddenElements,
         });
@@ -43148,6 +43172,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",
@@ -43160,6 +43185,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",
@@ -43169,6 +43195,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
 /**
@@ -45016,29 +45043,33 @@ 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);
-                const cell = sheet.cells[xc];
-                if (cell && cell.content && cell.content.startsWith("=")) {
-                    let refIndex;
-                    while ((refIndex = cell.content.indexOf(tabRef)) !== -1) {
-                        let reference = cell.content.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];
+                    if (cell && cell.content && cell.content.startsWith("=")) {
+                        let refIndex;
+                        while ((refIndex = cell.content.indexOf(tabRef)) !== -1) {
+                            let endIndex = refIndex + tabRef.length;
+                            let openBrackets = 1;
+                            while (openBrackets > 0 && endIndex < cell.content.length) {
+                                if (cell.content[endIndex] === "[") {
+                                    openBrackets++;
+                                }
+                                else if (cell.content[endIndex] === "]") {
+                                    openBrackets--;
+                                }
+                                endIndex++;
+                            }
+                            let reference = cell.content.slice(refIndex + tabRef.length, endIndex - 1);
+                            const sheetPrefix = tableSheet.id === sheet.id ? "" : tableSheet.name + "!";
+                            const convertedRef = convertTableReference(sheetPrefix, reference, table, xc);
+                            cell.content =
+                                cell.content.slice(0, refIndex) + convertedRef + cell.content.slice(endIndex);
                         }
-                        reference = reference.slice(0, endIndex);
-                        const convertedRef = convertTableReference(reference, table, xc);
-                        cell.content =
-                            cell.content.slice(0, refIndex) +
-                                convertedRef +
-                                cell.content.slice(tabRef.length + refIndex + endIndex + 1);
                     }
                 }
             }
@@ -45046,11 +45077,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)
@@ -45058,58 +45095,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;
 }
 
 // -------------------------------------
@@ -54939,6 +55027,9 @@ class EvaluationPlugin extends UIPlugin {
     // Export
     // ---------------------------------------------------------------------------
     exportForExcel(data) {
+        for (const sheet of data.sheets) {
+            sheet.formulaSpillRanges = {};
+        }
         for (const position of this.evaluator.getEvaluatedPositions()) {
             const evaluatedCell = this.evaluator.getEvaluatedCell(position);
             const xc = toXC(position.col, position.row);
@@ -54950,8 +55041,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 (!isExported) {
                     // If the cell contains a non-exported formula and that is evaluates to
                     // nothing* ,we don't export it.
@@ -54975,6 +55067,10 @@ class EvaluationPlugin extends UIPlugin {
                 content = !isExported ? newContent : exportedCellData.content;
             }
             exportedSheetData.cells[xc] = { ...exportedCellData, value, isFormula, content, format };
+            const spillZone = this.getSpreadZone(position);
+            if (spillZone) {
+                exportedSheetData.formulaSpillRanges[xc] = this.getters.getRangeString(this.getters.getRangeFromZone(position.sheetId, spillZone), position.sheetId);
+            }
         }
     }
     /**
@@ -56625,7 +56721,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.
@@ -61707,7 +61803,8 @@ class SheetViewPlugin extends UIPlugin {
             ? this.getters.getSheetViewVisibleCols()
             : this.getters.getSheetViewVisibleRows();
         const startIndex = visibleHeaders.findIndex((header) => referenceHeaderIndex >= header);
-        const endIndex = visibleHeaders.findIndex((header) => targetHeaderIndex <= header);
+        let endIndex = visibleHeaders.findIndex((header) => targetHeaderIndex <= header);
+        endIndex = endIndex === -1 ? visibleHeaders.length : endIndex;
         const relevantIndexes = visibleHeaders.slice(startIndex, endIndex);
         let offset = 0;
         for (const i of relevantIndexes) {
@@ -66953,7 +67050,7 @@ function numberRef(reference) {
   `;
 }
 
-function addFormula(cell) {
+function addFormula(cell, formulaSpillRange) {
     const formula = cell.content;
     if (!formula) {
         return { attrs: [], node: escapeXml `` };
@@ -66962,10 +67059,17 @@ function addFormula(cell) {
     if (type === undefined) {
         return { attrs: [], node: escapeXml `` };
     }
-    const attrs = [["t", type]];
+    const attrs = [
+        ["cm", "1"],
+        ["t", type],
+    ];
     const XlsxFormula = adaptFormulaToExcel(formula);
     const exportedValue = adaptFormulaValueToExcel(cell.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) {
@@ -67809,7 +67913,7 @@ function addRows(construct, data, sheet) {
                 let cellNode = escapeXml ``;
                 // Either formula or static value inside the cell
                 if (cell.isFormula) {
-                    const res = addFormula(cell);
+                    const res = addFormula(cell, sheet.formulaSpillRanges[xc] ?? xc);
                     if (!res) {
                         continue;
                     }
@@ -68084,6 +68188,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",
@@ -68092,6 +68220,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;
 }
 /**
@@ -68979,6 +69111,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, 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 = "17.4.24";
-__info__.date = "2025-02-25T05:58:55.802Z";
-__info__.hash = "163efbd";
+__info__.version = "17.4.25";
+__info__.date = "2025-03-07T10:33:20.607Z";
+__info__.hash = "765f110";