@odoo/o-spreadsheet 18.5.0-alpha.7 → 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.7
- * @date 2025-08-08T11:00:44.117Z
- * @hash 1019d55
+ * @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",
@@ -19034,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.
  */
@@ -19644,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) {
@@ -19742,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();
         }
@@ -22025,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;
 }
@@ -23032,29 +23242,36 @@ 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) {
+    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);
@@ -23065,8 +23282,9 @@ class ChartJsComponent extends Component {
         const ctx = canvas.getContext("2d");
         this.chart = new window.Chart(ctx, chartData);
     }
-    updateChartJs(chartData) {
-        if (this.env.model.getters.isDashboard()) {
+    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);
@@ -24473,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,
@@ -26019,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));
@@ -26591,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);
@@ -26604,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);
@@ -26625,6 +26647,7 @@ class BarChart extends AbstractChart {
             axesDesign: context.axesDesign,
             showValues: context.showValues,
             horizontal: context.horizontal,
+            zoomable: context.zoomable,
         };
     }
     getContextCreation() {
@@ -26679,6 +26702,7 @@ class BarChart extends AbstractChart {
             axesDesign: this.axesDesign,
             horizontal: this.horizontal,
             showValues: this.showValues,
+            zoomable: this.horizontal ? undefined : this.zoomable,
         };
     }
     getDefinitionForExcel() {
@@ -26727,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",
@@ -27200,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);
@@ -27212,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);
@@ -27261,6 +27902,7 @@ class ComboChart extends AbstractChart {
             axesDesign: this.axesDesign,
             showValues: this.showValues,
             hideDataMarkers: this.hideDataMarkers,
+            zoomable: this.zoomable,
         };
     }
     getDefinitionForExcel() {
@@ -27304,6 +27946,7 @@ class ComboChart extends AbstractChart {
             axesDesign: context.axesDesign,
             showValues: context.showValues,
             hideDataMarkers: context.hideDataMarkers,
+            zoomable: context.zoomable,
         };
     }
     duplicateInDuplicatedSheet(newSheetId) {
@@ -27909,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);
@@ -27925,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);
@@ -27949,6 +28594,7 @@ class LineChart extends AbstractChart {
             fillArea: context.fillArea,
             showValues: context.showValues,
             hideDataMarkers: context.hideDataMarkers,
+            zoomable: context.zoomable,
         };
     }
     getDefinition() {
@@ -27980,6 +28626,7 @@ class LineChart extends AbstractChart {
             fillArea: this.fillArea,
             showValues: this.showValues,
             hideDataMarkers: this.hideDataMarkers,
+            zoomable: this.zoomable,
         };
     }
     getContextCreation() {
@@ -28502,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);
@@ -28514,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);
@@ -28534,6 +29183,7 @@ class ScatterChart extends AbstractChart {
             aggregated: context.aggregated ?? false,
             axesDesign: context.axesDesign,
             showValues: context.showValues,
+            zoomable: context.zoomable,
         };
     }
     getDefinition() {
@@ -28561,6 +29211,7 @@ class ScatterChart extends AbstractChart {
             aggregated: this.aggregated,
             axesDesign: this.axesDesign,
             showValues: this.showValues,
+            zoomable: this.zoomable,
         };
     }
     getContextCreation() {
@@ -28945,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);
@@ -28963,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);
@@ -28986,6 +29639,7 @@ class WaterfallChart extends AbstractChart {
             firstValueAsSubtotal: context.firstValueAsSubtotal ?? false,
             axesDesign: context.axesDesign,
             showValues: context.showValues,
+            zoomable: context.zoomable ?? false,
         };
     }
     getContextCreation() {
@@ -29045,6 +29699,7 @@ class WaterfallChart extends AbstractChart {
             firstValueAsSubtotal: this.firstValueAsSubtotal,
             axesDesign: this.axesDesign,
             showValues: this.showValues,
+            zoomable: this.zoomable,
         };
     }
     getDefinitionForExcel() {
@@ -29221,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);
@@ -29427,6 +30082,64 @@ 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
  */
@@ -29452,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;
 }
@@ -30143,26 +30862,6 @@ class CarouselFigure extends Component {
     }
 }
 
-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 };
-        }
-    }
-}
-
 /**
  * Repeatedly calls a callback function with a time delay between calls.
  */
@@ -31025,16 +31724,6 @@ class ChartDashboardMenu extends Component {
     }
 }
 
-// -----------------------------------------------------------------------------
-// STYLE
-// -----------------------------------------------------------------------------
-css /* scss */ `
-  .o-chart-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-`;
 class ChartFigure extends Component {
     static template = "o-spreadsheet-ChartFigure";
     static props = {
@@ -42950,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(),
@@ -44291,7 +44988,7 @@ const insertDropdown = {
         env.openSidePanel("DataValidationEditor", {
             rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
             onExit: () => {
-                env.openSidePanel("DataValidation");
+                env.replaceSidePanel("DataValidation", "DataValidationEditor");
             },
         });
     },
@@ -45027,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" };
 
@@ -52844,10 +53544,23 @@ class ChartShowDataMarkers extends Component {
     };
 }
 
-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,
     };
@@ -53291,10 +54004,10 @@ class LineConfigPanel extends GenericChartConfigPanel {
     }
 }
 
-class LineChartDesignPanel extends ChartWithAxisDesignPanel {
+class LineChartDesignPanel extends GenericZoomableChartDesignPanel {
     static template = "o-spreadsheet-LineChartDesignPanel";
     static components = {
-        ...ChartWithAxisDesignPanel.components,
+        ...GenericZoomableChartDesignPanel.components,
         ChartShowDataMarkers,
     };
 }
@@ -53749,6 +54462,11 @@ class WaterfallChartDesignPanel extends Component {
             verticalAxisPosition: value,
         });
     }
+    onToggleZoom(zoomable) {
+        this.props.updateChart(this.props.chartId, {
+            zoomable,
+        });
+    }
 }
 
 const chartSidePanelComponentRegistry = new Registry();
@@ -53759,11 +54477,11 @@ chartSidePanelComponentRegistry
 })
     .add("scatter", {
     configuration: ScatterConfigPanel,
-    design: ChartWithAxisDesignPanel,
+    design: GenericZoomableChartDesignPanel,
 })
     .add("bar", {
     configuration: BarConfigPanel,
-    design: ChartWithAxisDesignPanel,
+    design: GenericZoomableChartDesignPanel,
 })
     .add("combo", {
     configuration: GenericChartConfigPanel,
@@ -55999,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) => ({
@@ -56420,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,
         });
@@ -56681,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)) {
@@ -56759,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 {
@@ -56932,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;
@@ -57050,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() {
@@ -58264,7 +59004,11 @@ 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 };
@@ -58300,6 +59044,7 @@ const MIN_SHEET_VIEW_WIDTH = 150;
 class SidePanelStore extends SpreadsheetStore {
     mutators = [
         "open",
+        "replace",
         "toggle",
         "close",
         "changePanelSize",
@@ -58361,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;
         }
@@ -58381,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) {
@@ -58440,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) {
@@ -79230,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];
     }
@@ -81474,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 }),
@@ -86116,6 +86885,7 @@ const components = {
     ChartPanel,
     ChartFigure,
     ChartJsComponent,
+    ZoomableChartJsComponent,
     Grid,
     GridOverlay,
     ScorecardChart,
@@ -86124,6 +86894,7 @@ const components = {
     PieChartDesignPanel,
     GenericChartConfigPanel,
     ChartWithAxisDesignPanel,
+    GenericZoomableChartDesignPanel,
     LineChartDesignPanel,
     GaugeChartConfigPanel,
     GaugeChartDesignPanel,
@@ -86205,6 +86976,6 @@ 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.7";
-__info__.date = "2025-08-08T11:00:44.117Z";
-__info__.hash = "1019d55";
+__info__.version = "18.5.0-alpha.8";
+__info__.date = "2025-08-18T08:17:58.775Z";
+__info__.hash = "994f1cb";