@odoo/o-spreadsheet 18.1.0-alpha.3 → 18.1.0-alpha.4

package/dist/o-spreadsheet.esm.js

@@ -2,9 +2,9 @@
 /**
  * This file is generated by o-spreadsheet build tools. Do not edit it.
  * @see https://github.com/odoo/o-spreadsheet
- * @version 18.1.0-alpha.3
- * @date 2024-11-08T12:18:22.841Z
- * @hash 96dcfab
+ * @version 18.1.0-alpha.4
+ * @date 2024-11-13T15:06:47.769Z
+ * @hash e1ad985
  */
 
 import { useEnv, useSubEnv, onWillUnmount, useComponent, status, Component, useRef, onMounted, useEffect, useState, onPatched, onWillPatch, onWillUpdateProps, useExternalListener, onWillStart, xml, useChildSubEnv, markRaw, toRaw } from '@odoo/owl';
@@ -2561,6 +2561,18 @@ function groupItemIdsByZones(positionsByItemId) {
     }
     return result;
 }
+function* iterateItemIdsPositions(sheetId, itemIdsByZones) {
+    for (const zoneXc in itemIdsByZones) {
+        const zone = toZone(zoneXc);
+        const itemId = itemIdsByZones[zoneXc];
+        for (let row = zone.top; row <= zone.bottom; row++) {
+            for (let col = zone.left; col <= zone.right; col++) {
+                const position = { sheetId, col, row };
+                yield [position, itemId];
+            }
+        }
+    }
+}
 
 // -----------------------------------------------------------------------------
 // Date Type
@@ -9254,22 +9266,6 @@ function getChartPositionAtCenterOfViewport(getters, chartSize) {
         y: y + scrollY + Math.max(0, (height - chartSize.height) / 2),
     }; // Position at the center of the scrollable viewport
 }
-function getChartAxisTitleRuntime(design) {
-    if (design?.title?.text) {
-        const { text, color, align, italic, bold } = design.title;
-        return {
-            display: true,
-            text,
-            color,
-            font: {
-                style: italic ? "italic" : "normal",
-                weight: bold ? "bold" : "normal",
-            },
-            align: align === "left" ? "start" : align === "right" ? "end" : "center",
-        };
-    }
-    return;
-}
 function getDefinedAxis(definition) {
     let useLeftAxis = false, useRightAxis = false;
     if ("horizontal" in definition && definition.horizontal) {
@@ -9286,148 +9282,6 @@ function getDefinedAxis(definition) {
     useLeftAxis ||= !useRightAxis;
     return { useLeftAxis, useRightAxis };
 }
-function getChartAxis(definition, position, type, options) {
-    const { useLeftAxis, useRightAxis } = getDefinedAxis(definition);
-    if ((position === "left" && !useLeftAxis) || (position === "right" && !useRightAxis)) {
-        return undefined;
-    }
-    const fontColor = chartFontColor(definition.background);
-    let design;
-    if (position === "bottom") {
-        design = definition.axesDesign?.x;
-    }
-    else if (position === "left") {
-        design = definition.axesDesign?.y;
-    }
-    else {
-        design = definition.axesDesign?.y1;
-    }
-    if (type === "values") {
-        const displayGridLines = position === "left" ||
-            (position === "right" && !useLeftAxis) ||
-            (definition.type === "bar" && definition.horizontal === true);
-        return {
-            position: position,
-            title: getChartAxisTitleRuntime(design),
-            grid: {
-                display: displayGridLines,
-            },
-            beginAtZero: true,
-            stacked: options?.stacked,
-            ticks: {
-                color: fontColor,
-                callback: formatTickValue(options),
-            },
-        };
-    }
-    else {
-        return {
-            ticks: {
-                padding: 5,
-                color: fontColor,
-            },
-            grid: {
-                display: definition.type === "scatter",
-            },
-            stacked: options?.stacked,
-            title: getChartAxisTitleRuntime(design),
-        };
-    }
-}
-function computeChartPadding({ displayTitle, displayLegend, }) {
-    let top = 25;
-    if (displayTitle) {
-        top = 0;
-    }
-    else if (displayLegend) {
-        top = 10;
-    }
-    return { left: 20, right: 20, top, bottom: 10 };
-}
-function getTrendDatasetForBarChart(config, dataset) {
-    const filteredValues = [];
-    const filteredLabels = [];
-    const labels = [];
-    for (let i = 0; i < dataset.data.length; i++) {
-        if (typeof dataset.data[i] === "number") {
-            filteredValues.push(dataset.data[i]);
-            filteredLabels.push(i + 1);
-        }
-        labels.push(i + 1);
-    }
-    const newLabels = range(0.5, labels.length + 0.55, 0.2);
-    const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
-    if (!newValues.length) {
-        return;
-    }
-    return getFullTrendingLineDataSet(dataset, config, newValues);
-}
-function getFullTrendingLineDataSet(dataset, config, data) {
-    const defaultBorderColor = colorToRGBA(dataset.backgroundColor);
-    defaultBorderColor.a = 1;
-    const borderColor = config.color || lightenColor(rgbaToHex(defaultBorderColor), 0.5);
-    const backgroundRGBA = colorToRGBA(borderColor);
-    // @ts-expect-error
-    if (dataset?.fill) {
-        backgroundRGBA.a = LINE_FILL_TRANSPARENCY; // to support area charts
-    }
-    return {
-        ...dataset,
-        type: "line",
-        xAxisID: config.type !== "trailingMovingAverage" ? TREND_LINE_XAXIS_ID : "x",
-        label: dataset.label ? _t("Trend line for %s", dataset.label) : "",
-        data,
-        order: -1,
-        showLine: true,
-        pointRadius: 0,
-        backgroundColor: rgbaToHex(backgroundRGBA),
-        borderColor,
-        borderDash: [5, 5],
-        borderWidth: undefined,
-    };
-}
-function interpolateData(config, values, labels, newLabels) {
-    if (values.length < 2 || labels.length < 2 || newLabels.length === 0) {
-        return [];
-    }
-    const labelMin = Math.min(...labels);
-    const labelMax = Math.max(...labels);
-    const labelRange = labelMax - labelMin;
-    const normalizedLabels = labels.map((v) => (v - labelMin) / labelRange);
-    const normalizedNewLabels = newLabels.map((v) => (v - labelMin) / labelRange);
-    switch (config.type) {
-        case "polynomial": {
-            const order = config.order ?? 2;
-            if (order === 1) {
-                return predictLinearValues([values], [normalizedLabels], [normalizedNewLabels], true)[0];
-            }
-            const coeffs = polynomialRegression(values, normalizedLabels, order, true).flat();
-            return normalizedNewLabels.map((v) => evaluatePolynomial(coeffs, v, order));
-        }
-        case "exponential": {
-            const positiveLogValues = [];
-            const filteredLabels = [];
-            for (let i = 0; i < values.length; i++) {
-                if (values[i] > 0) {
-                    positiveLogValues.push(Math.log(values[i]));
-                    filteredLabels.push(normalizedLabels[i]);
-                }
-            }
-            if (!filteredLabels.length) {
-                return [];
-            }
-            return expM(predictLinearValues([positiveLogValues], [filteredLabels], [normalizedNewLabels], true))[0];
-        }
-        case "logarithmic": {
-            return predictLinearValues([values], logM([normalizedLabels]), logM([normalizedNewLabels]), true)[0];
-        }
-        case "trailingMovingAverage": {
-            return getMovingAverageValues(values, config.window);
-        }
-        default:
-            return [];
-    }
-}
 function formatChartDatasetValue(axisFormats, locale) {
     return (value, axisId) => {
         const format = axisId ? axisFormats?.[axisId] : undefined;
@@ -9446,67 +9300,17 @@ function formatTickValue(localeFormat) {
         });
     };
 }
-function getChartColorsGenerator(definition, dataSetsSize) {
-    return new ColorGenerator(dataSetsSize, definition.dataSets.map((ds) => ds.backgroundColor));
-}
 const CHART_AXIS_CHOICES = [
     { value: "left", label: _t("Left") },
     { value: "right", label: _t("Right") },
 ];
-/* Callback used to make the legend interactive
- * These are used to make the user able to hide/show a data series by
- * clicking on the corresponding label in the legend. The onHover and
- * onLeave callbacks are used to show a pointer when hovering an item
- * of the legend so that the user knows it is clickable.
- */
-const INTERACTIVE_LEGEND_CONFIG = {
-    onHover: (event) => {
-        const target = event.native?.target;
-        if (!target) {
-            return;
-        }
-        //@ts-ignore
-        target.style.cursor = "pointer";
-    },
-    onLeave: (event) => {
-        const target = event.native?.target;
-        if (!target) {
-            return;
-        }
-        //@ts-ignore
-        target.style.cursor = "default";
-    },
-    onClick: (event, legendItem, legend) => {
-        if (!legend.legendItems) {
-            return;
-        }
-        const index = legend.legendItems.indexOf(legendItem);
-        if (legend.chart.isDatasetVisible(index)) {
-            legend.chart.hide(index);
-        }
-        else {
-            legend.chart.show(index);
-        }
-        event.native.preventDefault();
-        event.native.stopPropagation();
-    },
-};
-function getCustomLegendLabels(fontColor, legendLabelConfig) {
-    return {
-        labels: {
-            color: fontColor,
-            usePointStyle: true,
-            generateLabels: (chart) => chart.data.datasets.map((dataset, index) => ({
-                text: dataset.label ?? "",
-                fontColor,
-                strokeStyle: dataset.borderColor,
-                fillStyle: dataset.backgroundColor,
-                hidden: !chart.isDatasetVisible(index),
-                pointStyle: dataset.type === "line" ? "line" : "rect",
-                ...legendLabelConfig,
-            })),
-        },
-    };
+function getPieColors(colors, dataSetsValues) {
+    const pieColors = [];
+    const maxLength = largeMax(dataSetsValues.map((ds) => ds.data.length));
+    for (let i = 0; i <= maxLength; i++) {
+        pieColors.push(colors.next());
+    }
+    return pieColors;
 }
 
 /** This is a chartJS plugin that will draw the values of each data next to the point/bar/pie slice */
@@ -9532,9 +9336,10 @@ const chartShowValuesPlugin = {
                 break;
             case "bar":
             case "line":
+            case "radar":
                 options.horizontal
                     ? drawHorizontalBarChartValues(chart, options, ctx)
-                    : drawLineOrBarChartValues(chart, options, ctx);
+                    : drawLineOrBarOrRadarChartValues(chart, options, ctx);
                 break;
         }
         ctx.restore();
@@ -9546,7 +9351,7 @@ function drawTextWithBackground(text, x, y, ctx) {
     ctx.lineWidth = 1;
     ctx.fillText(text, x, y);
 }
-function drawLineOrBarChartValues(chart, options, ctx) {
+function drawLineOrBarOrRadarChartValues(chart, options, ctx) {
     const yMax = chart.chartArea.bottom;
     const yMin = chart.chartArea.top;
     const textsPositions = {};
@@ -9555,12 +9360,17 @@ function drawLineOrBarChartValues(chart, options, ctx) {
             return; // ignore trend lines
         }
         for (let i = 0; i < dataset._parsed.length; i++) {
-            const value = dataset._parsed[i].y;
-            const displayValue = options.callback(value - 0, dataset.yAxisID);
+            const parsedValue = dataset._parsed[i];
+            const value = Number(chart.config.type === "radar" ? parsedValue.r : parsedValue.y);
+            if (isNaN(value)) {
+                continue;
+            }
+            const axisId = chart.config.type === "radar" ? dataset.rAxisID : dataset.yAxisID;
+            const displayValue = options.callback(Number(value), axisId);
             const point = dataset.data[i];
             const xPosition = point.x;
             let yPosition = 0;
-            if (chart.config.type === "line") {
+            if (chart.config.type === "line" || chart.config.type === "radar") {
                 yPosition = point.y - 10;
             }
             else {
@@ -9593,8 +9403,11 @@ function drawHorizontalBarChartValues(chart, options, ctx) {
             return; // ignore trend lines
         }
         for (let i = 0; i < dataset._parsed.length; i++) {
-            const value = dataset._parsed[i].x;
-            const displayValue = options.callback(value - 0, dataset.xAxisID);
+            const value = Number(dataset._parsed[i].x);
+            if (isNaN(value)) {
+                continue;
+            }
+            const displayValue = options.callback(value, dataset.xAxisID);
             const point = dataset.data[i];
             const yPosition = point.y;
             let xPosition = value < 0 ? point.x + point.width / 2 : point.x - point.width / 2;
@@ -22497,6 +22310,81 @@ function toXlsxHexColor(color) {
     return color;
 }
 
+const CHART_COMMON_OPTIONS = {
+    // https://www.chartjs.org/docs/latest/general/responsive.html
+    responsive: true, // will resize when its container is resized
+    maintainAspectRatio: false, // doesn't maintain the aspect ratio (width/height =2 by default) so the user has the choice of the exact layout
+    elements: {
+        line: {
+            fill: false, // do not fill the area under line charts
+        },
+        point: {
+            hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
+        },
+    },
+    animation: false,
+};
+function truncateLabel(label) {
+    if (!label) {
+        return "";
+    }
+    if (label.length > MAX_CHAR_LABEL) {
+        return label.substring(0, MAX_CHAR_LABEL) + "…";
+    }
+    return label;
+}
+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 = new window.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
  */
@@ -23998,12 +23886,9 @@ function convertWidthFromExcel(width) {
         return width;
     return Math.round((width / WIDTH_FACTOR) * 100) / 100;
 }
-function extractStyle(cell, data) {
-    let style = {};
-    if (cell.style) {
-        style = data.styles[cell.style];
-    }
-    const format = extractFormat(cell, data);
+function extractStyle(data, styleId, formatId, borderId) {
+    const style = styleId ? data.styles[styleId] : {};
+    const format = formatId ? data.formats[formatId] : undefined;
     const styles = {
         font: {
             size: style?.fontSize || DEFAULT_FONT_SIZE,
@@ -24017,7 +23902,7 @@ function extractStyle(cell, data) {
             }
             : { reservedAttribute: "none" },
         numFmt: format ? { format: format, id: 0 /* id not used for export */ } : undefined,
-        border: cell.border || 0,
+        border: borderId || 0,
         alignment: {
             horizontal: style.align,
             vertical: style.verticalAlign
@@ -24032,12 +23917,6 @@ function extractStyle(cell, data) {
     styles.font["italic"] = !!style?.italic || undefined;
     return styles;
 }
-function extractFormat(cell, data) {
-    if (cell.format) {
-        return data.formats[cell.format];
-    }
-    return undefined;
-}
 function normalizeStyle(construct, styles) {
     // Normalize this
     const numFmtId = convertFormat(styles["numFmt"], construct.numFmts);
@@ -24501,9 +24380,7 @@ function convertCells(sheet, data, sheetDims, warningManager) {
     }, {});
     for (let row of sheet.rows) {
         for (let cell of row.cells) {
-            cells[cell.xc] = {
-                content: getCellValue(cell, hyperlinkMap, sharedStrings, warningManager),
-            };
+            cells[cell.xc] = getCellValue(cell, hyperlinkMap, sharedStrings, warningManager);
             if (cell.styleIndex) {
                 // + 1 : our indexes for normalized values begin at 1 and not 0
                 styles[cell.xc] = cell.styleIndex + 1;
@@ -24516,11 +24393,6 @@ function convertCells(sheet, data, sheetDims, warningManager) {
     for (let row of sheet.rows.filter((row) => row.styleIndex)) {
         for (let colIndex = 1; colIndex <= sheetDims[0]; colIndex++) {
             const xc = toXC(colIndex - 1, row.index - 1); // Excel indexes start at 1
-            let cell = cells[xc];
-            if (!cell) {
-                cell = {};
-                cells[xc] = cell;
-            }
             styles[xc] ??= row.styleIndex + 1;
             borders[xc] ??= data.styles[row.styleIndex].borderId + 1;
             formats[xc] ??= data.styles[row.styleIndex].numFmtId + 1;
@@ -24531,11 +24403,6 @@ function convertCells(sheet, data, sheetDims, warningManager) {
         for (let colIndex = col.min; colIndex <= Math.min(col.max, sheetDims[0]); colIndex++) {
             for (let rowIndex = 1; rowIndex <= sheetDims[1]; rowIndex++) {
                 const xc = toXC(colIndex - 1, rowIndex - 1); // Excel indexes start at 1
-                let cell = cells[xc];
-                if (!cell) {
-                    cell = {};
-                    cells[xc] = cell;
-                }
                 styles[xc] ??= col.styleIndex + 1;
                 borders[xc] ??= data.styles[col.styleIndex].borderId + 1;
                 formats[xc] ??= data.styles[col.styleIndex].numFmtId + 1;
@@ -25028,11 +24895,11 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
             const tabRef = table.name + "[";
             for (let position of positions(toZone(table.ref))) {
                 const xc = toXC(position.col, position.row);
-                const cell = sheet.cells[xc];
-                if (cell && cell.content && cell.content.startsWith("=")) {
+                let cellContent = sheet.cells[xc];
+                if (cellContent?.startsWith("=")) {
                     let refIndex;
-                    while ((refIndex = cell.content.indexOf(tabRef)) !== -1) {
-                        let reference = cell.content.slice(refIndex + tabRef.length);
+                    while ((refIndex = cellContent.indexOf(tabRef)) !== -1) {
+                        let reference = cellContent.slice(refIndex + tabRef.length);
                         // Expression can either be tableName[colName] or tableName[[#This Row], [colName]]
                         let endIndex = reference.indexOf("]");
                         if (reference.startsWith(`[`)) {
@@ -25041,11 +24908,12 @@ function convertTableFormulaReferences(convertedSheets, xlsxSheets) {
                         }
                         reference = reference.slice(0, endIndex);
                         const convertedRef = convertTableReference(reference, table, xc);
-                        cell.content =
-                            cell.content.slice(0, refIndex) +
+                        cellContent =
+                            cellContent.slice(0, refIndex) +
                                 convertedRef +
-                                cell.content.slice(tabRef.length + refIndex + endIndex + 1);
+                                cellContent.slice(tabRef.length + refIndex + endIndex + 1);
                     }
+                    sheet.cells[xc] = cellContent;
                 }
             }
         }
@@ -26552,7 +26420,7 @@ function getRelationFile(file, xmls) {
     return relsFile;
 }
 
-const EXCEL_IMPORT_VERSION = 21;
+const EXCEL_IMPORT_VERSION = 24;
 class XlsxReader {
     warningManager;
     xmls;
@@ -27182,6 +27050,21 @@ migrationStepRegistry
         }
         return data;
     },
+})
+    .add("migration_23", {
+    // Flatten cell content: { content: "value" } -> "value"
+    versionFrom: "23",
+    migrate(data) {
+        for (const sheet of data.sheets || []) {
+            for (const xc in sheet.cells) {
+                const cell = sheet.cells[xc];
+                if (cell) {
+                    sheet.cells[xc] = cell.content;
+                }
+            }
+        }
+        return data;
+    },
 });
 function fixOverlappingFilters(data) {
     for (let sheet of data.sheets || []) {
@@ -27209,7 +27092,7 @@ function fixOverlappingFilters(data) {
  * a breaking change is made in the way the state is handled, and an upgrade
  * function should be defined
  */
-const CURRENT_VERSION = 23;
+const CURRENT_VERSION = 24;
 const INITIAL_SHEET_ID = "Sheet1";
 /**
  * This function tries to load anything that could look like a valid
@@ -27473,6 +27356,7 @@ function createEmptyExcelSheet(sheetId, name) {
         ...createEmptySheet(sheetId, name),
         charts: [],
         images: [],
+        cellValues: {},
     };
 }
 function createEmptyExcelWorkbookData() {
@@ -27735,10 +27619,480 @@ const measureDisplayTerms = {
     },
 };
 
+const UNIT_LENGTH = {
+    second: 1000,
+    minute: 1000 * 60,
+    hour: 1000 * 3600,
+    day: 1000 * 3600 * 24,
+    month: 1000 * 3600 * 24 * 30,
+    year: 1000 * 3600 * 24 * 365,
+};
+const Milliseconds = {
+    inSeconds: function (milliseconds) {
+        return Math.floor(milliseconds / UNIT_LENGTH.second);
+    },
+    inMinutes: function (milliseconds) {
+        return Math.floor(milliseconds / UNIT_LENGTH.minute);
+    },
+    inHours: function (milliseconds) {
+        return Math.floor(milliseconds / UNIT_LENGTH.hour);
+    },
+    inDays: function (milliseconds) {
+        return Math.floor(milliseconds / UNIT_LENGTH.day);
+    },
+    inMonths: function (milliseconds) {
+        return Math.floor(milliseconds / UNIT_LENGTH.month);
+    },
+    inYears: function (milliseconds) {
+        return Math.floor(milliseconds / UNIT_LENGTH.year);
+    },
+};
 /**
- * This file contains helpers that are common to different runtime charts (mainly
- * line, bar and pie charts)
+ * Regex to test if a format string is a date format that can be translated into a luxon time format
+ */
+const timeFormatLuxonCompatible = /^((d|dd|m|mm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|yyyy|yy|hh|h|ss|a)$/i;
+/** Get the time options for the XAxis of ChartJS */
+function getChartTimeOptions(labels, labelFormat, locale) {
+    const luxonFormat = convertDateFormatForLuxon(labelFormat);
+    const timeUnit = getBestTimeUnitForScale(labels, luxonFormat, locale);
+    const displayFormats = {};
+    if (timeUnit) {
+        displayFormats[timeUnit] = luxonFormat;
+    }
+    return {
+        parser: luxonFormat,
+        displayFormats,
+        unit: timeUnit ?? false,
+    };
+}
+/**
+ * Convert the given date format into a format that moment.js understands.
+ *
+ * https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens
+ */
+function convertDateFormatForLuxon(format) {
+    // "m" before "h" === month, "m" after "h" === minute
+    const indexH = format.indexOf("h");
+    if (indexH >= 0) {
+        format = format.slice(0, indexH).replace(/m/g, "M") + format.slice(indexH);
+    }
+    else {
+        format = format.replace(/m/g, "M");
+    }
+    // If we have an "a", we should display hours as AM/PM (h), otherwise display 24 hours format (H)
+    if (!format.includes("a")) {
+        format = format.replace(/h/g, "H");
+    }
+    return format;
+}
+/** Get the minimum time unit that the format is able to display */
+function getFormatMinDisplayUnit(format) {
+    if (format.includes("s")) {
+        return "second";
+    }
+    else if (format.includes("m")) {
+        return "minute";
+    }
+    else if (format.includes("h") || format.includes("H")) {
+        return "hour";
+    }
+    else if (format.includes("d")) {
+        return "day";
+    }
+    else if (format.includes("M")) {
+        return "month";
+    }
+    return "year";
+}
+/**
+ * Returns the best time unit that should be used for the X axis of a chart in order to display all
+ * the labels correctly.
+ *
+ * There is two conditions :
+ *  - the format of the labels should be able to display the unit. For example if the format is "DD/MM/YYYY"
+ *    it makes no sense to try to use minutes in the X axis
+ *  - we want the "best fit" unit. For example if the labels span a period of several days, we want to use days
+ *    as a unit, but if they span 200 days, we'd like to use months instead
+ *
  */
+function getBestTimeUnitForScale(labels, format, locale) {
+    const labelDates = labels.map((label) => parseDateTime(label, locale)?.jsDate);
+    if (labelDates.some((date) => date === undefined) || labels.length < 2) {
+        return undefined;
+    }
+    const labelsTimestamps = labelDates.map((date) => date.getTime());
+    const period = largeMax(labelsTimestamps) - largeMin(labelsTimestamps);
+    const minUnit = getFormatMinDisplayUnit(format);
+    if (UNIT_LENGTH.second >= UNIT_LENGTH[minUnit] && Milliseconds.inSeconds(period) < 180) {
+        return "second";
+    }
+    else if (UNIT_LENGTH.minute >= UNIT_LENGTH[minUnit] && Milliseconds.inMinutes(period) < 180) {
+        return "minute";
+    }
+    else if (UNIT_LENGTH.hour >= UNIT_LENGTH[minUnit] && Milliseconds.inHours(period) < 96) {
+        return "hour";
+    }
+    else if (UNIT_LENGTH.day >= UNIT_LENGTH[minUnit] && Milliseconds.inDays(period) < 90) {
+        return "day";
+    }
+    else if (UNIT_LENGTH.month >= UNIT_LENGTH[minUnit] && Milliseconds.inMonths(period) < 36) {
+        return "month";
+    }
+    return "year";
+}
+
+function getBarChartData(definition, dataSets, labelRange, getters) {
+    const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+    let labels = labelValues.formattedValues;
+    let dataSetsValues = getChartDatasetValues(getters, dataSets);
+    if (definition.dataSetsHaveTitle &&
+        dataSetsValues[0] &&
+        labels.length > dataSetsValues[0].data.length) {
+        labels.shift();
+    }
+    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+    if (definition.aggregated) {
+        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+    }
+    const leftAxisFormat = getChartDatasetFormat(getters, dataSets, "left");
+    const rightAxisFormat = getChartDatasetFormat(getters, dataSets, "right");
+    const axisFormats = definition.horizontal
+        ? { x: leftAxisFormat || rightAxisFormat }
+        : { y: leftAxisFormat, y1: rightAxisFormat };
+    const trendDataSetsValues = [];
+    for (const index in dataSetsValues) {
+        const { data } = dataSetsValues[index];
+        const trend = definition.dataSets?.[index].trend;
+        if (!trend?.display || definition.horizontal) {
+            trendDataSetsValues.push(undefined);
+            continue;
+        }
+        const trendDataset = getTrendDatasetForBarChart(trend, data);
+        trendDataSetsValues.push(trendDataset);
+    }
+    return {
+        dataSetsValues,
+        trendDataSetsValues,
+        axisFormats,
+        labels,
+        locale: getters.getLocale(),
+    };
+}
+function getPyramidChartData(definition, dataSets, labelRange, getters) {
+    const barChartData = getBarChartData(definition, dataSets, labelRange, getters);
+    const barDataset = barChartData.dataSetsValues;
+    const pyramidDatasetValues = [];
+    if (barDataset[0]) {
+        const pyramidData = barDataset[0].data.map((value) => (value > 0 ? value : 0));
+        pyramidDatasetValues.push({ ...barDataset[0], data: pyramidData });
+    }
+    if (barDataset[1]) {
+        const pyramidData = barDataset[1].data.map((value) => (value > 0 ? -value : 0));
+        pyramidDatasetValues.push({ ...barDataset[1], data: pyramidData });
+    }
+    return {
+        ...barChartData,
+        dataSetsValues: pyramidDatasetValues,
+    };
+}
+function getLineChartData(definition, dataSets, labelRange, getters) {
+    const axisType = getChartAxisType(definition, labelRange, getters);
+    const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+    let labels = axisType === "linear" ? labelValues.values : labelValues.formattedValues;
+    let dataSetsValues = getChartDatasetValues(getters, dataSets);
+    if (definition.dataSetsHaveTitle &&
+        dataSetsValues[0] &&
+        labels.length > dataSetsValues[0].data.length) {
+        labels.shift();
+    }
+    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+    if (axisType === "time") {
+        ({ labels, dataSetsValues } = fixEmptyLabelsForDateCharts(labels, dataSetsValues));
+    }
+    if (definition.aggregated) {
+        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+    }
+    const leftAxisFormat = getChartDatasetFormat(getters, dataSets, "left");
+    const rightAxisFormat = getChartDatasetFormat(getters, dataSets, "right");
+    const labelsFormat = getChartLabelFormat(getters, labelRange);
+    const axisFormats = { y: leftAxisFormat, y1: rightAxisFormat, x: labelsFormat };
+    const trendDataSetsValues = [];
+    for (const index in dataSetsValues) {
+        let { data } = dataSetsValues[index];
+        if (definition.cumulative) {
+            let accumulator = 0;
+            data = data.map((value) => {
+                if (!isNaN(value)) {
+                    accumulator += parseFloat(value);
+                    return accumulator;
+                }
+                return value;
+            });
+            dataSetsValues[index] = { ...dataSetsValues[index], data };
+        }
+        const trend = definition.dataSets?.[index].trend;
+        if (!trend?.display) {
+            trendDataSetsValues.push(undefined);
+            continue;
+        }
+        trendDataSetsValues.push(getTrendDatasetForLineChart(trend, data, labels, axisType, getters.getLocale()));
+    }
+    return {
+        dataSetsValues,
+        axisFormats,
+        labels,
+        locale: getters.getLocale(),
+        trendDataSetsValues,
+        axisType,
+    };
+}
+function getPieChartData(definition, dataSets, labelRange, getters) {
+    const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+    let labels = labelValues.formattedValues;
+    let dataSetsValues = getChartDatasetValues(getters, dataSets);
+    if (definition.dataSetsHaveTitle &&
+        dataSetsValues[0] &&
+        labels.length > dataSetsValues[0].data.length) {
+        labels.shift();
+    }
+    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+    if (definition.aggregated) {
+        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+    }
+    ({ dataSetsValues, labels } = filterNegativeValues(labels, dataSetsValues));
+    const dataSetFormat = getChartDatasetFormat(getters, dataSets, "left");
+    return {
+        dataSetsValues,
+        axisFormats: { y: dataSetFormat },
+        labels,
+        locale: getters.getLocale(),
+    };
+}
+function getRadarChartData(definition, dataSets, labelRange, getters) {
+    const labelValues = getChartLabelValues(getters, dataSets, labelRange);
+    let labels = labelValues.formattedValues;
+    let dataSetsValues = getChartDatasetValues(getters, dataSets);
+    if (definition.dataSetsHaveTitle &&
+        dataSetsValues[0] &&
+        labels.length > dataSetsValues[0].data.length) {
+        labels.shift();
+    }
+    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
+    if (definition.aggregated) {
+        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
+    }
+    const dataSetFormat = getChartDatasetFormat(getters, dataSets, "left") ||
+        getChartDatasetFormat(getters, dataSets, "right");
+    const axisFormats = { r: dataSetFormat };
+    return {
+        dataSetsValues,
+        axisFormats,
+        labels,
+        locale: getters.getLocale(),
+    };
+}
+function getTrendDatasetForBarChart(config, data) {
+    const filteredValues = [];
+    const filteredLabels = [];
+    const labels = [];
+    for (let i = 0; i < data.length; i++) {
+        if (typeof data[i] === "number") {
+            filteredValues.push(data[i]);
+            filteredLabels.push(i + 1);
+        }
+        labels.push(i + 1);
+    }
+    const newLabels = range(0.5, labels.length + 0.55, 0.2);
+    const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
+    return newValues.length ? newValues : undefined;
+}
+function getTrendDatasetForLineChart(config, data, labels, axisType, locale) {
+    const filteredValues = [];
+    const filteredLabels = [];
+    const trendLabels = [];
+    const datasetLength = data.length;
+    if (datasetLength < 2) {
+        return;
+    }
+    switch (axisType) {
+        case "category":
+            for (let i = 0; i < datasetLength; i++) {
+                if (typeof data[i] === "number") {
+                    filteredValues.push(data[i]);
+                    filteredLabels.push(i + 1);
+                }
+                trendLabels.push(i + 1);
+            }
+            break;
+        case "linear":
+            for (let i = 0; i < data.length; i++) {
+                const label = Number(labels[i]);
+                if (isNaN(label)) {
+                    continue;
+                }
+                if (typeof data[i] === "number") {
+                    filteredValues.push(data[i]);
+                    filteredLabels.push(label);
+                }
+                trendLabels.push(label);
+            }
+            break;
+        case "time":
+            for (let i = 0; i < data.length; i++) {
+                const date = toNumber({ value: labels[i] }, locale);
+                if (data[i] !== null) {
+                    filteredValues.push(data[i]);
+                    filteredLabels.push(date);
+                }
+                trendLabels.push(date);
+            }
+            break;
+    }
+    const xmin = Math.min(...trendLabels);
+    const xmax = Math.max(...trendLabels);
+    if (xmax === xmin) {
+        return;
+    }
+    const numberOfStep = 5 * trendLabels.length;
+    const step = (xmax - xmin) / numberOfStep;
+    const newLabels = range(xmin, xmax + step / 2, step);
+    const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
+    if (!newValues.length) {
+        return;
+    }
+    return newValues;
+}
+function interpolateData(config, values, labels, newLabels) {
+    if (values.length < 2 || labels.length < 2 || newLabels.length === 0) {
+        return [];
+    }
+    const labelMin = Math.min(...labels);
+    const labelMax = Math.max(...labels);
+    const labelRange = labelMax - labelMin;
+    const normalizedLabels = labels.map((v) => (v - labelMin) / labelRange);
+    const normalizedNewLabels = newLabels.map((v) => (v - labelMin) / labelRange);
+    switch (config.type) {
+        case "polynomial": {
+            const order = config.order ?? 2;
+            if (order === 1) {
+                return predictLinearValues([values], [normalizedLabels], [normalizedNewLabels], true)[0];
+            }
+            const coeffs = polynomialRegression(values, normalizedLabels, order, true).flat();
+            return normalizedNewLabels.map((v) => evaluatePolynomial(coeffs, v, order));
+        }
+        case "exponential": {
+            const positiveLogValues = [];
+            const filteredLabels = [];
+            for (let i = 0; i < values.length; i++) {
+                if (values[i] > 0) {
+                    positiveLogValues.push(Math.log(values[i]));
+                    filteredLabels.push(normalizedLabels[i]);
+                }
+            }
+            if (!filteredLabels.length) {
+                return [];
+            }
+            return expM(predictLinearValues([positiveLogValues], [filteredLabels], [normalizedNewLabels], true))[0];
+        }
+        case "logarithmic": {
+            return predictLinearValues([values], logM([normalizedLabels]), logM([normalizedNewLabels]), true)[0];
+        }
+        case "trailingMovingAverage": {
+            return getMovingAverageValues(values, config.window);
+        }
+        default:
+            return [];
+    }
+}
+function getChartAxisType(chart, labelRange, getters) {
+    if (isDateChart(chart, labelRange, getters) && isLuxonTimeAdapterInstalled()) {
+        return "time";
+    }
+    if (isLinearChart(chart, labelRange, getters)) {
+        return "linear";
+    }
+    return "category";
+}
+function isDateChart(definition, labelRange, getters) {
+    return !definition.labelsAsText && canBeDateChart(labelRange, getters);
+}
+function isLinearChart(definition, labelRange, getters) {
+    return !definition.labelsAsText && canBeLinearChart(labelRange, getters);
+}
+function canChartParseLabels(labelRange, getters) {
+    return canBeDateChart(labelRange, getters) || canBeLinearChart(labelRange, getters);
+}
+function canBeDateChart(labelRange, getters) {
+    if (!labelRange || !canBeLinearChart(labelRange, getters)) {
+        return false;
+    }
+    const labelFormat = getChartLabelFormat(getters, labelRange);
+    return Boolean(labelFormat && timeFormatLuxonCompatible.test(labelFormat));
+}
+function canBeLinearChart(labelRange, getters) {
+    if (!labelRange) {
+        return false;
+    }
+    const labels = getters.getRangeValues(labelRange);
+    if (labels.some((label) => isNaN(Number(label)) && label)) {
+        return false;
+    }
+    if (labels.every((label) => !label)) {
+        return false;
+    }
+    return true;
+}
+let missingTimeAdapterAlreadyWarned = false;
+function isLuxonTimeAdapterInstalled() {
+    if (!window.Chart) {
+        return false;
+    }
+    // @ts-ignore
+    const adapter = new window.Chart._adapters._date({});
+    const isInstalled = adapter._id === "luxon";
+    if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
+        missingTimeAdapterAlreadyWarned = true;
+        console.warn("'chartjs-adapter-luxon' time adapter is not installed. Time scale axes are disabled.");
+    }
+    return isInstalled;
+}
+function filterNegativeValues(labels, datasets) {
+    const dataPointsIndexes = labels.reduce((indexes, label, i) => {
+        const shouldKeep = datasets.some((dataset) => {
+            const dataPoint = dataset.data[i];
+            return typeof dataPoint !== "number" || dataPoint >= 0;
+        });
+        if (shouldKeep) {
+            indexes.push(i);
+        }
+        return indexes;
+    }, []);
+    const filteredLabels = dataPointsIndexes.map((i) => labels[i] || "");
+    const filteredDatasets = datasets.map((dataset) => ({
+        ...dataset,
+        data: dataPointsIndexes.map((i) => {
+            const dataPoint = dataset.data[i];
+            return typeof dataPoint !== "number" || dataPoint >= 0 ? dataPoint : 0;
+        }),
+    }));
+    return { labels: filteredLabels, dataSetsValues: filteredDatasets };
+}
+function fixEmptyLabelsForDateCharts(labels, dataSetsValues) {
+    if (labels.length === 0 || labels.every((label) => !label)) {
+        return { labels, dataSetsValues };
+    }
+    const newLabels = [...labels];
+    const newDatasets = deepCopy(dataSetsValues);
+    for (let i = 0; i < newLabels.length; i++) {
+        if (!newLabels[i]) {
+            newLabels[i] = findNextDefinedValue(newLabels, i);
+            for (let ds of newDatasets) {
+                ds.data[i] = undefined;
+            }
+        }
+    }
+    return { labels: newLabels, dataSetsValues: newDatasets };
+}
 /**
  * Get the data from a dataSet
  */
@@ -27793,96 +28147,17 @@ function aggregateDataForLabels(labels, datasets) {
         })),
     };
 }
-function truncateLabel(label) {
-    if (!label) {
-        return "";
-    }
-    if (label.length > MAX_CHAR_LABEL) {
-        return label.substring(0, MAX_CHAR_LABEL) + "…";
-    }
-    return label;
-}
-/**
- * Get a default chart js configuration
- */
-function getDefaultChartJsRuntime(chart, labels, fontColor, { axisFormats, locale, truncateLabels = true, horizontalChart }) {
-    const chartTitle = chart.title.text ? chart.title : { ...chart.title, content: "" };
-    const chartOptions = {
-        // 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 ration (width/height =2 by default) so the user has the choice of the exact layout
-        layout: {
-            padding: {
-                left: DEFAULT_CHART_PADDING,
-                right: DEFAULT_CHART_PADDING,
-                top: chartTitle.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
-                bottom: DEFAULT_CHART_PADDING,
-            },
-        },
-        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,
-        plugins: {
-            title: {
-                display: !!chartTitle.text,
-                text: _t(chartTitle.text),
-                color: chartTitle?.color ?? fontColor,
-                align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
-                font: {
-                    size: DEFAULT_CHART_FONT_SIZE,
-                    weight: chartTitle.bold ? "bold" : "normal",
-                    style: chartTitle.italic ? "italic" : "normal",
-                },
-            },
-            legend: {
-                // Disable default legend onClick (show/hide dataset), to allow us to set a global onClick on the chart container.
-                // If we want to re-enable this in the future, we need to override the default onClick to stop the event propagation
-                onClick: () => { },
-            },
-            tooltip: {
-                callbacks: {
-                    label: function (tooltipItem) {
-                        const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
-                        // tooltipItem.parsed can be an object or a number for pie charts
-                        let yLabel = horizontalChart ? tooltipItem.parsed.x : tooltipItem.parsed.y;
-                        if (yLabel === undefined || yLabel === null) {
-                            yLabel = tooltipItem.parsed;
-                        }
-                        const axisId = horizontalChart
-                            ? tooltipItem.dataset.xAxisID
-                            : tooltipItem.dataset.yAxisID;
-                        const yLabelStr = formatChartDatasetValue(axisFormats, locale)(yLabel, axisId);
-                        return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
-                    },
-                },
-            },
-        },
-    };
-    return {
-        type: chart.type,
-        options: chartOptions,
-        data: {
-            labels: truncateLabels ? labels.map(truncateLabel) : labels,
-            datasets: [],
-        },
-        platform: undefined, // This key is optional and will be set by chart.js
-        plugins: [],
-    };
-}
 function getChartLabelFormat(getters, range) {
     if (!range)
         return undefined;
-    return getters.getEvaluatedCell({
-        sheetId: range.sheetId,
-        col: range.zone.left,
-        row: range.zone.top,
-    }).format;
+    const { sheetId, zone: { left, top, bottom }, } = range;
+    for (let row = top; row <= bottom; row++) {
+        const format = getters.getEvaluatedCell({ sheetId, col: left, row }).format;
+        if (format) {
+            return format;
+        }
+    }
+    return undefined;
 }
 function getChartLabelValues(getters, dataSets, labelRange) {
     let labels = { values: [], formattedValues: [] };
@@ -27974,6 +28249,218 @@ function getChartDatasetValues(getters, dataSets) {
     }
     return datasetValues;
 }
+
+function getBarChartDatasets(definition, args) {
+    const { dataSetsValues } = args;
+    const dataSets = [];
+    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+    const trendDatasets = [];
+    for (const index in dataSetsValues) {
+        let { label, data } = dataSetsValues[index];
+        label = definition.dataSets?.[index].label || label;
+        const backgroundColor = colors.next();
+        const dataset = {
+            label,
+            data,
+            borderColor: BORDER_CHART_COLOR,
+            borderWidth: 1,
+            backgroundColor,
+            yAxisID: definition.horizontal ? "y" : definition.dataSets?.[index].yAxisId || "y",
+            xAxisID: "x",
+        };
+        dataSets.push(dataset);
+        const trendConfig = definition.dataSets?.[index].trend;
+        const trendData = args.trendDataSetsValues?.[index];
+        if (!trendConfig?.display || definition.horizontal || !trendData) {
+            continue;
+        }
+        trendDatasets.push(getTrendingLineDataSet(dataset, trendConfig, trendData));
+    }
+    dataSets.push(...trendDatasets);
+    return dataSets;
+}
+function getWaterfallDatasetAndLabels(definition, args) {
+    const { dataSetsValues, labels } = args;
+    const negativeColor = definition.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
+    const positiveColor = definition.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
+    const subTotalColor = definition.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
+    const backgroundColor = [];
+    const datasetValues = [];
+    const dataset = {
+        label: "",
+        data: datasetValues,
+        backgroundColor,
+    };
+    const labelsWithSubTotals = [];
+    let lastValue = 0;
+    for (const dataSetsValue of dataSetsValues) {
+        for (let i = 0; i < dataSetsValue.data.length; i++) {
+            const data = dataSetsValue.data[i];
+            labelsWithSubTotals.push(labels[i]);
+            if (isNaN(Number(data))) {
+                datasetValues.push([lastValue, lastValue]);
+                backgroundColor.push("");
+                continue;
+            }
+            datasetValues.push([lastValue, data + lastValue]);
+            let color = data >= 0 ? positiveColor : negativeColor;
+            if (i === 0 && dataSetsValue === dataSetsValues[0] && definition.firstValueAsSubtotal) {
+                color = subTotalColor;
+            }
+            backgroundColor.push(color);
+            lastValue += data;
+        }
+        if (definition.showSubTotals) {
+            labelsWithSubTotals.push(_t("Subtotal"));
+            datasetValues.push([0, lastValue]);
+            backgroundColor.push(subTotalColor);
+        }
+    }
+    return {
+        datasets: [dataset],
+        labels: labelsWithSubTotals.map(truncateLabel),
+    };
+}
+function getLineChartDatasets(definition, args) {
+    const { dataSetsValues, axisType, labels } = args;
+    const dataSets = [];
+    const areaChart = !!definition.fillArea;
+    const stackedChart = !!definition.stacked;
+    const trendDatasets = [];
+    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+    for (let index = 0; index < dataSetsValues.length; index++) {
+        let { label, data } = dataSetsValues[index];
+        label = definition.dataSets?.[index].label || label;
+        const color = colors.next();
+        if (axisType && ["linear", "time"].includes(axisType)) {
+            // Replace empty string labels by undefined to make sure chartJS doesn't decide that "" is the same as 0
+            data = data.map((y, index) => ({ x: labels[index] || undefined, y }));
+        }
+        const dataset = {
+            label,
+            data,
+            tension: 0, // 0 -> render straight lines, which is much faster
+            borderColor: color,
+            backgroundColor: areaChart ? setColorAlpha(color, LINE_FILL_TRANSPARENCY) : color,
+            pointBackgroundColor: color,
+            fill: areaChart ? getFillingMode(index, stackedChart) : false,
+            yAxisID: definition.dataSets?.[index].yAxisId || "y",
+        };
+        dataSets.push(dataset);
+        const trendConfig = definition.dataSets?.[index].trend;
+        const trendData = args.trendDataSetsValues?.[index];
+        if (!trendConfig?.display || !trendData) {
+            continue;
+        }
+        trendDatasets.push(getTrendingLineDataSet(dataset, trendConfig, trendData));
+    }
+    dataSets.push(...trendDatasets);
+    return dataSets;
+}
+function getScatterChartDatasets(definition, args) {
+    const dataSets = getLineChartDatasets(definition, args);
+    for (const dataSet of dataSets) {
+        if (dataSet.xAxisID !== TREND_LINE_XAXIS_ID) {
+            dataSet.showLine = false;
+        }
+    }
+    return dataSets;
+}
+function getPieChartDatasets(definition, args) {
+    const { dataSetsValues } = args;
+    const dataSets = [];
+    const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
+    const backgroundColor = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
+    for (const { label, data } of dataSetsValues) {
+        const dataset = {
+            label,
+            data,
+            borderColor: BACKGROUND_CHART_COLOR,
+            backgroundColor,
+            hoverOffset: 30,
+        };
+        dataSets.push(dataset);
+    }
+    return dataSets;
+}
+function getComboChartDatasets(definition, args) {
+    const { dataSetsValues } = args;
+    const dataSets = [];
+    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+    const trendDatasets = [];
+    for (let index = 0; index < dataSetsValues.length; index++) {
+        let { label, data } = dataSetsValues[index];
+        label = definition.dataSets?.[index].label || label;
+        const design = definition.dataSets?.[index];
+        const color = colors.next();
+        const type = design?.type ?? "line";
+        const dataset = {
+            label: label,
+            data,
+            borderColor: color,
+            backgroundColor: color,
+            yAxisID: definition.dataSets?.[index].yAxisId || "y",
+            xAxisID: "x",
+            type,
+            order: type === "bar" ? dataSetsValues.length + index : index,
+        };
+        dataSets.push(dataset);
+        const trendConfig = definition.dataSets?.[index].trend;
+        const trendData = args.trendDataSetsValues?.[index];
+        if (!trendConfig?.display || !trendData) {
+            continue;
+        }
+        trendDatasets.push(getTrendingLineDataSet(dataset, trendConfig, trendData));
+    }
+    dataSets.push(...trendDatasets);
+    return dataSets;
+}
+function getRadarChartDatasets(definition, args) {
+    const { dataSetsValues } = args;
+    const datasets = [];
+    const fill = definition.fillArea ?? false;
+    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
+    for (let i = 0; i < dataSetsValues.length; i++) {
+        let { label, data } = dataSetsValues[i];
+        if (definition.dataSets?.[i]?.label) {
+            label = definition.dataSets[i].label;
+        }
+        const borderColor = colors.next();
+        const dataset = {
+            label,
+            data,
+            borderColor,
+            backgroundColor: borderColor,
+        };
+        if (fill) {
+            dataset.backgroundColor = setColorAlpha(borderColor, LINE_FILL_TRANSPARENCY);
+            dataset.fill = "start"; // fills from the start of the axes (default is to start at 0)
+        }
+        datasets.push(dataset);
+    }
+    return datasets;
+}
+function getTrendingLineDataSet(dataset, config, data) {
+    const defaultBorderColor = colorToRGBA(dataset.backgroundColor);
+    defaultBorderColor.a = 1;
+    const borderColor = config.color || lightenColor(rgbaToHex(defaultBorderColor), 0.5);
+    return {
+        type: "line",
+        xAxisID: TREND_LINE_XAXIS_ID,
+        yAxisID: dataset.yAxisID,
+        label: dataset.label ? _t("Trend line for %s", dataset.label) : "",
+        data,
+        order: -1,
+        showLine: true,
+        pointRadius: 0,
+        backgroundColor: borderColor,
+        borderColor,
+        borderDash: [5, 5],
+        borderWidth: undefined,
+        fill: false,
+        pointBackgroundColor: borderColor,
+    };
+}
 /**
  * If the chart is a stacked area chart, we want to fill until the next dataset.
  * If the chart is a simple area chart, we want to fill until the origin (bottom axis).
@@ -27986,57 +28473,639 @@ function getFillingMode(index, stackedChart) {
     }
     return index === 0 ? "origin" : "-1";
 }
-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 = new window.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;
+function getChartColorsGenerator(definition, dataSetsSize) {
+    return new ColorGenerator(dataSetsSize, definition.dataSets?.map((ds) => ds.backgroundColor) || []);
+}
+
+function getCommonChartLayout(definition) {
+    // TODO FIXME: this is unused ATM. All the charts should probably use this instead oh whatever padding they are using now
+    // also look into how DEFAULT_CHART_PADDING is used in scorecards, it look strange
+    return {
+        padding: {
+            left: DEFAULT_CHART_PADDING,
+            right: DEFAULT_CHART_PADDING,
+            top: definition.title?.text ? DEFAULT_CHART_PADDING / 2 : DEFAULT_CHART_PADDING + 5,
+            bottom: DEFAULT_CHART_PADDING,
+        },
+    };
+}
+function getBarChartLayout(definition) {
+    return {
+        padding: computeChartPadding({
+            displayTitle: !!definition.title?.text,
+            displayLegend: definition.legendPosition === "top",
+        }),
+    };
+}
+function getLineChartLayout(definition) {
+    return {
+        padding: computeChartPadding({
+            displayTitle: !!definition.title?.text,
+            displayLegend: definition.legendPosition === "top",
+        }),
+    };
+}
+function getPieChartLayout(definition) {
+    return {
+        padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 },
+    };
+}
+function getWaterfallChartLayout(definition) {
+    return {
+        padding: { left: 20, right: 20, top: definition.title ? 10 : 25, bottom: 10 },
+    };
+}
+function computeChartPadding({ displayTitle, displayLegend, }) {
+    let top = 25;
+    if (displayTitle) {
+        top = 0;
+    }
+    else if (displayLegend) {
+        top = 10;
+    }
+    return { left: 20, right: 20, top, bottom: 10 };
+}
+
+function getLegendDisplayOptions(definition, args) {
+    return {
+        display: definition.legendPosition !== "none",
+        position: definition.legendPosition !== "none" ? definition.legendPosition : undefined,
+    };
+}
+function getBarChartLegend(definition, args) {
+    return {
+        ...INTERACTIVE_LEGEND_CONFIG,
+        ...getLegendDisplayOptions(definition),
+        ...getCustomLegendLabels(chartFontColor(definition.background), {
+            pointStyle: "rect",
+            lineWidth: 3,
+        }),
+    };
+}
+function getLineChartLegend(definition, args) {
+    const filled = definition.fillArea;
+    const pointStyle = filled ? "rect" : "line";
+    const lineWidth = filled ? 2 : 3;
+    return {
+        ...INTERACTIVE_LEGEND_CONFIG,
+        ...getLegendDisplayOptions(definition),
+        ...getCustomLegendLabels(chartFontColor(definition.background), {
+            pointStyle,
+            lineWidth,
+        }),
+    };
+}
+function getPieChartLegend(definition, args) {
+    const { dataSetsValues } = args;
+    const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
+    const colors = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
+    return {
+        ...getLegendDisplayOptions(definition),
+        labels: {
+            color: chartFontColor(definition.background),
+            usePointStyle: true,
+            //@ts-ignore
+            generateLabels: (c) => 
+            //@ts-ignore
+            c.data.labels.map((label, index) => ({
+                text: label,
+                strokeStyle: colors[index],
+                fillStyle: colors[index],
+                pointStyle: "rect",
+                hidden: false,
+                lineWidth: 2,
+            })),
+        },
+    };
+}
+function getScatterChartLegend(definition, args) {
+    return {
+        ...INTERACTIVE_LEGEND_CONFIG,
+        ...getLegendDisplayOptions(definition),
+        labels: {
+            color: chartFontColor(definition.background),
+            boxHeight: 6,
+            usePointStyle: true,
+        },
+    };
+}
+function getComboChartLegend(definition, args) {
+    return {
+        ...INTERACTIVE_LEGEND_CONFIG,
+        ...getLegendDisplayOptions(definition),
+        ...getCustomLegendLabels(chartFontColor(definition.background), {
+            lineWidth: 3,
+        }),
+    };
+}
+function getWaterfallChartLegend(definition, args) {
+    const fontColor = chartFontColor(definition.background);
+    const negativeColor = definition.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
+    const positiveColor = definition.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
+    const subTotalColor = definition.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
+    return {
+        ...getLegendDisplayOptions(definition),
+        labels: {
+            usePointStyle: true,
+            generateLabels: () => {
+                const legendValues = [
+                    {
+                        text: _t("Positive values"),
+                        fontColor,
+                        fillStyle: positiveColor,
+                        strokeStyle: positiveColor,
+                        pointStyle: "rect",
+                    },
+                    {
+                        text: _t("Negative values"),
+                        fontColor,
+                        fillStyle: negativeColor,
+                        strokeStyle: negativeColor,
+                        pointStyle: "rect",
+                    },
+                ];
+                if (definition.showSubTotals || definition.firstValueAsSubtotal) {
+                    legendValues.push({
+                        text: _t("Subtotals"),
+                        fontColor,
+                        fillStyle: subTotalColor,
+                        strokeStyle: subTotalColor,
+                        pointStyle: "rect",
+                    });
+                }
+                return legendValues;
+            },
+        },
+    };
+}
+function getRadarChartLegend(definition, args) {
+    const fill = definition.fillArea ?? false;
+    const pointStyle = fill ? "rect" : "line";
+    const lineWidth = fill ? 2 : 3;
+    return {
+        ...INTERACTIVE_LEGEND_CONFIG,
+        ...getLegendDisplayOptions(definition),
+        ...getCustomLegendLabels(chartFontColor(definition.background), {
+            pointStyle,
+            lineWidth,
+        }),
+    };
+}
+/* Callback used to make the legend interactive
+ * These are used to make the user able to hide/show a data series by
+ * clicking on the corresponding label in the legend. The onHover and
+ * onLeave callbacks are used to show a pointer when hovering an item
+ * of the legend so that the user knows it is clickable.
+ */
+const INTERACTIVE_LEGEND_CONFIG = {
+    onHover: (event) => {
+        const target = event.native?.target;
+        if (!target) {
+            return;
+        }
+        //@ts-ignore
+        target.style.cursor = "pointer";
+    },
+    onLeave: (event) => {
+        const target = event.native?.target;
+        if (!target) {
+            return;
+        }
+        //@ts-ignore
+        target.style.cursor = "default";
+    },
+    onClick: (event, legendItem, legend) => {
+        if (!legend.legendItems) {
+            return;
+        }
+        const index = legend.legendItems.indexOf(legendItem);
+        if (legend.chart.isDatasetVisible(index)) {
+            legend.chart.hide(index);
+        }
+        else {
+            legend.chart.show(index);
+        }
+        event.native.preventDefault();
+        event.native.stopPropagation();
+    },
+};
+function getCustomLegendLabels(fontColor, legendLabelConfig) {
+    return {
+        labels: {
+            color: fontColor,
+            usePointStyle: true,
+            generateLabels: (chart) => chart.data.datasets.map((dataset, index) => ({
+                text: dataset.label ?? "",
+                fontColor,
+                strokeStyle: dataset.borderColor,
+                fillStyle: dataset.backgroundColor,
+                hidden: !chart.isDatasetVisible(index),
+                pointStyle: dataset.type === "line" ? "line" : "rect",
+                ...legendLabelConfig,
+            })),
+        },
+    };
+}
+
+function getBarChartScales(definition, args) {
+    let scales = {};
+    const { trendDataSetsValues: trendDatasets, locale, axisFormats } = args;
+    const options = { stacked: definition.stacked, locale: locale };
+    if (definition.horizontal) {
+        scales.x = getChartAxis(definition, "bottom", "values", { ...options, format: axisFormats?.x });
+        scales.y = getChartAxis(definition, "left", "labels", options);
+    }
+    else {
+        scales.x = getChartAxis(definition, "bottom", "labels", options);
+        const leftAxisOptions = { ...options, format: axisFormats?.y };
+        scales.y = getChartAxis(definition, "left", "values", leftAxisOptions);
+        const rightAxisOptions = { ...options, format: axisFormats?.y1 };
+        scales.y1 = getChartAxis(definition, "right", "values", rightAxisOptions);
+    }
+    scales = removeFalsyAttributes(scales);
+    if (trendDatasets && trendDatasets.length && trendDatasets.some(isDefined)) {
+        /* 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
+         */
+        const maxLength = Math.max(...trendDatasets.map((trendDataset) => trendDataset?.length || 0));
+        scales[TREND_LINE_XAXIS_ID] = {
+            ...scales.x,
+            labels: Array(maxLength).fill(""),
+            offset: false,
+            display: false,
+        };
+    }
+    return scales;
+}
+function getLineChartScales(definition, args) {
+    const { locale, axisType, trendDataSetsValues: trendDatasets, labels, axisFormats } = args;
+    const labelFormat = axisFormats?.x;
+    const stacked = definition.stacked;
+    let scales = {
+        x: getChartAxis(definition, "bottom", "labels", { locale }),
+        y: getChartAxis(definition, "left", "values", { locale, stacked, format: axisFormats?.y }),
+        y1: getChartAxis(definition, "right", "values", { locale, stacked, format: axisFormats?.y1 }),
+    };
+    scales = removeFalsyAttributes(scales);
+    if (axisType === "time" && labels && labelFormat) {
+        const axis = {
+            type: "time",
+            time: getChartTimeOptions(labels, labelFormat, locale),
+        };
+        Object.assign(scales.x, axis);
+        scales.x.ticks.maxTicksLimit = 15;
+    }
+    else if (axisType === "linear") {
+        scales.x.type = "linear";
+        scales.x.ticks.callback = (value) => formatValue(value, { format: labelFormat, locale });
+    }
+    if (trendDatasets && trendDatasets.length && trendDatasets.some(isDefined)) {
+        /* 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
+         */
+        const maxLength = Math.max(...trendDatasets.map((trendDataset) => trendDataset?.length || 0));
+        scales[TREND_LINE_XAXIS_ID] = {
+            ...scales.x,
+            type: "category",
+            labels: range(0, maxLength).map((x) => x.toString()),
+            offset: false,
+            display: false,
+        };
+    }
+    return scales;
+}
+function getScatterChartScales(definition, args) {
+    const lineScales = getLineChartScales(definition, args);
+    return {
+        ...lineScales,
+        x: {
+            ...lineScales.x,
+            grid: { display: true },
+        },
+    };
+}
+function getWaterfallChartScales(definition, args) {
+    const { locale, axisFormats } = args;
+    const format = axisFormats?.y || axisFormats?.y1;
+    definition.dataSets;
+    const scales = {
+        x: {
+            ...getChartAxis(definition, "bottom", "labels", { locale }),
+            grid: { display: false },
+        },
+        y: {
+            // TODO FIXME: we should probably remove definition.verticalAxisPosition and put everything inside axesDesign/datasets
+            // like the other charts. We cannot use helpers like `getChartAxis` here because they look into definition.dataSet
+            // which have plain wrong information, eg. the yAxisId of the dataset being "y" when the data is actually displayed
+            // on the axis to the right.
+            position: definition.verticalAxisPosition,
+            ticks: {
+                color: chartFontColor(definition.background),
+                callback: formatTickValue({ locale, format }),
+            },
+            grid: {
+                lineWidth: (context) => (context.tick.value === 0 ? 2 : 1),
+            },
+            title: getChartAxisTitleRuntime(definition.axesDesign?.y),
+        },
+    };
+    const verticalScale = scales?.y || scales?.y1;
+    if (verticalScale) {
+        verticalScale.grid = { lineWidth: (context) => (context.tick.value === 0 ? 2 : 1) };
+    }
+    return scales;
+}
+function getPyramidChartScales(definition, args) {
+    const scales = getBarChartScales(definition, args);
+    const scalesXCallback = scales.x.ticks.callback;
+    scales.x.ticks.callback = (value) => scalesXCallback(Math.abs(value));
+    return scales;
+}
+function getRadarChartScales(definition, args) {
+    const { locale, axisFormats } = args;
+    return {
+        r: {
+            ticks: {
+                callback: formatTickValue({ format: axisFormats?.r, locale }),
+                backdropColor: definition.background || "#FFFFFF",
+            },
+            pointLabels: { color: chartFontColor(definition.background) },
+        },
+    };
+}
+function getChartAxisTitleRuntime(design) {
+    if (design?.title?.text) {
+        const { text, color, align, italic, bold } = design.title;
+        return {
+            display: true,
+            text,
+            color,
+            font: {
+                style: italic ? "italic" : "normal",
+                weight: bold ? "bold" : "normal",
+            },
+            align: align === "left" ? "start" : align === "right" ? "end" : "center",
+        };
+    }
+    return;
+}
+function getChartAxis(definition, position, type, options) {
+    const { useLeftAxis, useRightAxis } = getDefinedAxis(definition);
+    if ((position === "left" && !useLeftAxis) || (position === "right" && !useRightAxis)) {
+        return undefined;
+    }
+    const fontColor = chartFontColor(definition.background);
+    let design;
+    if (position === "bottom") {
+        design = definition.axesDesign?.x;
+    }
+    else if (position === "left") {
+        design = definition.axesDesign?.y;
+    }
+    else {
+        design = definition.axesDesign?.y1;
+    }
+    if (type === "values") {
+        const displayGridLines = !(position === "right" && useLeftAxis);
+        return {
+            position: position,
+            title: getChartAxisTitleRuntime(design),
+            grid: {
+                display: displayGridLines,
+            },
+            beginAtZero: true,
+            stacked: options?.stacked,
+            ticks: {
+                color: fontColor,
+                callback: formatTickValue(options),
+            },
+        };
+    }
+    else {
+        return {
+            ticks: {
+                padding: 5,
+                color: fontColor,
+            },
+            grid: {
+                display: false,
+            },
+            stacked: options?.stacked,
+            title: getChartAxisTitleRuntime(design),
+        };
+    }
+}
+
+function getChartShowValues(definition, args) {
+    const { axisFormats, locale } = args;
+    return {
+        horizontal: "horizontal" in definition && definition.horizontal,
+        showValues: "showValues" in definition ? !!definition.showValues : false,
+        background: definition.background,
+        callback: formatChartDatasetValue(axisFormats, locale),
+    };
+}
+
+function getChartTitle(definition) {
+    const chartTitle = definition.title;
+    const fontColor = chartFontColor(definition.background);
+    return {
+        display: !!chartTitle.text,
+        text: _t(chartTitle.text),
+        color: chartTitle?.color ?? fontColor,
+        align: chartTitle.align === "center" ? "center" : chartTitle.align === "right" ? "end" : "start",
+        font: {
+            size: DEFAULT_CHART_FONT_SIZE,
+            weight: chartTitle.bold ? "bold" : "normal",
+            style: chartTitle.italic ? "italic" : "normal",
+        },
+    };
+}
+
+function getBarChartTooltip(definition, args) {
+    return {
+        callbacks: {
+            title: function (tooltipItems) {
+                return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
+                    ? undefined
+                    : "";
+            },
+            label: function (tooltipItem) {
+                const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
+                const horizontalChart = definition.horizontal;
+                let yLabel = horizontalChart ? tooltipItem.parsed.x : tooltipItem.parsed.y;
+                if (yLabel === undefined || yLabel === null) {
+                    yLabel = tooltipItem.parsed;
+                }
+                const axisId = horizontalChart ? tooltipItem.dataset.xAxisID : tooltipItem.dataset.yAxisID;
+                const yLabelStr = formatChartDatasetValue(args.axisFormats, args.locale)(yLabel, axisId);
+                return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+            },
+        },
+    };
+}
+function getLineChartTooltip(definition, args) {
+    const { axisType, locale, axisFormats } = args;
+    const labelFormat = axisFormats?.x;
+    const tooltip = { callbacks: {} };
+    if (axisType === "linear") {
+        tooltip.callbacks.label = (tooltipItem) => {
+            const dataSetPoint = tooltipItem.parsed.y;
+            let label = tooltipItem.parsed.x;
+            if (typeof label === "string" && isNumber(label, locale)) {
+                label = toNumber(label, locale);
+            }
+            const formattedX = formatValue(label, { locale, format: labelFormat });
+            const axisId = tooltipItem.dataset.yAxisID || "y";
+            const formattedY = formatValue(dataSetPoint, { locale, format: axisFormats?.[axisId] });
+            const dataSetTitle = tooltipItem.dataset.label;
+            return formattedX
+                ? `${dataSetTitle}: (${formattedX}, ${formattedY})`
+                : `${dataSetTitle}: ${formattedY}`;
+        };
+    }
+    else {
+        tooltip.callbacks.label = function (tooltipItem) {
+            const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
+            const yLabel = tooltipItem.parsed.y;
+            const axisId = tooltipItem.dataset.yAxisID;
+            const yLabelStr = formatChartDatasetValue(axisFormats, locale)(yLabel, axisId);
+            return xLabel ? `${xLabel}: ${yLabelStr}` : yLabelStr;
+        };
+    }
+    tooltip.callbacks.title = function (tooltipItems) {
+        const displayTooltipTitle = axisType !== "linear" &&
+            tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID);
+        return displayTooltipTitle ? undefined : "";
+    };
+    return tooltip;
+}
+function getPieChartTooltip(definition, args) {
+    const { locale, axisFormats } = args;
+    const format = axisFormats?.y || axisFormats?.y1;
+    return {
+        callbacks: {
+            title: function (tooltipItems) {
+                return tooltipItems[0].dataset.label;
+            },
+            label: function (tooltipItem) {
+                const data = tooltipItem.dataset.data;
+                const dataIndex = tooltipItem.dataIndex;
+                const percentage = calculatePercentage(data, dataIndex);
+                const xLabel = tooltipItem.label || tooltipItem.dataset.label;
+                const yLabel = tooltipItem.parsed.y ?? tooltipItem.parsed;
+                const toolTipFormat = !format && yLabel >= 1000 ? "#,##" : format;
+                const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                return xLabel
+                    ? `${xLabel}: ${yLabelStr} (${percentage}%)`
+                    : `${yLabelStr} (${percentage}%)`;
+            },
+        },
+    };
+}
+function getWaterfallChartTooltip(definition, args) {
+    const { dataSetsValues, locale, axisFormats, labels } = args;
+    const format = axisFormats?.y || axisFormats?.y1;
+    const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label);
+    return {
+        callbacks: {
+            label: function (tooltipItem) {
+                const [lastValue, currentValue] = tooltipItem.raw;
+                const yLabel = currentValue - lastValue;
+                const dataSeriesIndex = labels.length
+                    ? Math.floor(tooltipItem.dataIndex / labels.length)
+                    : 0;
+                const dataSeriesLabel = dataSeriesLabels[dataSeriesIndex];
+                const toolTipFormat = !format && Math.abs(yLabel) > 1000 ? "#,##" : format;
+                const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
+                return dataSeriesLabel ? `${dataSeriesLabel}: ${yLabelStr}` : yLabelStr;
+            },
+        },
+    };
+}
+function getPyramidChartTooltip(definition, args) {
+    const tooltip = getBarChartTooltip(definition, args);
+    return {
+        ...tooltip,
+        callbacks: {
+            ...tooltip.callbacks,
+            label: (item) => {
+                const tooltipItem = { ...item, parsed: { y: item.parsed.y, x: Math.abs(item.parsed.x) } };
+                return (tooltip?.callbacks?.label)(tooltipItem);
+            },
+        },
+    };
+}
+function getRadarChartTooltip(definition, args) {
+    const { locale, axisFormats } = args;
+    return {
+        callbacks: {
+            label: function (tooltipItem) {
+                const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
+                const yLabel = tooltipItem.parsed.r;
+                const formattedY = formatValue(yLabel, { format: axisFormats?.r, locale });
+                return xLabel ? `${xLabel}: ${formattedY}` : formattedY;
+            },
+        },
+    };
+}
+function calculatePercentage(dataset, dataIndex) {
+    const numericData = dataset.filter((value) => typeof value === "number");
+    const total = numericData.reduce((sum, value) => sum + value, 0);
+    if (!total) {
+        return "";
     }
-    return undefined;
+    const percentage = (dataset[dataIndex] / total) * 100;
+    return percentage.toFixed(2);
 }
-/**
- * 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();
-    },
-};
+
+var CHART_RUNTIME_HELPERS = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  INTERACTIVE_LEGEND_CONFIG: INTERACTIVE_LEGEND_CONFIG,
+  canChartParseLabels: canChartParseLabels,
+  getBarChartData: getBarChartData,
+  getBarChartDatasets: getBarChartDatasets,
+  getBarChartLayout: getBarChartLayout,
+  getBarChartLegend: getBarChartLegend,
+  getBarChartScales: getBarChartScales,
+  getBarChartTooltip: getBarChartTooltip,
+  getChartLabelFormat: getChartLabelFormat,
+  getChartShowValues: getChartShowValues,
+  getChartTitle: getChartTitle,
+  getComboChartDatasets: getComboChartDatasets,
+  getComboChartLegend: getComboChartLegend,
+  getCommonChartLayout: getCommonChartLayout,
+  getData: getData,
+  getLineChartData: getLineChartData,
+  getLineChartDatasets: getLineChartDatasets,
+  getLineChartLayout: getLineChartLayout,
+  getLineChartLegend: getLineChartLegend,
+  getLineChartScales: getLineChartScales,
+  getLineChartTooltip: getLineChartTooltip,
+  getPieChartData: getPieChartData,
+  getPieChartDatasets: getPieChartDatasets,
+  getPieChartLayout: getPieChartLayout,
+  getPieChartLegend: getPieChartLegend,
+  getPieChartTooltip: getPieChartTooltip,
+  getPyramidChartData: getPyramidChartData,
+  getPyramidChartScales: getPyramidChartScales,
+  getPyramidChartTooltip: getPyramidChartTooltip,
+  getRadarChartData: getRadarChartData,
+  getRadarChartDatasets: getRadarChartDatasets,
+  getRadarChartLegend: getRadarChartLegend,
+  getRadarChartScales: getRadarChartScales,
+  getRadarChartTooltip: getRadarChartTooltip,
+  getScatterChartDatasets: getScatterChartDatasets,
+  getScatterChartLegend: getScatterChartLegend,
+  getScatterChartScales: getScatterChartScales,
+  getTrendDatasetForBarChart: getTrendDatasetForBarChart,
+  getTrendDatasetForLineChart: getTrendDatasetForLineChart,
+  getWaterfallChartLayout: getWaterfallChartLayout,
+  getWaterfallChartLegend: getWaterfallChartLegend,
+  getWaterfallChartScales: getWaterfallChartScales,
+  getWaterfallChartTooltip: getWaterfallChartTooltip,
+  getWaterfallDatasetAndLabels: getWaterfallDatasetAndLabels
+});
 
 class BarChart extends AbstractChart {
     dataSets;
@@ -28168,121 +29237,27 @@ class BarChart extends AbstractChart {
     }
 }
 function createBarChartRuntime(chart, getters) {
-    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-    let labels = labelValues.formattedValues;
-    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-    if (chart.dataSetsHaveTitle &&
-        dataSetsValues[0] &&
-        labels.length > dataSetsValues[0].data.length) {
-        labels.shift();
-    }
-    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-    if (chart.aggregated) {
-        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-    }
-    const leftAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-    const rightAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
-    const locale = getters.getLocale();
-    const fontColor = chartFontColor(chart.background);
-    const axisFormats = chart.horizontal
-        ? { x: leftAxisFormat || rightAxisFormat }
-        : { y: leftAxisFormat, y1: rightAxisFormat };
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, {
-        locale,
-        axisFormats,
-        horizontalChart: chart.horizontal,
-    });
-    const legend = {
-        ...INTERACTIVE_LEGEND_CONFIG,
-        ...getCustomLegendLabels(fontColor, {
-            pointStyle: "rect",
-            lineWidth: 3,
-        }),
-    };
-    if (chart.legendPosition === "none") {
-        legend.display = false;
-    }
-    else {
-        legend.position = chart.legendPosition;
-    }
-    config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-    config.options.layout = {
-        padding: computeChartPadding({
-            displayTitle: !!chart.title.text,
-            displayLegend: chart.legendPosition === "top",
-        }),
-    };
-    config.options.indexAxis = chart.horizontal ? "y" : "x";
-    config.options.scales = {};
     const definition = chart.getDefinition();
-    const options = { stacked: chart.stacked, locale };
-    if (chart.horizontal) {
-        const format = leftAxisFormat || rightAxisFormat;
-        config.options.scales.x = getChartAxis(definition, "bottom", "values", { ...options, format });
-        config.options.scales.y = getChartAxis(definition, "left", "labels", options);
-    }
-    else {
-        config.options.scales.x = getChartAxis(definition, "bottom", "labels", options);
-        const leftAxisOptions = { ...options, format: leftAxisFormat };
-        config.options.scales.y = getChartAxis(definition, "left", "values", leftAxisOptions);
-        const rightAxisOptions = { ...options, format: rightAxisFormat };
-        config.options.scales.y1 = getChartAxis(definition, "right", "values", rightAxisOptions);
-    }
-    config.options.scales = removeFalsyAttributes(config.options.scales);
-    config.options.plugins.chartShowValuesPlugin = {
-        showValues: chart.showValues,
-        background: chart.background,
-        horizontal: chart.horizontal,
-        callback: formatChartDatasetValue(axisFormats, locale),
+    const chartData = getBarChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const config = {
+        type: "bar",
+        data: {
+            labels: chartData.labels.map(truncateLabel),
+            datasets: getBarChartDatasets(definition, chartData),
+        },
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            indexAxis: chart.horizontal ? "y" : "x",
+            layout: getBarChartLayout(definition),
+            scales: getBarChartScales(definition, chartData),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getBarChartLegend(definition),
+                tooltip: getBarChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+            },
+        },
     };
-    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
-    const trendDatasets = [];
-    for (const index in dataSetsValues) {
-        let { label, data } = dataSetsValues[index];
-        if (definition.dataSets?.[index]?.label) {
-            label = definition.dataSets[index].label;
-        }
-        const backgroundColor = colors.next();
-        const dataset = {
-            label,
-            data,
-            borderColor: BORDER_CHART_COLOR,
-            borderWidth: 1,
-            backgroundColor,
-        };
-        config.data.datasets.push(dataset);
-        dataset.yAxisID = chart.horizontal ? "y" : definition.dataSets[index].yAxisId || "y";
-        dataset.xAxisID = "x";
-        const trend = definition.dataSets?.[index].trend;
-        if (!trend?.display || chart.horizontal) {
-            continue;
-        }
-        const trendDataset = getTrendDatasetForBarChart(trend, dataset);
-        if (trendDataset) {
-            trendDatasets.push(trendDataset);
-        }
-    }
-    if (trendDatasets.length) {
-        /* 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
-         */
-        const maxLength = Math.max(...trendDatasets.map((trendDataset) => trendDataset.data.length));
-        config.options.scales[TREND_LINE_XAXIS_ID] = {
-            ...config.options.scales.x,
-            labels: Array(maxLength).fill(""),
-            offset: false,
-            display: false,
-        };
-        /* These datasets must be inserted after the original
-         * datasets to ensure the way we distinguish the originals and trendLine datasets after
-         */
-        trendDatasets.forEach((x) => config.data.datasets.push(x));
-        config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-            return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
-                ? undefined
-                : "";
-        };
-    }
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
@@ -28415,102 +29390,26 @@ class ComboChart extends AbstractChart {
     }
 }
 function createComboChartRuntime(chart, getters) {
-    const mainDataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-    const lineDataSetsFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
-    const locale = getters.getLocale();
-    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-    let labels = labelValues.formattedValues;
-    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-    if (chart.dataSetsHaveTitle &&
-        dataSetsValues[0] &&
-        labels.length > dataSetsValues[0].data.length) {
-        labels.shift();
-    }
-    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-    if (chart.aggregated) {
-        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-    }
-    const fontColor = chartFontColor(chart.background);
-    const axisFormats = { y: mainDataSetFormat, y1: lineDataSetsFormat };
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, { locale, axisFormats });
-    const legend = {
-        ...INTERACTIVE_LEGEND_CONFIG,
-        ...getCustomLegendLabels(fontColor, {
-            lineWidth: 3,
-        }),
-    };
-    if (chart.legendPosition === "none") {
-        legend.display = false;
-    }
-    else {
-        legend.position = chart.legendPosition;
-    }
-    config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-    config.options.layout = {
-        padding: computeChartPadding({
-            displayTitle: !!chart.title.text,
-            displayLegend: chart.legendPosition === "top",
-        }),
-    };
     const definition = chart.getDefinition();
-    config.options.scales = {
-        x: getChartAxis(definition, "bottom", "labels", { locale }),
-        y: getChartAxis(definition, "left", "values", { locale, format: mainDataSetFormat }),
-        y1: getChartAxis(definition, "right", "values", { locale, format: lineDataSetsFormat }),
-    };
-    config.options.scales = removeFalsyAttributes(config.options.scales);
-    config.options.plugins.chartShowValuesPlugin = {
-        showValues: chart.showValues,
-        background: chart.background,
-        callback: formatChartDatasetValue(axisFormats, locale),
+    const chartData = getBarChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const config = {
+        type: "bar",
+        data: {
+            labels: chartData.labels.map(truncateLabel),
+            datasets: getComboChartDatasets(definition, chartData),
+        },
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            layout: getBarChartLayout(definition),
+            scales: getBarChartScales(definition, chartData),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getComboChartLegend(definition),
+                tooltip: getBarChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+            },
+        },
     };
-    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
-    let maxLength = 0;
-    const trendDatasets = [];
-    for (let [index, { label, data }] of dataSetsValues.entries()) {
-        const design = definition.dataSets[index];
-        const color = colors.next();
-        const type = design?.type ?? "line";
-        const dataset = {
-            label: design?.label ?? label,
-            data,
-            borderColor: color,
-            backgroundColor: color,
-            yAxisID: design?.yAxisId ?? "y",
-            type,
-            order: type === "bar" ? dataSetsValues.length + index : index,
-        };
-        config.data.datasets.push(dataset);
-        const trend = definition.dataSets?.[index].trend;
-        if (!trend?.display) {
-            continue;
-        }
-        maxLength = Math.max(maxLength, data.length);
-        const trendDataset = getTrendDatasetForBarChart(trend, dataset);
-        if (trendDataset) {
-            trendDatasets.push(trendDataset);
-        }
-    }
-    if (trendDatasets.length) {
-        /* 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
-         */
-        const trendLinesMaxLength = Math.max(...trendDatasets.map((trend) => trend.data.length));
-        config.options.scales[TREND_LINE_XAXIS_ID] = {
-            labels: Array(Math.round(trendLinesMaxLength)).fill(""),
-            offset: false,
-            display: false,
-        };
-        /* These datasets must be inserted after the original datasets to ensure the way we
-         * distinguish the originals and trendLine datasets after
-         */
-        trendDatasets.forEach((x) => config.data.datasets.push(x));
-        config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-            return tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID)
-                ? undefined
-                : "";
-        };
-    }
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
@@ -28753,417 +29652,6 @@ function getSectionThresholdValue(threshold, minValue, maxValue) {
     return clip(value, minValue, maxValue);
 }
 
-const UNIT_LENGTH = {
-    second: 1000,
-    minute: 1000 * 60,
-    hour: 1000 * 3600,
-    day: 1000 * 3600 * 24,
-    month: 1000 * 3600 * 24 * 30,
-    year: 1000 * 3600 * 24 * 365,
-};
-const Milliseconds = {
-    inSeconds: function (milliseconds) {
-        return Math.floor(milliseconds / UNIT_LENGTH.second);
-    },
-    inMinutes: function (milliseconds) {
-        return Math.floor(milliseconds / UNIT_LENGTH.minute);
-    },
-    inHours: function (milliseconds) {
-        return Math.floor(milliseconds / UNIT_LENGTH.hour);
-    },
-    inDays: function (milliseconds) {
-        return Math.floor(milliseconds / UNIT_LENGTH.day);
-    },
-    inMonths: function (milliseconds) {
-        return Math.floor(milliseconds / UNIT_LENGTH.month);
-    },
-    inYears: function (milliseconds) {
-        return Math.floor(milliseconds / UNIT_LENGTH.year);
-    },
-};
-/**
- * Regex to test if a format string is a date format that can be translated into a luxon time format
- */
-const timeFormatLuxonCompatible = /^((d|dd|m|mm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|yyyy|yy|hh|h|ss|a)$/i;
-/** Get the time options for the XAxis of ChartJS */
-function getChartTimeOptions(labels, labelFormat, locale) {
-    const luxonFormat = convertDateFormatForLuxon(labelFormat);
-    const timeUnit = getBestTimeUnitForScale(labels, luxonFormat, locale);
-    const displayFormats = {};
-    if (timeUnit) {
-        displayFormats[timeUnit] = luxonFormat;
-    }
-    return {
-        parser: luxonFormat,
-        displayFormats,
-        unit: timeUnit ?? false,
-    };
-}
-/**
- * Convert the given date format into a format that moment.js understands.
- *
- * https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens
- */
-function convertDateFormatForLuxon(format) {
-    // "m" before "h" === month, "m" after "h" === minute
-    const indexH = format.indexOf("h");
-    if (indexH >= 0) {
-        format = format.slice(0, indexH).replace(/m/g, "M") + format.slice(indexH);
-    }
-    else {
-        format = format.replace(/m/g, "M");
-    }
-    // If we have an "a", we should display hours as AM/PM (h), otherwise display 24 hours format (H)
-    if (!format.includes("a")) {
-        format = format.replace(/h/g, "H");
-    }
-    return format;
-}
-/** Get the minimum time unit that the format is able to display */
-function getFormatMinDisplayUnit(format) {
-    if (format.includes("s")) {
-        return "second";
-    }
-    else if (format.includes("m")) {
-        return "minute";
-    }
-    else if (format.includes("h") || format.includes("H")) {
-        return "hour";
-    }
-    else if (format.includes("d")) {
-        return "day";
-    }
-    else if (format.includes("M")) {
-        return "month";
-    }
-    return "year";
-}
-/**
- * Returns the best time unit that should be used for the X axis of a chart in order to display all
- * the labels correctly.
- *
- * There is two conditions :
- *  - the format of the labels should be able to display the unit. For example if the format is "DD/MM/YYYY"
- *    it makes no sense to try to use minutes in the X axis
- *  - we want the "best fit" unit. For example if the labels span a period of several days, we want to use days
- *    as a unit, but if they span 200 days, we'd like to use months instead
- *
- */
-function getBestTimeUnitForScale(labels, format, locale) {
-    const labelDates = labels.map((label) => parseDateTime(label, locale)?.jsDate);
-    if (labelDates.some((date) => date === undefined) || labels.length < 2) {
-        return undefined;
-    }
-    const labelsTimestamps = labelDates.map((date) => date.getTime());
-    const period = largeMax(labelsTimestamps) - largeMin(labelsTimestamps);
-    const minUnit = getFormatMinDisplayUnit(format);
-    if (UNIT_LENGTH.second >= UNIT_LENGTH[minUnit] && Milliseconds.inSeconds(period) < 180) {
-        return "second";
-    }
-    else if (UNIT_LENGTH.minute >= UNIT_LENGTH[minUnit] && Milliseconds.inMinutes(period) < 180) {
-        return "minute";
-    }
-    else if (UNIT_LENGTH.hour >= UNIT_LENGTH[minUnit] && Milliseconds.inHours(period) < 96) {
-        return "hour";
-    }
-    else if (UNIT_LENGTH.day >= UNIT_LENGTH[minUnit] && Milliseconds.inDays(period) < 90) {
-        return "day";
-    }
-    else if (UNIT_LENGTH.month >= UNIT_LENGTH[minUnit] && Milliseconds.inMonths(period) < 36) {
-        return "month";
-    }
-    return "year";
-}
-
-function fixEmptyLabelsForDateCharts(labels, dataSetsValues) {
-    if (labels.length === 0 || labels.every((label) => !label)) {
-        return { labels, dataSetsValues };
-    }
-    const newLabels = [...labels];
-    const newDatasets = deepCopy(dataSetsValues);
-    for (let i = 0; i < newLabels.length; i++) {
-        if (!newLabels[i]) {
-            newLabels[i] = findNextDefinedValue(newLabels, i);
-            for (let ds of newDatasets) {
-                ds.data[i] = undefined;
-            }
-        }
-    }
-    return { labels: newLabels, dataSetsValues: newDatasets };
-}
-function canChartParseLabels(labelRange, getters) {
-    return canBeDateChart(labelRange, getters) || canBeLinearChart(labelRange, getters);
-}
-function getChartAxisType(chart, getters) {
-    if (isDateChart(chart, getters) && isLuxonTimeAdapterInstalled()) {
-        return "time";
-    }
-    if (isLinearChart(chart, getters)) {
-        return "linear";
-    }
-    return "category";
-}
-function isDateChart(chart, getters) {
-    return !chart.labelsAsText && canBeDateChart(chart.labelRange, getters);
-}
-function isLinearChart(chart, getters) {
-    return !chart.labelsAsText && canBeLinearChart(chart.labelRange, getters);
-}
-function canBeDateChart(labelRange, getters) {
-    if (!labelRange || !canBeLinearChart(labelRange, getters)) {
-        return false;
-    }
-    const labelFormat = getters.getEvaluatedCell({
-        sheetId: labelRange.sheetId,
-        col: labelRange.zone.left,
-        row: labelRange.zone.top,
-    }).format;
-    return Boolean(labelFormat && timeFormatLuxonCompatible.test(labelFormat));
-}
-function canBeLinearChart(labelRange, getters) {
-    if (!labelRange) {
-        return false;
-    }
-    const labels = getters.getRangeValues(labelRange);
-    if (labels.some((label) => isNaN(Number(label)) && label)) {
-        return false;
-    }
-    if (labels.every((label) => !label)) {
-        return false;
-    }
-    return true;
-}
-let missingTimeAdapterAlreadyWarned = false;
-function isLuxonTimeAdapterInstalled() {
-    if (!window.Chart) {
-        return false;
-    }
-    // @ts-ignore
-    const adapter = new window.Chart._adapters._date({});
-    const isInstalled = adapter._id === "luxon";
-    if (!isInstalled && !missingTimeAdapterAlreadyWarned) {
-        missingTimeAdapterAlreadyWarned = true;
-        console.warn("'chartjs-adapter-luxon' time adapter is not installed. Time scale axes are disabled.");
-    }
-    return isInstalled;
-}
-function getTrendDatasetForLineChart(config, dataset, axisType, locale) {
-    const filteredValues = [];
-    const filteredLabels = [];
-    const labels = [];
-    const datasetLength = dataset.data.length;
-    if (datasetLength < 2) {
-        return;
-    }
-    switch (axisType) {
-        case "category":
-            for (let i = 0; i < datasetLength; i++) {
-                if (typeof dataset.data[i] === "number") {
-                    filteredValues.push(dataset.data[i]);
-                    filteredLabels.push(i + 1);
-                }
-                labels.push(i + 1);
-            }
-            break;
-        case "linear":
-            for (const point of dataset.data) {
-                const label = Number(point.x);
-                if (isNaN(label)) {
-                    continue;
-                }
-                if (typeof point.y === "number") {
-                    filteredValues.push(point.y);
-                    filteredLabels.push(label);
-                }
-                labels.push(label);
-            }
-            break;
-        case "time":
-            for (const point of dataset.data) {
-                const date = toNumber({ value: point.x }, locale);
-                if (point.y !== null) {
-                    filteredValues.push(point.y);
-                    filteredLabels.push(date);
-                }
-                labels.push(date);
-            }
-            break;
-    }
-    const xmin = Math.min(...labels);
-    const xmax = Math.max(...labels);
-    if (xmax === xmin) {
-        return;
-    }
-    const numberOfStep = 5 * labels.length;
-    const step = (xmax - xmin) / numberOfStep;
-    const newLabels = range(xmin, xmax + step / 2, step);
-    const newValues = interpolateData(config, filteredValues, filteredLabels, newLabels);
-    if (!newValues.length) {
-        return;
-    }
-    return getFullTrendingLineDataSet(dataset, config, newValues);
-}
-function createLineOrScatterChartRuntime(chart, getters) {
-    const axisType = getChartAxisType(chart, getters);
-    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-    let labels = axisType === "linear" ? labelValues.values : labelValues.formattedValues;
-    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-    if (chart.dataSetsHaveTitle &&
-        dataSetsValues[0] &&
-        labels.length > dataSetsValues[0].data.length) {
-        labels.shift();
-    }
-    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-    if (axisType === "time") {
-        ({ labels, dataSetsValues } = fixEmptyLabelsForDateCharts(labels, dataSetsValues));
-    }
-    if (chart.aggregated) {
-        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-    }
-    const locale = getters.getLocale();
-    const truncateLabels = axisType === "category";
-    const leftAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-    const rightAxisFormat = getChartDatasetFormat(getters, chart.dataSets, "right");
-    const axisFormats = { y: leftAxisFormat, y1: rightAxisFormat };
-    const options = { locale, truncateLabels, axisFormats };
-    const fontColor = chartFontColor(chart.background);
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, options);
-    const legend = {
-        ...INTERACTIVE_LEGEND_CONFIG,
-        labels: {
-            color: fontColor,
-        },
-    };
-    if (chart.legendPosition === "none") {
-        legend.display = false;
-    }
-    else {
-        legend.position = chart.legendPosition;
-    }
-    Object.assign(config.options.plugins.legend || {}, legend);
-    config.options.layout = {
-        padding: computeChartPadding({
-            displayTitle: !!chart.title.text,
-            displayLegend: chart.legendPosition === "top",
-        }),
-    };
-    const definition = chart.getDefinition();
-    const stacked = "stacked" in chart && chart.stacked;
-    config.options.scales = {
-        x: getChartAxis(definition, "bottom", "labels", { locale }),
-        y: getChartAxis(definition, "left", "values", { locale, stacked, format: leftAxisFormat }),
-        y1: getChartAxis(definition, "right", "values", { locale, stacked, format: rightAxisFormat }),
-    };
-    config.options.scales = removeFalsyAttributes(config.options.scales);
-    config.options.plugins.chartShowValuesPlugin = {
-        showValues: chart.showValues,
-        background: chart.background,
-        callback: formatChartDatasetValue(axisFormats, locale),
-    };
-    if (chart.dataSetsHaveTitle &&
-        dataSetsValues[0] &&
-        labels.length > dataSetsValues[0].data.length) {
-        labels.shift();
-    }
-    const labelFormat = getChartLabelFormat(getters, chart.labelRange);
-    if (axisType === "time") {
-        const axis = {
-            type: "time",
-            time: getChartTimeOptions(labels, labelFormat, locale),
-        };
-        Object.assign(config.options.scales.x, axis);
-        config.options.scales.x.ticks.maxTicksLimit = 15;
-    }
-    else if (axisType === "linear") {
-        config.options.scales.x.type = "linear";
-        config.options.scales.x.ticks.callback = (value) => formatValue(value, { format: labelFormat, locale });
-        config.options.plugins.tooltip.callbacks.label = (tooltipItem) => {
-            const dataSetPoint = dataSetsValues[tooltipItem.datasetIndex].data[tooltipItem.dataIndex];
-            let label = tooltipItem.label || labelValues.values[tooltipItem.dataIndex];
-            if (isNumber(label, locale)) {
-                label = toNumber(label, locale);
-            }
-            const formattedX = formatValue(label, { locale, format: labelFormat });
-            const formattedY = formatValue(dataSetPoint, { locale, format: leftAxisFormat });
-            const dataSetTitle = tooltipItem.dataset.label;
-            return formattedX
-                ? `${dataSetTitle}: (${formattedX}, ${formattedY})`
-                : `${dataSetTitle}: ${formattedY}`;
-        };
-    }
-    const areaChart = "fillArea" in chart ? chart.fillArea : false;
-    const stackedChart = "stacked" in chart ? chart.stacked : false;
-    const cumulative = "cumulative" in chart ? chart.cumulative : false;
-    const colors = getChartColorsGenerator(definition, dataSetsValues.length);
-    let maxLength = 0;
-    const trendDatasets = [];
-    for (let [index, { label, data }] of dataSetsValues.entries()) {
-        if (cumulative) {
-            let accumulator = 0;
-            data = data.map((value) => {
-                if (!isNaN(value)) {
-                    accumulator += parseFloat(value);
-                    return accumulator;
-                }
-                return value;
-            });
-        }
-        if (["linear", "time"].includes(axisType)) {
-            // Replace empty string labels by undefined to make sure chartJS doesn't decide that "" is the same as 0
-            data = data.map((y, index) => ({ x: labels[index] || undefined, y }));
-        }
-        const color = colors.next();
-        if (definition.dataSets?.[index]?.label) {
-            label = definition.dataSets[index].label;
-        }
-        const dataset = {
-            label,
-            data,
-            tension: 0, // 0 -> render straight lines, which is much faster
-            borderColor: color,
-            backgroundColor: areaChart ? setColorAlpha(color, LINE_FILL_TRANSPARENCY) : color,
-            pointBackgroundColor: color,
-            fill: areaChart ? getFillingMode(index, stackedChart) : false,
-            yAxisID: definition.dataSets[index].yAxisId || "y",
-        };
-        config.data.datasets.push(dataset);
-        const trend = definition.dataSets?.[index].trend;
-        if (!trend?.display) {
-            continue;
-        }
-        const trendDataset = getTrendDatasetForLineChart(trend, dataset, axisType, locale);
-        if (trendDataset) {
-            maxLength = Math.max(maxLength, trendDataset.data.length);
-            trendDatasets.push(trendDataset);
-        }
-    }
-    if (trendDatasets.length) {
-        /* 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
-         */
-        config.options.scales[TREND_LINE_XAXIS_ID] = {
-            ...config.options.scales.x,
-            type: "category",
-            labels: range(0, maxLength).map((x) => x.toString()),
-            offset: false,
-            display: false,
-        };
-        /* These datasets must be inserted after the original datasets to ensure the way we
-         * distinguish the originals and trendLine datasets after
-         */
-        trendDatasets.forEach((x) => config.data.datasets.push(x));
-    }
-    config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-        const displayTooltipTitle = axisType !== "linear" &&
-            tooltipItems.some((item) => item.dataset.xAxisID !== TREND_LINE_XAXIS_ID);
-        return displayTooltipTitle ? undefined : "";
-    };
-    return {
-        chartJsConfig: config,
-        background: chart.background || BACKGROUND_CHART_COLOR,
-    };
-}
-
 class LineChart extends AbstractChart {
     dataSets;
     labelRange;
@@ -29303,18 +29791,30 @@ class LineChart extends AbstractChart {
     }
 }
 function createLineChartRuntime(chart, getters) {
-    const { chartJsConfig, background } = createLineOrScatterChartRuntime(chart, getters);
-    const filled = chart.fillArea;
-    const pointStyle = filled ? "rect" : "line";
-    const lineWidth = filled ? 2 : 3;
-    chartJsConfig.options.plugins.legend.labels = {
-        ...chartJsConfig.options?.plugins?.legend?.labels,
-        ...getCustomLegendLabels(chartFontColor(background), {
-            pointStyle,
-            lineWidth,
-        }).labels,
+    const definition = chart.getDefinition();
+    const chartData = getLineChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const config = {
+        type: "line",
+        data: {
+            labels: chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+            datasets: getLineChartDatasets(definition, chartData),
+        },
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            layout: getLineChartLayout(definition),
+            scales: getLineChartScales(definition, chartData),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getLineChartLegend(definition),
+                tooltip: getLineChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+            },
+        },
+    };
+    return {
+        chartJsConfig: config,
+        background: chart.background || BACKGROUND_CHART_COLOR,
     };
-    return { chartJsConfig, background };
 }
 
 class PieChart extends AbstractChart {
@@ -29425,126 +29925,26 @@ class PieChart extends AbstractChart {
         return new PieChart(definition, this.sheetId, this.getters);
     }
 }
-function getPieConfiguration(chart, labels, localeFormat, colors) {
-    const fontColor = chartFontColor(chart.background);
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
-    const legend = {
-        labels: {
-            color: fontColor,
-            usePointStyle: true,
-            //@ts-ignore
-            generateLabels: (c) => 
-            //@ts-ignore
-            c.data.labels.map((label, index) => ({
-                text: label,
-                strokeStyle: colors[index],
-                fillStyle: colors[index],
-                pointStyle: "rect",
-                hidden: false,
-                lineWidth: 2,
-            })),
+function createPieChartRuntime(chart, getters) {
+    const definition = chart.getDefinition();
+    const chartData = getPieChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const config = {
+        type: chart.isDoughnut ? "doughnut" : "pie",
+        data: {
+            labels: chartData.labels.map(truncateLabel),
+            datasets: getPieChartDatasets(definition, chartData),
+        },
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            layout: getPieChartLayout(definition),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getPieChartLegend(definition, chartData),
+                tooltip: getPieChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+            },
         },
     };
-    if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
-        legend.display = false;
-    }
-    else {
-        legend.position = chart.legendPosition;
-    }
-    Object.assign(config.options.plugins.legend || {}, legend);
-    config.options.layout = {
-        padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
-    };
-    config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
-        return tooltipItems[0].dataset.label;
-    };
-    config.options.plugins.tooltip.callbacks.label = function (tooltipItem) {
-        const { format, locale } = localeFormat;
-        const data = tooltipItem.dataset.data;
-        const dataIndex = tooltipItem.dataIndex;
-        const percentage = calculatePercentage(data, dataIndex);
-        const xLabel = tooltipItem.label || tooltipItem.dataset.label;
-        const yLabel = tooltipItem.parsed.y ?? tooltipItem.parsed;
-        const toolTipFormat = !format && yLabel >= 1000 ? "#,##" : format;
-        const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-        return xLabel ? `${xLabel}: ${yLabelStr} (${percentage}%)` : `${yLabelStr} (${percentage}%)`;
-    };
-    config.options.plugins.chartShowValuesPlugin = {
-        showValues: chart.showValues,
-        callback: formatTickValue(localeFormat),
-    };
-    return config;
-}
-function getPieColors(colors, dataSetsValues) {
-    const pieColors = [];
-    const maxLength = largeMax(dataSetsValues.map((ds) => ds.data.length));
-    for (let i = 0; i <= maxLength; i++) {
-        pieColors.push(colors.next());
-    }
-    return pieColors;
-}
-function calculatePercentage(dataset, dataIndex) {
-    const numericData = dataset.filter((value) => typeof value === "number");
-    const total = numericData.reduce((sum, value) => sum + value, 0);
-    if (!total) {
-        return "";
-    }
-    const percentage = (dataset[dataIndex] / total) * 100;
-    return percentage.toFixed(2);
-}
-function filterNegativeValues(labels, datasets) {
-    const dataPointsIndexes = labels.reduce((indexes, label, i) => {
-        const shouldKeep = datasets.some((dataset) => {
-            const dataPoint = dataset.data[i];
-            return typeof dataPoint !== "number" || dataPoint >= 0;
-        });
-        if (shouldKeep) {
-            indexes.push(i);
-        }
-        return indexes;
-    }, []);
-    const filteredLabels = dataPointsIndexes.map((i) => labels[i] || "");
-    const filteredDatasets = datasets.map((dataset) => ({
-        ...dataset,
-        data: dataPointsIndexes.map((i) => {
-            const dataPoint = dataset.data[i];
-            return typeof dataPoint !== "number" || dataPoint >= 0 ? dataPoint : 0;
-        }),
-    }));
-    return { labels: filteredLabels, dataSetsValues: filteredDatasets };
-}
-function createPieChartRuntime(chart, getters) {
-    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-    let labels = labelValues.formattedValues;
-    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-    if (chart.dataSetsHaveTitle &&
-        dataSetsValues[0] &&
-        labels.length > dataSetsValues[0].data.length) {
-        labels.shift();
-    }
-    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-    if (chart.aggregated) {
-        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-    }
-    ({ dataSetsValues, labels } = filterNegativeValues(labels, dataSetsValues));
-    const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left");
-    const locale = getters.getLocale();
-    const dataSetsLength = Math.max(0, ...dataSetsValues.map((ds) => ds?.data?.length ?? 0));
-    const backgroundColor = getPieColors(new ColorGenerator(dataSetsLength), dataSetsValues);
-    const config = getPieConfiguration(chart, labels, { format: dataSetFormat, locale }, backgroundColor);
-    for (const { label, data } of dataSetsValues) {
-        const dataset = {
-            label,
-            data,
-            borderColor: BACKGROUND_CHART_COLOR,
-            backgroundColor,
-            hoverOffset: 30,
-        };
-        config.data.datasets.push(dataset);
-    }
-    if (chart.isDoughnut) {
-        config.type = "doughnut";
-    }
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
@@ -29662,27 +30062,27 @@ class PyramidChart extends AbstractChart {
     }
 }
 function createPyramidChartRuntime(chart, getters) {
-    const barDef = { ...chart.getDefinition(), type: "bar" };
-    const barChart = new BarChart(barDef, chart.sheetId, getters);
-    const barRuntime = createBarChartRuntime(barChart, getters);
-    const config = barRuntime.chartJsConfig;
-    let datasets = config.data?.datasets;
-    if (datasets && datasets[0]) {
-        datasets[0].data = datasets[0].data.map((value) => (value > 0 ? value : 0));
-    }
-    if (datasets && datasets[1]) {
-        datasets[1].data = datasets[1].data.map((value) => (value > 0 ? -value : 0));
-    }
-    const scales = config.options.scales;
-    const scalesXCallback = scales.x.ticks.callback;
-    scales.x.ticks.callback = (value) => scalesXCallback(Math.abs(value));
-    const tooltipLabelCallback = config.options.plugins.tooltip.callbacks.label;
-    config.options.plugins.tooltip.callbacks.label = (item) => {
-        const tooltipItem = { ...item, parsed: { y: item.parsed.y, x: Math.abs(item.parsed.x) } };
-        return tooltipLabelCallback(tooltipItem);
+    const definition = chart.getDefinition();
+    const chartData = getPyramidChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const config = {
+        type: "bar",
+        data: {
+            labels: chartData.labels.map(truncateLabel),
+            datasets: getBarChartDatasets(definition, chartData),
+        },
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            indexAxis: "y",
+            layout: getBarChartLayout(definition),
+            scales: getPyramidChartScales(definition, chartData),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getBarChartLegend(definition),
+                tooltip: getPyramidChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+            },
+        },
     };
-    const callback = config.options.plugins.chartShowValuesPlugin.callback;
-    config.options.plugins.chartShowValuesPlugin.callback = (x, axisId) => callback(Math.abs(x), axisId);
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
@@ -29697,6 +30097,7 @@ class RadarChart extends AbstractChart {
     dataSetsHaveTitle;
     dataSetDesign;
     fillArea;
+    showValues;
     constructor(definition, sheetId, getters) {
         super(definition, sheetId, getters);
         this.dataSets = createDataSets(getters, definition.dataSets, sheetId, definition.dataSetsHaveTitle);
@@ -29708,6 +30109,7 @@ class RadarChart extends AbstractChart {
         this.dataSetsHaveTitle = definition.dataSetsHaveTitle;
         this.dataSetDesign = definition.dataSets;
         this.fillArea = definition.fillArea;
+        this.showValues = definition.showValues;
     }
     static transformDefinition(definition, executed) {
         return transformChartDefinitionWithDataSetsWithZone(definition, executed);
@@ -29727,6 +30129,7 @@ class RadarChart extends AbstractChart {
             type: "radar",
             labelRange: context.auxiliaryRange || undefined,
             fillArea: context.fillArea ?? false,
+            showValues: context.showValues ?? false,
         };
     }
     getContextCreation() {
@@ -29779,6 +30182,7 @@ class RadarChart extends AbstractChart {
             stacked: this.stacked,
             aggregated: this.aggregated,
             fillArea: this.fillArea,
+            showValues: this.showValues,
         };
     }
     getDefinitionForExcel() {
@@ -29809,86 +30213,25 @@ class RadarChart extends AbstractChart {
 }
 function createRadarChartRuntime(chart, getters) {
     const definition = chart.getDefinition();
-    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-    let labels = labelValues.formattedValues;
-    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-    if (chart.dataSetsHaveTitle &&
-        dataSetsValues[0] &&
-        labels.length > dataSetsValues[0].data.length) {
-        labels.shift();
-    }
-    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-    if (chart.aggregated) {
-        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-    }
-    const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left") ||
-        getChartDatasetFormat(getters, chart.dataSets, "right");
-    const axisFormats = { r: dataSetFormat };
-    const locale = getters.getLocale();
-    const fontColor = chartFontColor(chart.background);
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, {
-        axisFormats,
-        locale,
-    });
-    const fill = definition.fillArea ?? false;
-    const pointStyle = fill ? "rect" : "line";
-    const lineWidth = fill ? 2 : 3;
-    const legend = {
-        ...INTERACTIVE_LEGEND_CONFIG,
-        ...getCustomLegendLabels(fontColor, {
-            pointStyle,
-            lineWidth,
-        }),
-    };
-    if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
-        legend.display = false;
-    }
-    else {
-        legend.position = chart.legendPosition;
-    }
-    config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-    config.options.plugins.tooltip = {
-        ...config.options.plugins?.tooltip,
-        callbacks: {
-            label: function (tooltipItem) {
-                const xLabel = tooltipItem.dataset?.label || tooltipItem.label;
-                const yLabel = tooltipItem.parsed.r;
-                const formattedY = formatValue(yLabel, { format: dataSetFormat, locale });
-                return xLabel ? `${xLabel}: ${formattedY}` : formattedY;
-            },
+    const chartData = getRadarChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const config = {
+        type: "radar",
+        data: {
+            labels: chartData.labels.map(truncateLabel),
+            datasets: getRadarChartDatasets(definition, chartData),
         },
-    };
-    config.options.scales = {
-        r: {
-            ticks: {
-                callback: formatTickValue({ format: dataSetFormat, locale }),
-                backdropColor: chart.background || "#FFFFFF",
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            layout: getBarChartLayout(definition),
+            scales: getRadarChartScales(definition, chartData),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getRadarChartLegend(definition),
+                tooltip: getRadarChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
             },
-            pointLabels: { color: fontColor },
         },
     };
-    config.options.layout = {
-        padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
-    };
-    const colorGenerator = getChartColorsGenerator(definition, dataSetsValues.length);
-    for (let i = 0; i < dataSetsValues.length; i++) {
-        let { label, data } = dataSetsValues[i];
-        if (definition.dataSets?.[i]?.label) {
-            label = definition.dataSets[i].label;
-        }
-        const borderColor = colorGenerator.next();
-        const dataset = {
-            label,
-            data,
-            borderColor,
-            backgroundColor: borderColor,
-        };
-        if (fill) {
-            dataset.backgroundColor = setColorAlpha(borderColor, LINE_FILL_TRANSPARENCY);
-            dataset["fill"] = "start";
-        }
-        config.data.datasets.push(dataset);
-    }
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
@@ -30020,20 +30363,32 @@ class ScatterChart extends AbstractChart {
     }
 }
 function createScatterChartRuntime(chart, getters) {
-    const { chartJsConfig, background } = createLineOrScatterChartRuntime(chart, getters);
-    // use chartJS line chart and disable the lines instead of chartJS scatter chart. This is because the scatter chart
-    // have less options than the line chart (it only works with linear labels)
-    chartJsConfig.type = "line";
-    const configOptions = chartJsConfig.options;
-    configOptions.plugins.legend.labels = {
-        ...configOptions.plugins?.legend?.labels,
-        boxHeight: 6,
-        usePointStyle: true,
+    const definition = chart.getDefinition();
+    const chartData = getLineChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const config = {
+        // use chartJS line chart and disable the lines instead of chartJS scatter chart. This is because the scatter chart
+        // have less options than the line chart (it only works with linear labels)
+        type: "line",
+        data: {
+            labels: chartData.axisType !== "time" ? chartData.labels.map(truncateLabel) : chartData.labels,
+            datasets: getScatterChartDatasets(definition, chartData),
+        },
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            layout: getLineChartLayout(definition),
+            scales: getScatterChartScales(definition, chartData),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getScatterChartLegend(definition),
+                tooltip: getLineChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+            },
+        },
+    };
+    return {
+        chartJsConfig: config,
+        background: chart.background || BACKGROUND_CHART_COLOR,
     };
-    for (const dataSet of chartJsConfig.data.datasets) {
-        dataSet.showLine = "showLine" in dataSet ? dataSet.showLine : false;
-    }
-    return { chartJsConfig, background };
 }
 
 class WaterfallChart extends AbstractChart {
@@ -30169,173 +30524,29 @@ class WaterfallChart extends AbstractChart {
         return new WaterfallChart(definition, this.sheetId, this.getters);
     }
 }
-function getWaterfallConfiguration(chart, labels, dataSeriesLabels, localeFormat) {
-    const { locale, format } = localeFormat;
-    const fontColor = chartFontColor(chart.background);
-    const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
-    const negativeColor = chart.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
-    const positiveColor = chart.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
-    const subTotalColor = chart.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
-    const pointStyle = "rect";
-    const legend = {
-        labels: {
-            usePointStyle: true,
-            generateLabels: () => {
-                const legendValues = [
-                    {
-                        text: _t("Positive values"),
-                        fontColor,
-                        strokeStyle: positiveColor,
-                        fillStyle: positiveColor,
-                        pointStyle,
-                    },
-                    {
-                        text: _t("Negative values"),
-                        fontColor,
-                        strokeStyle: negativeColor,
-                        fillStyle: negativeColor,
-                        pointStyle,
-                    },
-                ];
-                if (chart.showSubTotals || chart.firstValueAsSubtotal) {
-                    legendValues.push({
-                        text: _t("Subtotals"),
-                        fontColor,
-                        strokeStyle: subTotalColor,
-                        fillStyle: subTotalColor,
-                        pointStyle,
-                    });
-                }
-                return legendValues;
-            },
-        },
-    };
-    if (chart.legendPosition === "none") {
-        legend.display = false;
-    }
-    else {
-        legend.position = chart.legendPosition;
-    }
-    config.options.plugins.legend = { ...config.options.plugins?.legend, ...legend };
-    config.options.layout = {
-        padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
-    };
-    config.options.scales = {
-        x: {
-            ticks: {
-                padding: 5,
-                color: fontColor,
-            },
-            grid: {
-                display: false,
-            },
-            title: getChartAxisTitleRuntime(chart.axesDesign?.x),
+function createWaterfallChartRuntime(chart, getters) {
+    const definition = chart.getDefinition();
+    const chartData = getBarChartData(definition, chart.dataSets, chart.labelRange, getters);
+    const { labels, datasets } = getWaterfallDatasetAndLabels(definition, chartData);
+    const config = {
+        type: "bar",
+        data: {
+            labels,
+            datasets,
         },
-        y: {
-            position: chart.verticalAxisPosition,
-            ticks: {
-                color: fontColor,
-                callback: (value) => {
-                    value = Number(value);
-                    if (isNaN(value))
-                        return value;
-                    return formatValue(value, {
-                        locale,
-                        format: !format && Math.abs(value) > 1000 ? "#,##" : format,
-                    });
-                },
-            },
-            grid: {
-                lineWidth: (context) => {
-                    return context.tick.value === 0 ? 2 : 1;
-                },
+        options: {
+            ...CHART_COMMON_OPTIONS,
+            layout: getWaterfallChartLayout(definition),
+            scales: getWaterfallChartScales(definition, chartData),
+            plugins: {
+                title: getChartTitle(definition),
+                legend: getWaterfallChartLegend(definition),
+                tooltip: getWaterfallChartTooltip(definition, chartData),
+                chartShowValuesPlugin: getChartShowValues(definition, chartData),
+                waterfallLinesPlugin: { showConnectorLines: definition.showConnectorLines },
             },
-            title: getChartAxisTitleRuntime(chart.axesDesign?.y),
         },
     };
-    config.options.plugins.tooltip = {
-        callbacks: {
-            label: function (tooltipItem) {
-                const [lastValue, currentValue] = tooltipItem.raw;
-                const yLabel = currentValue - lastValue;
-                const dataSeriesIndex = Math.floor(tooltipItem.dataIndex / labels.length);
-                const dataSeriesLabel = dataSeriesLabels[dataSeriesIndex];
-                const toolTipFormat = !format && Math.abs(yLabel) > 1000 ? "#,##" : format;
-                const yLabelStr = formatValue(yLabel, { format: toolTipFormat, locale });
-                return dataSeriesLabel ? `${dataSeriesLabel}: ${yLabelStr}` : yLabelStr;
-            },
-        },
-    };
-    config.options.plugins.waterfallLinesPlugin = { showConnectorLines: chart.showConnectorLines };
-    config.options.plugins.chartShowValuesPlugin = {
-        showValues: chart.showValues,
-        background: chart.background,
-        callback: formatTickValue(localeFormat),
-    };
-    return config;
-}
-function createWaterfallChartRuntime(chart, getters) {
-    const labelValues = getChartLabelValues(getters, chart.dataSets, chart.labelRange);
-    let labels = labelValues.formattedValues;
-    let dataSetsValues = getChartDatasetValues(getters, chart.dataSets);
-    if (chart.dataSetsHaveTitle &&
-        dataSetsValues[0] &&
-        labels.length > dataSetsValues[0].data.length) {
-        labels.shift();
-    }
-    ({ labels, dataSetsValues } = filterEmptyDataPoints(labels, dataSetsValues));
-    if (chart.aggregated) {
-        ({ labels, dataSetsValues } = aggregateDataForLabels(labels, dataSetsValues));
-    }
-    if (chart.showSubTotals) {
-        labels.push(_t("Subtotal"));
-    }
-    const dataSetFormat = getChartDatasetFormat(getters, chart.dataSets, "left") ||
-        getChartDatasetFormat(getters, chart.dataSets, "right");
-    const locale = getters.getLocale();
-    const dataSeriesLabels = dataSetsValues.map((dataSet) => dataSet.label);
-    const config = getWaterfallConfiguration(chart, labels, dataSeriesLabels, {
-        format: dataSetFormat,
-        locale,
-    });
-    config.type = "bar";
-    const negativeColor = chart.negativeValuesColor || CHART_WATERFALL_NEGATIVE_COLOR;
-    const positiveColor = chart.positiveValuesColor || CHART_WATERFALL_POSITIVE_COLOR;
-    const subTotalColor = chart.subTotalValuesColor || CHART_WATERFALL_SUBTOTAL_COLOR;
-    const backgroundColor = [];
-    const datasetValues = [];
-    const dataset = {
-        label: "",
-        data: datasetValues,
-        backgroundColor,
-    };
-    const labelsWithSubTotals = [];
-    let lastValue = 0;
-    for (const dataSetsValue of dataSetsValues) {
-        for (let i = 0; i < dataSetsValue.data.length; i++) {
-            const data = dataSetsValue.data[i];
-            labelsWithSubTotals.push(labels[i]);
-            if (isNaN(Number(data))) {
-                datasetValues.push([lastValue, lastValue]);
-                backgroundColor.push("");
-                continue;
-            }
-            datasetValues.push([lastValue, data + lastValue]);
-            let color = data >= 0 ? positiveColor : negativeColor;
-            if (i === 0 && dataSetsValue === dataSetsValues[0] && chart.firstValueAsSubtotal) {
-                color = subTotalColor;
-            }
-            backgroundColor.push(color);
-            lastValue += data;
-        }
-        if (chart.showSubTotals) {
-            labelsWithSubTotals.push(_t("Subtotal"));
-            datasetValues.push([0, lastValue]);
-            backgroundColor.push(subTotalColor);
-        }
-    }
-    config.data.datasets.push(dataset);
-    config.data.labels = labelsWithSubTotals.map(truncateLabel);
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
 }
 
@@ -30766,7 +30977,7 @@ function getCopyMenuItem(figureId, env) {
             env.model.dispatch("COPY");
             await env.clipboard.write(env.model.getters.getClipboardContent());
         },
-        icon: "o-spreadsheet-Icon.COPY",
+        icon: "o-spreadsheet-Icon.CLIPBOARD",
     };
 }
 function getCutMenuItem(figureId, env) {
@@ -32554,14 +32765,14 @@ function transformDefinition(definition, executed) {
  * - Else returns a bar chart
  */
 function getSmartChartDefinition(zone, getters) {
+    const sheetId = getters.getActiveSheetId();
     let dataSetZone = zone;
     const singleColumn = zoneToDimension(zone).numberOfCols === 1;
     if (!singleColumn) {
         dataSetZone = { ...zone, left: zone.left + 1 };
     }
-    const dataRange = zoneToXc(dataSetZone);
+    const dataRange = zoneToXc(getters.getUnboundedZone(sheetId, dataSetZone));
     const dataSets = [{ dataRange, yAxisId: "y" }];
-    const sheetId = getters.getActiveSheetId();
     const topLeftCell = getters.getCell({ sheetId, col: zone.left, row: zone.top });
     if (getZoneArea(zone) === 1 && topLeftCell?.content) {
         return {
@@ -32581,10 +32792,7 @@ function getSmartChartDefinition(zone, getters) {
     const dataSetsHaveTitle = !!cellsInFirstRow.find((cell) => cell.type !== CellValueType.empty && cell.type !== CellValueType.number);
     let labelRangeXc;
     if (!singleColumn) {
-        labelRangeXc = zoneToXc({
-            ...zone,
-            right: zone.left,
-        });
+        labelRangeXc = zoneToXc(getters.getUnboundedZone(sheetId, { ...zone, right: zone.left }));
     }
     // Only display legend for several datasets.
     const newLegendPos = dataSetZone.right === dataSetZone.left ? "none" : "top";
@@ -32628,6 +32836,51 @@ function getSmartChartDefinition(zone, getters) {
     };
 }
 
+var CHART_HELPERS = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  AbstractChart: AbstractChart,
+  BarChart: BarChart,
+  CHART_AXIS_CHOICES: CHART_AXIS_CHOICES,
+  CHART_COMMON_OPTIONS: CHART_COMMON_OPTIONS,
+  GaugeChart: GaugeChart,
+  LineChart: LineChart,
+  PieChart: PieChart,
+  ScorecardChart: ScorecardChart$1,
+  TREND_LINE_XAXIS_ID: TREND_LINE_XAXIS_ID,
+  WaterfallChart: WaterfallChart,
+  adaptChartRange: adaptChartRange,
+  chartFactory: chartFactory,
+  chartFontColor: chartFontColor,
+  chartRuntimeFactory: chartRuntimeFactory,
+  chartToImage: chartToImage,
+  checkDataset: checkDataset,
+  checkLabelRange: checkLabelRange,
+  copyDataSetsWithNewSheetId: copyDataSetsWithNewSheetId,
+  copyLabelRangeWithNewSheetId: copyLabelRangeWithNewSheetId,
+  createBarChartRuntime: createBarChartRuntime,
+  createDataSets: createDataSets,
+  createGaugeChartRuntime: createGaugeChartRuntime,
+  createLineChartRuntime: createLineChartRuntime,
+  createPieChartRuntime: createPieChartRuntime,
+  createScorecardChartRuntime: createScorecardChartRuntime,
+  createWaterfallChartRuntime: createWaterfallChartRuntime,
+  drawScoreChart: drawScoreChart,
+  formatChartDatasetValue: formatChartDatasetValue,
+  formatTickValue: formatTickValue,
+  getChartPositionAtCenterOfViewport: getChartPositionAtCenterOfViewport,
+  getDefinedAxis: getDefinedAxis,
+  getPieColors: getPieColors,
+  getSmartChartDefinition: getSmartChartDefinition,
+  shouldRemoveFirstLabel: shouldRemoveFirstLabel,
+  toExcelDataset: toExcelDataset,
+  toExcelLabelRange: toExcelLabelRange,
+  transformChartDefinitionWithDataSetsWithZone: transformChartDefinitionWithDataSetsWithZone,
+  transformDefinition: transformDefinition,
+  truncateLabel: truncateLabel,
+  updateChartRangesWithDataSets: updateChartRangesWithDataSets,
+  validateChartDefinition: validateChartDefinition
+});
+
 /**
  * Create a table on the selected zone, with UI warnings to the user if the creation fails.
  * If a single cell is selected, expand the selection to non-empty adjacent cells to create a table.
@@ -33201,7 +33454,7 @@ const copy = {
         env.model.dispatch("COPY");
         await env.clipboard.write(env.model.getters.getClipboardContent());
     },
-    icon: "o-spreadsheet-Icon.COPY",
+    icon: "o-spreadsheet-Icon.CLIPBOARD",
 };
 const cut = {
     name: _t("Cut"),
@@ -36685,6 +36938,7 @@ class ColorPicker extends Component {
         currentColor: { type: String, optional: true },
         maxHeight: { type: Number, optional: true },
         anchorRect: Object,
+        disableNoColor: { type: Boolean, optional: true },
     };
     static defaultProps = { currentColor: "" };
     static components = { Popover };
@@ -37084,6 +37338,7 @@ class RoundColorPicker extends Component {
         currentColor: { type: String, optional: true },
         title: { type: String, optional: true },
         onColorPicked: Function,
+        disableNoColor: { type: Boolean, optional: true },
     };
     colorPickerButtonRef = useRef("colorPickerButton");
     state;
@@ -40252,6 +40507,9 @@ class ConditionalFormattingEditor extends Component {
         }
     }
     setColorScaleColor(target, color) {
+        if (!isColorValid(color)) {
+            return;
+        }
         const point = this.state.rules.colorScale[target];
         if (point) {
             point.color = Number.parseInt(color.slice(1), 16);
@@ -51162,16 +51420,11 @@ class BordersPlugin extends CorePlugin {
     import(data) {
         // Borders
         if (Object.keys(data.borders || {}).length) {
-            for (let sheet of data.sheets) {
-                for (const zoneXc in sheet.borders) {
-                    const borderId = sheet.borders[zoneXc];
+            for (const sheet of data.sheets) {
+                for (const [position, borderId] of iterateItemIdsPositions(sheet.id, sheet.borders)) {
+                    const { sheetId, col, row } = position;
                     const border = data.borders[borderId];
-                    const zone = toZone(zoneXc);
-                    for (let row = zone.top; row <= zone.bottom; row++) {
-                        for (let col = zone.left; col <= zone.right; col++) {
-                            this.setBorder(sheet.id, col, row, border, false);
-                        }
-                    }
+                    this.setBorder(sheetId, col, row, border, false);
                 }
             }
         }
@@ -51204,23 +51457,17 @@ class BordersPlugin extends CorePlugin {
         data.borders = borders;
     }
     exportForExcel(data) {
-        for (const sheet of data.sheets) {
-            for (let col = 0; col < sheet.colNumber; col++) {
-                for (let row = 0; row < sheet.rowNumber; row++) {
-                    const border = this.getCellBorder({ sheetId: sheet.id, col, row });
-                    if (border) {
-                        const xc = toXC(col, row);
-                        sheet.cells[xc] ??= {};
-                        sheet.cells[xc].border = getItemId(border, data.borders);
-                    }
-                }
-            }
-        }
+        this.export(data);
     }
 }
 
 class PositionMap {
     map = {};
+    constructor(entries = []) {
+        for (const [position, value] of entries) {
+            this.set(position, value);
+        }
+    }
     set({ sheetId, col, row }, value) {
         const map = this.map;
         if (!map[sheetId]) {
@@ -51457,10 +51704,10 @@ class CellPlugin extends CorePlugin {
             const cellsData = new PositionMap();
             // cells content
             for (const xc in sheet.cells) {
-                if (sheet.cells[xc]?.content) {
+                if (sheet.cells[xc]) {
                     const { col, row } = toCartesian(xc);
                     const position = { sheetId: sheet.id, col, row };
-                    cellsData.set(position, { content: sheet.cells[xc]?.content });
+                    cellsData.set(position, { content: sheet.cells[xc] });
                 }
             }
             // cells style and format
@@ -51468,20 +51715,13 @@ class CellPlugin extends CorePlugin {
                 ["style", sheet.styles],
                 ["format", sheet.formats],
             ]) {
-                for (const zoneXc in valuesByZones) {
-                    const itemId = valuesByZones[zoneXc];
-                    const zone = toZone(zoneXc);
-                    for (let row = zone.top; row <= zone.bottom; row++) {
-                        for (let col = zone.left; col <= zone.right; col++) {
-                            const position = { sheetId, col, row };
-                            const cellData = cellsData.get(position);
-                            if (cellData) {
-                                cellData[cellProperty] = itemId;
-                            }
-                            else {
-                                cellsData.set(position, { [cellProperty]: itemId });
-                            }
-                        }
+                for (const [position, itemId] of iterateItemIdsPositions(sheet.id, valuesByZones)) {
+                    const cellData = cellsData.get(position);
+                    if (cellData) {
+                        cellData[cellProperty] = itemId;
+                    }
+                    else {
+                        cellsData.set(position, { [cellProperty]: itemId });
                     }
                 }
             }
@@ -51523,9 +51763,7 @@ class CellPlugin extends CorePlugin {
                     positionsByFormat[formatId].push(position);
                 }
                 if (cell.content) {
-                    cells[xc] = {
-                        content: cell.content,
-                    };
+                    cells[xc] = cell.content;
                 }
             }
             _sheet.styles = groupItemIdsByZones(positionsByStyle);
@@ -51541,35 +51779,19 @@ class CellPlugin extends CorePlugin {
     }
     exportForExcel(data) {
         this.export(data);
-        for (const sheet of data.sheets) {
-            for (const cellId in this.getters.getCells(sheet.id)) {
-                const { col, row } = this.getters.getCellPosition(cellId);
-                const xc = toXC(col, row);
-                const cell = this.getCellById(cellId);
-                sheet.cells[xc] ??= {};
-                if (cell?.format) {
-                    sheet.cells[xc].format = getItemId(cell.format, data.formats);
-                }
-                if (cell?.style) {
-                    sheet.cells[xc] ??= {};
-                    sheet.cells[xc].style = getItemId(this.removeDefaultStyleValues(cell.style), data.styles);
-                }
-            }
-        }
-        const incompatible = [];
+        const incompatibleIds = [];
         for (const formatId in data.formats || []) {
             if (!isExcelCompatible(data.formats[formatId])) {
-                incompatible.push(formatId);
+                incompatibleIds.push(Number(formatId));
                 delete data.formats[formatId];
             }
         }
-        if (incompatible.length) {
+        if (incompatibleIds.length) {
             for (const sheet of data.sheets) {
-                for (const xc in sheet.cells) {
-                    const cell = sheet.cells[xc];
-                    const format = cell?.format;
-                    if (format && incompatible.includes(format.toString())) {
-                        delete cell.format;
+                for (const zoneXc in sheet.formats) {
+                    const formatId = sheet.formats[zoneXc];
+                    if (formatId && incompatibleIds.includes(formatId)) {
+                        delete sheet.formats[zoneXc];
                     }
                 }
             }
@@ -58368,42 +58590,44 @@ class EvaluationPlugin extends UIPlugin {
     // Export
     // ---------------------------------------------------------------------------
     exportForExcel(data) {
+        for (const sheet of data.sheets) {
+            sheet.cellValues = {};
+        }
         for (const position of this.evaluator.getEvaluatedPositions()) {
             const evaluatedCell = this.evaluator.getEvaluatedCell(position);
             const xc = toXC(position.col, position.row);
             const value = evaluatedCell.value;
             let isFormula = false;
             let newContent = undefined;
-            let newFormat = undefined;
             let isExported = true;
             const exportedSheetData = data.sheets.find((sheet) => sheet.id === position.sheetId);
             const formulaCell = this.getCorrespondingFormulaCell(position);
             if (formulaCell) {
                 isExported = isExportableToExcel(formulaCell.compiledFormula.tokens);
                 isFormula = isExported;
-                if (!isExported) {
-                    // If the cell contains a non-exported formula and that is evaluates to
-                    // nothing* ,we don't export it.
-                    // * non-falsy value are relevant and so are 0 and FALSE, which only leaves
-                    // the empty string.
-                    if (value !== "") {
-                        newContent = (value ?? "").toString();
-                        newFormat = evaluatedCell.format;
+                // If the cell contains a non-exported formula and that is evaluates to
+                // nothing* ,we don't export it.
+                // * non-falsy value are relevant and so are 0 and FALSE, which only leaves
+                // the empty string.
+                if (!isExported && value !== "") {
+                    newContent = (value ?? "").toString();
+                    const newFormat = evaluatedCell.format;
+                    if (newFormat) {
+                        const newFormatId = getItemId(newFormat, data.formats);
+                        exportedSheetData.formats[xc] = newFormatId;
                     }
                 }
             }
-            const exportedCellData = exportedSheetData.cells[xc] || {};
-            const format = newFormat
-                ? getItemId(newFormat, data.formats)
-                : exportedCellData.format;
+            const exportedCellData = exportedSheetData.cells[xc];
             let content;
             if (isExported && isFormula && formulaCell instanceof FormulaCellWithDependencies) {
                 content = formulaCell.contentWithFixedReferences;
             }
             else {
-                content = !isExported ? newContent : exportedCellData.content;
+                content = !isExported ? newContent : exportedCellData;
             }
-            exportedSheetData.cells[xc] = { ...exportedCellData, value, isFormula, content, format };
+            exportedSheetData.cells[xc] = content;
+            exportedSheetData.cellValues[xc] = value;
         }
     }
     /**
@@ -64457,12 +64681,9 @@ class FilterEvaluationPlugin extends UIPlugin {
                     const headerString = this.getters.getEvaluatedCell(position).formattedValue;
                     const headerName = this.getUniqueColNameForExcel(i, headerString, headerNames);
                     headerNames.push(headerName);
-                    sheetData.cells[toXC(position.col, position.row)] = {
-                        ...sheetData.cells[toXC(position.col, position.row)],
-                        content: headerName,
-                        value: headerName,
-                        isFormula: false,
-                    };
+                    const xc = toXC(position.col, position.row);
+                    sheetData.cells[xc] = headerName;
+                    sheetData.cellValues[xc] = headerName;
                 }
                 tableData.filters = filters;
             }
@@ -71029,18 +71250,17 @@ function numberRef(reference) {
   `;
 }
 
-function addFormula(cell) {
-    const formula = cell.content;
+function addFormula(formula, value) {
     if (!formula) {
         return { attrs: [], node: escapeXml `` };
     }
-    const type = getCellType(cell.value);
+    const type = getCellType(value);
     if (type === undefined) {
         return { attrs: [], node: escapeXml `` };
     }
     const attrs = [["t", type]];
     const XlsxFormula = adaptFormulaToExcel(formula);
-    const exportedValue = adaptFormulaValueToExcel(cell.value);
+    const exportedValue = adaptFormulaValueToExcel(value);
     const node = escapeXml /*xml*/ `<f>${XlsxFormula}</f><v>${exportedValue}</v>`;
     return { attrs, node };
 }
@@ -71809,7 +72029,7 @@ function addTableColumns(table, sheetData) {
     const columns = [];
     for (const i of range(0, zoneToDimension(tableZone).numberOfCols)) {
         const colHeaderXc = toXC(tableZone.left + i, tableZone.top);
-        const colName = sheetData.cells[colHeaderXc]?.content || `col${i}`;
+        const colName = sheetData.cells[colHeaderXc] || `col${i}`;
         const colAttributes = [
             ["id", i + 1], // id cannot be 0
             ["name", colName],
@@ -71818,7 +72038,7 @@ function addTableColumns(table, sheetData) {
             // Note: To be 100% complete, we could also add a `totalsRowLabel` attribute for total strings, and a tag
             // `<totalsRowFormula>` for the formula of the total. But those doesn't seem to be mandatory for Excel.
             const colTotalXc = toXC(tableZone.left + i, tableZone.bottom);
-            const colTotalContent = sheetData.cells[colTotalXc]?.content;
+            const colTotalContent = sheetData.cells[colTotalXc];
             if (colTotalContent?.startsWith("=")) {
                 colAttributes.push(["totalsRowFunction", "custom"]);
             }
@@ -71889,14 +72109,22 @@ function addRows(construct, data, sheet) {
         if (row.collapsed) {
             rowAttrs.push(["collapsed", 1]);
         }
+        const styles = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.styles));
+        const borders = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.borders));
+        const formats = new PositionMap(iterateItemIdsPositions(sheet.id, sheet.formats));
         const cellNodes = [];
         for (let c = 0; c < sheet.colNumber; c++) {
             const xc = toXC(c, r);
-            const cell = sheet.cells[xc];
-            if (cell) {
+            const content = sheet.cells[xc];
+            const value = sheet.cellValues[xc];
+            const position = { sheetId: sheet.id, col: c, row: r };
+            const styleId = styles.get(position);
+            const formatId = formats.get(position);
+            const borderId = borders.get(position);
+            if (content || styleId || formatId || borderId || value !== undefined) {
                 const attributes = [["r", xc]];
                 // style
-                const id = normalizeStyle(construct, extractStyle(cell, data));
+                const id = normalizeStyle(construct, extractStyle(data, styleId, formatId, borderId));
                 // don't add style if default
                 if (id) {
                     attributes.push(["s", id]);
@@ -71904,22 +72132,22 @@ function addRows(construct, data, sheet) {
                 let additionalAttrs = [];
                 let cellNode = escapeXml ``;
                 // Either formula or static value inside the cell
-                if (cell.isFormula) {
-                    const res = addFormula(cell);
+                if (content?.startsWith("=") && value !== undefined) {
+                    const res = addFormula(content, value);
                     if (!res) {
                         continue;
                     }
                     ({ attrs: additionalAttrs, node: cellNode } = res);
                 }
-                else if (cell.content && isMarkdownLink(cell.content)) {
-                    const { label } = parseMarkdownLink(cell.content);
+                else if (content && isMarkdownLink(content)) {
+                    const { label } = parseMarkdownLink(content);
                     ({ attrs: additionalAttrs, node: cellNode } = addContent(label, construct.sharedStrings));
                 }
-                else if (cell.content && cell.content !== "") {
+                else if (content && content !== "") {
                     const isTableHeader = isCellTableHeader(c, r, sheet);
                     const isTableTotal = isCellTableTotal(c, r, sheet);
-                    const isPlainText = !!(cell.format && isTextFormat(data.formats[cell.format]));
-                    ({ attrs: additionalAttrs, node: cellNode } = addContent(cell.content, construct.sharedStrings, isTableHeader || isTableTotal || isPlainText));
+                    const isPlainText = !!(formatId && isTextFormat(data.formats[formatId]));
+                    ({ attrs: additionalAttrs, node: cellNode } = addContent(content, construct.sharedStrings, isTableHeader || isTableTotal || isPlainText));
                 }
                 attributes.push(...additionalAttrs);
                 // prettier-ignore
@@ -71968,7 +72196,7 @@ function addHyperlinks(construct, data, sheetIndex) {
     const cells = sheet.cells;
     const linkNodes = [];
     for (const xc in cells) {
-        const content = cells[xc]?.content;
+        const content = cells[xc];
         if (content && isMarkdownLink(content)) {
             const { label, url } = parseMarkdownLink(content);
             if (isSheetUrl(url)) {
@@ -72940,14 +73168,6 @@ const helpers = {
     createEmptyWorkbookData,
     createEmptySheet,
     createEmptyExcelSheet,
-    getDefaultChartJsRuntime,
-    getCustomLegendLabels,
-    chartFontColor,
-    getChartAxisTitleRuntime,
-    getChartAxisType,
-    getTrendDatasetForBarChart,
-    getTrendDatasetForLineChart,
-    getFillingMode,
     rgbaToHex,
     colorToRGBA,
     positionToZone,
@@ -72982,7 +73202,6 @@ const helpers = {
     createPivotFormula,
     areDomainArgsFieldsValid,
     splitReference,
-    formatTickValue,
 };
 const links = {
     isMarkdownLink,
@@ -73067,15 +73286,12 @@ const constants = {
     DEFAULT_LOCALE,
     HIGHLIGHT_COLOR,
     PIVOT_TABLE_CONFIG,
-    TREND_LINE_XAXIS_ID,
-    CHART_AXIS_CHOICES,
-    INTERACTIVE_LEGEND_CONFIG,
-    ChartTerms,
 };
+const chartHelpers = { ...CHART_HELPERS, ...CHART_RUNTIME_HELPERS };
 
-export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
+export { AbstractCellClipboardHandler, AbstractChart, AbstractFigureClipboardHandler, CellErrorType, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, PivotRuntimeDefinition, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, SpreadsheetPivotTable, UIPlugin, __info__, addFunction, addRenderingLayer, astToFormula, chartHelpers, compile, compileTokens, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, hooks, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, parseTokens, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, stores, tokenColors, tokenize };
 
 
-__info__.version = "18.1.0-alpha.3";
-__info__.date = "2024-11-08T12:18:22.841Z";
-__info__.hash = "96dcfab";
+__info__.version = "18.1.0-alpha.4";
+__info__.date = "2024-11-13T15:06:47.769Z";
+__info__.hash = "e1ad985";