@fluentui/react-charts 0.0.0-nightly-20250819-0407.1 → 0.0.0-nightly-20250820-0406.1

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

@@ -18,21 +18,27 @@ _export(exports, {
     findArrayAttributes: function() {
         return findArrayAttributes;
     },
+    getAllupLegendsProps: function() {
+        return getAllupLegendsProps;
+    },
+    getGridProperties: function() {
+        return getGridProperties;
+    },
     getNumberAtIndexOrDefault: function() {
         return getNumberAtIndexOrDefault;
     },
     getValidXYRanges: function() {
         return getValidXYRanges;
     },
-    isStringArray: function() {
-        return isStringArray;
-    },
     projectPolarToCartesian: function() {
         return projectPolarToCartesian;
     },
     resolveXAxisPoint: function() {
         return resolveXAxisPoint;
     },
+    transformPlotlyJsonToAreaChartProps: function() {
+        return transformPlotlyJsonToAreaChartProps;
+    },
     transformPlotlyJsonToChartTableProps: function() {
         return transformPlotlyJsonToChartTableProps;
     },
@@ -51,6 +57,9 @@ _export(exports, {
     transformPlotlyJsonToHorizontalBarWithAxisProps: function() {
         return transformPlotlyJsonToHorizontalBarWithAxisProps;
     },
+    transformPlotlyJsonToLineChartProps: function() {
+        return transformPlotlyJsonToLineChartProps;
+    },
     transformPlotlyJsonToSankeyProps: function() {
         return transformPlotlyJsonToSankeyProps;
     },
@@ -74,6 +83,7 @@ const _utilities = require("../../utilities/utilities");
 const _chartutilities = require("@fluentui/chart-utilities");
 const _d3shape = require("d3-shape");
 const _PlotlyColorAdapter = require("./PlotlyColorAdapter");
+const _d3color = require("d3-color");
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -157,8 +167,9 @@ const correctYearMonth = (xValues)=>{
     });
     return xValues;
 };
-const usesSecondaryYScale = (series)=>{
-    return series.yaxis === 'y2';
+const usesSecondaryYScale = (series, layout)=>{
+    var _layout_yaxis2, _layout_yaxis21;
+    return series.yaxis === 'y2' && ((layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.anchor) === 'x' || (layout === null || layout === void 0 ? void 0 : (_layout_yaxis21 = layout.yaxis2) === null || _layout_yaxis21 === void 0 ? void 0 : _layout_yaxis21.side) === 'right');
 };
 const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>{
     var _layout_yaxis2, _layout_yaxis21, _layout_yaxis2_title, _layout_yaxis22;
@@ -166,7 +177,7 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
     let yMinValue;
     let yMaxValue;
     data.forEach((series)=>{
-        if (usesSecondaryYScale(series)) {
+        if (usesSecondaryYScale(series, layout)) {
             containsSecondaryYAxis = true;
             const yValues = series.y;
             if (yValues) {
@@ -219,7 +230,7 @@ const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNumber)=>{
     }
     return x;
 };
-const transformPlotlyJsonToDonutProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _firstData_marker, _firstData_labels, _input_layout3, _input_layout4, _input_layout5, _input_layout6;
     const firstData = input.data[0];
     var _input_layout_piecolorway, _input_layout_piecolorway1;
@@ -276,12 +287,12 @@ const transformPlotlyJsonToDonutProps = (input, colorMap, colorwayType, isDarkTh
         roundCorners: true
     };
 };
-const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
+const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
     var _input_layout, _input_layout1, _vsbcData_;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
@@ -296,7 +307,7 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
         const extractedLineColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template1 = _input_layout2.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
         const xValues = series.x;
         const isXDate = (0, _chartutilities.isDateArray)(xValues);
-        const isXString = isStringArray(xValues);
+        const isXString = (0, _chartutilities.isStringArray)(xValues);
         const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
         const validXYRanges = getValidXYRanges(series);
         validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
@@ -314,34 +325,40 @@ const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkThe
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
                 const yVal = rangeYValues[index2];
                 if (series.type === 'bar') {
+                    var _rgb_copy_formatHex8;
                     mapXToDataPoints[x].chartData.push({
                         legend,
                         data: yVal,
-                        color
+                        color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
+                            opacity
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
                 } else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var _series_mode, _series_line, _series_mode1;
+                    var _series_mode;
                     const lineColor = (0, _PlotlyColorAdapter.resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
                     const lineOptions = !((_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('text')) ? getLineOptions(series.line) : undefined;
-                    const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
-                    const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : ((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('markers')) ? 'circle' : 'default';
+                    const legendShape = getLegendShape(series);
+                    var _rgb_copy_formatHex81;
                     mapXToDataPoints[x].lineData.push({
                         legend: legend + (validXYRanges.length > 1 ? `.${rangeIdx + 1}` : ''),
                         legendShape,
                         y: yVal,
-                        color: lineColor,
+                        color: (_rgb_copy_formatHex81 = (0, _d3color.rgb)(lineColor).copy({
+                            opacity
+                        }).formatHex8()) !== null && _rgb_copy_formatHex81 !== void 0 ? _rgb_copy_formatHex81 : color,
                         lineOptions: {
                             ...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);
                     }
@@ -389,11 +406,11 @@ const createColorScale = (layout, series)=>{
     const scaleColors = scale.map((item)=>item[1]);
     return (0, _d3scale.scaleLinear)().domain(scaleDomain).range(scaleColors);
 };
-const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout1, _gvbcData_;
     const mapXToDataPoints = {};
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
     input.data.forEach((series, index1)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_x;
@@ -418,13 +435,17 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkThe
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
+                const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index2);
+                var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: series.y[index2],
                     xAxisCalloutData: x,
-                    color,
+                    color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
+                        opacity
+                    }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                     legend,
-                    useSecondaryYScale: usesSecondaryYScale(series)
+                    useSecondaryYScale: usesSecondaryYScale(series, input.layout)
                 });
             }
         });
@@ -448,10 +469,10 @@ const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkThe
         roundCorners: true
     };
 };
-const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout1, _vbcData_;
     const vbcData = [];
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
     input.data.forEach((series, seriesIdx)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_xbins, _series_xbins1, _series_xbins2;
@@ -473,7 +494,7 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkThem
             xValues.push(xVal);
             yValues.push(yVal);
         });
-        const isXString = isStringArray(xValues);
+        const isXString = (0, _chartutilities.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.
         const xBins = createBins(xValues, (_series_xbins = series.xbins) === null || _series_xbins === void 0 ? void 0 : _series_xbins.start, (_series_xbins1 = series.xbins) === null || _series_xbins1 === void 0 ? void 0 : _series_xbins1.end, (_series_xbins2 = series.xbins) === null || _series_xbins2 === void 0 ? void 0 : _series_xbins2.size);
@@ -495,12 +516,16 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkThem
             const legend = legends[seriesIdx];
             // resolve color for each legend's bars from the colorscale or extracted colors
             const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+            const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, index);
             const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
+            var _rgb_copy_formatHex8;
             vbcData.push({
                 x: isXString ? bin.join(', ') : getBinCenter(bin),
                 y: yVal,
                 legend,
-                color,
+                color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
+                    opacity
+                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                 ...isXString ? {} : {
                     xAxisCalloutData: `[${bin.x0} - ${bin.x1})`
                 }
@@ -524,29 +549,47 @@ const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkThem
         roundCorners: true
     };
 };
-const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatterMarkers, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
+};
+const transformPlotlyJsonToLineChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'line', colorMap, colorwayType, isDarkTheme);
+};
+const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
+};
+const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme)=>{
+    var _input_data_;
+    const isScatterMarkers = [
+        'markers',
+        'text+markers',
+        'markers+text',
+        'lines+markers',
+        'markers+line',
+        'text+lines+markers'
+    ].includes((_input_data_ = input.data[0]) === null || _input_data_ === void 0 ? void 0 : _input_data_.mode);
     const isAreaChart = chartType === 'area';
     const isScatterChart = chartType === 'scatter';
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
     let mode = 'tonexty';
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     const chartData = input.data.map((series, index)=>{
-        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1, _series_line2, _series_mode2;
+        var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
         // extract colors for each series only once
         const extractedColors = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
         const xValues = series.x;
-        const isXString = isStringArray(xValues);
+        const isXString = (0, _chartutilities.isStringArray)(xValues);
         const isXDate = (0, _chartutilities.isDateArray)(xValues);
         const isXNumber = (0, _chartutilities.isNumberArray)(xValues);
         const isXYearCategory = (0, _chartutilities.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         const seriesColor = (0, _PlotlyColorAdapter.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+        const seriesOpacity = (0, _PlotlyColorAdapter.getOpacity)(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
-        const dashType = ((_series_line2 = series.line) === null || _series_line2 === void 0 ? void 0 : _series_line2.dash) || 'solid';
-        const legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : ((_series_mode2 = series.mode) === null || _series_mode2 === void 0 ? void 0 : _series_mode2.includes('markers')) ? 'circle' : 'default';
+        const legendShape = getLegendShape(series);
         const validXYRanges = getValidXYRanges(series);
         return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
             var _series_marker;
@@ -554,6 +597,7 @@ const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatterMarke
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             const markerSizes = (0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? series.marker.size.slice(rangeStart, rangeEnd) : [];
             const textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : undefined;
+            var _rgb_copy_formatHex8;
             return {
                 legend,
                 legendShape,
@@ -572,12 +616,14 @@ const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatterMarke
                         } : {}
                     };
                 }),
-                color: seriesColor,
+                color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(seriesColor).copy({
+                    opacity: seriesOpacity
+                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : seriesColor,
                 lineOptions: {
                     ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
                     mode: series.mode
                 },
-                useSecondaryYScale: usesSecondaryYScale(series)
+                useSecondaryYScale: usesSecondaryYScale(series, input.layout)
             };
         });
     }).flat();
@@ -630,9 +676,9 @@ const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatterMarke
         };
     }
 };
-const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout);
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
     const chartData = input.data.map((series, index)=>{
         var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3;
@@ -649,11 +695,15 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorw
             }
             // resolve color for each legend's bars from the colorscale or extracted colors
             const color = colorScale ? colorScale((0, _chartutilities.isArrayOrTypedArray)((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : (0, _PlotlyColorAdapter.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
+            const opacity = (0, _PlotlyColorAdapter.getOpacity)(series, i);
+            var _rgb_copy_formatHex8;
             return {
                 x: series.x[i],
                 y: yValue,
                 legend,
-                color
+                color: (_rgb_copy_formatHex8 = (0, _d3color.rgb)(color).copy({
+                    opacity
+                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
             };
         }).filter((point)=>point !== null);
     }).reverse().flat() //reversing the order to invert the Y bars order as required by plotly.
@@ -687,7 +737,7 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorw
         roundCorners: true
     };
 };
-const transformPlotlyJsonToHeatmapProps = (input)=>{
+const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_coloraxis, _input_layout1, _input_layout_template_layout, _input_layout_template, _input_layout2, _input_layout_template_data_histogram2d_, _input_layout_template_data_histogram2d, _input_layout_template_data, _input_layout_template1, _input_layout3, _input_layout_template_data_heatmap_, _input_layout_template_data_heatmap, _input_layout_template_data1, _input_layout_template2, _input_layout4, _input_layout5, _input_layout6;
     const firstData = input.data[0];
     const heatmapDataPoints = [];
@@ -708,8 +758,8 @@ const transformPlotlyJsonToHeatmapProps = (input)=>{
             yValues.push(firstData.y[index]);
             zValues.push(zVal);
         });
-        const isXString = isStringArray(xValues);
-        const isYString = isStringArray(yValues);
+        const isXString = (0, _chartutilities.isStringArray)(xValues);
+        const isYString = (0, _chartutilities.isStringArray)(yValues);
         const xBins = createBins(xValues, (_firstData_xbins = firstData.xbins) === null || _firstData_xbins === void 0 ? void 0 : _firstData_xbins.start, (_firstData_xbins1 = firstData.xbins) === null || _firstData_xbins1 === void 0 ? void 0 : _firstData_xbins1.end, (_firstData_xbins2 = firstData.xbins) === null || _firstData_xbins2 === void 0 ? void 0 : _firstData_xbins2.size);
         const yBins = createBins(yValues, (_firstData_ybins = firstData.ybins) === null || _firstData_ybins === void 0 ? void 0 : _firstData_ybins.start, (_firstData_ybins1 = firstData.ybins) === null || _firstData_ybins1 === void 0 ? void 0 : _firstData_ybins1.end, (_firstData_ybins2 = firstData.ybins) === null || _firstData_ybins2 === void 0 ? void 0 : _firstData_ybins2.size);
         const zBins = yBins.map(()=>xBins.map(()=>[]));
@@ -819,7 +869,7 @@ const transformPlotlyJsonToHeatmapProps = (input)=>{
         wrapXAxisLables: true
     };
 };
-const transformPlotlyJsonToSankeyProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout_template_layout, _input_layout_template, _input_layout, _node_label, _input_layout1, _input_layout2;
     const { link, node } = input.data[0];
     var _link_value;
@@ -868,7 +918,7 @@ const transformPlotlyJsonToSankeyProps = (input, colorMap, colorwayType, isDarkT
         height: (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 468
     };
 };
-const transformPlotlyJsonToGaugeProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _firstData_gauge, _input_layout_template_layout, _input_layout_template, _input_layout, _firstData_gauge_steps, _firstData_gauge1, _firstData_gauge_axis_range, _firstData_gauge_axis, _firstData_gauge2, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _firstData_gauge_axis1, _firstData_gauge3, _firstData_gauge_axis_range1, _firstData_gauge_axis2, _firstData_gauge4, _firstData_delta, _firstData_gauge_axis_range2, _firstData_gauge_axis3, _firstData_gauge5, _firstData_gauge_axis_range3, _firstData_gauge_axis4, _firstData_gauge6, _firstData_gauge_axis_range4, _firstData_gauge_axis5, _firstData_gauge7, _firstData_gauge_axis_range5, _firstData_gauge_axis6, _firstData_gauge8, _input_layout2, _input_layout3, _firstData_gauge_steps1, _firstData_gauge9;
     const firstData = input.data[0];
     const stepsColors = ((_firstData_gauge = firstData.gauge) === null || _firstData_gauge === void 0 ? void 0 : _firstData_gauge.steps) ? firstData.gauge.steps.map((step)=>step.color) : undefined;
@@ -964,7 +1014,7 @@ const formatValue = (value, colIndex, cells)=>{
     }
     return `${prefix !== null && prefix !== void 0 ? prefix : ''}${formatted}${suffix !== null && suffix !== void 0 ? suffix : ''}`;
 };
-const transformPlotlyJsonToChartTableProps = (input, colorMap, isDarkTheme)=>{
+const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
     var _tableData_cells, _input_layout_template_data, _input_layout_template, _input_layout, _input_layout_font, _input_layout1, _tableData_header, _tableData_header1, _input_layout_template_data1, _input_layout_template1, _input_layout2, _input_layout3, _input_layout4;
     const tableData = input.data[0];
     const normalizeHeaders = (values, header)=>{
@@ -1180,10 +1230,6 @@ function getLineOptions(line) {
     }
     return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
 }
-const isStringArray = (arr)=>{
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (0, _chartutilities.isArrayOfType)(arr, (value)=>typeof value === 'string' || value === null);
-};
 // TODO: Use binary search to find the appropriate bin for numeric value.
 const findBinIndex = (bins, value, isString)=>{
     if (typeof value === 'undefined' || value === null) {
@@ -1202,7 +1248,7 @@ const createBins = (data, binStart, binEnd, binSize)=>{
     if (!data || data.length === 0) {
         return [];
     }
-    if (isStringArray(data)) {
+    if ((0, _chartutilities.isStringArray)(data)) {
         const categories = Array.from(new Set(data));
         const start = typeof binStart === 'number' ? Math.ceil(binStart) : 0;
         const stop = typeof binEnd === 'number' ? Math.floor(binEnd) + 1 : categories.length;
@@ -1278,7 +1324,46 @@ const precisionRound = (value, precision)=>{
     const factor = Math.pow(10, precision);
     return Math.round(value * factor) / factor;
 };
-const getLegendProps = (data, layout)=>{
+const getLegendShape = (series)=>{
+    var _series_line, _series_mode;
+    const dashType = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.dash) || 'solid';
+    if (dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot') {
+        return 'dottedLine';
+    } else if ((_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('markers')) {
+        return 'circle';
+    }
+    return 'default';
+};
+const getAllupLegendsProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+    const allupLegends = [];
+    // reduce on showlegend boolean propperty. reduce should return true if at least one series has showlegend true
+    const toShowLegend = input.data.reduce((acc, series)=>{
+        return acc || series.showlegend === true;
+    }, false);
+    if (toShowLegend) {
+        input.data.forEach((series, index)=>{
+            var _series_line, _series_marker, _input_layout_template_layout, _input_layout_template, _input_layout;
+            const name = series.legendgroup;
+            const color = ((_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color) || ((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color);
+            const legendShape = getLegendShape(series);
+            const resolvedColor = (0, _PlotlyColorAdapter.extractColor)((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, color, colorMap, isDarkTheme);
+            if (name !== undefined && allupLegends.some((group)=>group.title === name) === false) {
+                allupLegends.push({
+                    title: name,
+                    color: resolvedColor,
+                    shape: legendShape
+                });
+            }
+        });
+    }
+    return {
+        legends: allupLegends,
+        centerLegends: true,
+        enabledWrapLines: true,
+        canSelectMultipleLegends: true
+    };
+};
+const getLegendProps = (data, layout, isMultiPlot)=>{
     const legends = [];
     if (data.length === 1) {
         legends.push(data[0].name || '');
@@ -1287,10 +1372,11 @@ const getLegendProps = (data, layout)=>{
             legends.push(series.name || `Series ${index + 1}`);
         });
     }
-    const hideLegends = data.every((series)=>series.showlegend === false);
+    const hideLegendsData = data.every((series)=>series.showlegend === false);
+    const 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,
-        hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false ? true : hideLegends
+        hideLegend: isMultiPlot || hideLegendsInferred || hideLegendsData
     };
 };
 const getNumberAtIndexOrDefault = (data, index)=>{
@@ -1328,3 +1414,176 @@ const getValidXYRanges = (series)=>{
     }
     return ranges;
 };
+const getIndexFromKey = (key, pattern)=>{
+    const normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
+    return parseInt(normalizedKey, 10) - 1;
+};
+const getGridProperties = (layout, isMultiPlot)=>{
+    var _layout_annotations;
+    const gridX = [];
+    const gridY = [];
+    const annotations = {};
+    let templateRows = '1fr';
+    let templateColumns = '1fr';
+    const gridLayout = {};
+    if (layout === undefined || layout === null || Object.keys(layout).length === 0) {
+        return {
+            templateRows,
+            templateColumns,
+            layout: gridLayout
+        };
+    }
+    if (!layout.xaxis || !layout.yaxis) {
+        return {
+            templateRows,
+            templateColumns,
+            layout: gridLayout
+        };
+    }
+    if (!isMultiPlot) {
+        return {
+            templateRows,
+            templateColumns,
+            layout: gridLayout
+        };
+    }
+    Object.keys(layout).forEach((key)=>{
+        if (key.startsWith('xaxis')) {
+            var _layout_key, _layout_key1;
+            const index = getIndexFromKey(key, 'xaxis');
+            var _layout_key_anchor;
+            const anchor = (_layout_key_anchor = (_layout_key = layout[key]) === null || _layout_key === void 0 ? void 0 : _layout_key.anchor) !== null && _layout_key_anchor !== void 0 ? _layout_key_anchor : 'y';
+            const anchorIndex = getIndexFromKey(anchor, 'y');
+            if (index !== anchorIndex) {
+                throw new Error(`Invalid layout: xaxis ${index + 1} anchor should be y${anchorIndex + 1}`);
+            }
+            var _layout_key_domain;
+            gridX[index] = (_layout_key_domain = (_layout_key1 = layout[key]) === null || _layout_key1 === void 0 ? void 0 : _layout_key1.domain) !== null && _layout_key_domain !== void 0 ? _layout_key_domain : [];
+        } else if (key.startsWith('yaxis')) {
+            var _layout_key2, _layout_key3;
+            const index = getIndexFromKey(key, 'yaxis');
+            var _layout_key_anchor1;
+            const anchor = (_layout_key_anchor1 = (_layout_key2 = layout[key]) === null || _layout_key2 === void 0 ? void 0 : _layout_key2.anchor) !== null && _layout_key_anchor1 !== void 0 ? _layout_key_anchor1 : 'x';
+            const anchorIndex = getIndexFromKey(anchor, 'x');
+            if (index !== anchorIndex) {
+                var _layout_yaxis2;
+                if (index === 1 && anchorIndex === 0 || ((_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.side) === 'right') {
+                    // Special case for secondary y axis where yaxis2 can anchor to x1
+                    return {
+                        templateRows,
+                        templateColumns
+                    };
+                }
+                throw new Error(`Invalid layout: yaxis ${index + 1} anchor should be x${anchorIndex + 1}`);
+            }
+            var _layout_key_domain1;
+            gridY[index] = (_layout_key_domain1 = (_layout_key3 = layout[key]) === null || _layout_key3 === void 0 ? void 0 : _layout_key3.domain) !== null && _layout_key_domain1 !== void 0 ? _layout_key_domain1 : [];
+        }
+    });
+    (_layout_annotations = layout.annotations) === null || _layout_annotations === void 0 ? void 0 : _layout_annotations.forEach((annotation)=>{
+        const xMatches = gridX.flatMap((interval, idx)=>(annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval[0] && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval[1] ? [
+                idx
+            ] : []);
+        const yMatch = gridY.findIndex((interval, yIndex)=>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) {
+        const uniqueXIntervals = new Map();
+        gridX.forEach((interval)=>{
+            const key = `${interval[0]}-${interval[1]}`;
+            if (!uniqueXIntervals.has(key)) {
+                uniqueXIntervals.set(key, interval);
+            }
+        });
+        const minXInterval = Math.min(...Array.from(uniqueXIntervals.values()).map((interval)=>interval[1] - interval[0]));
+        templateColumns = Array.from(uniqueXIntervals.values()).map((interval)=>`${(interval[1] - interval[0]) / minXInterval}fr`).join(' ');
+        let columnNumber = 1;
+        let lastIntervalEnd = 0;
+        gridX.forEach((interval, index)=>{
+            if (interval.length === 0) {
+                return;
+            }
+            const cellName = `x${index === 0 ? '' : index + 1}`;
+            const annotationProps = annotations[index];
+            const xAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.xAnnotation;
+            if (interval[0] < lastIntervalEnd) {
+                columnNumber = 1;
+            }
+            lastIntervalEnd = interval[1];
+            const row = {
+                row: -1,
+                column: columnNumber,
+                xAnnotation
+            };
+            gridLayout[cellName] = row;
+            columnNumber += 1;
+        });
+    }
+    const numColumns = Math.max(...Object.values(gridLayout).map((cell)=>{
+        var _cell_column;
+        return (_cell_column = cell.column) !== null && _cell_column !== void 0 ? _cell_column : 0;
+    }));
+    const columnFill = {};
+    for(let i = 1; i <= numColumns; i++){
+        columnFill[i] = {
+            row: 1,
+            fillDomain: 0
+        };
+    }
+    if (gridY.length > 0) {
+        const uniqueYIntervals = new Map();
+        gridY.forEach((interval)=>{
+            const key = `${interval[0]}-${interval[1]}`;
+            if (!uniqueYIntervals.has(key)) {
+                uniqueYIntervals.set(key, interval);
+            }
+        });
+        const minYInterval = Math.min(...Array.from(uniqueYIntervals.values()).map((interval)=>interval[1] - interval[0]));
+        templateRows = Array.from(uniqueYIntervals.values()).map((interval)=>`${(interval[1] - interval[0]) / minYInterval}fr`).join(' ');
+        gridY.forEach((interval, index)=>{
+            if (interval.length === 0) {
+                return;
+            }
+            const cellName = `x${index === 0 ? '' : index + 1}`;
+            const annotationProps = annotations[index];
+            const yAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.yAnnotation;
+            const 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
+    const reversedGridLayout = {};
+    // find the maximum row number
+    const maxRowNumber = Math.max(...Object.values(gridLayout).map((cell)=>{
+        var _cell_row;
+        return (_cell_row = cell.row) !== null && _cell_row !== void 0 ? _cell_row : 0;
+    }));
+    // iterate over the gridLayout and reverse the row numbers
+    Object.keys(gridLayout).forEach((key)=>{
+        const cell = gridLayout[key];
+        if (cell.row !== undefined) {
+            // reverse the row number
+            cell.row = maxRowNumber - cell.row + 1;
+        }
+        reversedGridLayout[key] = cell;
+    });
+    return {
+        templateRows,
+        templateColumns,
+        layout: reversedGridLayout
+    };
+};