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

package/dist/o-spreadsheet.iife.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
  */
 
 (function (exports, owl) {
@@ -38,6 +38,9 @@
   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",
@@ -189,7 +192,7 @@
   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
@@ -561,7 +564,7 @@
       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) {
@@ -1885,6 +1888,11 @@
       "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",
@@ -2116,6 +2124,7 @@
       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
@@ -2182,6 +2191,7 @@
       BadExpression: "#BAD_EXPR",
       CircularDependency: "#CYCLE",
       UnknownFunction: "#NAME?",
+      DivisionByZero: "#DIV/0!",
       GenericError: "#ERROR",
   };
   const errorTypes = new Set(Object.values(CellErrorType));
@@ -2220,9 +2230,9 @@
 
   // 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) {
@@ -2300,6 +2310,9 @@
   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) {
@@ -2509,6 +2522,15 @@
       }
       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 [];
@@ -3065,6 +3087,9 @@
       return formattedValue;
   }
   function applyInternalNumberFormat(value, format, locale) {
+      if (value === Infinity) {
+          return "∞" + (format.isPercent ? "%" : "");
+      }
       if (format.isPercent) {
           value = value * 100;
       }
@@ -3408,6 +3433,46 @@
       });
       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 = [];
@@ -4600,14 +4665,19 @@
   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];
@@ -4752,6 +4822,42 @@
   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);
@@ -7395,6 +7501,7 @@
   };
   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)
@@ -9058,6 +9165,62 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /** 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 = {
@@ -9102,10 +9265,7 @@ stores.inject(MyMetaStore, storeInstance);
           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");
       }
   }
@@ -9430,32 +9590,63 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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;
@@ -9484,17 +9675,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 */
@@ -9512,10 +9692,12 @@ stores.inject(MyMetaStore, storeInstance);
       baseline;
       baselineMode;
       baselineDescr;
+      progressBar = false;
       background;
       baselineColorUp;
       baselineColorDown;
       fontColor;
+      humanize;
       type = "scorecard";
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
@@ -9526,6 +9708,7 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -9595,6 +9778,7 @@ stores.inject(MyMetaStore, storeInstance);
               keyValue: keyValue
                   ? this.getters.getRangeString(keyValue, targetSheetId || this.sheetId)
                   : undefined,
+              humanize: this.humanize,
           };
       }
       getDefinitionForExcel() {
@@ -9620,7 +9804,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -9647,20 +9831,41 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -9668,31 +9873,33 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -9706,17 +9913,21 @@ stores.inject(MyMetaStore, storeInstance);
                   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.
@@ -9756,31 +9967,37 @@ stores.inject(MyMetaStore, storeInstance);
               },
           };
           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,
@@ -9791,23 +10008,68 @@ stores.inject(MyMetaStore, storeInstance);
               };
           }
           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,
                   },
               };
           }
@@ -9834,9 +10096,6 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -9845,16 +10104,44 @@ stores.inject(MyMetaStore, storeInstance);
               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),
@@ -9867,7 +10154,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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 ||
@@ -9875,33 +10162,25 @@ stores.inject(MyMetaStore, storeInstance);
                       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;
@@ -9910,29 +10189,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 {
@@ -10862,33 +11119,6 @@ stores.inject(MyMetaStore, storeInstance);
   // -----------------------------------------------------------------------------
   // 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: [
@@ -11050,7 +11280,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -11180,7 +11410,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -11194,7 +11424,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -11322,7 +11552,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -11336,7 +11566,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -11535,7 +11765,7 @@ stores.inject(MyMetaStore, storeInstance);
   // 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)) {
@@ -12104,7 +12334,7 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -12171,7 +12401,7 @@ stores.inject(MyMetaStore, storeInstance);
   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++) {
@@ -12194,7 +12424,7 @@ stores.inject(MyMetaStore, storeInstance);
           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)));
@@ -12391,7 +12621,7 @@ stores.inject(MyMetaStore, storeInstance);
               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;
       },
@@ -12463,7 +12693,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
               }
           }
-          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]) };
       },
   };
@@ -12483,7 +12713,7 @@ stores.inject(MyMetaStore, storeInstance);
               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]),
@@ -12513,7 +12743,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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,
@@ -12542,7 +12772,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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,
@@ -17967,7 +18197,7 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -18660,7 +18890,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
       }
@@ -18699,9 +18929,7 @@ stores.inject(MyMetaStore, storeInstance);
       // 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;
       }
@@ -18716,21 +18944,29 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -21012,7 +21248,21 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -21059,6 +21309,263 @@ stores.inject(MyMetaStore, storeInstance);
       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.
@@ -21068,9 +21575,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
   });
@@ -21078,9 +21585,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
   });
@@ -21088,9 +21595,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
   });
@@ -21098,9 +21605,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
   });
@@ -21108,9 +21615,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
   });
@@ -21118,9 +21625,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
   });
@@ -21128,12 +21635,22 @@ stores.inject(MyMetaStore, storeInstance);
       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);
@@ -21142,6 +21659,7 @@ stores.inject(MyMetaStore, storeInstance);
   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
@@ -23121,6 +23639,7 @@ stores.inject(MyMetaStore, storeInstance);
                       this.save();
                   }
                   ev.stopPropagation();
+                  ev.preventDefault();
                   break;
               case "Escape":
                   this.cancel();
@@ -26774,8 +27293,8 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  class LineBarPieConfigPanel extends owl.Component {
-      static template = "o-spreadsheet-LineBarPieConfigPanel";
+  class GenericChartConfigPanel extends owl.Component {
+      static template = "o-spreadsheet-GenericChartConfigPanel";
       static components = {
           SelectionInput,
           ValidationMessages,
@@ -26892,7 +27411,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class BarConfigPanel extends LineBarPieConfigPanel {
+  class BarConfigPanel extends GenericChartConfigPanel {
       static template = "o-spreadsheet-BarConfigPanel";
       get stackedLabel() {
           return _t("Stacked barchart");
@@ -27440,13 +27959,30 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 });
@@ -27458,6 +27994,19 @@ stores.inject(MyMetaStore, storeInstance);
       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 {
@@ -27469,9 +28018,9 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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,
@@ -27494,13 +28043,16 @@ stores.inject(MyMetaStore, storeInstance);
               [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");
@@ -27512,7 +28064,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class ComboChartDesignPanel extends LineBarPieDesignPanel {
+  class ComboChartDesignPanel extends GenericChartDesignPanel {
       static template = "o-spreadsheet-ComboChartDesignPanel";
   }
 
@@ -27563,6 +28115,10 @@ stores.inject(MyMetaStore, storeInstance);
       line-height: 18px;
       width: 100%;
     }
+    td {
+      box-sizing: border-box;
+      height: 30px;
+    }
     th.o-gauge-color-set-colorPicker {
       width: 8%;
     }
@@ -27585,7 +28141,12 @@ stores.inject(MyMetaStore, storeInstance);
 `;
   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,
@@ -27597,9 +28158,6 @@ stores.inject(MyMetaStore, storeInstance);
           sectionRuleDispatchResult: undefined,
           sectionRule: deepCopy(this.props.definition.sectionRule),
       });
-      setup() {
-          owl.useExternalListener(window, "click", this.closeMenus);
-      }
       get title() {
           return _t(this.props.definition.title);
       }
@@ -27640,31 +28198,26 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -27713,11 +28266,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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);
@@ -27808,39 +28361,36 @@ stores.inject(MyMetaStore, storeInstance);
 
   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":
@@ -27853,10 +28403,49 @@ stores.inject(MyMetaStore, storeInstance);
                   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);
       }
   }
 
@@ -27879,8 +28468,8 @@ stores.inject(MyMetaStore, storeInstance);
       design: ComboChartDesignPanel,
   })
       .add("pie", {
-      configuration: LineBarPieConfigPanel,
-      design: LineBarPieDesignPanel,
+      configuration: GenericChartConfigPanel,
+      design: GenericChartDesignPanel,
   })
       .add("gauge", {
       configuration: GaugeChartConfigPanel,
@@ -27889,6 +28478,10 @@ stores.inject(MyMetaStore, storeInstance);
       .add("scorecard", {
       configuration: ScorecardChartConfigPanel,
       design: ScorecardChartDesignPanel,
+  })
+      .add("waterfall", {
+      configuration: GenericChartConfigPanel,
+      design: WaterfallChartDesignPanel,
   });
 
   class MainChartPanelStore extends SpreadsheetStore {
@@ -28805,6 +29398,7 @@ stores.inject(MyMetaStore, storeInstance);
           ColorPickerWidget,
           ConditionalFormatPreviewList,
           Section,
+          RoundColorPicker,
       };
       icons = ICONS;
       cellIsOperators = CellIsOperators;
@@ -30625,6 +31219,9 @@ stores.inject(MyMetaStore, storeInstance);
           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),
@@ -31159,7 +31756,12 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -31648,6 +32250,38 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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
   // -----------------------------------------------------------------------------
@@ -32309,6 +32943,7 @@ stores.inject(MyMetaStore, storeInstance);
           onComposerCellFocused: { type: Function, optional: true },
           onComposerContentFocused: Function,
           isDefaultFocus: { type: Boolean, optional: true },
+          onInputContextMenu: { type: Function, optional: true },
       };
       static components = { TextValueProvider, FunctionDescriptionProvider };
       static defaultProps = {
@@ -32359,6 +32994,9 @@ stores.inject(MyMetaStore, storeInstance);
                   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
@@ -32645,6 +33283,11 @@ stores.inject(MyMetaStore, storeInstance);
               }
           }
       }
+      onContextMenu(ev) {
+          if (this.composerStore.editionMode === "inactive") {
+              this.props.onInputContextMenu?.(ev);
+          }
+      }
       // ---------------------------------------------------------------------------
       // Private
       // ---------------------------------------------------------------------------
@@ -32866,6 +33509,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-GridComposer";
       static props = {
           gridDims: Object,
+          onInputContextMenu: Function,
       };
       static components = { Composer };
       rect = this.defaultRect;
@@ -32913,6 +33557,7 @@ stores.inject(MyMetaStore, storeInstance);
               isDefaultFocus: true,
               onComposerContentFocused: () => this.composerFocusStore.focusGridComposerContent(),
               onComposerCellFocused: (content) => this.composerFocusStore.focusGridComposerCell(content),
+              onInputContextMenu: this.props.onInputContextMenu,
           };
       }
       get containerStyle() {
@@ -33011,7 +33656,6 @@ stores.inject(MyMetaStore, storeInstance);
           cellPosition: Object,
           horizontalAlign: { type: String, optional: true },
           verticalAlign: { type: String, optional: true },
-          offset: { type: Object, optional: true },
           slots: Object,
       };
       get iconStyle() {
@@ -33022,8 +33666,8 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -33063,83 +33707,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 */ `
@@ -33491,6 +34058,10 @@ stores.inject(MyMetaStore, storeInstance);
       height: 0px;
     }
   }
+  .o-figure-container {
+    -webkit-user-select: none; // safari
+    user-select: none;
+  }
 `;
   /**
    * Each figure ⭐ is positioned inside a container `div` placed and sized
@@ -33807,6 +34378,80 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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 {
@@ -34020,7 +34665,12 @@ stores.inject(MyMetaStore, storeInstance);
           onGridMoved: Function,
           gridOverlayDimensions: String,
       };
-      static components = { FiguresContainer, DataValidationOverlay, GridAddRowsFooter };
+      static components = {
+          FiguresContainer,
+          DataValidationOverlay,
+          GridAddRowsFooter,
+          FilterIconsOverlay,
+      };
       static defaultProps = {
           onCellHovered: () => { },
           onCellDoubleClicked: () => { },
@@ -34065,7 +34715,7 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -34074,6 +34724,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.onCellClicked(col, row, {
               expandZone: ev.shiftKey,
               addZone: isCtrlKey(ev),
+              closePopover: modifiers?.closePopover ?? true,
           });
       }
       onDoubleClick(ev) {
@@ -35812,6 +36463,77 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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,
@@ -35839,7 +36561,7 @@ stores.inject(MyMetaStore, storeInstance);
           Popover,
           VerticalScrollBar,
           HorizontalScrollBar,
-          FilterIconsOverlay,
+          TableResizer,
       };
       HEADER_HEIGHT = HEADER_HEIGHT;
       HEADER_WIDTH = HEADER_WIDTH;
@@ -35868,6 +36590,7 @@ stores.inject(MyMetaStore, storeInstance);
           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));
@@ -36140,17 +36863,17 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // 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 {
@@ -36436,6 +37159,10 @@ stores.inject(MyMetaStore, storeInstance);
       onComposerContentFocused() {
           this.composerFocusStore.focusGridComposerContent();
       }
+      get staticTables() {
+          const sheetId = this.env.model.getters.getActiveSheetId();
+          return this.env.model.getters.getCoreTables(sheetId).filter(isStaticTable);
+      }
   }
 
   /**
@@ -36872,7 +37599,7 @@ stores.inject(MyMetaStore, storeInstance);
       line3DChart: undefined,
       stockChart: undefined,
       radarChart: undefined,
-      scatterChart: undefined,
+      scatterChart: "scatter",
       pieChart: "pie",
       pie3DChart: undefined,
       doughnutChart: "pie",
@@ -37636,29 +38363,12 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -37672,7 +38382,7 @@ stores.inject(MyMetaStore, storeInstance);
               }
               : { 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
@@ -37694,15 +38404,12 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -37710,8 +38417,7 @@ stores.inject(MyMetaStore, storeInstance);
               wrapText: styles.alignment.wrapText,
           },
       };
-      const { id } = pushElement(style, construct.styles);
-      return id;
+      return pushElement(style, construct.styles);
   }
   function convertFormat(format, numFmtStructure) {
       if (!format) {
@@ -37719,8 +38425,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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;
   }
@@ -37745,20 +38450,15 @@ stores.inject(MyMetaStore, storeInstance);
       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 = [];
   /**
@@ -38553,7 +39253,25 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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: [],
@@ -38576,7 +39294,7 @@ stores.inject(MyMetaStore, storeInstance);
               },
           ],
           fills: [{ reservedAttribute: "none" }, { reservedAttribute: "gray125" }],
-          borders: [{}],
+          borders,
           numFmts: [],
           dxfs: [],
       };
@@ -39112,8 +39830,8 @@ stores.inject(MyMetaStore, storeInstance);
               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(),
@@ -39142,8 +39860,8 @@ stores.inject(MyMetaStore, storeInstance);
               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", {
@@ -39161,7 +39879,10 @@ stores.inject(MyMetaStore, storeInstance);
               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"),
@@ -39169,6 +39890,14 @@ stores.inject(MyMetaStore, storeInstance);
               };
           });
       }
+      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.
@@ -40562,12 +41291,14 @@ stores.inject(MyMetaStore, storeInstance);
       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.
@@ -40646,8 +41377,8 @@ stores.inject(MyMetaStore, storeInstance);
   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;
@@ -45225,7 +45956,7 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   class TablePlugin extends CorePlugin {
-      static getters = ["getCoreTable", "getCoreTables"];
+      static getters = ["getCoreTable", "getCoreTables", "getCoreTableMatchingTopLeft"];
       tables = {};
       adaptRanges(applyChange, sheetId) {
           const sheetIds = sheetId ? [sheetId] : this.getters.getSheetIds();
@@ -45246,7 +45977,7 @@ stores.inject(MyMetaStore, storeInstance);
                       ? "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 */;
                   }
@@ -45402,10 +46133,9 @@ stores.inject(MyMetaStore, storeInstance);
           }
           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;
               }
@@ -45421,7 +46151,7 @@ stores.inject(MyMetaStore, storeInstance);
           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 */;
           }
@@ -45471,7 +46201,7 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       updateTable(cmd) {
-          const table = this.getTableFromZone(cmd.sheetId, cmd.zone);
+          const table = this.getCoreTableMatchingTopLeft(cmd.sheetId, cmd.zone);
           if (!table) {
               return;
           }
@@ -46144,8 +46874,8 @@ stores.inject(MyMetaStore, storeInstance);
       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;
@@ -47425,7 +48155,9 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -51509,6 +52241,8 @@ stores.inject(MyMetaStore, storeInstance);
       "CREATE_TABLE",
       "UPDATE_TABLE",
       "UPDATE_FILTER",
+      "REMOVE_TABLE",
+      "RESIZE_TABLE",
   ];
   const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
   function doesCommandInvalidatesTableStyle(cmd) {
@@ -51536,6 +52270,10 @@ stores.inject(MyMetaStore, storeInstance);
               this.styles = {};
               return;
           }
+          if (invalidateBordersCommands.has(cmd.type)) {
+              this.borders = {};
+              return;
+          }
       }
       getCellComputedBorder(position) {
           const { sheetId, row, col } = position;
@@ -52139,7 +52877,10 @@ stores.inject(MyMetaStore, storeInstance);
                   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;
           }
@@ -52173,6 +52914,50 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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
    *
@@ -53847,13 +54632,14 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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;
                   }
@@ -53861,7 +54647,6 @@ stores.inject(MyMetaStore, storeInstance);
                       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)) {
@@ -53898,16 +54683,16 @@ stores.inject(MyMetaStore, storeInstance);
                   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":
@@ -54330,17 +55115,6 @@ stores.inject(MyMetaStore, storeInstance);
           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,
@@ -54396,12 +55170,15 @@ stores.inject(MyMetaStore, storeInstance);
        * 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();
@@ -54590,7 +55367,8 @@ stores.inject(MyMetaStore, storeInstance);
       .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)
@@ -54658,38 +55436,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 },
@@ -55476,7 +56222,6 @@ stores.inject(MyMetaStore, storeInstance);
           Popover,
           VerticalScrollBar,
           HorizontalScrollBar,
-          FilterIconsOverlay,
       };
       cellPopovers;
       onMouseWheel;
@@ -56363,6 +57108,13 @@ stores.inject(MyMetaStore, storeInstance);
               "border-color": SELECTION_BORDER_COLOR,
           });
       }
+      get delimitation() {
+          const { width, height } = this.env.model.getters.getSheetViewDimensionWithHeaders();
+          return {
+              width,
+              height,
+          };
+      }
       onFocus(selection) {
           this.composerFocusStore.focusTopBarComposer(selection);
       }
@@ -57017,7 +57769,6 @@ stores.inject(MyMetaStore, storeInstance);
           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", {}),
@@ -58646,6 +59397,9 @@ stores.inject(MyMetaStore, storeInstance);
           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;
@@ -58923,6 +59677,52 @@ stores.inject(MyMetaStore, storeInstance);
     ${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)));
@@ -59063,8 +59863,7 @@ stores.inject(MyMetaStore, storeInstance);
           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>` };
@@ -59189,8 +59988,7 @@ stores.inject(MyMetaStore, storeInstance);
       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)}>
@@ -60020,8 +60818,9 @@ stores.inject(MyMetaStore, storeInstance);
    */
   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));
@@ -60301,6 +61100,16 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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) {
@@ -60554,6 +61363,7 @@ stores.inject(MyMetaStore, storeInstance);
               stateObserver: this.state,
               range: this.range,
               dispatch: this.dispatchFromCorePlugin,
+              canDispatch: this.canDispatch,
               uuidGenerator: this.uuidGenerator,
               custom: this.config.custom,
               external: this.config.external,
@@ -60564,6 +61374,7 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -60887,7 +61698,7 @@ stores.inject(MyMetaStore, storeInstance);
   const components = {
       Checkbox,
       Section,
-      ChartColor,
+      RoundColorPicker,
       ChartDataSeries,
       ChartErrorSection,
       ChartLabelRange,
@@ -60899,9 +61710,9 @@ stores.inject(MyMetaStore, storeInstance);
       GridOverlay,
       ScorecardChart,
       LineConfigPanel,
-      LineBarPieDesignPanel,
+      GenericChartDesignPanel,
       BarConfigPanel,
-      LineBarPieConfigPanel,
+      GenericChartConfigPanel,
       GaugeChartConfigPanel,
       GaugeChartDesignPanel,
       ScorecardChartConfigPanel,
@@ -60990,9 +61801,9 @@ stores.inject(MyMetaStore, storeInstance);
   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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);