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

package/dist/o-spreadsheet.cjs.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.2
- * @date 2024-04-05T14:01:07.060Z
- * @hash 8c5a229
+ * @version 17.3.0-alpha.4
+ * @date 2024-04-15T11:02:51.551Z
+ * @hash a32a1df
  */
 
 'use strict';
@@ -39,6 +39,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",
@@ -190,7 +193,7 @@ const DEFAULT_GAUGE_LOWER_COLOR = "#cc0000";
 const DEFAULT_GAUGE_MIDDLE_COLOR = "#f1c232";
 const DEFAULT_GAUGE_UPPER_COLOR = "#6aa84f";
 const DEFAULT_SCORECARD_BASELINE_MODE = "difference";
-const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6aa84f";
+const DEFAULT_SCORECARD_BASELINE_COLOR_UP = "#6AA84F";
 const DEFAULT_SCORECARD_BASELINE_COLOR_DOWN = "#E06666";
 const LINE_FILL_TRANSPARENCY = 0.4;
 // session
@@ -562,7 +565,7 @@ function deepEquals(o1, o2) {
     if (typeof o1 !== typeof o2)
         return false;
     if (typeof o1 !== "object")
-        return o1 === o2;
+        return false;
     // Objects can have different keys if the values are undefined
     for (const key in o2) {
         if (!(key in o1) && o2[key] !== undefined) {
@@ -1886,6 +1889,11 @@ const invalidateCFEvaluationCommands = new Set([
     "REMOVE_CONDITIONAL_FORMAT",
     "CHANGE_CONDITIONAL_FORMAT_PRIORITY",
 ]);
+const invalidateBordersCommands = new Set([
+    "AUTOFILL_CELL",
+    "SET_BORDER",
+    "SET_ZONE_BORDERS",
+]);
 const readonlyAllowedCommands = new Set([
     "START",
     "ACTIVATE_SHEET",
@@ -2117,6 +2125,7 @@ exports.CommandResult = void 0;
     CommandResult["NoChanges"] = "NoChanges";
     CommandResult["InvalidInputId"] = "InvalidInputId";
     CommandResult["SheetIsHidden"] = "SheetIsHidden";
+    CommandResult["InvalidTableResize"] = "InvalidTableResize";
 })(exports.CommandResult || (exports.CommandResult = {}));
 
 const PLAIN_TEXT_FORMAT = "@"; // see OpenXML spec §18.8.31
@@ -2183,6 +2192,7 @@ const CellErrorType = {
     BadExpression: "#BAD_EXPR",
     CircularDependency: "#CYCLE",
     UnknownFunction: "#NAME?",
+    DivisionByZero: "#DIV/0!",
     GenericError: "#ERROR",
 };
 const errorTypes = new Set(Object.values(CellErrorType));
@@ -2221,9 +2231,9 @@ class UnknownFunctionError extends EvaluationError {
 
 // HELPERS
 const SORT_TYPES_ORDER = ["number", "string", "boolean", "undefined"];
-function assert(condition, message) {
+function assert(condition, message, value) {
     if (!condition()) {
-        throw new EvaluationError(message);
+        throw new EvaluationError(message, value);
     }
 }
 function inferFormat(data) {
@@ -2301,6 +2311,9 @@ function strictToInteger(value, locale) {
 function assertNumberGreaterThanOrEqualToOne(value) {
     assert(() => value >= 1, _t("The function [[FUNCTION_NAME]] expects a number value to be greater than or equal to 1, but receives %s.", value.toString()));
 }
+function assertNotZero(value) {
+    assert(() => value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
+}
 function toString(data) {
     const value = toValue(data);
     switch (typeof value) {
@@ -2510,6 +2523,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 [];
@@ -3066,6 +3088,9 @@ function applyInternalFormat(value, internalFormat, locale) {
     return formattedValue;
 }
 function applyInternalNumberFormat(value, format, locale) {
+    if (value === Infinity) {
+        return "∞" + (format.isPercent ? "%" : "");
+    }
     if (format.isPercent) {
         value = value * 100;
     }
@@ -3409,6 +3434,46 @@ function roundFormat(format) {
     });
     return convertInternalFormatToFormat(roundedFormat);
 }
+function humanizeNumber({ value, format }, locale) {
+    const numberFormat = formatLargeNumber({
+        value,
+        format,
+    }, undefined, locale);
+    return formatValue(value, { format: numberFormat, locale });
+}
+function formatLargeNumber(arg, unit, locale) {
+    let value = 0;
+    try {
+        value = Math.abs(toNumber(arg?.value, locale));
+    }
+    catch (e) {
+        return "";
+    }
+    const format = arg?.format;
+    if (unit !== undefined) {
+        const postFix = unit?.value;
+        switch (postFix) {
+            case "k":
+                return createLargeNumberFormat(format, 1e3, "k");
+            case "m":
+                return createLargeNumberFormat(format, 1e6, "m");
+            case "b":
+                return createLargeNumberFormat(format, 1e9, "b");
+            default:
+                throw new EvaluationError(_t("The formatting unit should be 'k', 'm' or 'b'."));
+        }
+    }
+    if (value < 1e5) {
+        return createLargeNumberFormat(format, 0, "");
+    }
+    else if (value < 1e8) {
+        return createLargeNumberFormat(format, 1e3, "k");
+    }
+    else if (value < 1e11) {
+        return createLargeNumberFormat(format, 1e6, "m");
+    }
+    return createLargeNumberFormat(format, 1e9, "b");
+}
 function createLargeNumberFormat(format, magnitude, postFix, locale) {
     const internalFormat = parseFormat(format || "#,##0");
     const largeNumberFormat = [];
@@ -4601,14 +4666,19 @@ function getDefaultCellHeight(ctx, cell, colSize) {
 const textWidthCache = {};
 function computeTextWidth(context, text, style, fontUnit = "pt") {
     const font = computeTextFont(style, fontUnit);
+    context.save();
+    context.font = font;
+    const width = computeCachedTextWidth(context, text);
+    context.restore();
+    return width;
+}
+function computeCachedTextWidth(context, text) {
+    const font = context.font;
     if (!textWidthCache[font]) {
         textWidthCache[font] = {};
     }
     if (textWidthCache[font][text] === undefined) {
-        context.save();
-        context.font = font;
         const textWidth = context.measureText(text).width;
-        context.restore();
         textWidthCache[font][text] = textWidth;
     }
     return textWidthCache[font][text];
@@ -4753,6 +4823,42 @@ const pxRegex = /([0-9\.]*)px/;
 function getContextFontSize(font) {
     return Number(font.match(pxRegex)?.[1]);
 }
+// Inspired from https://stackoverflow.com/a/10511598
+function clipTextWithEllipsis(ctx, text, maxWidth) {
+    let width = computeCachedTextWidth(ctx, text);
+    if (width <= maxWidth) {
+        return text;
+    }
+    const ellipsis = "…";
+    const ellipsisWidth = computeCachedTextWidth(ctx, text);
+    if (width <= ellipsisWidth) {
+        return text;
+    }
+    let len = text.length;
+    while (width >= maxWidth - ellipsisWidth && len-- > 0) {
+        text = text.substring(0, len);
+        width = computeCachedTextWidth(ctx, text);
+    }
+    return text + ellipsis;
+}
+function splitTextInTwoLines(text) {
+    let spaces = "";
+    while (text[0] === " ") {
+        spaces += " ";
+        text = text.slice(1);
+    }
+    const length = text.length;
+    const middle = Math.floor(length / 2);
+    const leftSpace = text.substring(0, middle).lastIndexOf(" ");
+    const rightSpace = text.substring(middle).indexOf(" ") + middle;
+    if (leftSpace === -1 && rightSpace === middle - 1) {
+        return [spaces + text, ""];
+    }
+    if (leftSpace > length - rightSpace || rightSpace === middle - 1) {
+        return [spaces + text.slice(0, leftSpace), spaces + text.slice(leftSpace + 1)];
+    }
+    return [spaces + text.slice(0, rightSpace), spaces + text.slice(rightSpace + 1)];
+}
 function drawDecoratedText(context, text, position, underline = false, strikethrough = false, strokeWidth = getContextFontSize(context.font) / 10 //This value is defined to get a good looking stroke
 ) {
     context.fillText(text, position.x, position.y);
@@ -7396,6 +7502,7 @@ const CellIsOperators = {
 };
 const ChartTerms = {
     Series: _t("Series"),
+    BackgroundColor: _t("Background color"),
     Errors: {
         Unexpected: _t("The chart definition is invalid for an unknown reason"),
         // BASIC CHART ERRORS (LINE | BAR | PIE)
@@ -9059,6 +9166,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 owl.Component {
     static template = "o-spreadsheet-ChartJsComponent";
     static props = {
@@ -9103,10 +9266,7 @@ class ChartJsComponent extends owl.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");
     }
 }
@@ -9431,32 +9591,63 @@ function shouldRemoveFirstLabel(labelRange, dataset, dataSetsHaveTitle) {
     }
     return true;
 }
-// ---------------------------------------------------------------------------
-// Scorecard
-// ---------------------------------------------------------------------------
-function getBaselineText(baseline, keyValue, baselineMode, locale) {
+function getChartPositionAtCenterOfViewport(getters, chartSize) {
+    const { x, y } = getters.getMainViewportCoordinates();
+    const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
+    const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
+    const position = {
+        x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
+        y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
+    }; // Position at the center of the scrollable viewport
+    return position;
+}
+
+function getBaselineText(baseline, keyValue, baselineMode, humanize, locale) {
     if (!baseline) {
         return "";
     }
     else if (baselineMode === "text" ||
         keyValue?.type !== CellValueType.number ||
         baseline.type !== CellValueType.number) {
+        if (humanize) {
+            return humanizeNumber(baseline, locale);
+        }
         return baseline.formattedValue;
     }
+    let { value, format } = baseline;
+    if (baselineMode === "progress") {
+        value = keyValue.value / value;
+        format = "0.0%";
+    }
     else {
-        let diff = keyValue.value - baseline.value;
-        if (baselineMode === "percentage" && diff !== 0) {
-            diff = (diff / baseline.value) * 100;
+        value = Math.abs(keyValue.value - value);
+        if (baselineMode === "percentage" && value !== 0) {
+            value = value / baseline.value;
         }
-        if (baselineMode !== "percentage" && baseline.format) {
-            return formatValue(diff, { format: baseline.format, locale });
+        if (baselineMode === "percentage") {
+            format = "0.0%";
         }
-        const baselineStr = Math.abs(parseFloat(diff.toFixed(2))).toLocaleString();
-        return baselineMode === "percentage" ? baselineStr + "%" : baselineStr;
+        if (!format) {
+            value = Math.round(value * 100) / 100;
+        }
+    }
+    if (humanize) {
+        return humanizeNumber({ value, format }, locale);
+    }
+    return formatValue(value, { format, locale });
+}
+function getKeyValueText(keyValueCell, humanize, locale) {
+    if (!keyValueCell) {
+        return "";
     }
+    if (humanize) {
+        return humanizeNumber(keyValueCell, locale);
+    }
+    return keyValueCell.formattedValue ?? String(keyValueCell.value ?? "");
 }
 function getBaselineColor(baseline, baselineMode, keyValue, colorUp, colorDown) {
     if (baselineMode === "text" ||
+        baselineMode === "progress" ||
         baseline?.type !== CellValueType.number ||
         keyValue?.type !== CellValueType.number) {
         return undefined;
@@ -9485,17 +9676,6 @@ function getBaselineArrowDirection(baseline, keyValue, baselineMode) {
     }
     return "neutral";
 }
-function getChartPositionAtCenterOfViewport(getters, chartSize) {
-    const { x, y } = getters.getMainViewportCoordinates();
-    const { scrollX, scrollY } = getters.getActiveSheetScrollInfo();
-    const { width, height } = getters.getVisibleRect(getters.getActiveMainViewport());
-    const position = {
-        x: x + scrollX + Math.max(0, (width - chartSize.width) / 2),
-        y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
-    }; // Position at the center of the scrollable viewport
-    return position;
-}
-
 function checkKeyValue(definition) {
     return definition.keyValue && !rangeReference.test(definition.keyValue)
         ? "InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */
@@ -9513,10 +9693,12 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
     baseline;
     baselineMode;
     baselineDescr;
+    progressBar = false;
     background;
     baselineColorUp;
     baselineColorDown;
     fontColor;
+    humanize;
     type = "scorecard";
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
@@ -9527,6 +9709,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
         this.background = definition.background;
         this.baselineColorUp = definition.baselineColorUp;
         this.baselineColorDown = definition.baselineColorDown;
+        this.humanize = definition.humanize ?? false;
     }
     static validateChartDefinition(validator, definition) {
         return validator.checkValidations(definition, checkKeyValue, checkBaseline);
@@ -9596,6 +9779,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
             keyValue: keyValue
                 ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                 : undefined,
+            humanize: this.humanize,
         };
     }
     getDefinitionForExcel() {
@@ -9621,7 +9805,7 @@ function drawScoreChart(structure, canvas) {
     if (structure.title) {
         ctx.font = structure.title.style.font;
         ctx.fillStyle = structure.title.style.color;
-        ctx.fillText(structure.title.text, structure.title.position.x, structure.title.position.y);
+        ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, canvas.width - structure.title.position.x), structure.title.position.x, structure.title.position.y);
     }
     if (structure.baseline) {
         ctx.font = structure.baseline.style.font;
@@ -9648,20 +9832,41 @@ function drawScoreChart(structure, canvas) {
         ctx.restore();
     }
     if (structure.baselineDescr) {
-        ctx.font = structure.baselineDescr.style.font;
-        ctx.fillStyle = structure.baselineDescr.style.color;
-        ctx.fillText(structure.baselineDescr.text, structure.baselineDescr.position.x, structure.baselineDescr.position.y);
+        const descr = structure.baselineDescr[0];
+        ctx.font = descr.style.font;
+        ctx.fillStyle = descr.style.color;
+        for (const description of structure.baselineDescr) {
+            ctx.fillText(clipTextWithEllipsis(ctx, description.text, canvas.width - description.position.x), description.position.x, description.position.y);
+        }
     }
     if (structure.key) {
         ctx.font = structure.key.style.font;
         ctx.fillStyle = structure.key.style.color;
         drawDecoratedText(ctx, structure.key.text, structure.key.position, structure.key.style.underline, structure.key.style.strikethrough);
     }
+    if (structure.progressBar) {
+        ctx.fillStyle = structure.progressBar.style.backgroundColor;
+        ctx.beginPath();
+        ctx.roundRect(structure.progressBar.position.x, structure.progressBar.position.y, structure.progressBar.dimension.width, structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+        ctx.fill();
+        ctx.fillStyle = structure.progressBar.style.color;
+        ctx.beginPath();
+        if (structure.progressBar.value > 0) {
+            ctx.roundRect(structure.progressBar.position.x, structure.progressBar.position.y, structure.progressBar.dimension.width *
+                Math.max(0, Math.min(1.0, structure.progressBar.value)), structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+        }
+        else {
+            const width = structure.progressBar.dimension.width *
+                Math.max(0, Math.min(1.0, -structure.progressBar.value));
+            ctx.roundRect(structure.progressBar.position.x + structure.progressBar.dimension.width - width, structure.progressBar.position.y, width, structure.progressBar.dimension.height, structure.progressBar.dimension.height / 2);
+        }
+        ctx.fill();
+    }
 }
 function createScorecardChartRuntime(chart, getters) {
-    let keyValue = "";
     let formattedKeyValue = "";
     let keyValueCell;
+    const locale = getters.getLocale();
     if (chart.keyValue) {
         const keyValuePosition = {
             sheetId: chart.keyValue.sheetId,
@@ -9669,31 +9874,33 @@ function createScorecardChartRuntime(chart, getters) {
             row: chart.keyValue.zone.top,
         };
         keyValueCell = getters.getEvaluatedCell(keyValuePosition);
-        keyValue = String(keyValueCell.value ?? "");
-        formattedKeyValue = keyValueCell.formattedValue;
+        formattedKeyValue = getKeyValueText(keyValueCell, chart.humanize ?? false, locale);
     }
     let baselineCell;
     const baseline = chart.baseline;
     if (baseline) {
         const baselinePosition = {
-            sheetId: chart.baseline.sheetId,
-            col: chart.baseline.zone.left,
-            row: chart.baseline.zone.top,
+            sheetId: baseline.sheetId,
+            col: baseline.zone.left,
+            row: baseline.zone.top,
         };
         baselineCell = getters.getEvaluatedCell(baselinePosition);
     }
     const { background, fontColor } = getters.getStyleOfSingleCellChart(chart.background, chart.keyValue);
-    const locale = getters.getLocale();
+    const baselineDisplay = getBaselineText(baselineCell, keyValueCell, chart.baselineMode, chart.humanize ?? false, locale);
+    const baselineValue = chart.baselineMode === "progress" && isNumber(baselineDisplay, locale)
+        ? toNumber(baselineDisplay, locale)
+        : 0;
     return {
         title: _t(chart.title),
-        keyValue: formattedKeyValue || keyValue,
-        baselineDisplay: getBaselineText(baselineCell, keyValueCell, chart.baselineMode, locale),
+        keyValue: formattedKeyValue,
+        baselineDisplay,
         baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
         baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-        baselineDescr: chart.baselineDescr ? _t(chart.baselineDescr) : "",
+        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr ? _t(chart.baselineDescr) : "",
         fontColor,
         background,
-        baselineStyle: chart.baselineMode !== "percentage" && baseline
+        baselineStyle: chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
             ? getters.getCellStyle({
                 sheetId: baseline.sheetId,
                 col: baseline.zone.left,
@@ -9707,17 +9914,21 @@ function createScorecardChartRuntime(chart, getters) {
                 row: chart.keyValue.zone.top,
             })
             : undefined,
+        progressBar: chart.baselineMode === "progress"
+            ? {
+                value: baselineValue,
+                color: baselineValue > 0 ? chart.baselineColorUp : chart.baselineColorDown,
+            }
+            : undefined,
     };
 }
 
 /* Sizes of boxes containing the texts, in percentage of the Chart size */
 const TITLE_FONT_SIZE = 18;
-const BASELINE_BOX_HEIGHT_RATIO = 0.35;
-const KEY_BOX_HEIGHT_RATIO = 0.65;
-/** Baseline description should have a smaller font than the baseline */
-const BASELINE_DESCR_FONT_RATIO = 0.9;
-/* Padding at the border of the chart, in percentage of the chart width */
-const CHART_PADDING_RATIO = 0.02;
+const KEY_BOX_HEIGHT_RATIO = 0.8;
+/* Padding at the border of the chart */
+const CHART_PADDING = 10;
+const BOTTOM_PADDING_RATIO = 0.05;
 /**
  * Line height (in em)
  * Having a line heigh =1em (=font size) don't work, the font will overflow.
@@ -9757,31 +9968,37 @@ class ScorecardChartConfigBuilder {
             },
         };
         const style = this.getTextStyles();
-        const { height: titleHeight } = this.getTextDimensions(this.title, style.title.font);
+        let titleHeight = 0;
         if (this.title) {
+            ({ height: titleHeight } = this.getFullTextDimensions(this.title, style.title.font));
             structure.title = {
                 text: this.title,
                 style: style.title,
                 position: {
-                    x: this.chartPadding,
-                    y: this.chartPadding + titleHeight,
+                    x: CHART_PADDING,
+                    y: CHART_PADDING / 2 + titleHeight,
                 },
             };
         }
         const baselineArrowSize = style.baselineArrow?.size ?? 0;
-        const { height: baselineHeight, width: baselineWidth } = this.getTextDimensions(this.baseline, style.baselineValue.font);
-        const { width: baselineDescrWidth } = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font);
+        let { height: baselineHeight, width: baselineWidth } = this.getTextDimensions(this.baseline, style.baselineValue.font);
+        if (!this.baseline) {
+            baselineHeight = this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).height;
+        }
+        const baselineDescrWidth = style.baselineDescr.isSplit
+            ? Math.max(...splitTextInTwoLines(this.baselineDescr).map((line) => this.getTextDimensions(line, style.baselineDescr.font).width))
+            : this.getTextDimensions(this.baselineDescr, style.baselineDescr.font).width;
         structure.baseline = {
             text: this.baseline,
             style: style.baselineValue,
             position: {
                 x: (this.width - baselineWidth - baselineDescrWidth + baselineArrowSize) / 2,
                 y: this.keyValue
-                    ? this.height - 2 * this.chartPadding
-                    : this.height - (this.height - titleHeight - baselineHeight) / 2 - this.chartPadding,
+                    ? this.height * (1 - BOTTOM_PADDING_RATIO * (this.runtime.progressBar ? 1 : 2))
+                    : this.height - (this.height - titleHeight - baselineHeight) / 2 - CHART_PADDING,
             },
         };
-        if (style.baselineArrow) {
+        if (style.baselineArrow && !this.runtime.progressBar) {
             structure.baselineArrow = {
                 direction: this.baselineArrow,
                 style: style.baselineArrow,
@@ -9792,23 +10009,68 @@ class ScorecardChartConfigBuilder {
             };
         }
         if (this.baselineDescr) {
-            structure.baselineDescr = {
-                text: this.baselineDescr,
-                style: style.baselineDescr,
+            const position = {
+                x: structure.baseline.position.x + baselineWidth,
+                y: structure.baseline.position.y,
+            };
+            if (style.baselineDescr.isSplit) {
+                const description = splitTextInTwoLines(this.baselineDescr);
+                const measure = this.context.measureText(description[1]);
+                const deltaY = measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent;
+                structure.baselineDescr = [
+                    {
+                        text: description[0],
+                        style: style.baselineDescr,
+                        position: {
+                            x: position.x,
+                            y: position.y - deltaY,
+                        },
+                    },
+                    {
+                        text: description[1],
+                        style: style.baselineDescr,
+                        position,
+                    },
+                ];
+            }
+            else {
+                structure.baselineDescr = [
+                    {
+                        text: this.baselineDescr,
+                        style: style.baselineDescr,
+                        position,
+                    },
+                ];
+            }
+        }
+        let progressBarHeight = 0;
+        if (this.runtime.progressBar) {
+            progressBarHeight = this.height * 0.05;
+            structure.progressBar = {
                 position: {
-                    x: structure.baseline.position.x + baselineWidth,
-                    y: structure.baseline.position.y,
+                    x: 2 * CHART_PADDING,
+                    y: this.height * (1 - 2 * BOTTOM_PADDING_RATIO) - baselineHeight - progressBarHeight,
+                },
+                dimension: {
+                    height: progressBarHeight,
+                    width: this.width - 4 * CHART_PADDING,
+                },
+                value: this.runtime.progressBar.value,
+                style: {
+                    color: this.runtime.progressBar.color,
+                    backgroundColor: this.secondaryFontColor,
                 },
             };
         }
-        const { height: keyHeight, width: keyWidth } = this.getTextDimensions(this.keyValue, style.keyValue.font);
+        const { width: keyWidth, height: keyHeight } = this.getFullTextDimensions(this.keyValue, style.keyValue.font);
         if (this.keyValue) {
             structure.key = {
                 text: this.keyValue,
                 style: style.keyValue,
                 position: {
                     x: (this.width - keyWidth) / 2,
-                    y: (this.height - baselineHeight + titleHeight + keyHeight) / 2 - this.chartPadding,
+                    y: this.height * (0.5 - BOTTOM_PADDING_RATIO * 2) +
+                        (titleHeight + keyHeight / (this.baseline || this.baselineDescr ? 2 : 1.2)) / 2,
                 },
             };
         }
@@ -9835,9 +10097,6 @@ class ScorecardChartConfigBuilder {
     get secondaryFontColor() {
         return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
     }
-    get chartPadding() {
-        return this.width * CHART_PADDING_RATIO;
-    }
     getTextDimensions(text, font) {
         this.context.font = font;
         const measure = this.context.measureText(text);
@@ -9846,16 +10105,44 @@ class ScorecardChartConfigBuilder {
             height: measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent,
         };
     }
+    getFullTextDimensions(text, font) {
+        this.context.font = font;
+        const measure = this.context.measureText(text);
+        return {
+            width: measure.width,
+            height: measure.fontBoundingBoxAscent + measure.fontBoundingBoxDescent,
+        };
+    }
     getTextStyles() {
         // If the widest text overflows horizontally, scale it down, and apply the same scaling factors to all the other fonts.
-        const maxLineWidth = this.width * (1 - 2 * CHART_PADDING_RATIO);
-        const widestElement = this.getWidestElement();
-        const baseFontSize = widestElement.getElementMaxFontSize(this.getDrawableHeight(), this);
-        const fontSizeMatchingWidth = getFontSizeMatchingWidth(maxLineWidth, baseFontSize, (fontSize) => widestElement.getElementWidth(fontSize, this.context, this));
-        let scalingFactor = fontSizeMatchingWidth / baseFontSize;
+        const maxLineWidth = this.width - 2 * CHART_PADDING;
+        const drawableHeight = this.getDrawableHeight();
         // Fonts sizes in px
-        const keyFontSize = new KeyValueElement(this.runtime.keyValueStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
-        const baselineFontSize = new BaselineElement(this.runtime.baselineStyle).getElementMaxFontSize(this.getDrawableHeight(), this) * scalingFactor;
+        const keyValueElement = new KeyValueElement(this.runtime.keyValueStyle);
+        const heightFont = keyValueElement.getElementMaxFontSize(drawableHeight, this);
+        const widthFont = getFontSizeMatchingWidth(maxLineWidth, 600, (fontSize) => keyValueElement.getElementWidth(fontSize, this.context, this));
+        const keyFontSize = Math.min(heightFont, widthFont);
+        let baselineValueFontSize = Math.floor(keyFontSize * 0.5);
+        this.context.font = getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic);
+        const baselineText = this.baselineArrow !== "neutral" ? "A " + this.baseline : this.baseline;
+        const baselineValueWidth = computeCachedTextWidth(this.context, baselineText);
+        const remainingWidth = maxLineWidth - baselineValueWidth;
+        let baselineDescrFontSize = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => computeTextWidth(this.context, this.baselineDescr, { fontSize }));
+        let isBaselineSplit = false;
+        if (baselineDescrFontSize < baselineValueFontSize / 2.5) {
+            isBaselineSplit = true;
+            baselineDescrFontSize = Math.floor(baselineValueFontSize / 2.5);
+            for (const line of splitTextInTwoLines(this.baselineDescr)) {
+                const lineWidth = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => {
+                    this.context.font = getDefaultContextFont(fontSize);
+                    return this.context.measureText(line).width;
+                });
+                baselineDescrFontSize = Math.min(baselineDescrFontSize, lineWidth);
+            }
+        }
+        if (this.runtime.progressBar) {
+            baselineValueFontSize /= 1.5;
+        }
         return {
             title: {
                 font: getDefaultContextFont(TITLE_FONT_SIZE),
@@ -9868,7 +10155,7 @@ class ScorecardChartConfigBuilder {
                 underline: this.runtime.keyValueStyle?.underline,
             },
             baselineValue: {
-                font: getDefaultContextFont(baselineFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
+                font: getDefaultContextFont(baselineValueFontSize, this.runtime.baselineStyle?.bold, this.runtime.baselineStyle?.italic),
                 strikethrough: this.runtime.baselineStyle?.strikethrough,
                 underline: this.runtime.baselineStyle?.underline,
                 color: this.runtime.baselineStyle?.textColor ||
@@ -9876,33 +10163,25 @@ class ScorecardChartConfigBuilder {
                     this.secondaryFontColor,
             },
             baselineDescr: {
-                font: getDefaultContextFont(baselineFontSize * BASELINE_DESCR_FONT_RATIO),
+                font: getDefaultContextFont(baselineDescrFontSize),
+                isSplit: isBaselineSplit,
                 color: this.secondaryFontColor,
             },
-            baselineArrow: this.baselineArrow === "neutral"
+            baselineArrow: this.baselineArrow === "neutral" || this.runtime.progressBar
                 ? undefined
                 : {
-                    size: this.keyValue ? 0.8 * baselineFontSize : 0,
+                    size: this.keyValue ? 0.8 * baselineValueFontSize : 0,
                     color: this.runtime.baselineColor || this.secondaryFontColor,
                 },
         };
     }
     /** Get the height of the chart minus all the vertical paddings */
     getDrawableHeight() {
-        const verticalPadding = 2 * this.chartPadding;
-        let availableHeight = this.height - verticalPadding;
+        const verticalPadding = CHART_PADDING + this.height * BOTTOM_PADDING_RATIO;
+        let availableHeight = this.height - 2 * verticalPadding;
         availableHeight -= this.title ? TITLE_FONT_SIZE * LINE_HEIGHT : 0;
         return availableHeight;
     }
-    /** Return the element with he widest text in the chart */
-    getWidestElement() {
-        const baseline = new BaselineElement(this.runtime.baselineStyle);
-        const keyValue = new KeyValueElement(this.runtime.keyValueStyle);
-        return baseline.getElementWidth(BASELINE_BOX_HEIGHT_RATIO, this.context, this) >
-            keyValue.getElementWidth(KEY_BOX_HEIGHT_RATIO, this.context, this)
-            ? baseline
-            : keyValue;
-    }
 }
 class ScorecardScalableElement {
     style;
@@ -9911,29 +10190,7 @@ class ScorecardScalableElement {
     }
     measureTextWidth(ctx, text, fontSize) {
         ctx.font = getDefaultContextFont(fontSize, this.style.bold, this.style.italic);
-        return ctx.measureText(text).width;
-    }
-}
-class BaselineElement extends ScorecardScalableElement {
-    getElementWidth(fontSize, ctx, chart) {
-        if (!chart.runtime) {
-            return 0;
-        }
-        const baselineStr = chart.baseline;
-        // Put mock text to simulate the width of the up/down arrow
-        const largeText = chart.baselineArrow !== "neutral" ? "A " + baselineStr : baselineStr;
-        let textWidth = this.measureTextWidth(ctx, largeText, fontSize);
-        // Baseline descr font size should be smaller than baseline font size
-        textWidth += this.measureTextWidth(ctx, chart.baselineDescr, fontSize * BASELINE_DESCR_FONT_RATIO);
-        return textWidth;
-    }
-    getElementMaxFontSize(availableHeight, chart) {
-        if (!chart.runtime) {
-            return 0;
-        }
-        const haveBaseline = chart.baseline !== "" || chart.baselineDescr;
-        const maxHeight = haveBaseline ? BASELINE_BOX_HEIGHT_RATIO * availableHeight : 0;
-        return maxHeight / LINE_HEIGHT;
+        return computeCachedTextWidth(ctx, text);
     }
 }
 class KeyValueElement extends ScorecardScalableElement {
@@ -10863,33 +11120,6 @@ var array = /*#__PURE__*/Object.freeze({
 // -----------------------------------------------------------------------------
 // FORMAT.LARGE.NUMBER
 // -----------------------------------------------------------------------------
-function formatLargeNumber(arg, unit, locale) {
-    const value = Math.abs(toNumber(arg?.value, locale));
-    const format = arg?.format;
-    if (unit !== undefined) {
-        const postFix = unit?.value;
-        switch (postFix) {
-            case "k":
-                return createLargeNumberFormat(format, 1e3, "k");
-            case "m":
-                return createLargeNumberFormat(format, 1e6, "m");
-            case "b":
-                return createLargeNumberFormat(format, 1e9, "b");
-            default:
-                throw new EvaluationError(_t("The formatting unit should be 'k', 'm' or 'b'."));
-        }
-    }
-    if (value < 1e5) {
-        return createLargeNumberFormat(format, 0, "");
-    }
-    else if (value < 1e8) {
-        return createLargeNumberFormat(format, 1e3, "k");
-    }
-    else if (value < 1e11) {
-        return createLargeNumberFormat(format, 1e6, "m");
-    }
-    return createLargeNumberFormat(format, 1e9, "b");
-}
 const FORMAT_LARGE_NUMBER = {
     description: _t("Apply a large number format"),
     args: [
@@ -11051,7 +11281,7 @@ const ATAN2 = {
     compute: function (x, y) {
         const _x = toNumber(x, this.locale);
         const _y = toNumber(y, this.locale);
-        assert(() => _x !== 0 || _y !== 0, _t("Function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assert(() => _x !== 0 || _y !== 0, _t("Function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
         return Math.atan2(_y, _x);
     },
     isExported: true,
@@ -11181,7 +11411,7 @@ const COT = {
     returns: ["NUMBER"],
     compute: function (angle) {
         const _angle = toNumber(angle, this.locale);
-        assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_angle);
         return 1 / Math.tan(_angle);
     },
     isExported: true,
@@ -11195,7 +11425,7 @@ const COTH = {
     returns: ["NUMBER"],
     compute: function (value) {
         const _value = toNumber(value, this.locale);
-        assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_value);
         return 1 / Math.tanh(_value);
     },
     isExported: true,
@@ -11323,7 +11553,7 @@ const CSC = {
     returns: ["NUMBER"],
     compute: function (angle) {
         const _angle = toNumber(angle, this.locale);
-        assert(() => _angle !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_angle);
         return 1 / Math.sin(_angle);
     },
     isExported: true,
@@ -11337,7 +11567,7 @@ const CSCH = {
     returns: ["NUMBER"],
     compute: function (value) {
         const _value = toNumber(value, this.locale);
-        assert(() => _value !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(_value);
         return 1 / Math.sinh(_value);
     },
     isExported: true,
@@ -11536,7 +11766,7 @@ const LN = {
 // MOD
 // -----------------------------------------------------------------------------
 function mod(dividend, divisor) {
-    assert(() => divisor !== 0, _t("The divisor must be different from 0."));
+    assert(() => divisor !== 0, _t("The divisor must be different from 0."), CellErrorType.DivisionByZero);
     const modulus = dividend % divisor;
     // -42 % 10 = -2 but we want 8, so need the code below
     if ((modulus > 0 && divisor < 0) || (modulus < 0 && divisor > 0)) {
@@ -12105,7 +12335,7 @@ function average(values, locale) {
         count += 1;
         return acc + a;
     }, 0, locale);
-    assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+    assertNotZero(count);
     return sum / count;
 }
 function countNumbers(values, locale) {
@@ -12172,7 +12402,7 @@ function filterAndFlatData(dataY, dataX) {
 function covariance(dataY, dataX, isSample) {
     const { flatDataX, flatDataY } = filterAndFlatData(dataY, dataX);
     const count = flatDataY.length;
-    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
     let sumY = 0;
     let sumX = 0;
     for (let i = 0; i < count; i++) {
@@ -12195,7 +12425,7 @@ function variance(args, isSample, textAs0, locale) {
         count += 1;
         return acc + a;
     }, 0, locale);
-    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+    assert(() => count !== 0 && (!isSample || count !== 1), _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."), CellErrorType.DivisionByZero);
     const average = sum / count;
     return (reduceFunction(args, (acc, a) => acc + Math.pow(a - average, 2), 0, locale) /
         (count - (isSample ? 1 : 0)));
@@ -12392,7 +12622,7 @@ const AVEDEV = {
             count += 1;
             return acc + a;
         }, 0, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         const average = sum / count;
         return reduceNumbers(values, (acc, a) => acc + Math.abs(average - a), 0, this.locale) / count;
     },
@@ -12464,7 +12694,7 @@ const AVERAGE_WEIGHTED = {
                 }
             }
         }
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return { value: sum / count, format: inferFormat(args[0]) };
     },
 };
@@ -12484,7 +12714,7 @@ const AVERAGEA = {
             count += 1;
             return acc + a;
         }, 0, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return {
             value: sum / count,
             format: inferFormat(args[0]),
@@ -12514,7 +12744,7 @@ const AVERAGEIF = {
                 sum += value;
             }
         }, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return sum / count;
     },
     isExported: true,
@@ -12543,7 +12773,7 @@ const AVERAGEIFS = {
                 sum += value;
             }
         }, this.locale);
-        assert(() => count !== 0, _t("Evaluation of function [[FUNCTION_NAME]] caused a divide by zero error."));
+        assertNotZero(count);
         return sum / count;
     },
     isExported: true,
@@ -17968,7 +18198,7 @@ const DIVIDE = {
     returns: ["NUMBER"],
     compute: function (dividend, divisor) {
         const _divisor = toNumber(divisor, this.locale);
-        assert(() => _divisor !== 0, _t("The divisor must be different from zero."));
+        assert(() => _divisor !== 0, _t("The divisor must be different from zero."), CellErrorType.DivisionByZero);
         return {
             value: toNumber(dividend, this.locale) / _divisor,
             format: dividend?.format || divisor?.format,
@@ -18661,7 +18891,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;
     }
@@ -18700,9 +18930,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;
     }
@@ -18717,21 +18945,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;
@@ -21013,7 +21249,21 @@ class ScatterChart extends AbstractChart {
         return new ScatterChart(definition, this.sheetId, this.getters);
     }
     getDefinitionForExcel() {
-        return undefined; // TODO
+        // Excel does not support aggregating labels
+        if (this.aggregated) {
+            return undefined;
+        }
+        const dataSets = this.dataSets
+            .map((ds) => toExcelDataset(this.getters, ds))
+            .filter((ds) => ds.range !== "");
+        const labelRange = toExcelLabelRange(this.getters, this.labelRange, shouldRemoveFirstLabel(this.labelRange, this.dataSets[0], this.dataSetsHaveTitle));
+        return {
+            ...this.getDefinition(),
+            backgroundColor: toXlsxHexColor(this.background || BACKGROUND_CHART_COLOR),
+            fontColor: toXlsxHexColor(chartFontColor(this.background)),
+            dataSets,
+            labelRange,
+        };
     }
     copyForSheetId(sheetId) {
         const dataSets = copyDataSetsWithNewSheetId(this.sheetId, sheetId, this.dataSets);
@@ -21060,6 +21310,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.
@@ -21069,9 +21576,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,
 });
@@ -21079,9 +21586,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,
 });
@@ -21089,9 +21596,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,
 });
@@ -21099,9 +21606,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,
 });
@@ -21109,9 +21616,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,
 });
@@ -21119,9 +21626,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,
 });
@@ -21129,12 +21636,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);
@@ -21143,6 +21660,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
@@ -23122,6 +23640,7 @@ class LinkEditor extends owl.Component {
                     this.save();
                 }
                 ev.stopPropagation();
+                ev.preventDefault();
                 break;
             case "Escape":
                 this.cancel();
@@ -26775,8 +27294,8 @@ class ChartLabelRange extends owl.Component {
     };
 }
 
-class LineBarPieConfigPanel extends owl.Component {
-    static template = "o-spreadsheet-LineBarPieConfigPanel";
+class GenericChartConfigPanel extends owl.Component {
+    static template = "o-spreadsheet-GenericChartConfigPanel";
     static components = {
         SelectionInput,
         ValidationMessages,
@@ -26893,7 +27412,7 @@ class LineBarPieConfigPanel extends owl.Component {
     }
 }
 
-class BarConfigPanel extends LineBarPieConfigPanel {
+class BarConfigPanel extends GenericChartConfigPanel {
     static template = "o-spreadsheet-BarConfigPanel";
     get stackedLabel() {
         return _t("Stacked barchart");
@@ -27441,13 +27960,30 @@ class ColorPickerWidget extends owl.Component {
     }
 }
 
-class ChartColor extends owl.Component {
-    static template = "o-spreadsheet.ChartColor";
-    static components = { ColorPickerWidget, Section };
+const TRANSPARENT_BACKGROUND_SVG = /*xml*/ `
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10">
+  <path fill="#d9d9d9" d="M5 5h5v5H5zH0V0h5"/>
+</svg>
+`;
+css /* scss */ `
+  .o-round-color-picker-button {
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+    border: 1px solid #aaa;
+    background-position: 1px 1px;
+    background-image: url("data:image/svg+xml,${encodeURIComponent(TRANSPARENT_BACKGROUND_SVG)}");
+  }
+`;
+class RoundColorPicker extends owl.Component {
+    static template = "o-spreadsheet.RoundColorPicker";
+    static components = { ColorPickerWidget, Section, ColorPicker };
     static props = {
         currentColor: { type: String, optional: true },
+        title: { type: String, optional: true },
         onColorPicked: Function,
     };
+    colorPickerButtonRef = owl.useRef("colorPickerButton");
     state;
     setup() {
         this.state = owl.useState({ pickerOpened: false });
@@ -27459,6 +27995,19 @@ class ChartColor extends owl.Component {
     togglePicker() {
         this.state.pickerOpened = !this.state.pickerOpened;
     }
+    onColorPicked(color) {
+        this.props.onColorPicked(color);
+        this.state.pickerOpened = false;
+    }
+    get colorPickerAnchorRect() {
+        const button = this.colorPickerButtonRef.el;
+        return getBoundingRectAsPOJO(button);
+    }
+    get buttonStyle() {
+        return cssPropertiesToCss({
+            background: this.props.currentColor,
+        });
+    }
 }
 
 class ChartTitle extends owl.Component {
@@ -27470,9 +28019,9 @@ class ChartTitle extends owl.Component {
     }
 }
 
-class LineBarPieDesignPanel extends owl.Component {
-    static template = "o-spreadsheet-LineBarPieDesignPanel";
-    static components = { ChartColor, ChartTitle, Section };
+class GenericChartDesignPanel extends owl.Component {
+    static template = "o-spreadsheet-GenericChartDesignPanel";
+    static components = { RoundColorPicker, ChartTitle, Section };
     static props = {
         figureId: String,
         definition: Object,
@@ -27495,13 +28044,16 @@ class LineBarPieDesignPanel extends owl.Component {
             [attr]: ev.target.value,
         });
     }
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
+    }
 }
 
-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");
@@ -27513,7 +28065,7 @@ class ComboChartConfigPanel extends LineBarPieConfigPanel {
     }
 }
 
-class ComboChartDesignPanel extends LineBarPieDesignPanel {
+class ComboChartDesignPanel extends GenericChartDesignPanel {
     static template = "o-spreadsheet-ComboChartDesignPanel";
 }
 
@@ -27564,6 +28116,10 @@ css /* scss */ `
       line-height: 18px;
       width: 100%;
     }
+    td {
+      box-sizing: border-box;
+      height: 30px;
+    }
     th.o-gauge-color-set-colorPicker {
       width: 8%;
     }
@@ -27586,7 +28142,12 @@ css /* scss */ `
 `;
 class GaugeChartDesignPanel extends owl.Component {
     static template = "o-spreadsheet-GaugeChartDesignPanel";
-    static components = { ColorPickerWidget, ChartErrorSection, ChartColor, ChartTitle, Section };
+    static components = {
+        ChartErrorSection,
+        RoundColorPicker,
+        ChartTitle,
+        Section,
+    };
     static props = {
         figureId: String,
         definition: Object,
@@ -27598,9 +28159,6 @@ class GaugeChartDesignPanel extends owl.Component {
         sectionRuleDispatchResult: undefined,
         sectionRule: deepCopy(this.props.definition.sectionRule),
     });
-    setup() {
-        owl.useExternalListener(window, "click", this.closeMenus);
-    }
     get title() {
         return _t(this.props.definition.title);
     }
@@ -27641,31 +28199,26 @@ class GaugeChartDesignPanel extends owl.Component {
         const sectionRule = deepCopy(this.state.sectionRule);
         sectionRule.colors[target] = color;
         this.updateSectionRule(sectionRule);
-        this.closeMenus();
-    }
-    toggleMenu(menu) {
-        const isSelected = this.state.openedMenu === menu;
-        this.closeMenus();
-        if (!isSelected) {
-            this.state.openedMenu = menu;
-        }
     }
     updateSectionRule(sectionRule) {
         this.state.sectionRuleDispatchResult = this.props.updateChart(this.props.figureId, {
             sectionRule,
         });
+        if (this.state.sectionRuleDispatchResult.isSuccessful) {
+            this.state.sectionRule = deepCopy(sectionRule);
+        }
     }
     canUpdateSectionRule(sectionRule) {
         this.state.sectionRuleDispatchResult = this.props.canUpdateChart(this.props.figureId, {
             sectionRule,
         });
     }
-    closeMenus() {
-        this.state.openedMenu = undefined;
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
     }
 }
 
-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);
@@ -27714,11 +28267,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);
@@ -27809,39 +28362,36 @@ class ScorecardChartConfigPanel extends owl.Component {
 
 class ScorecardChartDesignPanel extends owl.Component {
     static template = "o-spreadsheet-ScorecardChartDesignPanel";
-    static components = { ColorPickerWidget, ChartColor, ChartTitle, Section };
+    static components = { RoundColorPicker, ChartTitle, Section, Checkbox };
     static props = {
         figureId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
     };
-    state = owl.useState({
-        openedColorPicker: undefined,
-    });
-    setup() {
-        owl.useExternalListener(window, "click", this.closeMenus);
-    }
     get title() {
         return _t(this.props.definition.title);
     }
+    get colorsSectionTitle() {
+        return this.props.definition.baselineMode === "progress"
+            ? _t("Progress bar colors")
+            : _t("Baseline colors");
+    }
+    get humanizeNumbersLabel() {
+        return _t("Humanize numbers");
+    }
     updateTitle(title) {
         this.props.updateChart(this.props.figureId, { title });
     }
+    updateHumanizeNumbers(humanize) {
+        this.props.updateChart(this.props.figureId, { humanize });
+    }
     translate(term) {
         return _t(term);
     }
     updateBaselineDescr(ev) {
         this.props.updateChart(this.props.figureId, { baselineDescr: ev.target.value });
     }
-    toggleColorPicker(colorPickerId) {
-        if (this.state.openedColorPicker === colorPickerId) {
-            this.state.openedColorPicker = undefined;
-        }
-        else {
-            this.state.openedColorPicker = colorPickerId;
-        }
-    }
     setColor(color, colorPickerId) {
         switch (colorPickerId) {
             case "backgroundColor":
@@ -27854,10 +28404,49 @@ class ScorecardChartDesignPanel extends owl.Component {
                 this.props.updateChart(this.props.figureId, { baselineColorUp: color });
                 break;
         }
-        this.closeMenus();
     }
-    closeMenus() {
-        this.state.openedColorPicker = undefined;
+    get backgroundColorTitle() {
+        return ChartTerms.BackgroundColor;
+    }
+}
+
+class WaterfallChartDesignPanel extends GenericChartDesignPanel {
+    static template = "o-spreadsheet-WaterfallChartDesignPanel";
+    static components = { ...GenericChartDesignPanel.components, Checkbox, RoundColorPicker };
+    state = owl.useState({ pickerOpened: false });
+    setup() {
+        super.setup();
+        owl.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);
     }
 }
 
@@ -27880,8 +28469,8 @@ chartSidePanelComponentRegistry
     design: ComboChartDesignPanel,
 })
     .add("pie", {
-    configuration: LineBarPieConfigPanel,
-    design: LineBarPieDesignPanel,
+    configuration: GenericChartConfigPanel,
+    design: GenericChartDesignPanel,
 })
     .add("gauge", {
     configuration: GaugeChartConfigPanel,
@@ -27890,6 +28479,10 @@ chartSidePanelComponentRegistry
     .add("scorecard", {
     configuration: ScorecardChartConfigPanel,
     design: ScorecardChartDesignPanel,
+})
+    .add("waterfall", {
+    configuration: GenericChartConfigPanel,
+    design: WaterfallChartDesignPanel,
 });
 
 class MainChartPanelStore extends SpreadsheetStore {
@@ -28806,6 +29399,7 @@ class ConditionalFormattingEditor extends owl.Component {
         ColorPickerWidget,
         ConditionalFormatPreviewList,
         Section,
+        RoundColorPicker,
     };
     icons = ICONS;
     cellIsOperators = CellIsOperators;
@@ -30626,6 +31220,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),
@@ -31160,7 +31757,12 @@ class TablePanel extends owl.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,
@@ -31649,6 +32251,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
 // -----------------------------------------------------------------------------
@@ -32310,6 +32944,7 @@ class Composer extends owl.Component {
         onComposerCellFocused: { type: Function, optional: true },
         onComposerContentFocused: Function,
         isDefaultFocus: { type: Boolean, optional: true },
+        onInputContextMenu: { type: Function, optional: true },
     };
     static components = { TextValueProvider, FunctionDescriptionProvider };
     static defaultProps = {
@@ -32360,6 +32995,9 @@ class Composer extends owl.Component {
                 assistantStyle.right = `0px`;
             }
         }
+        else if (this.props.delimitation) {
+            assistantStyle["max-height"] = `${this.props.delimitation.height}px`;
+        }
         return cssPropertiesToCss(assistantStyle);
     }
     // we can't allow input events to be triggered while we remove and add back the content of the composer in processContent
@@ -32646,6 +33284,11 @@ class Composer extends owl.Component {
             }
         }
     }
+    onContextMenu(ev) {
+        if (this.composerStore.editionMode === "inactive") {
+            this.props.onInputContextMenu?.(ev);
+        }
+    }
     // ---------------------------------------------------------------------------
     // Private
     // ---------------------------------------------------------------------------
@@ -32867,6 +33510,7 @@ class GridComposer extends owl.Component {
     static template = "o-spreadsheet-GridComposer";
     static props = {
         gridDims: Object,
+        onInputContextMenu: Function,
     };
     static components = { Composer };
     rect = this.defaultRect;
@@ -32914,6 +33558,7 @@ class GridComposer extends owl.Component {
             isDefaultFocus: true,
             onComposerContentFocused: () => this.composerFocusStore.focusGridComposerContent(),
             onComposerCellFocused: (content) => this.composerFocusStore.focusGridComposerCell(content),
+            onInputContextMenu: this.props.onInputContextMenu,
         };
     }
     get containerStyle() {
@@ -33012,7 +33657,6 @@ class GridCellIcon extends owl.Component {
         cellPosition: Object,
         horizontalAlign: { type: String, optional: true },
         verticalAlign: { type: String, optional: true },
-        offset: { type: Object, optional: true },
         slots: Object,
     };
     get iconStyle() {
@@ -33023,8 +33667,8 @@ class GridCellIcon extends owl.Component {
         const x = this.getIconHorizontalPosition(rect, cellPosition);
         const y = this.getIconVerticalPosition(rect, cellPosition);
         return cssPropertiesToCss({
-            top: `${y + (this.props.offset?.y || 0)}px`,
-            left: `${x + (this.props.offset?.x || 0)}px`,
+            top: `${y}px`,
+            left: `${x}px`,
         });
     }
     getIconVerticalPosition(rect, cellPosition) {
@@ -33064,83 +33708,6 @@ class GridCellIcon extends owl.Component {
     }
 }
 
-css /* scss */ `
-  .o-filter-icon {
-    color: ${FILTERS_COLOR};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${GRID_ICON_EDGE_LENGTH}px;
-    height: ${GRID_ICON_EDGE_LENGTH}px;
-
-    &:hover {
-      background: ${FILTERS_COLOR};
-      color: #fff;
-    }
-
-    &.o-high-contrast {
-      color: #defade;
-    }
-    &.o-high-contrast:hover {
-      color: ${FILTERS_COLOR};
-      background: #fff;
-    }
-  }
-  .o-filter-icon:hover {
-    background: ${FILTERS_COLOR};
-    color: #fff;
-  }
-`;
-class FilterIcon extends owl.Component {
-    static template = "o-spreadsheet-FilterIcon";
-    static props = {
-        cellPosition: Object,
-    };
-    cellPopovers;
-    setup() {
-        this.cellPopovers = useStore(CellPopoverStore);
-    }
-    onClick() {
-        const position = this.props.cellPosition;
-        const activePopover = this.cellPopovers.persistentCellPopover;
-        const { col, row } = position;
-        if (activePopover.isOpen &&
-            activePopover.col === col &&
-            activePopover.row === row &&
-            activePopover.type === "FilterMenu") {
-            this.cellPopovers.close();
-            return;
-        }
-        this.cellPopovers.open({ col, row }, "FilterMenu");
-    }
-    get isFilterActive() {
-        return this.env.model.getters.isFilterActive(this.props.cellPosition);
-    }
-    get iconClass() {
-        const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
-        const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
-        return luminance < 0.45 ? "o-high-contrast" : "";
-    }
-}
-
-class FilterIconsOverlay extends owl.Component {
-    static template = "o-spreadsheet-FilterIconsOverlay";
-    static props = {
-        gridPosition: { type: Object, optional: true },
-    };
-    static components = {
-        GridCellIcon,
-        FilterIcon,
-    };
-    static defaultProps = {
-        gridPosition: { x: 0, y: 0 },
-    };
-    getFilterHeadersPositions() {
-        const sheetId = this.env.model.getters.getActiveSheetId();
-        return this.env.model.getters.getFilterHeaders(sheetId);
-    }
-}
-
 const CHECKBOX_WIDTH = 15;
 const MARGIN = (GRID_ICON_EDGE_LENGTH - CHECKBOX_WIDTH) / 2;
 css /* scss */ `
@@ -33492,6 +34059,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
@@ -33808,6 +34379,80 @@ class FiguresContainer extends owl.Component {
     }
 }
 
+css /* scss */ `
+  .o-filter-icon {
+    color: ${FILTERS_COLOR};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${GRID_ICON_EDGE_LENGTH}px;
+    height: ${GRID_ICON_EDGE_LENGTH}px;
+
+    &:hover {
+      background: ${FILTERS_COLOR};
+      color: #fff;
+    }
+
+    &.o-high-contrast {
+      color: #defade;
+    }
+    &.o-high-contrast:hover {
+      color: ${FILTERS_COLOR};
+      background: #fff;
+    }
+  }
+  .o-filter-icon:hover {
+    background: ${FILTERS_COLOR};
+    color: #fff;
+  }
+`;
+class FilterIcon extends owl.Component {
+    static template = "o-spreadsheet-FilterIcon";
+    static props = {
+        cellPosition: Object,
+    };
+    cellPopovers;
+    setup() {
+        this.cellPopovers = useStore(CellPopoverStore);
+    }
+    onClick() {
+        const position = this.props.cellPosition;
+        const activePopover = this.cellPopovers.persistentCellPopover;
+        const { col, row } = position;
+        if (activePopover.isOpen &&
+            activePopover.col === col &&
+            activePopover.row === row &&
+            activePopover.type === "FilterMenu") {
+            this.cellPopovers.close();
+            return;
+        }
+        this.cellPopovers.open({ col, row }, "FilterMenu");
+    }
+    get isFilterActive() {
+        return this.env.model.getters.isFilterActive(this.props.cellPosition);
+    }
+    get iconClass() {
+        const cellStyle = this.env.model.getters.getCellComputedStyle(this.props.cellPosition);
+        const luminance = relativeLuminance(cellStyle.fillColor || "#fff");
+        return luminance < 0.45 ? "o-high-contrast" : "";
+    }
+}
+
+class FilterIconsOverlay extends owl.Component {
+    static template = "o-spreadsheet-FilterIconsOverlay";
+    static props = {
+        onMouseDown: Function,
+    };
+    static components = {
+        GridCellIcon,
+        FilterIcon,
+    };
+    getFilterHeadersPositions() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        return this.env.model.getters.getFilterHeaders(sheetId);
+    }
+}
+
 css /* scss */ `
   .o-grid-add-rows {
     input {
@@ -34021,7 +34666,12 @@ class GridOverlay extends owl.Component {
         onGridMoved: Function,
         gridOverlayDimensions: String,
     };
-    static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
+    static components = {
+        FiguresContainer,
+        DataValidationOverlay,
+        GridAddRowsFooter,
+        FilterIconsOverlay,
+    };
     static defaultProps = {
         onCellHovered: () => { },
         onCellDoubleClicked: () => { },
@@ -34066,7 +34716,7 @@ class GridOverlay extends owl.Component {
     get isPaintingFormat() {
         return this.env.model.getters.isPaintingFormat();
     }
-    onMouseDown(ev) {
+    onMouseDown(ev, modifiers) {
         if (ev.button > 0) {
             // not main button, probably a context menu
             return;
@@ -34075,6 +34725,7 @@ class GridOverlay extends owl.Component {
         this.props.onCellClicked(col, row, {
             expandZone: ev.shiftKey,
             addZone: isCtrlKey(ev),
+            closePopover: modifiers?.closePopover ?? true,
         });
     }
     onDoubleClick(ev) {
@@ -35813,6 +36464,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 owl.Component {
+    static template = "o-spreadsheet-TableResizer";
+    static props = { table: Object };
+    state = owl.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,
@@ -35840,7 +36562,7 @@ class Grid extends owl.Component {
         Popover,
         VerticalScrollBar,
         HorizontalScrollBar,
-        FilterIconsOverlay,
+        TableResizer,
     };
     HEADER_HEIGHT = HEADER_HEIGHT;
     HEADER_WIDTH = HEADER_WIDTH;
@@ -35869,6 +36591,7 @@ class Grid extends owl.Component {
         this.composerFocusStore = useStore(ComposerFocusStore);
         this.DOMFocusableElementStore = useStore(DOMFocusableElementStore);
         this.sidePanel = useStore(SidePanelStore);
+        useStore(ArrayFormulaHighlight);
         owl.useChildSubEnv({ getPopoverContainerRect: () => this.getGridRect() });
         owl.useExternalListener(document.body, "cut", this.copy.bind(this, true));
         owl.useExternalListener(document.body, "copy", this.copy.bind(this, false));
@@ -36141,17 +36864,17 @@ class Grid extends owl.Component {
     // ---------------------------------------------------------------------------
     // Zone selection with mouse
     // ---------------------------------------------------------------------------
-    onCellClicked(col, row, { addZone, expandZone }) {
-        if (this.cellPopovers.isOpen) {
+    onCellClicked(col, row, modifiers) {
+        if (modifiers.closePopover && this.cellPopovers.isOpen) {
             this.cellPopovers.close();
         }
         if (this.composerStore.editionMode === "editing") {
             this.composerStore.stopEdition();
         }
-        if (expandZone) {
+        if (modifiers.expandZone) {
             this.env.model.selection.setAnchorCorner(col, row);
         }
-        else if (addZone) {
+        else if (modifiers.addZone) {
             this.env.model.selection.addCellToSelection(col, row);
         }
         else {
@@ -36437,6 +37160,10 @@ class Grid extends owl.Component {
     onComposerContentFocused() {
         this.composerFocusStore.focusGridComposerContent();
     }
+    get staticTables() {
+        const sheetId = this.env.model.getters.getActiveSheetId();
+        return this.env.model.getters.getCoreTables(sheetId).filter(isStaticTable);
+    }
 }
 
 /**
@@ -36873,7 +37600,7 @@ const CHART_TYPE_CONVERSION_MAP = {
     line3DChart: undefined,
     stockChart: undefined,
     radarChart: undefined,
-    scatterChart: undefined,
+    scatterChart: "scatter",
     pieChart: "pie",
     pie3DChart: undefined,
     doughnutChart: "pie",
@@ -37637,29 +38364,12 @@ function convertWidthFromExcel(width) {
         return width;
     return Math.round((width / WIDTH_FACTOR) * 100) / 100;
 }
-function convertBorderDescr(descr) {
-    if (!descr) {
-        return undefined;
-    }
-    return {
-        style: descr.style,
-        color: { rgb: descr.color },
-    };
-}
 function extractStyle(cell, data) {
     let style = {};
     if (cell.style) {
         style = data.styles[cell.style];
     }
     const format = extractFormat(cell, data);
-    const exportedBorder = {};
-    if (cell.border) {
-        const border = data.borders[cell.border];
-        exportedBorder.left = convertBorderDescr(border.left);
-        exportedBorder.right = convertBorderDescr(border.right);
-        exportedBorder.bottom = convertBorderDescr(border.bottom);
-        exportedBorder.top = convertBorderDescr(border.top);
-    }
     const styles = {
         font: {
             size: style?.fontSize || DEFAULT_FONT_SIZE,
@@ -37673,7 +38383,7 @@ function extractStyle(cell, data) {
             }
             : { reservedAttribute: "none" },
         numFmt: format ? { format: format, id: 0 /* id not used for export */ } : undefined,
-        border: exportedBorder || {},
+        border: cell.border || 0,
         alignment: {
             horizontal: style.align,
             vertical: style.verticalAlign
@@ -37695,15 +38405,12 @@ function extractFormat(cell, data) {
     return undefined;
 }
 function normalizeStyle(construct, styles) {
-    const { id: fontId } = pushElement(styles["font"], construct.fonts);
-    const { id: fillId } = pushElement(styles["fill"], construct.fills);
-    const { id: borderId } = pushElement(styles["border"], construct.borders);
     // Normalize this
     const numFmtId = convertFormat(styles["numFmt"], construct.numFmts);
     const style = {
-        fontId,
-        fillId,
-        borderId,
+        fontId: pushElement(styles.font, construct.fonts),
+        fillId: pushElement(styles.fill, construct.fills),
+        borderId: styles.border,
         numFmtId,
         alignment: {
             vertical: styles.alignment.vertical,
@@ -37711,8 +38418,7 @@ function normalizeStyle(construct, styles) {
             wrapText: styles.alignment.wrapText,
         },
     };
-    const { id } = pushElement(style, construct.styles);
-    return id;
+    return pushElement(style, construct.styles);
 }
 function convertFormat(format, numFmtStructure) {
     if (!format) {
@@ -37720,8 +38426,7 @@ function convertFormat(format, numFmtStructure) {
     }
     let formatId = XLSX_FORMAT_MAP[format.format];
     if (!formatId) {
-        const { id } = pushElement(format, numFmtStructure);
-        formatId = id + FIRST_NUMFMT_ID;
+        formatId = pushElement(format, numFmtStructure) + FIRST_NUMFMT_ID;
     }
     return formatId;
 }
@@ -37746,20 +38451,15 @@ function addRelsToFile(relsFiles, path, rel) {
     return id;
 }
 function pushElement(property, propertyList) {
-    for (let [key, value] of Object.entries(propertyList)) {
-        if (JSON.stringify(value) === JSON.stringify(property)) {
-            return { id: parseInt(key, 10), list: propertyList };
+    let len = propertyList.length;
+    const operator = typeof property === "object" ? deepEquals : (a, b) => a === b;
+    for (let i = 0; i < len; i++) {
+        if (operator(property, propertyList[i])) {
+            return i;
         }
     }
-    let elemId = propertyList.findIndex((elem) => JSON.stringify(elem) === JSON.stringify(property));
-    if (elemId === -1) {
-        propertyList.push(property);
-        elemId = propertyList.length - 1;
-    }
-    return {
-        id: elemId,
-        list: propertyList,
-    };
+    propertyList[propertyList.length] = property;
+    return propertyList.length - 1;
 }
 const chartIds = [];
 /**
@@ -38554,7 +39254,25 @@ function parseXML(xmlString, mimeType = "text/xml") {
     }
     return document;
 }
-function getDefaultXLSXStructure() {
+function convertBorderDescr(descr) {
+    if (!descr) {
+        return undefined;
+    }
+    return {
+        style: descr.style,
+        color: { rgb: descr.color },
+    };
+}
+function getDefaultXLSXStructure(data) {
+    const xlsxBorders = Object.values(data.borders).map((border) => {
+        return {
+            left: convertBorderDescr(border.left),
+            right: convertBorderDescr(border.right),
+            bottom: convertBorderDescr(border.bottom),
+            top: convertBorderDescr(border.top),
+        };
+    });
+    const borders = [{}, ...xlsxBorders];
     return {
         relsFiles: [],
         sharedStrings: [],
@@ -38577,7 +39295,7 @@ function getDefaultXLSXStructure() {
             },
         ],
         fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
-        borders: [{}],
+        borders,
         numFmts: [],
         dxfs: [],
     };
@@ -39113,8 +39831,8 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             return {
                 title: chartTitle,
                 type: CHART_TYPE_CONVERSION_MAP[chartType],
-                dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`)),
-                labelRange: this.extractChildTextContent(rootChartElement, "c:ser c:cat c:f"),
+                dataSets: this.extractChartDatasets(this.querySelector(rootChartElement, `c:${chartType}`), chartType),
+                labelRange: this.extractChildTextContent(rootChartElement, `c:ser ${chartType === "scatterChart" ? "c:numRef" : "c:cat"} c:f`),
                 backgroundColor: this.extractChildAttr(rootChartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
                     default: "ffffff",
                 }).asString(),
@@ -39143,8 +39861,8 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             title: chartTitle,
             type: "combo",
             dataSets: [
-                ...this.extractChartDatasets(this.querySelector(chartElement, `c:barChart`)),
-                ...this.extractChartDatasets(this.querySelector(chartElement, `c:lineChart`)),
+                ...this.extractChartDatasets(this.querySelector(chartElement, `c:barChart`), "comboChart"),
+                ...this.extractChartDatasets(this.querySelector(chartElement, `c:lineChart`), "comboChart"),
             ],
             labelRange: this.extractChildTextContent(chartElement, "c:ser c:cat c:f"),
             backgroundColor: this.extractChildAttr(chartElement, "c:chartSpace > c:spPr a:srgbClr", "val", {
@@ -39162,7 +39880,10 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             fontColor: "000000",
         };
     }
-    extractChartDatasets(chartElement) {
+    extractChartDatasets(chartElement, chartType) {
+        if (chartType === "scatterChart") {
+            return this.extractScatterChartDatasets(chartElement);
+        }
         return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
             return {
                 label: this.extractChildTextContent(chartDataElement, "c:tx c:f"),
@@ -39170,6 +39891,14 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
             };
         });
     }
+    extractScatterChartDatasets(chartElement) {
+        return this.mapOnElements({ parent: chartElement, query: "c:ser" }, (chartDataElement) => {
+            return {
+                label: this.extractChildTextContent(chartDataElement, "c:xVal c:f", { required: false }),
+                range: this.extractChildTextContent(chartDataElement, "c:yVal c:f", { required: true }),
+            };
+        });
+    }
     /**
      * The chart type in the XML isn't explicitly defined, but there is an XML element that define the
      * chart, and this element tag name tells us which type of chart it is. We just need to find this XML element.
@@ -40563,12 +41292,14 @@ class BasePlugin {
     static getters = [];
     history;
     dispatch;
-    constructor(stateObserver, dispatch) {
+    canDispatch;
+    constructor(stateObserver, dispatch, canDispatch) {
         this.history = Object.assign(Object.create(stateObserver), {
             update: stateObserver.addChange.bind(stateObserver, this),
             selectCell: () => { },
         });
         this.dispatch = dispatch;
+        this.canDispatch = canDispatch;
     }
     /**
      * Export for excel should be available for all plugins, even for the UI.
@@ -40647,8 +41378,8 @@ class BasePlugin {
 class CorePlugin extends BasePlugin {
     getters;
     uuidGenerator;
-    constructor({ getters, stateObserver, range, dispatch, uuidGenerator }) {
-        super(stateObserver, dispatch);
+    constructor({ getters, stateObserver, range, dispatch, canDispatch, uuidGenerator, }) {
+        super(stateObserver, dispatch, canDispatch);
         range.addRangeProvider(this.adaptRanges.bind(this));
         this.getters = getters;
         this.uuidGenerator = uuidGenerator;
@@ -45226,7 +45957,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();
@@ -45247,7 +45978,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 */;
                 }
@@ -45403,10 +46134,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;
             }
@@ -45422,7 +46152,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 */;
         }
@@ -45472,7 +46202,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;
         }
@@ -46145,8 +46875,8 @@ class UIPlugin extends BasePlugin {
     getters;
     ui;
     selection;
-    constructor({ getters, stateObserver, dispatch, uiActions, selection }) {
-        super(stateObserver, dispatch);
+    constructor({ getters, stateObserver, dispatch, canDispatch, uiActions, selection, }) {
+        super(stateObserver, dispatch, canDispatch);
         this.getters = getters;
         this.ui = uiActions;
         this.selection = selection;
@@ -47426,7 +48156,9 @@ class Evaluator {
         this.blockedArrayFormulas = this.createEmptyPositionSet();
         this.spreadingRelations = new SpreadingRelation(this.createEmptyPositionSet.bind(this));
         this.formulaDependencies = lazy(() => {
-            const dependencies = [...this.getAllCells()].flatMap((position) => this.getDirectDependencies(position).map((range) => ({
+            const dependencies = [...this.getAllCells()].flatMap((position) => this.getDirectDependencies(position)
+                .filter((range) => !range.invalidSheetName && !range.invalidXc)
+                .map((range) => ({
                 data: position,
                 boundingBox: {
                     zone: range.zone,
@@ -51510,6 +52242,8 @@ const invalidateTableStyleCommands = [
     "CREATE_TABLE",
     "UPDATE_TABLE",
     "UPDATE_FILTER",
+    "REMOVE_TABLE",
+    "RESIZE_TABLE",
 ];
 const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
 function doesCommandInvalidatesTableStyle(cmd) {
@@ -51537,6 +52271,10 @@ class CellComputedStylePlugin extends UIPlugin {
             this.styles = {};
             return;
         }
+        if (invalidateBordersCommands.has(cmd.type)) {
+            this.borders = {};
+            return;
+        }
     }
     getCellComputedBorder(position) {
         const { sheetId, row, col } = position;
@@ -52140,7 +52878,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;
         }
@@ -52174,6 +52915,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
  *
@@ -53848,13 +54633,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;
                 }
@@ -53862,7 +54648,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)) {
@@ -53899,16 +54684,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":
@@ -54331,17 +55116,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,
@@ -54397,12 +55171,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();
@@ -54591,7 +55368,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)
@@ -54659,38 +55437,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 },
@@ -55477,7 +56223,6 @@ class SpreadsheetDashboard extends owl.Component {
         Popover,
         VerticalScrollBar,
         HorizontalScrollBar,
-        FilterIconsOverlay,
     };
     cellPopovers;
     onMouseWheel;
@@ -56364,6 +57109,13 @@ class TopBarComposer extends owl.Component {
             "border-color": SELECTION_BORDER_COLOR,
         });
     }
+    get delimitation() {
+        const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+        return {
+            width,
+            height,
+        };
+    }
     onFocus(selection) {
         this.composerFocusStore.focusTopBarComposer(selection);
     }
@@ -57018,7 +57770,6 @@ class Spreadsheet extends owl.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", {}),
@@ -58647,6 +59398,9 @@ function createChart(chart, chartSheetIndex, data) {
         case "line":
             plot = addLineChart(chart.data);
             break;
+        case "scatter":
+            plot = addScatterChart(chart.data);
+            break;
         case "pie":
             plot = addDoughnutChart(chart.data, chartSheetIndex, data, { holeSize: 0 });
             break;
@@ -58924,6 +59678,52 @@ function addLineChart(chart) {
     ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
   `;
 }
+function addScatterChart(chart) {
+    const colors = new ChartColors();
+    const dataSetsNodes = [];
+    for (const [dsIndex, dataset] of Object.entries(chart.dataSets)) {
+        dataSetsNodes.push(escapeXml /*xml*/ `
+      <c:ser>
+        <c:idx val="${dsIndex}"/>
+        <c:order val="${dsIndex}"/>
+        <c:smooth val="0"/>
+        <c:spPr>
+          <a:ln w="19050" cap="rnd">
+            <a:noFill/>
+            <a:round/>
+          </a:ln>
+          <a:effectLst/>
+        </c:spPr>
+        <c:marker>
+          <c:symbol val="circle" />
+          <c:size val="5"/>
+          ${shapeProperty({ backgroundColor: toXlsxHexColor(colors.next()) })}
+        </c:marker>
+        ${chart.labelRange
+            ? escapeXml /*xml*/ `<c:xVal> <!-- x-coordinate values -->
+              ${numberRef(chart.labelRange)}
+            </c:xVal>`
+            : ""}
+        <c:yVal> <!-- y-coordinate values -->
+          ${numberRef(dataset.range)}
+        </c:yVal>
+      </c:ser>
+    `);
+    }
+    const axisPos = chart.verticalAxisPosition === "left" ? "l" : "r";
+    return escapeXml /*xml*/ `
+    <c:scatterChart>
+      <!-- each data marker in the series does not have a different color -->
+      <c:varyColors val="0"/>
+      <c:scatterStyle val="lineMarker"/>
+      ${joinXmlNodes(dataSetsNodes)}
+      <c:axId val="${catAxId}" />
+      <c:axId val="${valAxId}" />
+    </c:scatterChart>
+    ${addAx("b", "c:valAx", catAxId, valAxId, { fontColor: chart.fontColor })}
+    ${addAx(axisPos, "c:valAx", valAxId, catAxId, { fontColor: chart.fontColor })}
+  `;
+}
 function addDoughnutChart(chart, chartSheetIndex, data, { holeSize } = { holeSize: 50 }) {
     const colors = new ChartColors();
     const maxLength = largeMax(chart.dataSets.map((ds) => getRangeSize(ds.range, chartSheetIndex, data)));
@@ -59064,8 +59864,7 @@ function addContent(content, sharedStrings, forceString = false) {
         attrs.push(["t", "b"]);
     }
     else if (forceString || !isNumber(value, DEFAULT_LOCALE)) {
-        const { id } = pushElement(content, sharedStrings);
-        value = id.toString();
+        value = pushElement(content, sharedStrings);
         attrs.push(["t", "s"]);
     }
     return { attrs, node: escapeXml /*xml*/ `<v>${value}</v>` };
@@ -59190,8 +59989,7 @@ function addCellIsRule(cf, rule, dxfs) {
     if (rule.style.fillColor) {
         dxf.fill = { fgColor: { rgb: rule.style.fillColor } };
     }
-    const { id } = pushElement(dxf, dxfs);
-    ruleAttributes.push(["dxfId", id]);
+    ruleAttributes.push(["dxfId", pushElement(dxf, dxfs)]);
     return escapeXml /*xml*/ `
     <conditionalFormatting sqref="${cf.ranges.join(" ")}">
       <cfRule ${formatAttributes(ruleAttributes)}>
@@ -60021,8 +60819,9 @@ function addSheetViews(sheet) {
  */
 function getXLSX(data) {
     data = fixLengthySheetNames(data);
+    data = purgeSingleRowTables(data);
     const files = [];
-    const construct = getDefaultXLSXStructure();
+    const construct = getDefaultXLSXStructure(data);
     files.push(createWorkbook(data, construct));
     files.push(...createWorksheets(data, construct));
     files.push(createStylesSheet(construct));
@@ -60302,6 +61101,16 @@ function fixLengthySheetNames(data) {
     }
     return JSON.parse(stringifiedData);
 }
+/** Excel files do not support tables with a single row the defined range
+ * Since those tables are not really useful (no filtering/limited styling)
+ * This function filters out all tables with a single row.
+ */
+function purgeSingleRowTables(data) {
+    for (const sheet of data.sheets) {
+        sheet.tables = sheet.tables.filter((table) => zoneToDimension(toZone(table.range)).numberOfRows > 1);
+    }
+    return data;
+}
 
 var Status;
 (function (Status) {
@@ -60555,6 +61364,7 @@ class Model extends EventBus {
             stateObserver: this.state,
             range: this.range,
             dispatch: this.dispatchFromCorePlugin,
+            canDispatch: this.canDispatch,
             uuidGenerator: this.uuidGenerator,
             custom: this.config.custom,
             external: this.config.external,
@@ -60565,6 +61375,7 @@ class Model extends EventBus {
             getters: this.getters,
             stateObserver: this.state,
             dispatch: this.dispatch,
+            canDispatch: this.canDispatch,
             selection: this.selection,
             moveClient: this.session.move.bind(this.session),
             custom: this.config.custom,
@@ -60888,7 +61699,7 @@ const links = {
 const components = {
     Checkbox,
     Section,
-    ChartColor,
+    RoundColorPicker,
     ChartDataSeries,
     ChartErrorSection,
     ChartLabelRange,
@@ -60900,9 +61711,9 @@ const components = {
     GridOverlay,
     ScorecardChart,
     LineConfigPanel,
-    LineBarPieDesignPanel,
+    GenericChartDesignPanel,
     BarConfigPanel,
-    LineBarPieConfigPanel,
+    GenericChartConfigPanel,
     GaugeChartConfigPanel,
     GaugeChartDesignPanel,
     ScorecardChartConfigPanel,
@@ -60991,6 +61802,6 @@ exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
 
-__info__.version = "17.3.0-alpha.2";
-__info__.date = "2024-04-05T14:01:07.060Z";
-__info__.hash = "8c5a229";
+__info__.version = "17.3.0-alpha.4";
+__info__.date = "2024-04-15T11:02:51.551Z";
+__info__.hash = "a32a1df";