@fluentui/react-charting 5.24.3 → 5.24.5

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

@@ -1,7 +1,9 @@
-define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-shape", "./PlotlyColorAdapter"], 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) {
+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.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.findArrayAttributes = exports.projectPolarToCartesian = 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 = void 0;
+    exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.findArrayAttributes = exports.projectPolarToCartesian = 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.NON_PLOT_KEY_PREFIX = 'nonplot_';
+    exports.SINGLE_REPEAT = 'repeat(1, 1fr)';
     var dashOptions = {
         dot: {
             strokeDasharray: '1, 5',
@@ -49,6 +51,47 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         };
         return titles;
     }
+    var getXAxisTickFormat = function (series, layout) {
+        var xAxis = getXAxisProperties(series, layout);
+        if (xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat) {
+            return {
+                tickFormat: xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat,
+            };
+        }
+        return {};
+    };
+    var getYAxisTickFormat = function (series, layout) {
+        var yAxis = getYAxisProperties(series, layout);
+        if (yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat) {
+            return {
+                yAxisTickFormat: (0, d3_format_1.format)(yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat),
+            };
+        }
+        return {};
+    };
+    var getYMinMaxValues = function (series, layout) {
+        var _a;
+        var range = (_a = getYAxisProperties(series, layout)) === null || _a === void 0 ? void 0 : _a.range;
+        if (range && range.length === 2) {
+            return {
+                yMinValue: range[0],
+                yMaxValue: range[1],
+            };
+        }
+        return {};
+    };
+    var getYAxisProperties = function (series, layout) {
+        return layout === null || layout === void 0 ? void 0 : layout.yaxis;
+    };
+    var getXAxisProperties = function (series, layout) {
+        return layout === null || layout === void 0 ? void 0 : layout.xaxis;
+    };
+    var getFormattedCalloutYData = function (yVal, yAxisFormat) {
+        if (typeof (yAxisFormat === null || yAxisFormat === void 0 ? void 0 : yAxisFormat.yAxisTickFormat) === 'function' && typeof yVal === 'number') {
+            return yAxisFormat.yAxisTickFormat(yVal);
+        }
+        return (0, chart_utilities_1.formatToLocaleString)(yVal);
+    };
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     var correctYearMonth = function (xValues) {
         var presentYear = new Date().getFullYear();
@@ -199,7 +242,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 chartTitle: chartTitle,
                 chartData: Object.values(mapLegendToDataPoint),
             },
-            hideLegend: ((_p = input.layout) === null || _p === void 0 ? void 0 : _p.showlegend) === false ? true : false,
+            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,
@@ -217,6 +260,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
         var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         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) &&
@@ -240,7 +284,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 var rangeXValues = series.x.slice(rangeStart, rangeEnd);
                 var rangeYValues = series.y.slice(rangeStart, rangeEnd);
                 rangeXValues.forEach(function (x, index2) {
-                    var _a, _b, _c, _d;
+                    var _a, _b, _c, _d, _e, _f;
                     if (!mapXToDataPoints[x]) {
                         mapXToDataPoints[x] = {
                             xAxisPoint: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -255,12 +299,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                             ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index2 % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                             : 0)
                         : (0, PlotlyColorAdapter_1.resolveColor)(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                    var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index2);
                     var yVal = rangeYValues[index2];
+                    var yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
                     if (series.type === 'bar') {
                         mapXToDataPoints[x].chartData.push({
                             legend: legend,
                             data: yVal,
-                            color: color,
+                            color: (_e = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color,
+                            yAxisCalloutData: yAxisCalloutData,
                         });
                         if (typeof yVal === 'number') {
                             yMaxValue = Math.max(yMaxValue, yVal);
@@ -274,9 +321,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                             legend: legend + (validXYRanges.length > 1 ? ".".concat(rangeIdx + 1) : ''),
                             legendShape: legendShape,
                             y: yVal,
-                            color: lineColor,
+                            color: (_f = (0, d3_color_1.rgb)(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                             lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                             useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                            yAxisCalloutData: yAxisCalloutData,
                         });
                         if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
                             yMaxValue = Math.max(yMaxValue, yVal);
@@ -286,8 +334,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 });
             });
         });
-        var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), 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, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true });
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), 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 }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat);
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
     var createColorScale = function (layout, series) {
@@ -312,6 +359,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
         var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         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) &&
@@ -323,7 +371,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // 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 _a, _b, _c, _d, _e;
+                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;
                 }
@@ -337,20 +385,22 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
                             ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
                             : 0)
-                        : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
+                        : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, xIndex, legend, colorMap, isDarkTheme);
+                    var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, xIndex);
+                    var yVal = series.y[xIndex];
                     mapXToDataPoints[x].series.push({
                         key: legend,
-                        data: series.y[xIndex],
+                        data: yVal,
                         xAxisCalloutData: x,
-                        color: color,
+                        color: (_f = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                         legend: legend,
                         useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                        yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
                     });
                 }
             });
         });
-        var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-        return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), 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', chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true });
+        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), 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', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat);
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
     var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -399,7 +449,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 return yVal;
             });
             xBins.forEach(function (bin, index) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e;
                 var legend = legends[seriesIdx];
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 var color = colorScale
@@ -407,27 +457,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                         : 0)
                     : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, 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: color }, (isXString
+                vbcData.push(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_e = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color }, (isXString
                     ? {}
                     : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
             });
         });
-        var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-        return {
-            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,
-            chartTitle: chartTitle,
-            xAxisTitle: xAxisTitle,
-            yAxisTitle: yAxisTitle,
-            mode: 'histogram',
-            hideTickOverlap: true,
-            maxBarWidth: 50,
-            hideLegend: hideLegend,
-            roundCorners: true,
-        };
+        return 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 }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout));
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
     var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -443,8 +480,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
     var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d;
         var isScatterMarkers = [
+            'markers',
             'text+markers',
             'markers+text',
             'lines+markers',
@@ -455,7 +493,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var isScatterChart = chartType === 'scatter';
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
         var mode = 'tonexty';
-        var _h = getLegendProps(input.data, input.layout, isMultiPlot), legends = _h.legends, hideLegend = _h.hideLegend;
+        var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
+        var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
         var chartData = input.data
             .map(function (series, index) {
             var _a, _b, _c, _d, _e, _f, _g;
@@ -474,12 +513,13 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var legend = legends[index];
             // resolve color for each legend's lines from the extracted colors
             var seriesColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+            var seriesOpacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index);
             mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
             var lineOptions = getLineOptions(series.line);
             var legendShape = getLegendShape(series);
             var validXYRanges = (0, exports.getValidXYRanges)(series);
             return validXYRanges.map(function (_a, rangeIdx) {
-                var _b;
+                var _b, _c;
                 var rangeStart = _a[0], rangeEnd = _a[1];
                 var rangeXValues = xValues.slice(rangeStart, rangeEnd);
                 var rangeYValues = series.y.slice(rangeStart, rangeEnd);
@@ -492,35 +532,38 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     legendShape: legendShape,
                     data: rangeXValues.map(function (x, i) {
                         var _a, _b;
-                        return (tslib_1.__assign(tslib_1.__assign({ x: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
+                        return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ x: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
                             ? { markerSize: markerSizes[i] }
                             : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
                                 ? { markerSize: series.marker.size }
-                                : {})), (textValues ? { text: textValues[i] } : {})));
+                                : {})), (textValues ? { text: textValues[i] } : {})), { yAxisCalloutData: getFormattedCalloutYData(rangeYValues[i], yAxisTickFormat) }));
                     }),
-                    color: seriesColor,
+                    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 }),
                     useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                 };
             });
         })
             .flat();
-        var yMinMaxValues = (0, utilities_1.findNumericMinMaxOfY)(chartData);
-        var _j = getTitles(input.layout), chartTitle = _j.chartTitle, xAxisTitle = _j.xAxisTitle, yAxisTitle = _j.yAxisTitle;
+        var yMinMax = getYMinMaxValues(input.data[0], input.layout);
+        if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
+            var yMinMaxValues = (0, utilities_1.findNumericMinMaxOfY)(chartData);
+            yMinMax.yMinValue = yMinMaxValues.startValue;
+            yMinMax.yMaxValue = yMinMaxValues.endValue;
+        }
         var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
         var chartProps = {
-            chartTitle: chartTitle,
             lineChartData: chartData,
         };
         var scatterChartProps = {
-            chartTitle: chartTitle,
             scatterChartData: chartData,
         };
+        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat);
         if (isAreaChart) {
-            return tslib_1.__assign(tslib_1.__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { mode: mode, width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
+            return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
         }
         else {
-            return tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { roundedTicks: true, yMinValue: yMinMaxValues.startValue, yMaxValue: yMinMaxValues.endValue, width: (_e = input.layout) === null || _e === void 0 ? void 0 : _e.width, height: (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 350, hideTickOverlap: true, enableReflow: false, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
+            return tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, roundedTicks: true, enableReflow: false }, commonProps), yMinMax);
         }
     };
     var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -541,7 +584,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;
+                var _a, _b, _c, _d, _e, _f;
                 if ((0, chart_utilities_1.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, chart_utilities_1.isInvalidValue)(yValue)) {
                     return null;
                 }
@@ -551,19 +594,17 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[i % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
                         : 0)
                     : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
+                var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
                 return {
                     x: series.x[i],
                     y: yValue,
                     legend: legend,
-                    color: color,
+                    color: (_f = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                 };
             })
                 .filter(function (point) { return point !== null; });
         })
-            .reverse()
-            .flat()
-            //reversing the order to invert the Y bars order as required by plotly.
-            .reverse();
+            .flat();
         var chartHeight = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 450;
         var margin = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.margin) === null || _d === void 0 ? void 0 : _d.l) !== null && _e !== void 0 ? _e : 0;
         var padding = (_h = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.margin) === null || _g === void 0 ? void 0 : _g.pad) !== null && _h !== void 0 ? _h : 0;
@@ -572,25 +613,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));
-        var _t = getTitles(input.layout), chartTitle = _t.chartTitle, xAxisTitle = _t.xAxisTitle, yAxisTitle = _t.yAxisTitle;
-        return {
-            data: chartData,
-            chartTitle: chartTitle,
-            xAxisTitle: xAxisTitle,
-            yAxisTitle: yAxisTitle,
-            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({ 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,
-        };
+                : ((_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 transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -705,23 +730,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var rangeValuesForColorScale = Array.isArray(colorscale)
             ? colorscale.map(function (arr) { return arr[1]; })
             : defaultRange;
-        var _9 = getTitles(input.layout), chartTitle = _9.chartTitle, xAxisTitle = _9.xAxisTitle, yAxisTitle = _9.yAxisTitle;
-        return {
-            data: [heatmapData],
-            domainValuesForColorScale: domainValuesForColorScale,
-            rangeValuesForColorScale: rangeValuesForColorScale,
-            hideLegend: true,
-            showYAxisLables: true,
-            chartTitle: chartTitle,
-            xAxisTitle: xAxisTitle,
-            yAxisTitle: yAxisTitle,
-            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,
-        };
+        return 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 }, getTitles(input.layout)), getAxisCategoryOrderProps([firstData], input.layout));
     };
     exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
     var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -1183,26 +1192,44 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         return 'default';
     };
-    var getAllupLegendsProps = function (input, colorMap, colorwayType, isDarkTheme) {
+    var getAllupLegendsProps = function (input, colorMap, colorwayType, traceInfo, isDarkTheme) {
         var allupLegends = [];
         // reduce on showlegend boolean propperty. reduce should return true if at least one series has showlegend true
         var toShowLegend = input.data.reduce(function (acc, series) {
-            return acc || series.showlegend === true;
+            return (acc || series.showlegend === true || series.showlegend === undefined);
         }, false);
         if (toShowLegend) {
             input.data.forEach(function (series, index) {
-                var _a, _b, _c, _d, _e;
-                var name = series.legendgroup;
-                var color = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.color) || ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color);
-                var legendShape = getLegendShape(series);
-                var resolvedColor = (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, color, colorMap, isDarkTheme);
-                if (name !== undefined && allupLegends.some(function (group) { return group.title === name; }) === false) {
-                    allupLegends.push({
-                        title: name,
-                        color: resolvedColor,
-                        shape: legendShape,
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+                if (traceInfo[index].type === 'donut') {
+                    var pieSeries = series;
+                    var colors_2 = (0, PlotlyColorAdapter_1.extractColor)((_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.piecolorway) !== null && _b !== void 0 ? _b : (_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, (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.piecolorway) !== null && _g !== void 0 ? _g : (_h = pieSeries === null || pieSeries === void 0 ? void 0 : pieSeries.marker) === null || _h === void 0 ? void 0 : _h.colors, colorMap, isDarkTheme);
+                    (_j = pieSeries.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, labelIndex) {
+                        var legend = "".concat(label);
+                        // resolve color for each legend from the extracted colors
+                        var color = (0, PlotlyColorAdapter_1.resolveColor)(colors_2, labelIndex, legend, colorMap, isDarkTheme);
+                        if (legend !== '' && allupLegends.some(function (group) { return group.title === legend; }) === false) {
+                            allupLegends.push({
+                                title: legend,
+                                color: color,
+                            });
+                        }
                     });
                 }
+                else if ((0, exports.isNonPlotType)(traceInfo[index].type) === false) {
+                    var plotSeries = series;
+                    var name_1 = plotSeries.legendgroup;
+                    var color = ((_k = plotSeries.line) === null || _k === void 0 ? void 0 : _k.color) || ((_l = plotSeries.marker) === null || _l === void 0 ? void 0 : _l.color);
+                    var legendShape = getLegendShape(plotSeries);
+                    var resolvedColor = (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, color, colorMap, isDarkTheme);
+                    if (name_1 !== undefined && name_1 !== '' && allupLegends.some(function (group) { return group.title === name_1; }) === false) {
+                        allupLegends.push({
+                            title: name_1,
+                            color: resolvedColor,
+                            shape: legendShape,
+                        });
+                    }
+                }
             });
         }
         return {
@@ -1265,155 +1292,205 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
         return parseInt(normalizedKey, 10) - 1;
     };
-    var getGridProperties = function (layout, isMultiPlot) {
+    var isNonPlotType = function (chartType) {
+        return ['donut', 'sankey', 'pie'].includes(chartType);
+    };
+    exports.isNonPlotType = isNonPlotType;
+    var getGridProperties = function (schema, isMultiPlot, validTracesInfo) {
         var _a;
-        var gridX = [];
-        var gridY = [];
+        var domainX = [];
+        var domainY = [];
+        var cartesianDomains = 0;
         var annotations = {};
         var templateRows = '1fr';
         var templateColumns = '1fr';
         var gridLayout = {};
-        if (layout === undefined || layout === null || Object.keys(layout).length === 0) {
-            return { templateRows: templateRows, templateColumns: templateColumns, layout: gridLayout };
-        }
-        if (!layout.xaxis || !layout.yaxis) {
-            return { templateRows: templateRows, templateColumns: templateColumns, layout: gridLayout };
-        }
         if (!isMultiPlot) {
             return { templateRows: templateRows, templateColumns: templateColumns, layout: gridLayout };
         }
-        Object.keys(layout).forEach(function (key) {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-            if (key.startsWith('xaxis')) {
-                var index = getIndexFromKey(key, 'xaxis');
-                var anchor = (_b = (_a = layout[key]) === null || _a === void 0 ? void 0 : _a.anchor) !== null && _b !== void 0 ? _b : 'y';
-                var anchorIndex = getIndexFromKey(anchor, 'y');
-                if (index !== anchorIndex) {
-                    throw new Error("Invalid layout: xaxis ".concat(index + 1, " anchor should be y").concat(anchorIndex + 1));
+        var layout = schema === null || schema === void 0 ? void 0 : schema.layout;
+        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, _e;
+                if (key.startsWith('xaxis')) {
+                    var index = getIndexFromKey(key, 'xaxis');
+                    var anchor = (_b = (_a = layout[key]) === null || _a === void 0 ? void 0 : _a.anchor) !== null && _b !== void 0 ? _b : 'y';
+                    var anchorIndex = getIndexFromKey(anchor, 'y');
+                    if (index !== anchorIndex) {
+                        throw new Error("Invalid layout: xaxis ".concat(index + 1, " anchor should be y").concat(anchorIndex + 1));
+                    }
+                    var xAxisLayout = layout[key];
+                    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,
+                    };
+                    domainX.push(domainXInfo);
                 }
-                gridX[index] = (_d = (_c = layout[key]) === null || _c === void 0 ? void 0 : _c.domain) !== null && _d !== void 0 ? _d : [];
-            }
-            else if (key.startsWith('yaxis')) {
-                var index = getIndexFromKey(key, 'yaxis');
-                var anchor = (_f = (_e = layout[key]) === null || _e === void 0 ? void 0 : _e.anchor) !== null && _f !== void 0 ? _f : 'x';
-                var anchorIndex = getIndexFromKey(anchor, 'x');
-                if (index !== anchorIndex) {
-                    if ((index === 1 && anchorIndex === 0) || ((_g = layout.yaxis2) === null || _g === void 0 ? void 0 : _g.side) === 'right') {
-                        // Special case for secondary y axis where yaxis2 can anchor to x1
-                        return { templateRows: templateRows, templateColumns: templateColumns };
+                else if (key.startsWith('yaxis')) {
+                    var index = getIndexFromKey(key, 'yaxis');
+                    var anchor = (_d = (_c = layout[key]) === null || _c === void 0 ? void 0 : _c.anchor) !== null && _d !== void 0 ? _d : 'x';
+                    var anchorIndex = getIndexFromKey(anchor, 'x');
+                    if (index !== anchorIndex) {
+                        if ((index === 1 && anchorIndex === 0) || ((_e = layout.yaxis2) === null || _e === void 0 ? void 0 : _e.side) === 'right') {
+                            // Special case for secondary y axis where yaxis2 can anchor to x1
+                            return { templateRows: templateRows, templateColumns: templateColumns };
+                        }
+                        throw new Error("Invalid layout: yaxis ".concat(index + 1, " anchor should be x").concat(anchorIndex + 1));
                     }
-                    throw new Error("Invalid layout: yaxis ".concat(index + 1, " anchor should be x").concat(anchorIndex + 1));
+                    var yAxisLayout = layout[key];
+                    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,
+                    };
+                    domainY.push(domainYInfo);
                 }
-                gridY[index] = (_j = (_h = layout[key]) === null || _h === void 0 ? void 0 : _h.domain) !== null && _j !== void 0 ? _j : [];
-            }
-        });
-        (_a = layout.annotations) === null || _a === void 0 ? void 0 : _a.forEach(function (annotation) {
-            var xMatches = gridX.flatMap(function (interval, idx) {
-                return (annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval[0] && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval[1] ? [idx] : [];
             });
-            var yMatch = gridY.findIndex(function (interval, yIndex) {
-                return xMatches.includes(yIndex) &&
-                    (annotation === null || annotation === void 0 ? void 0 : annotation.y) >= interval[0] &&
-                    (annotation === null || annotation === void 0 ? void 0 : annotation.y) <= interval[1];
-            });
-            if (yMatch !== -1) {
-                if (annotations[yMatch] === undefined) {
-                    annotations[yMatch] = {};
-                }
-                if ((annotation === null || annotation === void 0 ? void 0 : annotation.textangle) === 90) {
-                    annotations[yMatch].yAnnotation = annotation.text;
-                }
-                else {
-                    annotations[yMatch].xAnnotation = annotation.text;
-                }
+        }
+        cartesianDomains = domainX.length; // Assuming that the number of x and y axes is the same
+        validTracesInfo.forEach(function (trace, index) {
+            var _a, _b, _c, _d, _e;
+            if ((0, exports.isNonPlotType)(trace.type)) {
+                var series = (_a = schema === null || schema === void 0 ? void 0 : schema.data) === null || _a === void 0 ? void 0 : _a[index];
+                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,
+                };
+                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,
+                };
+                domainX.push(domainXInfo);
+                domainY.push(domainYInfo);
             }
         });
-        if (gridX.length > 0) {
+        if (layout !== undefined && layout !== null && Object.keys(layout).length > 0) {
+            (_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] : [];
+                });
+                var yMatch = domainY.findIndex(function (interval, yIndex) {
+                    return xMatches.includes(yIndex) &&
+                        (annotation === null || annotation === void 0 ? void 0 : annotation.y) >= interval.start &&
+                        (annotation === null || annotation === void 0 ? void 0 : annotation.y) <= interval.end;
+                });
+                if (yMatch !== -1) {
+                    if (annotations[yMatch] === undefined) {
+                        annotations[yMatch] = {};
+                    }
+                    if ((annotation === null || annotation === void 0 ? void 0 : annotation.textangle) === 90) {
+                        annotations[yMatch].yAnnotation = annotation.text;
+                    }
+                    else {
+                        annotations[yMatch].xAnnotation = annotation.text;
+                    }
+                }
+            });
+        }
+        if (domainX.length > 0) {
             var uniqueXIntervals_1 = new Map();
-            gridX.forEach(function (interval) {
-                var key = "".concat(interval[0], "-").concat(interval[1]);
+            domainX.forEach(function (interval) {
+                var key = "".concat(interval.start, "-").concat(interval.end);
                 if (!uniqueXIntervals_1.has(key)) {
                     uniqueXIntervals_1.set(key, interval);
                 }
             });
-            var minXInterval_1 = Math.min.apply(Math, Array.from(uniqueXIntervals_1.values()).map(function (interval) { return interval[1] - interval[0]; }));
-            templateColumns = Array.from(uniqueXIntervals_1.values())
-                .map(function (interval) { return "".concat((interval[1] - interval[0]) / minXInterval_1, "fr"); })
-                .join(' ');
-            var columnNumber_1 = 1;
-            var lastIntervalEnd_1 = 0;
-            gridX.forEach(function (interval, index) {
-                if (interval.length === 0) {
-                    return;
-                }
-                var cellName = "x".concat(index === 0 ? '' : index + 1);
+            var sortedXStart_1 = Array.from(uniqueXIntervals_1.values())
+                .map(function (interval) { return interval.start; })
+                .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];
                 var xAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.xAnnotation;
-                if (interval[0] < lastIntervalEnd_1) {
-                    columnNumber_1 = 1;
-                }
-                lastIntervalEnd_1 = interval[1];
                 var row = {
                     row: -1,
-                    column: columnNumber_1,
+                    column: columnNumber,
                     xAnnotation: xAnnotation,
+                    xDomain: interval,
+                    yDomain: { start: 0, end: 1 }, // Default yDomain for x-axis
                 };
                 gridLayout[cellName] = row;
-                columnNumber_1 += 1;
             });
         }
-        var numColumns = Math.max.apply(Math, Object.values(gridLayout).map(function (cell) { var _a; return (_a = cell.column) !== null && _a !== void 0 ? _a : 0; }));
-        var columnFill = {};
-        for (var i = 1; i <= numColumns; i++) {
-            columnFill[i] = { row: 1, fillDomain: 0 };
-        }
-        if (gridY.length > 0) {
+        if (domainY.length > 0) {
             var uniqueYIntervals_1 = new Map();
-            gridY.forEach(function (interval) {
-                var key = "".concat(interval[0], "-").concat(interval[1]);
+            domainY.forEach(function (interval) {
+                var key = "".concat(interval.start, "-").concat(interval.end);
                 if (!uniqueYIntervals_1.has(key)) {
                     uniqueYIntervals_1.set(key, interval);
                 }
             });
-            var minYInterval_1 = Math.min.apply(Math, Array.from(uniqueYIntervals_1.values()).map(function (interval) { return interval[1] - interval[0]; }));
-            templateRows = Array.from(uniqueYIntervals_1.values())
-                .map(function (interval) { return "".concat((interval[1] - interval[0]) / minYInterval_1, "fr"); })
-                .join(' ');
-            gridY.forEach(function (interval, index) {
-                if (interval.length === 0) {
-                    return;
-                }
-                var cellName = "x".concat(index === 0 ? '' : index + 1);
+            var sortedYStart_1 = Array.from(uniqueYIntervals_1.values())
+                .map(function (interval) { return interval.start; })
+                .sort();
+            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];
                 if (cell !== undefined) {
-                    cell.row = columnFill[cell.column].row;
+                    cell.row = rowNumber;
                     cell.yAnnotation = yAnnotation;
+                    cell.yDomain = interval;
                 }
-                columnFill[cell.column].fillDomain = interval[1];
-                columnFill[cell.column].row += 1;
             });
         }
-        // reverse the order of rows in grid layout from bottom-top to top-bottom as required by CSS grid
-        var reversedGridLayout = {};
-        // find the maximum row number
-        var maxRowNumber = Math.max.apply(Math, Object.values(gridLayout).map(function (cell) { var _a; return (_a = cell.row) !== null && _a !== void 0 ? _a : 0; }));
-        // iterate over the gridLayout and reverse the row numbers
-        Object.keys(gridLayout).forEach(function (key) {
-            var cell = gridLayout[key];
-            if (cell.row !== undefined) {
-                // reverse the row number
-                cell.row = maxRowNumber - cell.row + 1;
-            }
-            reversedGridLayout[key] = cell;
-        });
         return {
             templateRows: templateRows,
             templateColumns: templateColumns,
-            layout: reversedGridLayout,
+            layout: gridLayout,
         };
     };
     exports.getGridProperties = getGridProperties;
+    /**
+     * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/category_order_defaults.js#L50}
+     */
+    var getAxisCategoryOrderProps = function (data, layout) {
+        var result = {};
+        var axesById = {
+            x: layout === null || layout === void 0 ? void 0 : layout.xaxis,
+            y: layout === null || layout === void 0 ? void 0 : layout.yaxis,
+        };
+        Object.keys(axesById).forEach(function (axId) {
+            var ax = axesById[axId];
+            var axLetter = axId[0];
+            var propName = "".concat(axLetter, "AxisCategoryOrder");
+            var values = [];
+            data.forEach(function (series) {
+                var _a;
+                (_a = series[axLetter]) === null || _a === void 0 ? void 0 : _a.forEach(function (val) {
+                    if (!(0, chart_utilities_1.isInvalidValue)(val)) {
+                        values.push(val);
+                    }
+                });
+            });
+            var isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || ((0, chart_utilities_1.isStringArray)(values) && !(0, chart_utilities_1.isNumberArray)(values) && !(0, chart_utilities_1.isDateArray)(values));
+            if (!isAxisTypeCategory) {
+                return;
+            }
+            var isValidArray = (0, chart_utilities_1.isArrayOrTypedArray)(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
+            if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
+                result[propName] = ax.categoryarray;
+                return;
+            }
+            if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
+                var categoriesInTraceOrder = Array.from(new Set(values));
+                result[propName] = categoriesInTraceOrder;
+                return;
+            }
+            result[propName] = ax.categoryorder;
+        });
+        return result;
+    };
 });
 //# sourceMappingURL=PlotlySchemaAdapter.js.map