@odoo/o-spreadsheet 17.3.0-alpha.3 → 17.3.0-alpha.4

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.3.0-alpha.3
- * @date 2024-04-10T12:28:23.658Z
- * @hash 80b5056
+ * @version 17.3.0-alpha.4
+ * @date 2024-04-15T11:02:51.551Z
+ * @hash a32a1df
  */
 
 import { reactive, useEnv, useSubEnv, useState, onWillUnmount, markRaw, toRaw, Component, useRef, onMounted, useEffect, onPatched, useComponent, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv } from '@odoo/owl';
@@ -37,6 +37,9 @@ const GRID_BORDER_COLOR = "#E2E3E3";
 const FROZEN_PANE_HEADER_BORDER_COLOR = "#BCBCBC";
 const FROZEN_PANE_BORDER_COLOR = "#DADFE8";
 const COMPOSER_ASSISTANT_COLOR = "#9B359B";
+const CHART_WATERFALL_POSITIVE_COLOR = "#006FBE";
+const CHART_WATERFALL_NEGATIVE_COLOR = "#E40000";
+const CHART_WATERFALL_SUBTOTAL_COLOR = "#AAAAAA";
 // Color picker defaults as upper case HEX to match `toHex`helper
 const COLOR_PICKER_DEFAULTS = [
     "#000000",
@@ -2120,6 +2123,7 @@ var CommandResult;
     CommandResult["NoChanges"] = "NoChanges";
     CommandResult["InvalidInputId"] = "InvalidInputId";
     CommandResult["SheetIsHidden"] = "SheetIsHidden";
+    CommandResult["InvalidTableResize"] = "InvalidTableResize";
 })(CommandResult || (CommandResult = {}));
 
 const PLAIN_TEXT_FORMAT = "@"; // see OpenXML spec §18.8.31
@@ -2517,6 +2521,15 @@ function matrixMap(matrix, fn) {
     }
     return generateMatrix(matrix.length, matrix[0].length, (col, row) => fn(matrix[col][row]));
 }
+function matrixForEach(matrix, fn) {
+    const numberOfCols = matrix.length;
+    const numberOfRows = matrix[0]?.length ?? 0;
+    for (let col = 0; col < numberOfCols; col++) {
+        for (let row = 0; row < numberOfRows; row++) {
+            fn(matrix[col][row]);
+        }
+    }
+}
 function transposeMatrix(matrix) {
     if (!matrix.length) {
         return [];
@@ -9151,6 +9164,62 @@ class ComposerFocusStore extends SpreadsheetStore {
     }
 }
 
+/** This is a chartJS plugin that will draw connector lines between the bars of a Waterfall chart */
+const waterfallLinesPlugin = {
+    id: "waterfallLinesPlugin",
+    beforeDraw(chart, args, options) {
+        if (!options.showConnectorLines) {
+            return;
+        }
+        // Note: private properties are not in the typing of chartJS (and some of the existing types are missing properties)
+        // so we don't type anything in this file
+        const drawData = chart._metasets?.[0]?.data;
+        if (!drawData) {
+            return;
+        }
+        const ctx = chart.ctx;
+        ctx.save();
+        ctx.setLineDash([3, 2]);
+        for (let i = 0; i < drawData.length; i++) {
+            const bar = drawData[i];
+            if (bar.height === 0) {
+                continue;
+            }
+            const nextBar = getNextNonEmptyBar(drawData, i);
+            if (!nextBar) {
+                break;
+            }
+            const rect = getBarElementRect(bar);
+            const nextBarRect = getBarElementRect(nextBar);
+            const rawBarValues = bar.$context.raw;
+            const value = rawBarValues[1] - rawBarValues[0];
+            const lineY = Math.round(value < 0 ? rect.bottom - 1 : rect.top);
+            const lineStart = Math.round(rect.right);
+            const lineEnd = Math.round(nextBarRect.left);
+            ctx.strokeStyle = "#999";
+            ctx.beginPath();
+            ctx.moveTo(lineStart + 1, lineY + 0.5);
+            ctx.lineTo(lineEnd, lineY + 0.5);
+            ctx.stroke();
+        }
+        ctx.restore();
+    },
+};
+function getBarElementRect(bar) {
+    const flipped = bar.base < bar.y; // Bar are flipped for negative values in the dataset
+    return {
+        left: bar.x - bar.width / 2,
+        right: bar.x + bar.width / 2,
+        bottom: flipped ? bar.base + bar.height : bar.y + bar.height,
+        top: flipped ? bar.base : bar.y,
+    };
+}
+function getNextNonEmptyBar(bars, startIndex) {
+    return bars.find((bar, i) => i > startIndex && bar.height !== 0);
+}
+
+// @ts-ignore
+window.Chart?.register(waterfallLinesPlugin);
 class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
     static props = {
@@ -9195,10 +9264,7 @@ class ChartJsComponent extends Component {
         else {
             this.chart.data.datasets = [];
         }
-        this.chart.config.options.plugins.tooltip = chartData.options.plugins.tooltip;
-        this.chart.config.options.plugins.legend = chartData.options.plugins.legend;
-        this.chart.config.options.scales = chartData.options?.scales;
-        // ?
+        this.chart.config.options = chartData.options;
         this.chart.update("active");
     }
 }
@@ -18823,7 +18889,7 @@ class FunctionRegistry extends Registry {
         }
         const descr = addMetaInfoFromArg(addDescr);
         validateArguments(descr.args);
-        this.mapping[name] = addErrorHandling(addResultHandling(addInputHandling(descr)), name);
+        this.mapping[name] = addErrorHandling(addResultHandling(addInputHandling(descr), name), name);
         super.add(name, descr);
         return this;
     }
@@ -18862,9 +18928,7 @@ function handleError(e, functionName) {
     // so we fallback to a generic error
     if (hasStringValue(e) && isEvaluationError(e.value)) {
         if (hasStringMessage(e)) {
-            if (e.message?.includes("[[FUNCTION_NAME]]")) {
-                e.message = e.message.replace("[[FUNCTION_NAME]]", functionName);
-            }
+            replaceFunctionNamePlaceholder(e, functionName);
         }
         return e;
     }
@@ -18879,21 +18943,29 @@ function hasStringMessage(obj) {
     return (obj?.message !== undefined &&
         typeof obj.message === "string");
 }
-function addResultHandling(compute) {
-    return function (...args) {
+function addResultHandling(compute, functionName) {
+    return function computeWithResultHandling(...args) {
         const result = compute.apply(this, args);
         if (!isMatrix(result)) {
             if (typeof result === "object" && result !== null && "value" in result) {
+                replaceFunctionNamePlaceholder(result, functionName);
                 return result;
             }
             return { value: result };
         }
         if (typeof result[0][0] === "object" && result[0][0] !== null && "value" in result[0][0]) {
+            matrixForEach(result, (result) => replaceFunctionNamePlaceholder(result, functionName));
             return result;
         }
         return matrixMap(result, (row) => ({ value: row }));
     };
 }
+function replaceFunctionNamePlaceholder(fPayload, functionName) {
+    // for performance reasons: change in place and only if needed
+    if (fPayload.message?.includes("[[FUNCTION_NAME]]")) {
+        fPayload.message = fPayload.message.replace("[[FUNCTION_NAME]]", functionName);
+    }
+}
 const functionRegistry = new FunctionRegistry();
 for (let category of categories) {
     const fns = category.functions;
@@ -21236,6 +21308,263 @@ function createScatterChartRuntime(chart, getters) {
     return { chartJsConfig, background };
 }
 
+class WaterfallChart extends AbstractChart {
+    dataSets;
+    labelRange;
+    background;
+    verticalAxisPosition;
+    legendPosition;
+    aggregated;
+    type = "waterfall";
+    dataSetsHaveTitle;
+    showSubTotals;
+    firstValueAsSubtotal;
+    showConnectorLines;
+    positiveValuesColor;
+    negativeValuesColor;
+    subTotalValuesColor;
+    constructor(definition, sheetId, getters) {
+        super(definition, sheetId, getters);
+        this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
+        this.labelRange = createRange(getters, sheetId, definition.labelRange);
+        this.background = definition.background;
+        this.verticalAxisPosition = definition.verticalAxisPosition;
+        this.legendPosition = definition.legendPosition;
+        this.aggregated = definition.aggregated;
+        this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
+        this.showSubTotals = definition.showSubTotals;
+        this.showConnectorLines = definition.showConnectorLines;
+        this.positiveValuesColor = definition.positiveValuesColor;
+        this.negativeValuesColor = definition.negativeValuesColor;
+        this.subTotalValuesColor = definition.subTotalValuesColor;
+        this.firstValueAsSubtotal = definition.firstValueAsSubtotal;
+    }
+    static transformDefinition(definition, executed) {
+        return transformChartDefinitionWithDataSetsWithZone(definition, executed);
+    }
+    static validateChartDefinition(validator, definition) {
+        return validator.checkValidations(definition, checkDataset, checkLabelRange);
+    }
+    static getDefinitionFromContextCreation(context) {
+        return {
+            background: context.background,
+            dataSets: context.range ? context.range : [],
+            dataSetsHaveTitle: false,
+            aggregated: context.aggregated ?? false,
+            legendPosition: "top",
+            title: context.title || "",
+            type: "waterfall",
+            verticalAxisPosition: "left",
+            labelRange: context.auxiliaryRange || undefined,
+            showSubTotals: true,
+            showConnectorLines: true,
+            firstValueAsSubtotal: false,
+        };
+    }
+    getContextCreation() {
+        return {
+            background: this.background,
+            title: this.title,
+            range: this.dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, this.sheetId)),
+            auxiliaryRange: this.labelRange
+                ? this.getters.getRangeString(this.labelRange, this.sheetId)
+                : undefined,
+            aggregated: this.aggregated,
+        };
+    }
+    copyForSheetId(sheetId) {
+        const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
+        const labelRange = copyLabelRangeWithNewSheetId(this.sheetId, sheetId, this.labelRange);
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange, sheetId);
+        return new WaterfallChart(definition, sheetId, this.getters);
+    }
+    copyInSheetId(sheetId) {
+        const definition = this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange, sheetId);
+        return new WaterfallChart(definition, sheetId, this.getters);
+    }
+    getDefinition() {
+        return this.getDefinitionWithSpecificDataSets(this.dataSets, this.labelRange);
+    }
+    getDefinitionWithSpecificDataSets(dataSets, labelRange, targetSheetId) {
+        return {
+            type: "waterfall",
+            dataSetsHaveTitle: dataSets.length ? Boolean(dataSets[0].labelCell) : false,
+            background: this.background,
+            dataSets: dataSets.map((ds) => this.getters.getRangeString(ds.dataRange, targetSheetId || this.sheetId)),
+            legendPosition: this.legendPosition,
+            verticalAxisPosition: this.verticalAxisPosition,
+            labelRange: labelRange
+                ? this.getters.getRangeString(labelRange, targetSheetId || this.sheetId)
+                : undefined,
+            title: this.title,
+            aggregated: this.aggregated,
+            showSubTotals: this.showSubTotals,
+            showConnectorLines: this.showConnectorLines,
+            positiveValuesColor: this.positiveValuesColor,
+            negativeValuesColor: this.negativeValuesColor,
+            subTotalValuesColor: this.subTotalValuesColor,
+            firstValueAsSubtotal: this.firstValueAsSubtotal,
+        };
+    }
+    getDefinitionForExcel() {
+        // TODO: implement export excel
+        return undefined;
+    }
+    updateRanges(applyChange) {
+        const { dataSets, labelRange, isStale } = updateChartRangesWithDataSets(this.getters, applyChange, this.dataSets, this.labelRange);
+        if (!isStale) {
+            return this;
+        }
+        const definition = this.getDefinitionWithSpecificDataSets(dataSets, labelRange);
+        return new WaterfallChart(definition, this.sheetId, this.getters);
+    }
+}
+function getWaterfallConfiguration(chart, labels, dataSeriesLabels, localeFormat) {
+    const { locale, format } = localeFormat;
+    const fontColor = chartFontColor(chart.background);
+    const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
+    const negativeColor = chart.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
+    const positiveColor = chart.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
+    const subTotalColor = chart.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
+    const legend = {
+        labels: {
+            generateLabels: () => {
+                const legendValues = [
+                    { text: _t("Positive values"), fontColor, fillStyle: positiveColor },
+                    { text: _t("Negative values"), fontColor, fillStyle: negativeColor },
+                ];
+                if (chart.showSubTotals || chart.firstValueAsSubtotal) {
+                    legendValues.push({
+                        text: _t("Subtotals"),
+                        fontColor,
+                        fillStyle: subTotalColor,
+                    });
+                }
+                return legendValues;
+            },
+        },
+    };
+    if (chart.legendPosition === "none") {
+        legend.display = false;
+    }
+    else {
+        legend.position = chart.legendPosition;
+    }
+    config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
+    config.options.layout = {
+        padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
+    };
+    config.options.scales = {
+        x: {
+            ticks: {
+                padding: 5,
+                color: fontColor,
+            },
+            grid: {
+                display: false,
+            },
+        },
+        y: {
+            position: chart.verticalAxisPosition,
+            ticks: {
+                color: fontColor,
+                callback: (value) => {
+                    value = Number(value);
+                    if (isNaN(value))
+                        return value;
+                    return formatValue(value, {
+                        locale,
+                        format: !format && Math.abs(value) > 1000 ? "#,##" : format,
+                    });
+                },
+            },
+            grid: {
+                lineWidth: (context) => {
+                    return context.tick.value === 0 ? 2 : 1;
+                },
+            },
+        },
+    };
+    config.options.plugins.tooltip = {
+        callbacks: {
+            label: function (tooltipItem) {
+                const [lastValue, currentValue] = tooltipItem.raw;
+                const yLabel = currentValue - lastValue;
+                const dataSeriesIndex = Math.floor(tooltipItem.dataIndex / labels.length);
+                const dataSeriesLabel = dataSeriesLabels[dataSeriesIndex];
+                const toolTipFormat = !format && Math.abs(yLabel) > 1000 ? "#,##" : format;
+                const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                return dataSeriesLabel ? `${dataSeriesLabel}: ${yLabelStr}` : yLabelStr;
+            },
+        },
+    };
+    config.options.plugins.waterfallLinesPlugin = { showConnectorLines: chart.showConnectorLines };
+    return config;
+}
+function createWaterfallChartRuntime(chart, getters) {
+    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
+    let labels = labelValues.formattedValues;
+    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
+    if (chart.dataSetsHaveTitle &&
+        dataSetsValues[0] &&
+        labels.length > dataSetsValues[0].data.length) {
+        labels.shift();
+    }
+    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+    if (chart.aggregated) {
+        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+    }
+    if (chart.showSubTotals) {
+        labels.push(_t("Subtotal"));
+    }
+    const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets);
+    const locale = getters.getLocale();
+    const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label);
+    const config = getWaterfallConfiguration(chart, labels, dataSeriesLabels, {
+        format: dataSetFormat,
+        locale,
+    });
+    config.type = "bar";
+    const negativeColor = chart.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
+    const positiveColor = chart.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
+    const subTotalColor = chart.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
+    const backgroundColor = [];
+    const datasetValues = [];
+    const dataset = {
+        label: "",
+        data: datasetValues,
+        backgroundColor,
+    };
+    const labelsWithSubTotals = [];
+    let lastValue = 0;
+    for (const dataSetsValue of dataSetsValues) {
+        for (let i = 0; i < dataSetsValue.data.length; i++) {
+            const data = dataSetsValue.data[i];
+            labelsWithSubTotals.push(labels[i]);
+            if (isNaN(Number(data))) {
+                datasetValues.push([lastValue, lastValue]);
+                backgroundColor.push("");
+                continue;
+            }
+            datasetValues.push([lastValue, data + lastValue]);
+            let color = data >= 0 ? positiveColor : negativeColor;
+            if (i === 0 && dataSetsValue === dataSetsValues[0] && chart.firstValueAsSubtotal) {
+                color = subTotalColor;
+            }
+            backgroundColor.push(color);
+            lastValue += data;
+        }
+        if (chart.showSubTotals) {
+            labelsWithSubTotals.push(_t("Subtotal"));
+            datasetValues.push([0, lastValue]);
+            backgroundColor.push(subTotalColor);
+        }
+    }
+    config.data.datasets.push(dataset);
+    config.data.labels = labelsWithSubTotals.map(truncateLabel);
+    return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
+}
+
 /**
  * This registry is intended to map a cell content (raw string) to
  * an instance of a cell.
@@ -21245,9 +21574,9 @@ chartRegistry.add("bar", {
     match: (type) => type === "bar",
     createChart: (definition, sheetId, getters) => new BarChart(definition, sheetId, getters),
     getChartRuntime: createBarChartRuntime,
-    validateChartDefinition: (validator, definition) => BarChart.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => BarChart.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => BarChart.getDefinitionFromContextCreation(context),
+    validateChartDefinition: BarChart.validateChartDefinition,
+    transformDefinition: BarChart.transformDefinition,
+    getChartDefinitionFromContextCreation: BarChart.getDefinitionFromContextCreation,
     name: _t("Bar"),
     sequence: 10,
 });
@@ -21255,9 +21584,9 @@ chartRegistry.add("combo", {
     match: (type) => type === "combo",
     createChart: (definition, sheetId, getters) => new ComboChart(definition, sheetId, getters),
     getChartRuntime: createComboChartRuntime,
-    validateChartDefinition: (validator, definition) => ComboChart.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => ComboChart.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => ComboChart.getDefinitionFromContextCreation(context),
+    validateChartDefinition: ComboChart.validateChartDefinition,
+    transformDefinition: ComboChart.transformDefinition,
+    getChartDefinitionFromContextCreation: ComboChart.getDefinitionFromContextCreation,
     name: _t("Combo"),
     sequence: 15,
 });
@@ -21265,9 +21594,9 @@ chartRegistry.add("line", {
     match: (type) => type === "line",
     createChart: (definition, sheetId, getters) => new LineChart(definition, sheetId, getters),
     getChartRuntime: createLineChartRuntime,
-    validateChartDefinition: (validator, definition) => LineChart.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => LineChart.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => LineChart.getDefinitionFromContextCreation(context),
+    validateChartDefinition: LineChart.validateChartDefinition,
+    transformDefinition: LineChart.transformDefinition,
+    getChartDefinitionFromContextCreation: LineChart.getDefinitionFromContextCreation,
     name: _t("Line"),
     sequence: 20,
 });
@@ -21275,9 +21604,9 @@ chartRegistry.add("pie", {
     match: (type) => type === "pie",
     createChart: (definition, sheetId, getters) => new PieChart(definition, sheetId, getters),
     getChartRuntime: createPieChartRuntime,
-    validateChartDefinition: (validator, definition) => PieChart.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => PieChart.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => PieChart.getDefinitionFromContextCreation(context),
+    validateChartDefinition: PieChart.validateChartDefinition,
+    transformDefinition: PieChart.transformDefinition,
+    getChartDefinitionFromContextCreation: PieChart.getDefinitionFromContextCreation,
     name: _t("Pie"),
     sequence: 30,
 });
@@ -21285,9 +21614,9 @@ chartRegistry.add("scorecard", {
     match: (type) => type === "scorecard",
     createChart: (definition, sheetId, getters) => new ScorecardChart$1(definition, sheetId, getters),
     getChartRuntime: createScorecardChartRuntime,
-    validateChartDefinition: (validator, definition) => ScorecardChart$1.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => ScorecardChart$1.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => ScorecardChart$1.getDefinitionFromContextCreation(context),
+    validateChartDefinition: ScorecardChart$1.validateChartDefinition,
+    transformDefinition: ScorecardChart$1.transformDefinition,
+    getChartDefinitionFromContextCreation: ScorecardChart$1.getDefinitionFromContextCreation,
     name: _t("Scorecard"),
     sequence: 40,
 });
@@ -21295,9 +21624,9 @@ chartRegistry.add("gauge", {
     match: (type) => type === "gauge",
     createChart: (definition, sheetId, getters) => new GaugeChart(definition, sheetId, getters),
     getChartRuntime: createGaugeChartRuntime,
-    validateChartDefinition: (validator, definition) => GaugeChart.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => GaugeChart.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => GaugeChart.getDefinitionFromContextCreation(context),
+    validateChartDefinition: GaugeChart.validateChartDefinition,
+    transformDefinition: GaugeChart.transformDefinition,
+    getChartDefinitionFromContextCreation: GaugeChart.getDefinitionFromContextCreation,
     name: _t("Gauge"),
     sequence: 50,
 });
@@ -21305,12 +21634,22 @@ chartRegistry.add("scatter", {
     match: (type) => type === "scatter",
     createChart: (definition, sheetId, getters) => new ScatterChart(definition, sheetId, getters),
     getChartRuntime: createScatterChartRuntime,
-    validateChartDefinition: (validator, definition) => ScatterChart.validateChartDefinition(validator, definition),
-    transformDefinition: (definition, executed) => ScatterChart.transformDefinition(definition, executed),
-    getChartDefinitionFromContextCreation: (context) => ScatterChart.getDefinitionFromContextCreation(context),
+    validateChartDefinition: ScatterChart.validateChartDefinition,
+    transformDefinition: ScatterChart.transformDefinition,
+    getChartDefinitionFromContextCreation: ScatterChart.getDefinitionFromContextCreation,
     name: _t("Scatter"),
     sequence: 60,
 });
+chartRegistry.add("waterfall", {
+    match: (type) => type === "waterfall",
+    createChart: (definition, sheetId, getters) => new WaterfallChart(definition, sheetId, getters),
+    getChartRuntime: createWaterfallChartRuntime,
+    validateChartDefinition: WaterfallChart.validateChartDefinition,
+    transformDefinition: WaterfallChart.transformDefinition,
+    getChartDefinitionFromContextCreation: WaterfallChart.getDefinitionFromContextCreation,
+    name: _t("Waterfall"),
+    sequence: 70,
+});
 const chartComponentRegistry = new Registry();
 chartComponentRegistry.add("line", ChartJsComponent);
 chartComponentRegistry.add("bar", ChartJsComponent);
@@ -21319,6 +21658,7 @@ chartComponentRegistry.add("pie", ChartJsComponent);
 chartComponentRegistry.add("gauge", GaugeChartComponent);
 chartComponentRegistry.add("scatter", ChartJsComponent);
 chartComponentRegistry.add("scorecard", ScorecardChart);
+chartComponentRegistry.add("waterfall", ChartJsComponent);
 
 /**
  * Registry intended to support usual currencies. It is mainly used to create
@@ -23298,6 +23638,7 @@ class LinkEditor extends Component {
                     this.save();
                 }
                 ev.stopPropagation();
+                ev.preventDefault();
                 break;
             case "Escape":
                 this.cancel();
@@ -26951,8 +27292,8 @@ class ChartLabelRange extends Component {
     };
 }
 
-class LineBarPieConfigPanel extends Component {
-    static template = "o-spreadsheet-LineBarPieConfigPanel";
+class GenericChartConfigPanel extends Component {
+    static template = "o-spreadsheet-GenericChartConfigPanel";
     static components = {
         SelectionInput,
         ValidationMessages,
@@ -27069,7 +27410,7 @@ class LineBarPieConfigPanel extends Component {
     }
 }
 
-class BarConfigPanel extends LineBarPieConfigPanel {
+class BarConfigPanel extends GenericChartConfigPanel {
     static template = "o-spreadsheet-BarConfigPanel";
     get stackedLabel() {
         return _t("Stacked barchart");
@@ -27676,8 +28017,8 @@ class ChartTitle extends Component {
     }
 }
 
-class LineBarPieDesignPanel extends Component {
-    static template = "o-spreadsheet-LineBarPieDesignPanel";
+class GenericChartDesignPanel extends Component {
+    static template = "o-spreadsheet-GenericChartDesignPanel";
     static components = { RoundColorPicker, ChartTitle, Section };
     static props = {
         figureId: String,
@@ -27706,11 +28047,11 @@ class LineBarPieDesignPanel extends Component {
     }
 }
 
-class BarChartDesignPanel extends LineBarPieDesignPanel {
+class BarChartDesignPanel extends GenericChartDesignPanel {
     static template = "o-spreadsheet-BarChartDesignPanel";
 }
 
-class ComboChartConfigPanel extends LineBarPieConfigPanel {
+class ComboChartConfigPanel extends GenericChartConfigPanel {
     static template = "o-spreadsheet-ComboChartConfigPanel";
     get shouldUseRightAxis() {
         return _t("Use right axis for line series");
@@ -27722,7 +28063,7 @@ class ComboChartConfigPanel extends LineBarPieConfigPanel {
     }
 }
 
-class ComboChartDesignPanel extends LineBarPieDesignPanel {
+class ComboChartDesignPanel extends GenericChartDesignPanel {
     static template = "o-spreadsheet-ComboChartDesignPanel";
 }
 
@@ -27875,7 +28216,7 @@ class GaugeChartDesignPanel extends Component {
     }
 }
 
-class LineConfigPanel extends LineBarPieConfigPanel {
+class LineConfigPanel extends GenericChartConfigPanel {
     static template = "o-spreadsheet-LineConfigPanel";
     get canTreatLabelsAsText() {
         const chart = this.env.model.getters.getChart(this.props.figureId);
@@ -27924,11 +28265,11 @@ class LineConfigPanel extends LineBarPieConfigPanel {
     }
 }
 
-class LineChartDesignPanel extends LineBarPieDesignPanel {
+class LineChartDesignPanel extends GenericChartDesignPanel {
     static template = "o-spreadsheet-LineChartDesignPanel";
 }
 
-class ScatterConfigPanel extends LineBarPieConfigPanel {
+class ScatterConfigPanel extends GenericChartConfigPanel {
     static template = "o-spreadsheet-ScatterConfigPanel";
     get canTreatLabelsAsText() {
         const chart = this.env.model.getters.getChart(this.props.figureId);
@@ -28067,6 +28408,46 @@ class ScorecardChartDesignPanel extends Component {
     }
 }
 
+class WaterfallChartDesignPanel extends GenericChartDesignPanel {
+    static template = "o-spreadsheet-WaterfallChartDesignPanel";
+    static components = { ...GenericChartDesignPanel.components, Checkbox, RoundColorPicker };
+    state = useState({ pickerOpened: false });
+    setup() {
+        super.setup();
+        useExternalListener(window, "click", this.closePicker);
+    }
+    onUpdateShowSubTotals(showSubTotals) {
+        this.props.updateChart(this.props.figureId, { showSubTotals });
+    }
+    onUpdateShowConnectorLines(showConnectorLines) {
+        this.props.updateChart(this.props.figureId, { showConnectorLines });
+    }
+    onUpdateFirstValueAsSubtotal(firstValueAsSubtotal) {
+        this.props.updateChart(this.props.figureId, { firstValueAsSubtotal });
+    }
+    updateColor(colorName, color) {
+        this.props.updateChart(this.props.figureId, { [colorName]: color });
+    }
+    closePicker() {
+        this.state.pickerOpened = false;
+    }
+    togglePicker() {
+        this.state.pickerOpened = !this.state.pickerOpened;
+    }
+    get positiveValuesColor() {
+        return (this.props.definition.positiveValuesColor ||
+            CHART_WATERFALL_POSITIVE_COLOR);
+    }
+    get negativeValuesColor() {
+        return (this.props.definition.negativeValuesColor ||
+            CHART_WATERFALL_NEGATIVE_COLOR);
+    }
+    get subTotalValuesColor() {
+        return (this.props.definition.subTotalValuesColor ||
+            CHART_WATERFALL_SUBTOTAL_COLOR);
+    }
+}
+
 const chartSidePanelComponentRegistry = new Registry();
 chartSidePanelComponentRegistry
     .add("line", {
@@ -28086,8 +28467,8 @@ chartSidePanelComponentRegistry
     design: ComboChartDesignPanel,
 })
     .add("pie", {
-    configuration: LineBarPieConfigPanel,
-    design: LineBarPieDesignPanel,
+    configuration: GenericChartConfigPanel,
+    design: GenericChartDesignPanel,
 })
     .add("gauge", {
     configuration: GaugeChartConfigPanel,
@@ -28096,6 +28477,10 @@ chartSidePanelComponentRegistry
     .add("scorecard", {
     configuration: ScorecardChartConfigPanel,
     design: ScorecardChartDesignPanel,
+})
+    .add("waterfall", {
+    configuration: GenericChartConfigPanel,
+    design: WaterfallChartDesignPanel,
 });
 
 class MainChartPanelStore extends SpreadsheetStore {
@@ -30833,6 +31218,9 @@ function createFilter(id, range, config, createRange) {
         filteredRange: filteredZone.top > filteredZone.bottom ? undefined : filteredRange,
     };
 }
+function isStaticTable(table) {
+    return table.type === "static" || table.type === "forceStatic";
+}
 function getComputedTableStyle(tableConfig, numberOfCols, numberOfRows) {
     return {
         borders: getAllTableBorders(tableConfig, numberOfCols, numberOfRows),
@@ -31367,7 +31755,12 @@ class TablePanel extends Component {
             const extendedZone = this.env.model.getters.getContiguousZone(sheetId, newRange.zone);
             newRange = this.env.model.getters.getRangeFromZone(sheetId, extendedZone);
         }
-        const result = this.env.model.dispatch("UPDATE_TABLE", {
+        const newTableZone = newRange.zone;
+        const oldTableZone = this.props.table.range.zone;
+        const cmdToCall = newTableZone.top === oldTableZone.top && newTableZone.left === oldTableZone.left
+            ? "RESIZE_TABLE"
+            : "UPDATE_TABLE";
+        const result = this.env.model.dispatch(cmdToCall, {
             sheetId,
             zone: this.props.table.range.zone,
             newTableRange: newRange.rangeData,
@@ -31856,6 +32249,38 @@ class DOMFocusableElementStore {
     }
 }
 
+class ArrayFormulaHighlight extends SpreadsheetStore {
+    highlightStore = this.get(HighlightStore);
+    constructor(get) {
+        super(get);
+        this.highlightStore.register(this);
+    }
+    get highlights() {
+        const zone = this.getHighlightZone();
+        if (!zone) {
+            return [];
+        }
+        const sheetId = this.model.getters.getActiveSheetId();
+        return [
+            {
+                sheetId,
+                zone,
+                color: "#17A2B8",
+                noFill: true,
+                thinLine: true,
+            },
+        ];
+    }
+    getHighlightZone() {
+        const position = this.model.getters.getActivePosition();
+        const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
+        const spreadZone = spreader
+            ? this.model.getters.getSpreadZone(spreader)
+            : this.model.getters.getSpreadZone(position);
+        return spreadZone;
+    }
+}
+
 // -----------------------------------------------------------------------------
 // Autofill
 // -----------------------------------------------------------------------------
@@ -33632,6 +34057,10 @@ css /*SCSS*/ `
       height: 0px;
     }
   }
+  .o-figure-container {
+    -webkit-user-select: none; // safari
+    user-select: none;
+  }
 `;
 /**
  * Each figure ⭐ is positioned inside a container `div` placed and sized
@@ -36033,6 +36462,77 @@ class SidePanelStore extends SpreadsheetStore {
     }
 }
 
+const SIZE = 3;
+const COLOR = "#777";
+css /* scss */ `
+  .o-table-resizer {
+    width: ${SIZE}px;
+    height: ${SIZE}px;
+    border-bottom: ${SIZE}px solid ${COLOR};
+    border-right: ${SIZE}px solid ${COLOR};
+    cursor: nwse-resize;
+  }
+`;
+class TableResizer extends Component {
+    static template = "o-spreadsheet-TableResizer";
+    static props = { table: Object };
+    state = useState({ highlightZone: undefined });
+    setup() {
+        useHighlights(this);
+    }
+    get containerStyle() {
+        const tableZone = this.props.table.range.zone;
+        const bottomRight = { ...tableZone, left: tableZone.right, top: tableZone.bottom };
+        const rect = this.env.model.getters.getVisibleRect(bottomRight);
+        if (rect.height === 0 || rect.width === 0) {
+            return cssPropertiesToCss({ display: "none" });
+        }
+        return cssPropertiesToCss({
+            top: `${rect.y + rect.height - SIZE * 2}px`,
+            left: `${rect.x + rect.width - SIZE * 2}px`,
+        });
+    }
+    onMouseDown(ev) {
+        const tableZone = this.props.table.range.zone;
+        const topLeft = { col: tableZone.left, row: tableZone.top };
+        document.body.style.cursor = "nwse-resize";
+        const onMouseUp = () => {
+            document.body.style.cursor = "";
+            const newTableZone = this.state.highlightZone;
+            if (!newTableZone)
+                return;
+            const sheetId = this.props.table.range.sheetId;
+            this.env.model.dispatch("RESIZE_TABLE", {
+                sheetId,
+                zone: this.props.table.range.zone,
+                newTableRange: this.env.model.getters.getRangeDataFromZone(sheetId, newTableZone),
+            });
+            this.state.highlightZone = undefined;
+        };
+        const onMouseMove = (col, row, ev) => {
+            this.state.highlightZone = {
+                left: topLeft.col,
+                top: topLeft.row,
+                right: Math.max(col, topLeft.col),
+                bottom: Math.max(row, topLeft.row),
+            };
+        };
+        dragAndDropBeyondTheViewport(this.env, onMouseMove, onMouseUp);
+    }
+    get highlights() {
+        if (!this.state.highlightZone)
+            return [];
+        return [
+            {
+                zone: this.state.highlightZone,
+                sheetId: this.props.table.range.sheetId,
+                color: COLOR,
+                noFill: true,
+            },
+        ];
+    }
+}
+
 const registries$1 = {
     ROW: rowMenuRegistry,
     COL: colMenuRegistry,
@@ -36060,6 +36560,7 @@ class Grid extends Component {
         Popover,
         VerticalScrollBar,
         HorizontalScrollBar,
+        TableResizer,
     };
     HEADER_HEIGHT = HEADER_HEIGHT;
     HEADER_WIDTH = HEADER_WIDTH;
@@ -36088,6 +36589,7 @@ class Grid extends Component {
         this.composerFocusStore = useStore(ComposerFocusStore);
         this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
         this.sidePanel = useStore(SidePanelStore);
+        useStore(ArrayFormulaHighlight);
         useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
         useExternalListener(document.body, "cut", this.copy.bind(this, true));
         useExternalListener(document.body, "copy", this.copy.bind(this, false));
@@ -36656,6 +37158,10 @@ class Grid extends Component {
     onComposerContentFocused() {
         this.composerFocusStore.focusGridComposerContent();
     }
+    get staticTables() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        return this.env.model.getters.getCoreTables(sheetId).filter(isStaticTable);
+    }
 }
 
 /**
@@ -45449,7 +45955,7 @@ class SheetPlugin extends CorePlugin {
 }
 
 class TablePlugin extends CorePlugin {
-    static getters = ["getCoreTable", "getCoreTables"];
+    static getters = ["getCoreTable", "getCoreTables", "getCoreTableMatchingTopLeft"];
     tables = {};
     adaptRanges(applyChange, sheetId) {
         const sheetIds = sheetId ? [sheetId] : this.getters.getSheetIds();
@@ -45470,7 +45976,7 @@ class TablePlugin extends CorePlugin {
                     ? "TableOverlap" /* CommandResult.TableOverlap */
                     : "Success" /* CommandResult.Success */, (cmd) => this.checkTableConfigUpdateIsValid(cmd.config));
             case "UPDATE_TABLE":
-                const updatedTable = this.getTableFromZone(cmd.sheetId, cmd.zone);
+                const updatedTable = this.getCoreTableMatchingTopLeft(cmd.sheetId, cmd.zone);
                 if (!updatedTable) {
                     return "TableNotFound" /* CommandResult.TableNotFound */;
                 }
@@ -45626,10 +46132,9 @@ class TablePlugin extends CorePlugin {
         }
         return direction;
     }
-    getTableFromZone(sheetId, zone) {
+    getCoreTableMatchingTopLeft(sheetId, zone) {
         for (const table of this.getCoreTables(sheetId)) {
             const tableZone = table.range.zone;
-            // Only check top left to match dynamic tables
             if (tableZone.left === zone.left && tableZone.top === zone.top) {
                 return table;
             }
@@ -45645,7 +46150,7 @@ class TablePlugin extends CorePlugin {
         if (zoneIsInSheet !== "Success" /* CommandResult.Success */) {
             return zoneIsInSheet;
         }
-        const updatedTable = this.getTableFromZone(cmd.sheetId, cmd.zone);
+        const updatedTable = this.getCoreTableMatchingTopLeft(cmd.sheetId, cmd.zone);
         if (!updatedTable) {
             return "TableNotFound" /* CommandResult.TableNotFound */;
         }
@@ -45695,7 +46200,7 @@ class TablePlugin extends CorePlugin {
         };
     }
     updateTable(cmd) {
-        const table = this.getTableFromZone(cmd.sheetId, cmd.zone);
+        const table = this.getCoreTableMatchingTopLeft(cmd.sheetId, cmd.zone);
         if (!table) {
             return;
         }
@@ -51736,6 +52241,7 @@ const invalidateTableStyleCommands = [
     "UPDATE_TABLE",
     "UPDATE_FILTER",
     "REMOVE_TABLE",
+    "RESIZE_TABLE",
 ];
 const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
 function doesCommandInvalidatesTableStyle(cmd) {
@@ -52370,7 +52876,10 @@ class TableAutofillPlugin extends UIPlugin {
                 const { col, row } = cmd;
                 const tableContentZone = getTableContentZone(table.range.zone, table.config);
                 if (tableContentZone && isInside(col, row, tableContentZone)) {
-                    this.autofillTableZone(cmd, tableContentZone);
+                    const top = cmd.autofillRowStart ?? tableContentZone.top;
+                    const bottom = cmd.autofillRowEnd ?? tableContentZone.bottom;
+                    const autofillZone = { ...tableContentZone, top, bottom };
+                    this.autofillTableZone(cmd, autofillZone);
                 }
                 break;
         }
@@ -52404,6 +52913,50 @@ class TableAutofillPlugin extends UIPlugin {
     }
 }
 
+class TableResizeUI extends UIPlugin {
+    allowDispatch(cmd) {
+        switch (cmd.type) {
+            case "RESIZE_TABLE":
+                const table = this.getters.getCoreTableMatchingTopLeft(cmd.sheetId, cmd.zone);
+                if (!table) {
+                    return "TableNotFound" /* CommandResult.TableNotFound */;
+                }
+                const oldTableZone = table.range.zone;
+                const newTableZone = this.getters.getRangeFromRangeData(cmd.newTableRange).zone;
+                if (newTableZone.top !== oldTableZone.top || newTableZone.left !== oldTableZone.left) {
+                    return "InvalidTableResize" /* CommandResult.InvalidTableResize */;
+                }
+                return this.canDispatch("UPDATE_TABLE", { ...cmd }).reasons;
+        }
+        return "Success" /* CommandResult.Success */;
+    }
+    handle(cmd) {
+        switch (cmd.type) {
+            case "RESIZE_TABLE": {
+                const table = this.getters.getCoreTableMatchingTopLeft(cmd.sheetId, cmd.zone);
+                this.dispatch("UPDATE_TABLE", { ...cmd });
+                if (!table || !table.config.automaticAutofill)
+                    return;
+                const oldTableZone = table.range.zone;
+                const newTableZone = this.getters.getRangeFromRangeData(cmd.newTableRange).zone;
+                if (newTableZone.bottom >= oldTableZone.bottom) {
+                    for (let col = newTableZone.left; col <= newTableZone.right; col++) {
+                        const autofillSource = { col, row: oldTableZone.bottom, sheetId: cmd.sheetId };
+                        if (this.getters.getCell(autofillSource)?.content.startsWith("=")) {
+                            this.dispatch("AUTOFILL_TABLE_COLUMN", {
+                                ...autofillSource,
+                                autofillRowStart: oldTableZone.bottom,
+                                autofillRowEnd: newTableZone.bottom,
+                            });
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+    }
+}
+
 /**
  * Clipboard Plugin
  *
@@ -54078,13 +54631,14 @@ class SheetViewPlugin extends UIPlugin {
         }
     }
     handleEvent(event) {
+        const sheetId = this.getters.getActiveSheetId();
         if (event.options.scrollIntoView) {
             let { col, row } = findCellInNewZone(event.previousAnchor.zone, event.anchor.zone);
             if (event.mode === "updateAnchor") {
                 const oldZone = event.previousAnchor.zone;
                 const newZone = event.anchor.zone;
                 // altering a zone should not move the viewport in a dimension that wasn't changed
-                const { top, bottom, left, right } = this.getters.getActiveMainViewport();
+                const { top, bottom, left, right } = this.getMainInternalViewport(sheetId);
                 if (oldZone.left === newZone.left && oldZone.right === newZone.right) {
                     col = left > col || col > right ? left : col;
                 }
@@ -54092,7 +54646,6 @@ class SheetViewPlugin extends UIPlugin {
                     row = top > row || row > bottom ? top : row;
                 }
             }
-            const sheetId = this.getters.getActiveSheetId();
             col = Math.min(col, this.getters.getNumberCols(sheetId) - 1);
             row = Math.min(row, this.getters.getNumberRows(sheetId) - 1);
             if (!this.sheetsWithDirtyViewports.has(sheetId)) {
@@ -54129,16 +54682,16 @@ class SheetViewPlugin extends UIPlugin {
                 this.setSheetViewOffset(cmd.offsetX, cmd.offsetY);
                 break;
             case "SHIFT_VIEWPORT_DOWN":
-                const { top } = this.getActiveMainViewport();
                 const sheetId = this.getters.getActiveSheetId();
-                const shiftedOffsetY = this.clipOffsetY(this.getters.getRowDimensions(sheetId, top).start + this.sheetViewHeight);
-                this.shiftVertically(shiftedOffsetY);
+                const { top, viewportHeight, offsetCorrectionY } = this.getMainInternalViewport(sheetId);
+                const topRowDims = this.getters.getRowDimensions(sheetId, top);
+                this.shiftVertically(topRowDims.start + viewportHeight - offsetCorrectionY);
                 break;
             case "SHIFT_VIEWPORT_UP": {
-                const { top } = this.getActiveMainViewport();
                 const sheetId = this.getters.getActiveSheetId();
-                const shiftedOffsetY = this.clipOffsetY(this.getters.getRowDimensions(sheetId, top).end - this.sheetViewHeight);
-                this.shiftVertically(shiftedOffsetY);
+                const { top, viewportHeight, offsetCorrectionY } = this.getMainInternalViewport(sheetId);
+                const topRowDims = this.getters.getRowDimensions(sheetId, top);
+                this.shiftVertically(topRowDims.end - offsetCorrectionY - viewportHeight);
                 break;
             }
             case "REMOVE_TABLE":
@@ -54561,17 +55114,6 @@ class SheetViewPlugin extends UIPlugin {
         const { maxOffsetX, maxOffsetY } = this.getMaximumSheetOffset();
         Object.values(this.getSubViewports(sheetId)).forEach((viewport) => viewport.setViewportOffset(clip(offsetX, 0, maxOffsetX), clip(offsetY, 0, maxOffsetY)));
     }
-    /**
-     * Clip the vertical offset within the allowed range.
-     * Not above the sheet, nor below the sheet.
-     */
-    clipOffsetY(offsetY) {
-        const { height } = this.getMainViewportRect();
-        const maxOffset = height - this.sheetViewHeight;
-        offsetY = Math.min(offsetY, maxOffset);
-        offsetY = Math.max(offsetY, 0);
-        return offsetY;
-    }
     getViewportOffset(sheetId) {
         return {
             x: this.viewports[sheetId]?.bottomRight.offsetScrollbarX || 0,
@@ -54627,12 +55169,15 @@ class SheetViewPlugin extends UIPlugin {
      * viewport top.
      */
     shiftVertically(offset) {
-        const { top } = this.getActiveMainViewport();
+        const sheetId = this.getters.getActiveSheetId();
+        const { top } = this.getMainInternalViewport(sheetId);
         const { scrollX } = this.getActiveSheetScrollInfo();
         this.setSheetViewOffset(scrollX, offset);
         const { anchor } = this.getters.getSelection();
-        const deltaRow = this.getActiveMainViewport().top - top;
-        this.selection.selectCell(anchor.cell.col, anchor.cell.row + deltaRow);
+        if (anchor.cell.row >= this.getters.getPaneDivisions(sheetId).ySplit) {
+            const deltaRow = this.getMainInternalViewport(sheetId).top - top;
+            this.selection.selectCell(anchor.cell.col, anchor.cell.row + deltaRow);
+        }
     }
     getVisibleFigures() {
         const sheetId = this.getters.getActiveSheetId();
@@ -54821,7 +55366,8 @@ const featurePluginRegistry = new Registry()
     .add("collaborative", CollaborativePlugin)
     .add("history", HistoryPlugin)
     .add("data_cleanup", DataCleanupPlugin)
-    .add("table_autofill", TableAutofillPlugin);
+    .add("table_autofill", TableAutofillPlugin)
+    .add("table_ui_resize", TableResizeUI);
 // Plugins which have a state, but which should not be shared in collaborative
 const statefulUIPluginRegistry = new Registry()
     .add("selection", GridSelectionPlugin)
@@ -54889,38 +55435,6 @@ class ImageProvider {
     }
 }
 
-class ArrayFormulaHighlight extends SpreadsheetStore {
-    highlightStore = this.get(HighlightStore);
-    constructor(get) {
-        super(get);
-        this.highlightStore.register(this);
-    }
-    get highlights() {
-        const zone = this.getHighlightZone();
-        if (!zone) {
-            return [];
-        }
-        const sheetId = this.model.getters.getActiveSheetId();
-        return [
-            {
-                sheetId,
-                zone,
-                color: "#17A2B8",
-                noFill: true,
-                thinLine: true,
-            },
-        ];
-    }
-    getHighlightZone() {
-        const position = this.model.getters.getActivePosition();
-        const spreader = this.model.getters.getArrayFormulaSpreadingOn(position);
-        const spreadZone = spreader
-            ? this.model.getters.getSpreadZone(spreader)
-            : this.model.getters.getSpreadZone(position);
-        return spreadZone;
-    }
-}
-
 const RIPPLE_KEY_FRAMES = [
     { transform: "scale(0)" },
     { transform: "scale(0.8)", offset: 0.33 },
@@ -57254,7 +57768,6 @@ class Spreadsheet extends Component {
         this.notificationStore = useStore(NotificationStore);
         this.composerFocusStore = useStore(ComposerFocusStore);
         this.sidePanel = useStore(SidePanelStore);
-        useStore(ArrayFormulaHighlight);
         this.keyDownMapping = {
             "CTRL+H": () => this.sidePanel.toggle("FindAndReplace", {}),
             "CTRL+F": () => this.sidePanel.toggle("FindAndReplace", {}),
@@ -61196,9 +61709,9 @@ const components = {
     GridOverlay,
     ScorecardChart,
     LineConfigPanel,
-    LineBarPieDesignPanel,
+    GenericChartDesignPanel,
     BarConfigPanel,
-    LineBarPieConfigPanel,
+    GenericChartConfigPanel,
     GaugeChartConfigPanel,
     GaugeChartDesignPanel,
     ScorecardChartConfigPanel,
@@ -61246,6 +61759,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, 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.3.0-alpha.3";
-__info__.date = "2024-04-10T12:28:23.658Z";
-__info__.hash = "80b5056";
+__info__.version = "17.3.0-alpha.4";
+__info__.date = "2024-04-15T11:02:51.551Z";
+__info__.hash = "a32a1df";