@odoo/o-spreadsheet 18.5.0-alpha.6 → 18.5.0-alpha.8

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.5.0-alpha.6
- * @date 2025-08-05T06:27:49.505Z
- * @hash 67e091f
+ * @version 18.5.0-alpha.8
+ * @date 2025-08-18T08:17:58.775Z
+ * @hash 994f1cb
  */
 
 (function (exports, owl) {
@@ -199,6 +199,7 @@
   const CHART_PADDING_TOP = 15;
   const CHART_TITLE_FONT_SIZE = 16;
   const CHART_AXIS_TITLE_FONT_SIZE = 12;
+  const MASTER_CHART_HEIGHT = 60;
   const SCORECARD_CHART_TITLE_FONT_SIZE = 14;
   const PIVOT_TOKEN_COLOR = "#F28C28";
   // Color picker defaults as upper case HEX to match `toHex`helper
@@ -414,6 +415,7 @@
   };
   const PIVOT_INDENT = 15;
   const PIVOT_COLLAPSE_ICON_SIZE = 12;
+  const PIVOT_MAX_NUMBER_OF_CELLS = 1e5;
   const DEFAULT_CURRENCY = {
       symbol: "$",
       position: "before",
@@ -2656,6 +2658,7 @@
       "SET_FORMULA_VISIBILITY",
       "UPDATE_FILTER",
       "UPDATE_CHART",
+      "UPDATE_CAROUSEL_ACTIVE_ITEM",
   ]);
   const coreTypes = new Set([
       /** CELLS */
@@ -2698,6 +2701,8 @@
       "CREATE_FIGURE",
       "DELETE_FIGURE",
       "UPDATE_FIGURE",
+      "CREATE_CAROUSEL",
+      "UPDATE_CAROUSEL",
       /** FORMATTING */
       "SET_FORMATTING",
       "CLEAR_FORMATTING",
@@ -2707,6 +2712,7 @@
       /** CHART */
       "CREATE_CHART",
       "UPDATE_CHART",
+      "DELETE_CHART",
       /** FILTERS */
       "CREATE_TABLE",
       "REMOVE_TABLE",
@@ -2901,6 +2907,7 @@
       CommandResult["InvalidColor"] = "InvalidColor";
       CommandResult["InvalidPivotDataSet"] = "InvalidPivotDataSet";
       CommandResult["InvalidPivotCustomField"] = "InvalidPivotCustomField";
+      CommandResult["MissingFigureArguments"] = "MissingFigureArguments";
   })(exports.CommandResult || (exports.CommandResult = {}));
 
   const availableConditionalFormatOperators = new Set([
@@ -9221,7 +9228,7 @@
               return;
           }
           const copiedFigure = { ...figure };
-          const chart = this.getters.getChart(data.figureId);
+          const chart = this.getters.getChartFromFigureId(data.figureId);
           if (!chart) {
               throw new Error(`No chart for the given id: ${data.figureId}`);
           }
@@ -9257,6 +9264,7 @@
           }
           this.dispatch("CREATE_CHART", {
               figureId,
+              chartId: figureId,
               sheetId,
               definition: copy.getDefinition(),
               col,
@@ -19029,6 +19037,211 @@ stores.inject(MyMetaStore, storeInstance);
     XOR: XOR
   });
 
+  const CfTerms = {
+      Errors: {
+          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
+          ["FirstArgMissing" /* CommandResult.FirstArgMissing */]: _t("The argument is missing. Please provide a value"),
+          ["SecondArgMissing" /* CommandResult.SecondArgMissing */]: _t("The second argument is missing. Please provide a value"),
+          ["MinNaN" /* CommandResult.MinNaN */]: _t("The minpoint must be a number"),
+          ["MidNaN" /* CommandResult.MidNaN */]: _t("The midpoint must be a number"),
+          ["MaxNaN" /* CommandResult.MaxNaN */]: _t("The maxpoint must be a number"),
+          ["ValueUpperInflectionNaN" /* CommandResult.ValueUpperInflectionNaN */]: _t("The first value must be a number"),
+          ["ValueLowerInflectionNaN" /* CommandResult.ValueLowerInflectionNaN */]: _t("The second value must be a number"),
+          ["MinBiggerThanMax" /* CommandResult.MinBiggerThanMax */]: _t("Minimum must be smaller then Maximum"),
+          ["MinBiggerThanMid" /* CommandResult.MinBiggerThanMid */]: _t("Minimum must be smaller then Midpoint"),
+          ["MidBiggerThanMax" /* CommandResult.MidBiggerThanMax */]: _t("Midpoint must be smaller then Maximum"),
+          ["LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */]: _t("Lower inflection point must be smaller than upper inflection point"),
+          ["MinInvalidFormula" /* CommandResult.MinInvalidFormula */]: _t("Invalid Minpoint formula"),
+          ["MaxInvalidFormula" /* CommandResult.MaxInvalidFormula */]: _t("Invalid Maxpoint formula"),
+          ["MidInvalidFormula" /* CommandResult.MidInvalidFormula */]: _t("Invalid Midpoint formula"),
+          ["ValueUpperInvalidFormula" /* CommandResult.ValueUpperInvalidFormula */]: _t("Invalid upper inflection point formula"),
+          ["ValueLowerInvalidFormula" /* CommandResult.ValueLowerInvalidFormula */]: _t("Invalid lower inflection point formula"),
+          ["EmptyRange" /* CommandResult.EmptyRange */]: _t("A range needs to be defined"),
+          ["ValueCellIsInvalidFormula" /* CommandResult.ValueCellIsInvalidFormula */]: _t("At least one of the provided values is an invalid formula"),
+          Unexpected: _t("The rule is invalid for an unknown reason"),
+      },
+      ColorScale: _t("Color scale"),
+      IconSet: _t("Icon set"),
+      DataBar: _t("Data bar"),
+  };
+  const ChartTerms = {
+      Series: _t("Series"),
+      BackgroundColor: _t("Background color"),
+      StackedBarChart: _t("Stacked bar chart"),
+      StackedLineChart: _t("Stacked line chart"),
+      StackedAreaChart: _t("Stacked area chart"),
+      StackedColumnChart: _t("Stacked column chart"),
+      CumulativeData: _t("Cumulative data"),
+      TreatLabelsAsText: _t("Treat labels as text"),
+      AggregatedChart: _t("Aggregate"),
+      Errors: {
+          Unexpected: _t("The chart definition is invalid for an unknown reason"),
+          // BASIC CHART ERRORS (LINE | BAR | PIE)
+          ["InvalidDataSet" /* CommandResult.InvalidDataSet */]: _t("The dataset is invalid"),
+          ["InvalidLabelRange" /* CommandResult.InvalidLabelRange */]: _t("Labels are invalid"),
+          // SCORECARD CHART ERRORS
+          ["InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */]: _t("The key value is invalid"),
+          ["InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */]: _t("The baseline value is invalid"),
+          // GAUGE CHART ERRORS
+          ["InvalidGaugeDataRange" /* CommandResult.InvalidGaugeDataRange */]: _t("The data range is invalid"),
+          ["EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */]: _t("A minimum range limit value is needed"),
+          ["GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */]: _t("The minimum range limit value must be a number"),
+          ["EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */]: _t("A maximum range limit value is needed"),
+          ["GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */]: _t("The maximum range limit value must be a number"),
+          ["GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */]: _t("The lower inflection point value must be a number"),
+          ["GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */]: _t("The upper inflection point value must be a number"),
+      },
+      GeoChart: {
+          ColorScales: {
+              blues: _t("Blues"),
+              cividis: _t("Cividis"),
+              greens: _t("Greens"),
+              greys: _t("Greys"),
+              oranges: _t("Oranges"),
+              purples: _t("Purples"),
+              rainbow: _t("Rainbow"),
+              reds: _t("Reds"),
+              viridis: _t("Viridis"),
+          },
+      },
+  };
+  const CustomCurrencyTerms = {
+      Custom: _t("Custom"),
+  };
+  const MergeErrorMessage = _t("Merged cells are preventing this operation. Unmerge those cells and try again.");
+  const SplitToColumnsTerms = {
+      Errors: {
+          Unexpected: _t("Cannot split the selection for an unknown reason"),
+          ["NoSplitSeparatorInSelection" /* CommandResult.NoSplitSeparatorInSelection */]: _t("There is no match for the selected separator in the selection"),
+          ["MoreThanOneColumnSelected" /* CommandResult.MoreThanOneColumnSelected */]: _t("Only a selection from a single column can be split"),
+          ["SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */]: _t("Splitting will overwrite existing content"),
+      },
+  };
+  const RemoveDuplicateTerms = {
+      Errors: {
+          Unexpected: _t("Cannot remove duplicates for an unknown reason"),
+          ["MoreThanOneRangeSelected" /* CommandResult.MoreThanOneRangeSelected */]: _t("Please select only one range of cells"),
+          ["EmptyTarget" /* CommandResult.EmptyTarget */]: _t("Please select a range of cells containing values."),
+          ["NoColumnsProvided" /* CommandResult.NoColumnsProvided */]: _t("Please select at latest one column to analyze."),
+          //TODO: Remove it when accept to copy and paste merge cells
+          ["WillRemoveExistingMerge" /* CommandResult.WillRemoveExistingMerge */]: _t("This operation is not possible due to a merge. Please remove the merges first than try again."),
+      },
+  };
+  const DVTerms = {
+      DateIs: {
+          today: _t("today"),
+          yesterday: _t("yesterday"),
+          tomorrow: _t("tomorrow"),
+          lastWeek: _t("in the past week"),
+          lastMonth: _t("in the past month"),
+          lastYear: _t("in the past year"),
+      },
+      DateIsBefore: {
+          today: _t("today"),
+          yesterday: _t("yesterday"),
+          tomorrow: _t("tomorrow"),
+          lastWeek: _t("one week ago"),
+          lastMonth: _t("one month ago"),
+          lastYear: _t("one year ago"),
+      },
+      CriterionError: {
+          notEmptyValue: _t("The value must not be empty"),
+          numberValue: _t("The value must be a number"),
+          dateValue: _t("The value must be a date"),
+          validRange: _t("The value must be a valid range"),
+          validFormula: _t("The formula must be valid"),
+      },
+      Errors: {
+          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid."),
+          ["InvalidDataValidationCriterionValue" /* CommandResult.InvalidDataValidationCriterionValue */]: _t("One or more of the provided criteria values are invalid. Please review and correct them."),
+          ["InvalidNumberOfCriterionValues" /* CommandResult.InvalidNumberOfCriterionValues */]: _t("One or more of the provided criteria values are missing."),
+          Unexpected: _t("The rule is invalid for an unknown reason."),
+      },
+  };
+  const TableTerms = {
+      Errors: {
+          Unexpected: _t("The table zone is invalid for an unknown reason"),
+          ["TableOverlap" /* CommandResult.TableOverlap */]: _t("You cannot create overlapping tables."),
+          ["NonContinuousTargets" /* CommandResult.NonContinuousTargets */]: _t("A table can only be created on a continuous selection."),
+          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
+          ["TargetOutOfSheet" /* CommandResult.TargetOutOfSheet */]: _t("The range is out of the sheet"),
+      },
+      Checkboxes: {
+          hasFilters: _t("Filter button"),
+          headerRow: _t("Header row(s)"),
+          bandedRows: _t("Banded rows"),
+          firstColumn: _t("First column"),
+          lastColumn: _t("Last column"),
+          bandedColumns: _t("Banded columns"),
+          automaticAutofill: _t("Automatically autofill formulas"),
+          totalRow: _t("Total row"),
+          isDynamic: _t("Auto-adjust to formula result"),
+      },
+      Tooltips: {
+          filterWithoutHeader: _t("Cannot have filters without a header row"),
+          isDynamic: _t("For tables based on array formulas only"),
+      },
+  };
+  const measureDisplayTerms = {
+      labels: {
+          no_calculations: _t("No calculations"),
+          "%_of_grand_total": _t("% of grand total"),
+          "%_of_col_total": _t("% of column total"),
+          "%_of_row_total": _t("% of row total"),
+          "%_of": _t("% of"),
+          "%_of_parent_row_total": _t("% of parent row total"),
+          "%_of_parent_col_total": _t("% of parent column total"),
+          "%_of_parent_total": _t("% of parent total"),
+          difference_from: _t("Difference from"),
+          "%_difference_from": _t("% difference from"),
+          running_total: _t("Running total"),
+          "%_running_total": _t("% Running total"),
+          rank_asc: _t("Rank smallest to largest"),
+          rank_desc: _t("Rank largest to smallest"),
+          index: _t("Index"),
+      },
+      descriptions: {
+          "%_of_grand_total": () => _t("Displayed as % of grand total"),
+          "%_of_col_total": () => _t("Displayed as % of column total"),
+          "%_of_row_total": () => _t("Displayed as % of row total"),
+          "%_of": (field) => _t('Displayed as % of "%s"', field),
+          "%_of_parent_row_total": (field) => _t('Displayed as % of parent row total of "%s"', field),
+          "%_of_parent_col_total": () => _t("Displayed as % of parent column total"),
+          "%_of_parent_total": (field) => _t('Displayed as % of parent "%s" total', field),
+          difference_from: (field) => _t('Displayed as difference from "%s"', field),
+          "%_difference_from": (field) => _t('Displayed as % difference from "%s"', field),
+          running_total: (field) => _t('Displayed as running total based on "%s"', field),
+          "%_running_total": (field) => _t('Displayed as % running total based on "%s"', field),
+          rank_asc: (field) => _t('Displayed as rank from smallest to largest based on "%s"', field),
+          rank_desc: (field) => _t('Displayed as rank largest to smallest based on "%s"', field),
+          index: () => _t("Displayed as index"),
+      },
+      documentation: {
+          no_calculations: _t("Displays the value that is entered in the field."),
+          "%_of_grand_total": _t("Displays values as a percentage of the grand total of all the values or data points in the report."),
+          "%_of_col_total": _t("Displays all the values in each column or series as a percentage of the total for the column or series."),
+          "%_of_row_total": _t("Displays the value in each row or category as a percentage of the total for the row or category."),
+          "%_of": _t("Displays values as a percentage of the value of the Base item in the Base field."),
+          "%_of_parent_row_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on rows)"),
+          "%_of_parent_col_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on columns)"),
+          "%_of_parent_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item of the selected Base field)"),
+          difference_from: _t("Displays values as the difference from the value of the Base item in the Base field."),
+          "%_difference_from": _t("Displays values as the percentage difference from the value of the Base item in the Base field."),
+          running_total: _t("Displays the value for successive items in the Base field as a running total."),
+          "%_running_total": _t("Calculates the value as a percentage for successive items in the Base field that are displayed as a running total."),
+          rank_asc: _t("Displays the rank of selected values in a specific field, listing the smallest item in the field as 1, and each larger value with a higher rank value."),
+          rank_desc: _t("Displays the rank of selected values in a specific field, listing the largest item in the field as 1, and each smaller value with a higher rank value."),
+          index: _t("Calculates values as follows:\n((value in cell) x (Grand Total of Grand Totals)) / ((Grand Row Total) x (Grand Column Total))"),
+      },
+  };
+  function getPivotTooBigErrorMessage(numberOfCells, locale) {
+      const formattedNumber = formatValue(numberOfCells, {
+          format: "0,00",
+          locale: locale,
+      });
+      return _t("Oops—this pivot table is quite large (%s cells). Try simplifying it using the side panel.", formattedNumber);
+  }
+
   /**
    * Get the pivot ID from the formula pivot ID.
    */
@@ -19639,6 +19852,9 @@ stores.inject(MyMetaStore, storeInstance);
               return error;
           }
           const table = pivot.getCollapsedTableStructure();
+          if (table.numberOfCells > PIVOT_MAX_NUMBER_OF_CELLS) {
+              return new EvaluationError(getPivotTooBigErrorMessage(table.numberOfCells, this.locale));
+          }
           const cells = table.getPivotCells(visibilityOptions);
           let headerRows = 0;
           if (visibilityOptions.displayColumnHeaders) {
@@ -19737,7 +19953,7 @@ stores.inject(MyMetaStore, storeInstance);
               right: startingCol + offsetWidth - 1,
               bottom: startingRow + offsetHeight - 1,
           };
-          const range = this.getters.getRangeFromZone(this.__originSheetId, dependencyZone);
+          const range = this.getters.getRangeFromZone(sheetId, dependencyZone);
           if (range.invalidXc || range.invalidSheetName) {
               return new InvalidReferenceError();
           }
@@ -22020,12 +22236,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return pieColors;
   }
-  function truncateLabel(label) {
+  function truncateLabel(label, maxLen = MAX_CHAR_LABEL) {
       if (!label) {
           return "";
       }
-      if (label.length > MAX_CHAR_LABEL) {
-          return label.substring(0, MAX_CHAR_LABEL) + "…";
+      if (label.length > maxLen) {
+          return label.substring(0, maxLen) + "…";
       }
       return label;
   }
@@ -22997,7 +23213,7 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartJsComponent extends owl.Component {
       static template = "o-spreadsheet-ChartJsComponent";
       static props = {
-          figureUI: Object,
+          chartId: String,
           isFullScreen: { type: Boolean, optional: true },
       };
       canvas = owl.useRef("graphContainer");
@@ -23012,7 +23228,7 @@ stores.inject(MyMetaStore, storeInstance);
           return `background-color: ${this.background}`;
       }
       get chartRuntime() {
-          const runtime = this.env.model.getters.getChartRuntime(this.props.figureUI.id);
+          const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
           if (!("chartJsConfig" in runtime)) {
               throw new Error("Unsupported chart runtime");
           }
@@ -23027,30 +23243,37 @@ stores.inject(MyMetaStore, storeInstance);
               const runtime = this.chartRuntime;
               this.currentRuntime = runtime;
               // Note: chartJS modify the runtime in place, so it's important to give it a copy
-              this.createChart(deepCopy(runtime.chartJsConfig));
+              this.createChart(deepCopy(runtime));
           });
-          owl.onWillUnmount(() => this.chart?.destroy());
+          owl.onWillUnmount(this.unmount.bind(this));
           owl.useEffect(() => {
               const runtime = this.chartRuntime;
               if (runtime !== this.currentRuntime) {
                   if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
                       this.chart?.destroy();
-                      this.createChart(deepCopy(runtime.chartJsConfig));
+                      this.createChart(deepCopy(runtime));
                   }
                   else {
-                      this.updateChartJs(deepCopy(runtime.chartJsConfig));
+                      this.updateChartJs(deepCopy(runtime));
                   }
                   this.currentRuntime = runtime;
               }
               else if (this.currentDevicePixelRatio !== window.devicePixelRatio) {
                   this.currentDevicePixelRatio = window.devicePixelRatio;
-                  this.updateChartJs(deepCopy(this.currentRuntime.chartJsConfig));
+                  this.updateChartJs(deepCopy(this.currentRuntime));
               }
           });
       }
-      createChart(chartData) {
-          if (this.env.model.getters.isDashboard() && this.animationStore) {
-              const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+      unmount() {
+          this.chart?.destroy();
+      }
+      get shouldAnimate() {
+          return this.env.model.getters.isDashboard();
+      }
+      createChart(chartRuntime) {
+          let chartData = chartRuntime.chartJsConfig;
+          if (this.shouldAnimate && this.animationStore) {
+              const chartType = this.env.model.getters.getChart(this.props.chartId)?.type;
               if (chartType && this.animationStore.animationPlayed[this.animationFigureId] !== chartType) {
                   chartData = this.enableAnimationInChartData(chartData);
                   this.animationStore.disableAnimationForChart(this.animationFigureId, chartType);
@@ -23060,9 +23283,10 @@ stores.inject(MyMetaStore, storeInstance);
           const ctx = canvas.getContext("2d");
           this.chart = new window.Chart(ctx, chartData);
       }
-      updateChartJs(chartData) {
-          if (this.env.model.getters.isDashboard()) {
-              const chartType = this.env.model.getters.getChart(this.props.figureUI.id)?.type;
+      updateChartJs(chartRuntime) {
+          let chartData = chartRuntime.chartJsConfig;
+          if (this.shouldAnimate) {
+              const chartType = this.env.model.getters.getChart(this.props.chartId)?.type;
               if (chartType && this.hasChartDataChanged() && this.animationStore) {
                   chartData = this.enableAnimationInChartData(chartData);
                   this.animationStore.disableAnimationForChart(this.animationFigureId, chartType);
@@ -23090,9 +23314,7 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       get animationFigureId() {
-          return this.props.isFullScreen
-              ? this.props.figureUI.id + "-fullscreen"
-              : this.props.figureUI.id;
+          return this.props.isFullScreen ? this.props.chartId + "-fullscreen" : this.props.chartId;
       }
   }
 
@@ -23757,14 +23979,14 @@ stores.inject(MyMetaStore, storeInstance);
   class ScorecardChart extends owl.Component {
       static template = "o-spreadsheet-ScorecardChart";
       static props = {
-          figureUI: Object,
+          chartId: String,
       };
       canvas = owl.useRef("chartContainer");
       get runtime() {
-          return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
+          return this.env.model.getters.getChartRuntime(this.props.chartId);
       }
       get title() {
-          const title = this.env.model.getters.getChartDefinition(this.props.figureUI.id).title.text ?? "";
+          const title = this.env.model.getters.getChartDefinition(this.props.chartId).title.text ?? "";
           // chart titles are extracted from .json files and they are translated at runtime here
           return _t(title);
       }
@@ -24470,204 +24692,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
-  const CfTerms = {
-      Errors: {
-          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
-          ["FirstArgMissing" /* CommandResult.FirstArgMissing */]: _t("The argument is missing. Please provide a value"),
-          ["SecondArgMissing" /* CommandResult.SecondArgMissing */]: _t("The second argument is missing. Please provide a value"),
-          ["MinNaN" /* CommandResult.MinNaN */]: _t("The minpoint must be a number"),
-          ["MidNaN" /* CommandResult.MidNaN */]: _t("The midpoint must be a number"),
-          ["MaxNaN" /* CommandResult.MaxNaN */]: _t("The maxpoint must be a number"),
-          ["ValueUpperInflectionNaN" /* CommandResult.ValueUpperInflectionNaN */]: _t("The first value must be a number"),
-          ["ValueLowerInflectionNaN" /* CommandResult.ValueLowerInflectionNaN */]: _t("The second value must be a number"),
-          ["MinBiggerThanMax" /* CommandResult.MinBiggerThanMax */]: _t("Minimum must be smaller then Maximum"),
-          ["MinBiggerThanMid" /* CommandResult.MinBiggerThanMid */]: _t("Minimum must be smaller then Midpoint"),
-          ["MidBiggerThanMax" /* CommandResult.MidBiggerThanMax */]: _t("Midpoint must be smaller then Maximum"),
-          ["LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */]: _t("Lower inflection point must be smaller than upper inflection point"),
-          ["MinInvalidFormula" /* CommandResult.MinInvalidFormula */]: _t("Invalid Minpoint formula"),
-          ["MaxInvalidFormula" /* CommandResult.MaxInvalidFormula */]: _t("Invalid Maxpoint formula"),
-          ["MidInvalidFormula" /* CommandResult.MidInvalidFormula */]: _t("Invalid Midpoint formula"),
-          ["ValueUpperInvalidFormula" /* CommandResult.ValueUpperInvalidFormula */]: _t("Invalid upper inflection point formula"),
-          ["ValueLowerInvalidFormula" /* CommandResult.ValueLowerInvalidFormula */]: _t("Invalid lower inflection point formula"),
-          ["EmptyRange" /* CommandResult.EmptyRange */]: _t("A range needs to be defined"),
-          ["ValueCellIsInvalidFormula" /* CommandResult.ValueCellIsInvalidFormula */]: _t("At least one of the provided values is an invalid formula"),
-          Unexpected: _t("The rule is invalid for an unknown reason"),
-      },
-      ColorScale: _t("Color scale"),
-      IconSet: _t("Icon set"),
-      DataBar: _t("Data bar"),
-  };
-  const ChartTerms = {
-      Series: _t("Series"),
-      BackgroundColor: _t("Background color"),
-      StackedBarChart: _t("Stacked bar chart"),
-      StackedLineChart: _t("Stacked line chart"),
-      StackedAreaChart: _t("Stacked area chart"),
-      StackedColumnChart: _t("Stacked column chart"),
-      CumulativeData: _t("Cumulative data"),
-      TreatLabelsAsText: _t("Treat labels as text"),
-      AggregatedChart: _t("Aggregate"),
-      Errors: {
-          Unexpected: _t("The chart definition is invalid for an unknown reason"),
-          // BASIC CHART ERRORS (LINE | BAR | PIE)
-          ["InvalidDataSet" /* CommandResult.InvalidDataSet */]: _t("The dataset is invalid"),
-          ["InvalidLabelRange" /* CommandResult.InvalidLabelRange */]: _t("Labels are invalid"),
-          // SCORECARD CHART ERRORS
-          ["InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */]: _t("The key value is invalid"),
-          ["InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */]: _t("The baseline value is invalid"),
-          // GAUGE CHART ERRORS
-          ["InvalidGaugeDataRange" /* CommandResult.InvalidGaugeDataRange */]: _t("The data range is invalid"),
-          ["EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */]: _t("A minimum range limit value is needed"),
-          ["GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */]: _t("The minimum range limit value must be a number"),
-          ["EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */]: _t("A maximum range limit value is needed"),
-          ["GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */]: _t("The maximum range limit value must be a number"),
-          ["GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */]: _t("The lower inflection point value must be a number"),
-          ["GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */]: _t("The upper inflection point value must be a number"),
-      },
-      GeoChart: {
-          ColorScales: {
-              blues: _t("Blues"),
-              cividis: _t("Cividis"),
-              greens: _t("Greens"),
-              greys: _t("Greys"),
-              oranges: _t("Oranges"),
-              purples: _t("Purples"),
-              rainbow: _t("Rainbow"),
-              reds: _t("Reds"),
-              viridis: _t("Viridis"),
-          },
-      },
-  };
-  const CustomCurrencyTerms = {
-      Custom: _t("Custom"),
-  };
-  const MergeErrorMessage = _t("Merged cells are preventing this operation. Unmerge those cells and try again.");
-  const SplitToColumnsTerms = {
-      Errors: {
-          Unexpected: _t("Cannot split the selection for an unknown reason"),
-          ["NoSplitSeparatorInSelection" /* CommandResult.NoSplitSeparatorInSelection */]: _t("There is no match for the selected separator in the selection"),
-          ["MoreThanOneColumnSelected" /* CommandResult.MoreThanOneColumnSelected */]: _t("Only a selection from a single column can be split"),
-          ["SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */]: _t("Splitting will overwrite existing content"),
-      },
-  };
-  const RemoveDuplicateTerms = {
-      Errors: {
-          Unexpected: _t("Cannot remove duplicates for an unknown reason"),
-          ["MoreThanOneRangeSelected" /* CommandResult.MoreThanOneRangeSelected */]: _t("Please select only one range of cells"),
-          ["EmptyTarget" /* CommandResult.EmptyTarget */]: _t("Please select a range of cells containing values."),
-          ["NoColumnsProvided" /* CommandResult.NoColumnsProvided */]: _t("Please select at latest one column to analyze."),
-          //TODO: Remove it when accept to copy and paste merge cells
-          ["WillRemoveExistingMerge" /* CommandResult.WillRemoveExistingMerge */]: _t("This operation is not possible due to a merge. Please remove the merges first than try again."),
-      },
-  };
-  const DVTerms = {
-      DateIs: {
-          today: _t("today"),
-          yesterday: _t("yesterday"),
-          tomorrow: _t("tomorrow"),
-          lastWeek: _t("in the past week"),
-          lastMonth: _t("in the past month"),
-          lastYear: _t("in the past year"),
-      },
-      DateIsBefore: {
-          today: _t("today"),
-          yesterday: _t("yesterday"),
-          tomorrow: _t("tomorrow"),
-          lastWeek: _t("one week ago"),
-          lastMonth: _t("one month ago"),
-          lastYear: _t("one year ago"),
-      },
-      CriterionError: {
-          notEmptyValue: _t("The value must not be empty"),
-          numberValue: _t("The value must be a number"),
-          dateValue: _t("The value must be a date"),
-          validRange: _t("The value must be a valid range"),
-          validFormula: _t("The formula must be valid"),
-      },
-      Errors: {
-          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid."),
-          ["InvalidDataValidationCriterionValue" /* CommandResult.InvalidDataValidationCriterionValue */]: _t("One or more of the provided criteria values are invalid. Please review and correct them."),
-          ["InvalidNumberOfCriterionValues" /* CommandResult.InvalidNumberOfCriterionValues */]: _t("One or more of the provided criteria values are missing."),
-          Unexpected: _t("The rule is invalid for an unknown reason."),
-      },
-  };
-  const TableTerms = {
-      Errors: {
-          Unexpected: _t("The table zone is invalid for an unknown reason"),
-          ["TableOverlap" /* CommandResult.TableOverlap */]: _t("You cannot create overlapping tables."),
-          ["NonContinuousTargets" /* CommandResult.NonContinuousTargets */]: _t("A table can only be created on a continuous selection."),
-          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
-          ["TargetOutOfSheet" /* CommandResult.TargetOutOfSheet */]: _t("The range is out of the sheet"),
-      },
-      Checkboxes: {
-          hasFilters: _t("Filter button"),
-          headerRow: _t("Header row(s)"),
-          bandedRows: _t("Banded rows"),
-          firstColumn: _t("First column"),
-          lastColumn: _t("Last column"),
-          bandedColumns: _t("Banded columns"),
-          automaticAutofill: _t("Automatically autofill formulas"),
-          totalRow: _t("Total row"),
-          isDynamic: _t("Auto-adjust to formula result"),
-      },
-      Tooltips: {
-          filterWithoutHeader: _t("Cannot have filters without a header row"),
-          isDynamic: _t("For tables based on array formulas only"),
-      },
-  };
-  const measureDisplayTerms = {
-      labels: {
-          no_calculations: _t("No calculations"),
-          "%_of_grand_total": _t("% of grand total"),
-          "%_of_col_total": _t("% of column total"),
-          "%_of_row_total": _t("% of row total"),
-          "%_of": _t("% of"),
-          "%_of_parent_row_total": _t("% of parent row total"),
-          "%_of_parent_col_total": _t("% of parent column total"),
-          "%_of_parent_total": _t("% of parent total"),
-          difference_from: _t("Difference from"),
-          "%_difference_from": _t("% difference from"),
-          running_total: _t("Running total"),
-          "%_running_total": _t("% Running total"),
-          rank_asc: _t("Rank smallest to largest"),
-          rank_desc: _t("Rank largest to smallest"),
-          index: _t("Index"),
-      },
-      descriptions: {
-          "%_of_grand_total": () => _t("Displayed as % of grand total"),
-          "%_of_col_total": () => _t("Displayed as % of column total"),
-          "%_of_row_total": () => _t("Displayed as % of row total"),
-          "%_of": (field) => _t('Displayed as % of "%s"', field),
-          "%_of_parent_row_total": (field) => _t('Displayed as % of parent row total of "%s"', field),
-          "%_of_parent_col_total": () => _t("Displayed as % of parent column total"),
-          "%_of_parent_total": (field) => _t('Displayed as % of parent "%s" total', field),
-          difference_from: (field) => _t('Displayed as difference from "%s"', field),
-          "%_difference_from": (field) => _t('Displayed as % difference from "%s"', field),
-          running_total: (field) => _t('Displayed as running total based on "%s"', field),
-          "%_running_total": (field) => _t('Displayed as % running total based on "%s"', field),
-          rank_asc: (field) => _t('Displayed as rank from smallest to largest based on "%s"', field),
-          rank_desc: (field) => _t('Displayed as rank largest to smallest based on "%s"', field),
-          index: () => _t("Displayed as index"),
-      },
-      documentation: {
-          no_calculations: _t("Displays the value that is entered in the field."),
-          "%_of_grand_total": _t("Displays values as a percentage of the grand total of all the values or data points in the report."),
-          "%_of_col_total": _t("Displays all the values in each column or series as a percentage of the total for the column or series."),
-          "%_of_row_total": _t("Displays the value in each row or category as a percentage of the total for the row or category."),
-          "%_of": _t("Displays values as a percentage of the value of the Base item in the Base field."),
-          "%_of_parent_row_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on rows)"),
-          "%_of_parent_col_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on columns)"),
-          "%_of_parent_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item of the selected Base field)"),
-          difference_from: _t("Displays values as the difference from the value of the Base item in the Base field."),
-          "%_difference_from": _t("Displays values as the percentage difference from the value of the Base item in the Base field."),
-          running_total: _t("Displays the value for successive items in the Base field as a running total."),
-          "%_running_total": _t("Calculates the value as a percentage for successive items in the Base field that are displayed as a running total."),
-          rank_asc: _t("Displays the rank of selected values in a specific field, listing the smallest item in the field as 1, and each larger value with a higher rank value."),
-          rank_desc: _t("Displays the rank of selected values in a specific field, listing the largest item in the field as 1, and each smaller value with a higher rank value."),
-          index: _t("Calculates values as follows:\n((value in cell) x (Grand Total of Grand Totals)) / ((Grand Row Total) x (Grand Column Total))"),
-      },
-  };
-
   const UNIT_LENGTH = {
       second: 1000,
       minute: 1000 * 60,
@@ -26016,7 +26040,7 @@ stores.inject(MyMetaStore, storeInstance);
               ticks: {
                   padding: 5,
                   color: fontColor,
-                  callback: function (tickValue) {
+                  callback: function (tickValue, index, ticks) {
                       // Category axis callback's internal tick value is the index of the label
                       // https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
                       return truncateLabel(this.getLabelForValue(tickValue));
@@ -26588,6 +26612,7 @@ stores.inject(MyMetaStore, storeInstance);
       axesDesign;
       horizontal;
       showValues;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -26601,6 +26626,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.axesDesign = definition.axesDesign;
           this.horizontal = definition.horizontal;
           this.showValues = definition.showValues;
+          this.zoomable = definition.zoomable;
       }
       static transformDefinition(chartSheetId, definition, applyChange) {
           return transformChartDefinitionWithDataSetsWithZone(chartSheetId, definition, applyChange);
@@ -26622,6 +26648,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: context.axesDesign,
               showValues: context.showValues,
               horizontal: context.horizontal,
+              zoomable: context.zoomable,
           };
       }
       getContextCreation() {
@@ -26676,6 +26703,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: this.axesDesign,
               horizontal: this.horizontal,
               showValues: this.showValues,
+              zoomable: this.horizontal ? undefined : this.zoomable,
           };
       }
       getDefinitionForExcel() {
@@ -26724,6 +26752,621 @@ stores.inject(MyMetaStore, storeInstance);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
+  class FullScreenChartStore extends SpreadsheetStore {
+      mutators = ["toggleFullScreenChart"];
+      fullScreenFigure = undefined;
+      toggleFullScreenChart(figureId) {
+          if (this.fullScreenFigure?.id === figureId) {
+              this.fullScreenFigure = undefined;
+          }
+          else {
+              this.makeFullScreen(figureId);
+          }
+      }
+      makeFullScreen(figureId) {
+          const sheetId = this.getters.getActiveSheetId();
+          const figure = this.getters.getFigure(sheetId, figureId);
+          if (figure) {
+              this.fullScreenFigure = { ...figure, x: 0, y: 0, width: 0, height: 0 };
+          }
+      }
+  }
+
+  const TREND_LINE_AXES_IDS = [TREND_LINE_XAXIS_ID, MOVING_AVERAGE_TREND_LINE_XAXIS_ID];
+  const ZOOMABLE_AXIS_IDS = ["x", ...TREND_LINE_AXES_IDS];
+  class ZoomableChartStore extends SpreadsheetStore {
+      mutators = [
+          "resetAxisLimits",
+          "updateAxisLimits",
+          "updateTrendLineConfiguration",
+          "clearAxisLimits",
+      ];
+      originalAxisLimits = {};
+      currentAxesLimits = {};
+      idConversion = {};
+      handle(cmd) {
+          switch (cmd.type) {
+              case "DELETE_FIGURE":
+                  if (cmd.figureId && this.idConversion[cmd.figureId]) {
+                      for (const chartId of this.idConversion[cmd.figureId]) {
+                          delete this.originalAxisLimits[chartId];
+                          delete this.currentAxesLimits[chartId];
+                      }
+                  }
+                  break;
+              case "UPDATE_CHART":
+                  const type = cmd.definition.type;
+                  const chartId = `${type}-${cmd.figureId}`;
+                  if (!this.idConversion[cmd.figureId]) {
+                      this.idConversion[cmd.figureId] = new Set();
+                  }
+                  this.idConversion[cmd.figureId].add(chartId);
+                  if (!("zoomable" in cmd.definition && cmd.definition.zoomable)) {
+                      this.clearAxisLimits(chartId);
+                  }
+                  break;
+          }
+      }
+      clearAxisLimits(chartId) {
+          delete this.originalAxisLimits[chartId];
+          delete this.currentAxesLimits[chartId];
+          return "noStateChange";
+      }
+      resetAxisLimits(chartId, limits) {
+          for (const axisId of ZOOMABLE_AXIS_IDS) {
+              if (limits?.[axisId]) {
+                  if (!this.originalAxisLimits[chartId]?.[axisId]) {
+                      this.originalAxisLimits[chartId] = {
+                          ...this.originalAxisLimits[chartId],
+                          [axisId]: {},
+                      };
+                  }
+                  this.originalAxisLimits[chartId][axisId]["min"] = limits[axisId].min;
+                  this.originalAxisLimits[chartId][axisId]["max"] = limits[axisId].max;
+              }
+              else {
+                  if (this.originalAxisLimits[chartId]?.[axisId]) {
+                      delete this.originalAxisLimits[chartId][axisId];
+                  }
+              }
+          }
+          return "noStateChange";
+      }
+      updateAxisLimits(chartId, limits) {
+          if (limits === undefined) {
+              delete this.currentAxesLimits[chartId];
+              return "noStateChange";
+          }
+          let { min, max } = limits;
+          if (min > max) {
+              [min, max] = [max, min];
+          }
+          this.currentAxesLimits[chartId] = { x: { min, max } };
+          return "noStateChange";
+      }
+      /* Update the trend line axis configuration based on the current axis limits.
+       * This function calculates the new limits for the trend line axes based on the current x-axis
+       * limits and the original limits of the trend line axes.
+       * It assumes that the origininal trend line axes are linear transformations of the original x-axis
+       * limits and applies the same transformation to the current x-axis limits to get the new limits
+       * for the current trend line axes.
+       */
+      updateTrendLineConfiguration(chartId) {
+          if (!this.originalAxisLimits[chartId]) {
+              return "noStateChange";
+          }
+          const chartLimits = this.originalAxisLimits[chartId].x;
+          if (chartLimits === undefined) {
+              return "noStateChange";
+          }
+          for (const axisId of TREND_LINE_AXES_IDS) {
+              if (!this.originalAxisLimits[chartId][axisId]) {
+                  continue;
+              }
+              if (!this.currentAxesLimits[chartId]?.[axisId]) {
+                  this.currentAxesLimits[chartId] = {
+                      ...this.currentAxesLimits[chartId],
+                      [axisId]: {},
+                  };
+              }
+              if (this.currentAxesLimits[chartId]?.x === undefined) {
+                  return "noStateChange";
+              }
+              const realRange = chartLimits.max - chartLimits.min;
+              const trendingLimits = this.originalAxisLimits[chartId][axisId];
+              const trendingRange = trendingLimits.max - trendingLimits.min;
+              const slope = trendingRange / realRange;
+              const intercept = trendingLimits.min - chartLimits.min * slope;
+              const newXMin = this.currentAxesLimits[chartId].x.min;
+              const newXMax = this.currentAxesLimits[chartId].x.max;
+              this.currentAxesLimits[chartId][axisId].min = newXMin * slope + intercept;
+              this.currentAxesLimits[chartId][axisId].max = newXMax * slope + intercept;
+          }
+          return "noStateChange";
+      }
+  }
+
+  const zoomWindowPlugin = {
+      id: "zoomWindowPlugin",
+      afterDatasetsDraw: function (chart, args, options) {
+          if (!options.getLowerBound || !options.getUpperBound) {
+              return;
+          }
+          const { ctx, chartArea: { left, right, top, bottom }, } = chart;
+          let lowerBound = options.getLowerBound() ?? left;
+          let upperBound = options.getUpperBound() ?? right;
+          if (lowerBound > upperBound) {
+              [lowerBound, upperBound] = [upperBound, lowerBound];
+          }
+          lowerBound = Math.max(left, lowerBound);
+          upperBound = Math.min(right, upperBound);
+          if (lowerBound === left) {
+              lowerBound -= 1;
+          }
+          if (upperBound === right) {
+              upperBound += 1;
+          }
+          ctx.save();
+          ctx.fillStyle = "rgba(255,255,255,0.5)";
+          ctx.beginPath();
+          ctx.rect(left, bottom, lowerBound - left, top - bottom);
+          ctx.rect(upperBound, bottom, right - upperBound, top - bottom);
+          ctx.fill();
+          ctx.beginPath();
+          ctx.strokeStyle = "#bbb";
+          ctx.rect(lowerBound, bottom, upperBound - lowerBound, top - bottom);
+          ctx.stroke();
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.moveTo(lowerBound - 3, (top + bottom) / 2 - 7);
+          ctx.lineTo(lowerBound - 3, (top + bottom) / 2 + 7);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(upperBound + 3, (top + bottom) / 2 - 7);
+          ctx.lineTo(upperBound + 3, (top + bottom) / 2 + 7);
+          ctx.stroke();
+          ctx.restore();
+      },
+  };
+
+  css /* scss */ `
+  .o-spreadsheet {
+    .o-master-chart-container {
+      height: ${MASTER_CHART_HEIGHT}px;
+    }
+  }
+`;
+  chartJsExtensionRegistry.add("zoomWindowPlugin", {
+      register: (Chart) => Chart.register(zoomWindowPlugin),
+      unregister: (Chart) => Chart.unregister(zoomWindowPlugin),
+  });
+  class ZoomableChartJsComponent extends ChartJsComponent {
+      static template = "o-spreadsheet-ZoomableChartJsComponent";
+      store;
+      fullScreenChartStore;
+      masterChartCanvas = owl.useRef("masterChartCanvas");
+      masterChart;
+      mode;
+      hasLinearScale;
+      isBarChart;
+      chartId = "";
+      datasetBoundaries = { xMin: 0, xMax: 0 };
+      removeEventListeners = () => { };
+      setup() {
+          this.store = useStore(ZoomableChartStore);
+          this.fullScreenChartStore = useStore(FullScreenChartStore);
+          super.setup();
+      }
+      unmount() {
+          super.unmount();
+          this.masterChart?.destroy();
+          this.removeEventListeners();
+      }
+      get containerStyle() {
+          const height = this.sliceable ? `calc(100% - ${MASTER_CHART_HEIGHT}px)` : "100%";
+          return `
+      height:${height};
+    `;
+      }
+      get sliceable() {
+          if (this.env.isDashboard()) {
+              const fullScreenFigureId = this.fullScreenChartStore.fullScreenFigure?.id;
+              const chartFigureId = this.env.model.getters.getFigureIdFromChartId(this.props.chartId);
+              if (fullScreenFigureId === chartFigureId) {
+                  return true;
+              }
+          }
+          const definition = this.env.model.getters.getChartDefinition(this.props.chartId);
+          return ("zoomable" in definition && definition?.zoomable) ?? false;
+      }
+      get axisOffset() {
+          return !this.hasLinearScale && this.isBarChart ? 0.5 : 0;
+      }
+      getMasterChartConfiguration(chartData) {
+          const config = chartData;
+          return {
+              ...config,
+              options: {
+                  ...config.options,
+                  plugins: {
+                      ...config.options.plugins,
+                      zoomWindowPlugin: {
+                          getLowerBound: () => this.lowerBound,
+                          getUpperBound: () => this.upperBound,
+                      },
+                  },
+              },
+          };
+      }
+      getDetailChartConfiguration(chartData) {
+          if (!this.sliceable) {
+              return chartData;
+          }
+          const xAxis = this.store.currentAxesLimits[this.chartId]?.x;
+          const xScale = {
+              ...chartData.options.scales?.x,
+          };
+          if (xAxis?.min !== undefined) {
+              xScale.min = this.hasLinearScale ? xAxis.min : Math.ceil(xAxis.min) - this.axisOffset;
+          }
+          if (xAxis?.max !== undefined) {
+              xScale.max = this.hasLinearScale ? xAxis.max : Math.floor(xAxis.max) - this.axisOffset;
+          }
+          return {
+              ...chartData,
+              options: {
+                  ...chartData.options,
+                  scales: {
+                      ...chartData.options.scales,
+                      x: xScale,
+                  },
+                  layout: {
+                      ...chartData.options.layout,
+                      padding: {
+                          ...chartData.options.layout?.padding,
+                          bottom: 5,
+                      },
+                  },
+              },
+          };
+      }
+      getAxisLimitsFromDataset(chartData) {
+          const data = chartData.data.datasets.map((ds) => ds.data).flat();
+          const xValues = data.map((d, i) => (typeof d === "object" && d !== null ? d.x : i));
+          const xMin = Math.min(...xValues);
+          const xMax = Math.max(...xValues);
+          return { xMin, xMax };
+      }
+      get shouldAnimate() {
+          return this.env.model.getters.isDashboard() && !this.sliceable;
+      }
+      createChart(chartRuntime) {
+          const chartData = chartRuntime.chartJsConfig;
+          this.isBarChart = chartData.type === "bar";
+          this.chartId = `${chartData.type}-${this.props.chartId}`;
+          this.datasetBoundaries = this.getAxisLimitsFromDataset(chartData);
+          if (this.sliceable) {
+              const updatedData = this.getDetailChartConfiguration(chartData);
+              chartRuntime.chartJsConfig = updatedData;
+          }
+          super.createChart(chartRuntime);
+          this.hasLinearScale = this.chart?.scales?.x.type === "linear";
+          if (!this.sliceable || !("masterChartConfig" in chartRuntime)) {
+              return;
+          }
+          this.masterChart?.destroy();
+          const masterChartCtx = this.masterChartCanvas.el.getContext("2d");
+          this.masterChart = new window.Chart(masterChartCtx, this.getMasterChartConfiguration(chartRuntime["masterChartConfig"]));
+          this.resetAxesLimits();
+      }
+      updateChartJs(chartRuntime) {
+          const chartData = chartRuntime.chartJsConfig;
+          const newDatasetBoundaries = this.getAxisLimitsFromDataset(chartData);
+          if (this.datasetBoundaries.xMin !== newDatasetBoundaries.xMin ||
+              this.datasetBoundaries.xMax !== newDatasetBoundaries.xMax) {
+              this.store.clearAxisLimits(this.chartId);
+              this.datasetBoundaries = newDatasetBoundaries;
+          }
+          this.isBarChart = chartData?.type === "bar";
+          this.chartId = `${chartData.type}-${this.props.chartId}`;
+          if (this.sliceable) {
+              const updatedData = this.getDetailChartConfiguration(chartData);
+              chartRuntime.chartJsConfig = updatedData;
+          }
+          super.updateChartJs(chartRuntime);
+          this.hasLinearScale = this.chart?.scales?.x.type === "linear";
+          if (!this.sliceable || !("masterChartConfig" in chartRuntime)) {
+              this.masterChart = undefined;
+          }
+          else {
+              const masterChartConfig = this.getMasterChartConfiguration(chartRuntime["masterChartConfig"]);
+              if (!this.masterChart) {
+                  const masterChartCtx = this.masterChartCanvas.el.getContext("2d");
+                  this.masterChart = new window.Chart(masterChartCtx, masterChartConfig);
+              }
+              else {
+                  this.masterChart.data = masterChartConfig.data;
+                  this.masterChart.config.options = masterChartConfig.options;
+                  this.masterChart.update();
+              }
+          }
+          this.resetAxesLimits();
+      }
+      resetAxesLimits() {
+          if (!this.chart) {
+              return;
+          }
+          const previousAxisLimits = this.store.originalAxisLimits[this.chartId];
+          if (previousAxisLimits?.x?.min === undefined && previousAxisLimits?.x?.max === undefined) {
+              let scales = this.masterChart
+                  ? this.masterChart.scales
+                  : this.chart.scales;
+              if (!this.hasLinearScale && scales?.x) {
+                  scales = {
+                      ...scales,
+                      x: {
+                          min: Math.ceil(scales.x.min) - this.axisOffset,
+                          max: Math.floor(scales.x.max) + this.axisOffset,
+                      },
+                  };
+              }
+              this.store.resetAxisLimits(this.chartId, scales);
+              return;
+          }
+          this.updateTrendingLineAxes();
+          this.chart.update();
+          if (!this.masterChart) {
+              return;
+          }
+          this.masterChart.update();
+      }
+      updateTrendingLineAxes() {
+          this.store.updateTrendLineConfiguration(this.chartId);
+          const config = this.store.currentAxesLimits[this.chartId];
+          for (const axisId of [TREND_LINE_XAXIS_ID, MOVING_AVERAGE_TREND_LINE_XAXIS_ID]) {
+              if (!this.chart?.config.options?.scales?.[axisId] || !config?.[axisId]) {
+                  continue;
+              }
+              this.chart.config.options.scales[axisId].min = config[axisId].min;
+              this.chart.config.options.scales[axisId].max = config[axisId].max;
+          }
+      }
+      get upperBound() {
+          return this.computePosition(this.store.currentAxesLimits[this.chartId]?.x?.max);
+      }
+      get lowerBound() {
+          return this.computePosition(this.store.currentAxesLimits[this.chartId]?.x?.min);
+      }
+      computePosition(value) {
+          if (value === undefined || !this.masterChart?.scales?.x) {
+              return undefined;
+          }
+          const scale = this.masterChart.scales.x;
+          if (this.hasLinearScale) {
+              return scale.getPixelForValue(value);
+          }
+          if (!this.masterChart.chartArea) {
+              return undefined;
+          }
+          const { left, right } = this.masterChart.chartArea;
+          const { min, max } = scale;
+          const offset = this.axisOffset;
+          return left + ((right - left) * (offset + value - min)) / (2 * offset + max - min);
+      }
+      computeCoordinate(position) {
+          if (!this.masterChart) {
+              return undefined;
+          }
+          const scale = this.masterChart.scales.x;
+          if (this.hasLinearScale) {
+              const value = scale.getValueForPixel(position);
+              if (value === undefined) {
+                  return undefined;
+              }
+              return Math.round(value * 100) / 100;
+          }
+          const { left, right } = this.masterChart.chartArea;
+          const offset = this.axisOffset;
+          return (scale.min -
+              offset +
+              ((scale.max + 2 * offset - scale.min) * (position - left)) / (right - left));
+      }
+      updateAxisLimits(xMin, xMax) {
+          if (!this.hasLinearScale) {
+              this.chart.config.options.scales.x.min = Math.ceil(xMin);
+              this.chart.config.options.scales.x.max = Math.floor(xMax);
+          }
+          else {
+              this.chart.config.options.scales.x.min = xMin;
+              this.chart.config.options.scales.x.max = xMax;
+          }
+          this.store.updateAxisLimits(this.chartId, { min: xMin, max: xMax });
+          this.updateTrendingLineAxes();
+          this.masterChart?.update();
+          this.chart?.update();
+      }
+      onPointerDownInMasterChart(ev) {
+          this.removeEventListeners();
+          const position = ev.offsetX;
+          if (!this.masterChart?.chartArea || !this.chart?.scales.x) {
+              return;
+          }
+          const { left, right, top, bottom } = this.masterChart.chartArea;
+          const xMax = this.upperBound ?? right;
+          const xMin = this.lowerBound ?? left;
+          if (position < left - 5 || position > right + 5 || ev.offsetY < top || ev.offsetY > bottom) {
+              return;
+          }
+          ev.preventDefault();
+          ev.stopPropagation();
+          let startingPositionOnChart, windowSize, startX;
+          const startingEventPosition = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+          if ((xMin !== left || xMax !== right) && position > xMin + 5 && position < xMax - 5) {
+              startingPositionOnChart = ev.offsetX - xMin;
+              this.mode = "moveInMaster";
+              const currentLimits = this.store.currentAxesLimits[this.chartId]?.x;
+              windowSize =
+                  (currentLimits?.max ?? this.chart.scales.x.max) -
+                      (currentLimits?.min ?? this.chart.scales.x.min);
+          }
+          else {
+              this.mode = "selectInMaster";
+              if (Math.abs(position - xMin) < 5) {
+                  startingPositionOnChart = xMax;
+              }
+              else if (Math.abs(position - xMax) < 5) {
+                  startingPositionOnChart = xMin;
+              }
+              else {
+                  startingPositionOnChart = clip(position, left, right);
+              }
+              startX = this.computeCoordinate(startingPositionOnChart);
+          }
+          const originalXMin = this.store.originalAxisLimits[this.chartId].x.min;
+          const originalXMax = this.store.originalAxisLimits[this.chartId].x.max;
+          const computeNewAxisLimits = (position) => {
+              let xMin, xMax;
+              const { left, right } = this.masterChart.chartArea;
+              if (this.mode === "moveInMaster") {
+                  xMin = this.computeCoordinate(position - startingPositionOnChart);
+                  if (xMin < originalXMin) {
+                      xMin = originalXMin;
+                  }
+                  else if (xMin > originalXMax - windowSize) {
+                      xMin = originalXMax - windowSize;
+                  }
+                  xMax = xMin + windowSize;
+              }
+              else if (this.mode === "selectInMaster") {
+                  const upperBound = clip(position, left, right);
+                  if (Math.abs(startingPositionOnChart - upperBound) > 5) {
+                      const endX = this.computeCoordinate(upperBound);
+                      if (startX === undefined || endX === undefined) {
+                          return {};
+                      }
+                      xMin = Math.min(startX, endX);
+                      xMax = Math.max(startX, endX);
+                  }
+              }
+              return { min: xMin, max: xMax };
+          };
+          const onDragFromMasterChart = (ev) => {
+              const position = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+              if (Math.abs(position - startingEventPosition) < 5) {
+                  return;
+              }
+              const { min: xMin, max: xMax } = computeNewAxisLimits(position);
+              if (xMin !== undefined && xMax !== undefined) {
+                  this.updateAxisLimits(xMin, xMax);
+              }
+          };
+          const onPointerUpInMasterChart = (ev) => {
+              this.removeEventListeners();
+              const position = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+              if (Math.abs(position - startingEventPosition) > 5) {
+                  let { min: xMin, max: xMax } = computeNewAxisLimits(position);
+                  if (xMin !== undefined && xMax !== undefined) {
+                      if (!this.hasLinearScale) {
+                          if (this.mode === "moveInMaster" && windowSize && !this.isBarChart) {
+                              xMin = Math.round(xMin) - this.axisOffset;
+                              xMax = xMin + windowSize;
+                          }
+                          else {
+                              xMin = Math.ceil(xMin) - this.axisOffset;
+                              xMax = Math.floor(xMax) + this.axisOffset;
+                          }
+                      }
+                      this.updateAxisLimits(xMin, xMax);
+                  }
+              }
+              this.mode = undefined;
+          };
+          this.removeEventListeners = () => {
+              window.removeEventListener("pointermove", onDragFromMasterChart, true);
+              window.removeEventListener("pointerup", onPointerUpInMasterChart, true);
+          };
+          window.addEventListener("pointermove", onDragFromMasterChart, true);
+          window.addEventListener("pointerup", onPointerUpInMasterChart, true);
+      }
+      onPointerMoveInMasterChart(ev) {
+          const { offsetX: x, offsetY: y } = ev;
+          if (this.mode === undefined) {
+              const target = ev.target;
+              if (!this.masterChart?.chartArea) {
+                  target["style"].cursor = "default";
+                  return;
+              }
+              const { left, right, top, bottom } = this.masterChart.chartArea;
+              const start = this.lowerBound ?? left;
+              const end = this.upperBound ?? right;
+              if (y < top || y > bottom) {
+                  target["style"].cursor = "default";
+              }
+              else if (Math.abs(start - x) < 5 || Math.abs(end - x) < 5) {
+                  target["style"].cursor = "ew-resize";
+              }
+              else if (start < x && x < end && (start !== left || end !== right)) {
+                  target["style"].cursor = "grab";
+              }
+              else {
+                  target["style"].cursor = "crosshair";
+              }
+          }
+      }
+      onMouseLeaveMasterChart(ev) {
+          const target = ev.target;
+          if (!target) {
+              return;
+          }
+          target["style"].cursor = "default";
+      }
+      onDoubleClickInMasterChart(ev) {
+          this.mode = undefined;
+          const position = ev.offsetX;
+          if (!this.masterChart?.chartArea || !this.chart?.scales.x) {
+              return;
+          }
+          const { left, right, top, bottom } = this.masterChart.chartArea;
+          let upperBound = this.upperBound ?? right;
+          let lowerBound = this.lowerBound ?? left;
+          if (upperBound < lowerBound) {
+              [upperBound, lowerBound] = [lowerBound, upperBound];
+          }
+          if (position < left - 5 || position > right + 5 || ev.offsetY < top || ev.offsetY > bottom) {
+              return;
+          }
+          ev.preventDefault();
+          ev.stopPropagation();
+          let { min: xMin, max: xMax } = this.store.currentAxesLimits[this.chartId]?.x ?? this.chart.scales.x;
+          const originalAxisLimits = this.store.originalAxisLimits[this.chartId].x;
+          if (!originalAxisLimits) {
+              return;
+          }
+          let originalXMin = originalAxisLimits.min;
+          let originalXMax = originalAxisLimits.max;
+          if (this.hasLinearScale) {
+              originalXMin = Math.ceil(originalXMin) - this.axisOffset;
+              originalXMax = Math.floor(originalXMax) + this.axisOffset;
+          }
+          if (Math.abs(position - lowerBound) < 5) {
+              // Reset to original min
+              xMin = originalXMin;
+          }
+          else if (Math.abs(position - upperBound) < 5) {
+              xMax = originalXMax;
+          }
+          else if (lowerBound < position && position < upperBound) {
+              // Reset to original limits
+              xMin = originalXMin;
+              xMax = originalXMax;
+          }
+          else {
+              return;
+          }
+          this.updateAxisLimits(xMin, xMax);
+      }
+  }
+
   const cellAnimationRegistry = new Registry();
   cellAnimationRegistry.add("animatedBackgroundColorChange", {
       id: "animatedBackgroundColorChange",
@@ -27086,13 +27729,13 @@ stores.inject(MyMetaStore, storeInstance);
   class GaugeChartComponent extends owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
       static props = {
-          figureUI: Object,
+          chartId: String,
           isFullScreen: { type: Boolean, optional: true },
       };
       canvas = owl.useRef("chartContainer");
       animationStore;
       get runtime() {
-          return this.env.model.getters.getChartRuntime(this.props.figureUI.id);
+          return this.env.model.getters.getChartRuntime(this.props.chartId);
       }
       setup() {
           if (this.env.model.getters.isDashboard()) {
@@ -27140,9 +27783,7 @@ stores.inject(MyMetaStore, storeInstance);
           return this.canvas.el;
       }
       get animationFigureId() {
-          return this.props.isFullScreen
-              ? this.props.figureUI.id + "-fullscreen"
-              : this.props.figureUI.id;
+          return this.props.isFullScreen ? this.props.chartId + "-fullscreen" : this.props.chartId;
       }
   }
   /**
@@ -27199,6 +27840,7 @@ stores.inject(MyMetaStore, storeInstance);
       type = "combo";
       showValues;
       hideDataMarkers;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -27211,6 +27853,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.axesDesign = definition.axesDesign;
           this.showValues = definition.showValues;
           this.hideDataMarkers = definition.hideDataMarkers;
+          this.zoomable = definition.zoomable;
       }
       static transformDefinition(chartSheetId, definition, applyChange) {
           return transformChartDefinitionWithDataSetsWithZone(chartSheetId, definition, applyChange);
@@ -27260,6 +27903,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: this.axesDesign,
               showValues: this.showValues,
               hideDataMarkers: this.hideDataMarkers,
+              zoomable: this.zoomable,
           };
       }
       getDefinitionForExcel() {
@@ -27303,6 +27947,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: context.axesDesign,
               showValues: context.showValues,
               hideDataMarkers: context.hideDataMarkers,
+              zoomable: context.zoomable,
           };
       }
       duplicateInDuplicatedSheet(newSheetId) {
@@ -27908,6 +28553,7 @@ stores.inject(MyMetaStore, storeInstance);
       fillArea;
       showValues;
       hideDataMarkers;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -27924,6 +28570,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.fillArea = definition.fillArea;
           this.showValues = definition.showValues;
           this.hideDataMarkers = definition.hideDataMarkers;
+          this.zoomable = definition.zoomable;
       }
       static validateChartDefinition(validator, definition) {
           return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -27948,6 +28595,7 @@ stores.inject(MyMetaStore, storeInstance);
               fillArea: context.fillArea,
               showValues: context.showValues,
               hideDataMarkers: context.hideDataMarkers,
+              zoomable: context.zoomable,
           };
       }
       getDefinition() {
@@ -27979,6 +28627,7 @@ stores.inject(MyMetaStore, storeInstance);
               fillArea: this.fillArea,
               showValues: this.showValues,
               hideDataMarkers: this.hideDataMarkers,
+              zoomable: this.zoomable,
           };
       }
       getContextCreation() {
@@ -28501,6 +29150,7 @@ stores.inject(MyMetaStore, storeInstance);
       dataSetDesign;
       axesDesign;
       showValues;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -28513,6 +29163,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.dataSetDesign = definition.dataSets;
           this.axesDesign = definition.axesDesign;
           this.showValues = definition.showValues;
+          this.zoomable = definition.zoomable;
       }
       static validateChartDefinition(validator, definition) {
           return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -28533,6 +29184,7 @@ stores.inject(MyMetaStore, storeInstance);
               aggregated: context.aggregated ?? false,
               axesDesign: context.axesDesign,
               showValues: context.showValues,
+              zoomable: context.zoomable,
           };
       }
       getDefinition() {
@@ -28560,6 +29212,7 @@ stores.inject(MyMetaStore, storeInstance);
               aggregated: this.aggregated,
               axesDesign: this.axesDesign,
               showValues: this.showValues,
+              zoomable: this.zoomable,
           };
       }
       getContextCreation() {
@@ -28944,6 +29597,7 @@ stores.inject(MyMetaStore, storeInstance);
       dataSetDesign;
       axesDesign;
       showValues;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -28962,6 +29616,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.dataSetDesign = definition.dataSets;
           this.axesDesign = definition.axesDesign;
           this.showValues = definition.showValues;
+          this.zoomable = definition.zoomable;
       }
       static transformDefinition(chartSheetId, definition, applyChange) {
           return transformChartDefinitionWithDataSetsWithZone(chartSheetId, definition, applyChange);
@@ -28985,6 +29640,7 @@ stores.inject(MyMetaStore, storeInstance);
               firstValueAsSubtotal: context.firstValueAsSubtotal ?? false,
               axesDesign: context.axesDesign,
               showValues: context.showValues,
+              zoomable: context.zoomable ?? false,
           };
       }
       getContextCreation() {
@@ -29044,6 +29700,7 @@ stores.inject(MyMetaStore, storeInstance);
               firstValueAsSubtotal: this.firstValueAsSubtotal,
               axesDesign: this.axesDesign,
               showValues: this.showValues,
+              zoomable: this.zoomable,
           };
       }
       getDefinitionForExcel() {
@@ -29220,14 +29877,14 @@ stores.inject(MyMetaStore, storeInstance);
       sequence: 100,
   });
   const chartComponentRegistry = new Registry();
-  chartComponentRegistry.add("line", ChartJsComponent);
-  chartComponentRegistry.add("bar", ChartJsComponent);
-  chartComponentRegistry.add("combo", ChartJsComponent);
+  chartComponentRegistry.add("line", ZoomableChartJsComponent);
+  chartComponentRegistry.add("bar", ZoomableChartJsComponent);
+  chartComponentRegistry.add("combo", ZoomableChartJsComponent);
   chartComponentRegistry.add("pie", ChartJsComponent);
   chartComponentRegistry.add("gauge", GaugeChartComponent);
-  chartComponentRegistry.add("scatter", ChartJsComponent);
+  chartComponentRegistry.add("scatter", ZoomableChartJsComponent);
   chartComponentRegistry.add("scorecard", ScorecardChart);
-  chartComponentRegistry.add("waterfall", ChartJsComponent);
+  chartComponentRegistry.add("waterfall", ZoomableChartJsComponent);
   chartComponentRegistry.add("pyramid", ChartJsComponent);
   chartComponentRegistry.add("radar", ChartJsComponent);
   chartComponentRegistry.add("geo", ChartJsComponent);
@@ -29426,12 +30083,70 @@ stores.inject(MyMetaStore, storeInstance);
       preview: "o-spreadsheet-ChartPreview.TREE_MAP_CHART",
   });
 
+  function generateMasterChartConfig(chartJsConfig) {
+      return {
+          ...chartJsConfig,
+          data: {
+              ...chartJsConfig.data,
+              datasets: chartJsConfig.data.datasets
+                  .filter((ds) => !isTrendLineAxis(ds["xAxisID"]))
+                  .map((ds) => ({
+                  ...ds,
+                  pointRadius: 0,
+                  showLine: true,
+              })),
+          },
+          options: {
+              ...chartJsConfig.options,
+              hover: { mode: null },
+              plugins: {
+                  ...chartJsConfig.options.plugins,
+                  title: { display: false },
+                  legend: { display: false },
+                  tooltip: { enabled: false },
+                  chartShowValuesPlugin: undefined,
+              },
+              layout: {
+                  padding: {
+                      ...chartJsConfig.options.layout?.padding,
+                      top: 5,
+                      bottom: 10,
+                  },
+              },
+              scales: {
+                  y: {
+                      ...chartJsConfig.options.scales?.y,
+                      display: false,
+                  },
+                  y1: {
+                      ...chartJsConfig.options.scales?.y1,
+                      display: false,
+                  },
+                  x: {
+                      ...chartJsConfig.options.scales?.x,
+                      title: undefined,
+                      ticks: {
+                          ...chartJsConfig.options.scales?.x?.ticks,
+                          callback: function (value) {
+                              return truncateLabel(chartJsConfig.options.scales?.x?.ticks?.callback?.call(this, value), 5);
+                          },
+                          padding: 0,
+                          font: {
+                              size: 9,
+                          },
+                      },
+                  },
+              },
+          },
+      };
+  }
+
   /**
    * Create a function used to create a Chart based on the definition
    */
   function chartFactory(getters) {
       const builders = chartRegistry.getAll().sort((a, b) => a.sequence - b.sequence);
-      function createChart(id, definition, sheetId) {
+      function createChart(figureId, definition, sheetId) {
           const builder = builders.find((builder) => builder.match(definition.type));
           if (!builder) {
               throw new Error(`No builder for this chart: ${definition.type}`);
@@ -29451,7 +30166,13 @@ stores.inject(MyMetaStore, storeInstance);
           if (!builder) {
               throw new Error("No runtime builder for this chart.");
           }
-          return builder.getChartRuntime(chart, getters);
+          const runtime = builder.getChartRuntime(chart, getters);
+          const definition = chart.getDefinition();
+          if ("chartJsConfig" in runtime && /line|combo|bar|scatter|waterfall/.test(definition.type)) {
+              const chartJsConfig = runtime.chartJsConfig;
+              runtime["masterChartConfig"] = generateMasterChartConfig(chartJsConfig);
+          }
+          return runtime;
       }
       return createRuntimeChart;
   }
@@ -29782,6 +30503,8 @@ stores.inject(MyMetaStore, storeInstance);
       return {
           relsFiles: [],
           sharedStrings: [],
+          chartIds: [],
+          imageIds: [],
           // default Values that will always be part of the style sheet
           styles: [
               {
@@ -29859,6 +30582,10 @@ stores.inject(MyMetaStore, storeInstance);
   }
 
   function getChartMenuActions(figureId, onFigureDeleted, env) {
+      const chartId = env.model.getters.getChartIdFromFigureId(figureId);
+      if (!chartId) {
+          return [];
+      }
       const menuItemSpecs = [
           {
               id: "edit",
@@ -29881,8 +30608,8 @@ stores.inject(MyMetaStore, storeInstance);
               execute: async () => {
                   const figureSheetId = env.model.getters.getFigureSheetId(figureId);
                   const figure = env.model.getters.getFigure(figureSheetId, figureId);
-                  const chartType = env.model.getters.getChartType(figureId);
-                  const runtime = env.model.getters.getChartRuntime(figureId);
+                  const chartType = env.model.getters.getChartType(chartId);
+                  const runtime = env.model.getters.getChartRuntime(chartId);
                   const imageUrl = chartToImageUrl(runtime, figure, chartType);
                   const innerHTML = `<img src="${xmlEscape(imageUrl)}" />`;
                   const blob = await chartToImageFile(runtime, figure, chartType);
@@ -29902,8 +30629,8 @@ stores.inject(MyMetaStore, storeInstance);
               execute: async () => {
                   const figureSheetId = env.model.getters.getFigureSheetId(figureId);
                   const figure = env.model.getters.getFigure(figureSheetId, figureId);
-                  const chartType = env.model.getters.getChartType(figureId);
-                  const runtime = env.model.getters.getChartRuntime(figureId);
+                  const chartType = env.model.getters.getChartType(chartId);
+                  const runtime = env.model.getters.getChartRuntime(chartId);
                   const url = chartToImageUrl(runtime, figure, chartType);
                   downloadFile(url, "chart");
               },
@@ -29962,6 +30689,35 @@ stores.inject(MyMetaStore, storeInstance);
       ];
       return createActions(menuItemSpecs);
   }
+  function getCarouselMenuActions(figureId, onFigureDeleted, env) {
+      const menuItemSpecs = [
+          {
+              id: "edit_carousel",
+              name: _t("Edit carousel"),
+              sequence: 1,
+              execute: () => {
+                  env.model.dispatch("SELECT_FIGURE", { figureId });
+                  env.openSidePanel("CarouselPanel", { figureId });
+              },
+              icon: "o-spreadsheet-Icon.EDIT",
+              isEnabled: (env) => !env.isSmall,
+          },
+          {
+              id: "edit_chart",
+              name: _t("Edit chart"),
+              sequence: 1,
+              execute: () => {
+                  env.model.dispatch("SELECT_FIGURE", { figureId });
+                  env.openSidePanel("ChartPanel", {});
+              },
+              icon: "o-spreadsheet-Icon.EDIT",
+              isEnabled: (env) => !env.isSmall,
+              isVisible: (env) => env.model.getters.getSelectedCarouselItem(figureId)?.type === "chart",
+          },
+          getDeleteMenuItem(figureId, onFigureDeleted, env),
+      ];
+      return createActions(menuItemSpecs).filter((action) => env.model.getters.isReadonly() ? action.isReadonlyAllowed : true);
+  }
   function getCopyMenuItem(figureId, env, copiedNotificationMessage) {
       return {
           id: "copy",
@@ -30010,24 +30766,101 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  class FullScreenChartStore extends SpreadsheetStore {
-      mutators = ["toggleFullScreenChart"];
-      fullScreenFigure = undefined;
-      toggleFullScreenChart(figureId) {
-          if (this.fullScreenFigure?.id === figureId) {
-              this.fullScreenFigure = undefined;
+  const CAROUSEL_DEFAULT_CHART_DEFINITION = {
+      type: "bar",
+      title: {},
+      stacked: false,
+      dataSetsHaveTitle: false,
+      dataSets: [],
+      legendPosition: "top",
+  };
+  function getCarouselItemPreview(getters, item) {
+      if (item.type === "carouselDataView") {
+          return "o-spreadsheet-Icon.LIST";
+      }
+      const definition = getters.getChartDefinition(item.chartId);
+      const matchedChart = chartSubtypeRegistry.getAll().find((c) => c.matcher?.(definition)) ||
+          chartSubtypeRegistry.get(definition.type);
+      return matchedChart.preview;
+  }
+  function getCarouselItemTitle(getters, item) {
+      if (item.title) {
+          return item.title;
+      }
+      if (item.type === "carouselDataView") {
+          return _t("Data");
+      }
+      const definition = getters.getChartDefinition(item.chartId);
+      const matchedChart = chartSubtypeRegistry.getAll().find((c) => c.matcher?.(definition)) ||
+          chartSubtypeRegistry.get(definition.type);
+      return matchedChart.displayName;
+  }
+
+  class CarouselFigure extends owl.Component {
+      static template = "o-spreadsheet-CarouselFigure";
+      static props = {
+          figureUI: Object,
+          onFigureDeleted: Function,
+          editFigureStyle: { type: Function, optional: true },
+      };
+      static components = {};
+      setup() {
+          owl.useEffect(() => {
+              if (this.selectedCarouselItem?.type === "carouselDataView") {
+                  this.props.editFigureStyle?.({ "pointer-events": "none" });
+              }
+              else {
+                  this.props.editFigureStyle?.({ "pointer-events": "auto" });
+              }
+          });
+      }
+      get carousel() {
+          return this.env.model.getters.getCarousel(this.props.figureUI.id);
+      }
+      get selectedCarouselItem() {
+          return this.env.model.getters.getSelectedCarouselItem(this.props.figureUI.id);
+      }
+      get chartComponent() {
+          const selectedItem = this.selectedCarouselItem;
+          if (selectedItem?.type !== "chart") {
+              throw new Error("Selected item is not a chart");
           }
-          else {
-              this.makeFullScreen(figureId);
+          const type = this.env.model.getters.getChartType(selectedItem.chartId);
+          const component = chartComponentRegistry.get(type);
+          if (!component) {
+              throw new Error(`Component is not defined for type ${type}`);
           }
+          return component;
       }
-      makeFullScreen(figureId) {
-          const sheetId = this.getters.getActiveSheetId();
-          const figure = this.getters.getFigure(sheetId, figureId);
-          if (figure) {
-              this.fullScreenFigure = { ...figure, x: 0, y: 0, width: 0, height: 0 };
+      onCarouselDoubleClick() {
+          this.env.model.dispatch("SELECT_FIGURE", { figureId: this.props.figureUI.id });
+          this.env.openSidePanel("CarouselPanel", { figureId: this.props.figureUI.id });
+      }
+      isItemSelected(item) {
+          const selectedItem = this.selectedCarouselItem;
+          return deepEquals(selectedItem, item);
+      }
+      getItemTitle(item) {
+          return getCarouselItemTitle(this.env.model.getters, item);
+      }
+      onCarouselTabClick(item) {
+          this.env.model.dispatch("UPDATE_CAROUSEL_ACTIVE_ITEM", {
+              figureId: this.props.figureUI.id,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+              item,
+          });
+          if (item.type === "carouselDataView" &&
+              this.env.model.getters.getSelectedFigureId() === this.props.figureUI.id) {
+              this.env.model.dispatch("SELECT_FIGURE", { figureId: null });
           }
       }
+      get headerStyle() {
+          const cssProperties = {};
+          if (this.selectedCarouselItem?.type === "carouselDataView") {
+              cssProperties["background-color"] = "#ffffff";
+          }
+          return cssPropertiesToCss(cssProperties);
+      }
   }
 
   /**
@@ -30794,9 +31627,9 @@ stores.inject(MyMetaStore, storeInstance);
           this.originalChartDefinition = this.getters.getChartDefinition(chartId);
       }
       updateType(type) {
-          const figureId = this.chartId;
-          const currentDefinition = this.getters.getChartDefinition(figureId);
-          if (currentDefinition.type === type) {
+          const chartId = this.chartId;
+          const currentDefinition = this.getters.getChartDefinition(chartId);
+          if (currentDefinition?.type === type) {
               return;
           }
           let definition;
@@ -30806,7 +31639,7 @@ stores.inject(MyMetaStore, storeInstance);
           else {
               const newChartInfo = chartSubtypeRegistry.get(type);
               const ChartClass = chartRegistry.get(newChartInfo.chartType);
-              const chartCreationContext = this.getters.getContextCreationChart(figureId);
+              const chartCreationContext = this.getters.getContextCreationChart(chartId);
               if (!chartCreationContext)
                   return;
               definition = {
@@ -30816,7 +31649,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           this.model.dispatch("UPDATE_CHART", {
               definition,
-              figureId,
+              chartId,
+              figureId: this.getters.getFigureIdFromChartId(chartId),
               sheetId: this.getters.getActiveSheetId(),
           });
       }
@@ -30837,17 +31671,17 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartDashboardMenu extends owl.Component {
       static template = "o-spreadsheet-ChartDashboardMenu";
       static components = { MenuPopover };
-      static props = { figureUI: Object };
+      static props = { chartId: String };
       fullScreenFigureStore;
       store;
       menuState = owl.useState({ isOpen: false, anchorRect: null, menuItems: [] });
       setup() {
           super.setup();
-          this.store = useLocalStore(ChartDashboardMenuStore, this.props.figureUI.id);
+          this.store = useLocalStore(ChartDashboardMenuStore, this.props.chartId);
           this.fullScreenFigureStore = useStore(FullScreenChartStore);
-          owl.onWillUpdateProps(({ figureUI }) => {
-              if (figureUI.id !== this.props.figureUI.id) {
-                  this.store.reset(figureUI.id);
+          owl.onWillUpdateProps(({ chartId }) => {
+              if (chartId !== this.props.chartId) {
+                  this.store.reset(chartId);
               }
           });
       }
@@ -30855,26 +31689,28 @@ stores.inject(MyMetaStore, storeInstance);
           return [this.fullScreenMenuItem, ...this.store.changeChartTypeMenuItems].filter(isDefined);
       }
       get backgroundColor() {
-          const color = this.env.model.getters.getChartDefinition(this.props.figureUI.id).background;
+          const color = this.env.model.getters.getChartDefinition(this.props.chartId).background;
           return "background-color: " + (color || BACKGROUND_CHART_COLOR);
       }
       openContextMenu(ev) {
           this.menuState.isOpen = true;
           this.menuState.anchorRect = { x: ev.clientX, y: ev.clientY, width: 0, height: 0 };
-          this.menuState.menuItems = getChartMenuActions(this.props.figureUI.id, () => { }, this.env);
+          const figureId = this.env.model.getters.getFigureIdFromChartId(this.props.chartId);
+          this.menuState.menuItems = getChartMenuActions(figureId, () => { }, this.env);
       }
       get fullScreenMenuItem() {
-          const definition = this.env.model.getters.getChartDefinition(this.props.figureUI.id);
+          const definition = this.env.model.getters.getChartDefinition(this.props.chartId);
+          const figureId = this.env.model.getters.getFigureIdFromChartId(this.props.chartId);
           if (definition.type === "scorecard") {
               return undefined;
           }
-          if (this.props.figureUI.id === this.fullScreenFigureStore.fullScreenFigure?.id) {
+          if (this.props.chartId === this.fullScreenFigureStore.fullScreenFigure?.id) {
               return {
                   id: "fullScreenChart",
                   label: _t("Exit Full Screen"),
                   iconClass: "fa fa-compress",
                   onClick: () => {
-                      this.fullScreenFigureStore.toggleFullScreenChart(this.props.figureUI.id);
+                      this.fullScreenFigureStore.toggleFullScreenChart(figureId);
                   },
               };
           }
@@ -30883,27 +31719,18 @@ stores.inject(MyMetaStore, storeInstance);
               label: _t("Full Screen"),
               iconClass: "fa fa-expand",
               onClick: () => {
-                  this.fullScreenFigureStore.toggleFullScreenChart(this.props.figureUI.id);
+                  this.fullScreenFigureStore.toggleFullScreenChart(figureId);
               },
           };
       }
   }
 
-  // -----------------------------------------------------------------------------
-  // STYLE
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-chart-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-`;
   class ChartFigure extends owl.Component {
       static template = "o-spreadsheet-ChartFigure";
       static props = {
           figureUI: Object,
           onFigureDeleted: Function,
+          editFigureStyle: { type: Function, optional: true },
       };
       static components = { ChartDashboardMenu };
       onDoubleClick() {
@@ -30911,7 +31738,14 @@ stores.inject(MyMetaStore, storeInstance);
           this.env.openSidePanel("ChartPanel");
       }
       get chartType() {
-          return this.env.model.getters.getChartType(this.props.figureUI.id);
+          return this.env.model.getters.getChartType(this.chartId);
+      }
+      get chartId() {
+          const chartId = this.env.model.getters.getChartIdFromFigureId(this.props.figureUI.id);
+          if (!chartId) {
+              throw new Error(`No chart found for figure ID: ${this.props.figureUI.id}`);
+          }
+          return chartId;
       }
       get chartComponent() {
           const type = this.chartType;
@@ -30928,6 +31762,7 @@ stores.inject(MyMetaStore, storeInstance);
       static props = {
           figureUI: Object,
           onFigureDeleted: Function,
+          editFigureStyle: { type: Function, optional: true },
       };
       static components = {};
       // ---------------------------------------------------------------------------
@@ -30954,6 +31789,10 @@ stores.inject(MyMetaStore, storeInstance);
       borderWidth: 0,
       menuBuilder: getImageMenuActions,
   });
+  figureRegistry.add("carousel", {
+      Component: CarouselFigure,
+      menuBuilder: getCarouselMenuActions,
+  });
 
   // -----------------------------------------------------------------------------
   // STYLE
@@ -30980,6 +31819,7 @@ stores.inject(MyMetaStore, storeInstance);
   .o-figure-wrapper {
     position: absolute;
     box-sizing: content-box;
+    pointer-events: auto;
 
     .o-fig-anchor {
       z-index: ${ComponentsImportance.FigureAnchor};
@@ -31038,6 +31878,7 @@ stores.inject(MyMetaStore, storeInstance);
       static props = {
           figureUI: Object,
           style: { type: String, optional: true },
+          class: { type: String, optional: true },
           onFigureDeleted: { type: Function, optional: true },
           onMouseDown: { type: Function, optional: true },
           onClickAnchor: { type: Function, optional: true },
@@ -31050,6 +31891,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       menuState = owl.useState({ isOpen: false, anchorRect: null, menuItems: [] });
       figureRef = owl.useRef("figure");
+      figureWrapperRef = owl.useRef("figureWrapper");
       menuButtonRef = owl.useRef("menuButton");
       borderWidth;
       get isSelected() {
@@ -31242,6 +32084,13 @@ stores.inject(MyMetaStore, storeInstance);
               .get(this.props.figureUI.tag)
               .menuBuilder(this.props.figureUI.id, this.props.onFigureDeleted, this.env);
       }
+      editWrapperStyle(properties) {
+          if (this.figureWrapperRef.el) {
+              for (const property in properties) {
+                  this.figureWrapperRef.el.style.setProperty(property, properties[property] || null);
+              }
+          }
+      }
   }
 
   class DelayedHoveredCellStore extends SpreadsheetStore {
@@ -38774,16 +39623,15 @@ stores.inject(MyMetaStore, storeInstance);
       reverseLookup.set(canonical, maxId);
       return maxId;
   }
-  const chartIds = [];
   /**
    * Convert a chart o-spreadsheet id to a xlsx id which
    * are unsigned integers (starting from 1).
    */
-  function convertChartId(chartId) {
-      const xlsxId = chartIds.findIndex((id) => id === chartId);
+  function convertChartId(chartId, construct) {
+      const xlsxId = construct.chartIds.findIndex((id) => id === chartId);
       if (xlsxId === -1) {
-          chartIds.push(chartId);
-          return chartIds.length;
+          construct.chartIds.push(chartId);
+          return construct.chartIds.length;
       }
       return xlsxId + 1;
   }
@@ -41178,6 +42026,8 @@ stores.inject(MyMetaStore, storeInstance);
               sheets: sheets,
               sharedStrings,
               externalBooks,
+              chartIds: [],
+              imageIds: [],
           };
       }
       buildXlsxFileStructure() {
@@ -41855,6 +42705,18 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return data;
       },
+  })
+      .add("18.5.1", {
+      migrate(data) {
+          for (const sheet of data.sheets || []) {
+              for (const figure of sheet.figures || []) {
+                  if (figure.tag === "chart") {
+                      figure.data.chartId = figure.id;
+                  }
+              }
+          }
+          return data;
+      },
   });
   function fixOverlappingFilters(data) {
       for (const sheet of data.sheets || []) {
@@ -42108,7 +42970,12 @@ stores.inject(MyMetaStore, storeInstance);
           sheet.figures?.forEach((figure) => {
               if (figure.tag === "chart") {
                   // chart definition
-                  map[figure.id] = figure.data;
+                  if (data.version && compareVersions(String(data.version), "18.5.1") <= 0) {
+                      map[figure.data.chartId] = figure.data;
+                  }
+                  else {
+                      map[figure.id] = figure.data;
+                  }
               }
           });
       }
@@ -42119,20 +42986,20 @@ stores.inject(MyMetaStore, storeInstance);
                   let command = cmd;
                   switch (cmd.type) {
                       case "CREATE_CHART":
-                          map[cmd.figureId] = cmd.definition;
+                          map[cmd.chartId] = cmd.definition;
                           break;
                       case "UPDATE_CHART":
-                          if (!map[cmd.figureId]) {
+                          if (!map[cmd.chartId]) {
                               /** the chart does not exist on the map, it might have been created after a duplicate sheet.
                                * We don't have access to the definition, so we skip the command.
                                */
-                              console.log(`Fix chart definition: chart with id ${cmd.figureId} not found.`);
+                              console.log(`Fix chart definition: chart with id ${cmd.chartId} not found.`);
                               continue;
                           }
-                          const definition = map[cmd.figureId];
+                          const definition = map[cmd.chartId];
                           const newDefinition = { ...definition, ...cmd.definition };
                           command = { ...cmd, definition: newDefinition };
-                          map[cmd.figureId] = newDefinition;
+                          map[cmd.chartId] = newDefinition;
                           break;
                   }
                   commands.push(command);
@@ -42705,6 +43572,7 @@ stores.inject(MyMetaStore, storeInstance);
       const result = env.model.dispatch("CREATE_CHART", {
           sheetId,
           figureId,
+          chartId: figureId,
           col,
           row,
           offset,
@@ -42716,6 +43584,26 @@ stores.inject(MyMetaStore, storeInstance);
           env.openSidePanel("ChartPanel");
       }
   };
+  const CREATE_CAROUSEL = (env) => {
+      const getters = env.model.getters;
+      const figureId = env.model.uuidGenerator.smallUuid();
+      const sheetId = getters.getActiveSheetId();
+      const size = { width: DEFAULT_FIGURE_WIDTH, height: DEFAULT_FIGURE_HEIGHT };
+      const { col, row, offset } = centerFigurePosition(getters, size);
+      const result = env.model.dispatch("CREATE_CAROUSEL", {
+          sheetId,
+          figureId,
+          col,
+          row,
+          offset,
+          size,
+          definition: { items: [] },
+      });
+      if (result.isSuccessful) {
+          env.model.dispatch("SELECT_FIGURE", { figureId });
+          env.openSidePanel("CarouselPanel", { figureId });
+      }
+  };
   //------------------------------------------------------------------------------
   // Pivots
   //------------------------------------------------------------------------------
@@ -42752,10 +43640,18 @@ stores.inject(MyMetaStore, storeInstance);
       sequence: index,
       execute: (env) => {
           const zone = env.model.getters.getSelectedZone();
-          const table = env.model.getters.getPivot(pivotId).getExpandedTableStructure().export();
+          const table = env.model.getters.getPivot(pivotId).getExpandedTableStructure();
+          if (table.numberOfCells > PIVOT_MAX_NUMBER_OF_CELLS) {
+              env.notifyUser({
+                  type: "warning",
+                  text: getPivotTooBigErrorMessage(table.numberOfCells, env.model.getters.getLocale()),
+                  sticky: true,
+              });
+              return;
+          }
           env.model.dispatch("INSERT_PIVOT_WITH_TABLE", {
               pivotId,
-              table,
+              table: table.export(),
               col: zone.left,
               row: zone.top,
               sheetId: env.model.getters.getActiveSheetId(),
@@ -43967,6 +44863,12 @@ stores.inject(MyMetaStore, storeInstance);
       isEnabled: (env) => !env.isSmall,
       icon: "o-spreadsheet-Icon.INSERT_CHART",
   };
+  const insertCarousel = {
+      name: _t("Carousel"),
+      execute: CREATE_CAROUSEL,
+      isEnabled: (env) => !env.isSmall,
+      icon: "o-spreadsheet-Icon.CAROUSEL",
+  };
   const insertPivot = {
       name: _t("Pivot table"),
       execute: CREATE_PIVOT,
@@ -44087,7 +44989,7 @@ stores.inject(MyMetaStore, storeInstance);
           env.openSidePanel("DataValidationEditor", {
               rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
               onExit: () => {
-                  env.openSidePanel("DataValidation");
+                  env.replaceSidePanel("DataValidation", "DataValidationEditor");
               },
           });
       },
@@ -44823,6 +45725,9 @@ stores.inject(MyMetaStore, storeInstance);
               return [row, ...this.rowTreeToRows(node.children, row)];
           });
       }
+      get numberOfCells() {
+          return this.rows.length * this.getNumberOfDataColumns();
+      }
   }
   const EMPTY_PIVOT_CELL = { type: "EMPTY" };
 
@@ -48057,6 +48962,7 @@ stores.inject(MyMetaStore, storeInstance);
           horizontalSnap: undefined,
           verticalSnap: undefined,
           cancelDnd: undefined,
+          overlappingCarousel: undefined,
       });
       setup() {
           owl.onMounted(() => {
@@ -48079,6 +48985,7 @@ stores.inject(MyMetaStore, storeInstance);
                   this.dnd.draggedFigure = undefined;
                   this.dnd.horizontalSnap = undefined;
                   this.dnd.verticalSnap = undefined;
+                  this.dnd.overlappingCarousel = undefined;
                   this.dnd.cancelDnd = undefined;
               }
           });
@@ -48217,26 +49124,46 @@ stores.inject(MyMetaStore, storeInstance);
               const currentMousePosition = { x: ev.clientX, y: ev.clientY };
               const draggedFigure = dragFigureForMove(currentMousePosition, initialMousePosition, initialFigure, maxDimensions, initialScrollPosition, getters.getActiveSheetScrollInfo());
               const otherFigures = this.getOtherFigures(initialFigure.id);
-              const snapResult = snapForMove(getters, draggedFigure, otherFigures);
-              this.dnd.draggedFigure = snapResult.snappedFigure;
-              this.dnd.horizontalSnap = this.getSnap(snapResult.horizontalSnapLine);
-              this.dnd.verticalSnap = this.getSnap(snapResult.verticalSnapLine);
+              const overlappingCarousel = this.getCarouselOverlappingChart(draggedFigure, otherFigures);
+              this.dnd.overlappingCarousel = overlappingCarousel;
+              if (!overlappingCarousel) {
+                  const snapResult = snapForMove(getters, draggedFigure, otherFigures);
+                  this.dnd.draggedFigure = snapResult.snappedFigure;
+                  this.dnd.horizontalSnap = this.getSnap(snapResult.horizontalSnapLine);
+                  this.dnd.verticalSnap = this.getSnap(snapResult.verticalSnapLine);
+              }
+              else {
+                  this.dnd.draggedFigure = draggedFigure;
+                  this.dnd.horizontalSnap = undefined;
+                  this.dnd.verticalSnap = undefined;
+              }
           };
           const onMouseUp = (ev) => {
               if (!this.dnd.draggedFigure) {
                   return;
               }
               const { col, row, offset } = this.env.model.getters.getPositionAnchorOffset(this.dnd.draggedFigure);
+              if (!this.dnd.overlappingCarousel) {
+                  this.env.model.dispatch("UPDATE_FIGURE", {
+                      sheetId,
+                      figureId: figureUI.id,
+                      offset,
+                      col,
+                      row,
+                  });
+              }
+              else {
+                  this.env.model.dispatch("ADD_FIGURE_CHART_TO_CAROUSEL", {
+                      sheetId,
+                      carouselFigureId: this.dnd.overlappingCarousel.id,
+                      chartFigureId: figureUI.id,
+                  });
+                  this.props.onFigureDeleted();
+              }
               this.dnd.draggedFigure = undefined;
               this.dnd.horizontalSnap = undefined;
               this.dnd.verticalSnap = undefined;
-              this.env.model.dispatch("UPDATE_FIGURE", {
-                  sheetId,
-                  figureId: figureUI.id,
-                  offset,
-                  col,
-                  row,
-              });
+              this.dnd.overlappingCarousel = undefined;
           };
           this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
       }
@@ -48288,6 +49215,7 @@ stores.inject(MyMetaStore, storeInstance);
               this.dnd.draggedFigure = undefined;
               this.dnd.horizontalSnap = undefined;
               this.dnd.verticalSnap = undefined;
+              this.dnd.overlappingCarousel = undefined;
           };
           this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
       }
@@ -48304,10 +49232,15 @@ stores.inject(MyMetaStore, storeInstance);
           if (figureUI.id !== this.dnd.draggedFigure?.id)
               return "";
           return cssPropertiesToCss({
-              opacity: "0.9",
+              opacity: this.dnd.overlappingCarousel?.id ? "0.6" : "0.9",
               cursor: "grabbing",
           });
       }
+      getFigureClass(figureUI) {
+          if (figureUI.id !== this.dnd.overlappingCarousel?.id)
+              return "";
+          return "o-add-to-carousel";
+      }
       getSnap(snapLine) {
           if (!snapLine || !this.dnd.draggedFigure)
               return undefined;
@@ -48354,6 +49287,20 @@ stores.inject(MyMetaStore, storeInstance);
               });
           }
       }
+      getCarouselOverlappingChart(figureUI, otherFigures) {
+          if (figureUI.tag !== "chart") {
+              return undefined;
+          }
+          const minimumOverlap = 20; // Minimum overlap in pixels to consider a carousel overlapping
+          const carousels = otherFigures.filter((f) => f.tag === "carousel");
+          return carousels.find((carousel) => {
+              const xOverlap = Math.max(0, Math.min(figureUI.x + figureUI.width, carousel.x + carousel.width) -
+                  Math.max(figureUI.x, carousel.x));
+              const yOverlap = Math.max(0, Math.min(figureUI.y + figureUI.height, carousel.y + carousel.height) -
+                  Math.max(figureUI.y, carousel.y));
+              return xOverlap >= minimumOverlap && yOverlap >= minimumOverlap;
+          });
+      }
   }
 
   css /* scss */ `
@@ -51036,6 +51983,226 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  function useAutofocus({ refName }) {
+      const ref = owl.useRef(refName);
+      owl.useEffect((el) => {
+          el?.focus();
+      }, () => [ref.el]);
+  }
+
+  css /* scss */ `
+  .o-spreadsheet {
+    .os-input {
+      border-width: 0 0 1px 0;
+      border-color: transparent;
+      outline: none;
+      text-overflow: ellipsis;
+      color: ${TEXT_BODY};
+    }
+    .os-input:hover,
+    .os-input:focus {
+      border-color: ${GRAY_300};
+    }
+  }
+`;
+  class TextInput extends owl.Component {
+      static template = "o-spreadsheet-TextInput";
+      static props = {
+          value: String,
+          onChange: Function,
+          class: {
+              type: String,
+              optional: true,
+          },
+          id: {
+              type: String,
+              optional: true,
+          },
+          placeholder: {
+              type: String,
+              optional: true,
+          },
+          autofocus: {
+              type: Boolean,
+              optional: true,
+          },
+      };
+      inputRef = owl.useRef("input");
+      setup() {
+          owl.useExternalListener(window, "click", (ev) => {
+              if (ev.target !== this.inputRef.el && this.inputRef.el?.value !== this.props.value) {
+                  this.save();
+              }
+          }, { capture: true });
+          if (this.props.autofocus) {
+              useAutofocus({ refName: "input" });
+          }
+      }
+      onKeyDown(ev) {
+          switch (ev.key) {
+              case "Enter":
+                  this.save();
+                  ev.preventDefault();
+                  ev.stopPropagation();
+                  break;
+              case "Escape":
+                  if (this.inputRef.el) {
+                      this.inputRef.el.value = this.props.value;
+                      this.inputRef.el.blur();
+                  }
+                  ev.preventDefault();
+                  ev.stopPropagation();
+                  break;
+          }
+      }
+      save() {
+          const currentValue = (this.inputRef.el?.value || "").trim();
+          if (currentValue !== this.props.value) {
+              this.props.onChange(currentValue);
+          }
+          this.inputRef.el?.blur();
+      }
+      onMouseDown(ev) {
+          // Stop the event if the input is not focused, we handle everything in onMouseUp
+          if (ev.target !== document.activeElement) {
+              ev.preventDefault();
+              ev.stopPropagation();
+          }
+      }
+      onMouseUp(ev) {
+          const target = ev.target;
+          if (target !== document.activeElement) {
+              target.focus();
+              target.select();
+              ev.preventDefault();
+              ev.stopPropagation();
+          }
+      }
+  }
+
+  class CarouselPanel extends owl.Component {
+      static template = "o-spreadsheet-CarouselPanel";
+      static props = { onCloseSidePanel: Function, figureId: String };
+      static components = { TextInput };
+      dragAndDrop = useDragAndDropListItems();
+      previewListRef = owl.useRef("previewList");
+      setup() {
+          let lastCarouselItems = [...this.carouselItems];
+          owl.onWillUpdateProps(() => {
+              if (!deepEquals(this.carouselItems, lastCarouselItems)) {
+                  this.dragAndDrop.cancel();
+              }
+              lastCarouselItems = [...this.carouselItems];
+          });
+      }
+      get carouselItems() {
+          return this.env.model.getters.getCarousel(this.props.figureId).items;
+      }
+      getPreviewDivStyle(item) {
+          return this.dragAndDrop.itemsStyle[this.getItemId(item)] || "";
+      }
+      getItemId(item) {
+          return item.type === "chart" ? item.chartId : "transparent-carousel";
+      }
+      addNewChartToCarousel() {
+          this.env.model.dispatch("ADD_NEW_CHART_TO_CAROUSEL", {
+              figureId: this.props.figureId,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+          });
+      }
+      get hasDataView() {
+          return this.carouselItems.some((item) => item.type === "carouselDataView");
+      }
+      addDataViewToCarousel() {
+          const carousel = this.env.model.getters.getCarousel(this.props.figureId);
+          this.env.model.dispatch("UPDATE_CAROUSEL", {
+              figureId: this.props.figureId,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+              definition: { items: [...carousel.items, { type: "carouselDataView" }] },
+          });
+      }
+      activateCarouselItem(item) {
+          this.env.model.dispatch("UPDATE_CAROUSEL_ACTIVE_ITEM", {
+              figureId: this.props.figureId,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+              item,
+          });
+      }
+      editCarouselItem(item) {
+          if (item.type === "chart") {
+              this.activateCarouselItem(item);
+              this.env.model.dispatch("SELECT_FIGURE", { figureId: this.props.figureId });
+              this.env.openSidePanel("ChartPanel", { chartId: item.chartId });
+          }
+      }
+      renameCarouselItem(item, newName) {
+          const trimmedName = newName.trim();
+          if (!trimmedName || trimmedName === this.getItemTitle(item).toString()) {
+              return;
+          }
+          const items = [...this.carouselItems];
+          const itemIndex = this.carouselItems.findIndex((itm) => deepEquals(itm, item));
+          if (itemIndex !== -1) {
+              items[itemIndex] = { ...item, title: trimmedName };
+              this.env.model.dispatch("UPDATE_CAROUSEL", {
+                  figureId: this.props.figureId,
+                  sheetId: this.env.model.getters.getActiveSheetId(),
+                  definition: { items },
+              });
+          }
+      }
+      deleteCarouselItem(item) {
+          const carousel = this.env.model.getters.getCarousel(this.props.figureId);
+          const items = carousel.items.filter((itm) => !deepEquals(itm, item));
+          this.env.model.dispatch("UPDATE_CAROUSEL", {
+              figureId: this.props.figureId,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+              definition: { items },
+          });
+      }
+      onDragHandleMouseDown(item, event) {
+          if (event.button !== 0)
+              return;
+          const previewRects = Array.from(this.previewListRef.el.children).map((previewEl) => getBoundingRectAsPOJO(previewEl));
+          const items = this.carouselItems.map((item, index) => ({
+              id: this.getItemId(item),
+              size: previewRects[index].height,
+              position: previewRects[index].y,
+          }));
+          this.dragAndDrop.start("vertical", {
+              draggedItemId: this.getItemId(item),
+              initialMousePosition: event.clientY,
+              items: items,
+              scrollableContainerEl: this.previewListRef.el,
+              onDragEnd: (itemId, finalIndex) => this.onDragEnd(item, finalIndex),
+          });
+      }
+      onDragEnd(item, finalIndex) {
+          const originalIndex = this.carouselItems.findIndex((itm) => deepEquals(itm, item));
+          if (originalIndex === -1 || originalIndex === finalIndex) {
+              return;
+          }
+          const carousel = this.env.model.getters.getCarousel(this.props.figureId);
+          const items = [...carousel.items];
+          items.splice(originalIndex, 1);
+          items.splice(finalIndex, 0, item);
+          this.env.model.dispatch("UPDATE_CAROUSEL", {
+              figureId: this.props.figureId,
+              sheetId: this.env.model.getters.getActiveSheetId(),
+              definition: { items },
+          });
+      }
+      getItemTitle(item) {
+          return getCarouselItemTitle(this.env.model.getters, item);
+      }
+      getItemPreview(item) {
+          return getCarouselItemPreview(this.env.model.getters, item);
+      }
+      get carouselAddChartInfoMessage() {
+          return _t("Add a chart to the carousel. You can also add a chart by dragging and dropping it over the carousel figure.");
+      }
+  }
+
   class ChartDataSeries extends owl.Component {
       static template = "o-spreadsheet.ChartDataSeries";
       static components = { SelectionInput, Section };
@@ -51102,7 +52269,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartErrorSection,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -51160,7 +52327,7 @@ stores.inject(MyMetaStore, storeInstance);
           ];
       }
       onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               dataSetsHaveTitle,
           });
       }
@@ -51232,7 +52399,7 @@ stores.inject(MyMetaStore, storeInstance);
               return;
           }
           const labelRange = dataSets.length > 1 ? dataSets.shift().dataRange : "";
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               labelRange,
               dataSets,
           });
@@ -51249,7 +52416,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...this.dataSets?.[i],
               dataRange,
           }));
-          this.state.datasetDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+          this.state.datasetDispatchResult = this.props.canUpdateChart(this.props.chartId, {
               dataSets: this.dataSets,
           });
       }
@@ -51261,7 +52428,7 @@ stores.inject(MyMetaStore, storeInstance);
               backgroundColor: colors[i],
               ...this.dataSets[i],
           }));
-          this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+          this.state.datasetDispatchResult = this.props.updateChart(this.props.chartId, {
               dataSets: this.dataSets,
           });
       }
@@ -51274,18 +52441,18 @@ stores.inject(MyMetaStore, storeInstance);
               ...ds,
           }))
               .filter((_, i) => i !== index);
-          this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+          this.state.datasetDispatchResult = this.props.updateChart(this.props.chartId, {
               dataSets: this.dataSets,
           });
       }
       onDataSeriesConfirmed() {
           this.dataSets = this.splitRanges;
           this.datasetOrientation = this.computeDatasetOrientation();
-          this.state.datasetDispatchResult = this.props.updateChart(this.props.figureId, {
+          this.state.datasetDispatchResult = this.props.updateChart(this.props.chartId, {
               dataSets: this.dataSets,
           });
           if (this.state.datasetDispatchResult.isSuccessful) {
-              this.dataSets = this.env.model.getters.getChartDefinition(this.props.figureId).dataSets;
+              this.dataSets = this.env.model.getters.getChartDefinition(this.props.chartId).dataSets;
           }
       }
       get splitRanges() {
@@ -51376,12 +52543,12 @@ stores.inject(MyMetaStore, storeInstance);
        */
       onLabelRangeChanged(ranges) {
           this.labelRange = ranges[0];
-          this.state.labelsDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+          this.state.labelsDispatchResult = this.props.canUpdateChart(this.props.chartId, {
               labelRange: this.labelRange,
           });
       }
       onLabelRangeConfirmed() {
-          this.state.labelsDispatchResult = this.props.updateChart(this.props.figureId, {
+          this.state.labelsDispatchResult = this.props.updateChart(this.props.chartId, {
               labelRange: this.labelRange,
           });
       }
@@ -51389,7 +52556,7 @@ stores.inject(MyMetaStore, storeInstance);
           return this.labelRange || "";
       }
       onUpdateAggregated(aggregated) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               aggregated,
           });
       }
@@ -51421,7 +52588,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           const zonesBySheetName = {};
           const transposedDatasets = [];
-          const figureSheetId = getters.getFigureSheetId(this.props.figureId);
+          const figureId = getters.getFigureIdFromChartId(this.props.chartId);
+          const figureSheetId = getters.getFigureSheetId(figureId);
           let name = getters.getActiveSheet().name;
           if (figureSheetId) {
               name = getters.getSheet(figureSheetId).name;
@@ -51481,7 +52649,7 @@ stores.inject(MyMetaStore, storeInstance);
               : this.chartTerms.StackedColumnChart;
       }
       onUpdateStacked(stacked) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               stacked,
           });
       }
@@ -51975,7 +53143,7 @@ stores.inject(MyMetaStore, storeInstance);
   class AxisDesignEditor extends owl.Component {
       static template = "o-spreadsheet-AxisDesignEditor";
       static components = { Section, ChartTitle, BadgeSelection };
-      static props = { figureId: String, definition: Object, updateChart: Function, axesList: Array };
+      static props = { chartId: String, definition: Object, updateChart: Function, axesList: Array };
       state = owl.useState({ currentAxis: "x" });
       defaultFontSize = CHART_AXIS_TITLE_FONT_SIZE;
       get axisTitleStyle() {
@@ -52000,7 +53168,7 @@ stores.inject(MyMetaStore, storeInstance);
                   text,
               },
           };
-          this.props.updateChart(this.props.figureId, { axesDesign });
+          this.props.updateChart(this.props.chartId, { axesDesign });
       }
       updateAxisTitleStyle(style) {
           const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
@@ -52008,7 +53176,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...axesDesign[this.state.currentAxis],
               title: style,
           };
-          this.props.updateChart(this.props.figureId, { axesDesign });
+          this.props.updateChart(this.props.chartId, { axesDesign });
       }
   }
 
@@ -52061,7 +53229,7 @@ stores.inject(MyMetaStore, storeInstance);
           RadioSelection,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52085,17 +53253,17 @@ stores.inject(MyMetaStore, storeInstance);
           this.state.activeTool = isOpen ? "" : tool;
       }
       updateBackgroundColor(color) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               background: color,
           });
       }
       updateTitle(newTitle) {
           const title = { ...this.title, text: newTitle };
-          this.props.updateChart(this.props.figureId, { title });
+          this.props.updateChart(this.props.chartId, { title });
       }
       updateChartTitleStyle(style) {
           const title = { ...this.title, ...style };
-          this.props.updateChart(this.props.figureId, { title });
+          this.props.updateChart(this.props.chartId, { title });
           this.state.activeTool = "";
       }
   }
@@ -52106,13 +53274,13 @@ stores.inject(MyMetaStore, storeInstance);
           Section,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
       };
       updateLegendPosition(ev) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               legendPosition: ev.target.value,
           });
       }
@@ -52126,7 +53294,7 @@ stores.inject(MyMetaStore, storeInstance);
           RoundColorPicker,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52134,7 +53302,7 @@ stores.inject(MyMetaStore, storeInstance);
       };
       state = owl.useState({ index: 0 });
       getDataSeries() {
-          const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+          const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
           if (!runtime || !("chartJsConfig" in runtime)) {
               return [];
           }
@@ -52153,7 +53321,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...dataSets[this.state.index],
               backgroundColor: color,
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
       getDataSeriesColor() {
           const dataSets = this.props.definition.dataSets;
@@ -52173,7 +53341,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...dataSets[this.state.index],
               label,
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
       getDataSeriesLabel() {
           const dataSets = this.props.definition.dataSets;
@@ -52191,7 +53359,7 @@ stores.inject(MyMetaStore, storeInstance);
           RoundColorPicker,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           canUpdateChart: Function,
           updateChart: Function,
@@ -52207,7 +53375,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...dataSets[index],
               yAxisId: axis === "left" ? "y" : "y1",
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
       getDataSerieAxis(index) {
           const dataSets = this.props.definition.dataSets;
@@ -52233,7 +53401,7 @@ stores.inject(MyMetaStore, storeInstance);
                   display,
               },
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
       getTrendLineConfiguration(index) {
           const dataSets = this.props.definition.dataSets;
@@ -52274,7 +53442,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.updateTrendLineValue(index, { order: parseInt(element.value) });
       }
       getMaxPolynomialDegree(index) {
-          const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+          const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
           return Math.min(10, runtime.chartJsConfig.data.datasets[index].data.length - 1);
       }
       get defaultWindowSize() {
@@ -52316,7 +53484,7 @@ stores.inject(MyMetaStore, storeInstance);
                   ...config,
               },
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
   }
 
@@ -52326,7 +53494,7 @@ stores.inject(MyMetaStore, storeInstance);
           Checkbox,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52346,7 +53514,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartShowValues,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           canUpdateChart: Function,
           updateChart: Function,
@@ -52370,17 +53538,30 @@ stores.inject(MyMetaStore, storeInstance);
           Checkbox,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
       };
   }
 
-  class ComboChartDesignPanel extends ChartWithAxisDesignPanel {
-      static template = "o-spreadsheet-ComboChartDesignPanel";
+  class GenericZoomableChartDesignPanel extends ChartWithAxisDesignPanel {
+      static template = "o-spreadsheet-GenericZoomableChartDesignPanel";
       static components = {
           ...ChartWithAxisDesignPanel.components,
+          Checkbox,
+      };
+      onToggleZoom(zoomable) {
+          this.props.updateChart(this.props.chartId, {
+              zoomable,
+          });
+      }
+  }
+
+  class ComboChartDesignPanel extends GenericZoomableChartDesignPanel {
+      static template = "o-spreadsheet-ComboChartDesignPanel";
+      static components = {
+          ...GenericZoomableChartDesignPanel.components,
           ChartShowDataMarkers,
           RadioSelection,
       };
@@ -52397,7 +53578,7 @@ stores.inject(MyMetaStore, storeInstance);
               ...dataSets[index],
               type,
           };
-          this.props.updateChart(this.props.figureId, { dataSets });
+          this.props.updateChart(this.props.chartId, { dataSets });
       }
       getDataSeriesType(index) {
           const dataSets = this.props.definition.dataSets;
@@ -52433,7 +53614,7 @@ stores.inject(MyMetaStore, storeInstance);
           ];
       }
       onUpdateCumulative(cumulative) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               cumulative,
           });
       }
@@ -52449,13 +53630,13 @@ stores.inject(MyMetaStore, storeInstance);
           Section,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
       };
       getFunnelColorItems() {
-          const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+          const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
           const labels = (runtime.chartJsConfig.data.labels || []);
           const colors = getFunnelLabelColors(labels, this.props.definition.funnelColors);
           return labels.map((label, index) => ({
@@ -52465,7 +53646,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       updateFunnelItemColor(index, color) {
           const funnelColors = replaceItemAtIndex(this.props.definition.funnelColors || [], color, index);
-          this.props.updateChart(this.props.figureId, { funnelColors });
+          this.props.updateChart(this.props.chartId, { funnelColors });
       }
   }
 
@@ -52473,7 +53654,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-GaugeChartConfigPanel";
       static components = { ChartErrorSection, ChartDataSeries };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52491,12 +53672,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       onDataRangeChanged(ranges) {
           this.dataRange = ranges[0];
-          this.state.dataRangeDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+          this.state.dataRangeDispatchResult = this.props.canUpdateChart(this.props.chartId, {
               dataRange: this.dataRange,
           });
       }
       updateDataRange() {
-          this.state.dataRangeDispatchResult = this.props.updateChart(this.props.figureId, {
+          this.state.dataRangeDispatchResult = this.props.updateChart(this.props.chartId, {
               dataRange: this.dataRange,
           });
       }
@@ -52555,7 +53736,7 @@ stores.inject(MyMetaStore, storeInstance);
           StandaloneComposer,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -52596,7 +53777,7 @@ stores.inject(MyMetaStore, storeInstance);
       updateSectionRule(sectionRule) {
           this.state.sectionRuleCancelledReasons = [];
           this.state.sectionRuleCancelledReasons.push(...this.checkSectionRuleFormulasAreValid(this.state.sectionRule));
-          const dispatchResult = this.props.updateChart(this.props.figureId, {
+          const dispatchResult = this.props.updateChart(this.props.chartId, {
               sectionRule,
           });
           if (dispatchResult.isSuccessful) {
@@ -52659,9 +53840,9 @@ stores.inject(MyMetaStore, storeInstance);
           return tryToNumber(toScalar(evaluatedValue), locale) !== undefined;
       }
       get sheetId() {
-          const chart = this.env.model.getters.getChart(this.props.figureId);
+          const chart = this.env.model.getters.getChart(this.props.chartId);
           if (!chart) {
-              throw new Error("Chart not found with id " + this.props.figureId);
+              throw new Error("Chart not found with id " + this.props.chartId);
           }
           return chart.sheetId;
       }
@@ -52671,13 +53852,13 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-GeoChartRegionSelectSection";
       static components = { Section };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
       };
       updateSelectedRegion(ev) {
           const value = ev.target.value;
-          this.props.updateChart(this.props.figureId, { region: value });
+          this.props.updateChart(this.props.chartId, { region: value });
       }
       get availableRegions() {
           return this.env.model.getters.getGeoChartAvailableRegions();
@@ -52727,14 +53908,14 @@ stores.inject(MyMetaStore, storeInstance);
               : this.updateColorScale(value);
       }
       updateColorScale(colorScale) {
-          this.props.updateChart(this.props.figureId, { colorScale });
+          this.props.updateChart(this.props.chartId, { colorScale });
       }
       updateMissingValueColor(color) {
-          this.props.updateChart(this.props.figureId, { missingValueColor: color });
+          this.props.updateChart(this.props.chartId, { missingValueColor: color });
       }
       updateLegendPosition(ev) {
           const value = ev.target.value;
-          this.props.updateChart(this.props.figureId, { legendPosition: value });
+          this.props.updateChart(this.props.chartId, { legendPosition: value });
       }
       get selectedColorScale() {
           return typeof this.props.definition.colorScale === "object"
@@ -52783,7 +53964,7 @@ stores.inject(MyMetaStore, storeInstance);
   class LineConfigPanel extends GenericChartConfigPanel {
       static template = "o-spreadsheet-LineConfigPanel";
       get canTreatLabelsAsText() {
-          const chart = this.env.model.getters.getChart(this.props.figureId);
+          const chart = this.env.model.getters.getChart(this.props.chartId);
           if (chart && chart instanceof LineChart) {
               return canChartParseLabels(chart.getDefinition(), chart.dataSets, chart.labelRange, this.env.model.getters);
           }
@@ -52808,26 +53989,26 @@ stores.inject(MyMetaStore, storeInstance);
           return options;
       }
       onUpdateLabelsAsText(labelsAsText) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               labelsAsText,
           });
       }
       onUpdateStacked(stacked) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               stacked,
           });
       }
       onUpdateCumulative(cumulative) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               cumulative,
           });
       }
   }
 
-  class LineChartDesignPanel extends ChartWithAxisDesignPanel {
+  class LineChartDesignPanel extends GenericZoomableChartDesignPanel {
       static template = "o-spreadsheet-LineChartDesignPanel";
       static components = {
-          ...ChartWithAxisDesignPanel.components,
+          ...GenericZoomableChartDesignPanel.components,
           ChartShowDataMarkers,
       };
   }
@@ -52855,13 +54036,13 @@ stores.inject(MyMetaStore, storeInstance);
           PieHoleSize,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
       };
       onPieHoleSizeChange(pieHolePercentage) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               ...this.props.definition,
               pieHolePercentage,
           });
@@ -52882,7 +54063,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartShowDataMarkers,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           canUpdateChart: Function,
           updateChart: Function,
@@ -52892,14 +54073,14 @@ stores.inject(MyMetaStore, storeInstance);
   class ScatterConfigPanel extends GenericChartConfigPanel {
       static template = "o-spreadsheet-ScatterConfigPanel";
       get canTreatLabelsAsText() {
-          const chart = this.env.model.getters.getChart(this.props.figureId);
+          const chart = this.env.model.getters.getChart(this.props.chartId);
           if (chart && chart instanceof ScatterChart) {
               return canChartParseLabels(chart.getDefinition(), chart.dataSets, chart.labelRange, this.env.model.getters);
           }
           return false;
       }
       onUpdateLabelsAsText(labelsAsText) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               labelsAsText,
           });
       }
@@ -52921,7 +54102,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-ScorecardChartConfigPanel";
       static components = { SelectionInput, ChartErrorSection, Section };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: Function,
@@ -52947,12 +54128,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       onKeyValueRangeChanged(ranges) {
           this.keyValue = ranges[0];
-          this.state.keyValueDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+          this.state.keyValueDispatchResult = this.props.canUpdateChart(this.props.chartId, {
               keyValue: this.keyValue,
           });
       }
       updateKeyValueRange() {
-          this.state.keyValueDispatchResult = this.props.updateChart(this.props.figureId, {
+          this.state.keyValueDispatchResult = this.props.updateChart(this.props.chartId, {
               keyValue: this.keyValue,
           });
       }
@@ -52961,12 +54142,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       onBaselineRangeChanged(ranges) {
           this.baseline = ranges[0];
-          this.state.baselineDispatchResult = this.props.canUpdateChart(this.props.figureId, {
+          this.state.baselineDispatchResult = this.props.canUpdateChart(this.props.chartId, {
               baseline: this.baseline,
           });
       }
       updateBaselineRange() {
-          this.state.baselineDispatchResult = this.props.updateChart(this.props.figureId, {
+          this.state.baselineDispatchResult = this.props.updateChart(this.props.chartId, {
               baseline: this.baseline,
           });
       }
@@ -52974,7 +54155,7 @@ stores.inject(MyMetaStore, storeInstance);
           return this.baseline || "";
       }
       updateBaselineMode(ev) {
-          this.props.updateChart(this.props.figureId, { baselineMode: ev.target.value });
+          this.props.updateChart(this.props.chartId, { baselineMode: ev.target.value });
       }
   }
 
@@ -52989,7 +54170,7 @@ stores.inject(MyMetaStore, storeInstance);
           ChartTitle,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -53006,7 +54187,7 @@ stores.inject(MyMetaStore, storeInstance);
           return SCORECARD_CHART_TITLE_FONT_SIZE;
       }
       updateHumanizeNumbers(humanize) {
-          this.props.updateChart(this.props.figureId, { humanize });
+          this.props.updateChart(this.props.chartId, { humanize });
       }
       translate(term) {
           return _t(term);
@@ -53014,13 +54195,13 @@ stores.inject(MyMetaStore, storeInstance);
       setColor(color, colorPickerId) {
           switch (colorPickerId) {
               case "backgroundColor":
-                  this.props.updateChart(this.props.figureId, { background: color });
+                  this.props.updateChart(this.props.chartId, { background: color });
                   break;
               case "baselineColorDown":
-                  this.props.updateChart(this.props.figureId, { baselineColorDown: color });
+                  this.props.updateChart(this.props.chartId, { baselineColorDown: color });
                   break;
               case "baselineColorUp":
-                  this.props.updateChart(this.props.figureId, { baselineColorUp: color });
+                  this.props.updateChart(this.props.chartId, { baselineColorUp: color });
                   break;
           }
       }
@@ -53039,22 +54220,22 @@ stores.inject(MyMetaStore, storeInstance);
           };
       }
       setKeyText(text) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               keyDescr: { ...this.props.definition.keyDescr, text },
           });
       }
       updateKeyStyle(style) {
           const keyDescr = { ...this.keyStyle, ...style };
-          this.props.updateChart(this.props.figureId, { keyDescr });
+          this.props.updateChart(this.props.chartId, { keyDescr });
       }
       setBaselineText(text) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               baselineDescr: { ...this.props.definition.baselineDescr, text },
           });
       }
       updateBaselineStyle(style) {
           const baselineDescr = { ...this.baselineStyle, ...style };
-          this.props.updateChart(this.props.figureId, { baselineDescr });
+          this.props.updateChart(this.props.chartId, { baselineDescr });
       }
   }
 
@@ -53072,7 +54253,7 @@ stores.inject(MyMetaStore, storeInstance);
           PieHoleSize,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -53085,18 +54266,18 @@ stores.inject(MyMetaStore, storeInstance);
           return this.props.definition.showLabels ?? SunburstChartDefaults.showLabels;
       }
       get groupColors() {
-          const figureId = this.props.figureId;
-          const runtime = this.env.model.getters.getChartRuntime(figureId);
+          const chartId = this.props.chartId;
+          const runtime = this.env.model.getters.getChartRuntime(chartId);
           const dataset = runtime.chartJsConfig.data.datasets[0];
           return dataset?.groupColors || [];
       }
       onGroupColorChanged(index, color) {
           const colors = deepCopy(this.props.definition.groupColors) ?? [];
           colors[index] = color;
-          this.props.updateChart(this.props.figureId, { groupColors: colors });
+          this.props.updateChart(this.props.chartId, { groupColors: colors });
       }
       onPieHoleSizeChange(pieHolePercentage) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               ...this.props.definition,
               pieHolePercentage,
           });
@@ -53110,7 +54291,7 @@ stores.inject(MyMetaStore, storeInstance);
           RoundColorPicker,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           onColorChanged: Function,
       };
@@ -53122,7 +54303,7 @@ stores.inject(MyMetaStore, storeInstance);
           return coloringOptions;
       }
       getTreeGroupAndColors() {
-          const runtime = this.env.model.getters.getChartRuntime(this.props.figureId);
+          const runtime = this.env.model.getters.getChartRuntime(this.props.chartId);
           const config = runtime.chartJsConfig;
           return config.data.datasets[0]?.groupColors || [];
       }
@@ -53143,7 +54324,7 @@ stores.inject(MyMetaStore, storeInstance);
       static template = "o-spreadsheet-TreeMapColorScale";
       static components = { RoundColorPicker };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           onColorChanged: Function,
       };
@@ -53185,7 +54366,7 @@ stores.inject(MyMetaStore, storeInstance);
           TreeMapColorScale,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
@@ -53209,15 +54390,15 @@ stores.inject(MyMetaStore, storeInstance);
       }
       changeColoringOption(option) {
           const coloringOptions = option === "categoryColor" ? this.savedColors.categoryColors : this.savedColors.colorScale;
-          this.props.updateChart(this.props.figureId, { coloringOptions });
+          this.props.updateChart(this.props.chartId, { coloringOptions });
       }
       onCategoryColorChange(coloringOptions) {
           this.savedColors.categoryColors = coloringOptions;
-          this.props.updateChart(this.props.figureId, { coloringOptions });
+          this.props.updateChart(this.props.chartId, { coloringOptions });
       }
       onColorScaleChange(coloringOptions) {
           this.savedColors.colorScale = coloringOptions;
-          this.props.updateChart(this.props.figureId, { coloringOptions });
+          this.props.updateChart(this.props.chartId, { coloringOptions });
       }
       get coloringOptionChoices() {
           return [
@@ -53241,23 +54422,23 @@ stores.inject(MyMetaStore, storeInstance);
           ChartLegend,
       };
       static props = {
-          figureId: String,
+          chartId: String,
           definition: Object,
           updateChart: Function,
           canUpdateChart: { type: Function, optional: true },
       };
       axisChoices = CHART_AXIS_CHOICES;
       onUpdateShowSubTotals(showSubTotals) {
-          this.props.updateChart(this.props.figureId, { showSubTotals });
+          this.props.updateChart(this.props.chartId, { showSubTotals });
       }
       onUpdateShowConnectorLines(showConnectorLines) {
-          this.props.updateChart(this.props.figureId, { showConnectorLines });
+          this.props.updateChart(this.props.chartId, { showConnectorLines });
       }
       onUpdateFirstValueAsSubtotal(firstValueAsSubtotal) {
-          this.props.updateChart(this.props.figureId, { firstValueAsSubtotal });
+          this.props.updateChart(this.props.chartId, { firstValueAsSubtotal });
       }
       updateColor(colorName, color) {
-          this.props.updateChart(this.props.figureId, { [colorName]: color });
+          this.props.updateChart(this.props.chartId, { [colorName]: color });
       }
       get axesList() {
           return [
@@ -53278,10 +54459,15 @@ stores.inject(MyMetaStore, storeInstance);
               CHART_WATERFALL_SUBTOTAL_COLOR);
       }
       updateVerticalAxisPosition(value) {
-          this.props.updateChart(this.props.figureId, {
+          this.props.updateChart(this.props.chartId, {
               verticalAxisPosition: value,
           });
       }
+      onToggleZoom(zoomable) {
+          this.props.updateChart(this.props.chartId, {
+              zoomable,
+          });
+      }
   }
 
   const chartSidePanelComponentRegistry = new Registry();
@@ -53292,11 +54478,11 @@ stores.inject(MyMetaStore, storeInstance);
   })
       .add("scatter", {
       configuration: ScatterConfigPanel,
-      design: ChartWithAxisDesignPanel,
+      design: GenericZoomableChartDesignPanel,
   })
       .add("bar", {
       configuration: BarConfigPanel,
-      design: ChartWithAxisDesignPanel,
+      design: GenericZoomableChartDesignPanel,
   })
       .add("combo", {
       configuration: GenericChartConfigPanel,
@@ -53380,7 +54566,7 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartTypePicker extends owl.Component {
       static template = "o-spreadsheet-ChartTypePicker";
       static components = { Section, Popover };
-      static props = { figureId: String, chartPanelStore: Object };
+      static props = { chartId: String, chartPanelStore: Object };
       categories = chartCategories;
       chartTypeByCategories = {};
       popoverRef = owl.useRef("popoverRef");
@@ -53405,14 +54591,14 @@ stores.inject(MyMetaStore, storeInstance);
           this.closePopover();
       }
       onTypeChange(type) {
-          this.props.chartPanelStore.changeChartType(this.props.figureId, type);
+          this.props.chartPanelStore.changeChartType(this.props.chartId, type);
           this.closePopover();
       }
-      getChartDefinition(figureId) {
-          return this.env.model.getters.getChartDefinition(figureId);
+      getChartDefinition(chartId) {
+          return this.env.model.getters.getChartDefinition(chartId);
       }
       getSelectedChartSubtypeProperties() {
-          const definition = this.getChartDefinition(this.props.figureId);
+          const definition = this.getChartDefinition(this.props.chartId);
           const matchedChart = chartSubtypeRegistry
               .getAll()
               .find((c) => c.matcher?.(definition) || false);
@@ -53444,34 +54630,36 @@ stores.inject(MyMetaStore, storeInstance);
       activatePanel(panel) {
           this.panel = panel;
       }
-      changeChartType(figureId, newDisplayType) {
-          const currentCreationContext = this.getters.getContextCreationChart(figureId);
-          const savedCreationContext = this.creationContexts[figureId] || {};
+      changeChartType(chartId, newDisplayType) {
+          const currentCreationContext = this.getters.getContextCreationChart(chartId);
+          const savedCreationContext = this.creationContexts[chartId] || {};
           let newRanges = currentCreationContext?.range;
           if (newRanges?.every((range, i) => deepEquals(range, savedCreationContext.range?.[i]))) {
               newRanges = Object.assign([], savedCreationContext.range, currentCreationContext?.range);
           }
-          this.creationContexts[figureId] = {
+          this.creationContexts[chartId] = {
               ...savedCreationContext,
               ...currentCreationContext,
               range: newRanges,
           };
+          const figureId = this.getters.getFigureIdFromChartId(chartId);
           const sheetId = this.getters.getFigureSheetId(figureId);
           if (!sheetId) {
               return;
           }
-          const definition = this.getChartDefinitionFromContextCreation(figureId, newDisplayType);
+          const definition = this.getChartDefinitionFromContextCreation(chartId, newDisplayType);
           this.model.dispatch("UPDATE_CHART", {
               definition,
+              chartId,
               figureId,
               sheetId,
           });
       }
-      getChartDefinitionFromContextCreation(figureId, newDisplayType) {
+      getChartDefinitionFromContextCreation(chartId, newDisplayType) {
           const newChartInfo = chartSubtypeRegistry.get(newDisplayType);
           const ChartClass = chartRegistry.get(newChartInfo.chartType);
           return {
-              ...ChartClass.getChartDefinitionFromContextCreation(this.creationContexts[figureId]),
+              ...ChartClass.getChartDefinitionFromContextCreation(this.creationContexts[chartId]),
               ...newChartInfo.subtypeDefinition,
           };
       }
@@ -53512,15 +54700,15 @@ stores.inject(MyMetaStore, storeInstance);
   class ChartPanel extends owl.Component {
       static template = "o-spreadsheet-ChartPanel";
       static components = { Section, ChartTypePicker };
-      static props = { onCloseSidePanel: Function, figureId: String };
+      static props = { onCloseSidePanel: Function, chartId: String };
       panelContentRef;
       scrollPositions = {
           configuration: 0,
           design: 0,
       };
       store;
-      get figureId() {
-          return this.props.figureId;
+      get chartId() {
+          return this.props.chartId;
       }
       setup() {
           this.store = useLocalStore(MainChartPanelStore);
@@ -53540,45 +54728,49 @@ stores.inject(MyMetaStore, storeInstance);
           }
           this.store.activatePanel(panel);
       }
-      updateChart(figureId, updateDefinition) {
-          if (figureId !== this.figureId) {
+      updateChart(chartId, updateDefinition) {
+          const figureId = this.env.model.getters.getFigureIdFromChartId(chartId);
+          if (chartId !== this.chartId) {
               return;
           }
           const definition = {
-              ...this.getChartDefinition(this.figureId),
+              ...this.getChartDefinition(this.chartId),
               ...updateDefinition,
           };
           return this.env.model.dispatch("UPDATE_CHART", {
               definition,
+              chartId,
               figureId,
               sheetId: this.env.model.getters.getFigureSheetId(figureId),
           });
       }
-      canUpdateChart(figureId, updateDefinition) {
-          if (figureId !== this.figureId || !this.env.model.getters.isChartDefined(figureId)) {
+      canUpdateChart(chartId, updateDefinition) {
+          const figureId = this.env.model.getters.getFigureIdFromChartId(chartId);
+          if (chartId !== this.chartId || !this.env.model.getters.isChartDefined(chartId)) {
               return;
           }
           const definition = {
-              ...this.getChartDefinition(this.figureId),
+              ...this.getChartDefinition(this.chartId),
               ...updateDefinition,
           };
           return this.env.model.canDispatch("UPDATE_CHART", {
               definition,
+              chartId,
               figureId,
               sheetId: this.env.model.getters.getFigureSheetId(figureId),
           });
       }
       onTypeChange(type) {
-          if (!this.figureId) {
+          if (!this.chartId) {
               return;
           }
-          this.store.changeChartType(this.figureId, type);
+          this.store.changeChartType(this.chartId, type);
       }
       get chartPanel() {
-          if (!this.figureId) {
+          if (!this.chartId) {
               throw new Error("Chart not defined.");
           }
-          const type = this.env.model.getters.getChartType(this.figureId);
+          const type = this.env.model.getters.getChartType(this.chartId);
           if (!type) {
               throw new Error("Chart not defined.");
           }
@@ -53588,8 +54780,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
           return chartPanel;
       }
-      getChartDefinition(figureId) {
-          return this.env.model.getters.getChartDefinition(figureId);
+      getChartDefinition(chartId) {
+          return this.env.model.getters.getChartDefinition(chartId);
       }
   }
 
@@ -55526,11 +56718,15 @@ stores.inject(MyMetaStore, storeInstance);
           this.store = useLocalStore(PivotMeasureDisplayPanelStore, this.props.pivotId, this.props.measure);
       }
       onSave() {
-          this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+          this.env.replaceSidePanel("PivotSidePanel", `pivot_measure_display_${this.props.pivotId}_${this.props.measure.id}`, {
+              pivotId: this.props.pivotId,
+          });
       }
       onCancel() {
           this.store.cancelMeasureDisplayEdition();
-          this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+          this.env.replaceSidePanel("PivotSidePanel", `pivot_measure_display_${this.props.pivotId}_${this.props.measure.id}`, {
+              pivotId: this.props.pivotId,
+          });
       }
       get fieldChoices() {
           return this.store.fields.map((field) => ({
@@ -55591,103 +56787,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  function useAutofocus({ refName }) {
-      const ref = owl.useRef(refName);
-      owl.useEffect((el) => {
-          el?.focus();
-      }, () => [ref.el]);
-  }
-
-  css /* scss */ `
-  .o-spreadsheet {
-    .os-input {
-      border-width: 0 0 1px 0;
-      border-color: transparent;
-      outline: none;
-      text-overflow: ellipsis;
-      color: ${TEXT_BODY};
-    }
-    .os-input:hover,
-    .os-input:focus {
-      border-color: ${GRAY_300};
-    }
-  }
-`;
-  class TextInput extends owl.Component {
-      static template = "o-spreadsheet-TextInput";
-      static props = {
-          value: String,
-          onChange: Function,
-          class: {
-              type: String,
-              optional: true,
-          },
-          id: {
-              type: String,
-              optional: true,
-          },
-          placeholder: {
-              type: String,
-              optional: true,
-          },
-          autofocus: {
-              type: Boolean,
-              optional: true,
-          },
-      };
-      inputRef = owl.useRef("input");
-      setup() {
-          owl.useExternalListener(window, "click", (ev) => {
-              if (ev.target !== this.inputRef.el && this.inputRef.el?.value !== this.props.value) {
-                  this.save();
-              }
-          }, { capture: true });
-          if (this.props.autofocus) {
-              useAutofocus({ refName: "input" });
-          }
-      }
-      onKeyDown(ev) {
-          switch (ev.key) {
-              case "Enter":
-                  this.save();
-                  ev.preventDefault();
-                  ev.stopPropagation();
-                  break;
-              case "Escape":
-                  if (this.inputRef.el) {
-                      this.inputRef.el.value = this.props.value;
-                      this.inputRef.el.blur();
-                  }
-                  ev.preventDefault();
-                  ev.stopPropagation();
-                  break;
-          }
-      }
-      save() {
-          const currentValue = (this.inputRef.el?.value || "").trim();
-          if (currentValue !== this.props.value) {
-              this.props.onChange(currentValue);
-          }
-          this.inputRef.el?.blur();
-      }
-      onMouseDown(ev) {
-          // Stop the event if the input is not focused, we handle everything in onMouseUp
-          if (ev.target !== document.activeElement) {
-              ev.preventDefault();
-              ev.stopPropagation();
-          }
-      }
-      onMouseUp(ev) {
-          const target = ev.target;
-          if (target !== document.activeElement) {
-              target.focus();
-              target.select();
-              ev.preventDefault();
-              ev.stopPropagation();
-          }
-      }
-  }
-
   class PivotCustomGroupsCollapsible extends owl.Component {
       static template = "o-spreadsheet-PivotCustomGroupsCollapsible";
       static props = {
@@ -56044,7 +57143,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       openShowValuesAs() {
-          this.env.openSidePanel("PivotMeasureDisplayPanel", {
+          this.env.replaceSidePanel("PivotMeasureDisplayPanel", `pivot_key_${this.props.pivotId}`, {
               pivotId: this.props.pivotId,
               measure: this.props.measure,
           });
@@ -56305,7 +57404,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.onDimensionsUpdated(update);
       }
       getMeasureId(fieldName, aggregator) {
-          const baseId = fieldName + (aggregator ? `:${aggregator}` : "");
+          const baseId = fieldName.replaceAll("'", "") + (aggregator ? `:${aggregator}` : "");
           let id = baseId;
           let i = 2;
           while (this.props.definition.measures.some((m) => m.id === id)) {
@@ -56383,6 +57482,13 @@ stores.inject(MyMetaStore, storeInstance);
           const fieldName = field ? getFieldDisplayName(field) : "";
           return measureDisplayTerms.descriptions[measureDisplay.type](fieldName);
       }
+      getHugeDimensionErrorMessage(dimension) {
+          const pivot = this.env.model.getters.getPivot(this.props.pivotId);
+          const possibleValues = pivot.getPossibleFieldValues(dimension);
+          return possibleValues.length > 100
+              ? _t("This dimension contains a lot of values (%s), and might slow down the pivot table.", possibleValues.length)
+              : undefined;
+      }
   }
 
   class PivotTitleSection extends owl.Component {
@@ -56556,6 +57662,7 @@ stores.inject(MyMetaStore, storeInstance);
       draft = null;
       notification = this.get(NotificationStore);
       alreadyNotified = false;
+      alreadyNotifiedForPivotSize = false;
       constructor(get, pivotId) {
           super(get);
           this.pivotId = pivotId;
@@ -56674,6 +57781,16 @@ stores.inject(MyMetaStore, storeInstance);
                       sticky: true,
                   });
               }
+              const pivot = this.getters.getPivot(this.pivotId);
+              const numberOfCells = pivot.isValid() ? pivot.getExpandedTableStructure().numberOfCells : 0;
+              if (!this.alreadyNotifiedForPivotSize && numberOfCells > PIVOT_MAX_NUMBER_OF_CELLS) {
+                  this.alreadyNotifiedForPivotSize = true;
+                  this.notification.notifyUser({
+                      type: "warning",
+                      text: getPivotTooBigErrorMessage(numberOfCells, this.getters.getLocale()),
+                      sticky: true,
+                  });
+              }
           }
       }
       discardPendingUpdate() {
@@ -57802,11 +58919,12 @@ stores.inject(MyMetaStore, storeInstance);
       title: _t("Chart"),
       Body: ChartPanel,
       computeState: (getters, initialProps) => {
-          const figureId = getters.getSelectedFigureId() ?? initialProps.figureId;
-          if (!getters.isChartDefined(figureId)) {
+          const figureId = getters.getSelectedFigureId();
+          const chartId = figureId ? getters.getChartIdFromFigureId(figureId) : initialProps.chartId;
+          if (!chartId || !getters.isChartDefined(chartId)) {
               return { isOpen: false };
           }
-          return { isOpen: true, props: { figureId } };
+          return { isOpen: true, props: { chartId } };
       },
   });
   sidePanelRegistry.add("FindAndReplace", {
@@ -57887,13 +59005,28 @@ stores.inject(MyMetaStore, storeInstance);
           try {
               // This will throw if the pivot or measure does not exist
               getters.getPivot(props.pivotId).getMeasure(props.measure.id);
-              return { isOpen: true, props, key: "pivot_measure_display" };
+              return {
+                  isOpen: true,
+                  props,
+                  key: `pivot_measure_display_${props.pivotId}_${props.measure.id}`,
+              };
           }
           catch (e) {
               return { isOpen: false };
           }
       },
   });
+  sidePanelRegistry.add("CarouselPanel", {
+      title: _t("Carousel"),
+      Body: CarouselPanel,
+      computeState: (getters, initialProps) => {
+          const figureId = initialProps.figureId || getters.getSelectedFigureId();
+          if (!figureId || !getters.doesCarouselExist(figureId)) {
+              return { isOpen: false };
+          }
+          return { isOpen: true, props: { figureId } };
+      },
+  });
 
   class ScreenWidthStore {
       mutators = ["setSmallThreshhold"];
@@ -57912,6 +59045,7 @@ stores.inject(MyMetaStore, storeInstance);
   class SidePanelStore extends SpreadsheetStore {
       mutators = [
           "open",
+          "replace",
           "toggle",
           "close",
           "changePanelSize",
@@ -57973,8 +59107,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (!state.isOpen) {
               return;
           }
-          const mainPanelKey = this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
-          if (!this.mainPanel || !this.mainPanel.isPinned || mainPanelKey === state.key) {
+          if (!this.mainPanel || !this.mainPanel.isPinned || this.mainPanelKey === state.key) {
               this._openPanel("mainPanel", newPanelInfo, state);
               return;
           }
@@ -57993,6 +59126,34 @@ stores.inject(MyMetaStore, storeInstance);
           }
           this._openPanel("secondaryPanel", newPanelInfo, state);
       }
+      replace(componentTag, currentPanelKey, initialPanelProps = {}) {
+          const newPanelInfo = { initialPanelProps, componentTag, size: DEFAULT_SIDE_PANEL_SIZE };
+          const state = this.computeState(newPanelInfo);
+          if (!state.isOpen) {
+              return;
+          }
+          const ensureMainPanelExpanded = () => {
+              if (this.mainPanel?.isCollapsed) {
+                  this.toggleCollapsePanel("mainPanel");
+              }
+          };
+          // Close the current panel if the target panel is already open
+          const isMainPanel = this.mainPanelKey === state.key;
+          const isSecondaryPanel = this.secondaryPanelKey === state.key;
+          if (isMainPanel && this.secondaryPanel) {
+              this.close();
+              ensureMainPanelExpanded();
+              return;
+          }
+          if (isSecondaryPanel) {
+              this.closeMainPanel();
+              this.togglePinPanel();
+              ensureMainPanelExpanded();
+              return;
+          }
+          const targetPanel = this.mainPanelKey === currentPanelKey ? "mainPanel" : "secondaryPanel";
+          this._openPanel(targetPanel, newPanelInfo, state);
+      }
       _openPanel(panel, newPanel, state) {
           const currentPanel = this[panel];
           if (currentPanel && newPanel.componentTag !== currentPanel.componentTag) {
@@ -58052,11 +59213,9 @@ stores.inject(MyMetaStore, storeInstance);
           panelInfo.size = size;
       }
       resetPanelSize(panel) {
-          const panelInfo = this[panel];
-          if (!panelInfo) {
-              return;
+          if (this[panel]) {
+              this[panel].size = DEFAULT_SIDE_PANEL_SIZE;
           }
-          panelInfo.size = DEFAULT_SIDE_PANEL_SIZE;
       }
       togglePinPanel() {
           if (!this.mainPanel) {
@@ -58855,7 +60014,7 @@ stores.inject(MyMetaStore, storeInstance);
           let lastFigureId = undefined;
           owl.onWillUpdateProps(() => {
               if (lastFigureId !== this.figureUI?.id) {
-                  animationStore.enableAnimationForChart(this.figureUI?.id + "-fullscreen");
+                  animationStore.enableAnimationForChart(this.chartId + "-fullscreen");
               }
               lastFigureId = this.figureUI?.id;
           });
@@ -58864,6 +60023,11 @@ stores.inject(MyMetaStore, storeInstance);
       get figureUI() {
           return this.fullScreenChartStore.fullScreenFigure;
       }
+      get chartId() {
+          if (!this.figureUI)
+              return undefined;
+          return this.env.model.getters.getChartIdFromFigureId(this.figureUI?.id);
+      }
       exitFullScreen() {
           if (this.figureUI) {
               this.fullScreenChartStore.toggleFullScreenChart(this.figureUI.id);
@@ -58875,9 +60039,9 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       get chartComponent() {
-          if (!this.figureUI)
+          if (!this.chartId)
               return undefined;
-          const type = this.env.model.getters.getChartType(this.figureUI.id);
+          const type = this.env.model.getters.getChartType(this.chartId);
           const component = chartComponentRegistry.get(type);
           if (!component) {
               throw new Error(`Component is not defined for type ${type}`);
@@ -60536,6 +61700,7 @@ stores.inject(MyMetaStore, storeInstance);
           "getChartType",
           "getChartIds",
           "getChart",
+          "getFigureIdFromChartId",
           "getContextCreationChart",
       ];
       charts = {};
@@ -60543,7 +61708,11 @@ stores.inject(MyMetaStore, storeInstance);
       validateChartDefinition = (cmd) => validateChartDefinition(this, cmd.definition);
       adaptRanges(applyChange) {
           for (const [chartId, chart] of Object.entries(this.charts)) {
-              this.history.update("charts", chartId, chart?.updateRanges(applyChange));
+              if (!chart) {
+                  continue;
+              }
+              const newChart = chart.chart.updateRanges(applyChange);
+              this.history.update("charts", chartId, newChart ? { figureId: chart.figureId, chart: newChart } : undefined);
           }
       }
       // ---------------------------------------------------------------------------
@@ -60552,9 +61721,11 @@ stores.inject(MyMetaStore, storeInstance);
       allowDispatch(cmd) {
           switch (cmd.type) {
               case "CREATE_CHART":
-                  return this.checkValidations(cmd, this.chainValidations(this.validateChartDefinition, this.checkChartDuplicate));
+                  return this.checkValidations(cmd, this.chainValidations(this.checkFigureArguments, this.validateChartDefinition, this.checkChartDuplicate));
               case "UPDATE_CHART":
                   return this.checkValidations(cmd, this.chainValidations(this.validateChartDefinition, this.checkChartExists, this.checkChartChanged));
+              case "DELETE_CHART":
+                  return this.checkChartExists(cmd);
               default:
                   return "Success" /* CommandResult.Success */;
           }
@@ -60562,37 +61733,61 @@ stores.inject(MyMetaStore, storeInstance);
       handle(cmd) {
           switch (cmd.type) {
               case "CREATE_CHART":
-                  this.addFigure(cmd.figureId, cmd.sheetId, cmd.col, cmd.row, cmd.offset, cmd.size);
-                  this.addChart(cmd.figureId, cmd.definition);
+                  const { col, row, offset, size, sheetId, figureId } = cmd;
+                  // If figure position is not defined, it means that the figure already exist (see allowDispatch)
+                  if (!this.getters.getFigure(sheetId, figureId) &&
+                      offset !== undefined &&
+                      col !== undefined &&
+                      row !== undefined) {
+                      this.addFigure(figureId, sheetId, col, row, offset, size);
+                  }
+                  this.addChart(cmd.figureId, cmd.chartId, cmd.definition);
                   break;
               case "UPDATE_CHART": {
-                  this.addChart(cmd.figureId, cmd.definition);
+                  this.addChart(cmd.figureId, cmd.chartId, cmd.definition);
                   break;
               }
               case "DUPLICATE_SHEET": {
-                  const sheetFiguresFrom = this.getters.getFigures(cmd.sheetId);
-                  for (const fig of sheetFiguresFrom) {
-                      if (fig.tag === "chart") {
-                          const figureIdBase = fig.id.split(FIGURE_ID_SPLITTER).pop();
-                          const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
-                          const chart = this.charts[fig.id]?.duplicateInDuplicatedSheet(cmd.sheetIdTo);
-                          if (chart) {
-                              this.dispatch("CREATE_CHART", {
-                                  figureId: duplicatedFigureId,
-                                  col: fig.col,
-                                  row: fig.row,
-                                  offset: fig.offset,
-                                  size: { width: fig.width, height: fig.height },
-                                  definition: chart.getDefinition(),
-                                  sheetId: cmd.sheetIdTo,
-                              });
-                          }
+                  for (const chartId of this.getChartIds(cmd.sheetId)) {
+                      const { chart, figureId } = this.charts[chartId] || {};
+                      if (!chart || !figureId) {
+                          continue;
+                      }
+                      const fig = this.getters.getFigure(cmd.sheetId, figureId);
+                      if (!fig) {
+                          continue;
+                      }
+                      const figureIdBase = figureId.split(FIGURE_ID_SPLITTER).pop();
+                      const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
+                      const chartIdBase = chartId.split(FIGURE_ID_SPLITTER).pop();
+                      const duplicatedChartId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${chartIdBase}`;
+                      const newChart = chart.duplicateInDuplicatedSheet(cmd.sheetIdTo);
+                      if (newChart) {
+                          this.dispatch("CREATE_CHART", {
+                              figureId: duplicatedFigureId,
+                              chartId: duplicatedChartId,
+                              col: fig.col,
+                              row: fig.row,
+                              offset: fig.offset,
+                              size: { width: fig.width, height: fig.height },
+                              definition: newChart.getDefinition(),
+                              sheetId: cmd.sheetIdTo,
+                          });
                       }
                   }
                   break;
               }
               case "DELETE_FIGURE":
-                  this.history.update("charts", cmd.figureId, undefined);
+                  for (const chartId in this.charts) {
+                      if (this.charts[chartId]?.figureId === cmd.figureId) {
+                          this.dispatch("DELETE_CHART", { chartId, sheetId: cmd.sheetId });
+                      }
+                  }
+                  break;
+              case "DELETE_CHART":
+                  if (this.isChartDefined(cmd.chartId)) {
+                      this.history.update("charts", cmd.chartId, undefined);
+                  }
                   break;
               case "DELETE_SHEET":
                   for (const id of this.getChartIds(cmd.sheetId)) {
@@ -60604,31 +61799,37 @@ stores.inject(MyMetaStore, storeInstance);
       // ---------------------------------------------------------------------------
       // Getters
       // ---------------------------------------------------------------------------
-      getContextCreationChart(figureId) {
-          return this.charts[figureId]?.getContextCreation();
+      getContextCreationChart(chartId) {
+          return this.charts[chartId]?.chart.getContextCreation();
       }
-      getChart(figureId) {
-          return this.charts[figureId];
+      getChart(chartId) {
+          return this.charts[chartId]?.chart;
+      }
+      getFigureIdFromChartId(chartId) {
+          if (!this.charts[chartId]) {
+              throw new Error(`Chart with id ${chartId} does not exist.`);
+          }
+          return this.charts[chartId].figureId;
       }
-      getChartType(figureId) {
-          const type = this.charts[figureId]?.type;
+      getChartType(chartId) {
+          const type = this.charts[chartId]?.chart.type;
           if (!type) {
               throw new Error("Chart not defined.");
           }
           return type;
       }
-      isChartDefined(figureId) {
-          return figureId in this.charts && this.charts !== undefined;
+      isChartDefined(chartId) {
+          return chartId in this.charts && this.charts !== undefined;
       }
       getChartIds(sheetId) {
           return Object.entries(this.charts)
-              .filter(([, chart]) => chart?.sheetId === sheetId)
+              .filter(([, chart]) => chart?.chart.sheetId === sheetId)
               .map(([id]) => id);
       }
-      getChartDefinition(figureId) {
-          const definition = this.charts[figureId]?.getDefinition();
+      getChartDefinition(chartId) {
+          const definition = this.charts[chartId]?.chart.getDefinition();
           if (!definition) {
-              throw new Error(`There is no chart with the given figureId: ${figureId}`);
+              throw new Error(`There is no chart with the given id: ${chartId}`);
           }
           return definition;
       }
@@ -60643,7 +61844,16 @@ stores.inject(MyMetaStore, storeInstance);
                       // figure data should be external IMO => chart should be in sheet.chart
                       // instead of in figure.data
                       if (figure.tag === "chart") {
-                          this.charts[figure.id] = this.createChart(figure.id, figure.data, sheet.id);
+                          const chartId = figure.data.chartId;
+                          const chart = this.createChart(figure.id, figure.data, sheet.id);
+                          this.charts[chartId] = { chart, figureId: figure.id };
+                      }
+                      else if (figure.tag === "carousel") {
+                          for (const chartId in figure.data.chartDefinitions || {}) {
+                              const chartDefinition = figure.data.chartDefinitions[chartId];
+                              const chart = this.createChart(figure.id, chartDefinition, sheet.id);
+                              this.charts[chartId] = { chart, figureId: figure.id };
+                          }
                       }
                   }
               }
@@ -60657,13 +61867,23 @@ stores.inject(MyMetaStore, storeInstance);
                   const figures = [];
                   for (const sheetFigure of sheetFigures) {
                       const figure = sheetFigure;
-                      if (figure && figure.tag === "chart") {
-                          const data = this.charts[figure.id]?.getDefinition();
+                      const chartId = Object.keys(this.charts).find((chartId) => this.charts[chartId]?.figureId === sheetFigure.id);
+                      if (figure && figure.tag === "chart" && chartId) {
+                          const data = this.charts[chartId]?.chart.getDefinition();
                           if (data) {
-                              figure.data = data;
+                              figure.data = { ...data, chartId };
                               figures.push(figure);
                           }
                       }
+                      else if (figure && figure.tag === "carousel") {
+                          const chartIds = Object.keys(this.charts).filter((chartId) => this.charts[chartId]?.figureId === sheetFigure.id);
+                          const data = {};
+                          for (const chartId of chartIds) {
+                              data[chartId] = this.charts[chartId]?.chart.getDefinition();
+                          }
+                          figure.data = { chartDefinitions: data };
+                          figures.push(figure);
+                      }
                       else {
                           figures.push(figure);
                       }
@@ -60696,27 +61916,40 @@ stores.inject(MyMetaStore, storeInstance);
        * Add a chart in the local state. If a chart already exists, this chart is
        * replaced
        */
-      addChart(id, definition) {
-          const sheetId = this.getters.getFigureSheetId(id);
+      addChart(figureId, chartId, definition) {
+          const sheetId = this.getters.getFigureSheetId(figureId);
           if (sheetId) {
-              this.history.update("charts", id, this.createChart(id, definition, sheetId));
+              const chart = this.createChart(figureId, definition, sheetId);
+              this.history.update("charts", chartId, { figureId, chart });
           }
       }
       checkChartDuplicate(cmd) {
-          return this.getters.getFigureSheetId(cmd.figureId)
+          return this.isChartDefined(cmd.chartId)
               ? "DuplicatedChartId" /* CommandResult.DuplicatedChartId */
               : "Success" /* CommandResult.Success */;
       }
       checkChartExists(cmd) {
-          return this.isChartDefined(cmd.figureId)
+          return this.isChartDefined(cmd.chartId)
               ? "Success" /* CommandResult.Success */
               : "ChartDoesNotExist" /* CommandResult.ChartDoesNotExist */;
       }
       checkChartChanged(cmd) {
-          return deepEquals(this.getChartDefinition(cmd.figureId), cmd.definition)
+          if (cmd.figureId !== this.charts[cmd.chartId]?.figureId) {
+              return "Success" /* CommandResult.Success */;
+          }
+          return deepEquals(this.getChartDefinition(cmd.chartId), cmd.definition)
               ? "NoChanges" /* CommandResult.NoChanges */
               : "Success" /* CommandResult.Success */;
       }
+      /** If the command would create a new figure, there need to be a position & offset defined in the command */
+      checkFigureArguments(cmd) {
+          if (this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+              return "Success" /* CommandResult.Success */;
+          }
+          return cmd.offset !== undefined && cmd.col !== undefined && cmd.row !== undefined
+              ? "Success" /* CommandResult.Success */
+              : "MissingFigureArguments" /* CommandResult.MissingFigureArguments */;
+      }
   }
 
   // -----------------------------------------------------------------------------
@@ -61570,6 +62803,23 @@ stores.inject(MyMetaStore, storeInstance);
                       this.onRowRemove(cmd.sheetId);
                   }
                   break;
+              case "DUPLICATE_SHEET": {
+                  for (const figureId in this.figures[cmd.sheetId]) {
+                      const fig = this.figures[cmd.sheetId]?.[figureId];
+                      if (!fig) {
+                          continue;
+                      }
+                      const figureIdBase = figureId.split(FIGURE_ID_SPLITTER).pop();
+                      const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
+                      this.dispatch("CREATE_FIGURE", {
+                          figureId: duplicatedFigureId,
+                          ...fig,
+                          size: { width: fig.width, height: fig.height },
+                          sheetId: cmd.sheetIdTo,
+                      });
+                  }
+                  break;
+              }
           }
       }
       onColRemove(sheetId) {
@@ -61681,6 +62931,9 @@ stores.inject(MyMetaStore, storeInstance);
           const figure = { ...this.getFigure(sheetId, figureId), ...update };
           for (const [key, value] of Object.entries(update)) {
               switch (key) {
+                  case "tag":
+                      this.history.update("figures", sheetId, figure.id, key, value);
+                      break;
                   case "offset":
                       this.history.update("figures", sheetId, figure.id, key, value);
                       break;
@@ -62108,7 +63361,9 @@ stores.inject(MyMetaStore, storeInstance);
       handle(cmd) {
           switch (cmd.type) {
               case "CREATE_IMAGE":
-                  this.addFigure(cmd.figureId, cmd.sheetId, cmd.col, cmd.row, cmd.offset, cmd.size);
+                  if (!this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+                      this.addFigure(cmd.figureId, cmd.sheetId, cmd.col, cmd.row, cmd.offset, cmd.size);
+                  }
                   this.history.update("images", cmd.sheetId, cmd.figureId, cmd.definition);
                   this.syncedImages.add(cmd.definition.path);
                   break;
@@ -64246,6 +65501,122 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class CarouselPlugin extends CorePlugin {
+      static getters = ["getCarousel", "doesCarouselExist"];
+      carousels = {};
+      allowDispatch(cmd) {
+          switch (cmd.type) {
+              case "CREATE_CAROUSEL": {
+                  if (this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+                      return "DuplicatedFigureId" /* CommandResult.DuplicatedFigureId */;
+                  }
+                  return "Success" /* CommandResult.Success */;
+              }
+              case "UPDATE_CAROUSEL": {
+                  if (!this.carousels[cmd.sheetId]?.[cmd.figureId]) {
+                      return "InvalidFigureId" /* CommandResult.InvalidFigureId */;
+                  }
+                  return "Success" /* CommandResult.Success */;
+              }
+          }
+          return "Success" /* CommandResult.Success */;
+      }
+      handle(cmd) {
+          switch (cmd.type) {
+              case "CREATE_CAROUSEL":
+                  if (!this.getters.getFigure(cmd.sheetId, cmd.figureId)) {
+                      this.dispatch("CREATE_FIGURE", { ...cmd, tag: "carousel" });
+                  }
+                  this.history.update("carousels", cmd.sheetId, cmd.figureId, cmd.definition);
+                  break;
+              case "UPDATE_CAROUSEL":
+                  this.removeDeletedCharts(cmd, this.getters.getCarousel(cmd.figureId).items);
+                  this.history.update("carousels", cmd.sheetId, cmd.figureId, cmd.definition);
+                  break;
+              case "DUPLICATE_SHEET": {
+                  const sheetFiguresFrom = this.getters.getFigures(cmd.sheetId);
+                  for (const fig of sheetFiguresFrom) {
+                      if (fig.tag === "carousel") {
+                          const figureIdBase = fig.id.split(FIGURE_ID_SPLITTER).pop();
+                          const duplicatedFigureId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${figureIdBase}`;
+                          const carousel = this.getCarousel(fig.id);
+                          if (carousel) {
+                              const size = { width: fig.width, height: fig.height };
+                              this.dispatch("CREATE_CAROUSEL", {
+                                  sheetId: cmd.sheetIdTo,
+                                  figureId: duplicatedFigureId,
+                                  offset: fig.offset,
+                                  col: fig.col,
+                                  row: fig.row,
+                                  size,
+                                  definition: {
+                                      items: carousel.items.map((item) => {
+                                          if (item.type === "carouselDataView") {
+                                              return { type: "carouselDataView" };
+                                          }
+                                          const chartIdBase = item.chartId.split(FIGURE_ID_SPLITTER).pop();
+                                          const newChartId = `${cmd.sheetIdTo}${FIGURE_ID_SPLITTER}${chartIdBase}`;
+                                          return { type: "chart", chartId: newChartId };
+                                      }),
+                                  },
+                              });
+                          }
+                      }
+                  }
+                  break;
+              }
+              case "DELETE_FIGURE":
+                  this.history.update("carousels", cmd.sheetId, cmd.figureId, undefined);
+                  break;
+              case "DELETE_SHEET":
+                  this.history.update("carousels", cmd.sheetId, undefined);
+                  break;
+          }
+      }
+      doesCarouselExist(figureId) {
+          for (const sheetId in this.carousels) {
+              if (this.carousels[sheetId]?.[figureId]) {
+                  return true;
+              }
+          }
+          throw false;
+      }
+      getCarousel(figureId) {
+          for (const sheetId in this.carousels) {
+              if (this.carousels[sheetId]?.[figureId]) {
+                  return this.carousels[sheetId][figureId];
+              }
+          }
+          throw new Error(`There is no carousel with the given figureId: ${figureId}`);
+      }
+      removeDeletedCharts(cmd, oldItems) {
+          const newChartIds = new Set(cmd.definition.items.filter((item) => item.type === "chart").map((item) => item.chartId));
+          for (const item of oldItems) {
+              if (item.type === "chart" && !newChartIds.has(item.chartId)) {
+                  this.dispatch("DELETE_CHART", { chartId: item.chartId, sheetId: cmd.sheetId });
+              }
+          }
+      }
+      import(data) {
+          for (const sheet of data.sheets) {
+              const carousels = (sheet.figures || []).filter((figure) => figure.tag === "carousel");
+              for (const carousel of carousels) {
+                  this.history.update("carousels", sheet.id, carousel.id, { items: carousel.data.items });
+              }
+          }
+      }
+      export(data) {
+          for (const sheet of data.sheets) {
+              const carousels = sheet.figures.filter((figure) => figure.tag === "carousel");
+              for (const carousel of carousels) {
+                  if (this.carousels[sheet.id]?.[carousel.id]) {
+                      carousel.data = { ...carousel.data, ...this.carousels[sheet.id]?.[carousel.id] };
+                  }
+              }
+          }
+      }
+  }
+
   class HeaderGroupingPlugin extends CorePlugin {
       static getters = [
           "getHeaderGroups",
@@ -67201,7 +68572,7 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
               case "UPDATE_CHART":
               case "CREATE_CHART":
-                  this.tryToAddColors(this.getChartColors(cmd.figureId));
+                  this.tryToAddColors(this.getChartColors(cmd.chartId));
                   break;
               case "UPDATE_CELL":
               case "ADD_CONDITIONAL_FORMAT":
@@ -67333,8 +68704,10 @@ stores.inject(MyMetaStore, storeInstance);
           switch (cmd.type) {
               case "UPDATE_CHART":
               case "CREATE_CHART":
-              case "DELETE_FIGURE":
-                  this.charts[cmd.figureId] = undefined;
+                  this.charts[cmd.chartId] = undefined;
+                  break;
+              case "DELETE_CHART":
+                  this.charts[cmd.chartId] = undefined;
                   break;
               case "DELETE_SHEET":
                   for (const chartId in this.charts) {
@@ -67345,15 +68718,15 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
           }
       }
-      getChartRuntime(figureId) {
-          if (!this.charts[figureId]) {
-              const chart = this.getters.getChart(figureId);
+      getChartRuntime(chartId) {
+          if (!this.charts[chartId]) {
+              const chart = this.getters.getChart(chartId);
               if (!chart) {
-                  throw new Error(`No chart for the given id: ${figureId}`);
+                  throw new Error(`No chart for the given id: ${chartId}`);
               }
-              this.charts[figureId] = this.createRuntimeChart(chart);
+              this.charts[chartId] = this.createRuntimeChart(chart);
           }
-          return this.charts[figureId];
+          return this.charts[chartId];
       }
       /**
        * Get the background and textColor of a chart based on the color of the first cell of the main range of the chart.
@@ -67388,8 +68761,14 @@ stores.inject(MyMetaStore, storeInstance);
                   if (!figure || figure.tag !== "chart") {
                       continue;
                   }
-                  const figureId = figure.id;
-                  const figureData = this.getters.getChart(figureId)?.getDefinitionForExcel(this.getters);
+                  const chartId = this.getters
+                      .getChartIds(sheet.id)
+                      .find((chartId) => this.getters.getFigureIdFromChartId(chartId) === figure.id);
+                  if (!chartId) {
+                      continue;
+                  }
+                  const chart = this.getters.getChart(chartId);
+                  const figureData = chart?.getDefinitionForExcel(this.getters);
                   if (figureData) {
                       figures.push({
                           ...figure,
@@ -67397,12 +68776,11 @@ stores.inject(MyMetaStore, storeInstance);
                       });
                   }
                   else {
-                      const chart = this.getters.getChart(figureId);
                       if (!chart) {
                           continue;
                       }
-                      const type = this.getters.getChartType(figureId);
-                      const runtime = this.getters.getChartRuntime(figureId);
+                      const type = this.getters.getChartType(chartId);
+                      const runtime = this.getters.getChartRuntime(chartId);
                       const img = chartToImageUrl(runtime, figure, type);
                       if (img) {
                           sheet.images.push({
@@ -70536,7 +71914,9 @@ stores.inject(MyMetaStore, storeInstance);
   otRegistry.addTransformation("ADD_COLUMNS_ROWS", ["ADD_COLUMNS_ROWS"], addHeadersTransformation);
   otRegistry.addTransformation("REMOVE_COLUMNS_ROWS", ["ADD_COLUMNS_ROWS"], addHeadersTransformation);
   otRegistry.addTransformation("DELETE_SHEET", ["MOVE_RANGES"], transformTargetSheetId);
-  otRegistry.addTransformation("DELETE_FIGURE", ["UPDATE_FIGURE", "UPDATE_CHART"], updateChartFigure);
+  otRegistry.addTransformation("DELETE_FIGURE", ["UPDATE_FIGURE", "UPDATE_CHART", "UPDATE_CAROUSEL"], updateChartFigure);
+  otRegistry.addTransformation("DELETE_CHART", ["UPDATE_CHART"], updateChartOnChartDelete);
+  otRegistry.addTransformation("DELETE_CHART", ["UPDATE_CAROUSEL"], updateCarouselOnChartDelete);
   otRegistry.addTransformation("CREATE_SHEET", ["CREATE_SHEET"], createSheetTransformation);
   otRegistry.addTransformation("ADD_MERGE", ["ADD_MERGE", "REMOVE_MERGE"], mergeTransformation);
   otRegistry.addTransformation("ADD_COLUMNS_ROWS", ["FREEZE_COLUMNS", "FREEZE_ROWS"], freezeTransformation);
@@ -70589,6 +71969,21 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return toTransform;
   }
+  function updateChartOnChartDelete(toTransform, executed) {
+      if (toTransform.chartId === executed.chartId) {
+          return undefined;
+      }
+      return toTransform;
+  }
+  function updateCarouselOnChartDelete(toTransform, executed) {
+      return {
+          ...toTransform,
+          definition: {
+              ...toTransform.definition,
+              items: toTransform.definition.items.filter((item) => !(item.type === "chart" && item.chartId === executed.chartId)),
+          },
+      };
+  }
   function createSheetTransformation(toTransform, executed) {
       if (toTransform.sheetId === executed.sheetId) {
           toTransform = { ...toTransform, sheetId: `${toTransform.sheetId}~` };
@@ -72983,9 +74378,11 @@ stores.inject(MyMetaStore, storeInstance);
 
   const uuidGenerator = new UuidGenerator();
   function repeatCreateChartCommand(getters, cmd) {
+      const id = uuidGenerator.smallUuid();
       return {
           ...repeatSheetDependantCommand(getters, cmd),
-          figureId: uuidGenerator.smallUuid(),
+          figureId: id,
+          chartId: id,
       };
   }
   function repeatCreateImageCommand(getters, cmd) {
@@ -76195,6 +77592,123 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  class CarouselUIPlugin extends UIPlugin {
+      static getters = [
+          "getSelectedCarouselItem",
+          "getChartFromFigureId",
+          "getChartIdFromFigureId",
+      ];
+      uuidGenerator = new UuidGenerator();
+      carouselStates = {};
+      handle(cmd) {
+          switch (cmd.type) {
+              case "ADD_NEW_CHART_TO_CAROUSEL":
+                  this.addNewChartToCarousel(cmd.figureId, cmd.sheetId);
+                  break;
+              case "ADD_FIGURE_CHART_TO_CAROUSEL":
+                  this.addFigureChartToCarousel(cmd.carouselFigureId, cmd.chartFigureId, cmd.sheetId);
+                  break;
+              case "UPDATE_CAROUSEL_ACTIVE_ITEM":
+                  this.carouselStates[cmd.figureId] = cmd.item;
+                  break;
+              case "DELETE_FIGURE":
+                  delete this.carouselStates[cmd.figureId];
+                  break;
+              case "UPDATE_CAROUSEL":
+                  this.fixWrongCarouselState(cmd.figureId);
+                  break;
+              case "DELETE_CHART":
+              case "UNDO":
+              case "REDO":
+              case "DELETE_SHEET":
+                  for (const figureId in this.carouselStates) {
+                      this.fixWrongCarouselState(figureId);
+                  }
+                  break;
+          }
+      }
+      getSelectedCarouselItem(figureId) {
+          const carousel = this.getters.getCarousel(figureId);
+          if (!carousel.items.length) {
+              return undefined;
+          }
+          return this.carouselStates[figureId] ? this.carouselStates[figureId] : carousel.items[0];
+      }
+      getChartFromFigureId(figureId) {
+          const sheetId = this.getters.getFigureSheetId(figureId);
+          if (!sheetId) {
+              return undefined;
+          }
+          const chartId = this.getChartIdFromFigureId(figureId);
+          return chartId ? this.getters.getChart(chartId) : undefined;
+      }
+      getChartIdFromFigureId(figureId) {
+          const sheetId = this.getters.getFigureSheetId(figureId);
+          if (!sheetId) {
+              return undefined;
+          }
+          const figure = this.getters.getFigure(sheetId, figureId);
+          if (!figure || (figure.tag !== "chart" && figure.tag !== "carousel")) {
+              return undefined;
+          }
+          if (figure.tag === "carousel") {
+              const carouselItem = this.getSelectedCarouselItem(figureId);
+              return carouselItem?.type === "chart" ? carouselItem.chartId : undefined;
+          }
+          return this.getters
+              .getChartIds(sheetId)
+              .find((chartId) => this.getters.getFigureIdFromChartId(chartId) === figureId);
+      }
+      fixWrongCarouselState(figureId) {
+          if (!this.getters.doesCarouselExist(figureId)) {
+              delete this.carouselStates[figureId];
+              return;
+          }
+          const carousel = this.getters.getCarousel(figureId);
+          if (!carousel) {
+              delete this.carouselStates[figureId];
+              return;
+          }
+          if (!this.carouselStates[figureId]) {
+              this.carouselStates[figureId] = carousel.items[0];
+          }
+          else if (carousel.items.length === 0) {
+              delete this.carouselStates[figureId];
+          }
+          else if (!carousel.items.some((item) => deepEquals(item, this.carouselStates[figureId]))) {
+              this.carouselStates[figureId] = carousel.items[0];
+          }
+      }
+      addNewChartToCarousel(figureId, sheetId) {
+          const carousel = this.getters.getCarousel(figureId);
+          const chartId = this.uuidGenerator.smallUuid();
+          this.dispatch("CREATE_CHART", {
+              chartId,
+              figureId,
+              sheetId,
+              definition: CAROUSEL_DEFAULT_CHART_DEFINITION,
+          });
+          const definition = { items: [...carousel.items, { type: "chart", chartId }] };
+          this.dispatch("UPDATE_CAROUSEL", { sheetId, figureId, definition });
+      }
+      addFigureChartToCarousel(figureId, chartFigureId, sheetId) {
+          const chartId = this.getChartIdFromFigureId(chartFigureId);
+          if (!chartId) {
+              return;
+          }
+          const carousel = this.getters.getCarousel(figureId);
+          const definition = { items: [...carousel.items, { type: "chart", chartId }] };
+          this.dispatch("UPDATE_CAROUSEL", { sheetId, figureId, definition });
+          this.dispatch("UPDATE_CHART", {
+              sheetId,
+              chartId,
+              figureId,
+              definition: this.getters.getChartDefinition(chartId),
+          });
+          this.dispatch("DELETE_FIGURE", { sheetId, figureId: chartFigureId });
+      }
+  }
+
   class HeaderPositionsUIPlugin extends UIPlugin {
       static getters = ["getColDimensions", "getRowDimensions", "getColRowOffset"];
       headerPositions = {};
@@ -76326,6 +77840,7 @@ stores.inject(MyMetaStore, storeInstance);
       .add("conditional formatting", ConditionalFormatPlugin)
       .add("figures", FigurePlugin)
       .add("chart", ChartPlugin)
+      .add("carousel", CarouselPlugin)
       .add("image", ImagePlugin)
       .add("pivot_core", PivotCorePlugin)
       .add("spreadsheet_pivot_core", SpreadsheetPivotCorePlugin)
@@ -76358,7 +77873,8 @@ stores.inject(MyMetaStore, storeInstance);
       .add("table_computed_style", TableComputedStylePlugin)
       .add("header_positions", HeaderPositionsUIPlugin)
       .add("viewport", SheetViewPlugin)
-      .add("clipboard", ClipboardPlugin);
+      .add("clipboard", ClipboardPlugin)
+      .add("carousel_ui", CarouselUIPlugin);
   // Plugins which have a derived state from core data
   const coreViewsPluginRegistry = new Registry()
       .add("evaluation", EvaluationPlugin)
@@ -77311,6 +78827,10 @@ stores.inject(MyMetaStore, storeInstance);
       .addChild("insert_chart", ["insert"], {
       ...insertChart,
       sequence: 50,
+  })
+      .addChild("insert_carousel", ["insert"], {
+      ...insertCarousel,
+      sequence: 51,
   })
       .addChild("insert_pivot", ["insert"], {
       ...insertPivot,
@@ -78481,9 +80001,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           if (!(xc in clickableCells[sheetId])) {
               const clickableCell = this.findClickableItem(position);
-              if (clickableCell) {
-                  clickableCells[sheetId][xc] = clickableCell;
-              }
+              clickableCells[sheetId][xc] = clickableCell;
           }
           return clickableCells[sheetId][xc];
       }
@@ -80725,6 +82243,7 @@ stores.inject(MyMetaStore, storeInstance);
               loadLocales: this.model.config.external.loadLocales,
               isDashboard: () => this.model.getters.isDashboard(),
               openSidePanel: this.sidePanel.open.bind(this.sidePanel),
+              replaceSidePanel: this.sidePanel.replace.bind(this.sidePanel),
               toggleSidePanel: this.sidePanel.toggle.bind(this.sidePanel),
               clipboard: this.env.clipboard || instantiateClipboard(),
               startCellEdition: (content) => this.composerFocusStore.focusActiveComposer({ content }),
@@ -83693,7 +85212,7 @@ stores.inject(MyMetaStore, storeInstance);
       ];
   }
 
-  function createDrawing(drawingRelIds, sheet, figures) {
+  function createDrawing(drawingRelIds, sheet, figures, construct) {
       const namespaces = [
           ["xmlns:xdr", NAMESPACE.drawing],
           ["xmlns:r", RELATIONSHIP_NSR],
@@ -83704,7 +85223,7 @@ stores.inject(MyMetaStore, storeInstance);
       for (const [figureIndex, figure] of Object.entries(figures)) {
           switch (figure?.tag) {
               case "chart":
-                  figuresNodes.push(createChartDrawing(figure, sheet, drawingRelIds[figureIndex]));
+                  figuresNodes.push(createChartDrawing(figure, sheet, drawingRelIds[figureIndex], construct));
                   break;
               case "image":
                   figuresNodes.push(createImageDrawing(figure, sheet, drawingRelIds[figureIndex]));
@@ -83766,10 +85285,10 @@ stores.inject(MyMetaStore, storeInstance);
           offset: convertDotValueToEMU(offset - currentPosition + FIGURE_BORDER_WIDTH),
       };
   }
-  function createChartDrawing(figure, sheet, chartRelId) {
+  function createChartDrawing(figure, sheet, chartRelId, construct) {
       // position
       const { from, to } = convertFigureData(figure, sheet);
-      const chartId = convertChartId(figure.id);
+      const chartId = convertChartId(figure.id, construct);
       const cNvPrAttrs = [
           ["id", chartId],
           ["name", `Chart ${chartId}`],
@@ -84432,7 +85951,7 @@ stores.inject(MyMetaStore, storeInstance);
           let drawingNode = escapeXml ``;
           const drawingRelIds = [];
           for (const chart of sheet.charts) {
-              const xlsxChartId = convertChartId(chart.id);
+              const xlsxChartId = convertChartId(chart.id, construct);
               const chartRelId = addRelsToFile(construct.relsFiles, `xl/drawings/_rels/drawing${sheetIndex}.xml.rels`, {
                   target: `../charts/chart${xlsxChartId}.xml`,
                   type: XLSX_RELATION_TYPE.chart,
@@ -84466,7 +85985,7 @@ stores.inject(MyMetaStore, storeInstance);
                   target: `../drawings/drawing${sheetIndex}.xml`,
                   type: XLSX_RELATION_TYPE.drawing,
               });
-              files.push(createXMLFile(createDrawing(drawingRelIds, sheet, drawings), `xl/drawings/drawing${sheetIndex}.xml`, "drawing"));
+              files.push(createXMLFile(createDrawing(drawingRelIds, sheet, drawings, construct), `xl/drawings/drawing${sheetIndex}.xml`, "drawing"));
               drawingNode = escapeXml /*xml*/ `<drawing r:id="${drawingRelId}" />`;
           }
           const sheetXml = escapeXml /*xml*/ `
@@ -85367,6 +86886,7 @@ stores.inject(MyMetaStore, storeInstance);
       ChartPanel,
       ChartFigure,
       ChartJsComponent,
+      ZoomableChartJsComponent,
       Grid,
       GridOverlay,
       ScorecardChart,
@@ -85375,6 +86895,7 @@ stores.inject(MyMetaStore, storeInstance);
       PieChartDesignPanel,
       GenericChartConfigPanel,
       ChartWithAxisDesignPanel,
+      GenericZoomableChartDesignPanel,
       LineChartDesignPanel,
       GaugeChartConfigPanel,
       GaugeChartDesignPanel,
@@ -85449,6 +86970,7 @@ stores.inject(MyMetaStore, storeInstance);
       HIGHLIGHT_COLOR,
       PIVOT_TABLE_CONFIG,
       ChartTerms,
+      FIGURE_ID_SPLITTER,
   };
   const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
@@ -85503,9 +87025,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.5.0-alpha.6";
-  __info__.date = "2025-08-05T06:27:49.505Z";
-  __info__.hash = "67e091f";
+  __info__.version = "18.5.0-alpha.8";
+  __info__.date = "2025-08-18T08:17:58.775Z";
+  __info__.hash = "994f1cb";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);