@fluentui/react-charting 5.25.4 → 5.25.6

package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -1,7 +1,7 @@
 define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-shape", "./PlotlyColorAdapter", "d3-color", "@fluentui/react"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_shape_1, PlotlyColorAdapter_1, d3_color_1, react_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.projectPolarToCartesian = exports.transformPlotlyJsonToFunnelChartProps = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToGanttChartProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.transformPlotlyJsonToAnnotationChartProps = exports.normalizeObjectArrayForGVBC = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
+    exports.DEFAULT_POLAR_SUBPLOT = exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.transformPlotlyJsonToPolarChartProps = exports.transformPlotlyJsonToFunnelChartProps = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToGanttChartProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.transformPlotlyJsonToAnnotationChartProps = exports.normalizeObjectArrayForGVBC = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
     exports.findArrayAttributes = findArrayAttributes;
     exports.NON_PLOT_KEY_PREFIX = 'nonplot_';
     exports.SINGLE_REPEAT = 'repeat(1, 1fr)';
@@ -44,12 +44,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         },
     };
     function getTitles(layout) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        var titles = {
-            chartTitle: typeof (layout === null || layout === void 0 ? void 0 : layout.title) === 'string' ? layout.title : (_b = (_a = layout === null || layout === void 0 ? void 0 : layout.title) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : '',
-            xAxisTitle: typeof ((_c = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _c === void 0 ? void 0 : _c.title) === 'string' ? (_d = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _d === void 0 ? void 0 : _d.title : (_g = (_f = (_e = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _e === void 0 ? void 0 : _e.title) === null || _f === void 0 ? void 0 : _f.text) !== null && _g !== void 0 ? _g : '',
-            yAxisTitle: typeof ((_h = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _h === void 0 ? void 0 : _h.title) === 'string' ? (_j = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _j === void 0 ? void 0 : _j.title : (_m = (_l = (_k = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _k === void 0 ? void 0 : _k.title) === null || _l === void 0 ? void 0 : _l.text) !== null && _m !== void 0 ? _m : '',
-        };
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        var titleObj = layout === null || layout === void 0 ? void 0 : layout.title;
+        var chartTitle = typeof titleObj === 'string' ? titleObj : (_a = titleObj === null || titleObj === void 0 ? void 0 : titleObj.text) !== null && _a !== void 0 ? _a : '';
+        var titleFont = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.font : undefined;
+        var titleXAnchor = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.xanchor : undefined;
+        var titleYAnchor = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.yanchor : undefined;
+        var titlePad = typeof titleObj === 'object' ? titleObj === null || titleObj === void 0 ? void 0 : titleObj.pad : undefined;
+        var titleStyles = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (titleFont ? { titleFont: titleFont } : {})), (titleXAnchor ? { titleXAnchor: titleXAnchor } : {})), (titleYAnchor ? { titleYAnchor: titleYAnchor } : {})), (titlePad ? { titlePad: titlePad } : {}));
+        var titles = tslib_1.__assign(tslib_1.__assign({ chartTitle: chartTitle }, (Object.keys(titleStyles).length > 0 ? { titleStyles: titleStyles } : {})), { xAxisTitle: typeof ((_b = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _b === void 0 ? void 0 : _b.title) === 'string' ? (_c = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _c === void 0 ? void 0 : _c.title : (_f = (_e = (_d = layout === null || layout === void 0 ? void 0 : layout.xaxis) === null || _d === void 0 ? void 0 : _d.title) === null || _e === void 0 ? void 0 : _e.text) !== null && _f !== void 0 ? _f : '', yAxisTitle: typeof ((_g = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _g === void 0 ? void 0 : _g.title) === 'string' ? (_h = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _h === void 0 ? void 0 : _h.title : (_l = (_k = (_j = layout === null || layout === void 0 ? void 0 : layout.yaxis) === null || _j === void 0 ? void 0 : _j.title) === null || _k === void 0 ? void 0 : _k.text) !== null && _l !== void 0 ? _l : '', xAxisAnnotation: chartTitle });
         return titles;
     }
     var getXAxisTickFormat = function (series, layout) {
@@ -81,6 +84,18 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return {};
     };
+    var getXMinMaxValues = function (series, layout) {
+        var _a;
+        var range = (_a = getXAxisProperties(series, layout)) === null || _a === void 0 ? void 0 : _a.range;
+        if (range && range.length === 2) {
+            return {
+                xMinValue: range[0],
+                xMaxValue: range[1],
+                showRoundOffXTickValues: false,
+            };
+        }
+        return {};
+    };
     var getYAxisProperties = function (series, layout) {
         return layout === null || layout === void 0 ? void 0 : layout.yaxis;
     };
@@ -208,6 +223,64 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return x;
     };
     exports.resolveXAxisPoint = resolveXAxisPoint;
+    /**
+     * Formats text values according to the texttemplate specification
+     * Supports D3 format specifiers within %{text:format} patterns
+     * @param textValue The raw text value to format
+     * @param textTemplate The template string (e.g., "%{text:.1f}%", "%{text:.2%}", "%{text:,.0f}")
+     * @param index Optional index for array-based templates
+     * @returns Formatted text string
+     *
+     * Examples:
+     * - "%{text:.1f}%" → Formats number with 1 decimal place and adds % suffix
+     * - "%{text:.2%}" → Formats as percentage with 2 decimal places
+     * - "%{text:,.0f}" → Formats with thousands separator and no decimals
+     * - "%{text:$,.2f}" → Formats as currency with thousands separator and 2 decimals
+     */
+    var formatTextWithTemplate = function (textValue, textTemplate, index) {
+        if (!textTemplate) {
+            return String(textValue);
+        }
+        var numVal = typeof textValue === 'number' ? textValue : parseFloat(String(textValue));
+        if (isNaN(numVal)) {
+            return String(textValue);
+        }
+        var template = typeof textTemplate === 'string' ? textTemplate : textTemplate[index || 0] || '';
+        // Match Plotly's texttemplate pattern: %{text:format} or %{text}
+        // Can be followed by any literal text like %, $, etc.
+        var plotlyPattern = /%\{text(?::([^}]+))?\}(.*)$/;
+        var match = template.match(plotlyPattern);
+        if (match) {
+            var formatSpec = match[1]; // The format specifier (e.g., ".1f", ".2%", ",.0f") or undefined
+            var suffix = match[2]; // Any text after the closing brace (e.g., "%", " units")
+            // If no format specifier is provided (e.g., %{text}%), try to infer from suffix
+            if (!formatSpec) {
+                // Check if suffix starts with % - assume simple percentage with 1 decimal
+                if (suffix.startsWith('%')) {
+                    return "".concat(numVal.toFixed(1)).concat(suffix);
+                }
+                // No format specifier, just return the number with the suffix
+                return "".concat(numVal).concat(suffix);
+            }
+            try {
+                // Use D3 format function to apply the format specifier
+                var formatter = (0, d3_format_1.format)(formatSpec);
+                var formattedValue = formatter(numVal);
+                return "".concat(formattedValue).concat(suffix);
+            }
+            catch (error) {
+                // Try to extract precision for basic fallback
+                var precisionMatch = formatSpec.match(/\.(\d+)[f%]/);
+                var precision = precisionMatch ? parseInt(precisionMatch[1], 10) : 2;
+                // Check if it's a percentage format
+                if (formatSpec.includes('%')) {
+                    return "".concat((numVal * 100).toFixed(precision), "%").concat(suffix);
+                }
+                return "".concat(numVal.toFixed(precision)).concat(suffix);
+            }
+        }
+        return String(textValue);
+    };
     /**
      * Extracts unique X-axis categories from Plotly data traces
      * @param data Array of Plotly data traces
@@ -952,7 +1025,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var innerRadius = firstData.hole
             ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2)
             : utilities_1.MIN_DONUT_RADIUS;
-        var chartTitle = getTitles(input.layout).chartTitle;
+        var _r = getTitles(input.layout), chartTitle = _r.chartTitle, titleStyles = _r.titleStyles;
         // Build anticlockwise order by keeping the first item, reversing the rest
         var legends = Object.keys(mapLegendToDataPoint);
         var reorderedEntries = legends.length > 1
@@ -963,34 +1036,26 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 .reverse()
                 .map(function (key) { return [key, mapLegendToDataPoint[key]]; }), true)
             : legends.map(function (key) { return [key, mapLegendToDataPoint[key]]; });
-        return {
-            data: {
+        return tslib_1.__assign({ data: {
                 chartTitle: chartTitle,
                 chartData: reorderedEntries.map(function (_a) {
                     var v = _a[1];
                     return v;
                 }),
-            },
-            hideLegend: isMultiPlot || ((_p = input.layout) === null || _p === void 0 ? void 0 : _p.showlegend) === false,
-            width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width,
-            height: height,
-            innerRadius: innerRadius,
-            hideLabels: hideLabels,
-            showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
-            roundCorners: true,
-            order: 'sorted',
-        };
+            }, hideLegend: isMultiPlot || ((_p = input.layout) === null || _p === void 0 ? void 0 : _p.showlegend) === false, width: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.width, height: height, innerRadius: innerRadius, hideLabels: hideLabels, showLabelsInPercent: firstData.textinfo
+                ? ['percent', 'label+percent', 'percent+label'].includes(firstData.textinfo)
+                : true, roundCorners: true, order: 'sorted' }, (titleStyles ? { titleStyles: titleStyles } : {}));
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
     var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e;
         var mapXToDataPoints = {};
         var yMaxValue = 0;
         var yMinValue = 0;
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
-        var _g = getLegendProps(input.data, input.layout, isMultiPlot), legends = _g.legends, hideLegend = _g.hideLegend;
+        var _f = getLegendProps(input.data, input.layout, isMultiPlot), legends = _f.legends, hideLegend = _f.hideLegend;
         var colorScale = undefined;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
         var resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(input.data, input.layout).x));
@@ -1006,6 +1071,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 var rangeStart = _a[0], rangeEnd = _a[1];
                 var rangeXValues = series.x.slice(rangeStart, rangeEnd);
                 var rangeYValues = series.y.slice(rangeStart, rangeEnd);
+                var textValues = Array.isArray(series.text)
+                    ? series.text.slice(rangeStart, rangeEnd)
+                    : typeof series.text === 'string'
+                        ? series.text
+                        : undefined;
                 rangeXValues.forEach(function (x, index2) {
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                     if (!mapXToDataPoints[x]) {
@@ -1025,13 +1095,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index2);
                     var yVal = rangeYValues[index2];
                     var yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
+                    var barLabel = Array.isArray(textValues) ? textValues[index2] : textValues;
+                    // Apply texttemplate formatting if specified
+                    if (barLabel && series.texttemplate) {
+                        barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index2);
+                    }
                     if (series.type === 'bar') {
-                        mapXToDataPoints[x].chartData.push({
-                            legend: legend,
-                            data: yVal,
-                            color: (_h = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color,
-                            yAxisCalloutData: yAxisCalloutData,
-                        });
+                        mapXToDataPoints[x].chartData.push(tslib_1.__assign({ legend: legend, data: yVal, color: (_h = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color, yAxisCalloutData: yAxisCalloutData }, (barLabel ? { barLabel: String(barLabel) } : {})));
                         if (typeof yVal === 'number') {
                             yMaxValue = Math.max(yMaxValue, yVal);
                         }
@@ -1064,6 +1134,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var _a, _b, _c;
             var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
             var resolveX = function (val) {
+                if (shape.xref === 'x domain') {
+                    if (val === 0) {
+                        return xCategories[0];
+                    }
+                    if (val === 1) {
+                        return xCategories[xCategories.length - 1];
+                    }
+                }
                 if (typeof val === 'number' && Array.isArray(xCategories)) {
                     if (xCategories[val] !== undefined) {
                         return xCategories[val];
@@ -1114,7 +1192,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         });
         var vsbcData = Object.values(mapXToDataPoints);
         var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, height: (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_f = vsbcData[0]) === null || _f === void 0 ? void 0 : _f.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, height: (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundedTicks: true }), getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
     var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, 
@@ -1173,12 +1251,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                             : (0, PlotlyColorAdapter_1.resolveColor)(extractedBarColors_1, xIndex, legend, colorMap, (_h = (_g = (_f = processedInput.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
                         var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, xIndex);
                         var yVal = series.y[xIndex];
-                        return {
-                            x: x.toString(),
-                            y: yVal,
-                            yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
-                            color: (_j = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
-                        };
+                        // Extract text value for barLabel
+                        var barLabel = Array.isArray(series.text) ? series.text[xIndex] : series.text;
+                        // Apply texttemplate formatting if specified
+                        if (barLabel && series.texttemplate) {
+                            barLabel = formatTextWithTemplate(barLabel, series.texttemplate, xIndex);
+                        }
+                        return tslib_1.__assign({ x: x.toString(), y: yVal, yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat), color: (_j = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color }, (barLabel ? { barLabel: String(barLabel) } : {}));
                     })
                         .filter(function (item) { return typeof item !== 'undefined'; }),
                     useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
@@ -1216,15 +1295,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             }
         });
         var annotations = getChartAnnotationsFromLayout(processedInput.layout, processedInput.data, isMultiPlot);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: true, showYAxisLables: true }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout)), (annotations ? { annotations: annotations } : {}));
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ dataV2: gvbcDataV2, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, roundedTicks: true, showYAxisLables: true }), getXMinMaxValues(processedInput.data[0], processedInput.layout)), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout)), getAxisTickProps(processedInput.data, processedInput.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
     var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     colorMap, colorwayType, isDarkTheme) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c;
         var vbcData = [];
-        var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
+        var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         var colorScale = undefined;
         input.data.forEach(function (series, seriesIdx) {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -1273,13 +1352,18 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
                 var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index);
                 var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
-                vbcData.push(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_h = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color }, (isXString
+                // Handle text values and texttemplate formatting for histogram bins
+                var barLabel = Array.isArray(series.text) ? series.text[index] : series.text;
+                if (barLabel && series.texttemplate) {
+                    barLabel = formatTextWithTemplate(barLabel, series.texttemplate, index);
+                }
+                vbcData.push(tslib_1.__assign(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_h = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _h !== void 0 ? _h : color }, (isXString
                     ? {}
-                    : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
+                    : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })), (barLabel ? { barLabel: String(barLabel) } : {})));
             });
         });
         var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, supportNegativeData: true, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = vbcData[0]) === null || _d === void 0 ? void 0 : _d.x) === 'string', showYAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), (annotations ? { annotations: annotations } : {}));
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, supportNegativeData: true, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true, roundedTicks: true, showYAxisLables: true }, getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), (annotations ? { annotations: annotations } : {}));
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
     var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, 
@@ -1338,9 +1422,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var mode = 'tonexty';
         var _q = getLegendProps(input.data, input.layout, isMultiPlot), legends = _q.legends, hideLegend = _q.hideLegend;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-        var xAxisType = getAxisType(input.data, getAxisObjects(input.data, input.layout).x);
-        var resolveXValue = getAxisValueResolver(xAxisType);
-        var shouldWrapLabels = xAxisType === 'category';
+        var resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(input.data, input.layout).x));
         var chartData = input.data
             .map(function (series, index) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -1475,12 +1557,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             scatterChartData: tslib_1.__spreadArray(tslib_1.__spreadArray([], chartData, true), lineShape, true),
         };
         var annotations = getChartAnnotationsFromLayout(input.layout, input.data, isMultiPlot);
-        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, wrapXAxisLables: shouldWrapLabels, showYAxisLables: true }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
+        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, showYAxisLables: true, roundedTicks: true }), getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout)), (annotations ? { annotations: annotations } : {}));
         if (isAreaChart) {
             return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
         }
         else {
-            return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, roundedTicks: true, enableReflow: false }, commonProps), yMinMax), (isScatterChart
+            return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, enableReflow: false }, commonProps), yMinMax), (isScatterChart
                 ? tslib_1.__assign({ showYAxisLablesTooltip: true }, getAxisCategoryOrderProps(input.data, input.layout)) : {})), (!isScatterChart &&
                 (function () {
                     var bars = mapColorFillBars(input.layout);
@@ -1503,7 +1585,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var legend = legends[index];
             return series.y
                 .map(function (yValue, i) {
-                var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
                 if ((0, chart_utilities_1.isInvalidValue)(yValue)) {
                     return null;
                 }
@@ -1514,12 +1596,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         : 0)
                     : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
                 var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
-                return {
-                    x: (0, chart_utilities_1.isInvalidValue)((_h = series.x) === null || _h === void 0 ? void 0 : _h[i]) ? 0 : series.x[i],
-                    y: yValue,
-                    legend: legend,
-                    color: (_j = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
-                };
+                return tslib_1.__assign({ x: (0, chart_utilities_1.isInvalidValue)((_h = series.x) === null || _h === void 0 ? void 0 : _h[i]) ? 0 : series.x[i], y: yValue, legend: legend, color: (_j = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color }, (((_k = series.text) === null || _k === void 0 ? void 0 : _k[i]) ? { barLabel: series.text[i].toString() } : {}));
             })
                 .filter(function (point) { return point !== null; });
         })
@@ -1532,9 +1609,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var scalingFactor = 0.01;
         var gapFactor = 1 / (1 + scalingFactor * numberOfRows);
         var barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: chartData, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
                 ? (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.yaxis2) === null || _m === void 0 ? void 0 : _m.title
-                : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
+                : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, roundedTicks: true }, getXMinMaxValues(input.data[0], input.layout)), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getBarProps(input.data, input.layout, true)), getAxisTickProps(input.data, input.layout));
     };
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
     var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, 
@@ -1611,34 +1688,72 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     colorMap, colorwayType, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11;
         var firstData = input.data[0];
         var heatmapDataPoints = [];
         var zMin = Number.POSITIVE_INFINITY;
         var zMax = Number.NEGATIVE_INFINITY;
+        // Build a 2D array of annotations based on their grid position
+        var annotationGrid = [];
+        var rawAnnotations = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.annotations;
+        if (rawAnnotations) {
+            var annotationsArray = Array.isArray(rawAnnotations) ? rawAnnotations : [rawAnnotations];
+            // Collect all unique x and y values from valid annotations
+            var xSet_1 = new Set();
+            var ySet_1 = new Set();
+            var validAnnotations_1 = [];
+            annotationsArray.forEach(function (a) {
+                if (a &&
+                    typeof a.x === 'number' &&
+                    typeof a.y === 'number' &&
+                    typeof a.text === 'string' &&
+                    (a.xref === 'x' || a.xref === undefined) &&
+                    (a.yref === 'y' || a.yref === undefined)) {
+                    xSet_1.add(a.x);
+                    ySet_1.add(a.y);
+                    validAnnotations_1.push({ x: a.x, y: a.y, text: cleanText(a.text) });
+                }
+            });
+            if (validAnnotations_1.length > 0) {
+                // Get sorted unique x and y values
+                var xValues_1 = Array.from(xSet_1).sort(function (a, b) { return a - b; });
+                var yValues_1 = Array.from(ySet_1).sort(function (a, b) { return a - b; });
+                // Initialize 2D grid and populate
+                validAnnotations_1.forEach(function (annotation) {
+                    var xIdx = xValues_1.indexOf(annotation.x);
+                    var yIdx = yValues_1.indexOf(annotation.y);
+                    if (!annotationGrid[yIdx]) {
+                        annotationGrid[yIdx] = [];
+                    }
+                    annotationGrid[yIdx][xIdx] = annotation.text;
+                });
+            }
+        }
+        // Helper function to get annotation from 2D grid by index
+        var getAnnotationByIndex = function (xIdx, yIdx) { var _a; return (_a = annotationGrid[yIdx]) === null || _a === void 0 ? void 0 : _a[xIdx]; };
         if (firstData.type === 'histogram2d') {
-            var xValues_1 = [];
-            var yValues_1 = [];
+            var xValues_2 = [];
+            var yValues_2 = [];
             var zValues_1 = [];
-            (_a = firstData.x) === null || _a === void 0 ? void 0 : _a.forEach(function (xVal, index) {
+            (_b = firstData.x) === null || _b === void 0 ? void 0 : _b.forEach(function (xVal, index) {
                 var _a, _b;
                 var zVal = (_a = (0, exports.getNumberAtIndexOrDefault)(firstData.z, index)) !== null && _a !== void 0 ? _a : 0;
                 if ((0, chart_utilities_1.isInvalidValue)(xVal) || (0, chart_utilities_1.isInvalidValue)((_b = firstData.y) === null || _b === void 0 ? void 0 : _b[index])) {
                     return;
                 }
-                xValues_1.push(xVal);
-                yValues_1.push(firstData.y[index]);
+                xValues_2.push(xVal);
+                yValues_2.push(firstData.y[index]);
                 zValues_1.push(zVal);
             });
-            var isXString_1 = (0, chart_utilities_1.isStringArray)(xValues_1);
-            var isYString_1 = (0, chart_utilities_1.isStringArray)(yValues_1);
-            var xBins_1 = createBins(xValues_1, (_b = firstData.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.size);
-            var yBins_1 = createBins(yValues_1, (_e = firstData.ybins) === null || _e === void 0 ? void 0 : _e.start, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.end, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.size);
+            var isXString_1 = (0, chart_utilities_1.isStringArray)(xValues_2);
+            var isYString_1 = (0, chart_utilities_1.isStringArray)(yValues_2);
+            var xBins_1 = createBins(xValues_2, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.start, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.end, (_e = firstData.xbins) === null || _e === void 0 ? void 0 : _e.size);
+            var yBins_1 = createBins(yValues_2, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.start, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.end, (_h = firstData.ybins) === null || _h === void 0 ? void 0 : _h.size);
             var zBins_1 = yBins_1.map(function () { return xBins_1.map(function () { return []; }); });
             var total_1 = 0;
-            xValues_1.forEach(function (xVal, index) {
+            xValues_2.forEach(function (xVal, index) {
                 var xBinIdx = findBinIndex(xBins_1, xVal, isXString_1);
-                var yBinIdx = findBinIndex(yBins_1, yValues_1[index], isYString_1);
+                var yBinIdx = findBinIndex(yBins_1, yValues_2[index], isYString_1);
                 if (xBinIdx !== -1 && yBinIdx !== -1) {
                     zBins_1[yBinIdx][xBinIdx].push(zValues_1[index]);
                 }
@@ -1653,11 +1768,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             xBins_1.forEach(function (xBin, xIdx) {
                 yBins_1.forEach(function (yBin, yIdx) {
                     var zVal = calculateHistNorm(firstData.histnorm, z_1[yIdx][xIdx], total_1, isXString_1 ? xBin.length : getBinSize(xBin), isYString_1 ? yBin.length : getBinSize(yBin));
+                    var annotationText = getAnnotationByIndex(xIdx, yIdx);
                     heatmapDataPoints.push({
                         x: isXString_1 ? xBin.join(', ') : getBinCenter(xBin),
                         y: isYString_1 ? yBin.join(', ') : getBinCenter(yBin),
                         value: zVal,
-                        rectText: zVal,
+                        rectText: annotationText || zVal,
                     });
                     if (typeof zVal === 'number') {
                         zMin = Math.min(zMin, zVal);
@@ -1667,17 +1783,27 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             });
         }
         else {
-            (_h = firstData.x) === null || _h === void 0 ? void 0 : _h.forEach(function (xVal, xIdx) {
-                var _a;
+            // If x and y are not provided, generate indices based on z dimensions
+            var zArray_1 = firstData.z;
+            var xValues = firstData.x;
+            var yValues = firstData.y;
+            // Determine the dimensions from z array
+            var yLength_1 = (_j = zArray_1 === null || zArray_1 === void 0 ? void 0 : zArray_1.length) !== null && _j !== void 0 ? _j : 0;
+            var xLength = (_l = (_k = zArray_1 === null || zArray_1 === void 0 ? void 0 : zArray_1[0]) === null || _k === void 0 ? void 0 : _k.length) !== null && _l !== void 0 ? _l : 0;
+            // Use provided x/y values or generate indices
+            var xData = xValues !== null && xValues !== void 0 ? xValues : Array.from({ length: xLength }, function (_, i) { return i; });
+            var yData_1 = yValues !== null && yValues !== void 0 ? yValues : Array.from({ length: yLength_1 }, function (_, i) { return yLength_1 - 1 - i; });
+            xData.forEach(function (xVal, xIdx) {
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                (_a = firstData.y) === null || _a === void 0 ? void 0 : _a.forEach(function (yVal, yIdx) {
-                    var _a, _b, _c, _d, _e, _f;
-                    var zVal = (_b = (_a = firstData.z) === null || _a === void 0 ? void 0 : _a[yIdx]) === null || _b === void 0 ? void 0 : _b[xIdx];
+                yData_1.forEach(function (yVal, yIdx) {
+                    var _a, _b, _c, _d, _e;
+                    var zVal = (_a = zArray_1 === null || zArray_1 === void 0 ? void 0 : zArray_1[yIdx]) === null || _a === void 0 ? void 0 : _a[xIdx];
+                    var annotationText = getAnnotationByIndex(xIdx, yIdx);
                     heatmapDataPoints.push({
-                        x: ((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.xaxis) === null || _d === void 0 ? void 0 : _d.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
-                        y: ((_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.yaxis) === null || _f === void 0 ? void 0 : _f.type) === 'date' ? yVal : yVal,
+                        x: ((_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.xaxis) === null || _c === void 0 ? void 0 : _c.type) === 'date' ? xVal : xVal !== null && xVal !== void 0 ? xVal : 0,
+                        y: ((_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.yaxis) === null || _e === void 0 ? void 0 : _e.type) === 'date' ? yVal : yVal,
                         value: zVal,
-                        rectText: zVal,
+                        rectText: annotationText || zVal,
                     });
                     if (typeof zVal === 'number') {
                         zMin = Math.min(zMin, zVal);
@@ -1687,7 +1813,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             });
         }
         var heatmapData = {
-            legend: (_j = firstData.name) !== null && _j !== void 0 ? _j : '',
+            legend: (_m = firstData.name) !== null && _m !== void 0 ? _m : '',
             data: heatmapDataPoints,
             value: 0,
         };
@@ -1698,7 +1824,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.color2),
             (0, colors_1.getColorFromToken)(colors_1.DataVizPalette.color3),
         ];
-        var colorscale = (_0 = (_u = (_q = (_m = (_k = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _k !== void 0 ? _k : (_l = input.layout) === null || _l === void 0 ? void 0 : _l.colorscale) !== null && _m !== void 0 ? _m : (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.coloraxis) === null || _p === void 0 ? void 0 : _p.colorscale) !== null && _q !== void 0 ? _q : (_t = (_s = (_r = input.layout) === null || _r === void 0 ? void 0 : _r.template) === null || _s === void 0 ? void 0 : _s.layout) === null || _t === void 0 ? void 0 : _t.colorscale) !== null && _u !== void 0 ? _u : (firstData.type === 'histogram2d' && ((_z = (_y = (_x = (_w = (_v = input.layout) === null || _v === void 0 ? void 0 : _v.template) === null || _w === void 0 ? void 0 : _w.data) === null || _x === void 0 ? void 0 : _x.histogram2d) === null || _y === void 0 ? void 0 : _y[0]) === null || _z === void 0 ? void 0 : _z.colorscale))) !== null && _0 !== void 0 ? _0 : (_5 = (_4 = (_3 = (_2 = (_1 = input.layout) === null || _1 === void 0 ? void 0 : _1.template) === null || _2 === void 0 ? void 0 : _2.data) === null || _3 === void 0 ? void 0 : _3.heatmap) === null || _4 === void 0 ? void 0 : _4[0]) === null || _5 === void 0 ? void 0 : _5.colorscale;
+        var colorscale = (_3 = (_x = (_t = (_q = (_o = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _o !== void 0 ? _o : (_p = input.layout) === null || _p === void 0 ? void 0 : _p.colorscale) !== null && _q !== void 0 ? _q : (_s = (_r = input.layout) === null || _r === void 0 ? void 0 : _r.coloraxis) === null || _s === void 0 ? void 0 : _s.colorscale) !== null && _t !== void 0 ? _t : (_w = (_v = (_u = input.layout) === null || _u === void 0 ? void 0 : _u.template) === null || _v === void 0 ? void 0 : _v.layout) === null || _w === void 0 ? void 0 : _w.colorscale) !== null && _x !== void 0 ? _x : (firstData.type === 'histogram2d' && ((_2 = (_1 = (_0 = (_z = (_y = input.layout) === null || _y === void 0 ? void 0 : _y.template) === null || _z === void 0 ? void 0 : _z.data) === null || _0 === void 0 ? void 0 : _0.histogram2d) === null || _1 === void 0 ? void 0 : _1[0]) === null || _2 === void 0 ? void 0 : _2.colorscale))) !== null && _3 !== void 0 ? _3 : (_8 = (_7 = (_6 = (_5 = (_4 = input.layout) === null || _4 === void 0 ? void 0 : _4.template) === null || _5 === void 0 ? void 0 : _5.data) === null || _6 === void 0 ? void 0 : _6.heatmap) === null || _7 === void 0 ? void 0 : _7[0]) === null || _8 === void 0 ? void 0 : _8.colorscale;
         // determine if the types diverging, sequential or sequentialminus are present in colorscale
         if (colorscale &&
             typeof colorscale === 'object' &&
@@ -1722,14 +1848,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var rangeValuesForColorScale = Array.isArray(colorscale)
             ? colorscale.map(function (arr) { return arr[1]; })
             : defaultRange;
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, sortOrder: 'none', width: (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.width, height: (_8 = (_7 = input.layout) === null || _7 === void 0 ? void 0 : _7.height) !== null && _8 !== void 0 ? _8 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: true }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout)), getAxisTickProps(input.data, input.layout));
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, sortOrder: 'none', width: (_9 = input.layout) === null || _9 === void 0 ? void 0 : _9.width, height: (_11 = (_10 = input.layout) === null || _10 === void 0 ? void 0 : _10.height) !== null && _11 !== void 0 ? _11 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout)), getAxisTickProps(input.data, input.layout));
     };
     exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
     var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     colorMap, colorwayType, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-        var _m = input.data[0], link = _m.link, node = _m.node;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _r = input.data[0], link = _r.link, node = _r.node;
         var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
             .map(function (val, index) {
             var _a, _b;
@@ -1745,8 +1871,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // Filter out negative nodes, unequal nodes and self-references (circular links)
             .filter(function (x) { return x !== null && x.source >= 0 && x.target >= 0 && x.source !== x.target; });
         var extractedNodeColors = (0, PlotlyColorAdapter_1.extractColor)((_d = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.template) === null || _c === void 0 ? void 0 : _c.layout) === null || _d === void 0 ? void 0 : _d.colorway, colorwayType, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
+        var extractedLinkColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, link === null || link === void 0 ? void 0 : link.color, colorMap, isDarkTheme);
         var sankeyChartData = {
-            nodes: (_e = node.label) === null || _e === void 0 ? void 0 : _e.map(function (label, index) {
+            nodes: (_h = node.label) === null || _h === void 0 ? void 0 : _h.map(function (label, index) {
                 var _a, _b, _c;
                 var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedNodeColors, index, label, colorMap, (_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, isDarkTheme);
                 return {
@@ -1757,23 +1884,19 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             }),
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             links: validLinks.map(function (validLink, index) {
-                return tslib_1.__assign({}, validLink);
+                var _a, _b, _c;
+                var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedLinkColors, index, validLink.target, colorMap, (_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, isDarkTheme);
+                return tslib_1.__assign(tslib_1.__assign({}, validLink), { color: color });
             }),
         };
         var styles = {
-            root: tslib_1.__assign({}, (((_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.font) === null || _g === void 0 ? void 0 : _g.size) ? { fontSize: (_h = input.layout.font) === null || _h === void 0 ? void 0 : _h.size } : {})),
+            root: tslib_1.__assign({}, (((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.font) === null || _k === void 0 ? void 0 : _k.size) ? { fontSize: (_l = input.layout.font) === null || _l === void 0 ? void 0 : _l.size } : {})),
         };
-        var chartTitle = getTitles(input.layout).chartTitle;
-        return {
-            data: {
+        var _s = getTitles(input.layout), chartTitle = _s.chartTitle, titleStyles = _s.titleStyles;
+        return tslib_1.__assign({ data: {
                 chartTitle: chartTitle,
                 SankeyChartData: sankeyChartData,
-            },
-            width: (_j = input.layout) === null || _j === void 0 ? void 0 : _j.width,
-            height: (_l = (_k = input.layout) === null || _k === void 0 ? void 0 : _k.height) !== null && _l !== void 0 ? _l : 468,
-            styles: styles,
-            enableReflow: false,
-        };
+            }, width: (_m = input.layout) === null || _m === void 0 ? void 0 : _m.width, height: (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.height) !== null && _p !== void 0 ? _p : 468, styles: styles, enableReflow: false, hideLegend: isMultiPlot || ((_q = input.layout) === null || _q === void 0 ? void 0 : _q.showlegend) === false }, (titleStyles ? { titleStyles: titleStyles } : {}));
     };
     exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
     var transformPlotlyJsonToGaugeProps = function (input, isMultiPlot, 
@@ -1829,22 +1952,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 fill: sublabelColor,
             },
         };
-        var chartTitle = getTitles(input.layout).chartTitle;
-        return {
-            segments: segments,
-            chartValue: (_14 = firstData.value) !== null && _14 !== void 0 ? _14 : 0,
-            chartTitle: chartTitle,
-            sublabel: sublabel,
+        var _32 = getTitles(input.layout), chartTitle = _32.chartTitle, titleStyles = _32.titleStyles;
+        return tslib_1.__assign({ segments: segments, chartValue: (_14 = firstData.value) !== null && _14 !== void 0 ? _14 : 0, chartTitle: chartTitle, sublabel: sublabel, 
             // range values can be null
-            minValue: typeof ((_17 = (_16 = (_15 = firstData.gauge) === null || _15 === void 0 ? void 0 : _15.axis) === null || _16 === void 0 ? void 0 : _16.range) === null || _17 === void 0 ? void 0 : _17[0]) === 'number' ? (_20 = (_19 = (_18 = firstData.gauge) === null || _18 === void 0 ? void 0 : _18.axis) === null || _19 === void 0 ? void 0 : _19.range) === null || _20 === void 0 ? void 0 : _20[0] : undefined,
-            maxValue: typeof ((_23 = (_22 = (_21 = firstData.gauge) === null || _21 === void 0 ? void 0 : _21.axis) === null || _22 === void 0 ? void 0 : _22.range) === null || _23 === void 0 ? void 0 : _23[1]) === 'number' ? (_26 = (_25 = (_24 = firstData.gauge) === null || _24 === void 0 ? void 0 : _24.axis) === null || _25 === void 0 ? void 0 : _25.range) === null || _26 === void 0 ? void 0 : _26[1] : undefined,
-            chartValueFormat: function () { var _a, _b; return (_b = (_a = firstData.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''; },
-            width: (_27 = input.layout) === null || _27 === void 0 ? void 0 : _27.width,
-            height: (_29 = (_28 = input.layout) === null || _28 === void 0 ? void 0 : _28.height) !== null && _29 !== void 0 ? _29 : 220,
-            styles: styles,
-            variant: ((_31 = (_30 = firstData.gauge) === null || _30 === void 0 ? void 0 : _30.steps) === null || _31 === void 0 ? void 0 : _31.length) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment,
-            roundCorners: true,
-        };
+            minValue: typeof ((_17 = (_16 = (_15 = firstData.gauge) === null || _15 === void 0 ? void 0 : _15.axis) === null || _16 === void 0 ? void 0 : _16.range) === null || _17 === void 0 ? void 0 : _17[0]) === 'number' ? (_20 = (_19 = (_18 = firstData.gauge) === null || _18 === void 0 ? void 0 : _18.axis) === null || _19 === void 0 ? void 0 : _19.range) === null || _20 === void 0 ? void 0 : _20[0] : undefined, maxValue: typeof ((_23 = (_22 = (_21 = firstData.gauge) === null || _21 === void 0 ? void 0 : _21.axis) === null || _22 === void 0 ? void 0 : _22.range) === null || _23 === void 0 ? void 0 : _23[1]) === 'number' ? (_26 = (_25 = (_24 = firstData.gauge) === null || _24 === void 0 ? void 0 : _24.axis) === null || _25 === void 0 ? void 0 : _25.range) === null || _26 === void 0 ? void 0 : _26[1] : undefined, chartValueFormat: function () { var _a, _b; return (_b = (_a = firstData.value) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : ''; }, width: (_27 = input.layout) === null || _27 === void 0 ? void 0 : _27.width, height: (_29 = (_28 = input.layout) === null || _28 === void 0 ? void 0 : _28.height) !== null && _29 !== void 0 ? _29 : 220, styles: styles, variant: ((_31 = (_30 = firstData.gauge) === null || _30 === void 0 ? void 0 : _30.steps) === null || _31 === void 0 ? void 0 : _31.length) ? index_1.GaugeChartVariant.MultipleSegments : index_1.GaugeChartVariant.SingleSegment, roundCorners: true }, (titleStyles ? { titleStyles: titleStyles } : {}));
     };
     exports.transformPlotlyJsonToGaugeProps = transformPlotlyJsonToGaugeProps;
     var cleanText = function (text) {
@@ -1959,13 +2070,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             font: tslib_1.__assign(tslib_1.__assign({}, ((_t = templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.font) !== null && _t !== void 0 ? _t : {})), ((_u = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.font) !== null && _u !== void 0 ? _u : {})),
             values: (_w = (_v = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.values) !== null && _v !== void 0 ? _v : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.values) !== null && _w !== void 0 ? _w : [],
         };
-        return {
-            headers: normalizeHeaders((_y = (_x = tableData.header) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [], header),
-            rows: rows,
-            width: (_z = input.layout) === null || _z === void 0 ? void 0 : _z.width,
-            height: (_0 = input.layout) === null || _0 === void 0 ? void 0 : _0.height,
-            styles: styles,
-        };
+        var _1 = getTitles(input.layout), chartTitle = _1.chartTitle, titleStyles = _1.titleStyles;
+        return tslib_1.__assign({ headers: normalizeHeaders((_y = (_x = tableData.header) === null || _x === void 0 ? void 0 : _x.values) !== null && _y !== void 0 ? _y : [], header), rows: rows, width: (_z = input.layout) === null || _z === void 0 ? void 0 : _z.width, height: (_0 = input.layout) === null || _0 === void 0 ? void 0 : _0.height, styles: styles, chartTitle: chartTitle }, (titleStyles ? { titleStyles: titleStyles } : {}));
     };
     exports.transformPlotlyJsonToChartTableProps = transformPlotlyJsonToChartTableProps;
     function getCategoriesAndValues(series) {
@@ -2083,144 +2189,62 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 });
             });
         }
-        return {
-            data: funnelData,
-            width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width,
-            height: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height,
-            orientation: ((_c = input.data[0]) === null || _c === void 0 ? void 0 : _c.orientation) === 'v' ? 'horizontal' : 'vertical',
-            hideLegend: isMultiPlot || ((_d = input.layout) === null || _d === void 0 ? void 0 : _d.showlegend) === false,
-        };
+        var _e = getTitles(input.layout), chartTitle = _e.chartTitle, titleStyles = _e.titleStyles;
+        return tslib_1.__assign({ data: funnelData, chartTitle: chartTitle, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height, orientation: ((_c = input.data[0]) === null || _c === void 0 ? void 0 : _c.orientation) === 'v' ? 'horizontal' : 'vertical', hideLegend: isMultiPlot || ((_d = input.layout) === null || _d === void 0 ? void 0 : _d.showlegend) === false }, (titleStyles ? { titleStyles: titleStyles } : {}));
     };
     exports.transformPlotlyJsonToFunnelChartProps = transformPlotlyJsonToFunnelChartProps;
-    var projectPolarToCartesian = function (input) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        var projection = tslib_1.__assign({}, input);
-        // Find the global min and max radius across all series
-        var minRadius = 0;
-        var maxRadius = 0;
-        for (var sindex = 0; sindex < input.data.length; sindex++) {
-            var rVals = input.data[sindex].r;
-            if (rVals && (0, chart_utilities_1.isArrayOrTypedArray)(rVals)) {
-                for (var ptindex = 0; ptindex < rVals.length; ptindex++) {
-                    if (!(0, chart_utilities_1.isInvalidValue)(rVals[ptindex])) {
-                        minRadius = Math.min(minRadius, rVals[ptindex]);
-                        maxRadius = Math.max(maxRadius, rVals[ptindex]);
-                    }
-                }
-            }
-        }
-        // If there are negative radii, compute the shift
-        var radiusShift = minRadius < 0 ? -minRadius : 0;
-        // Collect all unique theta values from all scatterpolar series for equal spacing
-        var allThetaValues = new Set();
-        for (var sindex = 0; sindex < input.data.length; sindex++) {
-            var series = input.data[sindex];
-            if (series.theta && (0, chart_utilities_1.isArrayOrTypedArray)(series.theta)) {
-                series.theta.forEach(function (theta) { return allThetaValues.add(String(theta)); });
-            }
-        }
-        // Project all points and create a perfect square domain
-        var allX = [];
-        var allY = [];
-        var originX = null;
-        var _loop_1 = function (sindex) {
-            var series = input.data[sindex];
-            // If scatterpolar, set __axisLabel to all unique theta values for equal spacing
-            if ((0, chart_utilities_1.isArrayOrTypedArray)(series.theta)) {
-                series.__axisLabel = Array.from(allThetaValues);
-            }
-            series.x = [];
-            series.y = [];
-            var thetas = series.theta;
-            var rVals = series.r;
-            // Skip if rVals or thetas are not arrays
-            if (!(0, chart_utilities_1.isArrayOrTypedArray)(rVals) || !(0, chart_utilities_1.isArrayOrTypedArray)(thetas)) {
-                projection.data[sindex] = series;
-                return "continue";
-            }
-            // retrieve polar axis settings
-            var dirMultiplier = ((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.polar) === null || _b === void 0 ? void 0 : _b.angularaxis) === null || _c === void 0 ? void 0 : _c.direction) === 'clockwise' ? -1 : 1;
-            var startAngleInRad = (((_g = (_f = (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.polar) === null || _e === void 0 ? void 0 : _e.angularaxis) === null || _f === void 0 ? void 0 : _f.rotation) !== null && _g !== void 0 ? _g : 0) * Math.PI) / 180;
-            // Compute tick positions if categorical
-            var uniqueTheta = [];
-            var categorical = false;
-            if (!(0, chart_utilities_1.isNumberArray)(thetas)) {
-                uniqueTheta = Array.from(new Set(thetas));
-                categorical = true;
-            }
-            for (var ptindex = 0; ptindex < rVals.length; ptindex++) {
-                if ((0, chart_utilities_1.isInvalidValue)(thetas === null || thetas === void 0 ? void 0 : thetas[ptindex]) || (0, chart_utilities_1.isInvalidValue)(rVals === null || rVals === void 0 ? void 0 : rVals[ptindex])) {
-                    continue;
-                }
-                // Map theta to angle in radians
-                var thetaRad = void 0;
-                if (categorical) {
-                    var idx = uniqueTheta.indexOf(thetas[ptindex]);
-                    var step = (2 * Math.PI) / uniqueTheta.length;
-                    thetaRad = startAngleInRad + dirMultiplier * idx * step;
+    var transformPlotlyJsonToPolarChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+        var _a, _b, _c;
+        var polarData = [];
+        var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
+        var resolveRValue = getAxisValueResolver(getPolarAxis(input.data, 'r', input.layout)._type);
+        input.data.forEach(function (series, index) {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var legend = legends[index];
+            if (series.type === 'scatterpolar') {
+                var isAreaTrace = series.fill === 'toself' || series.fill === 'tonext';
+                var isLineTrace = typeof series.mode === 'undefined' ? true : series.mode.includes('lines');
+                var colors = isAreaTrace ? series.fillcolor : isLineTrace ? (_a = series.line) === null || _a === void 0 ? void 0 : _a.color : (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color;
+                var extractedColors_2 = (0, PlotlyColorAdapter_1.extractColor)((_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.colorway, colorwayType, colors, colorMap, isDarkTheme);
+                var seriesColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors_2, index, legend, colorMap, (_h = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
+                var seriesOpacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index);
+                var finalSeriesColor_1 = (0, d3_color_1.rgb)(seriesColor).copy({ opacity: seriesOpacity }).formatHex8();
+                var lineOptions = getLineOptions(series.line);
+                var thetaUnit_1 = series.thetaunit;
+                var commonProps = {
+                    legend: legend,
+                    legendShape: getLegendShape(series),
+                    color: finalSeriesColor_1,
+                    data: ((_j = series.r) === null || _j === void 0 ? void 0 : _j.map(function (r, rIndex) {
+                        var _a, _b, _c, _d, _e, _f;
+                        var theta = (_a = series.theta) === null || _a === void 0 ? void 0 : _a[rIndex];
+                        var markerSize = Array.isArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) ? series.marker.size[rIndex] : (_c = series.marker) === null || _c === void 0 ? void 0 : _c.size;
+                        var text = Array.isArray(series.text) ? series.text[rIndex] : series.text;
+                        var markerColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors_2, rIndex, legend, colorMap, (_f = (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.template) === null || _e === void 0 ? void 0 : _e.layout) === null || _f === void 0 ? void 0 : _f.colorway, isDarkTheme);
+                        var markerOpacity = (0, PlotlyColorAdapter_1.getOpacity)(series, rIndex);
+                        if ((0, chart_utilities_1.isInvalidValue)(resolveRValue(r)) || (0, chart_utilities_1.isInvalidValue)(theta)) {
+                            return;
+                        }
+                        return tslib_1.__assign(tslib_1.__assign({ r: resolveRValue(r), theta: typeof theta === 'number'
+                                ? thetaUnit_1 === 'radians'
+                                    ? (theta * 180) / Math.PI
+                                    : thetaUnit_1 === 'gradians'
+                                        ? theta * 0.9
+                                        : theta
+                                : theta, color: markerColor ? (0, d3_color_1.rgb)(markerColor).copy({ opacity: markerOpacity }).formatHex8() : finalSeriesColor_1 }, (typeof markerSize !== 'undefined' ? { markerSize: markerSize } : {})), (typeof text !== 'undefined' ? { text: text } : {}));
+                    }).filter(function (item) { return typeof item !== 'undefined'; })) || [],
+                };
+                if (isAreaTrace || isLineTrace) {
+                    polarData.push(tslib_1.__assign(tslib_1.__assign({ type: isAreaTrace ? 'areapolar' : 'linepolar' }, commonProps), { lineOptions: lineOptions }));
                 }
                 else {
-                    thetaRad = startAngleInRad + dirMultiplier * ((thetas[ptindex] * Math.PI) / 180);
-                }
-                // Shift only the polar origin (not the cartesian)
-                var rawRadius = rVals[ptindex];
-                var polarRadius = rawRadius + radiusShift; // Only for projection
-                // Calculate cartesian coordinates (with shifted polar origin)
-                var x = polarRadius * Math.cos(thetaRad);
-                var y = polarRadius * Math.sin(thetaRad);
-                // Calculate the cartesian coordinates of the original polar origin (0,0)
-                // This is the point that should be mapped to (0,0) in cartesian coordinates
-                if (sindex === 0 && ptindex === 0) {
-                    // For polar origin (r=0, θ=0), cartesian coordinates are (0,0)
-                    // But since we shifted the radius by radiusShift, the cartesian origin is at (radiusShift, 0)
-                    originX = radiusShift;
+                    polarData.push(tslib_1.__assign({ type: 'scatterpolar' }, commonProps));
                 }
-                series.x.push(x);
-                series.y.push(y);
-                allX.push(x);
-                allY.push(y);
             }
-            // Map text to each data point for downstream chart rendering
-            if (series.x && series.y) {
-                series.data = series.x.map(function (xVal, idx) { return (tslib_1.__assign({ x: xVal, y: series.y[idx] }, (series.text ? { text: series.text[idx] } : {}))); });
-            }
-            projection.data[sindex] = series;
-        };
-        for (var sindex = 0; sindex < input.data.length; sindex++) {
-            _loop_1(sindex);
-        }
-        // 7. Recenter all cartesian coordinates
-        if (originX !== null) {
-            for (var sindex = 0; sindex < projection.data.length; sindex++) {
-                var series = projection.data[sindex];
-                if (series.x && series.y) {
-                    series.x = series.x.map(function (v) { return v - originX; });
-                }
-            }
-            // Also recenter allX for normalization
-            for (var i = 0; i < allX.length; i++) {
-                allX[i] = allX[i] - originX;
-            }
-        }
-        // 8. Find the maximum absolute value among all x and y
-        var maxAbs = Math.max.apply(Math, tslib_1.__spreadArray(tslib_1.__spreadArray([], allX.map(Math.abs), false), allY.map(Math.abs), false));
-        maxAbs = maxAbs === 0 ? 1 : maxAbs;
-        // 9. Rescale all points so that the largest |x| or |y| is 0.5
-        for (var sindex = 0; sindex < projection.data.length; sindex++) {
-            var series = projection.data[sindex];
-            if (series.x && series.y) {
-                series.x = series.x.map(function (v) { return v / (2 * maxAbs); });
-                series.y = series.y.map(function (v) { return v / (2 * maxAbs); });
-            }
-        }
-        // 10. Customize layout for perfect square with absolute positioning
-        var size = ((_h = input.layout) === null || _h === void 0 ? void 0 : _h.width) || ((_j = input.layout) === null || _j === void 0 ? void 0 : _j.height) || 500;
-        projection.layout = tslib_1.__assign(tslib_1.__assign({}, projection.layout), { width: size, height: size });
-        // Attach originX as custom properties
-        projection.layout.__polarOriginX = originX !== null && originX !== void 0 ? originX : undefined;
-        return projection;
+        });
+        return tslib_1.__assign({ data: polarData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 400, hideLegend: hideLegend }, getPolarAxisProps(input.data, input.layout));
     };
-    exports.projectPolarToCartesian = projectPolarToCartesian;
+    exports.transformPlotlyJsonToPolarChartProps = transformPlotlyJsonToPolarChartProps;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function isPlainObject(obj) {
         if (window && window.process && window.process.versions) {
@@ -2504,7 +2528,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return parseInt(normalizedKey, 10) - 1;
     };
     var isNonPlotType = function (chartType) {
-        return ['donut', 'sankey', 'pie', 'annotation'].includes(chartType);
+        return ['donut', 'sankey', 'pie', 'annotation', 'table', 'gauge', 'funnel'].includes(chartType);
     };
     exports.isNonPlotType = isNonPlotType;
     var getGridProperties = function (schema, isMultiPlot, validTracesInfo) {
@@ -2534,6 +2558,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     var domainXInfo = {
                         start: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[0] : 0,
                         end: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[1] : 1,
+                        cellName: "x".concat(domainX.length === 0 ? '' : domainX.length + 1),
                     };
                     domainX.push(domainXInfo);
                 }
@@ -2552,6 +2577,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     var domainYInfo = {
                         start: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[0] : 0,
                         end: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[1] : 1,
+                        cellName: "x".concat(domainY.length === 0 ? '' : domainY.length + 1),
                     };
                     domainY.push(domainYInfo);
                 }
@@ -2565,16 +2591,36 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 var domainXInfo = {
                     start: ((_b = series.domain) === null || _b === void 0 ? void 0 : _b.x) ? series.domain.x[0] : 0,
                     end: ((_c = series.domain) === null || _c === void 0 ? void 0 : _c.x) ? series.domain.x[1] : 1,
+                    cellName: "".concat(exports.NON_PLOT_KEY_PREFIX).concat(domainX.length - cartesianDomains + 1),
                 };
                 var domainYInfo = {
                     start: ((_d = series.domain) === null || _d === void 0 ? void 0 : _d.y) ? series.domain.y[0] : 0,
                     end: ((_e = series.domain) === null || _e === void 0 ? void 0 : _e.y) ? series.domain.y[1] : 1,
+                    cellName: "".concat(exports.NON_PLOT_KEY_PREFIX).concat(domainY.length - cartesianDomains + 1),
                 };
                 domainX.push(domainXInfo);
                 domainY.push(domainYInfo);
             }
         });
         if (layout !== undefined && layout !== null && Object.keys(layout).length > 0) {
+            Object.keys(layout !== null && layout !== void 0 ? layout : {}).forEach(function (key) {
+                var _a, _b, _c, _d;
+                if (key.startsWith('polar')) {
+                    var polarLayout = layout[key];
+                    var domainXInfo = {
+                        start: ((_a = polarLayout.domain) === null || _a === void 0 ? void 0 : _a.x) ? polarLayout.domain.x[0] : 0,
+                        end: ((_b = polarLayout.domain) === null || _b === void 0 ? void 0 : _b.x) ? polarLayout.domain.x[1] : 1,
+                        cellName: key,
+                    };
+                    var domainYInfo = {
+                        start: ((_c = polarLayout.domain) === null || _c === void 0 ? void 0 : _c.y) ? polarLayout.domain.y[0] : 0,
+                        end: ((_d = polarLayout.domain) === null || _d === void 0 ? void 0 : _d.y) ? polarLayout.domain.y[1] : 1,
+                        cellName: key,
+                    };
+                    domainX.push(domainXInfo);
+                    domainY.push(domainYInfo);
+                }
+            });
             (_a = layout.annotations) === null || _a === void 0 ? void 0 : _a.forEach(function (annotation) {
                 var xMatches = domainX.flatMap(function (interval, idx) {
                     return (annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval.start && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval.end ? [idx] : [];
@@ -2610,9 +2656,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 .sort();
             templateColumns = "repeat(".concat(sortedXStart_1.length, ", 1fr)");
             domainX.forEach(function (interval, index) {
-                var cellName = index >= cartesianDomains
-                    ? "".concat(exports.NON_PLOT_KEY_PREFIX).concat(index - cartesianDomains + 1)
-                    : "x".concat(index === 0 ? '' : index + 1);
                 var columnIndex = sortedXStart_1.findIndex(function (start) { return start === interval.start; });
                 var columnNumber = columnIndex + 1; // Column numbers are 1-based
                 var annotationProps = annotations[index];
@@ -2624,7 +2667,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     xDomain: interval,
                     yDomain: { start: 0, end: 1 }, // Default yDomain for x-axis
                 };
-                gridLayout[cellName] = row;
+                gridLayout[interval.cellName] = row;
             });
         }
         if (domainY.length > 0) {
@@ -2641,14 +2684,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var numberOfRows_1 = sortedYStart_1.length;
             templateRows = "repeat(".concat(numberOfRows_1, ", 1fr)");
             domainY.forEach(function (interval, index) {
-                var cellName = index >= cartesianDomains
-                    ? "".concat(exports.NON_PLOT_KEY_PREFIX).concat(index - cartesianDomains + 1)
-                    : "x".concat(index === 0 ? '' : index + 1);
                 var rowIndex = sortedYStart_1.findIndex(function (start) { return start === interval.start; });
                 var rowNumber = numberOfRows_1 - rowIndex; // Rows are 1-based and we need to reverse the order for CSS grid
                 var annotationProps = annotations[index];
                 var yAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.yAnnotation;
-                var cell = gridLayout[cellName];
+                var cell = gridLayout[interval.cellName];
                 if (cell !== undefined) {
                     cell.row = rowNumber;
                     cell.yAnnotation = yAnnotation;
@@ -2800,19 +2840,20 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 return;
             }
             var axType = getAxisType(data, ax);
+            if (axId === 'x' && axType === 'category') {
+                props.xAxis = {
+                    tickLayout: 'auto',
+                };
+            }
             if ((!ax.tickmode || ax.tickmode === 'array') && (0, chart_utilities_1.isArrayOrTypedArray)(ax.tickvals)) {
                 var tickValues = axType === 'date' ? ax.tickvals.map(function (v) { return new Date(v); }) : ax.tickvals;
                 if (axId === 'x') {
                     props.tickValues = tickValues;
-                    props.xAxis = {
-                        tickText: ax.ticktext,
-                    };
+                    props.xAxis = tslib_1.__assign(tslib_1.__assign({}, props.xAxis), { tickText: ax.ticktext });
                 }
                 else if (axId === 'y') {
                     props.yAxisTickValues = tickValues;
-                    props.yAxis = {
-                        tickText: ax.ticktext,
-                    };
+                    props.yAxis = tslib_1.__assign(tslib_1.__assign({}, props.yAxis), { tickText: ax.ticktext });
                 }
                 return;
             }
@@ -2820,16 +2861,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 var dtick = plotlyDtick(ax.dtick, axType);
                 var tick0 = plotlyTick0(ax.tick0, axType, dtick);
                 if (axId === 'x') {
-                    props.xAxis = {
-                        tickStep: dtick,
-                        tick0: tick0,
-                    };
+                    props.xAxis = tslib_1.__assign(tslib_1.__assign({}, props.xAxis), { tickStep: dtick, tick0: tick0 });
                 }
                 else if (axId === 'y') {
-                    props.yAxis = {
-                        tickStep: dtick,
-                        tick0: tick0,
-                    };
+                    props.yAxis = tslib_1.__assign(tslib_1.__assign({}, props.yAxis), { tickStep: dtick, tick0: tick0 });
                 }
                 return;
             }
@@ -2982,5 +3017,93 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             }
         };
     };
+    var POLAR_AXIS_BY_DATA_KEY = {
+        r: 'radialAxis',
+        theta: 'angularAxis',
+    };
+    exports.DEFAULT_POLAR_SUBPLOT = 'polar';
+    var getPolarLayout = function (trace, layout) {
+        var subplotId = ((trace === null || trace === void 0 ? void 0 : trace.subplot) || exports.DEFAULT_POLAR_SUBPLOT);
+        return layout === null || layout === void 0 ? void 0 : layout[subplotId];
+    };
+    var getValidAxisValues = function (data, dataKey) {
+        var values = [];
+        data.forEach(function (series) {
+            if ((0, chart_utilities_1.isArrayOrTypedArray)(series[dataKey])) {
+                series[dataKey].forEach(function (val) {
+                    if (!(0, chart_utilities_1.isInvalidValue)(val)) {
+                        values.push(val);
+                    }
+                });
+            }
+        });
+        return values;
+    };
+    var getPolarAxisType = function (data, dataKey, declaredType) {
+        if (['linear', 'log', 'date', 'category'].includes(declaredType !== null && declaredType !== void 0 ? declaredType : '')) {
+            return declaredType;
+        }
+        var values = getValidAxisValues(data, dataKey);
+        if ((0, chart_utilities_1.isNumberArray)(values) && !(0, chart_utilities_1.isYearArray)(values)) {
+            return 'linear';
+        }
+        if ((0, chart_utilities_1.isDateArray)(values)) {
+            return 'date';
+        }
+        return 'category';
+    };
+    var getPolarAxis = function (data, dataKey, layout) {
+        var polarLayout = getPolarLayout(data[0], layout);
+        var ax = polarLayout === null || polarLayout === void 0 ? void 0 : polarLayout[POLAR_AXIS_BY_DATA_KEY[dataKey].toLowerCase()];
+        return tslib_1.__assign(tslib_1.__assign({}, ax), { _dataKey: dataKey, _type: getPolarAxisType(data, dataKey, ax === null || ax === void 0 ? void 0 : ax.type) });
+    };
+    var getPolarAxisTickProps = function (data, ax) {
+        var props = {};
+        if ((!ax.tickmode || ax.tickmode === 'array') && (0, chart_utilities_1.isArrayOrTypedArray)(ax.tickvals)) {
+            var tickValues = ax._type === 'date' ? ax.tickvals.map(function (v) { return new Date(v); }) : ax.tickvals;
+            props.tickValues = tickValues;
+            props.tickText = ax.ticktext;
+            return props;
+        }
+        if ((!ax.tickmode || ax.tickmode === 'linear') && ax.dtick) {
+            var dtick = plotlyDtick(ax.dtick, ax._type);
+            var tick0 = plotlyTick0(ax.tick0, ax._type, dtick);
+            props.tickStep = dtick;
+            props.tick0 = tick0;
+            return props;
+        }
+        if ((!ax.tickmode || ax.tickmode === 'auto') && typeof ax.nticks === 'number' && ax.nticks >= 0) {
+            props.tickCount = ax.nticks;
+        }
+        return props;
+    };
+    var getPolarAxisCategoryOrder = function (data, ax) {
+        if (ax._type !== 'category') {
+            return 'data';
+        }
+        var isValidArray = (0, chart_utilities_1.isArrayOrTypedArray)(ax.categoryarray) && ax.categoryarray.length > 0;
+        if (isValidArray && (!ax.categoryorder || ax.categoryorder === 'array')) {
+            return ax.categoryarray;
+        }
+        if (!ax.categoryorder || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
+            var values = getValidAxisValues(data, ax._dataKey);
+            var categoriesInTraceOrder = Array.from(new Set(values));
+            return ax.autorange === 'reversed' ? categoriesInTraceOrder.reverse() : categoriesInTraceOrder;
+        }
+        return ax.categoryorder;
+    };
+    var getPolarAxisProps = function (data, layout) {
+        var props = {};
+        Object.keys(POLAR_AXIS_BY_DATA_KEY).forEach(function (dataKey) {
+            var propName = POLAR_AXIS_BY_DATA_KEY[dataKey];
+            var ax = getPolarAxis(data, dataKey, layout);
+            props[propName] = tslib_1.__assign(tslib_1.__assign({ scaleType: ax._type === 'log' ? 'log' : 'default', categoryOrder: getPolarAxisCategoryOrder(data, ax), tickFormat: ax.tickformat }, getPolarAxisTickProps(data, ax)), ((0, chart_utilities_1.isArrayOrTypedArray)(ax.range) ? { rangeStart: ax.range[0], rangeEnd: ax.range[1] } : {}));
+            if (propName === 'angularAxis') {
+                props[propName].unit = ax.thetaunit;
+                props.direction = ax.direction;
+            }
+        });
+        return props;
+    };
 });
 //# sourceMappingURL=PlotlySchemaAdapter.js.map