@fluentui/react-charting 5.24.4 → 5.24.5

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -5,10 +5,12 @@ import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { GaugeChartVariant } from '../GaugeChart/index';
 import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
-import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, } from '@fluentui/chart-utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
+export var NON_PLOT_KEY_PREFIX = 'nonplot_';
+export var SINGLE_REPEAT = 'repeat(1, 1fr)';
 var dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -56,6 +58,47 @@ function getTitles(layout) {
     };
     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: d3Format(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 formatToLocaleString(yVal);
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export var correctYearMonth = function (xValues) {
     var presentYear = new Date().getFullYear();
@@ -203,7 +246,7 @@ export var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, color
             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,
@@ -220,6 +263,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
     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) &&
@@ -260,11 +304,13 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
                     : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
                 var opacity = 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: (_e = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color,
+                        yAxisCalloutData: yAxisCalloutData,
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -281,6 +327,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
                         color: (_f = rgb(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                         lineOptions: __assign(__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);
@@ -290,8 +337,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
             });
         });
     });
-    var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-    return __assign(__assign(__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 }), getAxisCategoryOrderProps(input.data, input.layout));
+    return __assign(__assign(__assign(__assign(__assign(__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);
 };
 var createColorScale = function (layout, series) {
     var _a, _b, _c, _d, _e, _f;
@@ -315,6 +361,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
     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) &&
@@ -342,19 +389,20 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
                         : 0)
                     : resolveColor(extractedColors, xIndex, legend, colorMap, isDarkTheme);
                 var opacity = getOpacity(series, xIndex);
+                var yVal = series.y[xIndex];
                 mapXToDataPoints[x].series.push({
                     key: legend,
-                    data: series.y[xIndex],
+                    data: yVal,
                     xAxisCalloutData: x,
                     color: (_f = 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 __assign(__assign(__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 }), getAxisCategoryOrderProps(input.data, input.layout));
+    return __assign(__assign(__assign(__assign(__assign(__assign(__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);
 };
 export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
@@ -417,8 +465,7 @@ export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMa
                 : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
         });
     });
-    var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-    return __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, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true }, getAxisCategoryOrderProps(input.data, input.layout));
+    return __assign(__assign(__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));
 };
 export var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
@@ -430,7 +477,7 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
 };
 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',
@@ -443,7 +490,8 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     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;
@@ -481,11 +529,11 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
                 legendShape: legendShape,
                 data: rangeXValues.map(function (x, i) {
                     var _a, _b;
-                    return (__assign(__assign({ x: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
+                    return (__assign(__assign(__assign({ x: 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: (_c = rgb(seriesColor).copy({ opacity: seriesOpacity }).formatHex8()) !== null && _c !== void 0 ? _c : seriesColor,
                 lineOptions: __assign(__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
@@ -494,22 +542,25 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         });
     })
         .flat();
-    var yMinMaxValues = 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 = 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 = __assign(__assign(__assign(__assign(__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 __assign(__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 __assign({ data: chartProps, mode: mode }, commonProps);
     }
     else {
-        return __assign(__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 __assign(__assign({ data: isScatterChart ? scatterChartProps : chartProps, roundedTicks: true, enableReflow: false }, commonProps), yMinMax);
     }
 };
 export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -559,10 +610,9 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
     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 __assign({ 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 __assign(__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 }, getAxisCategoryOrderProps(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 }, getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout));
 };
 export 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;
@@ -676,8 +726,7 @@ export var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, col
     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 __assign({ 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 }, getAxisCategoryOrderProps([firstData], input.layout));
+    return __assign(__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));
 };
 export var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -1133,26 +1182,44 @@ var getLegendShape = function (series) {
     }
     return 'default';
 };
-export var getAllupLegendsProps = function (input, colorMap, colorwayType, isDarkTheme) {
+export 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 = 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_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 = resolveColor(colors_1, labelIndex, legend, colorMap, isDarkTheme);
+                    if (legend !== '' && allupLegends.some(function (group) { return group.title === legend; }) === false) {
+                        allupLegends.push({
+                            title: legend,
+                            color: color,
+                        });
+                    }
                 });
             }
+            else if (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 = 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 {
@@ -1212,153 +1279,162 @@ var getIndexFromKey = function (key, pattern) {
     var normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
     return parseInt(normalizedKey, 10) - 1;
 };
-export var getGridProperties = function (layout, isMultiPlot) {
+export var isNonPlotType = function (chartType) {
+    return ['donut', 'sankey', 'pie'].includes(chartType);
+};
+export 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 (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(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(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,
     };
 };
 /**