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

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.5.0-alpha.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
  */
 
 (function (exports, owl) {
@@ -199,6 +199,7 @@
   const CHART_PADDING_TOP = 15;
   const CHART_TITLE_FONT_SIZE = 16;
   const CHART_AXIS_TITLE_FONT_SIZE = 12;
+  const MASTER_CHART_HEIGHT = 60;
   const SCORECARD_CHART_TITLE_FONT_SIZE = 14;
   const PIVOT_TOKEN_COLOR = "#F28C28";
   // Color picker defaults as upper case HEX to match `toHex`helper
@@ -414,6 +415,7 @@
   };
   const PIVOT_INDENT = 15;
   const PIVOT_COLLAPSE_ICON_SIZE = 12;
+  const PIVOT_MAX_NUMBER_OF_CELLS = 1e5;
   const DEFAULT_CURRENCY = {
       symbol: "$",
       position: "before",
@@ -19035,6 +19037,211 @@ stores.inject(MyMetaStore, storeInstance);
     XOR: XOR
   });
 
+  const CfTerms = {
+      Errors: {
+          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
+          ["FirstArgMissing" /* CommandResult.FirstArgMissing */]: _t("The argument is missing. Please provide a value"),
+          ["SecondArgMissing" /* CommandResult.SecondArgMissing */]: _t("The second argument is missing. Please provide a value"),
+          ["MinNaN" /* CommandResult.MinNaN */]: _t("The minpoint must be a number"),
+          ["MidNaN" /* CommandResult.MidNaN */]: _t("The midpoint must be a number"),
+          ["MaxNaN" /* CommandResult.MaxNaN */]: _t("The maxpoint must be a number"),
+          ["ValueUpperInflectionNaN" /* CommandResult.ValueUpperInflectionNaN */]: _t("The first value must be a number"),
+          ["ValueLowerInflectionNaN" /* CommandResult.ValueLowerInflectionNaN */]: _t("The second value must be a number"),
+          ["MinBiggerThanMax" /* CommandResult.MinBiggerThanMax */]: _t("Minimum must be smaller then Maximum"),
+          ["MinBiggerThanMid" /* CommandResult.MinBiggerThanMid */]: _t("Minimum must be smaller then Midpoint"),
+          ["MidBiggerThanMax" /* CommandResult.MidBiggerThanMax */]: _t("Midpoint must be smaller then Maximum"),
+          ["LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */]: _t("Lower inflection point must be smaller than upper inflection point"),
+          ["MinInvalidFormula" /* CommandResult.MinInvalidFormula */]: _t("Invalid Minpoint formula"),
+          ["MaxInvalidFormula" /* CommandResult.MaxInvalidFormula */]: _t("Invalid Maxpoint formula"),
+          ["MidInvalidFormula" /* CommandResult.MidInvalidFormula */]: _t("Invalid Midpoint formula"),
+          ["ValueUpperInvalidFormula" /* CommandResult.ValueUpperInvalidFormula */]: _t("Invalid upper inflection point formula"),
+          ["ValueLowerInvalidFormula" /* CommandResult.ValueLowerInvalidFormula */]: _t("Invalid lower inflection point formula"),
+          ["EmptyRange" /* CommandResult.EmptyRange */]: _t("A range needs to be defined"),
+          ["ValueCellIsInvalidFormula" /* CommandResult.ValueCellIsInvalidFormula */]: _t("At least one of the provided values is an invalid formula"),
+          Unexpected: _t("The rule is invalid for an unknown reason"),
+      },
+      ColorScale: _t("Color scale"),
+      IconSet: _t("Icon set"),
+      DataBar: _t("Data bar"),
+  };
+  const ChartTerms = {
+      Series: _t("Series"),
+      BackgroundColor: _t("Background color"),
+      StackedBarChart: _t("Stacked bar chart"),
+      StackedLineChart: _t("Stacked line chart"),
+      StackedAreaChart: _t("Stacked area chart"),
+      StackedColumnChart: _t("Stacked column chart"),
+      CumulativeData: _t("Cumulative data"),
+      TreatLabelsAsText: _t("Treat labels as text"),
+      AggregatedChart: _t("Aggregate"),
+      Errors: {
+          Unexpected: _t("The chart definition is invalid for an unknown reason"),
+          // BASIC CHART ERRORS (LINE | BAR | PIE)
+          ["InvalidDataSet" /* CommandResult.InvalidDataSet */]: _t("The dataset is invalid"),
+          ["InvalidLabelRange" /* CommandResult.InvalidLabelRange */]: _t("Labels are invalid"),
+          // SCORECARD CHART ERRORS
+          ["InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */]: _t("The key value is invalid"),
+          ["InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */]: _t("The baseline value is invalid"),
+          // GAUGE CHART ERRORS
+          ["InvalidGaugeDataRange" /* CommandResult.InvalidGaugeDataRange */]: _t("The data range is invalid"),
+          ["EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */]: _t("A minimum range limit value is needed"),
+          ["GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */]: _t("The minimum range limit value must be a number"),
+          ["EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */]: _t("A maximum range limit value is needed"),
+          ["GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */]: _t("The maximum range limit value must be a number"),
+          ["GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */]: _t("The lower inflection point value must be a number"),
+          ["GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */]: _t("The upper inflection point value must be a number"),
+      },
+      GeoChart: {
+          ColorScales: {
+              blues: _t("Blues"),
+              cividis: _t("Cividis"),
+              greens: _t("Greens"),
+              greys: _t("Greys"),
+              oranges: _t("Oranges"),
+              purples: _t("Purples"),
+              rainbow: _t("Rainbow"),
+              reds: _t("Reds"),
+              viridis: _t("Viridis"),
+          },
+      },
+  };
+  const CustomCurrencyTerms = {
+      Custom: _t("Custom"),
+  };
+  const MergeErrorMessage = _t("Merged cells are preventing this operation. Unmerge those cells and try again.");
+  const SplitToColumnsTerms = {
+      Errors: {
+          Unexpected: _t("Cannot split the selection for an unknown reason"),
+          ["NoSplitSeparatorInSelection" /* CommandResult.NoSplitSeparatorInSelection */]: _t("There is no match for the selected separator in the selection"),
+          ["MoreThanOneColumnSelected" /* CommandResult.MoreThanOneColumnSelected */]: _t("Only a selection from a single column can be split"),
+          ["SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */]: _t("Splitting will overwrite existing content"),
+      },
+  };
+  const RemoveDuplicateTerms = {
+      Errors: {
+          Unexpected: _t("Cannot remove duplicates for an unknown reason"),
+          ["MoreThanOneRangeSelected" /* CommandResult.MoreThanOneRangeSelected */]: _t("Please select only one range of cells"),
+          ["EmptyTarget" /* CommandResult.EmptyTarget */]: _t("Please select a range of cells containing values."),
+          ["NoColumnsProvided" /* CommandResult.NoColumnsProvided */]: _t("Please select at latest one column to analyze."),
+          //TODO: Remove it when accept to copy and paste merge cells
+          ["WillRemoveExistingMerge" /* CommandResult.WillRemoveExistingMerge */]: _t("This operation is not possible due to a merge. Please remove the merges first than try again."),
+      },
+  };
+  const DVTerms = {
+      DateIs: {
+          today: _t("today"),
+          yesterday: _t("yesterday"),
+          tomorrow: _t("tomorrow"),
+          lastWeek: _t("in the past week"),
+          lastMonth: _t("in the past month"),
+          lastYear: _t("in the past year"),
+      },
+      DateIsBefore: {
+          today: _t("today"),
+          yesterday: _t("yesterday"),
+          tomorrow: _t("tomorrow"),
+          lastWeek: _t("one week ago"),
+          lastMonth: _t("one month ago"),
+          lastYear: _t("one year ago"),
+      },
+      CriterionError: {
+          notEmptyValue: _t("The value must not be empty"),
+          numberValue: _t("The value must be a number"),
+          dateValue: _t("The value must be a date"),
+          validRange: _t("The value must be a valid range"),
+          validFormula: _t("The formula must be valid"),
+      },
+      Errors: {
+          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid."),
+          ["InvalidDataValidationCriterionValue" /* CommandResult.InvalidDataValidationCriterionValue */]: _t("One or more of the provided criteria values are invalid. Please review and correct them."),
+          ["InvalidNumberOfCriterionValues" /* CommandResult.InvalidNumberOfCriterionValues */]: _t("One or more of the provided criteria values are missing."),
+          Unexpected: _t("The rule is invalid for an unknown reason."),
+      },
+  };
+  const TableTerms = {
+      Errors: {
+          Unexpected: _t("The table zone is invalid for an unknown reason"),
+          ["TableOverlap" /* CommandResult.TableOverlap */]: _t("You cannot create overlapping tables."),
+          ["NonContinuousTargets" /* CommandResult.NonContinuousTargets */]: _t("A table can only be created on a continuous selection."),
+          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
+          ["TargetOutOfSheet" /* CommandResult.TargetOutOfSheet */]: _t("The range is out of the sheet"),
+      },
+      Checkboxes: {
+          hasFilters: _t("Filter button"),
+          headerRow: _t("Header row(s)"),
+          bandedRows: _t("Banded rows"),
+          firstColumn: _t("First column"),
+          lastColumn: _t("Last column"),
+          bandedColumns: _t("Banded columns"),
+          automaticAutofill: _t("Automatically autofill formulas"),
+          totalRow: _t("Total row"),
+          isDynamic: _t("Auto-adjust to formula result"),
+      },
+      Tooltips: {
+          filterWithoutHeader: _t("Cannot have filters without a header row"),
+          isDynamic: _t("For tables based on array formulas only"),
+      },
+  };
+  const measureDisplayTerms = {
+      labels: {
+          no_calculations: _t("No calculations"),
+          "%_of_grand_total": _t("% of grand total"),
+          "%_of_col_total": _t("% of column total"),
+          "%_of_row_total": _t("% of row total"),
+          "%_of": _t("% of"),
+          "%_of_parent_row_total": _t("% of parent row total"),
+          "%_of_parent_col_total": _t("% of parent column total"),
+          "%_of_parent_total": _t("% of parent total"),
+          difference_from: _t("Difference from"),
+          "%_difference_from": _t("% difference from"),
+          running_total: _t("Running total"),
+          "%_running_total": _t("% Running total"),
+          rank_asc: _t("Rank smallest to largest"),
+          rank_desc: _t("Rank largest to smallest"),
+          index: _t("Index"),
+      },
+      descriptions: {
+          "%_of_grand_total": () => _t("Displayed as % of grand total"),
+          "%_of_col_total": () => _t("Displayed as % of column total"),
+          "%_of_row_total": () => _t("Displayed as % of row total"),
+          "%_of": (field) => _t('Displayed as % of "%s"', field),
+          "%_of_parent_row_total": (field) => _t('Displayed as % of parent row total of "%s"', field),
+          "%_of_parent_col_total": () => _t("Displayed as % of parent column total"),
+          "%_of_parent_total": (field) => _t('Displayed as % of parent "%s" total', field),
+          difference_from: (field) => _t('Displayed as difference from "%s"', field),
+          "%_difference_from": (field) => _t('Displayed as % difference from "%s"', field),
+          running_total: (field) => _t('Displayed as running total based on "%s"', field),
+          "%_running_total": (field) => _t('Displayed as % running total based on "%s"', field),
+          rank_asc: (field) => _t('Displayed as rank from smallest to largest based on "%s"', field),
+          rank_desc: (field) => _t('Displayed as rank largest to smallest based on "%s"', field),
+          index: () => _t("Displayed as index"),
+      },
+      documentation: {
+          no_calculations: _t("Displays the value that is entered in the field."),
+          "%_of_grand_total": _t("Displays values as a percentage of the grand total of all the values or data points in the report."),
+          "%_of_col_total": _t("Displays all the values in each column or series as a percentage of the total for the column or series."),
+          "%_of_row_total": _t("Displays the value in each row or category as a percentage of the total for the row or category."),
+          "%_of": _t("Displays values as a percentage of the value of the Base item in the Base field."),
+          "%_of_parent_row_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on rows)"),
+          "%_of_parent_col_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on columns)"),
+          "%_of_parent_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item of the selected Base field)"),
+          difference_from: _t("Displays values as the difference from the value of the Base item in the Base field."),
+          "%_difference_from": _t("Displays values as the percentage difference from the value of the Base item in the Base field."),
+          running_total: _t("Displays the value for successive items in the Base field as a running total."),
+          "%_running_total": _t("Calculates the value as a percentage for successive items in the Base field that are displayed as a running total."),
+          rank_asc: _t("Displays the rank of selected values in a specific field, listing the smallest item in the field as 1, and each larger value with a higher rank value."),
+          rank_desc: _t("Displays the rank of selected values in a specific field, listing the largest item in the field as 1, and each smaller value with a higher rank value."),
+          index: _t("Calculates values as follows:\n((value in cell) x (Grand Total of Grand Totals)) / ((Grand Row Total) x (Grand Column Total))"),
+      },
+  };
+  function getPivotTooBigErrorMessage(numberOfCells, locale) {
+      const formattedNumber = formatValue(numberOfCells, {
+          format: "0,00",
+          locale: locale,
+      });
+      return _t("Oops—this pivot table is quite large (%s cells). Try simplifying it using the side panel.", formattedNumber);
+  }
+
   /**
    * Get the pivot ID from the formula pivot ID.
    */
@@ -19645,6 +19852,9 @@ stores.inject(MyMetaStore, storeInstance);
               return error;
           }
           const table = pivot.getCollapsedTableStructure();
+          if (table.numberOfCells > PIVOT_MAX_NUMBER_OF_CELLS) {
+              return new EvaluationError(getPivotTooBigErrorMessage(table.numberOfCells, this.locale));
+          }
           const cells = table.getPivotCells(visibilityOptions);
           let headerRows = 0;
           if (visibilityOptions.displayColumnHeaders) {
@@ -19743,7 +19953,7 @@ stores.inject(MyMetaStore, storeInstance);
               right: startingCol + offsetWidth - 1,
               bottom: startingRow + offsetHeight - 1,
           };
-          const range = this.getters.getRangeFromZone(this.__originSheetId, dependencyZone);
+          const range = this.getters.getRangeFromZone(sheetId, dependencyZone);
           if (range.invalidXc || range.invalidSheetName) {
               return new InvalidReferenceError();
           }
@@ -22026,12 +22236,12 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return pieColors;
   }
-  function truncateLabel(label) {
+  function truncateLabel(label, maxLen = MAX_CHAR_LABEL) {
       if (!label) {
           return "";
       }
-      if (label.length > MAX_CHAR_LABEL) {
-          return label.substring(0, MAX_CHAR_LABEL) + "…";
+      if (label.length > maxLen) {
+          return label.substring(0, maxLen) + "…";
       }
       return label;
   }
@@ -23033,29 +23243,36 @@ stores.inject(MyMetaStore, storeInstance);
               const runtime = this.chartRuntime;
               this.currentRuntime = runtime;
               // Note: chartJS modify the runtime in place, so it's important to give it a copy
-              this.createChart(deepCopy(runtime.chartJsConfig));
+              this.createChart(deepCopy(runtime));
           });
-          owl.onWillUnmount(() => this.chart?.destroy());
+          owl.onWillUnmount(this.unmount.bind(this));
           owl.useEffect(() => {
               const runtime = this.chartRuntime;
               if (runtime !== this.currentRuntime) {
                   if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
                       this.chart?.destroy();
-                      this.createChart(deepCopy(runtime.chartJsConfig));
+                      this.createChart(deepCopy(runtime));
                   }
                   else {
-                      this.updateChartJs(deepCopy(runtime.chartJsConfig));
+                      this.updateChartJs(deepCopy(runtime));
                   }
                   this.currentRuntime = runtime;
               }
               else if (this.currentDevicePixelRatio !== window.devicePixelRatio) {
                   this.currentDevicePixelRatio = window.devicePixelRatio;
-                  this.updateChartJs(deepCopy(this.currentRuntime.chartJsConfig));
+                  this.updateChartJs(deepCopy(this.currentRuntime));
               }
           });
       }
-      createChart(chartData) {
-          if (this.env.model.getters.isDashboard() && this.animationStore) {
+      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);
@@ -23066,8 +23283,9 @@ stores.inject(MyMetaStore, storeInstance);
           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);
@@ -24474,204 +24692,6 @@ stores.inject(MyMetaStore, storeInstance);
       },
   };
 
-  const CfTerms = {
-      Errors: {
-          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
-          ["FirstArgMissing" /* CommandResult.FirstArgMissing */]: _t("The argument is missing. Please provide a value"),
-          ["SecondArgMissing" /* CommandResult.SecondArgMissing */]: _t("The second argument is missing. Please provide a value"),
-          ["MinNaN" /* CommandResult.MinNaN */]: _t("The minpoint must be a number"),
-          ["MidNaN" /* CommandResult.MidNaN */]: _t("The midpoint must be a number"),
-          ["MaxNaN" /* CommandResult.MaxNaN */]: _t("The maxpoint must be a number"),
-          ["ValueUpperInflectionNaN" /* CommandResult.ValueUpperInflectionNaN */]: _t("The first value must be a number"),
-          ["ValueLowerInflectionNaN" /* CommandResult.ValueLowerInflectionNaN */]: _t("The second value must be a number"),
-          ["MinBiggerThanMax" /* CommandResult.MinBiggerThanMax */]: _t("Minimum must be smaller then Maximum"),
-          ["MinBiggerThanMid" /* CommandResult.MinBiggerThanMid */]: _t("Minimum must be smaller then Midpoint"),
-          ["MidBiggerThanMax" /* CommandResult.MidBiggerThanMax */]: _t("Midpoint must be smaller then Maximum"),
-          ["LowerBiggerThanUpper" /* CommandResult.LowerBiggerThanUpper */]: _t("Lower inflection point must be smaller than upper inflection point"),
-          ["MinInvalidFormula" /* CommandResult.MinInvalidFormula */]: _t("Invalid Minpoint formula"),
-          ["MaxInvalidFormula" /* CommandResult.MaxInvalidFormula */]: _t("Invalid Maxpoint formula"),
-          ["MidInvalidFormula" /* CommandResult.MidInvalidFormula */]: _t("Invalid Midpoint formula"),
-          ["ValueUpperInvalidFormula" /* CommandResult.ValueUpperInvalidFormula */]: _t("Invalid upper inflection point formula"),
-          ["ValueLowerInvalidFormula" /* CommandResult.ValueLowerInvalidFormula */]: _t("Invalid lower inflection point formula"),
-          ["EmptyRange" /* CommandResult.EmptyRange */]: _t("A range needs to be defined"),
-          ["ValueCellIsInvalidFormula" /* CommandResult.ValueCellIsInvalidFormula */]: _t("At least one of the provided values is an invalid formula"),
-          Unexpected: _t("The rule is invalid for an unknown reason"),
-      },
-      ColorScale: _t("Color scale"),
-      IconSet: _t("Icon set"),
-      DataBar: _t("Data bar"),
-  };
-  const ChartTerms = {
-      Series: _t("Series"),
-      BackgroundColor: _t("Background color"),
-      StackedBarChart: _t("Stacked bar chart"),
-      StackedLineChart: _t("Stacked line chart"),
-      StackedAreaChart: _t("Stacked area chart"),
-      StackedColumnChart: _t("Stacked column chart"),
-      CumulativeData: _t("Cumulative data"),
-      TreatLabelsAsText: _t("Treat labels as text"),
-      AggregatedChart: _t("Aggregate"),
-      Errors: {
-          Unexpected: _t("The chart definition is invalid for an unknown reason"),
-          // BASIC CHART ERRORS (LINE | BAR | PIE)
-          ["InvalidDataSet" /* CommandResult.InvalidDataSet */]: _t("The dataset is invalid"),
-          ["InvalidLabelRange" /* CommandResult.InvalidLabelRange */]: _t("Labels are invalid"),
-          // SCORECARD CHART ERRORS
-          ["InvalidScorecardKeyValue" /* CommandResult.InvalidScorecardKeyValue */]: _t("The key value is invalid"),
-          ["InvalidScorecardBaseline" /* CommandResult.InvalidScorecardBaseline */]: _t("The baseline value is invalid"),
-          // GAUGE CHART ERRORS
-          ["InvalidGaugeDataRange" /* CommandResult.InvalidGaugeDataRange */]: _t("The data range is invalid"),
-          ["EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */]: _t("A minimum range limit value is needed"),
-          ["GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */]: _t("The minimum range limit value must be a number"),
-          ["EmptyGaugeRangeMax" /* CommandResult.EmptyGaugeRangeMax */]: _t("A maximum range limit value is needed"),
-          ["GaugeRangeMaxNaN" /* CommandResult.GaugeRangeMaxNaN */]: _t("The maximum range limit value must be a number"),
-          ["GaugeLowerInflectionPointNaN" /* CommandResult.GaugeLowerInflectionPointNaN */]: _t("The lower inflection point value must be a number"),
-          ["GaugeUpperInflectionPointNaN" /* CommandResult.GaugeUpperInflectionPointNaN */]: _t("The upper inflection point value must be a number"),
-      },
-      GeoChart: {
-          ColorScales: {
-              blues: _t("Blues"),
-              cividis: _t("Cividis"),
-              greens: _t("Greens"),
-              greys: _t("Greys"),
-              oranges: _t("Oranges"),
-              purples: _t("Purples"),
-              rainbow: _t("Rainbow"),
-              reds: _t("Reds"),
-              viridis: _t("Viridis"),
-          },
-      },
-  };
-  const CustomCurrencyTerms = {
-      Custom: _t("Custom"),
-  };
-  const MergeErrorMessage = _t("Merged cells are preventing this operation. Unmerge those cells and try again.");
-  const SplitToColumnsTerms = {
-      Errors: {
-          Unexpected: _t("Cannot split the selection for an unknown reason"),
-          ["NoSplitSeparatorInSelection" /* CommandResult.NoSplitSeparatorInSelection */]: _t("There is no match for the selected separator in the selection"),
-          ["MoreThanOneColumnSelected" /* CommandResult.MoreThanOneColumnSelected */]: _t("Only a selection from a single column can be split"),
-          ["SplitWillOverwriteContent" /* CommandResult.SplitWillOverwriteContent */]: _t("Splitting will overwrite existing content"),
-      },
-  };
-  const RemoveDuplicateTerms = {
-      Errors: {
-          Unexpected: _t("Cannot remove duplicates for an unknown reason"),
-          ["MoreThanOneRangeSelected" /* CommandResult.MoreThanOneRangeSelected */]: _t("Please select only one range of cells"),
-          ["EmptyTarget" /* CommandResult.EmptyTarget */]: _t("Please select a range of cells containing values."),
-          ["NoColumnsProvided" /* CommandResult.NoColumnsProvided */]: _t("Please select at latest one column to analyze."),
-          //TODO: Remove it when accept to copy and paste merge cells
-          ["WillRemoveExistingMerge" /* CommandResult.WillRemoveExistingMerge */]: _t("This operation is not possible due to a merge. Please remove the merges first than try again."),
-      },
-  };
-  const DVTerms = {
-      DateIs: {
-          today: _t("today"),
-          yesterday: _t("yesterday"),
-          tomorrow: _t("tomorrow"),
-          lastWeek: _t("in the past week"),
-          lastMonth: _t("in the past month"),
-          lastYear: _t("in the past year"),
-      },
-      DateIsBefore: {
-          today: _t("today"),
-          yesterday: _t("yesterday"),
-          tomorrow: _t("tomorrow"),
-          lastWeek: _t("one week ago"),
-          lastMonth: _t("one month ago"),
-          lastYear: _t("one year ago"),
-      },
-      CriterionError: {
-          notEmptyValue: _t("The value must not be empty"),
-          numberValue: _t("The value must be a number"),
-          dateValue: _t("The value must be a date"),
-          validRange: _t("The value must be a valid range"),
-          validFormula: _t("The formula must be valid"),
-      },
-      Errors: {
-          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid."),
-          ["InvalidDataValidationCriterionValue" /* CommandResult.InvalidDataValidationCriterionValue */]: _t("One or more of the provided criteria values are invalid. Please review and correct them."),
-          ["InvalidNumberOfCriterionValues" /* CommandResult.InvalidNumberOfCriterionValues */]: _t("One or more of the provided criteria values are missing."),
-          Unexpected: _t("The rule is invalid for an unknown reason."),
-      },
-  };
-  const TableTerms = {
-      Errors: {
-          Unexpected: _t("The table zone is invalid for an unknown reason"),
-          ["TableOverlap" /* CommandResult.TableOverlap */]: _t("You cannot create overlapping tables."),
-          ["NonContinuousTargets" /* CommandResult.NonContinuousTargets */]: _t("A table can only be created on a continuous selection."),
-          ["InvalidRange" /* CommandResult.InvalidRange */]: _t("The range is invalid"),
-          ["TargetOutOfSheet" /* CommandResult.TargetOutOfSheet */]: _t("The range is out of the sheet"),
-      },
-      Checkboxes: {
-          hasFilters: _t("Filter button"),
-          headerRow: _t("Header row(s)"),
-          bandedRows: _t("Banded rows"),
-          firstColumn: _t("First column"),
-          lastColumn: _t("Last column"),
-          bandedColumns: _t("Banded columns"),
-          automaticAutofill: _t("Automatically autofill formulas"),
-          totalRow: _t("Total row"),
-          isDynamic: _t("Auto-adjust to formula result"),
-      },
-      Tooltips: {
-          filterWithoutHeader: _t("Cannot have filters without a header row"),
-          isDynamic: _t("For tables based on array formulas only"),
-      },
-  };
-  const measureDisplayTerms = {
-      labels: {
-          no_calculations: _t("No calculations"),
-          "%_of_grand_total": _t("% of grand total"),
-          "%_of_col_total": _t("% of column total"),
-          "%_of_row_total": _t("% of row total"),
-          "%_of": _t("% of"),
-          "%_of_parent_row_total": _t("% of parent row total"),
-          "%_of_parent_col_total": _t("% of parent column total"),
-          "%_of_parent_total": _t("% of parent total"),
-          difference_from: _t("Difference from"),
-          "%_difference_from": _t("% difference from"),
-          running_total: _t("Running total"),
-          "%_running_total": _t("% Running total"),
-          rank_asc: _t("Rank smallest to largest"),
-          rank_desc: _t("Rank largest to smallest"),
-          index: _t("Index"),
-      },
-      descriptions: {
-          "%_of_grand_total": () => _t("Displayed as % of grand total"),
-          "%_of_col_total": () => _t("Displayed as % of column total"),
-          "%_of_row_total": () => _t("Displayed as % of row total"),
-          "%_of": (field) => _t('Displayed as % of "%s"', field),
-          "%_of_parent_row_total": (field) => _t('Displayed as % of parent row total of "%s"', field),
-          "%_of_parent_col_total": () => _t("Displayed as % of parent column total"),
-          "%_of_parent_total": (field) => _t('Displayed as % of parent "%s" total', field),
-          difference_from: (field) => _t('Displayed as difference from "%s"', field),
-          "%_difference_from": (field) => _t('Displayed as % difference from "%s"', field),
-          running_total: (field) => _t('Displayed as running total based on "%s"', field),
-          "%_running_total": (field) => _t('Displayed as % running total based on "%s"', field),
-          rank_asc: (field) => _t('Displayed as rank from smallest to largest based on "%s"', field),
-          rank_desc: (field) => _t('Displayed as rank largest to smallest based on "%s"', field),
-          index: () => _t("Displayed as index"),
-      },
-      documentation: {
-          no_calculations: _t("Displays the value that is entered in the field."),
-          "%_of_grand_total": _t("Displays values as a percentage of the grand total of all the values or data points in the report."),
-          "%_of_col_total": _t("Displays all the values in each column or series as a percentage of the total for the column or series."),
-          "%_of_row_total": _t("Displays the value in each row or category as a percentage of the total for the row or category."),
-          "%_of": _t("Displays values as a percentage of the value of the Base item in the Base field."),
-          "%_of_parent_row_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on rows)"),
-          "%_of_parent_col_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item on columns)"),
-          "%_of_parent_total": _t("Calculates values as follows:\n(value for the item) / (value for the parent item of the selected Base field)"),
-          difference_from: _t("Displays values as the difference from the value of the Base item in the Base field."),
-          "%_difference_from": _t("Displays values as the percentage difference from the value of the Base item in the Base field."),
-          running_total: _t("Displays the value for successive items in the Base field as a running total."),
-          "%_running_total": _t("Calculates the value as a percentage for successive items in the Base field that are displayed as a running total."),
-          rank_asc: _t("Displays the rank of selected values in a specific field, listing the smallest item in the field as 1, and each larger value with a higher rank value."),
-          rank_desc: _t("Displays the rank of selected values in a specific field, listing the largest item in the field as 1, and each smaller value with a higher rank value."),
-          index: _t("Calculates values as follows:\n((value in cell) x (Grand Total of Grand Totals)) / ((Grand Row Total) x (Grand Column Total))"),
-      },
-  };
-
   const UNIT_LENGTH = {
       second: 1000,
       minute: 1000 * 60,
@@ -26020,7 +26040,7 @@ stores.inject(MyMetaStore, storeInstance);
               ticks: {
                   padding: 5,
                   color: fontColor,
-                  callback: function (tickValue) {
+                  callback: function (tickValue, index, ticks) {
                       // Category axis callback's internal tick value is the index of the label
                       // https://www.chartjs.org/docs/latest/axes/labelling.html#creating-custom-tick-formats
                       return truncateLabel(this.getLabelForValue(tickValue));
@@ -26592,6 +26612,7 @@ stores.inject(MyMetaStore, storeInstance);
       axesDesign;
       horizontal;
       showValues;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -26605,6 +26626,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.axesDesign = definition.axesDesign;
           this.horizontal = definition.horizontal;
           this.showValues = definition.showValues;
+          this.zoomable = definition.zoomable;
       }
       static transformDefinition(chartSheetId, definition, applyChange) {
           return transformChartDefinitionWithDataSetsWithZone(chartSheetId, definition, applyChange);
@@ -26626,6 +26648,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: context.axesDesign,
               showValues: context.showValues,
               horizontal: context.horizontal,
+              zoomable: context.zoomable,
           };
       }
       getContextCreation() {
@@ -26680,6 +26703,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: this.axesDesign,
               horizontal: this.horizontal,
               showValues: this.showValues,
+              zoomable: this.horizontal ? undefined : this.zoomable,
           };
       }
       getDefinitionForExcel() {
@@ -26728,6 +26752,621 @@ stores.inject(MyMetaStore, storeInstance);
       return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
   }
 
+  class FullScreenChartStore extends SpreadsheetStore {
+      mutators = ["toggleFullScreenChart"];
+      fullScreenFigure = undefined;
+      toggleFullScreenChart(figureId) {
+          if (this.fullScreenFigure?.id === figureId) {
+              this.fullScreenFigure = undefined;
+          }
+          else {
+              this.makeFullScreen(figureId);
+          }
+      }
+      makeFullScreen(figureId) {
+          const sheetId = this.getters.getActiveSheetId();
+          const figure = this.getters.getFigure(sheetId, figureId);
+          if (figure) {
+              this.fullScreenFigure = { ...figure, x: 0, y: 0, width: 0, height: 0 };
+          }
+      }
+  }
+
+  const TREND_LINE_AXES_IDS = [TREND_LINE_XAXIS_ID, MOVING_AVERAGE_TREND_LINE_XAXIS_ID];
+  const ZOOMABLE_AXIS_IDS = ["x", ...TREND_LINE_AXES_IDS];
+  class ZoomableChartStore extends SpreadsheetStore {
+      mutators = [
+          "resetAxisLimits",
+          "updateAxisLimits",
+          "updateTrendLineConfiguration",
+          "clearAxisLimits",
+      ];
+      originalAxisLimits = {};
+      currentAxesLimits = {};
+      idConversion = {};
+      handle(cmd) {
+          switch (cmd.type) {
+              case "DELETE_FIGURE":
+                  if (cmd.figureId && this.idConversion[cmd.figureId]) {
+                      for (const chartId of this.idConversion[cmd.figureId]) {
+                          delete this.originalAxisLimits[chartId];
+                          delete this.currentAxesLimits[chartId];
+                      }
+                  }
+                  break;
+              case "UPDATE_CHART":
+                  const type = cmd.definition.type;
+                  const chartId = `${type}-${cmd.figureId}`;
+                  if (!this.idConversion[cmd.figureId]) {
+                      this.idConversion[cmd.figureId] = new Set();
+                  }
+                  this.idConversion[cmd.figureId].add(chartId);
+                  if (!("zoomable" in cmd.definition && cmd.definition.zoomable)) {
+                      this.clearAxisLimits(chartId);
+                  }
+                  break;
+          }
+      }
+      clearAxisLimits(chartId) {
+          delete this.originalAxisLimits[chartId];
+          delete this.currentAxesLimits[chartId];
+          return "noStateChange";
+      }
+      resetAxisLimits(chartId, limits) {
+          for (const axisId of ZOOMABLE_AXIS_IDS) {
+              if (limits?.[axisId]) {
+                  if (!this.originalAxisLimits[chartId]?.[axisId]) {
+                      this.originalAxisLimits[chartId] = {
+                          ...this.originalAxisLimits[chartId],
+                          [axisId]: {},
+                      };
+                  }
+                  this.originalAxisLimits[chartId][axisId]["min"] = limits[axisId].min;
+                  this.originalAxisLimits[chartId][axisId]["max"] = limits[axisId].max;
+              }
+              else {
+                  if (this.originalAxisLimits[chartId]?.[axisId]) {
+                      delete this.originalAxisLimits[chartId][axisId];
+                  }
+              }
+          }
+          return "noStateChange";
+      }
+      updateAxisLimits(chartId, limits) {
+          if (limits === undefined) {
+              delete this.currentAxesLimits[chartId];
+              return "noStateChange";
+          }
+          let { min, max } = limits;
+          if (min > max) {
+              [min, max] = [max, min];
+          }
+          this.currentAxesLimits[chartId] = { x: { min, max } };
+          return "noStateChange";
+      }
+      /* Update the trend line axis configuration based on the current axis limits.
+       * This function calculates the new limits for the trend line axes based on the current x-axis
+       * limits and the original limits of the trend line axes.
+       * It assumes that the origininal trend line axes are linear transformations of the original x-axis
+       * limits and applies the same transformation to the current x-axis limits to get the new limits
+       * for the current trend line axes.
+       */
+      updateTrendLineConfiguration(chartId) {
+          if (!this.originalAxisLimits[chartId]) {
+              return "noStateChange";
+          }
+          const chartLimits = this.originalAxisLimits[chartId].x;
+          if (chartLimits === undefined) {
+              return "noStateChange";
+          }
+          for (const axisId of TREND_LINE_AXES_IDS) {
+              if (!this.originalAxisLimits[chartId][axisId]) {
+                  continue;
+              }
+              if (!this.currentAxesLimits[chartId]?.[axisId]) {
+                  this.currentAxesLimits[chartId] = {
+                      ...this.currentAxesLimits[chartId],
+                      [axisId]: {},
+                  };
+              }
+              if (this.currentAxesLimits[chartId]?.x === undefined) {
+                  return "noStateChange";
+              }
+              const realRange = chartLimits.max - chartLimits.min;
+              const trendingLimits = this.originalAxisLimits[chartId][axisId];
+              const trendingRange = trendingLimits.max - trendingLimits.min;
+              const slope = trendingRange / realRange;
+              const intercept = trendingLimits.min - chartLimits.min * slope;
+              const newXMin = this.currentAxesLimits[chartId].x.min;
+              const newXMax = this.currentAxesLimits[chartId].x.max;
+              this.currentAxesLimits[chartId][axisId].min = newXMin * slope + intercept;
+              this.currentAxesLimits[chartId][axisId].max = newXMax * slope + intercept;
+          }
+          return "noStateChange";
+      }
+  }
+
+  const zoomWindowPlugin = {
+      id: "zoomWindowPlugin",
+      afterDatasetsDraw: function (chart, args, options) {
+          if (!options.getLowerBound || !options.getUpperBound) {
+              return;
+          }
+          const { ctx, chartArea: { left, right, top, bottom }, } = chart;
+          let lowerBound = options.getLowerBound() ?? left;
+          let upperBound = options.getUpperBound() ?? right;
+          if (lowerBound > upperBound) {
+              [lowerBound, upperBound] = [upperBound, lowerBound];
+          }
+          lowerBound = Math.max(left, lowerBound);
+          upperBound = Math.min(right, upperBound);
+          if (lowerBound === left) {
+              lowerBound -= 1;
+          }
+          if (upperBound === right) {
+              upperBound += 1;
+          }
+          ctx.save();
+          ctx.fillStyle = "rgba(255,255,255,0.5)";
+          ctx.beginPath();
+          ctx.rect(left, bottom, lowerBound - left, top - bottom);
+          ctx.rect(upperBound, bottom, right - upperBound, top - bottom);
+          ctx.fill();
+          ctx.beginPath();
+          ctx.strokeStyle = "#bbb";
+          ctx.rect(lowerBound, bottom, upperBound - lowerBound, top - bottom);
+          ctx.stroke();
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.moveTo(lowerBound - 3, (top + bottom) / 2 - 7);
+          ctx.lineTo(lowerBound - 3, (top + bottom) / 2 + 7);
+          ctx.stroke();
+          ctx.beginPath();
+          ctx.moveTo(upperBound + 3, (top + bottom) / 2 - 7);
+          ctx.lineTo(upperBound + 3, (top + bottom) / 2 + 7);
+          ctx.stroke();
+          ctx.restore();
+      },
+  };
+
+  css /* scss */ `
+  .o-spreadsheet {
+    .o-master-chart-container {
+      height: ${MASTER_CHART_HEIGHT}px;
+    }
+  }
+`;
+  chartJsExtensionRegistry.add("zoomWindowPlugin", {
+      register: (Chart) => Chart.register(zoomWindowPlugin),
+      unregister: (Chart) => Chart.unregister(zoomWindowPlugin),
+  });
+  class ZoomableChartJsComponent extends ChartJsComponent {
+      static template = "o-spreadsheet-ZoomableChartJsComponent";
+      store;
+      fullScreenChartStore;
+      masterChartCanvas = owl.useRef("masterChartCanvas");
+      masterChart;
+      mode;
+      hasLinearScale;
+      isBarChart;
+      chartId = "";
+      datasetBoundaries = { xMin: 0, xMax: 0 };
+      removeEventListeners = () => { };
+      setup() {
+          this.store = useStore(ZoomableChartStore);
+          this.fullScreenChartStore = useStore(FullScreenChartStore);
+          super.setup();
+      }
+      unmount() {
+          super.unmount();
+          this.masterChart?.destroy();
+          this.removeEventListeners();
+      }
+      get containerStyle() {
+          const height = this.sliceable ? `calc(100% - ${MASTER_CHART_HEIGHT}px)` : "100%";
+          return `
+      height:${height};
+    `;
+      }
+      get sliceable() {
+          if (this.env.isDashboard()) {
+              const fullScreenFigureId = this.fullScreenChartStore.fullScreenFigure?.id;
+              const chartFigureId = this.env.model.getters.getFigureIdFromChartId(this.props.chartId);
+              if (fullScreenFigureId === chartFigureId) {
+                  return true;
+              }
+          }
+          const definition = this.env.model.getters.getChartDefinition(this.props.chartId);
+          return ("zoomable" in definition && definition?.zoomable) ?? false;
+      }
+      get axisOffset() {
+          return !this.hasLinearScale && this.isBarChart ? 0.5 : 0;
+      }
+      getMasterChartConfiguration(chartData) {
+          const config = chartData;
+          return {
+              ...config,
+              options: {
+                  ...config.options,
+                  plugins: {
+                      ...config.options.plugins,
+                      zoomWindowPlugin: {
+                          getLowerBound: () => this.lowerBound,
+                          getUpperBound: () => this.upperBound,
+                      },
+                  },
+              },
+          };
+      }
+      getDetailChartConfiguration(chartData) {
+          if (!this.sliceable) {
+              return chartData;
+          }
+          const xAxis = this.store.currentAxesLimits[this.chartId]?.x;
+          const xScale = {
+              ...chartData.options.scales?.x,
+          };
+          if (xAxis?.min !== undefined) {
+              xScale.min = this.hasLinearScale ? xAxis.min : Math.ceil(xAxis.min) - this.axisOffset;
+          }
+          if (xAxis?.max !== undefined) {
+              xScale.max = this.hasLinearScale ? xAxis.max : Math.floor(xAxis.max) - this.axisOffset;
+          }
+          return {
+              ...chartData,
+              options: {
+                  ...chartData.options,
+                  scales: {
+                      ...chartData.options.scales,
+                      x: xScale,
+                  },
+                  layout: {
+                      ...chartData.options.layout,
+                      padding: {
+                          ...chartData.options.layout?.padding,
+                          bottom: 5,
+                      },
+                  },
+              },
+          };
+      }
+      getAxisLimitsFromDataset(chartData) {
+          const data = chartData.data.datasets.map((ds) => ds.data).flat();
+          const xValues = data.map((d, i) => (typeof d === "object" && d !== null ? d.x : i));
+          const xMin = Math.min(...xValues);
+          const xMax = Math.max(...xValues);
+          return { xMin, xMax };
+      }
+      get shouldAnimate() {
+          return this.env.model.getters.isDashboard() && !this.sliceable;
+      }
+      createChart(chartRuntime) {
+          const chartData = chartRuntime.chartJsConfig;
+          this.isBarChart = chartData.type === "bar";
+          this.chartId = `${chartData.type}-${this.props.chartId}`;
+          this.datasetBoundaries = this.getAxisLimitsFromDataset(chartData);
+          if (this.sliceable) {
+              const updatedData = this.getDetailChartConfiguration(chartData);
+              chartRuntime.chartJsConfig = updatedData;
+          }
+          super.createChart(chartRuntime);
+          this.hasLinearScale = this.chart?.scales?.x.type === "linear";
+          if (!this.sliceable || !("masterChartConfig" in chartRuntime)) {
+              return;
+          }
+          this.masterChart?.destroy();
+          const masterChartCtx = this.masterChartCanvas.el.getContext("2d");
+          this.masterChart = new window.Chart(masterChartCtx, this.getMasterChartConfiguration(chartRuntime["masterChartConfig"]));
+          this.resetAxesLimits();
+      }
+      updateChartJs(chartRuntime) {
+          const chartData = chartRuntime.chartJsConfig;
+          const newDatasetBoundaries = this.getAxisLimitsFromDataset(chartData);
+          if (this.datasetBoundaries.xMin !== newDatasetBoundaries.xMin ||
+              this.datasetBoundaries.xMax !== newDatasetBoundaries.xMax) {
+              this.store.clearAxisLimits(this.chartId);
+              this.datasetBoundaries = newDatasetBoundaries;
+          }
+          this.isBarChart = chartData?.type === "bar";
+          this.chartId = `${chartData.type}-${this.props.chartId}`;
+          if (this.sliceable) {
+              const updatedData = this.getDetailChartConfiguration(chartData);
+              chartRuntime.chartJsConfig = updatedData;
+          }
+          super.updateChartJs(chartRuntime);
+          this.hasLinearScale = this.chart?.scales?.x.type === "linear";
+          if (!this.sliceable || !("masterChartConfig" in chartRuntime)) {
+              this.masterChart = undefined;
+          }
+          else {
+              const masterChartConfig = this.getMasterChartConfiguration(chartRuntime["masterChartConfig"]);
+              if (!this.masterChart) {
+                  const masterChartCtx = this.masterChartCanvas.el.getContext("2d");
+                  this.masterChart = new window.Chart(masterChartCtx, masterChartConfig);
+              }
+              else {
+                  this.masterChart.data = masterChartConfig.data;
+                  this.masterChart.config.options = masterChartConfig.options;
+                  this.masterChart.update();
+              }
+          }
+          this.resetAxesLimits();
+      }
+      resetAxesLimits() {
+          if (!this.chart) {
+              return;
+          }
+          const previousAxisLimits = this.store.originalAxisLimits[this.chartId];
+          if (previousAxisLimits?.x?.min === undefined && previousAxisLimits?.x?.max === undefined) {
+              let scales = this.masterChart
+                  ? this.masterChart.scales
+                  : this.chart.scales;
+              if (!this.hasLinearScale && scales?.x) {
+                  scales = {
+                      ...scales,
+                      x: {
+                          min: Math.ceil(scales.x.min) - this.axisOffset,
+                          max: Math.floor(scales.x.max) + this.axisOffset,
+                      },
+                  };
+              }
+              this.store.resetAxisLimits(this.chartId, scales);
+              return;
+          }
+          this.updateTrendingLineAxes();
+          this.chart.update();
+          if (!this.masterChart) {
+              return;
+          }
+          this.masterChart.update();
+      }
+      updateTrendingLineAxes() {
+          this.store.updateTrendLineConfiguration(this.chartId);
+          const config = this.store.currentAxesLimits[this.chartId];
+          for (const axisId of [TREND_LINE_XAXIS_ID, MOVING_AVERAGE_TREND_LINE_XAXIS_ID]) {
+              if (!this.chart?.config.options?.scales?.[axisId] || !config?.[axisId]) {
+                  continue;
+              }
+              this.chart.config.options.scales[axisId].min = config[axisId].min;
+              this.chart.config.options.scales[axisId].max = config[axisId].max;
+          }
+      }
+      get upperBound() {
+          return this.computePosition(this.store.currentAxesLimits[this.chartId]?.x?.max);
+      }
+      get lowerBound() {
+          return this.computePosition(this.store.currentAxesLimits[this.chartId]?.x?.min);
+      }
+      computePosition(value) {
+          if (value === undefined || !this.masterChart?.scales?.x) {
+              return undefined;
+          }
+          const scale = this.masterChart.scales.x;
+          if (this.hasLinearScale) {
+              return scale.getPixelForValue(value);
+          }
+          if (!this.masterChart.chartArea) {
+              return undefined;
+          }
+          const { left, right } = this.masterChart.chartArea;
+          const { min, max } = scale;
+          const offset = this.axisOffset;
+          return left + ((right - left) * (offset + value - min)) / (2 * offset + max - min);
+      }
+      computeCoordinate(position) {
+          if (!this.masterChart) {
+              return undefined;
+          }
+          const scale = this.masterChart.scales.x;
+          if (this.hasLinearScale) {
+              const value = scale.getValueForPixel(position);
+              if (value === undefined) {
+                  return undefined;
+              }
+              return Math.round(value * 100) / 100;
+          }
+          const { left, right } = this.masterChart.chartArea;
+          const offset = this.axisOffset;
+          return (scale.min -
+              offset +
+              ((scale.max + 2 * offset - scale.min) * (position - left)) / (right - left));
+      }
+      updateAxisLimits(xMin, xMax) {
+          if (!this.hasLinearScale) {
+              this.chart.config.options.scales.x.min = Math.ceil(xMin);
+              this.chart.config.options.scales.x.max = Math.floor(xMax);
+          }
+          else {
+              this.chart.config.options.scales.x.min = xMin;
+              this.chart.config.options.scales.x.max = xMax;
+          }
+          this.store.updateAxisLimits(this.chartId, { min: xMin, max: xMax });
+          this.updateTrendingLineAxes();
+          this.masterChart?.update();
+          this.chart?.update();
+      }
+      onPointerDownInMasterChart(ev) {
+          this.removeEventListeners();
+          const position = ev.offsetX;
+          if (!this.masterChart?.chartArea || !this.chart?.scales.x) {
+              return;
+          }
+          const { left, right, top, bottom } = this.masterChart.chartArea;
+          const xMax = this.upperBound ?? right;
+          const xMin = this.lowerBound ?? left;
+          if (position < left - 5 || position > right + 5 || ev.offsetY < top || ev.offsetY > bottom) {
+              return;
+          }
+          ev.preventDefault();
+          ev.stopPropagation();
+          let startingPositionOnChart, windowSize, startX;
+          const startingEventPosition = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+          if ((xMin !== left || xMax !== right) && position > xMin + 5 && position < xMax - 5) {
+              startingPositionOnChart = ev.offsetX - xMin;
+              this.mode = "moveInMaster";
+              const currentLimits = this.store.currentAxesLimits[this.chartId]?.x;
+              windowSize =
+                  (currentLimits?.max ?? this.chart.scales.x.max) -
+                      (currentLimits?.min ?? this.chart.scales.x.min);
+          }
+          else {
+              this.mode = "selectInMaster";
+              if (Math.abs(position - xMin) < 5) {
+                  startingPositionOnChart = xMax;
+              }
+              else if (Math.abs(position - xMax) < 5) {
+                  startingPositionOnChart = xMin;
+              }
+              else {
+                  startingPositionOnChart = clip(position, left, right);
+              }
+              startX = this.computeCoordinate(startingPositionOnChart);
+          }
+          const originalXMin = this.store.originalAxisLimits[this.chartId].x.min;
+          const originalXMax = this.store.originalAxisLimits[this.chartId].x.max;
+          const computeNewAxisLimits = (position) => {
+              let xMin, xMax;
+              const { left, right } = this.masterChart.chartArea;
+              if (this.mode === "moveInMaster") {
+                  xMin = this.computeCoordinate(position - startingPositionOnChart);
+                  if (xMin < originalXMin) {
+                      xMin = originalXMin;
+                  }
+                  else if (xMin > originalXMax - windowSize) {
+                      xMin = originalXMax - windowSize;
+                  }
+                  xMax = xMin + windowSize;
+              }
+              else if (this.mode === "selectInMaster") {
+                  const upperBound = clip(position, left, right);
+                  if (Math.abs(startingPositionOnChart - upperBound) > 5) {
+                      const endX = this.computeCoordinate(upperBound);
+                      if (startX === undefined || endX === undefined) {
+                          return {};
+                      }
+                      xMin = Math.min(startX, endX);
+                      xMax = Math.max(startX, endX);
+                  }
+              }
+              return { min: xMin, max: xMax };
+          };
+          const onDragFromMasterChart = (ev) => {
+              const position = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+              if (Math.abs(position - startingEventPosition) < 5) {
+                  return;
+              }
+              const { min: xMin, max: xMax } = computeNewAxisLimits(position);
+              if (xMin !== undefined && xMax !== undefined) {
+                  this.updateAxisLimits(xMin, xMax);
+              }
+          };
+          const onPointerUpInMasterChart = (ev) => {
+              this.removeEventListeners();
+              const position = ev.clientX - (this.masterChartCanvas.el?.getBoundingClientRect().left ?? 0);
+              if (Math.abs(position - startingEventPosition) > 5) {
+                  let { min: xMin, max: xMax } = computeNewAxisLimits(position);
+                  if (xMin !== undefined && xMax !== undefined) {
+                      if (!this.hasLinearScale) {
+                          if (this.mode === "moveInMaster" && windowSize && !this.isBarChart) {
+                              xMin = Math.round(xMin) - this.axisOffset;
+                              xMax = xMin + windowSize;
+                          }
+                          else {
+                              xMin = Math.ceil(xMin) - this.axisOffset;
+                              xMax = Math.floor(xMax) + this.axisOffset;
+                          }
+                      }
+                      this.updateAxisLimits(xMin, xMax);
+                  }
+              }
+              this.mode = undefined;
+          };
+          this.removeEventListeners = () => {
+              window.removeEventListener("pointermove", onDragFromMasterChart, true);
+              window.removeEventListener("pointerup", onPointerUpInMasterChart, true);
+          };
+          window.addEventListener("pointermove", onDragFromMasterChart, true);
+          window.addEventListener("pointerup", onPointerUpInMasterChart, true);
+      }
+      onPointerMoveInMasterChart(ev) {
+          const { offsetX: x, offsetY: y } = ev;
+          if (this.mode === undefined) {
+              const target = ev.target;
+              if (!this.masterChart?.chartArea) {
+                  target["style"].cursor = "default";
+                  return;
+              }
+              const { left, right, top, bottom } = this.masterChart.chartArea;
+              const start = this.lowerBound ?? left;
+              const end = this.upperBound ?? right;
+              if (y < top || y > bottom) {
+                  target["style"].cursor = "default";
+              }
+              else if (Math.abs(start - x) < 5 || Math.abs(end - x) < 5) {
+                  target["style"].cursor = "ew-resize";
+              }
+              else if (start < x && x < end && (start !== left || end !== right)) {
+                  target["style"].cursor = "grab";
+              }
+              else {
+                  target["style"].cursor = "crosshair";
+              }
+          }
+      }
+      onMouseLeaveMasterChart(ev) {
+          const target = ev.target;
+          if (!target) {
+              return;
+          }
+          target["style"].cursor = "default";
+      }
+      onDoubleClickInMasterChart(ev) {
+          this.mode = undefined;
+          const position = ev.offsetX;
+          if (!this.masterChart?.chartArea || !this.chart?.scales.x) {
+              return;
+          }
+          const { left, right, top, bottom } = this.masterChart.chartArea;
+          let upperBound = this.upperBound ?? right;
+          let lowerBound = this.lowerBound ?? left;
+          if (upperBound < lowerBound) {
+              [upperBound, lowerBound] = [lowerBound, upperBound];
+          }
+          if (position < left - 5 || position > right + 5 || ev.offsetY < top || ev.offsetY > bottom) {
+              return;
+          }
+          ev.preventDefault();
+          ev.stopPropagation();
+          let { min: xMin, max: xMax } = this.store.currentAxesLimits[this.chartId]?.x ?? this.chart.scales.x;
+          const originalAxisLimits = this.store.originalAxisLimits[this.chartId].x;
+          if (!originalAxisLimits) {
+              return;
+          }
+          let originalXMin = originalAxisLimits.min;
+          let originalXMax = originalAxisLimits.max;
+          if (this.hasLinearScale) {
+              originalXMin = Math.ceil(originalXMin) - this.axisOffset;
+              originalXMax = Math.floor(originalXMax) + this.axisOffset;
+          }
+          if (Math.abs(position - lowerBound) < 5) {
+              // Reset to original min
+              xMin = originalXMin;
+          }
+          else if (Math.abs(position - upperBound) < 5) {
+              xMax = originalXMax;
+          }
+          else if (lowerBound < position && position < upperBound) {
+              // Reset to original limits
+              xMin = originalXMin;
+              xMax = originalXMax;
+          }
+          else {
+              return;
+          }
+          this.updateAxisLimits(xMin, xMax);
+      }
+  }
+
   const cellAnimationRegistry = new Registry();
   cellAnimationRegistry.add("animatedBackgroundColorChange", {
       id: "animatedBackgroundColorChange",
@@ -27201,6 +27840,7 @@ stores.inject(MyMetaStore, storeInstance);
       type = "combo";
       showValues;
       hideDataMarkers;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -27213,6 +27853,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.axesDesign = definition.axesDesign;
           this.showValues = definition.showValues;
           this.hideDataMarkers = definition.hideDataMarkers;
+          this.zoomable = definition.zoomable;
       }
       static transformDefinition(chartSheetId, definition, applyChange) {
           return transformChartDefinitionWithDataSetsWithZone(chartSheetId, definition, applyChange);
@@ -27262,6 +27903,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: this.axesDesign,
               showValues: this.showValues,
               hideDataMarkers: this.hideDataMarkers,
+              zoomable: this.zoomable,
           };
       }
       getDefinitionForExcel() {
@@ -27305,6 +27947,7 @@ stores.inject(MyMetaStore, storeInstance);
               axesDesign: context.axesDesign,
               showValues: context.showValues,
               hideDataMarkers: context.hideDataMarkers,
+              zoomable: context.zoomable,
           };
       }
       duplicateInDuplicatedSheet(newSheetId) {
@@ -27910,6 +28553,7 @@ stores.inject(MyMetaStore, storeInstance);
       fillArea;
       showValues;
       hideDataMarkers;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -27926,6 +28570,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.fillArea = definition.fillArea;
           this.showValues = definition.showValues;
           this.hideDataMarkers = definition.hideDataMarkers;
+          this.zoomable = definition.zoomable;
       }
       static validateChartDefinition(validator, definition) {
           return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -27950,6 +28595,7 @@ stores.inject(MyMetaStore, storeInstance);
               fillArea: context.fillArea,
               showValues: context.showValues,
               hideDataMarkers: context.hideDataMarkers,
+              zoomable: context.zoomable,
           };
       }
       getDefinition() {
@@ -27981,6 +28627,7 @@ stores.inject(MyMetaStore, storeInstance);
               fillArea: this.fillArea,
               showValues: this.showValues,
               hideDataMarkers: this.hideDataMarkers,
+              zoomable: this.zoomable,
           };
       }
       getContextCreation() {
@@ -28503,6 +29150,7 @@ stores.inject(MyMetaStore, storeInstance);
       dataSetDesign;
       axesDesign;
       showValues;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(this.getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -28515,6 +29163,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.dataSetDesign = definition.dataSets;
           this.axesDesign = definition.axesDesign;
           this.showValues = definition.showValues;
+          this.zoomable = definition.zoomable;
       }
       static validateChartDefinition(validator, definition) {
           return validator.checkValidations(definition, checkDataset, checkLabelRange);
@@ -28535,6 +29184,7 @@ stores.inject(MyMetaStore, storeInstance);
               aggregated: context.aggregated ?? false,
               axesDesign: context.axesDesign,
               showValues: context.showValues,
+              zoomable: context.zoomable,
           };
       }
       getDefinition() {
@@ -28562,6 +29212,7 @@ stores.inject(MyMetaStore, storeInstance);
               aggregated: this.aggregated,
               axesDesign: this.axesDesign,
               showValues: this.showValues,
+              zoomable: this.zoomable,
           };
       }
       getContextCreation() {
@@ -28946,6 +29597,7 @@ stores.inject(MyMetaStore, storeInstance);
       dataSetDesign;
       axesDesign;
       showValues;
+      zoomable;
       constructor(definition, sheetId, getters) {
           super(definition, sheetId, getters);
           this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -28964,6 +29616,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.dataSetDesign = definition.dataSets;
           this.axesDesign = definition.axesDesign;
           this.showValues = definition.showValues;
+          this.zoomable = definition.zoomable;
       }
       static transformDefinition(chartSheetId, definition, applyChange) {
           return transformChartDefinitionWithDataSetsWithZone(chartSheetId, definition, applyChange);
@@ -28987,6 +29640,7 @@ stores.inject(MyMetaStore, storeInstance);
               firstValueAsSubtotal: context.firstValueAsSubtotal ?? false,
               axesDesign: context.axesDesign,
               showValues: context.showValues,
+              zoomable: context.zoomable ?? false,
           };
       }
       getContextCreation() {
@@ -29046,6 +29700,7 @@ stores.inject(MyMetaStore, storeInstance);
               firstValueAsSubtotal: this.firstValueAsSubtotal,
               axesDesign: this.axesDesign,
               showValues: this.showValues,
+              zoomable: this.zoomable,
           };
       }
       getDefinitionForExcel() {
@@ -29222,14 +29877,14 @@ stores.inject(MyMetaStore, storeInstance);
       sequence: 100,
   });
   const chartComponentRegistry = new Registry();
-  chartComponentRegistry.add("line", ChartJsComponent);
-  chartComponentRegistry.add("bar", ChartJsComponent);
-  chartComponentRegistry.add("combo", ChartJsComponent);
+  chartComponentRegistry.add("line", ZoomableChartJsComponent);
+  chartComponentRegistry.add("bar", ZoomableChartJsComponent);
+  chartComponentRegistry.add("combo", ZoomableChartJsComponent);
   chartComponentRegistry.add("pie", ChartJsComponent);
   chartComponentRegistry.add("gauge", GaugeChartComponent);
-  chartComponentRegistry.add("scatter", ChartJsComponent);
+  chartComponentRegistry.add("scatter", ZoomableChartJsComponent);
   chartComponentRegistry.add("scorecard", ScorecardChart);
-  chartComponentRegistry.add("waterfall", ChartJsComponent);
+  chartComponentRegistry.add("waterfall", ZoomableChartJsComponent);
   chartComponentRegistry.add("pyramid", ChartJsComponent);
   chartComponentRegistry.add("radar", ChartJsComponent);
   chartComponentRegistry.add("geo", ChartJsComponent);
@@ -29428,6 +30083,64 @@ stores.inject(MyMetaStore, storeInstance);
       preview: "o-spreadsheet-ChartPreview.TREE_MAP_CHART",
   });
 
+  function generateMasterChartConfig(chartJsConfig) {
+      return {
+          ...chartJsConfig,
+          data: {
+              ...chartJsConfig.data,
+              datasets: chartJsConfig.data.datasets
+                  .filter((ds) => !isTrendLineAxis(ds["xAxisID"]))
+                  .map((ds) => ({
+                  ...ds,
+                  pointRadius: 0,
+                  showLine: true,
+              })),
+          },
+          options: {
+              ...chartJsConfig.options,
+              hover: { mode: null },
+              plugins: {
+                  ...chartJsConfig.options.plugins,
+                  title: { display: false },
+                  legend: { display: false },
+                  tooltip: { enabled: false },
+                  chartShowValuesPlugin: undefined,
+              },
+              layout: {
+                  padding: {
+                      ...chartJsConfig.options.layout?.padding,
+                      top: 5,
+                      bottom: 10,
+                  },
+              },
+              scales: {
+                  y: {
+                      ...chartJsConfig.options.scales?.y,
+                      display: false,
+                  },
+                  y1: {
+                      ...chartJsConfig.options.scales?.y1,
+                      display: false,
+                  },
+                  x: {
+                      ...chartJsConfig.options.scales?.x,
+                      title: undefined,
+                      ticks: {
+                          ...chartJsConfig.options.scales?.x?.ticks,
+                          callback: function (value) {
+                              return truncateLabel(chartJsConfig.options.scales?.x?.ticks?.callback?.call(this, value), 5);
+                          },
+                          padding: 0,
+                          font: {
+                              size: 9,
+                          },
+                      },
+                  },
+              },
+          },
+      };
+  }
+
   /**
    * Create a function used to create a Chart based on the definition
    */
@@ -29453,7 +30166,13 @@ stores.inject(MyMetaStore, storeInstance);
           if (!builder) {
               throw new Error("No runtime builder for this chart.");
           }
-          return builder.getChartRuntime(chart, getters);
+          const runtime = builder.getChartRuntime(chart, getters);
+          const definition = chart.getDefinition();
+          if ("chartJsConfig" in runtime && /line|combo|bar|scatter|waterfall/.test(definition.type)) {
+              const chartJsConfig = runtime.chartJsConfig;
+              runtime["masterChartConfig"] = generateMasterChartConfig(chartJsConfig);
+          }
+          return runtime;
       }
       return createRuntimeChart;
   }
@@ -30144,26 +30863,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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.
    */
@@ -31026,16 +31725,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  // -----------------------------------------------------------------------------
-  // STYLE
-  // -----------------------------------------------------------------------------
-  css /* scss */ `
-  .o-chart-container {
-    width: 100%;
-    height: 100%;
-    position: relative;
-  }
-`;
   class ChartFigure extends owl.Component {
       static template = "o-spreadsheet-ChartFigure";
       static props = {
@@ -42951,10 +43640,18 @@ stores.inject(MyMetaStore, storeInstance);
       sequence: index,
       execute: (env) => {
           const zone = env.model.getters.getSelectedZone();
-          const table = env.model.getters.getPivot(pivotId).getExpandedTableStructure().export();
+          const table = env.model.getters.getPivot(pivotId).getExpandedTableStructure();
+          if (table.numberOfCells > PIVOT_MAX_NUMBER_OF_CELLS) {
+              env.notifyUser({
+                  type: "warning",
+                  text: getPivotTooBigErrorMessage(table.numberOfCells, env.model.getters.getLocale()),
+                  sticky: true,
+              });
+              return;
+          }
           env.model.dispatch("INSERT_PIVOT_WITH_TABLE", {
               pivotId,
-              table,
+              table: table.export(),
               col: zone.left,
               row: zone.top,
               sheetId: env.model.getters.getActiveSheetId(),
@@ -44292,7 +44989,7 @@ stores.inject(MyMetaStore, storeInstance);
           env.openSidePanel("DataValidationEditor", {
               rule: localizeDataValidationRule(rule, env.model.getters.getLocale()),
               onExit: () => {
-                  env.openSidePanel("DataValidation");
+                  env.replaceSidePanel("DataValidation", "DataValidationEditor");
               },
           });
       },
@@ -45028,6 +45725,9 @@ stores.inject(MyMetaStore, storeInstance);
               return [row, ...this.rowTreeToRows(node.children, row)];
           });
       }
+      get numberOfCells() {
+          return this.rows.length * this.getNumberOfDataColumns();
+      }
   }
   const EMPTY_PIVOT_CELL = { type: "EMPTY" };
 
@@ -52845,10 +53545,23 @@ stores.inject(MyMetaStore, storeInstance);
       };
   }
 
-  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,
       };
@@ -53292,10 +54005,10 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  class LineChartDesignPanel extends ChartWithAxisDesignPanel {
+  class LineChartDesignPanel extends GenericZoomableChartDesignPanel {
       static template = "o-spreadsheet-LineChartDesignPanel";
       static components = {
-          ...ChartWithAxisDesignPanel.components,
+          ...GenericZoomableChartDesignPanel.components,
           ChartShowDataMarkers,
       };
   }
@@ -53750,6 +54463,11 @@ stores.inject(MyMetaStore, storeInstance);
               verticalAxisPosition: value,
           });
       }
+      onToggleZoom(zoomable) {
+          this.props.updateChart(this.props.chartId, {
+              zoomable,
+          });
+      }
   }
 
   const chartSidePanelComponentRegistry = new Registry();
@@ -53760,11 +54478,11 @@ stores.inject(MyMetaStore, storeInstance);
   })
       .add("scatter", {
       configuration: ScatterConfigPanel,
-      design: ChartWithAxisDesignPanel,
+      design: GenericZoomableChartDesignPanel,
   })
       .add("bar", {
       configuration: BarConfigPanel,
-      design: ChartWithAxisDesignPanel,
+      design: GenericZoomableChartDesignPanel,
   })
       .add("combo", {
       configuration: GenericChartConfigPanel,
@@ -56000,11 +56718,15 @@ stores.inject(MyMetaStore, storeInstance);
           this.store = useLocalStore(PivotMeasureDisplayPanelStore, this.props.pivotId, this.props.measure);
       }
       onSave() {
-          this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+          this.env.replaceSidePanel("PivotSidePanel", `pivot_measure_display_${this.props.pivotId}_${this.props.measure.id}`, {
+              pivotId: this.props.pivotId,
+          });
       }
       onCancel() {
           this.store.cancelMeasureDisplayEdition();
-          this.env.openSidePanel("PivotSidePanel", { pivotId: this.props.pivotId });
+          this.env.replaceSidePanel("PivotSidePanel", `pivot_measure_display_${this.props.pivotId}_${this.props.measure.id}`, {
+              pivotId: this.props.pivotId,
+          });
       }
       get fieldChoices() {
           return this.store.fields.map((field) => ({
@@ -56421,7 +57143,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       openShowValuesAs() {
-          this.env.openSidePanel("PivotMeasureDisplayPanel", {
+          this.env.replaceSidePanel("PivotMeasureDisplayPanel", `pivot_key_${this.props.pivotId}`, {
               pivotId: this.props.pivotId,
               measure: this.props.measure,
           });
@@ -56682,7 +57404,7 @@ stores.inject(MyMetaStore, storeInstance);
           this.props.onDimensionsUpdated(update);
       }
       getMeasureId(fieldName, aggregator) {
-          const baseId = fieldName + (aggregator ? `:${aggregator}` : "");
+          const baseId = fieldName.replaceAll("'", "") + (aggregator ? `:${aggregator}` : "");
           let id = baseId;
           let i = 2;
           while (this.props.definition.measures.some((m) => m.id === id)) {
@@ -56760,6 +57482,13 @@ stores.inject(MyMetaStore, storeInstance);
           const fieldName = field ? getFieldDisplayName(field) : "";
           return measureDisplayTerms.descriptions[measureDisplay.type](fieldName);
       }
+      getHugeDimensionErrorMessage(dimension) {
+          const pivot = this.env.model.getters.getPivot(this.props.pivotId);
+          const possibleValues = pivot.getPossibleFieldValues(dimension);
+          return possibleValues.length > 100
+              ? _t("This dimension contains a lot of values (%s), and might slow down the pivot table.", possibleValues.length)
+              : undefined;
+      }
   }
 
   class PivotTitleSection extends owl.Component {
@@ -56933,6 +57662,7 @@ stores.inject(MyMetaStore, storeInstance);
       draft = null;
       notification = this.get(NotificationStore);
       alreadyNotified = false;
+      alreadyNotifiedForPivotSize = false;
       constructor(get, pivotId) {
           super(get);
           this.pivotId = pivotId;
@@ -57051,6 +57781,16 @@ stores.inject(MyMetaStore, storeInstance);
                       sticky: true,
                   });
               }
+              const pivot = this.getters.getPivot(this.pivotId);
+              const numberOfCells = pivot.isValid() ? pivot.getExpandedTableStructure().numberOfCells : 0;
+              if (!this.alreadyNotifiedForPivotSize && numberOfCells > PIVOT_MAX_NUMBER_OF_CELLS) {
+                  this.alreadyNotifiedForPivotSize = true;
+                  this.notification.notifyUser({
+                      type: "warning",
+                      text: getPivotTooBigErrorMessage(numberOfCells, this.getters.getLocale()),
+                      sticky: true,
+                  });
+              }
           }
       }
       discardPendingUpdate() {
@@ -58265,7 +59005,11 @@ stores.inject(MyMetaStore, storeInstance);
           try {
               // This will throw if the pivot or measure does not exist
               getters.getPivot(props.pivotId).getMeasure(props.measure.id);
-              return { isOpen: true, props, key: "pivot_measure_display" };
+              return {
+                  isOpen: true,
+                  props,
+                  key: `pivot_measure_display_${props.pivotId}_${props.measure.id}`,
+              };
           }
           catch (e) {
               return { isOpen: false };
@@ -58301,6 +59045,7 @@ stores.inject(MyMetaStore, storeInstance);
   class SidePanelStore extends SpreadsheetStore {
       mutators = [
           "open",
+          "replace",
           "toggle",
           "close",
           "changePanelSize",
@@ -58362,8 +59107,7 @@ stores.inject(MyMetaStore, storeInstance);
           if (!state.isOpen) {
               return;
           }
-          const mainPanelKey = this.mainPanel ? this.getPanelKey(this.mainPanel) : undefined;
-          if (!this.mainPanel || !this.mainPanel.isPinned || mainPanelKey === state.key) {
+          if (!this.mainPanel || !this.mainPanel.isPinned || this.mainPanelKey === state.key) {
               this._openPanel("mainPanel", newPanelInfo, state);
               return;
           }
@@ -58382,6 +59126,34 @@ stores.inject(MyMetaStore, storeInstance);
           }
           this._openPanel("secondaryPanel", newPanelInfo, state);
       }
+      replace(componentTag, currentPanelKey, initialPanelProps = {}) {
+          const newPanelInfo = { initialPanelProps, componentTag, size: DEFAULT_SIDE_PANEL_SIZE };
+          const state = this.computeState(newPanelInfo);
+          if (!state.isOpen) {
+              return;
+          }
+          const ensureMainPanelExpanded = () => {
+              if (this.mainPanel?.isCollapsed) {
+                  this.toggleCollapsePanel("mainPanel");
+              }
+          };
+          // Close the current panel if the target panel is already open
+          const isMainPanel = this.mainPanelKey === state.key;
+          const isSecondaryPanel = this.secondaryPanelKey === state.key;
+          if (isMainPanel && this.secondaryPanel) {
+              this.close();
+              ensureMainPanelExpanded();
+              return;
+          }
+          if (isSecondaryPanel) {
+              this.closeMainPanel();
+              this.togglePinPanel();
+              ensureMainPanelExpanded();
+              return;
+          }
+          const targetPanel = this.mainPanelKey === currentPanelKey ? "mainPanel" : "secondaryPanel";
+          this._openPanel(targetPanel, newPanelInfo, state);
+      }
       _openPanel(panel, newPanel, state) {
           const currentPanel = this[panel];
           if (currentPanel && newPanel.componentTag !== currentPanel.componentTag) {
@@ -58441,11 +59213,9 @@ stores.inject(MyMetaStore, storeInstance);
           panelInfo.size = size;
       }
       resetPanelSize(panel) {
-          const panelInfo = this[panel];
-          if (!panelInfo) {
-              return;
+          if (this[panel]) {
+              this[panel].size = DEFAULT_SIDE_PANEL_SIZE;
           }
-          panelInfo.size = DEFAULT_SIDE_PANEL_SIZE;
       }
       togglePinPanel() {
           if (!this.mainPanel) {
@@ -79231,9 +80001,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           if (!(xc in clickableCells[sheetId])) {
               const clickableCell = this.findClickableItem(position);
-              if (clickableCell) {
-                  clickableCells[sheetId][xc] = clickableCell;
-              }
+              clickableCells[sheetId][xc] = clickableCell;
           }
           return clickableCells[sheetId][xc];
       }
@@ -81475,6 +82243,7 @@ stores.inject(MyMetaStore, storeInstance);
               loadLocales: this.model.config.external.loadLocales,
               isDashboard: () => this.model.getters.isDashboard(),
               openSidePanel: this.sidePanel.open.bind(this.sidePanel),
+              replaceSidePanel: this.sidePanel.replace.bind(this.sidePanel),
               toggleSidePanel: this.sidePanel.toggle.bind(this.sidePanel),
               clipboard: this.env.clipboard || instantiateClipboard(),
               startCellEdition: (content) => this.composerFocusStore.focusActiveComposer({ content }),
@@ -86117,6 +86886,7 @@ stores.inject(MyMetaStore, storeInstance);
       ChartPanel,
       ChartFigure,
       ChartJsComponent,
+      ZoomableChartJsComponent,
       Grid,
       GridOverlay,
       ScorecardChart,
@@ -86125,6 +86895,7 @@ stores.inject(MyMetaStore, storeInstance);
       PieChartDesignPanel,
       GenericChartConfigPanel,
       ChartWithAxisDesignPanel,
+      GenericZoomableChartDesignPanel,
       LineChartDesignPanel,
       GaugeChartConfigPanel,
       GaugeChartDesignPanel,
@@ -86254,9 +87025,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);