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

package/dist/o-spreadsheet.esm.js

@@ -3474,14 +3474,15 @@ class ChartJsComponent extends Component {
     createChart(chartData) {
         const canvas = this.canvas.el;
         const ctx = canvas.getContext("2d");
+        // @ts-ignore
         this.chart = new window.Chart(ctx, chartData);
     }
     updateChartJs(chartRuntime) {
         const chartData = chartRuntime.chartJsConfig;
         if (chartData.data && chartData.data.datasets) {
             this.chart.data = chartData.data;
-            if (chartData.options?.title) {
-                this.chart.config.options.title = chartData.options.title;
+            if (chartData.options?.plugins?.title) {
+                this.chart.config.options.plugins.title = chartData.options.plugins.title;
             }
             if (chartData.options && "valueLabel" in chartData.options) {
                 if (chartData.options?.valueLabel) {
@@ -3491,12 +3492,13 @@ class ChartJsComponent extends Component {
             }
         }
         else {
-            this.chart.data.datasets = undefined;
+            this.chart.data.datasets = [];
         }
-        this.chart.config.options.tooltips = chartData.options?.tooltips;
-        this.chart.config.options.legend = chartData.options?.legend;
+        this.chart.config.options.plugins.tooltip = chartData.options.plugins.tooltip;
+        this.chart.config.options.plugins.legend = chartData.options.plugins.legend;
         this.chart.config.options.scales = chartData.options?.scales;
-        this.chart.update({ duration: 0 });
+        // ?
+        this.chart.update("active");
     }
 }
 ChartJsComponent.props = {
@@ -16178,49 +16180,40 @@ function truncateLabel(label) {
  * Get a default chart js configuration
  */
 function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale }) {
-    return {
-        type: chart.type,
-        options: {
-            // https://www.chartjs.org/docs/latest/general/responsive.html
-            responsive: true,
-            maintainAspectRatio: false,
-            layout: {
-                padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
-            },
-            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: {
-                duration: 0, // general animation time
+    const options = {
+        // https://www.chartjs.org/docs/latest/general/responsive.html
+        responsive: true,
+        maintainAspectRatio: false,
+        layout: {
+            padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
+        },
+        elements: {
+            line: {
+                fill: false, // do not fill the area under line charts
             },
-            hover: {
-                animationDuration: 10, // duration of animations when hovering an item
+            point: {
+                hitRadius: 15, // increased hit radius to display point tooltip when hovering nearby
             },
-            responsiveAnimationDuration: 0,
+        },
+        animation: false,
+        plugins: {
             title: {
                 display: !!chart.title,
-                fontSize: 22,
-                fontStyle: "normal",
                 text: _t(chart.title),
-                fontColor,
+                color: fontColor,
+                font: { size: 22, weight: "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: undefined,
+                onClick: () => { },
             },
-            tooltips: {
+            tooltip: {
                 callbacks: {
-                    label: function (tooltipItem, data) {
-                        let xLabel = data.datasets?.[tooltipItem.datasetIndex || 0]?.label;
-                        const yLabel = tooltipItem.yLabel !== ""
-                            ? tooltipItem.yLabel
-                            : data.datasets?.[tooltipItem.datasetIndex || 0]?.data?.[tooltipItem.index || 0];
+                    label: function (tooltipItem) {
+                        let xLabel = tooltipItem.label;
+                        // tooltipItem.parsed.y can be an object or a number for pie charts
+                        const yLabel = tooltipItem.parsed.y ?? tooltipItem.parsed;
                         const yLabelStr = format && typeof yLabel === "number"
                             ? formatValue(yLabel, { format, locale })
                             : yLabel?.toLocaleString() || "";
@@ -16229,10 +16222,15 @@ function getDefaultChartJsRuntime(chart, labels, fontColor, { format, locale })
                 },
             },
         },
+    };
+    return {
+        type: chart.type,
+        options,
         data: {
             labels: labels.map(truncateLabel),
             datasets: [],
         },
+        plugins: [],
     };
 }
 function getChartLabelFormat(getters, range) {
@@ -16429,7 +16427,7 @@ function getBarConfiguration(chart, labels, localeFormat) {
     const fontColor = chartFontColor(chart.background);
     const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
     const legend = {
-        labels: { fontColor },
+        labels: { color: fontColor },
     };
     if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
         legend.display = false;
@@ -16437,42 +16435,35 @@ function getBarConfiguration(chart, labels, localeFormat) {
     else {
         legend.position = chart.legendPosition;
     }
-    config.options.legend = { ...config.options?.legend, ...legend };
+    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 = {
-        xAxes: [
-            {
-                ticks: {
-                    // x axis configuration
-                    maxRotation: 60,
-                    minRotation: 15,
-                    padding: 5,
-                    labelOffset: 2,
-                    fontColor,
-                },
+        x: {
+            ticks: {
+                padding: 5,
+                color: fontColor,
             },
-        ],
-        yAxes: [
-            {
-                position: chart.verticalAxisPosition,
-                ticks: {
-                    fontColor,
-                    // y axis configuration
-                    beginAtZero: true,
-                    callback: (value) => {
-                        return localeFormat.format
-                            ? formatValue(value, localeFormat)
-                            : value?.toLocaleString() || value;
-                    },
+        },
+        y: {
+            position: chart.verticalAxisPosition,
+            beginAtZero: true,
+            ticks: {
+                color: fontColor,
+                callback: (value) => {
+                    return localeFormat.format
+                        ? formatValue(value, localeFormat)
+                        : value?.toLocaleString() || value;
                 },
             },
-        ],
+        },
     };
     if (chart.stacked) {
-        config.options.scales.xAxes[0].stacked = true;
-        config.options.scales.yAxes[0].stacked = true;
+        // @ts-ignore chart.js type is broken
+        config.options.scales.x.stacked = true;
+        // @ts-ignore chart.js type is broken
+        config.options.scales.y.stacked = true;
     }
     return config;
 }
@@ -16676,17 +16667,18 @@ function getGaugeConfiguration(chart, locale) {
         padding: { left: 30, right: 30, top: chart.title ? 10 : 25, bottom: 25 },
     };
     config.options.needle = {
-        radiusPercentage: 2,
-        widthPercentage: 3.2,
-        lengthPercentage: 80,
-        color: "#000000",
+        width: 10,
+        borderColor: "#000000",
+        backgroundColor: "#000000",
     };
     config.options.valueLabel = {
         display: false,
-        formatter: null,
-        color: "#FFFFFF",
+        font: {
+            size: 30,
+            color: "#FFFFFF",
+        },
         backgroundColor: "#000000",
-        fontSize: 30,
+        borderColor: "#000000",
         borderRadius: 5,
         padding: {
             top: 5,
@@ -16694,7 +16686,6 @@ function getGaugeConfiguration(chart, locale) {
             bottom: 5,
             left: 5,
         },
-        bottomMarginPercentage: 5,
     };
     return config;
 }
@@ -16736,16 +16727,12 @@ function createGaugeChartRuntime(chart, getters) {
         data.push(point.value);
         backgroundColor.push(point.color);
     });
-    // There's a bug in gauge lib when the last element in `data` is 0 (i.e. when the range maximum is 0).
-    // The value wrongly fallbacks to 1 because 0 is falsy
-    // See https://github.com/haiiaaa/chartjs-gauge/pull/33
-    // https://github.com/haiiaaa/chartjs-gauge/blob/2ea50541d754d710cb30c2502fa690ac5dc27afd/src/controllers/controller.gauge.js#L52
     data.push(maxNeedleValue);
     backgroundColor.push(colors.upperColor);
     const dataRange = chart.dataRange;
     const deltaBeyondRangeLimit = needleCoverage / 30;
     let needleValue = minNeedleValue - deltaBeyondRangeLimit; // make needle value always at the minimum by default
-    let cellFormatter = null;
+    let cellFormatter = undefined;
     let displayValue = false;
     if (dataRange !== undefined) {
         const cell = getters.getEvaluatedCell({
@@ -16760,6 +16747,7 @@ function createGaugeChartRuntime(chart, getters) {
             // smaller and slightly larger than minRange and maxRange to mark the fact
             // that the needle is out of the range limits
             needleValue = clip(cell.value, minNeedleValue - deltaBeyondRangeLimit, maxNeedleValue + deltaBeyondRangeLimit);
+            // show the original value, not the clipped one
             cellFormatter = () => getters.getRangeFormattedValues(dataRange)[0];
             displayValue = true;
         }
@@ -16807,31 +16795,29 @@ const Milliseconds = {
     },
 };
 /**
- * Regex to test if a format string is a date format that can be translated into a moment time format
+ * Regex to test if a format string is a date format that can be translated into a luxon time format
  */
-const timeFormatMomentCompatible = /^((d|dd|m|mm|yyyy|yy|hh|h|ss|a)(-|:|\s|\/))*(d|dd|m|mm|yyyy|yy|hh|h|ss|a)$/i;
+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 momentFormat = convertDateFormatForMoment(labelFormat);
-    const timeUnit = getBestTimeUnitForScale(labels, momentFormat, locale);
+    const luxonFormat = convertDateFormatForLuxon(labelFormat);
+    const timeUnit = getBestTimeUnitForScale(labels, luxonFormat, locale);
     const displayFormats = {};
     if (timeUnit) {
-        displayFormats[timeUnit] = momentFormat;
+        displayFormats[timeUnit] = luxonFormat;
     }
     return {
-        parser: momentFormat,
+        parser: luxonFormat,
         displayFormats,
-        unit: timeUnit,
+        unit: timeUnit ?? false,
     };
 }
 /**
  * Convert the given date format into a format that moment.js understands.
  *
- * https://momentjs.com/docs/#/parsing/string-format/
+ * https://github.com/moment/luxon/blob/master/docs/formatting.md#table-of-tokens
  */
-function convertDateFormatForMoment(format) {
-    format = format.replace(/y/g, "Y");
-    format = format.replace(/d/g, "D");
+function convertDateFormatForLuxon(format) {
     // "m" before "h" === month, "m" after "h" === minute
     const indexH = format.indexOf("h");
     if (indexH >= 0) {
@@ -16902,6 +16888,8 @@ function getBestTimeUnitForScale(labels, format, locale) {
     return "year";
 }
 
+// @ts-ignore
+const Chart = window.Chart;
 class LineChart extends AbstractChart {
     dataSets;
     labelRange;
@@ -17031,7 +17019,7 @@ function canChartParseLabels(labelRange, getters) {
     return canBeDateChart(labelRange, getters) || canBeLinearChart(labelRange, getters);
 }
 function getChartAxisType(chart, getters) {
-    if (isDateChart(chart, getters)) {
+    if (isDateChart(chart, getters) && isLuxonTimeAdapterInstalled()) {
         return "time";
     }
     if (isLinearChart(chart, getters)) {
@@ -17054,7 +17042,7 @@ function canBeDateChart(labelRange, getters) {
         col: labelRange.zone.left,
         row: labelRange.zone.top,
     }).format;
-    return Boolean(labelFormat && timeFormatMomentCompatible.test(labelFormat));
+    return Boolean(labelFormat && timeFormatLuxonCompatible.test(labelFormat));
 }
 function canBeLinearChart(labelRange, getters) {
     if (!labelRange) {
@@ -17074,10 +17062,11 @@ function getLineConfiguration(chart, labels, localeFormat) {
     const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
     const legend = {
         labels: {
-            fontColor,
+            color: fontColor,
             generateLabels(chart) {
+                // color the legend labels with the dataset color, without any transparency
                 const { data } = chart;
-                const labels = window.Chart.defaults.global.legend.labels.generateLabels(chart);
+                const labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
                 for (const [index, label] of labels.entries()) {
                     label.fillStyle = data.datasets[index].borderColor;
                 }
@@ -17091,41 +17080,33 @@ function getLineConfiguration(chart, labels, localeFormat) {
     else {
         legend.position = chart.legendPosition;
     }
-    config.options.legend = { ...config.options?.legend, ...legend };
+    Object.assign(config.options.plugins.legend || {}, legend);
     config.options.layout = {
         padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
     };
     config.options.scales = {
-        xAxes: [
-            {
-                ticks: {
-                    // x axis configuration
-                    maxRotation: 60,
-                    minRotation: 15,
-                    padding: 5,
-                    labelOffset: 2,
-                    fontColor,
-                },
+        x: {
+            ticks: {
+                padding: 5,
+                color: fontColor,
             },
-        ],
-        yAxes: [
-            {
-                position: chart.verticalAxisPosition,
-                ticks: {
-                    fontColor,
-                    // y axis configuration
-                    beginAtZero: true,
-                    callback: (value) => {
-                        return localeFormat.format
-                            ? formatValue(value, localeFormat)
-                            : value?.toLocaleString() || value;
-                    },
+        },
+        y: {
+            position: chart.verticalAxisPosition,
+            beginAtZero: true,
+            ticks: {
+                color: fontColor,
+                callback: (value) => {
+                    return localeFormat.format
+                        ? formatValue(value, localeFormat)
+                        : value?.toLocaleString() || value;
                 },
             },
-        ],
+        },
     };
-    if (chart.stacked) {
-        config.options.scales.yAxes[0].stacked = true;
+    if (chart.stacked && config.options?.scales?.y) {
+        // @ts-ignore chart.js type is wrong
+        config.options.scales.y.stacked = true;
     }
     return config;
 }
@@ -17152,15 +17133,18 @@ function createLineChartRuntime(chart, getters) {
     const config = getLineConfiguration(chart, labels, localeFormat);
     const labelFormat = getChartLabelFormat(getters, chart.labelRange);
     if (axisType === "time") {
-        config.options.scales.xAxes[0].type = "time";
-        config.options.scales.xAxes[0].time = getChartTimeOptions(labels, labelFormat, locale);
-        config.options.scales.xAxes[0].ticks.maxTicksLimit = 15;
+        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.xAxes[0].type = "linear";
-        config.options.scales.xAxes[0].ticks.callback = (value) => formatValue(value, localeFormat);
-        config.options.tooltips.callbacks.title = (tooltipItem) => {
-            return formatValue(tooltipItem[0]?.xLabel || "", localeFormat);
+        config.options.scales.x.type = "linear";
+        config.options.scales.x.ticks.callback = (value) => formatValue(value, { format: labelFormat, locale });
+        config.options.plugins.tooltip.callbacks.title = (tooltipItem) => {
+            return formatValue(tooltipItem[0]?.label || "", localeFormat);
         };
     }
     const colors = new ChartColors();
@@ -17178,7 +17162,7 @@ function createLineChartRuntime(chart, getters) {
         const dataset = {
             label,
             data,
-            lineTension: 0,
+            tension: 0,
             borderColor: color,
             backgroundColor,
             pointBackgroundColor: color,
@@ -17187,6 +17171,22 @@ function createLineChartRuntime(chart, getters) {
         config.data.datasets.push(dataset);
     }
     return { chartJsConfig: config, background: chart.background || BACKGROUND_CHART_COLOR };
+}
+let missingTimeAdapterAlreadyWarned = false;
+function isLuxonTimeAdapterInstalled() {
+    // @ts-ignore
+    if (!window.Chart) {
+        return false;
+    }
+    // @ts-ignore
+    const adapter = new window.Chart._adapters._date({});
+    // @ts-ignore
+    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;
 }
 
 class PieChart extends AbstractChart {
@@ -17291,7 +17291,7 @@ function getPieConfiguration(chart, labels, localeFormat) {
     const fontColor = chartFontColor(chart.background);
     const config = getDefaultChartJsRuntime(chart, labels, fontColor, localeFormat);
     const legend = {
-        labels: { fontColor },
+        labels: { color: fontColor },
     };
     if ((!chart.labelRange && chart.dataSets.length === 1) || chart.legendPosition === "none") {
         legend.display = false;
@@ -17299,12 +17299,12 @@ function getPieConfiguration(chart, labels, localeFormat) {
     else {
         legend.position = chart.legendPosition;
     }
-    config.options.legend = { ...config.options?.legend, ...legend };
+    Object.assign(config.options.plugins.legend || {}, legend);
     config.options.layout = {
         padding: { left: 20, right: 20, top: chart.title ? 10 : 25, bottom: 10 },
     };
-    config.options.tooltips.callbacks.title = function (tooltipItems, data) {
-        return data.datasets[tooltipItems[0].datasetIndex].label;
+    config.options.plugins.tooltip.callbacks.title = function (tooltipItems) {
+        return tooltipItems[0].dataset.label;
     };
     return config;
 }
@@ -18068,6 +18068,278 @@ function getSmartChartDefinition(zone, getters) {
     };
 }
 
+// @ts-ignore
+if (window.Chart) {
+    // @ts-ignore
+    const DoughnutController = window.Chart?.DoughnutController;
+    /**
+     * Example :
+     * const chart = new Chart(ctx, {
+     *   type: "gauge",
+     *   data: {
+     *     datasets: [
+     *       {
+     *         borderWidth: 5,
+     *         data: [10, 20, 10],
+     *         value: 23,
+     *         backgroundColor: [
+     *           "#dc3545", //red
+     *           "#ffc107", //orange
+     *           "#28a745", //green
+     *         ],
+     *       },
+     *     ],
+     *   },
+     *   options: {
+     *     plugins: {
+     *       title: {
+     *         display: true,
+     *         text: "Custom Chart Title",
+     *         padding: {
+     *           top: 10,
+     *           bottom: 30,
+     *         },
+     *         font : {
+     *           size : 30
+     *         }
+     *       },
+     *     },
+     *     valueLabel: {
+     *       display: true,
+     *       format: (value) => {
+     *         return value.toFixed(2) + "%";
+     *       },
+     *       font : {
+     *         size : 35,
+     *         family : "Arial",
+     *         color : "#FC0",
+     *       },
+     *       backgroundColor : "#ccc",
+     *       borderColor : "#090",
+     *       borderRadius : 50
+     *     },
+     *     needle: {
+     *       display: true,
+     *       width: 50,
+     *       color: "#DC5",
+     *       backgroundColor : "#ccc",
+     *     },
+     *   },
+     * });
+     */
+    class GaugeController extends DoughnutController {
+        static id = "gauge";
+        static defaults = {
+            ...DoughnutController.defaults,
+            circumference: 180,
+            rotation: 270,
+        };
+        static overrides = {
+            aspectRatio: 2,
+            plugins: {
+                legend: {
+                    display: false,
+                },
+                tooltip: {
+                    enabled: false,
+                },
+            },
+        };
+        get chartHeight() {
+            return Math.abs(this.chart.chartArea.top - this.chart.chartArea.bottom);
+        }
+        get chartWidth() {
+            return Math.abs(this.chart.chartArea.left - this.chart.chartArea.right);
+        }
+        get needleOptions() {
+            const { config } = this.chart;
+            const options = config.options;
+            // @ts-ignore
+            return options?.needle || {};
+        }
+        get valueLabelOptions() {
+            const { config } = this.chart;
+            const options = config.options;
+            // @ts-ignore
+            return options?.valueLabel || {};
+        }
+        get minValue() {
+            const dataset = this.getDataset();
+            // @ts-ignore
+            return dataset.minValue || 0;
+        }
+        getValueAngleInPercent(value) {
+            const dataset = this.getDataset();
+            const data = dataset.data || [];
+            const max = Math.max(...data);
+            const min = this.minValue;
+            return (value - min) / (max - min);
+        }
+        drawValueLabel(params) {
+            const { ctx } = this.chart;
+            if (this.valueLabelOptions.display === false) {
+                return;
+            }
+            // draw background rectangle
+            ctx.save();
+            ctx.beginPath();
+            ctx.fillStyle = params.valueLabel.backgroundColor;
+            ctx.strokeStyle = params.valueLabel.borderColor;
+            ctx.roundRect(params.valueLabel.rect.x, params.valueLabel.rect.y, params.valueLabel.rect.width, params.valueLabel.rect.height, params.valueLabel.borderRadius);
+            ctx.stroke();
+            ctx.fill();
+            // draw value text
+            ctx.textAlign = "center";
+            ctx.textBaseline = "middle";
+            ctx.font = params.valueLabel.font;
+            ctx.fillStyle = params.valueLabel.textColor;
+            ctx.fillText(params.valueLabel.valueText, params.valueLabel.textPosition.x, params.valueLabel.textPosition.y);
+            ctx.restore();
+        }
+        drawNeedle(params) {
+            const { ctx } = this.chart;
+            if (this.needleOptions.display === false) {
+                return;
+            }
+            // translate & rotate next paths
+            ctx.save();
+            ctx.translate(params.needle.position.x, params.needle.position.y);
+            ctx.rotate(-Math.PI / 2 + Math.PI * params.needle.percent);
+            // draw circle
+            ctx.beginPath();
+            ctx.fillStyle = params.needle.backgroundColor;
+            ctx.strokeStyle = params.needle.borderColor;
+            ctx.ellipse(0, 0, params.needle.width / 2, params.needle.width / 2, 0, 0, 2 * Math.PI);
+            ctx.fill();
+            ctx.stroke();
+            ctx.closePath();
+            // draw needle
+            ctx.fillStyle = params.needle.backgroundColor;
+            ctx.strokeStyle = params.needle.borderColor;
+            ctx.beginPath();
+            ctx.moveTo(-params.needle.width / 2, 0);
+            ctx.lineTo(0, -params.needle.height + 10);
+            ctx.lineTo(+params.needle.width / 2, 0);
+            ctx.closePath();
+            ctx.fill();
+            ctx.stroke();
+            ctx.restore();
+        }
+        computeRenderingParams() {
+            const { ctx, config } = this.chart;
+            const options = config.options;
+            options.layout = options.layout || {};
+            options.layout.padding = options.layout.padding || {};
+            const formatter = this.valueLabelOptions.formatter;
+            const fmt = typeof formatter === "function" ? formatter : (value) => value;
+            const dataset = this.getDataset();
+            // @ts-ignore value is a custom property for gauge charts
+            const value = dataset.value || 0;
+            const valueText = fmt(value).toString();
+            const percent = this.getValueAngleInPercent(value);
+            const fontFamily = this.valueLabelOptions.font?.family || "Arial";
+            const optionsFontSize = this.valueLabelOptions.font?.size || 0;
+            const fontSize = optionsFontSize >= 1 ? optionsFontSize : 30;
+            const font = `${fontSize}px ${fontFamily}`;
+            const padding = {
+                right: 0,
+                left: 0,
+                top: 0,
+                bottom: 0,
+                ...this.valueLabelOptions.padding,
+            };
+            padding.left = padding.left >= 0 ? padding.left : 10;
+            padding.right = padding.right >= 0 ? padding.right : 10;
+            padding.top = padding.top >= 0 ? padding.top : 10;
+            padding.bottom = padding.bottom >= 0 ? padding.bottom : 10;
+            const chartArea = this.chart.chartArea;
+            const offsetX = this.offsetX || 0;
+            const offsetY = this.offsetY || 0;
+            const centerX = (chartArea.left + chartArea.right) / 2;
+            const centerY = (chartArea.top + chartArea.bottom) / 2;
+            const center = {
+                x: centerX + offsetX,
+                y: centerY + offsetY,
+            };
+            const textPosition = {
+                x: center.x,
+                y: center.y,
+            };
+            ctx.save();
+            ctx.font = font;
+            const metrics = ctx.measureText(valueText);
+            ctx.restore();
+            const textHeight = metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent;
+            return {
+                needle: {
+                    borderColor: this.needleOptions.borderColor || "#000",
+                    backgroundColor: this.needleOptions.backgroundColor || "#000",
+                    width: this.needleOptions.width || 10,
+                    height: Math.min(this.chartHeight, this.chartWidth / 2),
+                    position: {
+                        x: textPosition.x,
+                        y: textPosition.y,
+                    },
+                    percent,
+                },
+                valueLabel: {
+                    textColor: this.valueLabelOptions.font?.color || "#FFF",
+                    backgroundColor: this.valueLabelOptions.backgroundColor || "#000",
+                    borderColor: this.valueLabelOptions.borderColor || "#000",
+                    borderRadius: this.valueLabelOptions.borderRadius || 10,
+                    rect: {
+                        x: center.x - metrics.width / 2 - padding.left,
+                        y: center.y + textHeight / 2 + padding.top,
+                        width: metrics.width + padding.left + padding.right,
+                        height: -(textHeight + 6 + padding.top + padding.bottom),
+                    },
+                    valueText,
+                    textPosition,
+                    textHeight,
+                    font,
+                },
+            };
+        }
+        draw() {
+            super.draw();
+            const params = this.computeRenderingParams();
+            this.drawNeedle(params);
+            this.drawValueLabel(params);
+        }
+        updateElements(elements, start, count, mode) {
+            super.updateElements(elements, start, count, mode);
+            const dataset = this.getDataset();
+            const data = this.getDataset().data;
+            // @ts-ignore
+            const minValue = dataset.minValue;
+            // @ts-ignore
+            const rotation = this.chart.options.rotation || 0;
+            // @ts-ignore
+            const circumference = this.chart.options.circumference || 0;
+            for (let arcIndex = 0; arcIndex < data.length; arcIndex++) {
+                const previousValue = arcIndex === 0 ? minValue : data[arcIndex - 1];
+                const startAngleInPercent = this.getValueAngleInPercent(previousValue);
+                const endAngleInPercent = this.getValueAngleInPercent(data[arcIndex]);
+                const startAngle = degreesToRadians(rotation + circumference * startAngleInPercent) - Math.PI / 2;
+                const endAngle = degreesToRadians(rotation + circumference * endAngleInPercent) - Math.PI / 2;
+                const arcCircumference = endAngle - startAngle;
+                const arc = elements[arcIndex];
+                const propertiesUpdates = {
+                    startAngle,
+                    endAngle,
+                    circumference: arcCircumference,
+                };
+                this.updateElement(arc, arcIndex, propertiesUpdates, mode);
+            }
+        }
+    }
+    function degreesToRadians(degrees) {
+        return (degrees * Math.PI) / 180;
+    }
+    // @ts-ignore
+    window.Chart.register(GaugeController);
+}
+
 //------------------------------------------------------------------------------
 // Helpers
 //------------------------------------------------------------------------------
@@ -36417,7 +36689,8 @@ class EvaluationChartPlugin extends UIPlugin {
             if (!chart) {
                 throw new Error(`No chart for the given id: ${figureId}`);
             }
-            this.history.update("charts", figureId, this.createRuntimeChart(chart));
+            const runtime = this.createRuntimeChart(chart);
+            this.history.update("charts", figureId, runtime);
         }
         return this.charts[figureId];
     }
@@ -49505,7 +49778,14 @@ function addCellWiseConditionalFormatting(dxfs // cell-wise CF
   `;
 }
 
-const TABLE_DEFAULT_STYLE = escapeXml /*xml*/ `<tableStyleInfo name="TableStyleLight8" showFirstColumn="0" showLastColumn="0" showRowStripes="0" showColumnStripes="0"/>`;
+const TABLE_DEFAULT_ATTRS = [
+    ["name", "TableStyleLight8"],
+    ["showFirstColumn", "0"],
+    ["showLastColumn", "0"],
+    ["showRowStripes", "0"],
+    ["showColumnStripes", "0"],
+];
+const TABLE_DEFAULT_STYLE = escapeXml /*xml*/ `<tableStyleInfo ${formatAttributes(TABLE_DEFAULT_ATTRS)}/>`;
 function createTable(table, tableId, sheetData) {
     const tableAttributes = [
         ["id", tableId],
@@ -50590,6 +50870,6 @@ const constants = {
 export { AbstractChart, CommandResult, CorePlugin, DispatchResult, EvaluationError, Model, Registry, Revision, SPREADSHEET_DIMENSIONS, Spreadsheet, UIPlugin, __info__, addFunction, astToFormula, compile, components, constants, convertAstNodes, coreTypes, findCellInNewZone, functionCache, helpers, invalidateCFEvaluationCommands, invalidateDependenciesCommands, invalidateEvaluationCommands, iterateAstNodes, links, load, parse, readonlyAllowedCommands, registries, setDefaultSheetViewSize, setTranslationMethod, tokenize };
 
 
-__info__.version = '16.5.0-alpha.3';
-__info__.date = '2023-08-09T09:07:55.435Z';
-__info__.hash = 'b0e8fd5';
+__info__.version = '16.5.0-alpha.4';
+__info__.date = '2023-08-10T09:39:12.478Z';
+__info__.hash = 'c8db018';