@odoo/o-spreadsheet 17.3.0-alpha.3 → 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.3
- * @date 2024-04-10T12:28:23.658Z
- * @hash 80b5056
+ * @version 17.3.0-alpha.4
+ * @date 2024-04-15T11:02:51.551Z
+ * @hash a32a1df
  */
 
 (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",
@@ -2121,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
@@ -2518,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 [];
@@ -9152,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 = {
@@ -9196,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");
       }
   }
@@ -18824,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;
       }
@@ -18863,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;
       }
@@ -18880,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;
@@ -21237,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.
@@ -21246,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,
   });
@@ -21256,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,
   });
@@ -21266,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,
   });
@@ -21276,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,
   });
@@ -21286,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,
   });
@@ -21296,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,
   });
@@ -21306,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);
@@ -21320,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
@@ -23299,6 +23639,7 @@ stores.inject(MyMetaStore, storeInstance);
                       this.save();
                   }
                   ev.stopPropagation();
+                  ev.preventDefault();
                   break;
               case "Escape":
                   this.cancel();
@@ -26952,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,
@@ -27070,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");
@@ -27677,8 +28018,8 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class LineBarPieDesignPanel extends owl.Component {
-      static template = "o-spreadsheet-LineBarPieDesignPanel";
+  class GenericChartDesignPanel extends owl.Component {
+      static template = "o-spreadsheet-GenericChartDesignPanel";
       static components = { RoundColorPicker, ChartTitle, Section };
       static props = {
           figureId: String,
@@ -27707,11 +28048,11 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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");
@@ -27723,7 +28064,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class ComboChartDesignPanel extends LineBarPieDesignPanel {
+  class ComboChartDesignPanel extends GenericChartDesignPanel {
       static template = "o-spreadsheet-ComboChartDesignPanel";
   }
 
@@ -27876,7 +28217,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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);
@@ -27925,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);
@@ -28068,6 +28409,46 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  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);
+      }
+  }
+
   const chartSidePanelComponentRegistry = new Registry();
   chartSidePanelComponentRegistry
       .add("line", {
@@ -28087,8 +28468,8 @@ stores.inject(MyMetaStore, storeInstance);
       design: ComboChartDesignPanel,
   })
       .add("pie", {
-      configuration: LineBarPieConfigPanel,
-      design: LineBarPieDesignPanel,
+      configuration: GenericChartConfigPanel,
+      design: GenericChartDesignPanel,
   })
       .add("gauge", {
       configuration: GaugeChartConfigPanel,
@@ -28097,6 +28478,10 @@ stores.inject(MyMetaStore, storeInstance);
       .add("scorecard", {
       configuration: ScorecardChartConfigPanel,
       design: ScorecardChartDesignPanel,
+  })
+      .add("waterfall", {
+      configuration: GenericChartConfigPanel,
+      design: WaterfallChartDesignPanel,
   });
 
   class MainChartPanelStore extends SpreadsheetStore {
@@ -30834,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),
@@ -31368,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,
@@ -31857,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
   // -----------------------------------------------------------------------------
@@ -33633,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
@@ -36034,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,
@@ -36061,6 +36561,7 @@ stores.inject(MyMetaStore, storeInstance);
           Popover,
           VerticalScrollBar,
           HorizontalScrollBar,
+          TableResizer,
       };
       HEADER_HEIGHT = HEADER_HEIGHT;
       HEADER_WIDTH = HEADER_WIDTH;
@@ -36089,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));
@@ -36657,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);
+      }
   }
 
   /**
@@ -45450,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();
@@ -45471,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 */;
                   }
@@ -45627,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;
               }
@@ -45646,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 */;
           }
@@ -45696,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;
           }
@@ -51737,6 +52242,7 @@ stores.inject(MyMetaStore, storeInstance);
       "UPDATE_TABLE",
       "UPDATE_FILTER",
       "REMOVE_TABLE",
+      "RESIZE_TABLE",
   ];
   const invalidateTableStyleCommandsSet = new Set(invalidateTableStyleCommands);
   function doesCommandInvalidatesTableStyle(cmd) {
@@ -52371,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;
           }
@@ -52405,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
    *
@@ -54079,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;
                   }
@@ -54093,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)) {
@@ -54130,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":
@@ -54562,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,
@@ -54628,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();
@@ -54822,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)
@@ -54890,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 },
@@ -57255,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", {}),
@@ -61197,9 +61710,9 @@ stores.inject(MyMetaStore, storeInstance);
       GridOverlay,
       ScorecardChart,
       LineConfigPanel,
-      LineBarPieDesignPanel,
+      GenericChartDesignPanel,
       BarConfigPanel,
-      LineBarPieConfigPanel,
+      GenericChartConfigPanel,
       GaugeChartConfigPanel,
       GaugeChartDesignPanel,
       ScorecardChartConfigPanel,
@@ -61288,9 +61801,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "17.3.0-alpha.3";
-  __info__.date = "2024-04-10T12:28:23.658Z";
-  __info__.hash = "80b5056";
+  __info__.version = "17.3.0-alpha.4";
+  __info__.date = "2024-04-15T11:02:51.551Z";
+  __info__.hash = "a32a1df";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);