@odoo/o-spreadsheet 18.2.4 → 18.2.6

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.2.4
- * @date 2025-03-19T08:20:57.717Z
- * @hash 958936a
+ * @version 18.2.6
+ * @date 2025-04-04T08:41:26.115Z
+ * @hash faa00e2
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, App, blockDom, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -804,8 +804,7 @@ function removeFalsyAttributes(obj) {
  *
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes
  */
-const whiteSpaceSpecialCharacters = [
-    " ",
+const specialWhiteSpaceSpecialCharacters = [
     "\t",
     "\f",
     "\v",
@@ -820,7 +819,7 @@ const whiteSpaceSpecialCharacters = [
     String.fromCharCode(parseInt("3000", 16)),
     String.fromCharCode(parseInt("feff", 16)),
 ];
-const whiteSpaceRegexp = new RegExp(whiteSpaceSpecialCharacters.join("|"), "g");
+const specialWhiteSpaceRegexp = new RegExp(specialWhiteSpaceSpecialCharacters.join("|"), "g");
 const newLineRegexp = /(\r\n|\r)/g;
 /**
  * Replace all different newlines characters by \n
@@ -1131,7 +1130,10 @@ function rgbaStringToHex(color) {
     }
     else if (stringVals.length === 4) {
         const alpha = parseFloat(stringVals.pop() || "1");
-        alphaHex = Math.round((alpha || 1) * 255);
+        if (isNaN(alpha)) {
+            throw new Error("invalid alpha value");
+        }
+        alphaHex = Math.round(alpha * 255);
     }
     const vals = stringVals.map((val) => parseInt(val, 10));
     if (alphaHex !== 255) {
@@ -6794,8 +6796,12 @@ function tokenize(str, locale = DEFAULT_LOCALE) {
     str = replaceNewLines(str);
     const chars = new TokenizingChars(str);
     const result = [];
+    const tokenizeSpace = specialWhiteSpaceRegexp.test(str)
+        ? tokenizeSpecialCharacterSpace
+        : tokenizeSimpleSpace;
     while (!chars.isOver()) {
-        let token = tokenizeSpace(chars) ||
+        let token = tokenizeNewLine(chars) ||
+            tokenizeSpace(chars) ||
             tokenizeArgsSeparator(chars, locale) ||
             tokenizeParenthesis(chars) ||
             tokenizeOperator(chars) ||
@@ -6929,17 +6935,19 @@ function tokenizeSymbol(chars) {
     }
     return null;
 }
-function tokenizeSpace(chars) {
-    let length = 0;
-    while (chars.current === NEWLINE) {
-        length++;
-        chars.shift();
+function tokenizeSpecialCharacterSpace(chars) {
+    let spaces = "";
+    while (chars.current === " " || (chars.current && chars.current.match(specialWhiteSpaceRegexp))) {
+        spaces += chars.shift();
     }
-    if (length) {
-        return { type: "SPACE", value: NEWLINE.repeat(length) };
+    if (spaces) {
+        return { type: "SPACE", value: spaces };
     }
+    return null;
+}
+function tokenizeSimpleSpace(chars) {
     let spaces = "";
-    while (chars.current && chars.current.match(whiteSpaceRegexp)) {
+    while (chars.current === " ") {
         spaces += chars.shift();
     }
     if (spaces) {
@@ -6947,6 +6955,17 @@ function tokenizeSpace(chars) {
     }
     return null;
 }
+function tokenizeNewLine(chars) {
+    let length = 0;
+    while (chars.current === NEWLINE) {
+        length++;
+        chars.shift();
+    }
+    if (length) {
+        return { type: "SPACE", value: NEWLINE.repeat(length) };
+    }
+    return null;
+}
 function tokenizeInvalidRange(chars) {
     if (chars.currentStartsWith(CellErrorType.InvalidReference)) {
         chars.advanceBy(CellErrorType.InvalidReference.length);
@@ -6999,7 +7018,7 @@ function isValidLocale(locale) {
  */
 function canonicalizeNumberContent(content, locale) {
     return content.startsWith("=")
-        ? canonicalizeFormula$1(content, locale)
+        ? canonicalizeFormula(content, locale)
         : canonicalizeNumberLiteral(content, locale);
 }
 /**
@@ -7014,7 +7033,7 @@ function canonicalizeNumberContent(content, locale) {
  */
 function canonicalizeContent(content, locale) {
     return content.startsWith("=")
-        ? canonicalizeFormula$1(content, locale)
+        ? canonicalizeFormula(content, locale)
         : canonicalizeLiteral(content, locale);
 }
 /**
@@ -7030,15 +7049,21 @@ function localizeContent(content, locale) {
         ? localizeFormula(content, locale)
         : localizeLiteral(content, locale);
 }
+/** Change a number string to its canonical form (en_US locale) */
+function canonicalizeNumberValue(content, locale) {
+    return content.startsWith("=")
+        ? canonicalizeFormula(content, locale)
+        : canonicalizeNumberLiteral(content, locale);
+}
 /** Change a formula to its canonical form (en_US locale) */
-function canonicalizeFormula$1(formula, locale) {
-    return _localizeFormula$1(formula, locale, DEFAULT_LOCALE);
+function canonicalizeFormula(formula, locale) {
+    return _localizeFormula(formula, locale, DEFAULT_LOCALE);
 }
 /** Change a formula from the canonical form to the given locale */
 function localizeFormula(formula, locale) {
-    return _localizeFormula$1(formula, DEFAULT_LOCALE, locale);
+    return _localizeFormula(formula, DEFAULT_LOCALE, locale);
 }
-function _localizeFormula$1(formula, fromLocale, toLocale) {
+function _localizeFormula(formula, fromLocale, toLocale) {
     if (fromLocale.formulaArgSeparator === toLocale.formulaArgSeparator &&
         fromLocale.decimalSeparator === toLocale.decimalSeparator) {
         return formula;
@@ -7193,37 +7218,6 @@ function getDateTimeFormat(locale) {
     return locale.dateFormat + " " + locale.timeFormat;
 }
 
-/** Change a number string to its canonical form (en_US locale) */
-function canonicalizeNumberValue(content, locale) {
-    return content.startsWith("=")
-        ? canonicalizeFormula(content, locale)
-        : canonicalizeNumberLiteral(content, locale);
-}
-/** Change a formula to its canonical form (en_US locale) */
-function canonicalizeFormula(formula, locale) {
-    return _localizeFormula(formula, locale, DEFAULT_LOCALE);
-}
-function _localizeFormula(formula, fromLocale, toLocale) {
-    if (fromLocale.formulaArgSeparator === toLocale.formulaArgSeparator &&
-        fromLocale.decimalSeparator === toLocale.decimalSeparator) {
-        return formula;
-    }
-    const tokens = tokenize(formula, fromLocale);
-    let localizedFormula = "";
-    for (const token of tokens) {
-        if (token.type === "NUMBER") {
-            localizedFormula += token.value.replace(fromLocale.decimalSeparator, toLocale.decimalSeparator);
-        }
-        else if (token.type === "ARG_SEPARATOR") {
-            localizedFormula += toLocale.formulaArgSeparator;
-        }
-        else {
-            localizedFormula += token.value;
-        }
-    }
-    return localizedFormula;
-}
-
 function boolAnd(args) {
     let foundBoolean = false;
     let acc = true;
@@ -9598,7 +9592,161 @@ class ComposerFocusStore extends SpreadsheetStore {
     }
 }
 
+/**
+ * This file is largely inspired by owl 1.
+ * `css` tag has been removed from owl 2 without workaround to manage css.
+ * So, the solution was to import the behavior of owl 1 directly in our
+ * codebase, with one difference: the css is added to the sheet as soon as the
+ * css tag is executed. In owl 1, the css was added as soon as a Component was
+ * created for the first time.
+ */
+const STYLESHEETS = {};
+let nextId = 0;
+/**
+ * CSS tag helper for defining inline stylesheets.  With this, one can simply define
+ * an inline stylesheet with just the following code:
+ * ```js
+ *     css`.component-a { color: red; }`;
+ * ```
+ */
+function css(strings, ...args) {
+    const name = `__sheet__${nextId++}`;
+    const value = String.raw(strings, ...args);
+    registerSheet(name, value);
+    activateSheet(name);
+    return name;
+}
+function processSheet(str) {
+    const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
+    const selectorStack = [];
+    const parts = [];
+    let rules = [];
+    function generateSelector(stackIndex, parentSelector) {
+        const parts = [];
+        for (const selector of selectorStack[stackIndex]) {
+            let part = (parentSelector && parentSelector + " " + selector) || selector;
+            if (part.includes("&")) {
+                part = selector.replace(/&/g, parentSelector || "");
+            }
+            if (stackIndex < selectorStack.length - 1) {
+                part = generateSelector(stackIndex + 1, part);
+            }
+            parts.push(part);
+        }
+        return parts.join(", ");
+    }
+    function generateRules() {
+        if (rules.length) {
+            parts.push(generateSelector(0) + " {");
+            parts.push(...rules);
+            parts.push("}");
+            rules = [];
+        }
+    }
+    while (tokens.length) {
+        let token = tokens.shift();
+        if (token === "}") {
+            generateRules();
+            selectorStack.pop();
+        }
+        else {
+            if (tokens[0] === "{") {
+                generateRules();
+                selectorStack.push(token.split(/\s*,\s*/));
+                tokens.shift();
+            }
+            if (tokens[0] === ";") {
+                rules.push("  " + token + ";");
+            }
+        }
+    }
+    return parts.join("\n");
+}
+function registerSheet(id, css) {
+    const sheet = document.createElement("style");
+    sheet.textContent = processSheet(css);
+    STYLESHEETS[id] = sheet;
+}
+function activateSheet(id) {
+    const sheet = STYLESHEETS[id];
+    sheet.setAttribute("component", id);
+    document.head.appendChild(sheet);
+}
+function getTextDecoration({ strikethrough, underline, }) {
+    if (!strikethrough && !underline) {
+        return "none";
+    }
+    return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
+}
+/**
+ * Convert the cell style to CSS properties.
+ */
+function cellStyleToCss(style) {
+    const attributes = cellTextStyleToCss(style);
+    if (!style)
+        return attributes;
+    if (style.fillColor) {
+        attributes["background"] = style.fillColor;
+    }
+    return attributes;
+}
+/**
+ * Convert the cell text style to CSS properties.
+ */
+function cellTextStyleToCss(style) {
+    const attributes = {};
+    if (!style)
+        return attributes;
+    if (style.bold) {
+        attributes["font-weight"] = "bold";
+    }
+    if (style.italic) {
+        attributes["font-style"] = "italic";
+    }
+    if (style.strikethrough || style.underline) {
+        let decoration = style.strikethrough ? "line-through" : "";
+        decoration = style.underline ? decoration + " underline" : decoration;
+        attributes["text-decoration"] = decoration;
+    }
+    if (style.textColor) {
+        attributes["color"] = style.textColor;
+    }
+    return attributes;
+}
+/**
+ * Transform CSS properties into a CSS string.
+ */
+function cssPropertiesToCss(attributes) {
+    let styleStr = "";
+    for (const attName in attributes) {
+        if (!attributes[attName]) {
+            continue;
+        }
+        styleStr += `${attName}:${attributes[attName]}; `;
+    }
+    return styleStr;
+}
+function getElementMargins(el) {
+    const style = window.getComputedStyle(el);
+    return {
+        top: parseInt(style.marginTop, 10) || 0,
+        bottom: parseInt(style.marginBottom, 10) || 0,
+        left: parseInt(style.marginLeft, 10) || 0,
+        right: parseInt(style.marginRight, 10) || 0,
+    };
+}
+
+const chartJsExtensionRegistry = new Registry();
+/** Return window.Chart, making sure all our extensions are loaded in ChartJS */
+function getChartJSConstructor() {
+    if (window.Chart && !window.Chart?.registry.plugins.get("chartShowValuesPlugin")) {
+        window.Chart.register(...chartJsExtensionRegistry.getAll());
+    }
+    return window.Chart;
+}
+
 const TREND_LINE_XAXIS_ID = "x1";
+const MOVING_AVERAGE_TREND_LINE_XAXIS_ID = "xMovingAverage";
 /**
  * This file contains helpers that are common to different charts (mainly
  * line, bar and pie charts)
@@ -9949,6 +10097,9 @@ function truncateLabel(label) {
     }
     return label;
 }
+function isTrendLineAxis(axisID) {
+    return axisID === TREND_LINE_XAXIS_ID || axisID === MOVING_AVERAGE_TREND_LINE_XAXIS_ID;
+}
 
 /** This is a chartJS plugin that will draw the values of each data next to the point/bar/pie slice */
 const chartShowValuesPlugin = {
@@ -9993,7 +10144,7 @@ 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 || dataset.hidden) {
+        if (isTrendLineAxis(dataset.axisID) || dataset.hidden) {
             continue;
         }
         for (let i = 0; i < dataset._parsed.length; i++) {
@@ -10036,7 +10187,7 @@ function drawHorizontalBarChartValues(chart, options, ctx) {
     const xMin = chart.chartArea.left;
     const textsPositions = {};
     for (const dataset of chart._metasets) {
-        if (dataset.xAxisID === TREND_LINE_XAXIS_ID) {
+        if (isTrendLineAxis(dataset.axisID)) {
             return; // ignore trend lines
         }
         for (let i = 0; i < dataset._parsed.length; i++) {
@@ -10142,341 +10293,79 @@ function getNextNonEmptyBar(bars, startIndex) {
     return bars.find((bar, i) => i > startIndex && bar.height !== 0);
 }
 
-const GAUGE_PADDING_SIDE = 30;
-const GAUGE_PADDING_TOP = 10;
-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_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
-const GAUGE_TITLE_SECTION_HEIGHT = 25;
-function drawGaugeChart(canvas, runtime) {
-    const canvasBoundingRect = canvas.getBoundingClientRect();
-    canvas.width = canvasBoundingRect.width;
-    canvas.height = canvasBoundingRect.height;
-    const ctx = canvas.getContext("2d");
-    const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
-    drawBackground(ctx, config);
-    drawGauge(ctx, config);
-    drawInflectionValues(ctx, config);
-    drawLabels(ctx, config);
-    drawTitle(ctx, config);
-}
-function drawGauge(ctx, config) {
-    ctx.save();
-    const gauge = config.gauge;
-    const arcCenterX = gauge.rect.x + gauge.rect.width / 2;
-    const arcCenterY = gauge.rect.y + gauge.rect.height;
-    const arcRadius = gauge.rect.height - gauge.arcWidth / 2;
-    if (arcRadius < 0) {
-        return;
-    }
-    const gaugeAngle = gauge.percentage === 1 ? 0 : Math.PI * (1 + gauge.percentage);
-    // Gauge background
-    ctx.strokeStyle = GAUGE_BACKGROUND_COLOR;
-    ctx.beginPath();
-    ctx.lineWidth = gauge.arcWidth;
-    ctx.arc(arcCenterX, arcCenterY, arcRadius, gaugeAngle, 0);
-    ctx.stroke();
-    // Gauge value
-    ctx.strokeStyle = gauge.color;
-    ctx.beginPath();
-    ctx.arc(arcCenterX, arcCenterY, arcRadius, Math.PI, gaugeAngle);
-    ctx.stroke();
-    ctx.restore();
-}
-function drawBackground(ctx, config) {
-    ctx.save();
-    ctx.fillStyle = config.backgroundColor;
-    ctx.fillRect(0, 0, config.width, config.height);
-    ctx.restore();
-}
-function drawLabels(ctx, config) {
-    for (const label of [config.minLabel, config.maxLabel, config.gaugeValue]) {
-        ctx.save();
-        ctx.textAlign = "center";
-        ctx.fillStyle = label.color;
-        ctx.font = `${label.fontSize}px ${DEFAULT_FONT}`;
-        ctx.fillText(label.label, label.textPosition.x, label.textPosition.y);
-        ctx.restore();
-    }
-}
-function drawInflectionValues(ctx, config) {
-    const { x: rectX, y: rectY, width, height } = config.gauge.rect;
-    for (const inflectionValue of config.inflectionValues) {
-        ctx.save();
-        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 = chartMutedFontColor(config.backgroundColor) + "aa";
-        ctx.beginPath();
-        ctx.moveTo(0, -(height - config.gauge.arcWidth));
-        ctx.lineTo(0, -height - 3);
-        ctx.stroke();
-        ctx.textAlign = "center";
-        ctx.font = `${inflectionValue.fontSize}px ${DEFAULT_FONT}`;
-        ctx.fillStyle = inflectionValue.color;
-        const textY = -height - GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN - inflectionValue.offset;
-        ctx.fillText(inflectionValue.label, 0, textY);
-        ctx.restore();
-    }
-}
-function drawTitle(ctx, config) {
-    ctx.save();
-    const title = config.title;
-    ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
-    ctx.textBaseline = "middle";
-    ctx.fillStyle = title.color;
-    ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
-    ctx.restore();
-}
-function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
-    const maxValue = runtime.maxValue;
-    const minValue = runtime.minValue;
-    const gaugeValue = runtime.gaugeValue;
-    const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
-    const gaugeArcWidth = gaugeRect.width / 6;
-    const gaugePercentage = gaugeValue
-        ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
-        : 0;
-    const gaugeValuePosition = {
-        x: boundingRect.width / 2,
-        y: gaugeRect.y + gaugeRect.height - gaugeRect.height / 12,
-    };
-    let gaugeValueFontSize = GAUGE_DEFAULT_VALUE_FONT_SIZE;
-    // Scale down the font size if the gaugeRect is too small
-    if (gaugeRect.height < 300) {
-        gaugeValueFontSize = gaugeValueFontSize * (gaugeRect.height / 300);
-    }
-    // Scale down the font size if the text is too long
-    const maxTextWidth = gaugeRect.width / 2;
-    const gaugeLabel = gaugeValue?.label || "-";
-    if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
-        gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
+css /* scss */ `
+  .o-spreadsheet {
+    .o-chart-custom-tooltip {
+      font-size: 12px;
+      background-color: #fff;
+      z-index: ${ComponentsImportance.FigureTooltip};
     }
-    const minLabelPosition = {
-        x: gaugeRect.x + gaugeArcWidth / 2,
-        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
-    };
-    const maxLabelPosition = {
-        x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
-        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
+  }
+`;
+chartJsExtensionRegistry.add("chartShowValuesPlugin", chartShowValuesPlugin);
+chartJsExtensionRegistry.add("waterfallLinesPlugin", waterfallLinesPlugin);
+class ChartJsComponent extends Component {
+    static template = "o-spreadsheet-ChartJsComponent";
+    static props = {
+        figure: Object,
     };
-    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, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "px"));
-    }
-    switch (runtime.title.align) {
-        case "right":
-            x = boundingRect.width - titleWidth - CHART_PADDING$1;
-            break;
-        case "center":
-            x = (boundingRect.width - titleWidth) / 2;
-            break;
-        case "left":
-        default:
-            x = CHART_PADDING$1;
-            break;
+    canvas = useRef("graphContainer");
+    chart;
+    currentRuntime;
+    get background() {
+        return this.chartRuntime.background;
     }
-    return {
-        width: boundingRect.width,
-        height: boundingRect.height,
-        title: {
-            label: runtime.title.text ?? "",
-            fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
-            textPosition: {
-                x,
-                y: CHART_PADDING_TOP + titleHeight / 2,
-            },
-            color: runtime.title.color ?? textColor,
-            bold: runtime.title.bold,
-            italic: runtime.title.italic,
-        },
-        backgroundColor: runtime.background,
-        gauge: {
-            rect: gaugeRect,
-            arcWidth: gaugeArcWidth,
-            percentage: clip(gaugePercentage, 0, 1),
-            color: getGaugeColor(runtime),
-        },
-        inflectionValues,
-        gaugeValue: {
-            label: gaugeLabel,
-            textPosition: gaugeValuePosition,
-            fontSize: gaugeValueFontSize,
-            color: textColor,
-        },
-        minLabel: {
-            label: runtime.minValue.label,
-            textPosition: minLabelPosition,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-        },
-        maxLabel: {
-            label: runtime.maxValue.label,
-            textPosition: maxLabelPosition,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-        },
-    };
-}
-/**
- * Get the rectangle in which the gauge will be drawn, based on the bounding rectangle of the canvas and leaving
- * space for the title and labels.
- */
-function getGaugeRect(boundingRect, title) {
-    const titleHeight = title ? GAUGE_TITLE_SECTION_HEIGHT : 0;
-    const drawHeight = boundingRect.height - GAUGE_PADDING_BOTTOM - titleHeight - GAUGE_PADDING_TOP;
-    const drawWidth = boundingRect.width - GAUGE_PADDING_SIDE * 2;
-    let gaugeWidth;
-    let gaugeHeight;
-    if (drawWidth > 2 * drawHeight) {
-        gaugeWidth = 2 * drawHeight;
-        gaugeHeight = drawHeight;
+    get canvasStyle() {
+        return `background-color: ${this.background}`;
     }
-    else {
-        gaugeWidth = drawWidth;
-        gaugeHeight = drawWidth / 2;
+    get chartRuntime() {
+        const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
+        if (!("chartJsConfig" in runtime)) {
+            throw new Error("Unsupported chart runtime");
+        }
+        return runtime;
     }
-    const gaugeX = GAUGE_PADDING_SIDE + (drawWidth - gaugeWidth) / 2;
-    const gaugeY = titleHeight + GAUGE_PADDING_TOP + (drawHeight - gaugeHeight) / 2;
-    return {
-        x: gaugeX,
-        y: gaugeY,
-        width: gaugeWidth,
-        height: gaugeHeight,
-    };
-}
-/**
- * Get the infliction values of the gauge, and where to draw them (the angle from the center of the gauge at which they are drawn).
- *
- * Also compute an offset for the text so that it doesn't overlap with other text.
- */
-function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
-    const maxValue = runtime.maxValue;
-    const minValue = runtime.minValue;
-    const gaugeCircleCenter = {
-        x: gaugeRect.x + gaugeRect.width / 2,
-        y: gaugeRect.y + gaugeRect.height,
-    };
-    const textStyle = { fontSize: GAUGE_LABELS_FONT_SIZE };
-    const inflectionValues = [];
-    const inflectionValuesTextRects = [];
-    for (const inflectionValue of runtime.inflectionValues) {
-        const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
-        const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
-        const angle = Math.PI - Math.PI * percentage;
-        const textRect = getRectangleTangentToCircle(angle, // angle between X axis and the point where the rectangle is tangent to the circle
-        gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, // radius of the gauge circle + margin below text
-        gaugeCircleCenter.x, // center of the gauge circle
-        gaugeCircleCenter.y, // center of the gauge circle
-        labelWidth + 2, // width of the text + some margin
-        GAUGE_LABELS_FONT_SIZE // height of the text
-        );
-        let offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect))
-            ? GAUGE_LABELS_FONT_SIZE
-            : 0;
-        inflectionValuesTextRects.push(textRect);
-        inflectionValues.push({
-            rotation: angle,
-            label: inflectionValue.label,
-            fontSize: GAUGE_LABELS_FONT_SIZE,
-            color: textColor,
-            offset,
+    setup() {
+        onMounted(() => {
+            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));
+        });
+        onWillUnmount(() => this.chart?.destroy());
+        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));
+                }
+                else {
+                    this.updateChartJs(deepCopy(runtime.chartJsConfig));
+                }
+                this.currentRuntime = runtime;
+            }
         });
     }
-    return inflectionValues;
-}
-function getGaugeColor(runtime) {
-    const gaugeValue = runtime.gaugeValue?.value;
-    if (gaugeValue === undefined) {
-        return GAUGE_BACKGROUND_COLOR;
-    }
-    for (let i = 0; i < runtime.inflectionValues.length; i++) {
-        const inflectionValue = runtime.inflectionValues[i];
-        if (inflectionValue.operator === "<" && gaugeValue < inflectionValue.value) {
-            return runtime.colors[i];
-        }
-        else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
-            return runtime.colors[i];
-        }
-    }
-    return runtime.colors.at(-1);
-}
-function getSegmentsOfRectangle(rectangle) {
-    return [
-        { start: rectangle.topLeft, end: rectangle.topRight },
-        { start: rectangle.topRight, end: rectangle.bottomRight },
-        { start: rectangle.bottomRight, end: rectangle.bottomLeft },
-        { start: rectangle.bottomLeft, end: rectangle.topLeft },
-    ];
-}
-/**
- * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
- * is not handled.
- */
-function doSegmentIntersect(segment1, segment2) {
-    const A = segment1.start;
-    const B = segment1.end;
-    const C = segment2.start;
-    const D = segment2.end;
-    /**
-     * Line segment intersection algorithm
-     * https://bryceboe.com/2006/10/23/line-segment-intersection-algorithm/
-     */
-    function ccw(a, b, c) {
-        return (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x);
+    createChart(chartData) {
+        const canvas = this.canvas.el;
+        const ctx = canvas.getContext("2d");
+        const Chart = getChartJSConstructor();
+        this.chart = new Chart(ctx, chartData);
     }
-    return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
-}
-function doRectanglesIntersect(rect1, rect2) {
-    const segments1 = getSegmentsOfRectangle(rect1);
-    const segments2 = getSegmentsOfRectangle(rect2);
-    for (const segment1 of segments1) {
-        for (const segment2 of segments2) {
-            if (doSegmentIntersect(segment1, segment2)) {
-                return true;
+    updateChartJs(chartData) {
+        if (chartData.data && chartData.data.datasets) {
+            this.chart.data = chartData.data;
+            if (chartData.options?.plugins?.title) {
+                this.chart.config.options.plugins.title = chartData.options.plugins.title;
             }
         }
+        else {
+            this.chart.data.datasets = [];
+        }
+        this.chart.config.options = chartData.options;
+        this.chart.update();
     }
-    return false;
-}
-/**
- *  Get the rectangle that is tangent to a circle at a given angle.
- *
- * @param angle angle between X axis and the point where the rectangle is tangent to the circle
- */
-function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
-    const cos = Math.cos(angle);
-    const sin = Math.sin(angle);
-    // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
-    const x = cos * radius;
-    const y = sin * radius;
-    // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
-    const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
-    const y2 = cos * (rectWidth / 2);
-    const bottomRight = {
-        x: x + x2 + circleCenterX,
-        y: circleCenterY - (y - y2),
-    };
-    const bottomLeft = {
-        x: x - x2 + circleCenterX,
-        y: circleCenterY - (y + y2),
-    };
-    // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
-    const xp = cos * (radius + rectHeight);
-    const yp = sin * (radius + rectHeight);
-    const topLeft = {
-        x: xp - x2 + circleCenterX,
-        y: circleCenterY - (yp + y2),
-    };
-    const topRight = {
-        x: xp + x2 + circleCenterX,
-        y: circleCenterY - (yp - y2),
-    };
-    return { bottomLeft, bottomRight, topRight, topLeft };
 }
 
 /**
@@ -11058,299 +10947,6 @@ class ScorecardChartConfigBuilder {
     }
 }
 
-const CHART_COMMON_OPTIONS = {
-    // https://www.chartjs.org/docs/latest/general/responsive.html
-    responsive: true, // will resize when its container is resized
-    maintainAspectRatio: false, // doesn't maintain the aspect ratio (width/height =2 by default) so the user has the choice of the exact layout
-    elements: {
-        line: {
-            fill: false, // do not fill the area under line charts
-        },
-        point: {
-            hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
-        },
-    },
-    animation: false,
-};
-function chartToImage(runtime, figure, type) {
-    // wrap the canvas in a div with a fixed size because chart.js would
-    // fill the whole page otherwise
-    const div = document.createElement("div");
-    div.style.width = `${figure.width}px`;
-    div.style.height = `${figure.height}px`;
-    const canvas = document.createElement("canvas");
-    div.append(canvas);
-    canvas.setAttribute("width", figure.width.toString());
-    canvas.setAttribute("height", figure.height.toString());
-    // we have to add the canvas to the DOM otherwise it won't be rendered
-    document.body.append(div);
-    if ("chartJsConfig" in runtime) {
-        const config = deepCopy(runtime.chartJsConfig);
-        config.plugins = [backgroundColorChartJSPlugin];
-        const Chart = getChartJSConstructor();
-        const chart = new Chart(canvas, config);
-        const imgContent = chart.toBase64Image();
-        chart.destroy();
-        div.remove();
-        return imgContent;
-    }
-    else if (type === "scorecard") {
-        const design = getScorecardConfiguration(figure, runtime);
-        drawScoreChart(design, canvas);
-        const imgContent = canvas.toDataURL();
-        div.remove();
-        return imgContent;
-    }
-    else if (type === "gauge") {
-        drawGaugeChart(canvas, runtime);
-        const imgContent = canvas.toDataURL();
-        div.remove();
-        return imgContent;
-    }
-    return undefined;
-}
-/**
- * Custom chart.js plugin to set the background color of the canvas
- * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
- */
-const backgroundColorChartJSPlugin = {
-    id: "customCanvasBackgroundColor",
-    beforeDraw: (chart) => {
-        const { ctx } = chart;
-        ctx.save();
-        ctx.globalCompositeOperation = "destination-over";
-        ctx.fillStyle = "#ffffff";
-        ctx.fillRect(0, 0, chart.width, chart.height);
-        ctx.restore();
-    },
-};
-/** Return window.Chart, making sure all our extensions are loaded in ChartJS */
-function getChartJSConstructor() {
-    if (window.Chart && !window.Chart?.registry.plugins.get("chartShowValuesPlugin")) {
-        window.Chart.register(chartShowValuesPlugin);
-        window.Chart.register(waterfallLinesPlugin);
-    }
-    return window.Chart;
-}
-
-/**
- * This file is largely inspired by owl 1.
- * `css` tag has been removed from owl 2 without workaround to manage css.
- * So, the solution was to import the behavior of owl 1 directly in our
- * codebase, with one difference: the css is added to the sheet as soon as the
- * css tag is executed. In owl 1, the css was added as soon as a Component was
- * created for the first time.
- */
-const STYLESHEETS = {};
-let nextId = 0;
-/**
- * CSS tag helper for defining inline stylesheets.  With this, one can simply define
- * an inline stylesheet with just the following code:
- * ```js
- *     css`.component-a { color: red; }`;
- * ```
- */
-function css(strings, ...args) {
-    const name = `__sheet__${nextId++}`;
-    const value = String.raw(strings, ...args);
-    registerSheet(name, value);
-    activateSheet(name);
-    return name;
-}
-function processSheet(str) {
-    const tokens = str.split(/(\{|\}|;)/).map((s) => s.trim());
-    const selectorStack = [];
-    const parts = [];
-    let rules = [];
-    function generateSelector(stackIndex, parentSelector) {
-        const parts = [];
-        for (const selector of selectorStack[stackIndex]) {
-            let part = (parentSelector && parentSelector + " " + selector) || selector;
-            if (part.includes("&")) {
-                part = selector.replace(/&/g, parentSelector || "");
-            }
-            if (stackIndex < selectorStack.length - 1) {
-                part = generateSelector(stackIndex + 1, part);
-            }
-            parts.push(part);
-        }
-        return parts.join(", ");
-    }
-    function generateRules() {
-        if (rules.length) {
-            parts.push(generateSelector(0) + " {");
-            parts.push(...rules);
-            parts.push("}");
-            rules = [];
-        }
-    }
-    while (tokens.length) {
-        let token = tokens.shift();
-        if (token === "}") {
-            generateRules();
-            selectorStack.pop();
-        }
-        else {
-            if (tokens[0] === "{") {
-                generateRules();
-                selectorStack.push(token.split(/\s*,\s*/));
-                tokens.shift();
-            }
-            if (tokens[0] === ";") {
-                rules.push("  " + token + ";");
-            }
-        }
-    }
-    return parts.join("\n");
-}
-function registerSheet(id, css) {
-    const sheet = document.createElement("style");
-    sheet.textContent = processSheet(css);
-    STYLESHEETS[id] = sheet;
-}
-function activateSheet(id) {
-    const sheet = STYLESHEETS[id];
-    sheet.setAttribute("component", id);
-    document.head.appendChild(sheet);
-}
-function getTextDecoration({ strikethrough, underline, }) {
-    if (!strikethrough && !underline) {
-        return "none";
-    }
-    return `${strikethrough ? "line-through" : ""} ${underline ? "underline" : ""}`;
-}
-/**
- * Convert the cell style to CSS properties.
- */
-function cellStyleToCss(style) {
-    const attributes = cellTextStyleToCss(style);
-    if (!style)
-        return attributes;
-    if (style.fillColor) {
-        attributes["background"] = style.fillColor;
-    }
-    return attributes;
-}
-/**
- * Convert the cell text style to CSS properties.
- */
-function cellTextStyleToCss(style) {
-    const attributes = {};
-    if (!style)
-        return attributes;
-    if (style.bold) {
-        attributes["font-weight"] = "bold";
-    }
-    if (style.italic) {
-        attributes["font-style"] = "italic";
-    }
-    if (style.strikethrough || style.underline) {
-        let decoration = style.strikethrough ? "line-through" : "";
-        decoration = style.underline ? decoration + " underline" : decoration;
-        attributes["text-decoration"] = decoration;
-    }
-    if (style.textColor) {
-        attributes["color"] = style.textColor;
-    }
-    return attributes;
-}
-/**
- * Transform CSS properties into a CSS string.
- */
-function cssPropertiesToCss(attributes) {
-    let styleStr = "";
-    for (const attName in attributes) {
-        if (!attributes[attName]) {
-            continue;
-        }
-        styleStr += `${attName}:${attributes[attName]}; `;
-    }
-    return styleStr;
-}
-function getElementMargins(el) {
-    const style = window.getComputedStyle(el);
-    return {
-        top: parseInt(style.marginTop, 10) || 0,
-        bottom: parseInt(style.marginBottom, 10) || 0,
-        left: parseInt(style.marginLeft, 10) || 0,
-        right: parseInt(style.marginRight, 10) || 0,
-    };
-}
-
-css /* scss */ `
-  .o-spreadsheet {
-    .o-chart-custom-tooltip {
-      font-size: 12px;
-      background-color: #fff;
-      z-index: ${ComponentsImportance.FigureTooltip};
-    }
-  }
-`;
-class ChartJsComponent extends Component {
-    static template = "o-spreadsheet-ChartJsComponent";
-    static props = {
-        figure: Object,
-    };
-    canvas = useRef("graphContainer");
-    chart;
-    currentRuntime;
-    get background() {
-        return this.chartRuntime.background;
-    }
-    get canvasStyle() {
-        return `background-color: ${this.background}`;
-    }
-    get chartRuntime() {
-        const runtime = this.env.model.getters.getChartRuntime(this.props.figure.id);
-        if (!("chartJsConfig" in runtime)) {
-            throw new Error("Unsupported chart runtime");
-        }
-        return runtime;
-    }
-    setup() {
-        onMounted(() => {
-            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));
-        });
-        onWillUnmount(() => this.chart?.destroy());
-        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));
-                }
-                else {
-                    this.updateChartJs(deepCopy(runtime));
-                }
-                this.currentRuntime = runtime;
-            }
-        });
-    }
-    createChart(chartData) {
-        const canvas = this.canvas.el;
-        const ctx = canvas.getContext("2d");
-        const Chart = getChartJSConstructor();
-        this.chart = new Chart(ctx, chartData);
-    }
-    updateChartJs(chartRuntime) {
-        const chartData = chartRuntime.chartJsConfig;
-        if (chartData.data && chartData.data.datasets) {
-            this.chart.data = chartData.data;
-            if (chartData.options?.plugins?.title) {
-                this.chart.config.options.plugins.title = chartData.options.plugins.title;
-            }
-        }
-        else {
-            this.chart.data.datasets = [];
-        }
-        this.chart.config.options = chartData.options;
-        this.chart.update();
-    }
-}
-
 class ScorecardChart extends Component {
     static template = "o-spreadsheet-ScorecardChart";
     static props = {
@@ -20544,11 +20140,26 @@ const SEARCH = {
         const _searchFor = toString(searchFor).toLowerCase();
         const _textToSearch = toString(textToSearch).toLowerCase();
         const _startingAt = toNumber(startingAt, this.locale);
-        assert(() => _textToSearch !== "", _t("The text_to_search must be non-empty."));
-        assert(() => _startingAt >= 1, _t("The starting_at (%s) must be greater than or equal to 1.", _startingAt.toString()));
+        if (_textToSearch === "") {
+            return {
+                value: CellErrorType.GenericError,
+                message: _t("The text_to_search must be non-empty."),
+            };
+        }
+        if (_startingAt < 1) {
+            return {
+                value: CellErrorType.GenericError,
+                message: _t("The starting_at (%s) must be greater than or equal to 1.", _startingAt),
+            };
+        }
         const result = _textToSearch.indexOf(_searchFor, _startingAt - 1);
-        assert(() => result >= 0, _t("In [[FUNCTION_NAME]] evaluation, cannot find '%s' within '%s'.", _searchFor, _textToSearch));
-        return result + 1;
+        if (result === -1) {
+            return {
+                value: CellErrorType.GenericError,
+                message: _t("In [[FUNCTION_NAME]] evaluation, cannot find '%s' within '%s'.", _searchFor, _textToSearch),
+            };
+        }
+        return { value: result + 1 };
     },
     isExported: true,
 };
@@ -21883,11 +21494,14 @@ function compileTokens(tokens) {
     }
 }
 function compileTokensOrThrow(tokens) {
-    const { dependencies, constantValues, symbols } = formulaArguments(tokens);
-    const cacheKey = compilationCacheKey(tokens, dependencies, constantValues);
+    const { dependencies, literalValues, symbols } = formulaArguments(tokens);
+    const cacheKey = compilationCacheKey(tokens);
     if (!functionCache[cacheKey]) {
         const ast = parseTokens([...tokens]);
         const scope = new Scope();
+        let stringCount = 0;
+        let numberCount = 0;
+        let dependencyCount = 0;
         if (ast.type === "BIN_OPERATION" && ast.value === ":") {
             throw new BadExpressionError(_t("Invalid formula"));
         }
@@ -21961,16 +21575,15 @@ function compileTokensOrThrow(tokens) {
                 case "BOOLEAN":
                     return code.return(`{ value: ${ast.value} }`);
                 case "NUMBER":
-                    return code.return(`{ value: this.constantValues.numbers[${constantValues.numbers.indexOf(ast.value)}] }`);
+                    return code.return(`this.literalValues.numbers[${numberCount++}]`);
                 case "STRING":
-                    return code.return(`{ value: this.constantValues.strings[${constantValues.strings.indexOf(ast.value)}] }`);
+                    return code.return(`this.literalValues.strings[${stringCount++}]`);
                 case "REFERENCE":
-                    const referenceIndex = dependencies.indexOf(ast.value);
                     if ((!isMeta && ast.value.includes(":")) || hasRange) {
-                        return code.return(`range(deps[${referenceIndex}])`);
+                        return code.return(`range(deps[${dependencyCount++}])`);
                     }
                     else {
-                        return code.return(`ref(deps[${referenceIndex}], ${isMeta ? "true" : "false"})`);
+                        return code.return(`ref(deps[${dependencyCount++}], ${isMeta ? "true" : "false"})`);
                     }
                 case "FUNCALL":
                     const args = compileFunctionArgs(ast).map((arg) => arg.assignResultToVariable());
@@ -22002,7 +21615,7 @@ function compileTokensOrThrow(tokens) {
     const compiledFormula = {
         execute: functionCache[cacheKey],
         dependencies,
-        constantValues,
+        literalValues,
         symbols,
         tokens,
         isBadExpression: false,
@@ -22015,33 +21628,31 @@ function compileTokensOrThrow(tokens) {
  * References, numbers and strings are replaced with placeholders because
  * the compiled formula does not depend on their actual value.
  * Both `=A1+1+"2"` and `=A2+2+"3"` are compiled to the exact same function.
- *
  * Spaces are also ignored to compute the cache key.
  *
- * A formula `=A1+A2+SUM(2, 2, "2")` have the cache key `=|0|+|1|+SUM(|N0|,|N0|,|S0|)`
+ * A formula `=A1+A2+SUM(2, 2, "2")` have the cache key `=|C|+|C|+SUM(|N|,|N|,|S|)`
  */
-function compilationCacheKey(tokens, dependencies, constantValues, symbols) {
+function compilationCacheKey(tokens) {
     let cacheKey = "";
     for (const token of tokens) {
         switch (token.type) {
             case "STRING":
-                const value = removeStringQuotes(token.value);
-                cacheKey += `|S${constantValues.strings.indexOf(value)}|`;
+                cacheKey += "|S|";
                 break;
             case "NUMBER":
-                cacheKey += `|N${constantValues.numbers.indexOf(parseNumber(token.value, DEFAULT_LOCALE))}|`;
+                cacheKey += "|N|";
                 break;
             case "REFERENCE":
             case "INVALID_REFERENCE":
                 if (token.value.includes(":")) {
-                    cacheKey += `R|${dependencies.indexOf(token.value)}|`;
+                    cacheKey += "|R|";
                 }
                 else {
-                    cacheKey += `C|${dependencies.indexOf(token.value)}|`;
+                    cacheKey += "|C|";
                 }
                 break;
             case "SPACE":
-                cacheKey += "";
+                // ignore spaces
                 break;
             default:
                 cacheKey += token.value;
@@ -22054,7 +21665,7 @@ function compilationCacheKey(tokens, dependencies, constantValues, symbols) {
  * Return formula arguments which are references, strings and numbers.
  */
 function formulaArguments(tokens) {
-    const constantValues = {
+    const literalValues = {
         numbers: [],
         strings: [],
     };
@@ -22068,15 +21679,11 @@ function formulaArguments(tokens) {
                 break;
             case "STRING":
                 const value = removeStringQuotes(token.value);
-                if (!constantValues.strings.includes(value)) {
-                    constantValues.strings.push(value);
-                }
+                literalValues.strings.push({ value });
                 break;
             case "NUMBER": {
                 const value = parseNumber(token.value, DEFAULT_LOCALE);
-                if (!constantValues.numbers.includes(value)) {
-                    constantValues.numbers.push(value);
-                }
+                literalValues.numbers.push({ value });
                 break;
             }
             case "SYMBOL": {
@@ -22087,7 +21694,7 @@ function formulaArguments(tokens) {
     }
     return {
         dependencies,
-        constantValues,
+        literalValues,
         symbols,
     };
 }
@@ -22937,6 +22544,343 @@ function getDateIntervals(dates) {
 
 const cellPopoverRegistry = new Registry();
 
+const GAUGE_PADDING_SIDE = 30;
+const GAUGE_PADDING_TOP = 10;
+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_INFLECTION_LABEL_BOTTOM_MARGIN = 6;
+const GAUGE_TITLE_SECTION_HEIGHT = 25;
+function drawGaugeChart(canvas, runtime) {
+    const canvasBoundingRect = canvas.getBoundingClientRect();
+    canvas.width = canvasBoundingRect.width;
+    canvas.height = canvasBoundingRect.height;
+    const ctx = canvas.getContext("2d");
+    const config = getGaugeRenderingConfig(canvasBoundingRect, runtime, ctx);
+    drawBackground(ctx, config);
+    drawGauge(ctx, config);
+    drawInflectionValues(ctx, config);
+    drawLabels(ctx, config);
+    drawTitle(ctx, config);
+}
+function drawGauge(ctx, config) {
+    ctx.save();
+    const gauge = config.gauge;
+    const arcCenterX = gauge.rect.x + gauge.rect.width / 2;
+    const arcCenterY = gauge.rect.y + gauge.rect.height;
+    const arcRadius = gauge.rect.height - gauge.arcWidth / 2;
+    if (arcRadius < 0) {
+        return;
+    }
+    const gaugeAngle = gauge.percentage === 1 ? 0 : Math.PI * (1 + gauge.percentage);
+    // Gauge background
+    ctx.strokeStyle = GAUGE_BACKGROUND_COLOR;
+    ctx.beginPath();
+    ctx.lineWidth = gauge.arcWidth;
+    ctx.arc(arcCenterX, arcCenterY, arcRadius, gaugeAngle, 0);
+    ctx.stroke();
+    // Gauge value
+    ctx.strokeStyle = gauge.color;
+    ctx.beginPath();
+    ctx.arc(arcCenterX, arcCenterY, arcRadius, Math.PI, gaugeAngle);
+    ctx.stroke();
+    ctx.restore();
+}
+function drawBackground(ctx, config) {
+    ctx.save();
+    ctx.fillStyle = config.backgroundColor;
+    ctx.fillRect(0, 0, config.width, config.height);
+    ctx.restore();
+}
+function drawLabels(ctx, config) {
+    for (const label of [config.minLabel, config.maxLabel, config.gaugeValue]) {
+        ctx.save();
+        ctx.textAlign = "center";
+        ctx.fillStyle = label.color;
+        ctx.font = `${label.fontSize}px ${DEFAULT_FONT}`;
+        ctx.fillText(label.label, label.textPosition.x, label.textPosition.y);
+        ctx.restore();
+    }
+}
+function drawInflectionValues(ctx, config) {
+    const { x: rectX, y: rectY, width, height } = config.gauge.rect;
+    for (const inflectionValue of config.inflectionValues) {
+        ctx.save();
+        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 = chartMutedFontColor(config.backgroundColor) + "aa";
+        ctx.beginPath();
+        ctx.moveTo(0, -(height - config.gauge.arcWidth));
+        ctx.lineTo(0, -height - 3);
+        ctx.stroke();
+        ctx.textAlign = "center";
+        ctx.font = `${inflectionValue.fontSize}px ${DEFAULT_FONT}`;
+        ctx.fillStyle = inflectionValue.color;
+        const textY = -height - GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN - inflectionValue.offset;
+        ctx.fillText(inflectionValue.label, 0, textY);
+        ctx.restore();
+    }
+}
+function drawTitle(ctx, config) {
+    ctx.save();
+    const title = config.title;
+    ctx.font = getDefaultContextFont(title.fontSize, title.bold, title.italic);
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = title.color;
+    ctx.fillText(title.label, title.textPosition.x, title.textPosition.y);
+    ctx.restore();
+}
+function getGaugeRenderingConfig(boundingRect, runtime, ctx) {
+    const maxValue = runtime.maxValue;
+    const minValue = runtime.minValue;
+    const gaugeValue = runtime.gaugeValue;
+    const gaugeRect = getGaugeRect(boundingRect, runtime.title.text);
+    const gaugeArcWidth = gaugeRect.width / 6;
+    const gaugePercentage = gaugeValue
+        ? (gaugeValue.value - minValue.value) / (maxValue.value - minValue.value)
+        : 0;
+    const gaugeValuePosition = {
+        x: boundingRect.width / 2,
+        y: gaugeRect.y + gaugeRect.height - gaugeRect.height / 12,
+    };
+    let gaugeValueFontSize = GAUGE_DEFAULT_VALUE_FONT_SIZE;
+    // Scale down the font size if the gaugeRect is too small
+    if (gaugeRect.height < 300) {
+        gaugeValueFontSize = gaugeValueFontSize * (gaugeRect.height / 300);
+    }
+    // Scale down the font size if the text is too long
+    const maxTextWidth = gaugeRect.width / 2;
+    const gaugeLabel = gaugeValue?.label || "-";
+    if (computeTextWidth(ctx, gaugeLabel, { fontSize: gaugeValueFontSize }, "px") > maxTextWidth) {
+        gaugeValueFontSize = getFontSizeMatchingWidth(maxTextWidth, gaugeValueFontSize, (fontSize) => computeTextWidth(ctx, gaugeLabel, { fontSize }, "px"));
+    }
+    const minLabelPosition = {
+        x: gaugeRect.x + gaugeArcWidth / 2,
+        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
+    };
+    const maxLabelPosition = {
+        x: gaugeRect.x + gaugeRect.width - gaugeArcWidth / 2,
+        y: gaugeRect.y + gaugeRect.height + GAUGE_LABELS_FONT_SIZE,
+    };
+    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, { fontSize: CHART_TITLE_FONT_SIZE, ...runtime.title }, "px"));
+    }
+    switch (runtime.title.align) {
+        case "right":
+            x = boundingRect.width - titleWidth - CHART_PADDING$1;
+            break;
+        case "center":
+            x = (boundingRect.width - titleWidth) / 2;
+            break;
+        case "left":
+        default:
+            x = CHART_PADDING$1;
+            break;
+    }
+    return {
+        width: boundingRect.width,
+        height: boundingRect.height,
+        title: {
+            label: runtime.title.text ?? "",
+            fontSize: runtime.title.fontSize ?? CHART_TITLE_FONT_SIZE,
+            textPosition: {
+                x,
+                y: CHART_PADDING_TOP + titleHeight / 2,
+            },
+            color: runtime.title.color ?? textColor,
+            bold: runtime.title.bold,
+            italic: runtime.title.italic,
+        },
+        backgroundColor: runtime.background,
+        gauge: {
+            rect: gaugeRect,
+            arcWidth: gaugeArcWidth,
+            percentage: clip(gaugePercentage, 0, 1),
+            color: getGaugeColor(runtime),
+        },
+        inflectionValues,
+        gaugeValue: {
+            label: gaugeLabel,
+            textPosition: gaugeValuePosition,
+            fontSize: gaugeValueFontSize,
+            color: textColor,
+        },
+        minLabel: {
+            label: runtime.minValue.label,
+            textPosition: minLabelPosition,
+            fontSize: GAUGE_LABELS_FONT_SIZE,
+            color: textColor,
+        },
+        maxLabel: {
+            label: runtime.maxValue.label,
+            textPosition: maxLabelPosition,
+            fontSize: GAUGE_LABELS_FONT_SIZE,
+            color: textColor,
+        },
+    };
+}
+/**
+ * Get the rectangle in which the gauge will be drawn, based on the bounding rectangle of the canvas and leaving
+ * space for the title and labels.
+ */
+function getGaugeRect(boundingRect, title) {
+    const titleHeight = title ? GAUGE_TITLE_SECTION_HEIGHT : 0;
+    const drawHeight = boundingRect.height - GAUGE_PADDING_BOTTOM - titleHeight - GAUGE_PADDING_TOP;
+    const drawWidth = boundingRect.width - GAUGE_PADDING_SIDE * 2;
+    let gaugeWidth;
+    let gaugeHeight;
+    if (drawWidth > 2 * drawHeight) {
+        gaugeWidth = 2 * drawHeight;
+        gaugeHeight = drawHeight;
+    }
+    else {
+        gaugeWidth = drawWidth;
+        gaugeHeight = drawWidth / 2;
+    }
+    const gaugeX = GAUGE_PADDING_SIDE + (drawWidth - gaugeWidth) / 2;
+    const gaugeY = titleHeight + GAUGE_PADDING_TOP + (drawHeight - gaugeHeight) / 2;
+    return {
+        x: gaugeX,
+        y: gaugeY,
+        width: gaugeWidth,
+        height: gaugeHeight,
+    };
+}
+/**
+ * Get the infliction values of the gauge, and where to draw them (the angle from the center of the gauge at which they are drawn).
+ *
+ * Also compute an offset for the text so that it doesn't overlap with other text.
+ */
+function getInflectionValues(runtime, gaugeRect, textColor, ctx) {
+    const maxValue = runtime.maxValue;
+    const minValue = runtime.minValue;
+    const gaugeCircleCenter = {
+        x: gaugeRect.x + gaugeRect.width / 2,
+        y: gaugeRect.y + gaugeRect.height,
+    };
+    const textStyle = { fontSize: GAUGE_LABELS_FONT_SIZE };
+    const inflectionValues = [];
+    const inflectionValuesTextRects = [];
+    for (const inflectionValue of runtime.inflectionValues) {
+        const percentage = (inflectionValue.value - minValue.value) / (maxValue.value - minValue.value);
+        const labelWidth = computeTextWidth(ctx, inflectionValue.label, textStyle, "px");
+        const angle = Math.PI - Math.PI * percentage;
+        const textRect = getRectangleTangentToCircle(angle, // angle between X axis and the point where the rectangle is tangent to the circle
+        gaugeRect.height + GAUGE_INFLECTION_LABEL_BOTTOM_MARGIN, // radius of the gauge circle + margin below text
+        gaugeCircleCenter.x, // center of the gauge circle
+        gaugeCircleCenter.y, // center of the gauge circle
+        labelWidth + 2, // width of the text + some margin
+        GAUGE_LABELS_FONT_SIZE // height of the text
+        );
+        let offset = inflectionValuesTextRects.some((rect) => doRectanglesIntersect(rect, textRect))
+            ? GAUGE_LABELS_FONT_SIZE
+            : 0;
+        inflectionValuesTextRects.push(textRect);
+        inflectionValues.push({
+            rotation: angle,
+            label: inflectionValue.label,
+            fontSize: GAUGE_LABELS_FONT_SIZE,
+            color: textColor,
+            offset,
+        });
+    }
+    return inflectionValues;
+}
+function getGaugeColor(runtime) {
+    const gaugeValue = runtime.gaugeValue?.value;
+    if (gaugeValue === undefined) {
+        return GAUGE_BACKGROUND_COLOR;
+    }
+    for (let i = 0; i < runtime.inflectionValues.length; i++) {
+        const inflectionValue = runtime.inflectionValues[i];
+        if (inflectionValue.operator === "<" && gaugeValue < inflectionValue.value) {
+            return runtime.colors[i];
+        }
+        else if (inflectionValue.operator === "<=" && gaugeValue <= inflectionValue.value) {
+            return runtime.colors[i];
+        }
+    }
+    return runtime.colors.at(-1);
+}
+function getSegmentsOfRectangle(rectangle) {
+    return [
+        { start: rectangle.topLeft, end: rectangle.topRight },
+        { start: rectangle.topRight, end: rectangle.bottomRight },
+        { start: rectangle.bottomRight, end: rectangle.bottomLeft },
+        { start: rectangle.bottomLeft, end: rectangle.topLeft },
+    ];
+}
+/**
+ * Check if two segment intersect. The case where the segments are colinear (both segments on the same line)
+ * is not handled.
+ */
+function doSegmentIntersect(segment1, segment2) {
+    const A = segment1.start;
+    const B = segment1.end;
+    const C = segment2.start;
+    const D = segment2.end;
+    /**
+     * Line segment intersection algorithm
+     * https://bryceboe.com/2006/10/23/line-segment-intersection-algorithm/
+     */
+    function ccw(a, b, c) {
+        return (c.y - a.y) * (b.x - a.x) > (b.y - a.y) * (c.x - a.x);
+    }
+    return ccw(A, C, D) !== ccw(B, C, D) && ccw(A, B, C) !== ccw(A, B, D);
+}
+function doRectanglesIntersect(rect1, rect2) {
+    const segments1 = getSegmentsOfRectangle(rect1);
+    const segments2 = getSegmentsOfRectangle(rect2);
+    for (const segment1 of segments1) {
+        for (const segment2 of segments2) {
+            if (doSegmentIntersect(segment1, segment2)) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+/**
+ *  Get the rectangle that is tangent to a circle at a given angle.
+ *
+ * @param angle angle between X axis and the point where the rectangle is tangent to the circle
+ */
+function getRectangleTangentToCircle(angle, radius, circleCenterX, circleCenterY, rectWidth, rectHeight) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    // x, y are the distance from the center of the circle to the point where the rectangle is tangent to the circle
+    const x = cos * radius;
+    const y = sin * radius;
+    // x2, y2 are the distance from the point the rectangle is tangent to the circle to the bottom left corner of the rectangle
+    const x2 = sin * (rectWidth / 2); // cos(angle + 90°) = sin(angle)
+    const y2 = cos * (rectWidth / 2);
+    const bottomRight = {
+        x: x + x2 + circleCenterX,
+        y: circleCenterY - (y - y2),
+    };
+    const bottomLeft = {
+        x: x - x2 + circleCenterX,
+        y: circleCenterY - (y + y2),
+    };
+    // Same as above but for the top corners of the rectangle (radius + rectangle height instead of radius)
+    const xp = cos * (radius + rectHeight);
+    const yp = sin * (radius + rectHeight);
+    const topLeft = {
+        x: xp - x2 + circleCenterX,
+        y: circleCenterY - (yp + y2),
+    };
+    const topRight = {
+        x: xp + x2 + circleCenterX,
+        y: circleCenterY - (yp - y2),
+    };
+    return { bottomLeft, bottomRight, topRight, topLeft };
+}
+
 class GaugeChartComponent extends Component {
     static template = "o-spreadsheet-GaugeChartComponent";
     canvas = useRef("chartContainer");
@@ -22969,6 +22913,73 @@ function toXlsxHexColor(color) {
     return color;
 }
 
+const CHART_COMMON_OPTIONS = {
+    // https://www.chartjs.org/docs/latest/general/responsive.html
+    responsive: true, // will resize when its container is resized
+    maintainAspectRatio: false, // doesn't maintain the aspect ratio (width/height =2 by default) so the user has the choice of the exact layout
+    elements: {
+        line: {
+            fill: false, // do not fill the area under line charts
+        },
+        point: {
+            hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
+        },
+    },
+    animation: false,
+};
+function chartToImage(runtime, figure, type) {
+    // wrap the canvas in a div with a fixed size because chart.js would
+    // fill the whole page otherwise
+    const div = document.createElement("div");
+    div.style.width = `${figure.width}px`;
+    div.style.height = `${figure.height}px`;
+    const canvas = document.createElement("canvas");
+    div.append(canvas);
+    canvas.setAttribute("width", figure.width.toString());
+    canvas.setAttribute("height", figure.height.toString());
+    // we have to add the canvas to the DOM otherwise it won't be rendered
+    document.body.append(div);
+    if ("chartJsConfig" in runtime) {
+        const config = deepCopy(runtime.chartJsConfig);
+        config.plugins = [backgroundColorChartJSPlugin];
+        const Chart = getChartJSConstructor();
+        const chart = new Chart(canvas, config);
+        const imgContent = chart.toBase64Image();
+        chart.destroy();
+        div.remove();
+        return imgContent;
+    }
+    else if (type === "scorecard") {
+        const design = getScorecardConfiguration(figure, runtime);
+        drawScoreChart(design, canvas);
+        const imgContent = canvas.toDataURL();
+        div.remove();
+        return imgContent;
+    }
+    else if (type === "gauge") {
+        drawGaugeChart(canvas, runtime);
+        const imgContent = canvas.toDataURL();
+        div.remove();
+        return imgContent;
+    }
+    return undefined;
+}
+/**
+ * Custom chart.js plugin to set the background color of the canvas
+ * https://github.com/chartjs/Chart.js/blob/8fdf76f8f02d31684d34704341a5d9217e977491/docs/configuration/canvas-background.md
+ */
+const backgroundColorChartJSPlugin = {
+    id: "customCanvasBackgroundColor",
+    beforeDraw: (chart) => {
+        const { ctx } = chart;
+        ctx.save();
+        ctx.globalCompositeOperation = "destination-over";
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, chart.width, chart.height);
+        ctx.restore();
+    },
+};
+
 /**
  * Represent a raw XML string
  */
@@ -23008,9 +23019,9 @@ const XLSX_CHART_TYPES = [
 /** In XLSX color format (no #)  */
 const AUTO_COLOR = "000000";
 const XLSX_ICONSET_MAP = {
-    arrow: "3Arrows",
+    arrows: "3Arrows",
     smiley: "3Symbols",
-    dot: "3TrafficLights1",
+    dots: "3TrafficLights1",
 };
 const NAMESPACE = {
     styleSheet: "http://schemas.openxmlformats.org/spreadsheetml/2006/main",
@@ -23541,6 +23552,7 @@ const ICON_SET_CONVERSION_MAP = {
 };
 /** Map between legend position in XLSX file and human readable position  */
 const DRAWING_LEGEND_POSITION_CONVERSION_MAP = {
+    none: "none",
     b: "bottom",
     t: "top",
     l: "left",
@@ -26303,7 +26315,7 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
                     default: "ffffff",
                 }).asString(),
                 legendPosition: DRAWING_LEGEND_POSITION_CONVERSION_MAP[this.extractChildAttr(rootChartElement, "c:legendPos", "val", {
-                    default: "b",
+                    default: "none",
                 }).asString()],
                 stacked: barChartGrouping === "stacked",
                 fontColor: "000000",
@@ -26337,7 +26349,7 @@ class XlsxChartExtractor extends XlsxBaseExtractor {
                 default: "ffffff",
             }).asString(),
             legendPosition: DRAWING_LEGEND_POSITION_CONVERSION_MAP[this.extractChildAttr(chartElement, "c:legendPos", "val", {
-                default: "b",
+                default: "none",
             }).asString()],
             stacked: barChartGrouping === "stacked",
             fontColor: "000000",
@@ -28949,7 +28961,8 @@ function getChartLabelValues(getters, dataSets, labelRange) {
         }
     }
     else if (dataSets.length === 1) {
-        for (let i = 0; i < getData(getters, dataSets[0]).length; i++) {
+        const dataLength = getData(getters, dataSets[0]).length;
+        for (let i = 0; i < dataLength; i++) {
             labels.formattedValues.push("");
             labels.values.push("");
         }
@@ -29132,7 +29145,7 @@ function getLineChartDatasets(definition, args) {
 function getScatterChartDatasets(definition, args) {
     const dataSets = getLineChartDatasets(definition, args);
     for (const dataSet of dataSets) {
-        if (dataSet.xAxisID !== TREND_LINE_XAXIS_ID) {
+        if (!isTrendLineAxis(dataSet.xAxisID)) {
             dataSet.showLine = false;
         }
     }
@@ -29259,7 +29272,9 @@ function getTrendingLineDataSet(dataset, config, data) {
     const borderColor = config.color || lightenColor(rgbaToHex(defaultBorderColor), 0.5);
     return {
         type: "line",
-        xAxisID: TREND_LINE_XAXIS_ID,
+        xAxisID: config.type === "trailingMovingAverage"
+            ? MOVING_AVERAGE_TREND_LINE_XAXIS_ID
+            : TREND_LINE_XAXIS_ID,
         yAxisID: dataset.yAxisID,
         label: dataset.label ? _t("Trend line for %s", dataset.label) : "",
         data,
@@ -29334,22 +29349,19 @@ function getPieChartLegend(definition, args) {
     const { dataSetsValues } = args;
     const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
     const colors = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
+    const fontColor = chartFontColor(definition.background);
     return {
         ...getLegendDisplayOptions(definition),
         labels: {
-            color: chartFontColor(definition.background),
             usePointStyle: true,
-            //@ts-ignore
-            generateLabels: (c) => 
-            //@ts-ignore
-            c.data.labels.map((label, index) => ({
+            generateLabels: (c) => c.data.labels?.map((label, index) => ({
                 text: truncateLabel(String(label)),
                 strokeStyle: colors[index],
                 fillStyle: colors[index],
                 pointStyle: "rect",
-                hidden: false,
                 lineWidth: 2,
-            })),
+                fontColor,
+            })) || [],
             filter: (legendItem, data) => {
                 return "datasetIndex" in legendItem
                     ? !data.datasets[legendItem.datasetIndex].hidden
@@ -29482,7 +29494,7 @@ function getCustomLegendLabels(fontColor, legendLabelConfig) {
             color: fontColor,
             usePointStyle: true,
             generateLabels: (chart) => chart.data.datasets.map((dataset, index) => {
-                if (dataset["xAxisID"] === TREND_LINE_XAXIS_ID) {
+                if (isTrendLineAxis(dataset["xAxisID"])) {
                     return {
                         text: truncateLabel(dataset.label),
                         fontColor,
@@ -29540,6 +29552,11 @@ function getBarChartScales(definition, args) {
             offset: false,
             display: false,
         };
+        scales[MOVING_AVERAGE_TREND_LINE_XAXIS_ID] = {
+            ...scales.x,
+            offset: false,
+            display: false,
+        };
     }
     return scales;
 }
@@ -29573,6 +29590,10 @@ function getLineChartScales(definition, args) {
             ...scales.x,
             display: false,
         };
+        scales[MOVING_AVERAGE_TREND_LINE_XAXIS_ID] = {
+            ...scales.x,
+            display: false,
+        };
         if (axisType === "category" || axisType === "time") {
             /* We add a second x axis here to draw the trend lines, with the labels length being
              * set so that the second axis points match the classical x axis
@@ -29581,6 +29602,8 @@ function getLineChartScales(definition, args) {
             scales[TREND_LINE_XAXIS_ID]["type"] = "category";
             scales[TREND_LINE_XAXIS_ID]["labels"] = range(0, maxLength).map((x) => x.toString());
             scales[TREND_LINE_XAXIS_ID]["offset"] = false;
+            scales[MOVING_AVERAGE_TREND_LINE_XAXIS_ID]["type"] = "category";
+            scales[MOVING_AVERAGE_TREND_LINE_XAXIS_ID]["offset"] = false;
         }
     }
     return scales;
@@ -29899,9 +29922,7 @@ function getBarChartTooltip(definition, args) {
         external: customTooltipHandler,
         callbacks: {
             title: function (tooltipItems) {
-                return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
-                    ? undefined
-                    : "";
+                return tooltipItems.some((item) => !isTrendLineAxis(item.dataset.xAxisID)) ? undefined : "";
             },
             beforeLabel: (tooltipItem) => tooltipItem.dataset?.label || tooltipItem.label,
             label: function (tooltipItem) {
@@ -29928,7 +29949,7 @@ function getLineChartTooltip(definition, args) {
     if (axisType === "linear") {
         tooltip.callbacks.label = (tooltipItem) => {
             const dataSetPoint = tooltipItem.parsed.y;
-            let label = tooltipItem.dataset.xAxisID === TREND_LINE_XAXIS_ID
+            let label = isTrendLineAxis(tooltipItem.dataset.xAxisID)
                 ? ""
                 : tooltipItem.parsed.x;
             if (typeof label === "string" && isNumber(label, locale)) {
@@ -29950,8 +29971,7 @@ function getLineChartTooltip(definition, args) {
     }
     tooltip.callbacks.beforeLabel = (tooltipItem) => tooltipItem.dataset?.label || tooltipItem.label;
     tooltip.callbacks.title = function (tooltipItems) {
-        const displayTooltipTitle = axisType !== "linear" &&
-            tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID);
+        const displayTooltipTitle = axisType !== "linear" && tooltipItems.some((item) => !isTrendLineAxis(item.dataset.xAxisID));
         return displayTooltipTitle ? undefined : "";
     };
     return tooltip;
@@ -34205,6 +34225,7 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   CHART_COMMON_OPTIONS: CHART_COMMON_OPTIONS,
   GaugeChart: GaugeChart,
   LineChart: LineChart,
+  MOVING_AVERAGE_TREND_LINE_XAXIS_ID: MOVING_AVERAGE_TREND_LINE_XAXIS_ID,
   PieChart: PieChart,
   ScorecardChart: ScorecardChart$1,
   TREND_LINE_XAXIS_ID: TREND_LINE_XAXIS_ID,
@@ -34229,11 +34250,11 @@ var CHART_HELPERS = /*#__PURE__*/Object.freeze({
   duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
   formatChartDatasetValue: formatChartDatasetValue,
   formatTickValue: formatTickValue,
-  getChartJSConstructor: getChartJSConstructor,
   getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
   getDefinedAxis: getDefinedAxis,
   getPieColors: getPieColors,
   getSmartChartDefinition: getSmartChartDefinition,
+  isTrendLineAxis: isTrendLineAxis,
   shouldRemoveFirstLabel: shouldRemoveFirstLabel,
   toExcelDataset: toExcelDataset,
   toExcelLabelRange: toExcelLabelRange,
@@ -36281,9 +36302,7 @@ class FormulaFingerprintStore extends SpreadsheetStore {
                 }
             }
         }
-        // removes the index placeholders from the normalized formula
-        // =|N0|+|N1|+|N0| -> =|N|+|N|+|N|
-        const normalizedFormula = cell.compiledFormula.normalizedFormula.replace(/(|\w)(\d)(|)/g, "$1$3");
+        const normalizedFormula = cell.compiledFormula.normalizedFormula;
         return hash(fingerprintVector) + normalizedFormula;
     }
     getLiteralFingerprint(position) {
@@ -39628,9 +39647,11 @@ class SeriesDesignEditor extends Component {
         if (!runtime || !("chartJsConfig" in runtime)) {
             return [];
         }
-        return runtime.chartJsConfig.data.datasets.map((d) => d.label);
+        return runtime.chartJsConfig.data.datasets
+            .filter((d) => !isTrendLineAxis(d["xAxisID"] ?? ""))
+            .map((d) => d.label);
     }
-    updateSerieEditor(ev) {
+    updateEditedSeries(ev) {
         this.state.index = ev.target.selectedIndex;
     }
     updateDataSeriesColor(color) {
@@ -39643,7 +39664,7 @@ class SeriesDesignEditor extends Component {
         };
         this.props.updateChart(this.props.figureId, { dataSets });
     }
-    getDataSerieColor() {
+    getDataSeriesColor() {
         const dataSets = this.props.definition.dataSets;
         if (!dataSets?.[this.state.index])
             return "";
@@ -39663,7 +39684,7 @@ class SeriesDesignEditor extends Component {
         };
         this.props.updateChart(this.props.figureId, { dataSets });
     }
-    getDataSerieLabel() {
+    getDataSeriesLabel() {
         const dataSets = this.props.definition.dataSets;
         return dataSets[this.state.index]?.label || this.getDataSeries()[this.state.index];
     }
@@ -39776,7 +39797,7 @@ class SeriesWithAxisDesignEditor extends Component {
         }
         this.updateTrendLineValue(index, { window });
     }
-    getDataSerieColor(index) {
+    getDataSeriesColor(index) {
         const dataSets = this.props.definition.dataSets;
         if (!dataSets?.[index])
             return "";
@@ -39787,7 +39808,7 @@ class SeriesWithAxisDesignEditor extends Component {
     }
     getTrendLineColor(index) {
         return (this.getTrendLineConfiguration(index)?.color ??
-            setColorAlpha(this.getDataSerieColor(index), 0.5));
+            setColorAlpha(this.getDataSeriesColor(index), 0.5));
     }
     updateTrendLineColor(index, color) {
         this.updateTrendLineValue(index, { color });
@@ -45076,7 +45097,8 @@ css /* scss */ `
     &.pivot-dimension-invalid {
       background-color: #ffdddd;
       border-color: red !important;
-      select {
+      select,
+      input {
         background-color: #ffdddd;
       }
     }
@@ -46937,7 +46959,7 @@ class PivotSidePanelStore extends SpreadsheetStore {
                 this.notification.notifyUser({
                     type: "info",
                     text: _t("Pivot updates only work with dynamic pivot tables. Use %s or re-insert the static pivot from the Data menu.", pivotExample),
-                    sticky: false,
+                    sticky: true,
                 });
             }
         }
@@ -70767,7 +70789,9 @@ css /* scss */ `
     border: 1px solid;
     font-family: ${DEFAULT_FONT};
 
-    .o-composer:empty:not(:focus):not(.active)::before {
+    /* In readonly we always show the fx icon if the composer is empty, not matter the focus */
+    .o-composer:empty:not(:focus):not(.active)::before,
+    &.o-topbar-composer-readonly .o-composer:empty::before {
       content: url("data:image/svg+xml,${encodeURIComponent(FX_SVG)}");
       position: relative;
       top: 20%;
@@ -74093,10 +74117,14 @@ function addIconSetRule(cf, rule) {
             continue;
         }
         const cfValueObjectNodes = cfValueObject.map((attrs) => escapeXml /*xml*/ `<cfvo ${formatAttributes(attrs)} />`);
+        const iconSetAttrs = [["iconSet", getIconSet(rule.icons)]];
+        if (isIconSetReversed(rule.icons)) {
+            iconSetAttrs.push(["reverse", "1"]);
+        }
         conditionalFormats.push(escapeXml /*xml*/ `
       <conditionalFormatting sqref="${range}">
         <cfRule ${formatAttributes(ruleAttributes)}>
-          <iconSet iconSet="${getIconSet(rule.icons)}">
+          <iconSet ${formatAttributes(iconSetAttrs)}>
             ${joinXmlNodes(cfValueObjectNodes)}
           </iconSet>
         </cfRule>
@@ -74114,9 +74142,21 @@ function commonCfAttributes(cf) {
         ["stopIfTrue", cf.stopIfTrue ? 1 : 0],
     ];
 }
+function isIconSetReversed(iconSet) {
+    const defaultIconSet = ICON_SETS[detectIconsType(iconSet)];
+    return iconSet.upper === defaultIconSet.bad && iconSet.lower === defaultIconSet.good;
+}
 function getIconSet(iconSet) {
-    return XLSX_ICONSET_MAP[Object.keys(XLSX_ICONSET_MAP).find((key) => iconSet.upper.toLowerCase().startsWith(key)) ||
-        "dots"];
+    return XLSX_ICONSET_MAP[detectIconsType(iconSet)];
+}
+/**
+ * Partial detection based on "upper" point only.
+ * We support any arbitrary icon in the set, while excel doesn't allow
+ * mixing icons from different types.
+ */
+function detectIconsType(iconSet) {
+    const type = Object.keys(ICON_SETS).find((type) => Object.values(ICON_SETS[type]).includes(iconSet.upper)) || "dots";
+    return type;
 }
 function thresholdAttributes(threshold, position) {
     const type = getExcelThresholdType(threshold.type, position);
@@ -75866,6 +75906,7 @@ const registries = {
     supportedPivotPositionalFormulaRegistry,
     pivotToFunctionValueRegistry,
     migrationStepRegistry,
+    chartJsExtensionRegistry,
 };
 const helpers = {
     arg,
@@ -76021,6 +76062,6 @@ const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, CoreViewPlugin, 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.2.4";
-__info__.date = "2025-03-19T08:20:57.717Z";
-__info__.hash = "958936a";
+__info__.version = "18.2.6";
+__info__.date = "2025-04-04T08:41:26.115Z";
+__info__.hash = "faa00e2";