@fluentui/react-charting 5.24.1 → 5.24.3

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.isStringArray = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
+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;
 var tslib_1 = require("tslib");
 var d3_array_1 = require("d3-array");
 var d3_scale_1 = require("d3-scale");
@@ -9,7 +9,6 @@ var colors_1 = require("../../utilities/colors");
 var index_1 = require("../GaugeChart/index");
 var utilities_1 = require("../../utilities/utilities");
 var chart_utilities_1 = require("@fluentui/chart-utilities");
-var d3_time_format_1 = require("d3-time-format");
 var d3_shape_1 = require("d3-shape");
 var PlotlyColorAdapter_1 = require("./PlotlyColorAdapter");
 var dashOptions = {
@@ -50,17 +49,6 @@ var dashOptions = {
         lineBorderWidth: '4',
     },
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var isMonth = function (possiblyMonthValue) {
-    var parseFullMonth = (0, d3_time_format_1.timeParse)('%B');
-    var parseShortMonth = (0, d3_time_format_1.timeParse)('%b');
-    return parseFullMonth(possiblyMonthValue) !== null || parseShortMonth(possiblyMonthValue) !== null;
-};
-var isMonthArray = function (data) {
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    return (0, chart_utilities_1.isArrayOfType)(data, function (value) { return isMonth(value) || value === null; });
-};
-exports.isMonthArray = isMonthArray;
 function getTitles(layout) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var titles = {
@@ -108,8 +96,9 @@ var correctYearMonth = function (xValues) {
     return xValues;
 };
 exports.correctYearMonth = correctYearMonth;
-var usesSecondaryYScale = function (series) {
-    return series.yaxis === 'y2';
+var usesSecondaryYScale = function (series, layout) {
+    var _a, _b;
+    return series.yaxis === 'y2' && (((_a = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _a === void 0 ? void 0 : _a.anchor) === 'x' || ((_b = layout === null || layout === void 0 ? void 0 : layout.yaxis2) === null || _b === void 0 ? void 0 : _b.side) === 'right');
 };
 var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowedMaxY) {
     var _a, _b, _c, _d;
@@ -117,7 +106,7 @@ var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowed
     var yMinValue;
     var yMaxValue;
     data.forEach(function (series) {
-        if (usesSecondaryYScale(series)) {
+        if (usesSecondaryYScale(series, layout)) {
             containsSecondaryYAxis = true;
             var yValues = series.y;
             if (yValues) {
@@ -156,7 +145,27 @@ var _getGaugeAxisColor = function (colorway, colorwayType, color, colorMap, isDa
     return (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, 0, '', colorMap, isDarkTheme);
 };
 exports._getGaugeAxisColor = _getGaugeAxisColor;
-var transformPlotlyJsonToDonutProps = function (input, colorMap, colorwayType, isDarkTheme) {
+var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate, isXNumber) {
+    if (x === null || x === undefined) {
+        return '';
+    }
+    if (isXYearCategory) {
+        return x.toString();
+    }
+    if (isXString) {
+        if (isXDate) {
+            var date = new Date(x);
+            return date;
+        }
+        if (isXNumber) {
+            return parseFloat(x);
+        }
+        return x;
+    }
+    return x;
+};
+exports.resolveXAxisPoint = resolveXAxisPoint;
+var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var firstData = input.data[0];
     // extract colors for each series only once
@@ -209,33 +218,52 @@ var transformPlotlyJsonToDonutProps = function (input, colorMap, colorwayType, i
     };
 };
 exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
-var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
+var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
     var _a, _b, _c;
     var mapXToDataPoints = {};
     var yMaxValue = 0;
     var yMinValue = 0;
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
-    var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+    var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
+    var colorScale = undefined;
     input.data.forEach(function (series, index1) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+            (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+            ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+            typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
         // extract bar colors for each series only once
-        var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+        var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
         // extract line colors for each series only once
-        var extractedLineColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
+        var extractedLineColors = (0, PlotlyColorAdapter_1.extractColor)((_p = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.layout) === null || _p === void 0 ? void 0 : _p.colorway, colorwayType, (_q = series.line) === null || _q === void 0 ? void 0 : _q.color, colorMap, isDarkTheme);
+        var xValues = series.x;
+        var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
+        var isXString = (0, chart_utilities_1.isStringArray)(xValues);
+        var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
         var validXYRanges = (0, exports.getValidXYRanges)(series);
         validXYRanges.forEach(function (_a, rangeIdx) {
             var rangeStart = _a[0], rangeEnd = _a[1];
             var rangeXValues = series.x.slice(rangeStart, rangeEnd);
             var rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach(function (x, index2) {
-                var _a, _b;
+                var _a, _b, _c, _d;
                 if (!mapXToDataPoints[x]) {
-                    mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
+                    mapXToDataPoints[x] = {
+                        xAxisPoint: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        chartData: [],
+                        lineData: [],
+                    };
                 }
                 var legend = legends[index1];
-                // resolve color for each legend's bars from the extracted colors
-                var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedBarColors, index1, legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the colorscale or extracted colors
+                var color = colorScale
+                    ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
+                        ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index2 % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
+                        : 0)
+                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedBarColors, index2, legend, colorMap, isDarkTheme);
                 var yVal = rangeYValues[index2];
                 if (series.type === 'bar') {
                     mapXToDataPoints[x].chartData.push({
@@ -250,21 +278,16 @@ var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayType, is
                 else if (series.type === 'scatter' || !!fallbackVSBC) {
                     var lineColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
                     var lineOptions = getLineOptions(series.line);
-                    var dashType = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.dash) || 'solid';
-                    var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
-                        ? 'dottedLine'
-                        : ((_b = series.mode) === null || _b === void 0 ? void 0 : _b.includes('markers'))
-                            ? 'circle'
-                            : 'default';
+                    var legendShape = getLegendShape(series);
                     mapXToDataPoints[x].lineData.push({
                         legend: legend + (validXYRanges.length > 1 ? ".".concat(rangeIdx + 1) : ''),
                         legendShape: legendShape,
                         y: yVal,
                         color: lineColor,
                         lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
-                        useSecondaryYScale: usesSecondaryYScale(series),
+                        useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                     });
-                    if (!usesSecondaryYScale(series) && typeof yVal === 'number') {
+                    if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
                         yMinValue = Math.min(yMinValue, yVal);
                     }
@@ -276,40 +299,40 @@ var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayType, is
     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 });
 };
 exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
-var createColorScale = function (colorscale, domain) {
-    var dMin = domain[0], dMax = domain[1];
+var createColorScale = function (layout, series) {
+    var _a, _b, _c, _d, _e, _f;
+    var scale = (_a = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _a === void 0 ? void 0 : _a.colorscale;
+    var colorValues = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color;
+    var _g = [
+        (_d = (_c = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _c === void 0 ? void 0 : _c.cmin) !== null && _d !== void 0 ? _d : Math.min.apply(Math, colorValues),
+        (_f = (_e = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _e === void 0 ? void 0 : _e.cmax) !== null && _f !== void 0 ? _f : Math.max.apply(Math, colorValues),
+    ], dMin = _g[0], dMax = _g[1];
     // Normalize colorscale domain to actual data domain
-    var scaleDomain = colorscale.map(function (_a) {
+    var scaleDomain = scale.map(function (_a) {
         var pos = _a[0];
         return dMin + pos * (dMax - dMin);
     });
-    var scaleColors = colorscale.map(function (item) { return item[1]; });
+    var scaleColors = scale.map(function (item) { return item[1]; });
     return (0, d3_scale_1.scaleLinear)().domain(scaleDomain).range(scaleColors);
 };
-var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
+var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
     var mapXToDataPoints = {};
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
-    var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+    var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
     var colorScale = undefined;
     input.data.forEach(function (series, index1) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
             (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
             ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
             typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
-            var scale = input.layout.coloraxis.colorscale;
-            var colorValues = (_h = series.marker) === null || _h === void 0 ? void 0 : _h.color;
-            var _t = [
-                (_k = (_j = input.layout.coloraxis) === null || _j === void 0 ? void 0 : _j.cmin) !== null && _k !== void 0 ? _k : Math.min.apply(Math, colorValues),
-                (_m = (_l = input.layout.coloraxis) === null || _l === void 0 ? void 0 : _l.cmax) !== null && _m !== void 0 ? _m : Math.max.apply(Math, colorValues),
-            ], dMin = _t[0], dMax = _t[1];
-            colorScale = createColorScale(scale, [dMin, dMax]);
+            colorScale = createColorScale(input.layout, series);
         }
         // extract colors for each series only once
-        var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.template) === null || _p === void 0 ? void 0 : _p.layout) === null || _q === void 0 ? void 0 : _q.colorway, colorwayType, (_r = series.marker) === null || _r === void 0 ? void 0 : _r.color, colorMap, isDarkTheme);
-        (_s = series.x) === null || _s === void 0 ? void 0 : _s.forEach(function (x, xIndex) {
-            var _a, _b, _c, _d;
+        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;
             if ((0, chart_utilities_1.isInvalidValue)(x) || (0, chart_utilities_1.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                 return;
             }
@@ -320,7 +343,9 @@ var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, is
                 var legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 var color = colorScale
-                    ? 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] : 0)
+                    ? 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);
                 mapXToDataPoints[x].series.push({
                     key: legend,
@@ -328,7 +353,7 @@ var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, is
                     xAxisCalloutData: x,
                     color: color,
                     legend: legend,
-                    useSecondaryYScale: usesSecondaryYScale(series),
+                    useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                 });
             }
         });
@@ -337,17 +362,24 @@ var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, is
     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 });
 };
 exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
-var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
+var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
     var vbcData = [];
-    var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+    var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
+    var colorScale = undefined;
     input.data.forEach(function (series, seriesIdx) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (!series.x) {
             return;
         }
+        if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+            (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+            ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+            typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+        var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
         var xValues = [];
         var yValues = [];
         series.x.forEach(function (xVal, index) {
@@ -358,10 +390,10 @@ var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayType, isD
             xValues.push(xVal);
             yValues.push(yVal);
         });
-        var isXString = (0, exports.isStringArray)(xValues);
+        var isXString = (0, chart_utilities_1.isStringArray)(xValues);
         // TODO: In case of a single bin, add an empty bin of the same size to prevent the
         // default bar width from being used and ensure the bar spans the full intended range.
-        var xBins = createBins(xValues, (_e = series.xbins) === null || _e === void 0 ? void 0 : _e.start, (_f = series.xbins) === null || _f === void 0 ? void 0 : _f.end, (_g = series.xbins) === null || _g === void 0 ? void 0 : _g.size);
+        var xBins = createBins(xValues, (_m = series.xbins) === null || _m === void 0 ? void 0 : _m.start, (_o = series.xbins) === null || _o === void 0 ? void 0 : _o.end, (_p = series.xbins) === null || _p === void 0 ? void 0 : _p.size);
         var yBins = xBins.map(function () { return []; });
         var total = 0;
         xValues.forEach(function (xVal, index) {
@@ -376,9 +408,14 @@ var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayType, isD
             return yVal;
         });
         xBins.forEach(function (bin, index) {
+            var _a, _b, _c, _d;
             var legend = legends[seriesIdx];
-            // resolve color for each legend's bars from the extracted colors
-            var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
+            // resolve color for each legend's bars from the colorscale or extracted colors
+            var color = colorScale
+                ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
+                    ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
+                    : 0)
+                : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
             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
                 ? {}
@@ -402,14 +439,35 @@ var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayType, isD
     };
 };
 exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
-var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, isScatterMarkers, colorMap, colorwayType, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f;
+var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
+};
+exports.transformPlotlyJsonToAreaChartProps = transformPlotlyJsonToAreaChartProps;
+var transformPlotlyJsonToLineChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'line', colorMap, colorwayType, isDarkTheme);
+};
+exports.transformPlotlyJsonToLineChartProps = transformPlotlyJsonToLineChartProps;
+var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
+};
+exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
+var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    var isScatterMarkers = [
+        'text+markers',
+        'markers+text',
+        'lines+markers',
+        'markers+line',
+        'text+lines+markers',
+    ].includes((_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.mode);
+    var isAreaChart = chartType === 'area';
+    var isScatterChart = chartType === 'scatter';
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     var mode = 'tonexty';
-    var _g = getLegendProps(input.data, input.layout), legends = _g.legends, hideLegend = _g.hideLegend;
+    var _h = getLegendProps(input.data, input.layout, isMultiPlot), legends = _h.legends, hideLegend = _h.hideLegend;
     var chartData = input.data
         .map(function (series, index) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g;
         var colors = isScatterMarkers
             ? ((_a = series === null || series === void 0 ? void 0 : series.mode) === null || _a === void 0 ? void 0 : _a.includes('line'))
                 ? (_b = series.line) === null || _b === void 0 ? void 0 : _b.color
@@ -418,20 +476,16 @@ var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, isSca
         // extract colors for each series only once
         var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, colors, colorMap, isDarkTheme);
         var xValues = series.x;
-        var isString = (0, exports.isStringArray)(xValues);
+        var isXString = (0, chart_utilities_1.isStringArray)(xValues);
         var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
         var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
+        var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
         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);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         var lineOptions = getLineOptions(series.line);
-        var dashType = ((_h = series.line) === null || _h === void 0 ? void 0 : _h.dash) || 'solid';
-        var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
-            ? 'dottedLine'
-            : ((_j = series.mode) === null || _j === void 0 ? void 0 : _j.includes('markers'))
-                ? 'circle'
-                : 'default';
+        var legendShape = getLegendShape(series);
         var validXYRanges = (0, exports.getValidXYRanges)(series);
         return validXYRanges.map(function (_a, rangeIdx) {
             var _b;
@@ -441,56 +495,71 @@ var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, isSca
             var markerSizes = (0, chart_utilities_1.isArrayOrTypedArray)((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size)
                 ? series.marker.size.slice(rangeStart, rangeEnd)
                 : [];
+            var textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : undefined;
             return {
                 legend: legend,
                 legendShape: legendShape,
                 data: rangeXValues.map(function (x, i) {
                     var _a, _b;
-                    return (tslib_1.__assign({ x: isString ? (isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x) : x, y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
+                    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)
                         ? { markerSize: markerSizes[i] }
                         : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
                             ? { markerSize: series.marker.size }
-                            : {})));
+                            : {})), (textValues ? { text: textValues[i] } : {})));
                 }),
                 color: seriesColor,
                 lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
-                useSecondaryYScale: usesSecondaryYScale(series),
+                useSecondaryYScale: usesSecondaryYScale(series, input.layout),
             };
         });
     })
         .flat();
     var yMinMaxValues = (0, utilities_1.findNumericMinMaxOfY)(chartData);
-    var _h = getTitles(input.layout), chartTitle = _h.chartTitle, xAxisTitle = _h.xAxisTitle, yAxisTitle = _h.yAxisTitle;
+    var _j = getTitles(input.layout), chartTitle = _j.chartTitle, xAxisTitle = _j.xAxisTitle, yAxisTitle = _j.yAxisTitle;
     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,
+    };
     if (isAreaChart) {
-        return tslib_1.__assign(tslib_1.__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { mode: mode, 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, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
+        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 });
     }
     else {
-        return tslib_1.__assign(tslib_1.__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { roundedTicks: true, yMinValue: yMinMaxValues.startValue, yMaxValue: yMinMaxValues.endValue, width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, enableReflow: false, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 });
+        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 });
     }
 };
-exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
-var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, colorwayType, isDarkTheme) {
+var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    var _s = getLegendProps(input.data, input.layout), legends = _s.legends, hideLegend = _s.hideLegend;
+    var _s = getLegendProps(input.data, input.layout, isMultiPlot), legends = _s.legends, hideLegend = _s.hideLegend;
+    var colorScale = undefined;
     var chartData = input.data
         .map(function (series, index) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+            (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+            ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+            typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+        var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
         var legend = legends[index];
-        // resolve color for each legend's bars from the extracted colors
-        var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
         return series.y
             .map(function (yValue, i) {
-            var _a;
+            var _a, _b, _c, _d, _e;
             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;
             }
+            // resolve color for each legend's bars from the colorscale or extracted colors
+            var color = colorScale
+                ? 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[i % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
+                    : 0)
+                : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
             return {
                 x: series.x[i],
                 y: yValue,
@@ -533,7 +602,7 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap,
     };
 };
 exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
-var transformPlotlyJsonToHeatmapProps = function (input) {
+var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
     var firstData = input.data[0];
     var heatmapDataPoints = [];
@@ -553,8 +622,8 @@ var transformPlotlyJsonToHeatmapProps = function (input) {
             yValues_1.push(firstData.y[index]);
             zValues_1.push(zVal);
         });
-        var isXString_1 = (0, exports.isStringArray)(xValues_1);
-        var isYString_1 = (0, exports.isStringArray)(yValues_1);
+        var isXString_1 = (0, chart_utilities_1.isStringArray)(xValues_1);
+        var isYString_1 = (0, chart_utilities_1.isStringArray)(yValues_1);
         var xBins_1 = createBins(xValues_1, (_b = firstData.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = firstData.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = firstData.xbins) === null || _d === void 0 ? void 0 : _d.size);
         var yBins_1 = createBins(yValues_1, (_e = firstData.ybins) === null || _e === void 0 ? void 0 : _e.start, (_f = firstData.ybins) === null || _f === void 0 ? void 0 : _f.end, (_g = firstData.ybins) === null || _g === void 0 ? void 0 : _g.size);
         var zBins_1 = yBins_1.map(function () { return xBins_1.map(function () { return []; }); });
@@ -664,7 +733,7 @@ var transformPlotlyJsonToHeatmapProps = function (input) {
     };
 };
 exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
-var transformPlotlyJsonToSankeyProps = function (input, colorMap, colorwayType, isDarkTheme) {
+var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var _m = input.data[0], link = _m.link, node = _m.node;
     var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
@@ -712,7 +781,7 @@ var transformPlotlyJsonToSankeyProps = function (input, colorMap, colorwayType,
     };
 };
 exports.transformPlotlyJsonToSankeyProps = transformPlotlyJsonToSankeyProps;
-var transformPlotlyJsonToGaugeProps = function (input, colorMap, colorwayType, isDarkTheme) {
+var transformPlotlyJsonToGaugeProps = 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, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25;
     var firstData = input.data[0];
     var stepsColors = ((_a = firstData.gauge) === null || _a === void 0 ? void 0 : _a.steps) ? firstData.gauge.steps.map(function (step) { return step.color; }) : undefined;
@@ -812,7 +881,7 @@ var formatValue = function (value, colIndex, cells) {
     }
     return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
 };
-var transformPlotlyJsonToChartTableProps = function (input, colorMap, isDarkTheme) {
+var transformPlotlyJsonToChartTableProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var tableData = input.data[0];
     var normalizeHeaders = function (values, header) {
@@ -1018,12 +1087,6 @@ function getLineOptions(line) {
     }
     return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var isStringArray = function (arr) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (0, chart_utilities_1.isArrayOfType)(arr, function (value) { return typeof value === 'string' || value === null; });
-};
-exports.isStringArray = isStringArray;
 // TODO: Use binary search to find the appropriate bin for numeric value.
 var findBinIndex = function (bins, value, isString) {
     if (typeof value === 'undefined' || value === null) {
@@ -1047,7 +1110,7 @@ var createBins = function (data, binStart, binEnd, binSize) {
     if (!data || data.length === 0) {
         return [];
     }
-    if ((0, exports.isStringArray)(data)) {
+    if ((0, chart_utilities_1.isStringArray)(data)) {
         var categories_1 = Array.from(new Set(data));
         var start = typeof binStart === 'number' ? Math.ceil(binStart) : 0;
         var stop_1 = typeof binEnd === 'number' ? Math.floor(binEnd) + 1 : categories_1.length;
@@ -1118,7 +1181,48 @@ var precisionRound = function (value, precision) {
     var factor = Math.pow(10, precision);
     return Math.round(value * factor) / factor;
 };
-var getLegendProps = function (data, layout) {
+var getLegendShape = function (series) {
+    var _a, _b;
+    var dashType = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.dash) || 'solid';
+    if (dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot') {
+        return 'dottedLine';
+    }
+    else if ((_b = series.mode) === null || _b === void 0 ? void 0 : _b.includes('markers')) {
+        return 'circle';
+    }
+    return 'default';
+};
+var getAllupLegendsProps = function (input, colorMap, colorwayType, 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;
+    }, 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,
+                });
+            }
+        });
+    }
+    return {
+        legends: allupLegends,
+        centerLegends: true,
+        enabledWrapLines: true,
+        canSelectMultipleLegends: true,
+    };
+};
+exports.getAllupLegendsProps = getAllupLegendsProps;
+var getLegendProps = function (data, layout, isMultiPlot) {
     var legends = [];
     if (data.length === 1) {
         legends.push(data[0].name || '');
@@ -1128,10 +1232,11 @@ var getLegendProps = function (data, layout) {
             legends.push(series.name || "Series ".concat(index + 1));
         });
     }
-    var hideLegends = data.every(function (series) { return series.showlegend === false; });
+    var hideLegendsData = data.every(function (series) { return series.showlegend === false; });
+    var hideLegendsInferred = (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2);
     return {
         legends: legends,
-        hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2) ? true : hideLegends,
+        hideLegend: isMultiPlot || hideLegendsInferred || hideLegendsData,
     };
 };
 var getNumberAtIndexOrDefault = function (data, index) {
@@ -1165,4 +1270,158 @@ var getValidXYRanges = function (series) {
     return ranges;
 };
 exports.getValidXYRanges = getValidXYRanges;
+var getIndexFromKey = function (key, pattern) {
+    var normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
+    return parseInt(normalizedKey, 10) - 1;
+};
+var getGridProperties = function (layout, isMultiPlot) {
+    var _a;
+    var gridX = [];
+    var gridY = [];
+    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));
+            }
+            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 };
+                }
+                throw new Error("Invalid layout: yaxis ".concat(index + 1, " anchor should be x").concat(anchorIndex + 1));
+            }
+            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;
+            }
+        }
+    });
+    if (gridX.length > 0) {
+        var uniqueXIntervals_1 = new Map();
+        gridX.forEach(function (interval) {
+            var key = "".concat(interval[0], "-").concat(interval[1]);
+            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 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,
+                xAnnotation: xAnnotation,
+            };
+            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) {
+        var uniqueYIntervals_1 = new Map();
+        gridY.forEach(function (interval) {
+            var key = "".concat(interval[0], "-").concat(interval[1]);
+            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 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.yAnnotation = yAnnotation;
+            }
+            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,
+    };
+};
+exports.getGridProperties = getGridProperties;
 //# sourceMappingURL=PlotlySchemaAdapter.js.map