@fluentui/react-charting 5.24.11 → 5.24.13

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"], 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) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToFunnelChartProps = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
+    exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.findArrayAttributes = 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.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
     exports.NON_PLOT_KEY_PREFIX = 'nonplot_';
     exports.SINGLE_REPEAT = 'repeat(1, 1fr)';
     var dashOptions = {
@@ -262,18 +262,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var colorScale = undefined;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
         input.data.forEach(function (series, index1) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-            if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
-                (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
-                ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
-                typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
-                colorScale = createColorScale(input.layout, series);
-            }
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
             var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
             // extract bar colors for each series only once
-            var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
+            var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_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, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             // extract line colors for each series only once
-            var extractedLineColors = (0, PlotlyColorAdapter_1.extractColor)((_p = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.layout) === null || _p === void 0 ? void 0 : _p.colorway, colorwayType, (_q = series.line) === null || _q === void 0 ? void 0 : _q.color, colorMap, isDarkTheme);
+            var extractedLineColors = (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, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
             var xValues = series.x;
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
             var isXString = (0, chart_utilities_1.isStringArray)(xValues);
@@ -338,22 +333,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: vsbcData, 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, 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 ((_d = vsbcData[0]) === null || _d === void 0 ? void 0 : _d.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat);
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
-    var createColorScale = function (layout, series) {
-        var _a, _b, _c, _d, _e, _f;
-        var scale = (_a = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _a === void 0 ? void 0 : _a.colorscale;
-        var colorValues = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color;
-        var _g = [
-            (_d = (_c = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _c === void 0 ? void 0 : _c.cmin) !== null && _d !== void 0 ? _d : Math.min.apply(Math, colorValues),
-            (_f = (_e = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _e === void 0 ? void 0 : _e.cmax) !== null && _f !== void 0 ? _f : Math.max.apply(Math, colorValues),
-        ], dMin = _g[0], dMax = _g[1];
-        // Normalize colorscale domain to actual data domain
-        var scaleDomain = scale.map(function (_a) {
-            var pos = _a[0];
-            return dMin + pos * (dMax - dMin);
-        });
-        var scaleColors = scale.map(function (item) { return item[1]; });
-        return (0, d3_scale_1.scaleLinear)().domain(scaleDomain).range(scaleColors);
-    };
     var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c, _d;
         var mapXToDataPoints = {};
@@ -362,16 +341,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var colorScale = undefined;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
         input.data.forEach(function (series, index1) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-            if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
-                (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
-                ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
-                typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
-                colorScale = createColorScale(input.layout, series);
-            }
+            var _a, _b, _c, _d, _e;
+            colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
             // extract colors for each series only once
-            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
-            (_m = series.x) === null || _m === void 0 ? void 0 : _m.forEach(function (x, xIndex) {
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_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, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+            (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
                 var _a, _b, _c, _d, _e, _f;
                 if ((0, chart_utilities_1.isInvalidValue)(x) || (0, chart_utilities_1.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                     return;
@@ -411,18 +385,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
         var colorScale = undefined;
         input.data.forEach(function (series, seriesIdx) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (!series.x) {
                 return;
             }
-            if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
-                (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
-                ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
-                typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
-                colorScale = createColorScale(input.layout, series);
-            }
+            colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
             // extract colors for each series only once
-            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_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, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             var xValues = [];
             var yValues = [];
             series.x.forEach(function (xVal, index) {
@@ -436,7 +405,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var isXString = (0, chart_utilities_1.isStringArray)(xValues);
             // TODO: In case of a single bin, add an empty bin of the same size to prevent the
             // default bar width from being used and ensure the bar spans the full intended range.
-            var xBins = createBins(xValues, (_m = series.xbins) === null || _m === void 0 ? void 0 : _m.start, (_o = series.xbins) === null || _o === void 0 ? void 0 : _o.end, (_p = series.xbins) === null || _p === void 0 ? void 0 : _p.size);
+            var xBins = createBins(xValues, (_e = series.xbins) === null || _e === void 0 ? void 0 : _e.start, (_f = series.xbins) === null || _f === void 0 ? void 0 : _f.end, (_g = series.xbins) === null || _g === void 0 ? void 0 : _g.size);
             var yBins = xBins.map(function () { return []; });
             var total = 0;
             xValues.forEach(function (xVal, index) {
@@ -518,11 +487,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var seriesOpacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index);
             mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
             // if mode contains 'text', we prioritize showing the text over curving the line
-            var lineOptions = !((_h = series.mode) === null || _h === void 0 ? void 0 : _h.includes('text')) ? getLineOptions(series.line) : undefined;
+            var lineOptions = !((_h = series.mode) === null || _h === void 0 ? void 0 : _h.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
             var legendShape = getLegendShape(series);
             var validXYRanges = (0, exports.getValidXYRanges)(series);
             return validXYRanges.map(function (_a, rangeIdx) {
-                var _b, _c;
+                var _b, _c, _d;
                 var rangeStart = _a[0], rangeEnd = _a[1];
                 var rangeXValues = xValues.slice(rangeStart, rangeEnd);
                 var rangeYValues = series.y.slice(rangeStart, rangeEnd);
@@ -542,7 +511,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                                 : {})), (textValues ? { text: textValues[i] } : {})), { yAxisCalloutData: getFormattedCalloutYData(rangeYValues[i], yAxisTickFormat) }));
                     }),
                     color: (_c = (0, d3_color_1.rgb)(seriesColor).copy({ opacity: seriesOpacity }).formatHex8()) !== null && _c !== void 0 ? _c : seriesColor,
-                    lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
+                    lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.type !== 'scatterpolar' ? series.mode : 'scatterpolar', 
+                        // originXOffset is not typed on Layout, but may be present in input.layout as a part of projection of
+                        // scatter polar coordingates to cartesian coordinates
+                        originXOffset: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.__polarOriginX }),
                     useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                 };
             });
@@ -575,15 +547,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var colorScale = undefined;
         var chartData = input.data
             .map(function (series, index) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-            if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
-                (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
-                ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
-                typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
-                colorScale = createColorScale(input.layout, series);
-            }
+            var _a, _b, _c, _d;
+            colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
             // extract colors for each series only once
-            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_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, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             var legend = legends[index];
             return series.y
                 .map(function (yValue, i) {
@@ -621,6 +588,53 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 : ((_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));
     };
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
+    var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+        var _a, _b, _c;
+        var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
+        var colorScale = undefined;
+        var chartData = input.data
+            .map(function (series, index) {
+            var _a, _b, _c, _d, _e, _f;
+            colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
+            // extract colors for each series only once
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_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, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+            var legend = legends[index];
+            var isXDate = ((_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.xaxis) === null || _f === void 0 ? void 0 : _f.type) === 'date' || (0, chart_utilities_1.isDateArray)(series.x);
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var convertXValueToNumber = function (value) {
+                return (0, chart_utilities_1.isInvalidValue)(value) ? 0 : isXDate ? new Date(value).getTime() : value;
+            };
+            return series.y
+                .map(function (yVal, i) {
+                var _a, _b, _c, _d, _e, _f, _g;
+                if ((0, chart_utilities_1.isInvalidValue)(yVal)) {
+                    return null;
+                }
+                // resolve color for each legend's bars from the colorscale or extracted colors
+                var color = colorScale
+                    ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
+                        ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[i % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
+                        : 0)
+                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
+                var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
+                var base = convertXValueToNumber((_e = series.base) === null || _e === void 0 ? void 0 : _e[i]);
+                var xVal = convertXValueToNumber((_f = series.x) === null || _f === void 0 ? void 0 : _f[i]);
+                return {
+                    x: {
+                        start: isXDate ? new Date(base) : base,
+                        end: isXDate ? new Date(base + xVal) : base + xVal,
+                    },
+                    y: yVal,
+                    legend: legend,
+                    color: (_g = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _g !== void 0 ? _g : color,
+                };
+            })
+                .filter(function (point) { return point !== null; });
+        })
+            .flat();
+        return tslib_1.__assign(tslib_1.__assign({ data: chartData, showYAxisLables: true, height: (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 350, width: (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true, useUTC: false }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout));
+    };
+    exports.transformPlotlyJsonToGanttChartProps = transformPlotlyJsonToGanttChartProps;
     var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, 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 firstData = input.data[0];
@@ -1113,23 +1127,120 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     };
     exports.transformPlotlyJsonToFunnelChartProps = transformPlotlyJsonToFunnelChartProps;
     var projectPolarToCartesian = function (input) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         var projection = tslib_1.__assign({}, input);
+        // 1. 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]);
+                    }
+                }
+            }
+        }
+        // 2. If there are negative radii, compute the shift
+        var radiusShift = minRadius < 0 ? -minRadius : 0;
+        // 3. 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 text to theta values as strings
+            if (series.type === 'scatterpolar' && Array.isArray(series.theta)) {
+                series.text = series.theta.map(function (v) { return String(v); });
+            }
             series.x = [];
             series.y = [];
-            for (var ptindex = 0; ptindex < ((_b = (_a = series.r) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0); ptindex++) {
-                if ((0, chart_utilities_1.isInvalidValue)((_c = series.theta) === null || _c === void 0 ? void 0 : _c[ptindex]) || (0, chart_utilities_1.isInvalidValue)((_d = series.r) === null || _d === void 0 ? void 0 : _d[ptindex])) {
+            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";
+            }
+            // 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;
                 }
-                var thetaRad = (series.theta[ptindex] * Math.PI) / 180;
-                var radius = series.r[ptindex];
-                series.x.push(radius * Math.cos(thetaRad));
-                series.y.push(radius * Math.sin(thetaRad));
+                // 4. 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 = idx * step;
+                }
+                else {
+                    thetaRad = (thetas[ptindex] * Math.PI) / 180;
+                }
+                // 5. Shift only the polar origin (not the cartesian)
+                var rawRadius = rVals[ptindex];
+                var polarRadius = rawRadius + radiusShift; // Only for projection
+                // 6. 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;
+                }
+                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 = ((_a = input.layout) === null || _a === void 0 ? void 0 : _a.width) || ((_b = input.layout) === null || _b === void 0 ? void 0 : _b.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;
     };
     exports.projectPolarToCartesian = projectPolarToCartesian;