@odoo/o-spreadsheet 17.4.0-alpha.4 → 17.4.0-alpha.5

package/dist/o-spreadsheet.cjs.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.4.0-alpha.4
- * @date 2024-06-12T14:00:22.046Z
- * @hash cefb0e4
+ * @version 17.4.0-alpha.5
+ * @date 2024-06-14T10:01:40.605Z
+ * @hash 9ceed96
  */
 
 'use strict';
@@ -5284,7 +5284,7 @@ function clipTextWithEllipsis(ctx, text, maxWidth) {
         return text;
     }
     const ellipsis = "…";
-    const ellipsisWidth = computeCachedTextWidth(ctx, text);
+    const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis);
     if (width <= ellipsisWidth) {
         return text;
     }
@@ -10424,6 +10424,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
 function drawScoreChart(structure, canvas) {
     const ctx = canvas.getContext("2d");
     canvas.width = structure.canvas.width;
+    const availableWidth = canvas.width - DEFAULT_CHART_PADDING;
     canvas.height = structure.canvas.height;
     ctx.fillStyle = structure.canvas.backgroundColor;
     ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);
@@ -10432,7 +10433,7 @@ function drawScoreChart(structure, canvas) {
         ctx.fillStyle = structure.title.style.color;
         const baseline = ctx.textBaseline;
         ctx.textBaseline = "middle";
-        ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, canvas.width - structure.title.position.x), structure.title.position.x, structure.title.position.y);
+        ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, availableWidth - structure.title.position.x), structure.title.position.x, structure.title.position.y);
         ctx.textBaseline = baseline;
     }
     if (structure.baseline) {
@@ -10522,13 +10523,16 @@ function createScorecardChartRuntime(chart, getters) {
     return {
         title: {
             ...chart.title,
+            // chart titles are extracted from .json files and they are translated at runtime here
             text: _t(chart.title.text ?? ""),
         },
         keyValue: formattedKeyValue,
         baselineDisplay,
         baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
         baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr ? _t(chart.baselineDescr) : "",
+        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr
+            ? _t(chart.baselineDescr) // descriptions are extracted from .json files and they are translated at runtime here
+            : "",
         fontColor,
         background,
         baselineStyle: chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
@@ -10557,7 +10561,7 @@ function createScorecardChartRuntime(chart, getters) {
 /* Sizes of boxes containing the texts, in percentage of the Chart size */
 const KEY_BOX_HEIGHT_RATIO = 0.8;
 /* Padding at the border of the chart */
-const CHART_PADDING = DEFAULT_CHART_PADDING;
+const CHART_PADDING = 10;
 const BOTTOM_PADDING_RATIO = 0.05;
 /**
  * Line height (in em)
@@ -10707,6 +10711,7 @@ class ScorecardChartConfigBuilder {
                 position: {
                     x: (this.width - keyWidth) / 2,
                     y: this.height * (0.5 - BOTTOM_PADDING_RATIO * 2) +
+                        CHART_PADDING / 2 +
                         (titleHeight + keyHeight / (this.baseline || this.baselineDescr ? 2 : 1.2)) / 2,
                 },
             };
@@ -10766,7 +10771,8 @@ class ScorecardChartConfigBuilder {
         const remainingWidth = maxLineWidth - baselineValueWidth;
         let baselineDescrFontSize = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => computeTextWidth(this.context, this.baselineDescr, { fontSize }));
         let isBaselineSplit = false;
-        if (baselineDescrFontSize < baselineValueFontSize / 2.5) {
+        if (baselineDescrFontSize < baselineValueFontSize / 2.5 &&
+            this.baselineDescr.trim().includes(" ")) {
             isBaselineSplit = true;
             baselineDescrFontSize = Math.floor(baselineValueFontSize / 2.5);
             for (const line of splitTextInTwoLines(this.baselineDescr)) {
@@ -10815,7 +10821,7 @@ class ScorecardChartConfigBuilder {
     /** Get the height of the chart minus all the vertical paddings */
     getDrawableHeight() {
         const verticalPadding = CHART_PADDING + this.height * BOTTOM_PADDING_RATIO;
-        let availableHeight = this.height - 2 * verticalPadding;
+        let availableHeight = this.height - verticalPadding;
         availableHeight -= this.title ? DEFAULT_CHART_FONT_SIZE * LINE_HEIGHT : 0;
         return availableHeight;
     }
@@ -10857,6 +10863,11 @@ class ScorecardChart extends owl.Component {
     get runtime() {
         return this.env.model.getters.getChartRuntime(this.props.figure.id);
     }
+    get title() {
+        const title = this.env.model.getters.getChartDefinition(this.props.figure.id).title.text ?? "";
+        // chart titles are extracted from .json files and they are translated at runtime here
+        return _t(title);
+    }
     setup() {
         owl.useEffect(this.createChart.bind(this), () => {
             const canvas = this.canvas.el;
@@ -31680,14 +31691,6 @@ class GaugeChartDesignPanel extends owl.Component {
         const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
         return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
     }
-    updateBackgroundColor(color) {
-        this.props.updateChart(this.props.figureId, {
-            background: color,
-        });
-    }
-    updateTitle(content) {
-        this.props.updateChart(this.props.figureId, { title: { text: content } });
-    }
     isRangeMinInvalid() {
         return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
             this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */) ||
@@ -31727,9 +31730,6 @@ class GaugeChartDesignPanel extends owl.Component {
             sectionRule,
         });
     }
-    get backgroundColorTitle() {
-        return ChartTerms.BackgroundColor;
-    }
 }
 
 class LineConfigPanel extends GenericChartConfigPanel {
@@ -31912,9 +31912,6 @@ class ScorecardChartDesignPanel extends owl.Component {
     get humanizeNumbersLabel() {
         return _t("Humanize numbers");
     }
-    updateTitle(content) {
-        this.props.updateChart(this.props.figureId, { title: { text: content } });
-    }
     updateHumanizeNumbers(humanize) {
         this.props.updateChart(this.props.figureId, { humanize });
     }
@@ -31937,9 +31934,6 @@ class ScorecardChartDesignPanel extends owl.Component {
                 break;
         }
     }
-    get backgroundColorTitle() {
-        return ChartTerms.BackgroundColor;
-    }
 }
 
 class WaterfallChartDesignPanel extends owl.Component {
@@ -38621,7 +38615,7 @@ class FiguresContainer extends owl.Component {
         });
     }
     getContainerRect(container) {
-        const { width: viewWidth, height: viewHeight } = this.env.model.getters.getMainViewportRect();
+        const { width: viewWidth, height: viewHeight } = this.env.model.getters.getSheetViewDimension();
         const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
         const x = ["bottomRight", "topRight"].includes(container) ? viewportX : 0;
         const width = viewWidth - x;
@@ -51122,22 +51116,6 @@ class PivotCorePlugin extends CorePlugin {
                 this.addPivotFormula(cellPosition, formulaId, pivotCell);
             }
         }
-        const pivotZone = {
-            top: position.row,
-            bottom: position.row + pivotCells[0].length - 1,
-            left: position.col,
-            right: position.col + pivotCells.length - 1,
-        };
-        const numberOfHeaders = table.columns.length - 1;
-        const cmdContent = {
-            sheetId: position.sheetId,
-            ranges: [this.getters.getRangeDataFromZone(position.sheetId, pivotZone)],
-            config: { ...PIVOT_TABLE_CONFIG, numberOfHeaders },
-            tableType: "static",
-        };
-        if (this.canDispatch("CREATE_TABLE", cmdContent).isSuccessful) {
-            this.dispatch("CREATE_TABLE", cmdContent);
-        }
     }
     resizeSheet(sheetId, { col, row }, table) {
         const colLimit = table.getNumberOfDataColumns() + 1; // +1 for the Top-Left
@@ -55909,6 +55887,9 @@ class Session extends EventBus {
      * Send a snapshot of the spreadsheet to the collaboration server
      */
     snapshot(data) {
+        if (this.pendingMessages.length !== 0) {
+            return;
+        }
         const snapshotId = this.uuidGenerator.uuidv4();
         this.transportService.sendMessage({
             type: "SNAPSHOT",
@@ -67021,6 +67002,6 @@ exports.tokenColors = tokenColors;
 exports.tokenize = tokenize;
 
 
-__info__.version = "17.4.0-alpha.4";
-__info__.date = "2024-06-12T14:00:22.046Z";
-__info__.hash = "cefb0e4";
+__info__.version = "17.4.0-alpha.5";
+__info__.date = "2024-06-14T10:01:40.605Z";
+__info__.hash = "9ceed96";

package/dist/o-spreadsheet.d.ts

@@ -7139,8 +7139,6 @@ declare class GaugeChartDesignPanel extends Component<Props$N, SpreadsheetChildE
     protected state: PanelState;
     setup(): void;
     get designErrorMessages(): string[];
-    updateBackgroundColor(color: Color): void;
-    updateTitle(content: string): void;
     isRangeMinInvalid(): boolean;
     isRangeMaxInvalid(): boolean;
     get isLowerInflectionPointInvalid(): boolean;
@@ -7148,7 +7146,6 @@ declare class GaugeChartDesignPanel extends Component<Props$N, SpreadsheetChildE
     updateSectionColor(target: string, color: Color): void;
     updateSectionRule(sectionRule: SectionRule): void;
     canUpdateSectionRule(sectionRule: SectionRule): void;
-    get backgroundColorTitle(): string;
 }
 
 declare class LineConfigPanel extends GenericChartConfigPanel {
@@ -7229,12 +7226,10 @@ declare class ScorecardChartDesignPanel extends Component<Props$L, SpreadsheetCh
     };
     get colorsSectionTitle(): string;
     get humanizeNumbersLabel(): string;
-    updateTitle(content: string): void;
     updateHumanizeNumbers(humanize: boolean): void;
     translate(term: any): string;
     updateBaselineDescr(ev: any): void;
     setColor(color: Color, colorPickerId: ColorPickerId): void;
-    get backgroundColorTitle(): string;
 }
 
 interface ChartSidePanel {
@@ -7825,6 +7820,7 @@ declare class ScorecardChart extends Component<Props$H, SpreadsheetChildEnv> {
     };
     private canvas;
     get runtime(): ScorecardChartRuntime;
+    get title(): string;
     setup(): void;
     private createChart;
 }

package/dist/o-spreadsheet.esm.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.4.0-alpha.4
- * @date 2024-06-12T14:00:22.046Z
- * @hash cefb0e4
+ * @version 17.4.0-alpha.5
+ * @date 2024-06-14T10:01:40.605Z
+ * @hash 9ceed96
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -5282,7 +5282,7 @@ function clipTextWithEllipsis(ctx, text, maxWidth) {
         return text;
     }
     const ellipsis = "…";
-    const ellipsisWidth = computeCachedTextWidth(ctx, text);
+    const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis);
     if (width <= ellipsisWidth) {
         return text;
     }
@@ -10422,6 +10422,7 @@ let ScorecardChart$1 = class ScorecardChart extends AbstractChart {
 function drawScoreChart(structure, canvas) {
     const ctx = canvas.getContext("2d");
     canvas.width = structure.canvas.width;
+    const availableWidth = canvas.width - DEFAULT_CHART_PADDING;
     canvas.height = structure.canvas.height;
     ctx.fillStyle = structure.canvas.backgroundColor;
     ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);
@@ -10430,7 +10431,7 @@ function drawScoreChart(structure, canvas) {
         ctx.fillStyle = structure.title.style.color;
         const baseline = ctx.textBaseline;
         ctx.textBaseline = "middle";
-        ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, canvas.width - structure.title.position.x), structure.title.position.x, structure.title.position.y);
+        ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, availableWidth - structure.title.position.x), structure.title.position.x, structure.title.position.y);
         ctx.textBaseline = baseline;
     }
     if (structure.baseline) {
@@ -10520,13 +10521,16 @@ function createScorecardChartRuntime(chart, getters) {
     return {
         title: {
             ...chart.title,
+            // chart titles are extracted from .json files and they are translated at runtime here
             text: _t(chart.title.text ?? ""),
         },
         keyValue: formattedKeyValue,
         baselineDisplay,
         baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
         baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr ? _t(chart.baselineDescr) : "",
+        baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr
+            ? _t(chart.baselineDescr) // descriptions are extracted from .json files and they are translated at runtime here
+            : "",
         fontColor,
         background,
         baselineStyle: chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
@@ -10555,7 +10559,7 @@ function createScorecardChartRuntime(chart, getters) {
 /* Sizes of boxes containing the texts, in percentage of the Chart size */
 const KEY_BOX_HEIGHT_RATIO = 0.8;
 /* Padding at the border of the chart */
-const CHART_PADDING = DEFAULT_CHART_PADDING;
+const CHART_PADDING = 10;
 const BOTTOM_PADDING_RATIO = 0.05;
 /**
  * Line height (in em)
@@ -10705,6 +10709,7 @@ class ScorecardChartConfigBuilder {
                 position: {
                     x: (this.width - keyWidth) / 2,
                     y: this.height * (0.5 - BOTTOM_PADDING_RATIO * 2) +
+                        CHART_PADDING / 2 +
                         (titleHeight + keyHeight / (this.baseline || this.baselineDescr ? 2 : 1.2)) / 2,
                 },
             };
@@ -10764,7 +10769,8 @@ class ScorecardChartConfigBuilder {
         const remainingWidth = maxLineWidth - baselineValueWidth;
         let baselineDescrFontSize = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => computeTextWidth(this.context, this.baselineDescr, { fontSize }));
         let isBaselineSplit = false;
-        if (baselineDescrFontSize < baselineValueFontSize / 2.5) {
+        if (baselineDescrFontSize < baselineValueFontSize / 2.5 &&
+            this.baselineDescr.trim().includes(" ")) {
             isBaselineSplit = true;
             baselineDescrFontSize = Math.floor(baselineValueFontSize / 2.5);
             for (const line of splitTextInTwoLines(this.baselineDescr)) {
@@ -10813,7 +10819,7 @@ class ScorecardChartConfigBuilder {
     /** Get the height of the chart minus all the vertical paddings */
     getDrawableHeight() {
         const verticalPadding = CHART_PADDING + this.height * BOTTOM_PADDING_RATIO;
-        let availableHeight = this.height - 2 * verticalPadding;
+        let availableHeight = this.height - verticalPadding;
         availableHeight -= this.title ? DEFAULT_CHART_FONT_SIZE * LINE_HEIGHT : 0;
         return availableHeight;
     }
@@ -10855,6 +10861,11 @@ class ScorecardChart extends Component {
     get runtime() {
         return this.env.model.getters.getChartRuntime(this.props.figure.id);
     }
+    get title() {
+        const title = this.env.model.getters.getChartDefinition(this.props.figure.id).title.text ?? "";
+        // chart titles are extracted from .json files and they are translated at runtime here
+        return _t(title);
+    }
     setup() {
         useEffect(this.createChart.bind(this), () => {
             const canvas = this.canvas.el;
@@ -31678,14 +31689,6 @@ class GaugeChartDesignPanel extends Component {
         const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
         return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
     }
-    updateBackgroundColor(color) {
-        this.props.updateChart(this.props.figureId, {
-            background: color,
-        });
-    }
-    updateTitle(content) {
-        this.props.updateChart(this.props.figureId, { title: { text: content } });
-    }
     isRangeMinInvalid() {
         return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
             this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */) ||
@@ -31725,9 +31728,6 @@ class GaugeChartDesignPanel extends Component {
             sectionRule,
         });
     }
-    get backgroundColorTitle() {
-        return ChartTerms.BackgroundColor;
-    }
 }
 
 class LineConfigPanel extends GenericChartConfigPanel {
@@ -31910,9 +31910,6 @@ class ScorecardChartDesignPanel extends Component {
     get humanizeNumbersLabel() {
         return _t("Humanize numbers");
     }
-    updateTitle(content) {
-        this.props.updateChart(this.props.figureId, { title: { text: content } });
-    }
     updateHumanizeNumbers(humanize) {
         this.props.updateChart(this.props.figureId, { humanize });
     }
@@ -31935,9 +31932,6 @@ class ScorecardChartDesignPanel extends Component {
                 break;
         }
     }
-    get backgroundColorTitle() {
-        return ChartTerms.BackgroundColor;
-    }
 }
 
 class WaterfallChartDesignPanel extends Component {
@@ -38619,7 +38613,7 @@ class FiguresContainer extends Component {
         });
     }
     getContainerRect(container) {
-        const { width: viewWidth, height: viewHeight } = this.env.model.getters.getMainViewportRect();
+        const { width: viewWidth, height: viewHeight } = this.env.model.getters.getSheetViewDimension();
         const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
         const x = ["bottomRight", "topRight"].includes(container) ? viewportX : 0;
         const width = viewWidth - x;
@@ -51120,22 +51114,6 @@ class PivotCorePlugin extends CorePlugin {
                 this.addPivotFormula(cellPosition, formulaId, pivotCell);
             }
         }
-        const pivotZone = {
-            top: position.row,
-            bottom: position.row + pivotCells[0].length - 1,
-            left: position.col,
-            right: position.col + pivotCells.length - 1,
-        };
-        const numberOfHeaders = table.columns.length - 1;
-        const cmdContent = {
-            sheetId: position.sheetId,
-            ranges: [this.getters.getRangeDataFromZone(position.sheetId, pivotZone)],
-            config: { ...PIVOT_TABLE_CONFIG, numberOfHeaders },
-            tableType: "static",
-        };
-        if (this.canDispatch("CREATE_TABLE", cmdContent).isSuccessful) {
-            this.dispatch("CREATE_TABLE", cmdContent);
-        }
     }
     resizeSheet(sheetId, { col, row }, table) {
         const colLimit = table.getNumberOfDataColumns() + 1; // +1 for the Top-Left
@@ -55907,6 +55885,9 @@ class Session extends EventBus {
      * Send a snapshot of the spreadsheet to the collaboration server
      */
     snapshot(data) {
+        if (this.pendingMessages.length !== 0) {
+            return;
+        }
         const snapshotId = this.uuidGenerator.uuidv4();
         this.transportService.sendMessage({
             type: "SNAPSHOT",
@@ -66976,6 +66957,6 @@ const constants = {
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "17.4.0-alpha.4";
-__info__.date = "2024-06-12T14:00:22.046Z";
-__info__.hash = "cefb0e4";
+__info__.version = "17.4.0-alpha.5";
+__info__.date = "2024-06-14T10:01:40.605Z";
+__info__.hash = "9ceed96";

package/dist/o-spreadsheet.iife.js

@@ -3,9 +3,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 17.4.0-alpha.4
- * @date 2024-06-12T14:00:22.046Z
- * @hash cefb0e4
+ * @version 17.4.0-alpha.5
+ * @date 2024-06-14T10:01:40.605Z
+ * @hash 9ceed96
  */
 
 (function (exports, owl) {
@@ -5283,7 +5283,7 @@
           return text;
       }
       const ellipsis = "…";
-      const ellipsisWidth = computeCachedTextWidth(ctx, text);
+      const ellipsisWidth = computeCachedTextWidth(ctx, ellipsis);
       if (width <= ellipsisWidth) {
           return text;
       }
@@ -10423,6 +10423,7 @@ stores.inject(MyMetaStore, storeInstance);
   function drawScoreChart(structure, canvas) {
       const ctx = canvas.getContext("2d");
       canvas.width = structure.canvas.width;
+      const availableWidth = canvas.width - DEFAULT_CHART_PADDING;
       canvas.height = structure.canvas.height;
       ctx.fillStyle = structure.canvas.backgroundColor;
       ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);
@@ -10431,7 +10432,7 @@ stores.inject(MyMetaStore, storeInstance);
           ctx.fillStyle = structure.title.style.color;
           const baseline = ctx.textBaseline;
           ctx.textBaseline = "middle";
-          ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, canvas.width - structure.title.position.x), structure.title.position.x, structure.title.position.y);
+          ctx.fillText(clipTextWithEllipsis(ctx, structure.title.text, availableWidth - structure.title.position.x), structure.title.position.x, structure.title.position.y);
           ctx.textBaseline = baseline;
       }
       if (structure.baseline) {
@@ -10521,13 +10522,16 @@ stores.inject(MyMetaStore, storeInstance);
       return {
           title: {
               ...chart.title,
+              // chart titles are extracted from .json files and they are translated at runtime here
               text: _t(chart.title.text ?? ""),
           },
           keyValue: formattedKeyValue,
           baselineDisplay,
           baselineArrow: getBaselineArrowDirection(baselineCell, keyValueCell, chart.baselineMode),
           baselineColor: getBaselineColor(baselineCell, chart.baselineMode, keyValueCell, chart.baselineColorUp, chart.baselineColorDown),
-          baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr ? _t(chart.baselineDescr) : "",
+          baselineDescr: chart.baselineMode !== "progress" && chart.baselineDescr
+              ? _t(chart.baselineDescr) // descriptions are extracted from .json files and they are translated at runtime here
+              : "",
           fontColor,
           background,
           baselineStyle: chart.baselineMode !== "percentage" && chart.baselineMode !== "progress" && baseline
@@ -10556,7 +10560,7 @@ stores.inject(MyMetaStore, storeInstance);
   /* Sizes of boxes containing the texts, in percentage of the Chart size */
   const KEY_BOX_HEIGHT_RATIO = 0.8;
   /* Padding at the border of the chart */
-  const CHART_PADDING = DEFAULT_CHART_PADDING;
+  const CHART_PADDING = 10;
   const BOTTOM_PADDING_RATIO = 0.05;
   /**
    * Line height (in em)
@@ -10706,6 +10710,7 @@ stores.inject(MyMetaStore, storeInstance);
                   position: {
                       x: (this.width - keyWidth) / 2,
                       y: this.height * (0.5 - BOTTOM_PADDING_RATIO * 2) +
+                          CHART_PADDING / 2 +
                           (titleHeight + keyHeight / (this.baseline || this.baselineDescr ? 2 : 1.2)) / 2,
                   },
               };
@@ -10765,7 +10770,8 @@ stores.inject(MyMetaStore, storeInstance);
           const remainingWidth = maxLineWidth - baselineValueWidth;
           let baselineDescrFontSize = getFontSizeMatchingWidth(remainingWidth, baselineValueFontSize, (fontSize) => computeTextWidth(this.context, this.baselineDescr, { fontSize }));
           let isBaselineSplit = false;
-          if (baselineDescrFontSize < baselineValueFontSize / 2.5) {
+          if (baselineDescrFontSize < baselineValueFontSize / 2.5 &&
+              this.baselineDescr.trim().includes(" ")) {
               isBaselineSplit = true;
               baselineDescrFontSize = Math.floor(baselineValueFontSize / 2.5);
               for (const line of splitTextInTwoLines(this.baselineDescr)) {
@@ -10814,7 +10820,7 @@ stores.inject(MyMetaStore, storeInstance);
       /** Get the height of the chart minus all the vertical paddings */
       getDrawableHeight() {
           const verticalPadding = CHART_PADDING + this.height * BOTTOM_PADDING_RATIO;
-          let availableHeight = this.height - 2 * verticalPadding;
+          let availableHeight = this.height - verticalPadding;
           availableHeight -= this.title ? DEFAULT_CHART_FONT_SIZE * LINE_HEIGHT : 0;
           return availableHeight;
       }
@@ -10856,6 +10862,11 @@ stores.inject(MyMetaStore, storeInstance);
       get runtime() {
           return this.env.model.getters.getChartRuntime(this.props.figure.id);
       }
+      get title() {
+          const title = this.env.model.getters.getChartDefinition(this.props.figure.id).title.text ?? "";
+          // chart titles are extracted from .json files and they are translated at runtime here
+          return _t(title);
+      }
       setup() {
           owl.useEffect(this.createChart.bind(this), () => {
               const canvas = this.canvas.el;
@@ -31679,14 +31690,6 @@ stores.inject(MyMetaStore, storeInstance);
           const cancelledReasons = [...(this.state.sectionRuleDispatchResult?.reasons || [])];
           return cancelledReasons.map((error) => ChartTerms.Errors[error] || ChartTerms.Errors.Unexpected);
       }
-      updateBackgroundColor(color) {
-          this.props.updateChart(this.props.figureId, {
-              background: color,
-          });
-      }
-      updateTitle(content) {
-          this.props.updateChart(this.props.figureId, { title: { text: content } });
-      }
       isRangeMinInvalid() {
           return !!(this.state.sectionRuleDispatchResult?.isCancelledBecause("EmptyGaugeRangeMin" /* CommandResult.EmptyGaugeRangeMin */) ||
               this.state.sectionRuleDispatchResult?.isCancelledBecause("GaugeRangeMinNaN" /* CommandResult.GaugeRangeMinNaN */) ||
@@ -31726,9 +31729,6 @@ stores.inject(MyMetaStore, storeInstance);
               sectionRule,
           });
       }
-      get backgroundColorTitle() {
-          return ChartTerms.BackgroundColor;
-      }
   }
 
   class LineConfigPanel extends GenericChartConfigPanel {
@@ -31911,9 +31911,6 @@ stores.inject(MyMetaStore, storeInstance);
       get humanizeNumbersLabel() {
           return _t("Humanize numbers");
       }
-      updateTitle(content) {
-          this.props.updateChart(this.props.figureId, { title: { text: content } });
-      }
       updateHumanizeNumbers(humanize) {
           this.props.updateChart(this.props.figureId, { humanize });
       }
@@ -31936,9 +31933,6 @@ stores.inject(MyMetaStore, storeInstance);
                   break;
           }
       }
-      get backgroundColorTitle() {
-          return ChartTerms.BackgroundColor;
-      }
   }
 
   class WaterfallChartDesignPanel extends owl.Component {
@@ -38620,7 +38614,7 @@ stores.inject(MyMetaStore, storeInstance);
           });
       }
       getContainerRect(container) {
-          const { width: viewWidth, height: viewHeight } = this.env.model.getters.getMainViewportRect();
+          const { width: viewWidth, height: viewHeight } = this.env.model.getters.getSheetViewDimension();
           const { x: viewportX, y: viewportY } = this.env.model.getters.getMainViewportCoordinates();
           const x = ["bottomRight", "topRight"].includes(container) ? viewportX : 0;
           const width = viewWidth - x;
@@ -51121,22 +51115,6 @@ stores.inject(MyMetaStore, storeInstance);
                   this.addPivotFormula(cellPosition, formulaId, pivotCell);
               }
           }
-          const pivotZone = {
-              top: position.row,
-              bottom: position.row + pivotCells[0].length - 1,
-              left: position.col,
-              right: position.col + pivotCells.length - 1,
-          };
-          const numberOfHeaders = table.columns.length - 1;
-          const cmdContent = {
-              sheetId: position.sheetId,
-              ranges: [this.getters.getRangeDataFromZone(position.sheetId, pivotZone)],
-              config: { ...PIVOT_TABLE_CONFIG, numberOfHeaders },
-              tableType: "static",
-          };
-          if (this.canDispatch("CREATE_TABLE", cmdContent).isSuccessful) {
-              this.dispatch("CREATE_TABLE", cmdContent);
-          }
       }
       resizeSheet(sheetId, { col, row }, table) {
           const colLimit = table.getNumberOfDataColumns() + 1; // +1 for the Top-Left
@@ -55908,6 +55886,9 @@ stores.inject(MyMetaStore, storeInstance);
        * Send a snapshot of the spreadsheet to the collaboration server
        */
       snapshot(data) {
+          if (this.pendingMessages.length !== 0) {
+              return;
+          }
           const snapshotId = this.uuidGenerator.uuidv4();
           this.transportService.sendMessage({
               type: "SNAPSHOT",
@@ -67020,9 +67001,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "17.4.0-alpha.4";
-  __info__.date = "2024-06-12T14:00:22.046Z";
-  __info__.hash = "cefb0e4";
+  __info__.version = "17.4.0-alpha.5";
+  __info__.date = "2024-06-14T10:01:40.605Z";
+  __info__.hash = "9ceed96";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);