@odoo/o-spreadsheet 18.1.0-alpha.6 → 18.1.0-alpha.7

package/dist/o-spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.1.0-alpha.6
- * @date 2024-11-28T09:06:59.527Z
- * @hash 875c901
+ * @version 18.1.0-alpha.7
+ * @date 2024-12-05T10:40:26.512Z
+ * @hash 7b1c39b
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -170,10 +170,13 @@ const ALERT_INFO_BG = "#CDEDF1";
 const ALERT_INFO_BORDER = "#98DBE2";
 const ALERT_INFO_TEXT_COLOR = "#09414A";
 const BADGE_SELECTED_COLOR = "#E6F2F3";
-const DEFAULT_CHART_PADDING = 20;
-const DEFAULT_CHART_FONT_SIZE = 22;
-const SCORECARD_GAUGE_CHART_PADDING = 10;
-const SCORECARD_GAUGE_CHART_FONT_SIZE = 14;
+const CHART_PADDING$1 = 20;
+const CHART_PADDING_BOTTOM = 10;
+const CHART_PADDING_TOP = 15;
+const CHART_TITLE_FONT_SIZE = 16;
+const CHART_AXIS_TITLE_FONT_SIZE = 12;
+const SCORECARD_CHART_TITLE_FONT_SIZE = 14;
+const PIVOT_TOKEN_COLOR = "#F28C28";
 // Color picker defaults as upper case HEX to match `toHex`helper
 const COLOR_PICKER_DEFAULTS = [
     "#000000",
@@ -333,8 +336,8 @@ const DEFAULT_WINDOW_SIZE = 2;
 const DEBOUNCE_TIME = 200;
 const MESSAGE_VERSION = 1;
 // Sheets
-const FORBIDDEN_SHEET_CHARS = ["'", "*", "?", "/", "\\", "[", "]"];
-const FORBIDDEN_IN_EXCEL_REGEX = /'|\*|\?|\/|\\|\[|\]/;
+const FORBIDDEN_SHEETNAME_CHARS = ["'", "*", "?", "/", "\\", "[", "]"];
+const FORBIDDEN_SHEETNAME_CHARS_IN_EXCEL_REGEX = /'|\*|\?|\/|\\|\[|\]/;
 // Cells
 const FORMULA_REF_IDENTIFIER = "|";
 // Components
@@ -387,6 +390,7 @@ const DEFAULT_CURRENCY = {
 //------------------------------------------------------------------------------
 // Miscellaneous
 //------------------------------------------------------------------------------
+const sanitizeSheetNameRegex = new RegExp(FORBIDDEN_SHEETNAME_CHARS_IN_EXCEL_REGEX, "g");
 /**
  * Remove quotes from a quoted string
  * ```js
@@ -482,6 +486,10 @@ function getCanonicalSymbolName(symbolName) {
     }
     return symbolName;
 }
+/** Replace the excel-excluded characters of a sheetName */
+function sanitizeSheetName(sheetName, replacementChar = " ") {
+    return sheetName.replace(sanitizeSheetNameRegex, replacementChar);
+}
 function clip(val, min, max) {
     return val < min ? min : val > max ? max : val;
 }
@@ -9514,6 +9522,12 @@ function chartFontColor(backgroundColor) {
     }
     return relativeLuminance(backgroundColor) < 0.3 ? "#FFFFFF" : "#000000";
 }
+function chartMutedFontColor(backgroundColor) {
+    if (!backgroundColor) {
+        return "#666666";
+    }
+    return relativeLuminance(backgroundColor) < 0.3 ? "#C8C8C8" : "#666666";
+}
 function checkDataset(definition) {
     if (definition.dataSets) {
         const invalidRanges = definition.dataSets.find((range) => !rangeReference.test(range.dataRange)) !== undefined;
@@ -9649,8 +9663,8 @@ function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
     const yMin = chart.chartArea.top;
     const textsPositions = {};
     for (const dataset of chart._metasets) {
-        if (dataset.xAxisID === TREND_LINE_XAXIS_ID) {
-            return; // ignore trend lines
+        if (dataset.xAxisID === TREND_LINE_XAXIS_ID || dataset.hidden) {
+            continue;
         }
         for (let i = 0; i < dataset._parsed.length; i++) {
             const parsedValue = dataset._parsed[i];
@@ -10097,7 +10111,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;
+    const availableWidth = canvas.width - CHART_PADDING$1 * 2;
     canvas.height = structure.canvas.height;
     ctx.fillStyle = structure.canvas.backgroundColor;
     ctx.fillRect(0, 0, structure.canvas.width, structure.canvas.height);
@@ -10232,10 +10246,9 @@ function createScorecardChartRuntime(chart, getters) {
 }
 
 /* Padding at the border of the chart */
-const CHART_PADDING = SCORECARD_GAUGE_CHART_PADDING;
+const CHART_PADDING = 10;
 const BOTTOM_PADDING_RATIO = 0.05;
 /* Maximum font sizes of each element */
-const CHART_TITLE_FONT_SIZE = SCORECARD_GAUGE_CHART_FONT_SIZE;
 const KEY_VALUE_FONT_SIZE = 32;
 const BASELINE_MAX_FONT_SIZE = 16;
 function formatBaselineDescr(baselineDescr, baseline) {
@@ -10307,7 +10320,7 @@ class ScorecardChartConfigBuilder {
                     : this.height - (this.height - titleHeight - baselineHeight) / 2 - CHART_PADDING,
             },
         };
-        const minimalBaselinePosition = baselineArrowSize + DEFAULT_CHART_PADDING;
+        const minimalBaselinePosition = baselineArrowSize + CHART_PADDING * 2;
         if (structure.baseline.position.x < minimalBaselinePosition) {
             structure.baseline.position.x = minimalBaselinePosition;
         }
@@ -10387,7 +10400,7 @@ class ScorecardChartConfigBuilder {
         return this.runtime.background;
     }
     get secondaryFontColor() {
-        return relativeLuminance(this.backgroundColor) > 0.3 ? "#525252" : "#C8C8C8";
+        return chartMutedFontColor(this.backgroundColor);
     }
     getTextDimensions(text, font) {
         this.context.font = font;
@@ -10413,7 +10426,7 @@ class ScorecardChartConfigBuilder {
         }
         return {
             title: {
-                font: getDefaultContextFont(CHART_TITLE_FONT_SIZE, this.runtime.title.bold, this.runtime.title.italic),
+                font: getDefaultContextFont(this.runtime.title.fontSize ?? SCORECARD_CHART_TITLE_FONT_SIZE, this.runtime.title.bold, this.runtime.title.italic),
                 color: this.runtime.title.color ?? this.secondaryFontColor,
             },
             keyValue: {
@@ -21234,7 +21247,7 @@ function getFunctionsFromAST(ast, functionNames) {
 
 const PIVOT_FUNCTIONS = ["PIVOT.VALUE", "PIVOT.HEADER", "PIVOT"];
 /**
- * Create a proposal entry for the compose autowcomplete
+ * Create a proposal entry for the composer autocomplete
  * to insert a field name string in a formula.
  */
 function makeFieldProposal(field, granularity) {
@@ -22017,14 +22030,8 @@ const GAUGE_PADDING_BOTTOM = 20;
 const GAUGE_LABELS_FONT_SIZE = 12;
 const GAUGE_DEFAULT_VALUE_FONT_SIZE = 80;
 const GAUGE_BACKGROUND_COLOR = "#F3F2F1";
-const GAUGE_TEXT_COLOR = "#666666";
-const GAUGE_TEXT_COLOR_HIGH_CONTRAST = "#C8C8C8";
-const GAUGE_INFLECTION_MARKER_COLOR = "#666666aa";
 const GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
 const GAUGE_TITLE_SECTION_HEIGHT = 25;
-const GAUGE_TITLE_FONT_SIZE = SCORECARD_GAUGE_CHART_FONT_SIZE;
-const GAUGE_TITLE_PADDING_LEFT = SCORECARD_GAUGE_CHART_PADDING;
-const GAUGE_TITLE_PADDING_TOP = SCORECARD_GAUGE_CHART_PADDING;
 function drawGaugeChart(canvas, runtime) {
     const canvasBoundingRect = canvas.getBoundingClientRect();
     canvas.width = canvasBoundingRect.width;
@@ -22083,7 +22090,7 @@ function drawInflectionValues(ctx, config) {
         ctx.translate(rectX + width / 2 - 0.5, rectY + height - 0.5); // -0.5 for sharper lines. see RendererPlugin.drawBorders comment
         ctx.rotate(Math.PI / 2 - inflectionValue.rotation);
         ctx.lineWidth = 2;
-        ctx.strokeStyle = GAUGE_INFLECTION_MARKER_COLOR;
+        ctx.strokeStyle = chartMutedFontColor(config.backgroundColor) + "aa";
         ctx.beginPath();
         ctx.moveTo(0, -(height - config.gauge.arcWidth));
         ctx.lineTo(0, -height - 3);
@@ -22137,22 +22144,22 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
         x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
         y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
     };
-    const textColor = getContrastedTextColor(runtime.background);
+    const textColor = chartMutedFontColor(runtime.background);
     const inflectionValues = getInflectionValues(runtime, gaugeRect, textColor, ctx);
     let x = 0, titleWidth = 0, titleHeight = 0;
     if (runtime.title.text) {
-        ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { ...runtime.title, fontSize: GAUGE_TITLE_FONT_SIZE }, "px"));
+        ({ width: titleWidth, height: titleHeight } = computeTextDimension(ctx, runtime.title.text, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "px"));
     }
     switch (runtime.title.align) {
         case "right":
-            x = boundingRect.width - titleWidth - GAUGE_TITLE_PADDING_LEFT;
+            x = boundingRect.width - titleWidth - CHART_PADDING$1;
             break;
         case "center":
             x = (boundingRect.width - titleWidth) / 2;
             break;
         case "left":
         default:
-            x = GAUGE_TITLE_PADDING_LEFT;
+            x = CHART_PADDING$1;
             break;
     }
     return {
@@ -22160,10 +22167,10 @@ function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
         height: boundingRect.height,
         title: {
             label: runtime.title.text ?? "",
-            fontSize: GAUGE_TITLE_FONT_SIZE,
+            fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
             textPosition: {
                 x,
-                y: GAUGE_TITLE_PADDING_TOP + titleHeight / 2,
+                y: CHART_PADDING_TOP + titleHeight / 2,
             },
             color: runtime.title.color ?? textColor,
             bold: runtime.title.bold,
@@ -22280,11 +22287,6 @@ function getGaugeColor(runtime) {
     }
     return runtime.colors.at(-1);
 }
-function getContrastedTextColor(backgroundColor) {
-    return relativeLuminance(backgroundColor) > 0.3
-        ? GAUGE_TEXT_COLOR
-        : GAUGE_TEXT_COLOR_HIGH_CONTRAST;
-}
 function getSegmentsOfRectangle(rectangle) {
     return [
         { start: rectangle.topLeft, end: rectangle.topRight },
@@ -26998,13 +27000,12 @@ migrationStepRegistry
     versionFrom: "7",
     migrate(data) {
         const namesTaken = [];
-        const globalForbiddenInExcel = new RegExp(FORBIDDEN_IN_EXCEL_REGEX, "g");
         for (let sheet of data.sheets || []) {
             if (!sheet.name) {
                 continue;
             }
             const oldName = sheet.name;
-            const escapedName = oldName.replace(globalForbiddenInExcel, "_");
+            const escapedName = sanitizeSheetName(oldName, "_");
             let i = 1;
             let newName = escapedName;
             while (namesTaken.includes(newName)) {
@@ -28240,37 +28241,45 @@ function interpolateData(config, values, labels, newLabels) {
     const labelRange = labelMax - labelMin;
     const normalizedLabels = labels.map((v) => (v - labelMin) / labelRange);
     const normalizedNewLabels = newLabels.map((v) => (v - labelMin) / labelRange);
-    switch (config.type) {
-        case "polynomial": {
-            const order = config.order ?? 2;
-            if (order === 1) {
-                return predictLinearValues([values], [normalizedLabels], [normalizedNewLabels], true)[0];
-            }
-            const coeffs = polynomialRegression(values, normalizedLabels, order, true).flat();
-            return normalizedNewLabels.map((v) => evaluatePolynomial(coeffs, v, order));
-        }
-        case "exponential": {
-            const positiveLogValues = [];
-            const filteredLabels = [];
-            for (let i = 0; i < values.length; i++) {
-                if (values[i] > 0) {
-                    positiveLogValues.push(Math.log(values[i]));
-                    filteredLabels.push(normalizedLabels[i]);
+    try {
+        switch (config.type) {
+            case "polynomial": {
+                const order = config.order;
+                if (!order) {
+                    return Array.from({ length: newLabels.length }, () => NaN);
+                }
+                if (order === 1) {
+                    return predictLinearValues([values], [normalizedLabels], [normalizedNewLabels], true)[0];
+                }
+                const coeffs = polynomialRegression(values, normalizedLabels, order, true).flat();
+                return normalizedNewLabels.map((v) => evaluatePolynomial(coeffs, v, order));
+            }
+            case "exponential": {
+                const positiveLogValues = [];
+                const filteredLabels = [];
+                for (let i = 0; i < values.length; i++) {
+                    if (values[i] > 0) {
+                        positiveLogValues.push(Math.log(values[i]));
+                        filteredLabels.push(normalizedLabels[i]);
+                    }
                 }
+                if (!filteredLabels.length) {
+                    return Array.from({ length: newLabels.length }, () => NaN);
+                }
+                return expM(predictLinearValues([positiveLogValues], [filteredLabels], [normalizedNewLabels], true))[0];
             }
-            if (!filteredLabels.length) {
-                return [];
+            case "logarithmic": {
+                return predictLinearValues([values], logM([normalizedLabels]), logM([normalizedNewLabels]), true)[0];
             }
-            return expM(predictLinearValues([positiveLogValues], [filteredLabels], [normalizedNewLabels], true))[0];
-        }
-        case "logarithmic": {
-            return predictLinearValues([values], logM([normalizedLabels]), logM([normalizedNewLabels]), true)[0];
-        }
-        case "trailingMovingAverage": {
-            return getMovingAverageValues(values, config.window);
+            case "trailingMovingAverage": {
+                return getMovingAverageValues(values, config.window);
+            }
+            default:
+                return Array.from({ length: newLabels.length }, () => NaN);
         }
-        default:
-            return [];
+    }
+    catch (e) {
+        return Array.from({ length: newLabels.length }, () => NaN);
     }
 }
 function getChartAxisType(chart, labelRange, getters) {
@@ -28741,54 +28750,16 @@ function getChartColorsGenerator(definition, dataSetsSize) {
     return new ColorGenerator(dataSetsSize, definition.dataSets?.map((ds) => ds.backgroundColor) || []);
 }
 
-function getCommonChartLayout(definition) {
-    // TODO FIXME: this is unused ATM. All the charts should probably use this instead oh whatever padding they are using now
-    // also look into how DEFAULT_CHART_PADDING is used in scorecards, it look strange
+function getChartLayout(definition) {
     return {
         padding: {
-            left: DEFAULT_CHART_PADDING,
-            right: DEFAULT_CHART_PADDING,
-            top: definition.title?.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
-            bottom: DEFAULT_CHART_PADDING,
+            left: CHART_PADDING$1,
+            right: CHART_PADDING$1,
+            top: CHART_PADDING_TOP,
+            bottom: CHART_PADDING_BOTTOM,
         },
     };
 }
-function getBarChartLayout(definition) {
-    return {
-        padding: computeChartPadding({
-            displayTitle: !!definition.title?.text,
-            displayLegend: definition.legendPosition === "top",
-        }),
-    };
-}
-function getLineChartLayout(definition) {
-    return {
-        padding: computeChartPadding({
-            displayTitle: !!definition.title?.text,
-            displayLegend: definition.legendPosition === "top",
-        }),
-    };
-}
-function getPieChartLayout(definition) {
-    return {
-        padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 },
-    };
-}
-function getWaterfallChartLayout(definition) {
-    return {
-        padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 },
-    };
-}
-function computeChartPadding({ displayTitle, displayLegend, }) {
-    let top = 25;
-    if (displayTitle) {
-        top = 0;
-    }
-    else if (displayLegend) {
-        top = 10;
-    }
-    return { left: 20, right: 20, top, bottom: 10 };
-}
 
 function getLegendDisplayOptions(definition, args) {
     return {
@@ -28846,11 +28817,12 @@ function getScatterChartLegend(definition, args) {
     return {
         ...INTERACTIVE_LEGEND_CONFIG,
         ...getLegendDisplayOptions(definition),
-        labels: {
-            color: chartFontColor(definition.background),
-            boxHeight: 6,
-            usePointStyle: true,
-        },
+        ...getCustomLegendLabels(chartFontColor(definition.background), {
+            pointStyle: "circle",
+            // the stroke is the border around the circle, so increasing its size with the chart's color reduce the size of the circle
+            strokeStyle: definition.background || "#ffffff",
+            lineWidth: 8,
+        }),
     };
 }
 function getComboChartLegend(definition, args) {
@@ -28939,10 +28911,10 @@ const INTERACTIVE_LEGEND_CONFIG = {
         target.style.cursor = "default";
     },
     onClick: (event, legendItem, legend) => {
-        if (!legend.legendItems) {
+        const index = legendItem.datasetIndex;
+        if (!legend.legendItems || index === undefined) {
             return;
         }
-        const index = legend.legendItems.indexOf(legendItem);
         if (legend.chart.isDatasetVisible(index)) {
             legend.chart.hide(index);
         }
@@ -28958,15 +28930,29 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
         labels: {
             color: fontColor,
             usePointStyle: true,
-            generateLabels: (chart) => chart.data.datasets.map((dataset, index) => ({
-                text: dataset.label ?? "",
-                fontColor,
-                strokeStyle: dataset.borderColor,
-                fillStyle: dataset.backgroundColor,
-                hidden: !chart.isDatasetVisible(index),
-                pointStyle: dataset.type === "line" ? "line" : "rect",
-                ...legendLabelConfig,
-            })),
+            generateLabels: (chart) => chart.data.datasets.map((dataset, index) => {
+                if (dataset["xAxisID"] === TREND_LINE_XAXIS_ID) {
+                    return {
+                        text: dataset.label ?? "",
+                        fontColor,
+                        strokeStyle: dataset.borderColor,
+                        hidden: !chart.isDatasetVisible(index),
+                        pointStyle: "line",
+                        datasetIndex: index,
+                        lineWidth: 3,
+                    };
+                }
+                return {
+                    text: dataset.label ?? "",
+                    fontColor,
+                    strokeStyle: dataset.borderColor,
+                    fillStyle: dataset.backgroundColor,
+                    hidden: !chart.isDatasetVisible(index),
+                    pointStyle: dataset.type === "line" ? "line" : "rect",
+                    datasetIndex: index,
+                    ...legendLabelConfig,
+                };
+            }),
         },
     };
 }
@@ -29114,6 +29100,7 @@ function getChartAxisTitleRuntime(design) {
             font: {
                 style: italic ? "italic" : "normal",
                 weight: bold ? "bold" : "normal",
+                size: design.title.fontSize ?? CHART_AXIS_TITLE_FONT_SIZE,
             },
             align: align === "left" ? "start" : align === "right" ? "end" : "center",
         };
@@ -29179,17 +29166,22 @@ function getChartShowValues(definition, args) {
 
 function getChartTitle(definition) {
     const chartTitle = definition.title;
-    const fontColor = chartFontColor(definition.background);
+    const fontColor = chartMutedFontColor(definition.background);
     return {
         display: !!chartTitle.text,
         text: _t(chartTitle.text),
         color: chartTitle?.color ?? fontColor,
         align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
         font: {
-            size: DEFAULT_CHART_FONT_SIZE,
+            size: definition.title.fontSize ?? CHART_TITLE_FONT_SIZE,
             weight: chartTitle.bold ? "bold" : "normal",
             style: chartTitle.italic ? "italic" : "normal",
         },
+        padding: {
+            // Disable title top/left/right padding to use the chart padding instead.
+            // The legend already has a top padding, so bottom padding is useless for the title there.
+            bottom: definition.legendPosition === "top" ? 0 : CHART_PADDING$1,
+        },
     };
 }
 
@@ -29336,26 +29328,23 @@ var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
   canChartParseLabels: canChartParseLabels,
   getBarChartData: getBarChartData,
   getBarChartDatasets: getBarChartDatasets,
-  getBarChartLayout: getBarChartLayout,
   getBarChartLegend: getBarChartLegend,
   getBarChartScales: getBarChartScales,
   getBarChartTooltip: getBarChartTooltip,
   getChartLabelFormat: getChartLabelFormat,
+  getChartLayout: getChartLayout,
   getChartShowValues: getChartShowValues,
   getChartTitle: getChartTitle,
   getComboChartDatasets: getComboChartDatasets,
   getComboChartLegend: getComboChartLegend,
-  getCommonChartLayout: getCommonChartLayout,
   getData: getData,
   getLineChartData: getLineChartData,
   getLineChartDatasets: getLineChartDatasets,
-  getLineChartLayout: getLineChartLayout,
   getLineChartLegend: getLineChartLegend,
   getLineChartScales: getLineChartScales,
   getLineChartTooltip: getLineChartTooltip,
   getPieChartData: getPieChartData,
   getPieChartDatasets: getPieChartDatasets,
-  getPieChartLayout: getPieChartLayout,
   getPieChartLegend: getPieChartLegend,
   getPieChartTooltip: getPieChartTooltip,
   getPyramidChartData: getPyramidChartData,
@@ -29371,7 +29360,6 @@ var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
   getScatterChartScales: getScatterChartScales,
   getTrendDatasetForBarChart: getTrendDatasetForBarChart,
   getTrendDatasetForLineChart: getTrendDatasetForLineChart,
-  getWaterfallChartLayout: getWaterfallChartLayout,
   getWaterfallChartLegend: getWaterfallChartLegend,
   getWaterfallChartScales: getWaterfallChartScales,
   getWaterfallChartTooltip: getWaterfallChartTooltip,
@@ -29519,7 +29507,7 @@ function createBarChartRuntime(chart, getters) {
         options: {
             ...CHART_COMMON_OPTIONS,
             indexAxis: chart.horizontal ? "y" : "x",
-            layout: getBarChartLayout(definition),
+            layout: getChartLayout(),
             scales: getBarChartScales(definition, chartData),
             plugins: {
                 title: getChartTitle(definition),
@@ -29671,7 +29659,7 @@ function createComboChartRuntime(chart, getters) {
         },
         options: {
             ...CHART_COMMON_OPTIONS,
-            layout: getBarChartLayout(definition),
+            layout: getChartLayout(),
             scales: getBarChartScales(definition, chartData),
             plugins: {
                 title: getChartTitle(definition),
@@ -30072,7 +30060,7 @@ function createLineChartRuntime(chart, getters) {
         },
         options: {
             ...CHART_COMMON_OPTIONS,
-            layout: getLineChartLayout(definition),
+            layout: getChartLayout(),
             scales: getLineChartScales(definition, chartData),
             plugins: {
                 title: getChartTitle(definition),
@@ -30207,7 +30195,7 @@ function createPieChartRuntime(chart, getters) {
         },
         options: {
             ...CHART_COMMON_OPTIONS,
-            layout: getPieChartLayout(definition),
+            layout: getChartLayout(),
             plugins: {
                 title: getChartTitle(definition),
                 legend: getPieChartLegend(definition, chartData),
@@ -30344,7 +30332,7 @@ function createPyramidChartRuntime(chart, getters) {
         options: {
             ...CHART_COMMON_OPTIONS,
             indexAxis: "y",
-            layout: getBarChartLayout(definition),
+            layout: getChartLayout(),
             scales: getPyramidChartScales(definition, chartData),
             plugins: {
                 title: getChartTitle(definition),
@@ -30493,7 +30481,7 @@ function createRadarChartRuntime(chart, getters) {
         },
         options: {
             ...CHART_COMMON_OPTIONS,
-            layout: getBarChartLayout(definition),
+            layout: getChartLayout(),
             scales: getRadarChartScales(definition, chartData),
             plugins: {
                 title: getChartTitle(definition),
@@ -30646,7 +30634,7 @@ function createScatterChartRuntime(chart, getters) {
         },
         options: {
             ...CHART_COMMON_OPTIONS,
-            layout: getLineChartLayout(definition),
+            layout: getChartLayout(),
             scales: getScatterChartScales(definition, chartData),
             plugins: {
                 title: getChartTitle(definition),
@@ -30807,7 +30795,7 @@ function createWaterfallChartRuntime(chart, getters) {
         },
         options: {
             ...CHART_COMMON_OPTIONS,
-            layout: getWaterfallChartLayout(definition),
+            layout: getChartLayout(),
             scales: getWaterfallChartScales(definition, chartData),
             plugins: {
                 title: getChartTitle(definition),
@@ -33117,6 +33105,7 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   adaptChartRange: adaptChartRange,
   chartFactory: chartFactory,
   chartFontColor: chartFontColor,
+  chartMutedFontColor: chartMutedFontColor,
   chartRuntimeFactory: chartRuntimeFactory,
   chartToImage: chartToImage,
   checkDataset: checkDataset,
@@ -37409,6 +37398,95 @@ class ColorPickerWidget extends Component {
     }
 }
 
+css /* scss */ `
+  .o-font-size-editor {
+    height: calc(100% - 4px);
+    input.o-font-size {
+      outline-color: ${SELECTION_BORDER_COLOR};
+      height: 20px;
+      width: 23px;
+    }
+  }
+  .o-text-options > div {
+    cursor: pointer;
+    line-height: 26px;
+    padding: 3px 12px;
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.08);
+    }
+  }
+`;
+class FontSizeEditor extends Component {
+    static template = "o-spreadsheet-FontSizeEditor";
+    static props = {
+        currentFontSize: Number,
+        onFontSizeChanged: Function,
+        onToggle: { type: Function, optional: true },
+        class: String,
+    };
+    static components = { Popover };
+    fontSizes = FONT_SIZES;
+    dropdown = useState({ isOpen: false });
+    inputRef = useRef("inputFontSize");
+    rootEditorRef = useRef("FontSizeEditor");
+    fontSizeListRef = useRef("fontSizeList");
+    setup() {
+        useExternalListener(window, "click", this.onExternalClick, { capture: true });
+    }
+    get popoverProps() {
+        const { x, y, width, height } = this.rootEditorRef.el.getBoundingClientRect();
+        return {
+            anchorRect: { x, y, width, height },
+            positioning: "BottomLeft",
+            verticalOffset: 0,
+        };
+    }
+    onExternalClick(ev) {
+        if (!isChildEvent(this.fontSizeListRef.el, ev) && !isChildEvent(this.rootEditorRef.el, ev)) {
+            this.closeFontList();
+        }
+    }
+    toggleFontList() {
+        const isOpen = this.dropdown.isOpen;
+        if (!isOpen) {
+            this.props.onToggle?.();
+            this.inputRef.el.focus();
+        }
+        else {
+            this.closeFontList();
+        }
+    }
+    closeFontList() {
+        this.dropdown.isOpen = false;
+    }
+    setSize(fontSizeStr) {
+        const fontSize = clip(Math.floor(parseFloat(fontSizeStr)), 1, 400);
+        this.props.onFontSizeChanged(fontSize);
+        this.closeFontList();
+    }
+    setSizeFromInput(ev) {
+        this.setSize(ev.target.value);
+    }
+    setSizeFromList(fontSizeStr) {
+        this.setSize(fontSizeStr);
+    }
+    onInputFocused(ev) {
+        this.dropdown.isOpen = true;
+        ev.target.select();
+    }
+    onInputKeydown(ev) {
+        if (ev.key === "Enter" || ev.key === "Escape") {
+            this.closeFontList();
+            const target = ev.target;
+            // In the case of a ESCAPE key, we get the previous font size back
+            if (ev.key === "Escape") {
+                target.value = `${this.props.currentFontSize}`;
+            }
+            this.props.onToggle?.();
+        }
+    }
+}
+
 css /* scss */ `
   .o-chart-title-designer {
     > span {
@@ -37443,7 +37521,7 @@ css /* scss */ `
 `;
 class ChartTitle extends Component {
     static template = "o-spreadsheet.ChartTitle";
-    static components = { Section, ColorPickerWidget };
+    static components = { Section, ColorPickerWidget, FontSizeEditor };
     static props = {
         title: { type: String, optional: true },
         updateTitle: Function,
@@ -37452,7 +37530,8 @@ class ChartTitle extends Component {
         toggleBold: { type: Function, optional: true },
         updateAlignment: { type: Function, optional: true },
         updateColor: { type: Function, optional: true },
-        style: { type: Object, optional: true },
+        style: Object,
+        onFontSizeChanged: Function,
     };
     static defaultProps = {
         title: "",
@@ -37467,6 +37546,9 @@ class ChartTitle extends Component {
     updateTitle(ev) {
         this.props.updateTitle(ev.target.value);
     }
+    updateFontSize(fontSize) {
+        this.props.onFontSizeChanged(fontSize);
+    }
     toggleDropdownTool(tool, ev) {
         const isOpen = this.state.activeTool === tool;
         this.closeMenus();
@@ -37509,6 +37591,7 @@ class AxisDesignEditor extends Component {
         return {
             color: "",
             align: "center",
+            fontSize: CHART_AXIS_TITLE_FONT_SIZE,
             ...axisDesign.title,
         };
     }
@@ -37526,6 +37609,17 @@ class AxisDesignEditor extends Component {
         };
         this.props.updateChart(this.props.figureId, { axesDesign });
     }
+    updateAxisTitleFontSize(fontSize) {
+        const axesDesign = this.props.definition.axesDesign ?? {};
+        axesDesign[this.state.currentAxis] = {
+            ...axesDesign[this.state.currentAxis],
+            title: {
+                ...(axesDesign[this.state.currentAxis]?.title ?? {}),
+                fontSize,
+            },
+        };
+        this.props.updateChart(this.props.figureId, { axesDesign });
+    }
     toggleBoldAxisTitle() {
         const axesDesign = this.props.definition.axesDesign ?? {};
         const title = axesDesign[this.state.currentAxis]?.title ?? {};
@@ -37645,8 +37739,12 @@ class GeneralDesignEditor extends Component {
         figureId: String,
         definition: Object,
         updateChart: Function,
+        defaultChartTitleFontSize: { type: Number, optional: true },
         slots: { type: Object, optional: true },
     };
+    static defaultProps = {
+        defaultChartTitleFontSize: CHART_TITLE_FONT_SIZE,
+    };
     state;
     setup() {
         this.state = useState({
@@ -37672,6 +37770,7 @@ class GeneralDesignEditor extends Component {
     get titleStyle() {
         return {
             align: "left",
+            fontSize: this.props.defaultChartTitleFontSize,
             ...this.title,
         };
     }
@@ -37680,6 +37779,10 @@ class GeneralDesignEditor extends Component {
         this.props.updateChart(this.props.figureId, { title });
         this.state.activeTool = "";
     }
+    updateChartTitleFontSize(fontSize) {
+        const title = { ...this.title, fontSize };
+        this.props.updateChart(this.props.figureId, { title });
+    }
     toggleBoldChartTitle() {
         let title = this.title;
         title = { ...title, bold: !title.bold };
@@ -37887,7 +37990,7 @@ class SeriesWithAxisDesignEditor extends Component {
             case "polynomial":
                 config = {
                     type: "polynomial",
-                    order: type === "linear" ? 1 : 2,
+                    order: type === "linear" ? 1 : this.getMaxPolynomialDegree(index),
                 };
                 break;
             case "exponential":
@@ -38347,6 +38450,9 @@ class ScorecardChartDesignPanel extends Component {
     get humanizeNumbersLabel() {
         return _t("Humanize numbers");
     }
+    get defaultScorecardTitleFontSize() {
+        return SCORECARD_CHART_TITLE_FONT_SIZE;
+    }
     updateHumanizeNumbers(humanize) {
         this.props.updateChart(this.props.figureId, { humanize });
     }
@@ -39810,6 +39916,15 @@ class StandaloneComposerStore extends AbstractComposerStore {
     confirmEdition(content) {
         this.args().onConfirm(content);
     }
+    getTokenColor(token) {
+        if (token.type === "SYMBOL") {
+            const matchedColor = this.args().getContextualColoredSymbolToken?.(token);
+            if (matchedColor) {
+                return matchedColor;
+            }
+        }
+        return super.getTokenColor(token);
+    }
 }
 
 css /* scss */ `
@@ -39847,6 +39962,7 @@ class StandaloneComposer extends Component {
         placeholder: { type: String, optional: true },
         class: { type: String, optional: true },
         invalid: { type: Boolean, optional: true },
+        getContextualColoredSymbolToken: { type: Function, optional: true },
     };
     static components = { Composer };
     static defaultProps = {
@@ -39863,6 +39979,7 @@ class StandaloneComposer extends Component {
             content: this.props.composerContent,
             contextualAutocomplete: this.props.contextualAutocomplete,
             defaultRangeSheetId: this.props.defaultRangeSheetId,
+            getContextualColoredSymbolToken: this.props.getContextualColoredSymbolToken,
         }));
         this.standaloneComposerStore = standaloneComposerStore;
         this.composerInterface = {
@@ -43423,7 +43540,7 @@ function createMeasureAutoComplete(pivot, forComputedMeasure) {
                 return {
                     text: text,
                     description: measure.displayName,
-                    htmlContent: [{ value: text, color: tokenColors.FUNCTION }],
+                    htmlContent: [{ value: text, color: PIVOT_TOKEN_COLOR }],
                     fuzzySearchKey: measure.displayName + text + measure.fieldName,
                 };
             });
@@ -43432,7 +43549,7 @@ function createMeasureAutoComplete(pivot, forComputedMeasure) {
                 return {
                     text: text,
                     description: dimension.displayName,
-                    htmlContent: [{ value: text, color: tokenColors.FUNCTION }],
+                    htmlContent: [{ value: text, color: PIVOT_TOKEN_COLOR }],
                     fuzzySearchKey: dimension.displayName + text + dimension.fieldName,
                 };
             });
@@ -43512,6 +43629,18 @@ class PivotMeasureEditor extends Component {
             measure: this.props.measure,
         });
     }
+    getColoredSymbolToken(token) {
+        if (token.type !== "SYMBOL") {
+            return undefined;
+        }
+        const tokenValue = unquote(token.value, "'");
+        if (this.props.definition.columns.some((col) => col.nameWithGranularity === tokenValue) ||
+            this.props.definition.rows.some((row) => row.nameWithGranularity === tokenValue) ||
+            this.props.definition.measures.some((measure) => measure.id === tokenValue && measure.id !== this.props.measure.id)) {
+            return PIVOT_TOKEN_COLOR;
+        }
+        return undefined;
+    }
 }
 
 css /* scss */ `
@@ -51886,7 +52015,7 @@ class CellPlugin extends CorePlugin {
             for (let col = zone.left; col <= zone.right; col++) {
                 for (let row = zone.top; row <= zone.bottom; row++) {
                     const cell = this.getters.getCell({ sheetId, col, row });
-                    if (cell) {
+                    if (cell?.isFormula || cell?.content) {
                         this.dispatch("UPDATE_CELL", {
                             sheetId: sheetId,
                             content: "",
@@ -51922,7 +52051,6 @@ class CellPlugin extends CorePlugin {
         for (let zone of recomputeZones(zones)) {
             for (let col = zone.left; col <= zone.right; col++) {
                 for (let row = zone.top; row <= zone.bottom; row++) {
-                    // commandHelpers.updateCell(sheetId, col, row, { style: undefined});
                     this.dispatch("UPDATE_CELL", {
                         sheetId,
                         col,
@@ -55341,7 +55469,7 @@ class SheetPlugin extends CorePlugin {
         if (orderedSheetIds.find((id) => sheets[id]?.name.toLowerCase() === name && id !== cmd.sheetId)) {
             return "DuplicatedSheetName" /* CommandResult.DuplicatedSheetName */;
         }
-        if (FORBIDDEN_IN_EXCEL_REGEX.test(name)) {
+        if (FORBIDDEN_SHEETNAME_CHARS_IN_EXCEL_REGEX.test(name)) {
             return "ForbiddenCharactersInSheetName" /* CommandResult.ForbiddenCharactersInSheetName */;
         }
         return "Success" /* CommandResult.Success */;
@@ -60749,11 +60877,13 @@ class PivotUIPlugin extends UIPlugin {
             return EMPTY_PIVOT_CELL;
         }
         if (functionName === "PIVOT") {
-            const includeTotal = args[2] === false ? false : undefined;
-            const includeColumnHeaders = args[3] === false ? false : undefined;
+            const includeTotal = toScalar(args[2]);
+            const shouldIncludeTotal = includeTotal === undefined ? true : toBoolean(includeTotal);
+            const includeColumnHeaders = toScalar(args[3]);
+            const shouldIncludeColumnHeaders = includeColumnHeaders === undefined ? true : toBoolean(includeColumnHeaders);
             const pivotCells = pivot
                 .getTableStructure()
-                .getPivotCells(includeTotal, includeColumnHeaders);
+                .getPivotCells(shouldIncludeTotal, shouldIncludeColumnHeaders);
             const pivotCol = position.col - mainPosition.col;
             const pivotRow = position.row - mainPosition.row;
             return pivotCells[pivotCol][pivotRow];
@@ -62907,7 +63037,7 @@ class InsertPivotPlugin extends UIPlugin {
     getPivotDuplicateSheetName(pivotName) {
         let i = 1;
         const names = this.getters.getSheetIds().map((id) => this.getters.getSheetName(id));
-        const sanitizedName = pivotName.replace(new RegExp(FORBIDDEN_IN_EXCEL_REGEX, "g"), " ");
+        const sanitizedName = sanitizeSheetName(pivotName);
         let name = sanitizedName;
         while (names.includes(name)) {
             name = `${sanitizedName} (${i})`;
@@ -66983,7 +67113,7 @@ function interactiveRenameSheet(env, sheetId, name, errorCallback) {
         env.raiseError(_t("A sheet with the name %s already exists. Please select another name.", name), errorCallback);
     }
     else if (result.reasons.includes("ForbiddenCharactersInSheetName" /* CommandResult.ForbiddenCharactersInSheetName */)) {
-        env.raiseError(_t("Some used characters are not allowed in a sheet name (Forbidden characters are %s).", FORBIDDEN_SHEET_CHARS.join(" ")), errorCallback);
+        env.raiseError(_t("Some used characters are not allowed in a sheet name (Forbidden characters are %s).", FORBIDDEN_SHEETNAME_CHARS.join(" ")), errorCallback);
     }
 }
 
@@ -68213,7 +68343,7 @@ class ActionButton extends Component {
     setup() {
         onWillUpdateProps((nextProps) => {
             if (nextProps.action !== this.props.action) {
-                this.actionButton = createAction(this.props.action);
+                this.actionButton = createAction(nextProps.action);
             }
         });
     }
@@ -68549,88 +68679,6 @@ class TopBarComposer extends Component {
     }
 }
 
-css /* scss */ `
-  .o-font-size-editor {
-    height: calc(100% - 4px);
-    input.o-font-size {
-      outline-color: ${SELECTION_BORDER_COLOR};
-      height: 20px;
-      width: 23px;
-    }
-  }
-  .o-text-options > div {
-    cursor: pointer;
-    line-height: 26px;
-    padding: 3px 12px;
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.08);
-    }
-  }
-`;
-class FontSizeEditor extends Component {
-    static template = "o-spreadsheet-FontSizeEditor";
-    static props = {
-        onToggle: Function,
-        dropdownStyle: String,
-        class: String,
-    };
-    static components = {};
-    fontSizes = FONT_SIZES;
-    dropdown = useState({ isOpen: false });
-    inputRef = useRef("inputFontSize");
-    rootEditorRef = useRef("FontSizeEditor");
-    setup() {
-        useExternalListener(window, "click", this.onExternalClick, { capture: true });
-    }
-    onExternalClick(ev) {
-        if (!isChildEvent(this.rootEditorRef.el, ev)) {
-            this.closeFontList();
-        }
-    }
-    get currentFontSize() {
-        return this.env.model.getters.getCurrentStyle().fontSize || DEFAULT_FONT_SIZE;
-    }
-    toggleFontList() {
-        const isOpen = this.dropdown.isOpen;
-        if (!isOpen) {
-            this.props.onToggle();
-            this.inputRef.el.focus();
-        }
-        else {
-            this.closeFontList();
-        }
-    }
-    closeFontList() {
-        this.dropdown.isOpen = false;
-    }
-    setSize(fontSizeStr) {
-        const fontSize = clip(Math.floor(parseFloat(fontSizeStr)), 1, 400);
-        setStyle(this.env, { fontSize });
-        this.closeFontList();
-    }
-    setSizeFromInput(ev) {
-        this.setSize(ev.target.value);
-    }
-    setSizeFromList(fontSizeStr) {
-        this.setSize(fontSizeStr);
-    }
-    onInputFocused(ev) {
-        this.dropdown.isOpen = true;
-        ev.target.select();
-    }
-    onInputKeydown(ev) {
-        if (ev.key === "Enter" || ev.key === "Escape") {
-            this.closeFontList();
-            const target = ev.target;
-            // In the case of a ESCAPE key, we get the previous font size back
-            if (ev.key === "Escape") {
-                target.value = `${this.currentFontSize}`;
-            }
-            this.props.onToggle();
-        }
-    }
-}
-
 class TableDropdownButton extends Component {
     static template = "o-spreadsheet-TableDropdownButton";
     static components = { TableStylesPopover, ActionButton };
@@ -68799,9 +68847,6 @@ class TopBar extends Component {
         onClick: Function,
         dropdownMaxHeight: Number,
     };
-    get dropdownStyle() {
-        return `max-height:${this.props.dropdownMaxHeight}px`;
-    }
     static components = {
         ColorPickerWidget,
         ColorPicker,
@@ -68839,6 +68884,9 @@ class TopBar extends Component {
             .getAllOrdered()
             .filter((item) => !item.isVisible || item.isVisible(this.env));
     }
+    get currentFontSize() {
+        return this.env.model.getters.getCurrentStyle().fontSize || DEFAULT_FONT_SIZE;
+    }
     onExternalClick(ev) {
         // TODO : manage click events better. We need this piece of code
         // otherwise the event opening the menu would close it on the same frame.
@@ -68917,6 +68965,9 @@ class TopBar extends Component {
         setStyle(this.env, { [target]: color });
         this.onClick();
     }
+    setFontSize(fontSize) {
+        setStyle(this.env, { fontSize });
+    }
 }
 
 function instantiateClipboard() {
@@ -70917,12 +70968,11 @@ function createChart(chart, chartSheetIndex, data) {
     // <manualLayout/> to manually position the chart in the figure container
     let title = escapeXml ``;
     if (chart.data.title?.text) {
-        const color = chart.data.title.color
-            ? toXlsxHexColor(chart.data.title.color)
-            : chart.data.fontColor;
+        const titleColor = toXlsxHexColor(chartMutedFontColor(chart.data.backgroundColor));
+        const fontSize = chart.data.title.fontSize ?? CHART_TITLE_FONT_SIZE;
         title = escapeXml /*xml*/ `
       <c:title>
-        ${insertText(chart.data.title.text, color, DEFAULT_CHART_FONT_SIZE, chart.data.title)}
+        ${insertText(chart.data.title.text, titleColor, fontSize, chart.data.title)}
         <c:overlay val="0" />
       </c:title>
     `;
@@ -71012,7 +71062,7 @@ function lineAttributes(params) {
     </a:ln>
   `;
 }
-function insertText(text, fontColor = "000000", fontsize = DEFAULT_CHART_FONT_SIZE, style = {}) {
+function insertText(text, fontColor = "000000", fontsize = CHART_TITLE_FONT_SIZE, style = {}) {
     return escapeXml /*xml*/ `
     <c:tx>
       <c:rich>
@@ -71513,6 +71563,7 @@ function addAx(position, axisName, axId, crossAxId, title, defaultFontColor, del
     // Each Axis present inside a graph needs to be identified by an unsigned integer in order to be referenced by its crossAxis.
     // I.e. x-axis, will reference y-axis and vice-versa.
     const color = title?.color ? toXlsxHexColor(title.color) : defaultFontColor;
+    const fontSize = title?.fontSize ?? CHART_AXIS_TITLE_FONT_SIZE;
     return escapeXml /*xml*/ `
     <${axisName}>
       <c:axId val="${axId}"/>
@@ -71528,7 +71579,7 @@ function addAx(position, axisName, axId, crossAxId, title, defaultFontColor, del
       <c:minorTickMark val="none" />
       <c:numFmt formatCode="General" sourceLinked="1" />
       <c:title>
-        ${insertText(title?.text ?? "", color, 10, title)}
+        ${insertText(title?.text ?? "", color, fontSize, title)}
       </c:title>
       ${insertTextProperties(10, defaultFontColor)}
     </${axisName}>
@@ -73639,6 +73690,7 @@ const helpers = {
     createPivotFormula,
     areDomainArgsFieldsValid,
     splitReference,
+    sanitizeSheetName,
 };
 const links = {
     isMarkdownLink,
@@ -73733,6 +73785,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.1.0-alpha.6";
-__info__.date = "2024-11-28T09:06:59.527Z";
-__info__.hash = "875c901";
+__info__.version = "18.1.0-alpha.7";
+__info__.date = "2024-12-05T10:40:26.512Z";
+__info__.hash = "7b1c39b";