@odoo/o-spreadsheet 18.2.4 → 18.2.6

package/dist/o-spreadsheet.iife.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.2.4
- * @date 2025-03-19T08:20:57.717Z
- * @hash 958936a
+ * @version 18.2.6
+ * @date 2025-04-04T08:41:26.115Z
+ * @hash faa00e2
  */
 
 (function (exports, owl) {
@@ -805,8 +805,7 @@
    *
    * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Character_Classes
    */
-  const whiteSpaceSpecialCharacters = [
-      " ",
+  const specialWhiteSpaceSpecialCharacters = [
       "\t",
       "\f",
       "\v",
@@ -821,7 +820,7 @@
       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
@@ -1132,7 +1131,10 @@
       }
       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) {
@@ -6795,8 +6797,12 @@
       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) ||
@@ -6930,17 +6936,19 @@
       }
       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) {
@@ -6948,6 +6956,17 @@
       }
       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);
@@ -7000,7 +7019,7 @@
    */
   function canonicalizeNumberContent(content, locale) {
       return content.startsWith("=")
-          ? canonicalizeFormula$1(content, locale)
+          ? canonicalizeFormula(content, locale)
           : canonicalizeNumberLiteral(content, locale);
   }
   /**
@@ -7015,7 +7034,7 @@
    */
   function canonicalizeContent(content, locale) {
       return content.startsWith("=")
-          ? canonicalizeFormula$1(content, locale)
+          ? canonicalizeFormula(content, locale)
           : canonicalizeLiteral(content, locale);
   }
   /**
@@ -7031,15 +7050,21 @@
           ? 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;
@@ -7194,37 +7219,6 @@
       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;
@@ -9599,7 +9593,161 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
+  /**
+   * 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)
@@ -9950,6 +10098,9 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 = {
@@ -9994,7 +10145,7 @@ stores.inject(MyMetaStore, storeInstance);
       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++) {
@@ -10037,7 +10188,7 @@ stores.inject(MyMetaStore, storeInstance);
       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++) {
@@ -10143,341 +10294,79 @@ stores.inject(MyMetaStore, storeInstance);
       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();
+  css /* scss */ `
+  .o-spreadsheet {
+    .o-chart-custom-tooltip {
+      font-size: 12px;
+      background-color: #fff;
+      z-index: ${ComponentsImportance.FigureTooltip};
+    }
   }
-  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,
+`;
+  chartJsExtensionRegistry.add("chartShowValuesPlugin", chartShowValuesPlugin);
+  chartJsExtensionRegistry.add("waterfallLinesPlugin", waterfallLinesPlugin);
+  class ChartJsComponent extends owl.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 = owl.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() {
+          owl.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));
+          });
+          owl.onWillUnmount(() => this.chart?.destroy());
+          owl.useEffect(() => {
+              const runtime = this.chartRuntime;
+              if (runtime !== this.currentRuntime) {
+                  if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
+                      this.chart?.destroy();
+                      this.createChart(deepCopy(runtime.chartJsConfig));
+                  }
+                  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 };
   }
 
   /**
@@ -11059,299 +10948,6 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
 
-  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 owl.Component {
-      static template = "o-spreadsheet-ChartJsComponent";
-      static props = {
-          figure: Object,
-      };
-      canvas = owl.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() {
-          owl.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));
-          });
-          owl.onWillUnmount(() => this.chart?.destroy());
-          owl.useEffect(() => {
-              const runtime = this.chartRuntime;
-              if (runtime !== this.currentRuntime) {
-                  if (runtime.chartJsConfig.type !== this.currentRuntime.chartJsConfig.type) {
-                      this.chart?.destroy();
-                      this.createChart(deepCopy(runtime.chartJsConfig));
-                  }
-                  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 owl.Component {
       static template = "o-spreadsheet-ScorecardChart";
       static props = {
@@ -20545,11 +20141,26 @@ stores.inject(MyMetaStore, storeInstance);
           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,
   };
@@ -21884,11 +21495,14 @@ stores.inject(MyMetaStore, storeInstance);
       }
   }
   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"));
           }
@@ -21962,16 +21576,15 @@ stores.inject(MyMetaStore, storeInstance);
                   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());
@@ -22003,7 +21616,7 @@ stores.inject(MyMetaStore, storeInstance);
       const compiledFormula = {
           execute: functionCache[cacheKey],
           dependencies,
-          constantValues,
+          literalValues,
           symbols,
           tokens,
           isBadExpression: false,
@@ -22016,33 +21629,31 @@ stores.inject(MyMetaStore, storeInstance);
    * 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;
@@ -22055,7 +21666,7 @@ stores.inject(MyMetaStore, storeInstance);
    * Return formula arguments which are references, strings and numbers.
    */
   function formulaArguments(tokens) {
-      const constantValues = {
+      const literalValues = {
           numbers: [],
           strings: [],
       };
@@ -22069,15 +21680,11 @@ stores.inject(MyMetaStore, storeInstance);
                   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": {
@@ -22088,7 +21695,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       return {
           dependencies,
-          constantValues,
+          literalValues,
           symbols,
       };
   }
@@ -22938,6 +22545,343 @@ stores.inject(MyMetaStore, storeInstance);
 
   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 owl.Component {
       static template = "o-spreadsheet-GaugeChartComponent";
       canvas = owl.useRef("chartContainer");
@@ -22970,6 +22914,73 @@ stores.inject(MyMetaStore, storeInstance);
       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
    */
@@ -23009,9 +23020,9 @@ stores.inject(MyMetaStore, storeInstance);
   /** 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",
@@ -23542,6 +23553,7 @@ stores.inject(MyMetaStore, storeInstance);
   };
   /** 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",
@@ -26304,7 +26316,7 @@ stores.inject(MyMetaStore, storeInstance);
                       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",
@@ -26338,7 +26350,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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",
@@ -28950,7 +28962,8 @@ stores.inject(MyMetaStore, storeInstance);
           }
       }
       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("");
           }
@@ -29133,7 +29146,7 @@ stores.inject(MyMetaStore, storeInstance);
   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;
           }
       }
@@ -29260,7 +29273,9 @@ stores.inject(MyMetaStore, storeInstance);
       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,
@@ -29335,22 +29350,19 @@ stores.inject(MyMetaStore, storeInstance);
       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
@@ -29483,7 +29495,7 @@ stores.inject(MyMetaStore, storeInstance);
               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,
@@ -29541,6 +29553,11 @@ stores.inject(MyMetaStore, storeInstance);
               offset: false,
               display: false,
           };
+          scales[MOVING_AVERAGE_TREND_LINE_XAXIS_ID] = {
+              ...scales.x,
+              offset: false,
+              display: false,
+          };
       }
       return scales;
   }
@@ -29574,6 +29591,10 @@ stores.inject(MyMetaStore, storeInstance);
               ...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
@@ -29582,6 +29603,8 @@ stores.inject(MyMetaStore, storeInstance);
               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;
@@ -29900,9 +29923,7 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -29929,7 +29950,7 @@ stores.inject(MyMetaStore, storeInstance);
       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)) {
@@ -29951,8 +29972,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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;
@@ -34206,6 +34226,7 @@ stores.inject(MyMetaStore, storeInstance);
     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,
@@ -34230,11 +34251,11 @@ stores.inject(MyMetaStore, storeInstance);
     duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
     formatChartDatasetValue: formatChartDatasetValue,
     formatTickValue: formatTickValue,
-    getChartJSConstructor: getChartJSConstructor,
     getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
     getDefinedAxis: getDefinedAxis,
     getPieColors: getPieColors,
     getSmartChartDefinition: getSmartChartDefinition,
+    isTrendLineAxis: isTrendLineAxis,
     shouldRemoveFirstLabel: shouldRemoveFirstLabel,
     toExcelDataset: toExcelDataset,
     toExcelLabelRange: toExcelLabelRange,
@@ -36282,9 +36303,7 @@ stores.inject(MyMetaStore, storeInstance);
                   }
               }
           }
-          // 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) {
@@ -39629,9 +39648,11 @@ stores.inject(MyMetaStore, storeInstance);
           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) {
@@ -39644,7 +39665,7 @@ stores.inject(MyMetaStore, storeInstance);
           };
           this.props.updateChart(this.props.figureId, { dataSets });
       }
-      getDataSerieColor() {
+      getDataSeriesColor() {
           const dataSets = this.props.definition.dataSets;
           if (!dataSets?.[this.state.index])
               return "";
@@ -39664,7 +39685,7 @@ stores.inject(MyMetaStore, storeInstance);
           };
           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];
       }
@@ -39777,7 +39798,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           this.updateTrendLineValue(index, { window });
       }
-      getDataSerieColor(index) {
+      getDataSeriesColor(index) {
           const dataSets = this.props.definition.dataSets;
           if (!dataSets?.[index])
               return "";
@@ -39788,7 +39809,7 @@ stores.inject(MyMetaStore, storeInstance);
       }
       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 });
@@ -45077,7 +45098,8 @@ stores.inject(MyMetaStore, storeInstance);
     &.pivot-dimension-invalid {
       background-color: #ffdddd;
       border-color: red !important;
-      select {
+      select,
+      input {
         background-color: #ffdddd;
       }
     }
@@ -46938,7 +46960,7 @@ stores.inject(MyMetaStore, storeInstance);
                   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,
                   });
               }
           }
@@ -70768,7 +70790,9 @@ stores.inject(MyMetaStore, storeInstance);
     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%;
@@ -74094,10 +74118,14 @@ stores.inject(MyMetaStore, storeInstance);
               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>
@@ -74115,9 +74143,21 @@ stores.inject(MyMetaStore, storeInstance);
           ["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);
@@ -75867,6 +75907,7 @@ stores.inject(MyMetaStore, storeInstance);
       supportedPivotPositionalFormulaRegistry,
       pivotToFunctionValueRegistry,
       migrationStepRegistry,
+      chartJsExtensionRegistry,
   };
   const helpers = {
       arg,
@@ -76067,9 +76108,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = 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";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);