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

package/dist/o-spreadsheet.esm.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
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, useExternalListener, onWillUpdateProps, onWillStart, onWillPatch, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -198,6 +198,7 @@ const CHART_PADDING_BOTTOM = 10;
 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
@@ -413,6 +414,7 @@ const PIVOT_TABLE_CONFIG = {
 };
 const PIVOT_INDENT = 15;
 const PIVOT_COLLAPSE_ICON_SIZE = 12;
+const PIVOT_MAX_NUMBER_OF_CELLS = 1e5;
 const DEFAULT_CURRENCY = {
     symbol: "$",
     position: "before",
@@ -2655,6 +2657,7 @@ const readonlyAllowedCommands = new Set([
     "SET_FORMULA_VISIBILITY",
     "UPDATE_FILTER",
     "UPDATE_CHART",
+    "UPDATE_CAROUSEL_ACTIVE_ITEM",
 ]);
 const coreTypes = new Set([
     /** CELLS */
@@ -2697,6 +2700,8 @@ const coreTypes = new Set([
     "CREATE_FIGURE",
     "DELETE_FIGURE",
     "UPDATE_FIGURE",
+    "CREATE_CAROUSEL",
+    "UPDATE_CAROUSEL",
     /** FORMATTING */
     "SET_FORMATTING",
     "CLEAR_FORMATTING",
@@ -2706,6 +2711,7 @@ const coreTypes = new Set([
     /** CHART */
     "CREATE_CHART",
     "UPDATE_CHART",
+    "DELETE_CHART",
     /** FILTERS */
     "CREATE_TABLE",
     "REMOVE_TABLE",
@@ -2900,6 +2906,7 @@ var CommandResult;
     CommandResult["InvalidColor"] = "InvalidColor";
     CommandResult["InvalidPivotDataSet"] = "InvalidPivotDataSet";
     CommandResult["InvalidPivotCustomField"] = "InvalidPivotCustomField";
+    CommandResult["MissingFigureArguments"] = "MissingFigureArguments";
 })(CommandResult || (CommandResult = {}));
 
 const availableConditionalFormatOperators = new Set([
@@ -9220,7 +9227,7 @@ class ChartClipboardHandler extends AbstractFigureClipboardHandler {
             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}`);
         }
@@ -9256,6 +9263,7 @@ class ChartClipboardHandler extends AbstractFigureClipboardHandler {
         }
         this.dispatch("CREATE_CHART", {
             figureId,
+            chartId: figureId,
             sheetId,
             definition: copy.getDefinition(),
             col,
@@ -19028,6 +19036,211 @@ var logical = /*#__PURE__*/Object.freeze({
   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.
  */
@@ -19638,6 +19851,9 @@ const PIVOT = {
             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) {
@@ -19736,7 +19952,7 @@ const OFFSET = {
             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();
         }
@@ -22019,12 +22235,12 @@ function getPieColors(colors, dataSetsValues) {
     }
     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;
 }
@@ -22996,7 +23212,7 @@ chartJsExtensionRegistry.add("sunburstHoverPlugin", {
 class ChartJsComponent extends Component {
     static template = "o-spreadsheet-ChartJsComponent";
     static props = {
-        figureUI: Object,
+        chartId: String,
         isFullScreen: { type: Boolean, optional: true },
     };
     canvas = useRef("graphContainer");
@@ -23011,7 +23227,7 @@ class ChartJsComponent extends Component {
         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");
         }
@@ -23026,30 +23242,37 @@ class ChartJsComponent extends Component {
             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));
         });
-        onWillUnmount(() => this.chart?.destroy());
+        onWillUnmount(this.unmount.bind(this));
         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);
@@ -23059,9 +23282,10 @@ class ChartJsComponent extends Component {
         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);
@@ -23089,9 +23313,7 @@ class ChartJsComponent extends Component {
         };
     }
     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;
     }
 }
 
@@ -23756,14 +23978,14 @@ class ScorecardChartConfigBuilder {
 class ScorecardChart extends Component {
     static template = "o-spreadsheet-ScorecardChart";
     static props = {
-        figureUI: Object,
+        chartId: String,
     };
     canvas = 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);
     }
@@ -24469,204 +24691,6 @@ const backgroundColorChartJSPlugin = {
     },
 };
 
-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,
@@ -26015,7 +26039,7 @@ function getChartAxis(definition, position, type, options) {
             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));
@@ -26587,6 +26611,7 @@ class BarChart extends AbstractChart {
     axesDesign;
     horizontal;
     showValues;
+    zoomable;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -26600,6 +26625,7 @@ class BarChart extends AbstractChart {
         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);
@@ -26621,6 +26647,7 @@ class BarChart extends AbstractChart {
             axesDesign: context.axesDesign,
             showValues: context.showValues,
             horizontal: context.horizontal,
+            zoomable: context.zoomable,
         };
     }
     getContextCreation() {
@@ -26675,6 +26702,7 @@ class BarChart extends AbstractChart {
             axesDesign: this.axesDesign,
             horizontal: this.horizontal,
             showValues: this.showValues,
+            zoomable: this.horizontal ? undefined : this.zoomable,
         };
     }
     getDefinitionForExcel() {
@@ -26723,6 +26751,621 @@ function createBarChartRuntime(chart, getters) {
     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 = 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",
@@ -27085,13 +27728,13 @@ const ANIMATION_DURATION = 1000;
 class GaugeChartComponent extends Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     static props = {
-        figureUI: Object,
+        chartId: String,
         isFullScreen: { type: Boolean, optional: true },
     };
     canvas = 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()) {
@@ -27139,9 +27782,7 @@ class GaugeChartComponent extends Component {
         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;
     }
 }
 /**
@@ -27198,6 +27839,7 @@ class ComboChart extends AbstractChart {
     type = "combo";
     showValues;
     hideDataMarkers;
+    zoomable;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -27210,6 +27852,7 @@ class ComboChart extends AbstractChart {
         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);
@@ -27259,6 +27902,7 @@ class ComboChart extends AbstractChart {
             axesDesign: this.axesDesign,
             showValues: this.showValues,
             hideDataMarkers: this.hideDataMarkers,
+            zoomable: this.zoomable,
         };
     }
     getDefinitionForExcel() {
@@ -27302,6 +27946,7 @@ class ComboChart extends AbstractChart {
             axesDesign: context.axesDesign,
             showValues: context.showValues,
             hideDataMarkers: context.hideDataMarkers,
+            zoomable: context.zoomable,
         };
     }
     duplicateInDuplicatedSheet(newSheetId) {
@@ -27907,6 +28552,7 @@ class LineChart extends AbstractChart {
     fillArea;
     showValues;
     hideDataMarkers;
+    zoomable;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -27923,6 +28569,7 @@ class LineChart extends AbstractChart {
         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);
@@ -27947,6 +28594,7 @@ class LineChart extends AbstractChart {
             fillArea: context.fillArea,
             showValues: context.showValues,
             hideDataMarkers: context.hideDataMarkers,
+            zoomable: context.zoomable,
         };
     }
     getDefinition() {
@@ -27978,6 +28626,7 @@ class LineChart extends AbstractChart {
             fillArea: this.fillArea,
             showValues: this.showValues,
             hideDataMarkers: this.hideDataMarkers,
+            zoomable: this.zoomable,
         };
     }
     getContextCreation() {
@@ -28500,6 +29149,7 @@ class ScatterChart extends AbstractChart {
     dataSetDesign;
     axesDesign;
     showValues;
+    zoomable;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -28512,6 +29162,7 @@ class ScatterChart extends AbstractChart {
         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);
@@ -28532,6 +29183,7 @@ class ScatterChart extends AbstractChart {
             aggregated: context.aggregated ?? false,
             axesDesign: context.axesDesign,
             showValues: context.showValues,
+            zoomable: context.zoomable,
         };
     }
     getDefinition() {
@@ -28559,6 +29211,7 @@ class ScatterChart extends AbstractChart {
             aggregated: this.aggregated,
             axesDesign: this.axesDesign,
             showValues: this.showValues,
+            zoomable: this.zoomable,
         };
     }
     getContextCreation() {
@@ -28943,6 +29596,7 @@ class WaterfallChart extends AbstractChart {
     dataSetDesign;
     axesDesign;
     showValues;
+    zoomable;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -28961,6 +29615,7 @@ class WaterfallChart extends AbstractChart {
         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);
@@ -28984,6 +29639,7 @@ class WaterfallChart extends AbstractChart {
             firstValueAsSubtotal: context.firstValueAsSubtotal ?? false,
             axesDesign: context.axesDesign,
             showValues: context.showValues,
+            zoomable: context.zoomable ?? false,
         };
     }
     getContextCreation() {
@@ -29043,6 +29699,7 @@ class WaterfallChart extends AbstractChart {
             firstValueAsSubtotal: this.firstValueAsSubtotal,
             axesDesign: this.axesDesign,
             showValues: this.showValues,
+            zoomable: this.zoomable,
         };
     }
     getDefinitionForExcel() {
@@ -29219,14 +29876,14 @@ chartRegistry.add("treemap", {
     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);
@@ -29425,12 +30082,70 @@ chartSubtypeRegistry
     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}`);
@@ -29450,7 +30165,13 @@ function chartRuntimeFactory(getters) {
         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;
 }
@@ -29781,6 +30502,8 @@ function getDefaultXLSXStructure(data) {
     return {
         relsFiles: [],
         sharedStrings: [],
+        chartIds: [],
+        imageIds: [],
         // default Values that will always be part of the style sheet
         styles: [
             {
@@ -29858,6 +30581,10 @@ function escapeQueryNameSpaces(query) {
 }
 
 function getChartMenuActions(figureId, onFigureDeleted, env) {
+    const chartId = env.model.getters.getChartIdFromFigureId(figureId);
+    if (!chartId) {
+        return [];
+    }
     const menuItemSpecs = [
         {
             id: "edit",
@@ -29880,8 +30607,8 @@ function getChartMenuActions(figureId, onFigureDeleted, env) {
             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);
@@ -29901,8 +30628,8 @@ function getChartMenuActions(figureId, onFigureDeleted, env) {
             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");
             },
@@ -29961,6 +30688,35 @@ function getImageMenuActions(figureId, onFigureDeleted, env) {
     ];
     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",
@@ -30009,24 +30765,101 @@ function getDeleteMenuItem(figureId, onFigureDeleted, env) {
     };
 }
 
-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 Component {
+    static template = "o-spreadsheet-CarouselFigure";
+    static props = {
+        figureUI: Object,
+        onFigureDeleted: Function,
+        editFigureStyle: { type: Function, optional: true },
+    };
+    static components = {};
+    setup() {
+        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);
+    }
 }
 
 /**
@@ -30793,9 +31626,9 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
         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;
@@ -30805,7 +31638,7 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
         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 = {
@@ -30815,7 +31648,8 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
         }
         this.model.dispatch("UPDATE_CHART", {
             definition,
-            figureId,
+            chartId,
+            figureId: this.getters.getFigureIdFromChartId(chartId),
             sheetId: this.getters.getActiveSheetId(),
         });
     }
@@ -30836,17 +31670,17 @@ class ChartDashboardMenuStore extends SpreadsheetStore {
 class ChartDashboardMenu extends Component {
     static template = "o-spreadsheet-ChartDashboardMenu";
     static components = { MenuPopover };
-    static props = { figureUI: Object };
+    static props = { chartId: String };
     fullScreenFigureStore;
     store;
     menuState = 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);
-        onWillUpdateProps(({ figureUI }) => {
-            if (figureUI.id !== this.props.figureUI.id) {
-                this.store.reset(figureUI.id);
+        onWillUpdateProps(({ chartId }) => {
+            if (chartId !== this.props.chartId) {
+                this.store.reset(chartId);
             }
         });
     }
@@ -30854,26 +31688,28 @@ class ChartDashboardMenu extends Component {
         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);
                 },
             };
         }
@@ -30882,27 +31718,18 @@ class ChartDashboardMenu extends Component {
             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 Component {
     static template = "o-spreadsheet-ChartFigure";
     static props = {
         figureUI: Object,
         onFigureDeleted: Function,
+        editFigureStyle: { type: Function, optional: true },
     };
     static components = { ChartDashboardMenu };
     onDoubleClick() {
@@ -30910,7 +31737,14 @@ class ChartFigure extends Component {
         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;
@@ -30927,6 +31761,7 @@ class ImageFigure extends Component {
     static props = {
         figureUI: Object,
         onFigureDeleted: Function,
+        editFigureStyle: { type: Function, optional: true },
     };
     static components = {};
     // ---------------------------------------------------------------------------
@@ -30953,6 +31788,10 @@ figureRegistry.add("image", {
     borderWidth: 0,
     menuBuilder: getImageMenuActions,
 });
+figureRegistry.add("carousel", {
+    Component: CarouselFigure,
+    menuBuilder: getCarouselMenuActions,
+});
 
 // -----------------------------------------------------------------------------
 // STYLE
@@ -30979,6 +31818,7 @@ css /*SCSS*/ `
   .o-figure-wrapper {
     position: absolute;
     box-sizing: content-box;
+    pointer-events: auto;
 
     .o-fig-anchor {
       z-index: ${ComponentsImportance.FigureAnchor};
@@ -31037,6 +31877,7 @@ class FigureComponent extends Component {
     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 },
@@ -31049,6 +31890,7 @@ class FigureComponent extends Component {
     };
     menuState = useState({ isOpen: false, anchorRect: null, menuItems: [] });
     figureRef = useRef("figure");
+    figureWrapperRef = useRef("figureWrapper");
     menuButtonRef = useRef("menuButton");
     borderWidth;
     get isSelected() {
@@ -31241,6 +32083,13 @@ class FigureComponent extends Component {
             .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 {
@@ -38773,16 +39622,15 @@ function pushElement(property, propertyList) {
     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;
 }
@@ -41177,6 +42025,8 @@ class XlsxReader {
             sheets: sheets,
             sharedStrings,
             externalBooks,
+            chartIds: [],
+            imageIds: [],
         };
     }
     buildXlsxFileStructure() {
@@ -41854,6 +42704,18 @@ migrationStepRegistry
         }
         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 || []) {
@@ -42107,7 +42969,12 @@ function fixChartDefinitions(data, initialMessages) {
         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;
+                }
             }
         });
     }
@@ -42118,20 +42985,20 @@ function fixChartDefinitions(data, initialMessages) {
                 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);
@@ -42704,6 +43571,7 @@ const CREATE_CHART = (env) => {
     const result = env.model.dispatch("CREATE_CHART", {
         sheetId,
         figureId,
+        chartId: figureId,
         col,
         row,
         offset,
@@ -42715,6 +43583,26 @@ const CREATE_CHART = (env) => {
         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
 //------------------------------------------------------------------------------
@@ -42751,10 +43639,18 @@ const REINSERT_STATIC_PIVOT_CHILDREN = (env) => env.model.getters.getPivotIds().
     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(),
@@ -43966,6 +44862,12 @@ const insertChart = {
     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,
@@ -44086,7 +44988,7 @@ const insertDropdown = {
         env.openSidePanel("DataValidationEditor", {
             rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
             onExit: () => {
-                env.openSidePanel("DataValidation");
+                env.replaceSidePanel("DataValidation", "DataValidationEditor");
             },
         });
     },
@@ -44822,6 +45724,9 @@ class SpreadsheetPivotTable {
             return [row, ...this.rowTreeToRows(node.children, row)];
         });
     }
+    get numberOfCells() {
+        return this.rows.length * this.getNumberOfDataColumns();
+    }
 }
 const EMPTY_PIVOT_CELL = { type: "EMPTY" };
 
@@ -48056,6 +48961,7 @@ class FiguresContainer extends Component {
         horizontalSnap: undefined,
         verticalSnap: undefined,
         cancelDnd: undefined,
+        overlappingCarousel: undefined,
     });
     setup() {
         onMounted(() => {
@@ -48078,6 +48984,7 @@ class FiguresContainer extends Component {
                 this.dnd.draggedFigure = undefined;
                 this.dnd.horizontalSnap = undefined;
                 this.dnd.verticalSnap = undefined;
+                this.dnd.overlappingCarousel = undefined;
                 this.dnd.cancelDnd = undefined;
             }
         });
@@ -48216,26 +49123,46 @@ class FiguresContainer extends Component {
             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);
     }
@@ -48287,6 +49214,7 @@ class FiguresContainer extends Component {
             this.dnd.draggedFigure = undefined;
             this.dnd.horizontalSnap = undefined;
             this.dnd.verticalSnap = undefined;
+            this.dnd.overlappingCarousel = undefined;
         };
         this.dnd.cancelDnd = startDnd(onMouseMove, onMouseUp);
     }
@@ -48303,10 +49231,15 @@ class FiguresContainer extends Component {
         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;
@@ -48353,6 +49286,20 @@ class FiguresContainer extends Component {
             });
         }
     }
+    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 */ `
@@ -51035,6 +51982,226 @@ class Selection extends Component {
     }
 }
 
+function useAutofocus({ refName }) {
+    const ref = useRef(refName);
+    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 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 = useRef("input");
+    setup() {
+        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 Component {
+    static template = "o-spreadsheet-CarouselPanel";
+    static props = { onCloseSidePanel: Function, figureId: String };
+    static components = { TextInput };
+    dragAndDrop = useDragAndDropListItems();
+    previewListRef = useRef("previewList");
+    setup() {
+        let lastCarouselItems = [...this.carouselItems];
+        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 Component {
     static template = "o-spreadsheet.ChartDataSeries";
     static components = { SelectionInput, Section };
@@ -51101,7 +52268,7 @@ class GenericChartConfigPanel extends Component {
         ChartErrorSection,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -51159,7 +52326,7 @@ class GenericChartConfigPanel extends Component {
         ];
     }
     onUpdateDataSetsHaveTitle(dataSetsHaveTitle) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             dataSetsHaveTitle,
         });
     }
@@ -51231,7 +52398,7 @@ class GenericChartConfigPanel extends Component {
             return;
         }
         const labelRange = dataSets.length > 1 ? dataSets.shift().dataRange : "";
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             labelRange,
             dataSets,
         });
@@ -51248,7 +52415,7 @@ class GenericChartConfigPanel extends Component {
             ...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,
         });
     }
@@ -51260,7 +52427,7 @@ class GenericChartConfigPanel extends Component {
             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,
         });
     }
@@ -51273,18 +52440,18 @@ class GenericChartConfigPanel extends Component {
             ...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() {
@@ -51375,12 +52542,12 @@ class GenericChartConfigPanel extends Component {
      */
     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,
         });
     }
@@ -51388,7 +52555,7 @@ class GenericChartConfigPanel extends Component {
         return this.labelRange || "";
     }
     onUpdateAggregated(aggregated) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             aggregated,
         });
     }
@@ -51420,7 +52587,8 @@ class GenericChartConfigPanel extends Component {
         }
         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;
@@ -51480,7 +52648,7 @@ class BarConfigPanel extends GenericChartConfigPanel {
             : this.chartTerms.StackedColumnChart;
     }
     onUpdateStacked(stacked) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             stacked,
         });
     }
@@ -51974,7 +53142,7 @@ class ChartTitle extends Component {
 class AxisDesignEditor extends 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 = useState({ currentAxis: "x" });
     defaultFontSize = CHART_AXIS_TITLE_FONT_SIZE;
     get axisTitleStyle() {
@@ -51999,7 +53167,7 @@ class AxisDesignEditor extends Component {
                 text,
             },
         };
-        this.props.updateChart(this.props.figureId, { axesDesign });
+        this.props.updateChart(this.props.chartId, { axesDesign });
     }
     updateAxisTitleStyle(style) {
         const axesDesign = deepCopy(this.props.definition.axesDesign) ?? {};
@@ -52007,7 +53175,7 @@ class AxisDesignEditor extends Component {
             ...axesDesign[this.state.currentAxis],
             title: style,
         };
-        this.props.updateChart(this.props.figureId, { axesDesign });
+        this.props.updateChart(this.props.chartId, { axesDesign });
     }
 }
 
@@ -52060,7 +53228,7 @@ class GeneralDesignEditor extends Component {
         RadioSelection,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52084,17 +53252,17 @@ class GeneralDesignEditor extends Component {
         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 = "";
     }
 }
@@ -52105,13 +53273,13 @@ class ChartLegend extends Component {
         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,
         });
     }
@@ -52125,7 +53293,7 @@ class SeriesDesignEditor extends Component {
         RoundColorPicker,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52133,7 +53301,7 @@ class SeriesDesignEditor extends Component {
     };
     state = 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 [];
         }
@@ -52152,7 +53320,7 @@ class SeriesDesignEditor extends Component {
             ...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;
@@ -52172,7 +53340,7 @@ class SeriesDesignEditor extends Component {
             ...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;
@@ -52190,7 +53358,7 @@ class SeriesWithAxisDesignEditor extends Component {
         RoundColorPicker,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         canUpdateChart: Function,
         updateChart: Function,
@@ -52206,7 +53374,7 @@ class SeriesWithAxisDesignEditor extends Component {
             ...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;
@@ -52232,7 +53400,7 @@ class SeriesWithAxisDesignEditor extends Component {
                 display,
             },
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
     getTrendLineConfiguration(index) {
         const dataSets = this.props.definition.dataSets;
@@ -52273,7 +53441,7 @@ class SeriesWithAxisDesignEditor extends Component {
         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() {
@@ -52315,7 +53483,7 @@ class SeriesWithAxisDesignEditor extends Component {
                 ...config,
             },
         };
-        this.props.updateChart(this.props.figureId, { dataSets });
+        this.props.updateChart(this.props.chartId, { dataSets });
     }
 }
 
@@ -52325,7 +53493,7 @@ class ChartShowValues extends Component {
         Checkbox,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52345,7 +53513,7 @@ class ChartWithAxisDesignPanel extends Component {
         ChartShowValues,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         canUpdateChart: Function,
         updateChart: Function,
@@ -52369,17 +53537,30 @@ class ChartShowDataMarkers extends Component {
         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,
     };
@@ -52396,7 +53577,7 @@ class ComboChartDesignPanel extends ChartWithAxisDesignPanel {
             ...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;
@@ -52432,7 +53613,7 @@ class FunnelChartConfigPanel extends GenericChartConfigPanel {
         ];
     }
     onUpdateCumulative(cumulative) {
-        this.props.updateChart(this.props.figureId, {
+        this.props.updateChart(this.props.chartId, {
             cumulative,
         });
     }
@@ -52448,13 +53629,13 @@ class FunnelChartDesignPanel extends Component {
         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) => ({
@@ -52464,7 +53645,7 @@ class FunnelChartDesignPanel extends Component {
     }
     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 });
     }
 }
 
@@ -52472,7 +53653,7 @@ class GaugeChartConfigPanel extends Component {
     static template = "o-spreadsheet-GaugeChartConfigPanel";
     static components = { ChartErrorSection, ChartDataSeries };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52490,12 +53671,12 @@ class GaugeChartConfigPanel extends Component {
     }
     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,
         });
     }
@@ -52554,7 +53735,7 @@ class GaugeChartDesignPanel extends Component {
         StandaloneComposer,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -52595,7 +53776,7 @@ class GaugeChartDesignPanel extends Component {
     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) {
@@ -52658,9 +53839,9 @@ class GaugeChartDesignPanel extends Component {
         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;
     }
@@ -52670,13 +53851,13 @@ class GeoChartRegionSelectSection extends Component {
     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();
@@ -52726,14 +53907,14 @@ class GeoChartDesignPanel extends ChartWithAxisDesignPanel {
             : 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"
@@ -52782,7 +53963,7 @@ class HierarchicalChartConfigPanel extends GenericChartConfigPanel {
 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);
         }
@@ -52807,26 +53988,26 @@ class LineConfigPanel extends GenericChartConfigPanel {
         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,
     };
 }
@@ -52854,13 +54035,13 @@ class PieChartDesignPanel extends Component {
         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,
         });
@@ -52881,7 +54062,7 @@ class RadarChartDesignPanel extends Component {
         ChartShowDataMarkers,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         canUpdateChart: Function,
         updateChart: Function,
@@ -52891,14 +54072,14 @@ class RadarChartDesignPanel extends Component {
 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,
         });
     }
@@ -52920,7 +54101,7 @@ class ScorecardChartConfigPanel extends Component {
     static template = "o-spreadsheet-ScorecardChartConfigPanel";
     static components = { SelectionInput, ChartErrorSection, Section };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: Function,
@@ -52946,12 +54127,12 @@ class ScorecardChartConfigPanel extends Component {
     }
     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,
         });
     }
@@ -52960,12 +54141,12 @@ class ScorecardChartConfigPanel extends Component {
     }
     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,
         });
     }
@@ -52973,7 +54154,7 @@ class ScorecardChartConfigPanel extends Component {
         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 });
     }
 }
 
@@ -52988,7 +54169,7 @@ class ScorecardChartDesignPanel extends Component {
         ChartTitle,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -53005,7 +54186,7 @@ class ScorecardChartDesignPanel extends Component {
         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);
@@ -53013,13 +54194,13 @@ class ScorecardChartDesignPanel extends Component {
     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;
         }
     }
@@ -53038,22 +54219,22 @@ class ScorecardChartDesignPanel extends Component {
         };
     }
     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 });
     }
 }
 
@@ -53071,7 +54252,7 @@ class SunburstChartDesignPanel extends Component {
         PieHoleSize,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -53084,18 +54265,18 @@ class SunburstChartDesignPanel extends Component {
         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,
         });
@@ -53109,7 +54290,7 @@ class TreeMapCategoryColors extends Component {
         RoundColorPicker,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         onColorChanged: Function,
     };
@@ -53121,7 +54302,7 @@ class TreeMapCategoryColors extends Component {
         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 || [];
     }
@@ -53142,7 +54323,7 @@ class TreeMapColorScale extends Component {
     static template = "o-spreadsheet-TreeMapColorScale";
     static components = { RoundColorPicker };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         onColorChanged: Function,
     };
@@ -53184,7 +54365,7 @@ class TreeMapChartDesignPanel extends Component {
         TreeMapColorScale,
     };
     static props = {
-        figureId: String,
+        chartId: String,
         definition: Object,
         updateChart: Function,
         canUpdateChart: { type: Function, optional: true },
@@ -53208,15 +54389,15 @@ class TreeMapChartDesignPanel extends Component {
     }
     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 [
@@ -53240,23 +54421,23 @@ class WaterfallChartDesignPanel extends Component {
         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 [
@@ -53277,10 +54458,15 @@ class WaterfallChartDesignPanel extends Component {
             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();
@@ -53291,11 +54477,11 @@ chartSidePanelComponentRegistry
 })
     .add("scatter", {
     configuration: ScatterConfigPanel,
-    design: ChartWithAxisDesignPanel,
+    design: GenericZoomableChartDesignPanel,
 })
     .add("bar", {
     configuration: BarConfigPanel,
-    design: ChartWithAxisDesignPanel,
+    design: GenericZoomableChartDesignPanel,
 })
     .add("combo", {
     configuration: GenericChartConfigPanel,
@@ -53379,7 +54565,7 @@ css /* scss */ `
 class ChartTypePicker extends 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 = useRef("popoverRef");
@@ -53404,14 +54590,14 @@ class ChartTypePicker extends Component {
         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);
@@ -53443,34 +54629,36 @@ class MainChartPanelStore extends SpreadsheetStore {
     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,
         };
     }
@@ -53511,15 +54699,15 @@ css /* scss */ `
 class ChartPanel extends 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);
@@ -53539,45 +54727,49 @@ class ChartPanel extends Component {
         }
         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.");
         }
@@ -53587,8 +54779,8 @@ class ChartPanel extends Component {
         }
         return chartPanel;
     }
-    getChartDefinition(figureId) {
-        return this.env.model.getters.getChartDefinition(figureId);
+    getChartDefinition(chartId) {
+        return this.env.model.getters.getChartDefinition(chartId);
     }
 }
 
@@ -55525,11 +56717,15 @@ class PivotMeasureDisplayPanel extends Component {
         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) => ({
@@ -55590,103 +56786,6 @@ class PivotDeferUpdate extends Component {
     }
 }
 
-function useAutofocus({ refName }) {
-    const ref = useRef(refName);
-    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 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 = useRef("input");
-    setup() {
-        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 Component {
     static template = "o-spreadsheet-PivotCustomGroupsCollapsible";
     static props = {
@@ -56043,7 +57142,7 @@ class PivotMeasureEditor extends Component {
         });
     }
     openShowValuesAs() {
-        this.env.openSidePanel("PivotMeasureDisplayPanel", {
+        this.env.replaceSidePanel("PivotMeasureDisplayPanel", `pivot_key_${this.props.pivotId}`, {
             pivotId: this.props.pivotId,
             measure: this.props.measure,
         });
@@ -56304,7 +57403,7 @@ class PivotLayoutConfigurator extends Component {
         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)) {
@@ -56382,6 +57481,13 @@ class PivotLayoutConfigurator extends Component {
         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 Component {
@@ -56555,6 +57661,7 @@ class PivotSidePanelStore extends SpreadsheetStore {
     draft = null;
     notification = this.get(NotificationStore);
     alreadyNotified = false;
+    alreadyNotifiedForPivotSize = false;
     constructor(get, pivotId) {
         super(get);
         this.pivotId = pivotId;
@@ -56673,6 +57780,16 @@ class PivotSidePanelStore extends SpreadsheetStore {
                     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() {
@@ -57801,11 +58918,12 @@ sidePanelRegistry.add("ChartPanel", {
     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", {
@@ -57886,13 +59004,28 @@ sidePanelRegistry.add("PivotMeasureDisplayPanel", {
         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"];
@@ -57911,6 +59044,7 @@ const MIN_SHEET_VIEW_WIDTH = 150;
 class SidePanelStore extends SpreadsheetStore {
     mutators = [
         "open",
+        "replace",
         "toggle",
         "close",
         "changePanelSize",
@@ -57972,8 +59106,7 @@ class SidePanelStore extends SpreadsheetStore {
         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;
         }
@@ -57992,6 +59125,34 @@ class SidePanelStore extends SpreadsheetStore {
         }
         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) {
@@ -58051,11 +59212,9 @@ class SidePanelStore extends SpreadsheetStore {
         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) {
@@ -58854,7 +60013,7 @@ class FullScreenChart extends Component {
         let lastFigureId = undefined;
         onWillUpdateProps(() => {
             if (lastFigureId !== this.figureUI?.id) {
-                animationStore.enableAnimationForChart(this.figureUI?.id + "-fullscreen");
+                animationStore.enableAnimationForChart(this.chartId + "-fullscreen");
             }
             lastFigureId = this.figureUI?.id;
         });
@@ -58863,6 +60022,11 @@ class FullScreenChart extends Component {
     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);
@@ -58874,9 +60038,9 @@ class FullScreenChart extends Component {
         }
     }
     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}`);
@@ -60535,6 +61699,7 @@ class ChartPlugin extends CorePlugin {
         "getChartType",
         "getChartIds",
         "getChart",
+        "getFigureIdFromChartId",
         "getContextCreationChart",
     ];
     charts = {};
@@ -60542,7 +61707,11 @@ class ChartPlugin extends CorePlugin {
     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);
         }
     }
     // ---------------------------------------------------------------------------
@@ -60551,9 +61720,11 @@ class ChartPlugin extends CorePlugin {
     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 */;
         }
@@ -60561,37 +61732,61 @@ class ChartPlugin extends CorePlugin {
     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)) {
@@ -60603,31 +61798,37 @@ class ChartPlugin extends CorePlugin {
     // ---------------------------------------------------------------------------
     // 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;
     }
@@ -60642,7 +61843,16 @@ class ChartPlugin extends CorePlugin {
                     // 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 };
+                        }
                     }
                 }
             }
@@ -60656,13 +61866,23 @@ class ChartPlugin extends CorePlugin {
                 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);
                     }
@@ -60695,27 +61915,40 @@ class ChartPlugin extends CorePlugin {
      * 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 */;
+    }
 }
 
 // -----------------------------------------------------------------------------
@@ -61569,6 +62802,23 @@ class FigurePlugin extends CorePlugin {
                     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) {
@@ -61680,6 +62930,9 @@ class FigurePlugin extends CorePlugin {
         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;
@@ -62107,7 +63360,9 @@ class ImagePlugin extends CorePlugin {
     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;
@@ -64245,6 +65500,122 @@ class TablePlugin extends CorePlugin {
     }
 }
 
+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",
@@ -67200,7 +68571,7 @@ class CustomColorsPlugin extends CoreViewPlugin {
                 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":
@@ -67332,8 +68703,10 @@ class EvaluationChartPlugin extends CoreViewPlugin {
         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) {
@@ -67344,15 +68717,15 @@ class EvaluationChartPlugin extends CoreViewPlugin {
                 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.
@@ -67387,8 +68760,14 @@ class EvaluationChartPlugin extends CoreViewPlugin {
                 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,
@@ -67396,12 +68775,11 @@ class EvaluationChartPlugin extends CoreViewPlugin {
                     });
                 }
                 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({
@@ -70535,7 +71913,9 @@ const specificRangeTransformRegistry = new SpecificRangeTransformRegistry();
 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);
@@ -70588,6 +71968,21 @@ function updateChartFigure(toTransform, executed) {
     }
     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}~` };
@@ -72982,9 +74377,11 @@ function repeatRangeDependantCommand(getters, command) {
 
 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) {
@@ -76194,6 +77591,123 @@ class SheetViewPlugin extends UIPlugin {
     }
 }
 
+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 = {};
@@ -76325,6 +77839,7 @@ const corePluginRegistry = new Registry()
     .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)
@@ -76357,7 +77872,8 @@ const statefulUIPluginRegistry = new Registry()
     .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)
@@ -77310,6 +78826,10 @@ topbarMenuRegistry
     .addChild("insert_chart", ["insert"], {
     ...insertChart,
     sequence: 50,
+})
+    .addChild("insert_carousel", ["insert"], {
+    ...insertCarousel,
+    sequence: 51,
 })
     .addChild("insert_pivot", ["insert"], {
     ...insertPivot,
@@ -78480,9 +80000,7 @@ class ClickableCellsStore extends SpreadsheetStore {
         }
         if (!(xc in clickableCells[sheetId])) {
             const clickableCell = this.findClickableItem(position);
-            if (clickableCell) {
-                clickableCells[sheetId][xc] = clickableCell;
-            }
+            clickableCells[sheetId][xc] = clickableCell;
         }
         return clickableCells[sheetId][xc];
     }
@@ -80724,6 +82242,7 @@ class Spreadsheet extends Component {
             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 }),
@@ -83692,7 +85211,7 @@ function commonDataValidationAttributes(dvRule) {
     ];
 }
 
-function createDrawing(drawingRelIds, sheet, figures) {
+function createDrawing(drawingRelIds, sheet, figures, construct) {
     const namespaces = [
         ["xmlns:xdr", NAMESPACE.drawing],
         ["xmlns:r", RELATIONSHIP_NSR],
@@ -83703,7 +85222,7 @@ function createDrawing(drawingRelIds, sheet, figures) {
     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]));
@@ -83765,10 +85284,10 @@ function figureCoordinates(headers, anchor, offset) {
         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}`],
@@ -84431,7 +85950,7 @@ function createWorksheets(data, construct) {
         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,
@@ -84465,7 +85984,7 @@ function createWorksheets(data, construct) {
                 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*/ `
@@ -85366,6 +86885,7 @@ const components = {
     ChartPanel,
     ChartFigure,
     ChartJsComponent,
+    ZoomableChartJsComponent,
     Grid,
     GridOverlay,
     ScorecardChart,
@@ -85374,6 +86894,7 @@ const components = {
     PieChartDesignPanel,
     GenericChartConfigPanel,
     ChartWithAxisDesignPanel,
+    GenericZoomableChartDesignPanel,
     LineChartDesignPanel,
     GaugeChartConfigPanel,
     GaugeChartDesignPanel,
@@ -85448,12 +86969,13 @@ const constants = {
     HIGHLIGHT_COLOR,
     PIVOT_TABLE_CONFIG,
     ChartTerms,
+    FIGURE_ID_SPLITTER,
 };
 const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, ClientDisconnectedError, CommandResult, CorePlugin, CoreViewPlugin, DispatchResult, EvaluationError, LocalTransportService, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateChartEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, 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";