@odoo/o-spreadsheet 18.2.5 → 18.2.7

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.5
- * @date 2025-03-26T12:47:44.113Z
- * @hash 4675edd
+ * @version 18.2.7
+ * @date 2025-04-14T17:19:31.011Z
+ * @hash e187958
  */
 
 (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
@@ -3575,6 +3574,7 @@
       "CLEAR_FORMATTING",
       "SET_BORDER",
       "SET_ZONE_BORDERS",
+      "SET_BORDERS_ON_TARGET",
       /** CHART */
       "CREATE_CHART",
       "UPDATE_CHART",
@@ -6724,6 +6724,7 @@
   }
 
   class BorderClipboardHandler extends AbstractCellClipboardHandler {
+      queuedBordersToAdd = {};
       copy(data) {
           const sheetId = data.sheetId;
           if (data.zones.length === 0) {
@@ -6754,6 +6755,7 @@
               const { left, top } = zones[0];
               this.pasteZone(sheetId, left, top, content.borders);
           }
+          this.executeQueuedChanges(sheetId);
       }
       pasteZone(sheetId, col, row, borders) {
           for (const [r, rowBorders] of borders.entries()) {
@@ -6772,7 +6774,20 @@
               ...targetBorders,
               ...originBorders,
           };
-          this.dispatch("SET_BORDER", { ...target, border });
+          const borderKey = JSON.stringify(border);
+          if (!this.queuedBordersToAdd[borderKey]) {
+              this.queuedBordersToAdd[borderKey] = [];
+          }
+          this.queuedBordersToAdd[borderKey].push(positionToZone(target));
+      }
+      executeQueuedChanges(pasteSheetTarget) {
+          for (const borderKey in this.queuedBordersToAdd) {
+              const zones = this.queuedBordersToAdd[borderKey];
+              const border = JSON.parse(borderKey);
+              const target = recomputeZones(zones, []);
+              this.dispatch("SET_BORDERS_ON_TARGET", { sheetId: pasteSheetTarget, target, border });
+          }
+          this.queuedBordersToAdd = {};
       }
   }
 
@@ -6798,8 +6813,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) ||
@@ -6933,17 +6952,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) {
@@ -6951,6 +6972,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);
@@ -8695,12 +8727,13 @@
       }
       pasteCf(origin, target, isCutOperation) {
           if (origin?.rules && origin.rules.length > 0) {
+              const originZone = positionToZone(origin.position);
               const zone = positionToZone(target);
               for (const rule of origin.rules) {
                   const toRemoveZones = [];
                   if (isCutOperation) {
                       //remove from current rule
-                      toRemoveZones.push(positionToZone(origin.position));
+                      toRemoveZones.push(originZone);
                   }
                   if (origin.position.sheetId === target.sheetId) {
                       this.adaptCFRules(origin.position.sheetId, rule, [zone], toRemoveZones);
@@ -8814,6 +8847,7 @@
       pasteDataValidation(origin, target, isCutOperation) {
           if (origin) {
               const zone = positionToZone(target);
+              const originZone = positionToZone(origin.position);
               const rule = origin.rule;
               if (!rule) {
                   const targetRule = this.getters.getValidationRuleForCell(target);
@@ -8825,7 +8859,7 @@
               }
               const toRemoveZone = [];
               if (isCutOperation) {
-                  toRemoveZone.push(positionToZone(origin.position));
+                  toRemoveZone.push(originZone);
               }
               if (origin.position.sheetId === target.sheetId) {
                   const copyToRule = this.getDataValidationRuleToCopyTo(target.sheetId, rule, false);
@@ -8885,7 +8919,7 @@
                       continue;
                   }
                   this.dispatch("ADD_DATA_VALIDATION_RULE", {
-                      rule: dv,
+                      rule: { id: dv.id, criterion: dv.criterion, isBlocking: dv.isBlocking },
                       ranges: newDvZones.map((zone) => this.getters.getRangeDataFromZone(sheetId, zone)),
                       sheetId,
                   });
@@ -9577,6 +9611,159 @@ 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";
   /**
@@ -10125,341 +10312,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 };
   }
 
   /**
@@ -11041,299 +10966,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 = {
@@ -22931,6 +22563,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");
@@ -22963,6 +22932,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
    */
@@ -34233,7 +34269,6 @@ stores.inject(MyMetaStore, storeInstance);
     duplicateLabelRangeInDuplicatedSheet: duplicateLabelRangeInDuplicatedSheet,
     formatChartDatasetValue: formatChartDatasetValue,
     formatTickValue: formatTickValue,
-    getChartJSConstructor: getChartJSConstructor,
     getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
     getDefinedAxis: getDefinedAxis,
     getPieColors: getPieColors,
@@ -45081,7 +45116,8 @@ stores.inject(MyMetaStore, storeInstance);
     &.pivot-dimension-invalid {
       background-color: #ffdddd;
       border-color: red !important;
-      select {
+      select,
+      input {
         background-color: #ffdddd;
       }
     }
@@ -46942,7 +46978,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,
                   });
               }
           }
@@ -53294,6 +53330,15 @@ stores.inject(MyMetaStore, storeInstance);
               case "SET_BORDER":
                   this.setBorder(cmd.sheetId, cmd.col, cmd.row, cmd.border);
                   break;
+              case "SET_BORDERS_ON_TARGET":
+                  for (const zone of cmd.target) {
+                      for (let row = zone.top; row <= zone.bottom; row++) {
+                          for (let col = zone.left; col <= zone.right; col++) {
+                              this.setBorder(cmd.sheetId, col, row, cmd.border);
+                          }
+                      }
+                  }
+                  break;
               case "SET_ZONE_BORDERS":
                   if (cmd.border) {
                       const target = cmd.target.map((zone) => this.getters.expandZone(cmd.sheetId, zone));
@@ -63056,25 +63101,6 @@ stores.inject(MyMetaStore, storeInstance);
               case "AUTOFILL_AUTO":
                   this.autofillAuto();
                   break;
-              case "AUTOFILL_CELL":
-                  this.autoFillMerge(cmd.originCol, cmd.originRow, cmd.col, cmd.row);
-                  const sheetId = this.getters.getActiveSheetId();
-                  this.dispatch("UPDATE_CELL", {
-                      sheetId,
-                      col: cmd.col,
-                      row: cmd.row,
-                      style: cmd.style || null,
-                      content: cmd.content || "",
-                      format: cmd.format || "",
-                  });
-                  this.dispatch("SET_BORDER", {
-                      sheetId,
-                      col: cmd.col,
-                      row: cmd.row,
-                      border: cmd.border,
-                  });
-                  this.autofillCF(cmd.originCol, cmd.originRow, cmd.col, cmd.row);
-                  this.autofillDV(cmd.originCol, cmd.originRow, cmd.col, cmd.row);
           }
       }
       // ---------------------------------------------------------------------------
@@ -63098,6 +63124,7 @@ stores.inject(MyMetaStore, storeInstance);
           }
           const source = this.getters.getSelectedZone();
           const target = this.autofillZone;
+          const autofillCellsData = [];
           switch (this.direction) {
               case "down" /* DIRECTION.DOWN */:
                   for (let col = source.left; col <= source.right; col++) {
@@ -63107,7 +63134,7 @@ stores.inject(MyMetaStore, storeInstance);
                       }
                       const generator = this.createGenerator(xcs);
                       for (let row = target.top; row <= target.bottom; row++) {
-                          this.computeNewCell(generator, col, row, apply);
+                          autofillCellsData.push(this.computeNewCell(generator, col, row));
                       }
                   }
                   break;
@@ -63119,7 +63146,7 @@ stores.inject(MyMetaStore, storeInstance);
                       }
                       const generator = this.createGenerator(xcs);
                       for (let row = target.bottom; row >= target.top; row--) {
-                          this.computeNewCell(generator, col, row, apply);
+                          autofillCellsData.push(this.computeNewCell(generator, col, row));
                       }
                   }
                   break;
@@ -63131,7 +63158,7 @@ stores.inject(MyMetaStore, storeInstance);
                       }
                       const generator = this.createGenerator(xcs);
                       for (let col = target.right; col >= target.left; col--) {
-                          this.computeNewCell(generator, col, row, apply);
+                          autofillCellsData.push(this.computeNewCell(generator, col, row));
                       }
                   }
                   break;
@@ -63143,12 +63170,26 @@ stores.inject(MyMetaStore, storeInstance);
                       }
                       const generator = this.createGenerator(xcs);
                       for (let col = target.left; col <= target.right; col++) {
-                          this.computeNewCell(generator, col, row, apply);
+                          autofillCellsData.push(this.computeNewCell(generator, col, row));
                       }
                   }
                   break;
           }
           if (apply) {
+              const bordersZones = {};
+              const cfNewRanges = {};
+              const dvNewZones = {};
+              const sheetId = this.getters.getActiveSheetId();
+              for (const data of autofillCellsData) {
+                  this.collectBordersData(data, bordersZones);
+                  this.autofillMerge(sheetId, data);
+                  this.autofillCell(sheetId, data);
+                  this.collectConditionalFormatsData(sheetId, data, cfNewRanges);
+                  this.collectDataValidationsData(sheetId, data, dvNewZones);
+              }
+              this.autofillBorders(sheetId, bordersZones);
+              this.autofillConditionalFormats(sheetId, cfNewRanges);
+              this.autofillDataValidations(sheetId, dvNewZones);
               this.autofillZone = undefined;
               this.selection.resizeAnchorZone(this.direction, this.steps);
               this.lastCellSelected = {};
@@ -63157,6 +63198,95 @@ stores.inject(MyMetaStore, storeInstance);
               this.tooltip = undefined;
           }
       }
+      collectBordersData(data, bordersPositions) {
+          const key = JSON.stringify(data.border);
+          if (!(key in bordersPositions)) {
+              bordersPositions[key] = [];
+          }
+          bordersPositions[key].push(positionToZone({ col: data.col, row: data.row }));
+      }
+      collectConditionalFormatsData(sheetId, data, cfNewRanges) {
+          const { originCol, originRow, col, row } = data;
+          const cfsAtOrigin = this.getters.getRulesByCell(sheetId, originCol, originRow);
+          const xc = toXC(col, row);
+          for (const cf of cfsAtOrigin) {
+              if (!(cf.id in cfNewRanges)) {
+                  cfNewRanges[cf.id] = [];
+              }
+              cfNewRanges[cf.id].push(xc);
+          }
+      }
+      collectDataValidationsData(sheetId, data, dvNewZones) {
+          const { originCol, originRow, col, row } = data;
+          const cellPosition = { sheetId, col: originCol, row: originRow };
+          const dvsAtOrigin = this.getters.getValidationRuleForCell(cellPosition);
+          if (!dvsAtOrigin) {
+              return;
+          }
+          if (!(dvsAtOrigin.id in dvNewZones)) {
+              dvNewZones[dvsAtOrigin.id] = [];
+          }
+          dvNewZones[dvsAtOrigin.id].push(positionToZone({ col, row }));
+      }
+      autofillCell(sheetId, data) {
+          this.dispatch("UPDATE_CELL", {
+              sheetId,
+              col: data.col,
+              row: data.row,
+              content: data.content || "",
+              style: data.style || null,
+              format: data.format || "",
+          });
+          // Still usefull in odoo ATM to autofill field sync
+          this.dispatch("AUTOFILL_CELL", data);
+      }
+      autofillBorders(sheetId, bordersPositions) {
+          for (const stringifiedBorder in bordersPositions) {
+              const border = stringifiedBorder === "undefined" ? undefined : JSON.parse(stringifiedBorder);
+              this.dispatch("SET_BORDERS_ON_TARGET", {
+                  sheetId,
+                  border,
+                  target: recomputeZones(bordersPositions[stringifiedBorder]),
+              });
+          }
+      }
+      autofillConditionalFormats(sheetId, cfNewRanges) {
+          for (const cfId in cfNewRanges) {
+              const changes = cfNewRanges[cfId];
+              const cf = this.getters.getConditionalFormats(sheetId).find((cf) => cf.id === cfId);
+              if (!cf) {
+                  continue;
+              }
+              const newCfRanges = this.getters.getAdaptedCfRanges(sheetId, cf, changes.map(toZone), []);
+              if (newCfRanges) {
+                  this.dispatch("ADD_CONDITIONAL_FORMAT", {
+                      cf: {
+                          id: cf.id,
+                          rule: cf.rule,
+                          stopIfTrue: cf.stopIfTrue,
+                      },
+                      ranges: newCfRanges,
+                      sheetId,
+                  });
+              }
+          }
+      }
+      autofillDataValidations(sheetId, dvNewZones) {
+          for (const dvId in dvNewZones) {
+              const changes = dvNewZones[dvId];
+              const dvOrigin = this.getters.getDataValidationRule(sheetId, dvId);
+              if (!dvOrigin) {
+                  continue;
+              }
+              const dvRangesXcs = dvOrigin.ranges.map((range) => range.zone);
+              const newDvRanges = recomputeZones(dvRangesXcs.concat(changes), []);
+              this.dispatch("ADD_DATA_VALIDATION_RULE", {
+                  rule: dvOrigin,
+                  ranges: newDvRanges.map((zone) => this.getters.getRangeDataFromZone(sheetId, zone)),
+                  sheetId,
+              });
+          }
+      }
       /**
        * Select a cell which becomes the last cell of the autofillZone
        */
@@ -63235,22 +63365,20 @@ stores.inject(MyMetaStore, storeInstance);
       /**
        * Generate the next cell
        */
-      computeNewCell(generator, col, row, apply) {
+      computeNewCell(generator, col, row) {
           const { cellData, tooltip, origin } = generator.next();
           const { content, style, border, format } = cellData;
           this.tooltip = tooltip;
-          if (apply) {
-              this.dispatch("AUTOFILL_CELL", {
-                  originCol: origin.col,
-                  originRow: origin.row,
-                  col,
-                  row,
-                  content,
-                  style,
-                  border,
-                  format,
-              });
-          }
+          return {
+              originCol: origin.col,
+              originRow: origin.row,
+              col,
+              row,
+              content,
+              style,
+              border,
+              format,
+          };
       }
       /**
        * Get the rule associated to the current cell
@@ -63318,8 +63446,8 @@ stores.inject(MyMetaStore, storeInstance);
               ? position[first].value
               : position[second].value;
       }
-      autoFillMerge(originCol, originRow, col, row) {
-          const sheetId = this.getters.getActiveSheetId();
+      autofillMerge(sheetId, data) {
+          const { originCol, originRow, col, row } = data;
           const position = { sheetId, col, row };
           const originPosition = { sheetId, col: originCol, row: originRow };
           if (this.getters.isInMerge(position) && !this.getters.isInMerge(originPosition)) {
@@ -63346,35 +63474,6 @@ stores.inject(MyMetaStore, storeInstance);
               });
           }
       }
-      autofillCF(originCol, originRow, col, row) {
-          const sheetId = this.getters.getActiveSheetId();
-          const cfOrigin = this.getters.getRulesByCell(sheetId, originCol, originRow);
-          for (const cf of cfOrigin) {
-              const newCfRanges = this.getters.getAdaptedCfRanges(sheetId, cf, [positionToZone({ col, row })], []);
-              if (newCfRanges) {
-                  this.dispatch("ADD_CONDITIONAL_FORMAT", {
-                      cf: deepCopy(cf),
-                      ranges: newCfRanges,
-                      sheetId,
-                  });
-              }
-          }
-      }
-      autofillDV(originCol, originRow, col, row) {
-          const sheetId = this.getters.getActiveSheetId();
-          const cellPosition = { sheetId, col: originCol, row: originRow };
-          const dvOrigin = this.getters.getValidationRuleForCell(cellPosition);
-          if (!dvOrigin) {
-              return;
-          }
-          const dvRangesZones = dvOrigin.ranges.map((range) => range.zone);
-          const newDvRanges = recomputeZones(dvRangesZones.concat(positionToZone({ col, row })), []);
-          this.dispatch("ADD_DATA_VALIDATION_RULE", {
-              rule: dvOrigin,
-              ranges: newDvRanges.map((zone) => this.getters.getRangeDataFromZone(sheetId, zone)),
-              sheetId,
-          });
-      }
       // ---------------------------------------------------------------------------
       // Grid rendering
       // ---------------------------------------------------------------------------
@@ -75889,6 +75988,7 @@ stores.inject(MyMetaStore, storeInstance);
       supportedPivotPositionalFormulaRegistry,
       pivotToFunctionValueRegistry,
       migrationStepRegistry,
+      chartJsExtensionRegistry,
   };
   const helpers = {
       arg,
@@ -76089,9 +76189,9 @@ stores.inject(MyMetaStore, storeInstance);
   exports.tokenize = tokenize;
 
 
-  __info__.version = "18.2.5";
-  __info__.date = "2025-03-26T12:47:44.113Z";
-  __info__.hash = "4675edd";
+  __info__.version = "18.2.7";
+  __info__.date = "2025-04-14T17:19:31.011Z";
+  __info__.hash = "e187958";
 
 
 })(this.o_spreadsheet = this.o_spreadsheet || {}, owl);