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

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -4,9 +4,10 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
-import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray, isInvalidValue } from '@fluentui/chart-utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
-import { extractColor, resolveColor } from './PlotlyColorAdapter';
+import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
+import { rgb } from 'd3-color';
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -91,8 +92,9 @@ export 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;
@@ -100,7 +102,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) {
@@ -153,7 +155,7 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
     }
     return x;
 };
-export const transformPlotlyJsonToDonutProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export 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;
@@ -210,12 +212,12 @@ export const transformPlotlyJsonToDonutProps = (input, colorMap, colorwayType, i
         roundCorners: true
     };
 };
-export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
+export 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)=>{
@@ -248,34 +250,40 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 const color = colorScale ? colorScale(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) : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                const opacity = 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 = 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 = 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 = 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);
                     }
@@ -323,11 +331,11 @@ const createColorScale = (layout, series)=>{
     const scaleColors = scale.map((item)=>item[1]);
     return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
 };
-export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export 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;
@@ -352,13 +360,17 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 const color = colorScale ? colorScale(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) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
+                const opacity = getOpacity(series, index2);
+                var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: series.y[index2],
                     xAxisCalloutData: x,
-                    color,
+                    color: (_rgb_copy_formatHex8 = rgb(color).copy({
+                        opacity
+                    }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                     legend,
-                    useSecondaryYScale: usesSecondaryYScale(series)
+                    useSecondaryYScale: usesSecondaryYScale(series, input.layout)
                 });
             }
         });
@@ -382,10 +394,10 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
         roundCorners: true
     };
 };
-export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export 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;
@@ -429,12 +441,16 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
             const legend = legends[seriesIdx];
             // resolve color for each legend's bars from the colorscale or extracted colors
             const color = colorScale ? colorScale(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) : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+            const opacity = 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 = rgb(color).copy({
+                    opacity
+                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                 ...isXString ? {} : {
                     xAxisCalloutData: `[${bin.x0} - ${bin.x1})`
                 }
@@ -458,14 +474,32 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
         roundCorners: true
     };
 };
-export const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatterMarkers, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
+};
+export const transformPlotlyJsonToLineChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+    return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'line', colorMap, colorwayType, isDarkTheme);
+};
+export 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 = 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);
@@ -477,10 +511,10 @@ export const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatt
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+        const seriesOpacity = 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;
@@ -488,6 +522,7 @@ export const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatt
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
             const markerSizes = 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,
@@ -506,12 +541,14 @@ export const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatt
                         } : {}
                     };
                 }),
-                color: seriesColor,
+                color: (_rgb_copy_formatHex8 = 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();
@@ -564,9 +601,9 @@ export const transformPlotlyJsonToScatterChartProps = (input, chartType, isScatt
         };
     }
 };
-export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export 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;
@@ -583,11 +620,15 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap,
             }
             // resolve color for each legend's bars from the colorscale or extracted colors
             const color = colorScale ? colorScale(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) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
+            const opacity = getOpacity(series, i);
+            var _rgb_copy_formatHex8;
             return {
                 x: series.x[i],
                 y: yValue,
                 legend,
-                color
+                color: (_rgb_copy_formatHex8 = 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.
@@ -621,7 +662,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap,
         roundCorners: true
     };
 };
-export const transformPlotlyJsonToHeatmapProps = (input)=>{
+export 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 = [];
@@ -754,7 +795,7 @@ export const transformPlotlyJsonToHeatmapProps = (input)=>{
         wrapXAxisLables: true
     };
 };
-export const transformPlotlyJsonToSankeyProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export 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;
@@ -803,7 +844,7 @@ export const transformPlotlyJsonToSankeyProps = (input, colorMap, colorwayType,
         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
     };
 };
-export const transformPlotlyJsonToGaugeProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export 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;
@@ -899,7 +940,7 @@ const formatValue = (value, colIndex, cells)=>{
     }
     return `${prefix !== null && prefix !== void 0 ? prefix : ''}${formatted}${suffix !== null && suffix !== void 0 ? suffix : ''}`;
 };
-export const transformPlotlyJsonToChartTableProps = (input, colorMap, isDarkTheme)=>{
+export 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)=>{
@@ -1120,11 +1161,6 @@ function getLineOptions(line) {
     }
     return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isStringArray = (arr)=>{
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return 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) {
@@ -1219,7 +1255,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';
+};
+export 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 = 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 || '');
@@ -1228,10 +1303,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
     };
 };
 export const getNumberAtIndexOrDefault = (data, index)=>{
@@ -1269,3 +1345,176 @@ export const getValidXYRanges = (series)=>{
     }
     return ranges;
 };
+const getIndexFromKey = (key, pattern)=>{
+    const normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
+    return parseInt(normalizedKey, 10) - 1;
+};
+export 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
+    };
+};