@fluentui/react-charts 9.2.1 → 9.2.3

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -1,10 +1,13 @@
-/* eslint-disable one-var */ /* eslint-disable vars-on-top */ /* eslint-disable no-var */ /* eslint-disable @typescript-eslint/no-explicit-any */ import * as React from 'react';
+/* eslint-disable one-var */ /* eslint-disable vars-on-top */ /* eslint-disable no-var */ import * as React from 'react';
 import { bin as d3Bin, extent as d3Extent, sum as d3Sum, min as d3Min, max as d3Max, range as d3Range } from 'd3-array';
 import { scaleLinear as d3ScaleLinear } from 'd3-scale';
-import { DataVizPalette, getColorFromToken, getNextColor } from '../../utilities/colors';
-import { findNumericMinMaxOfY } from '../../utilities/utilities';
-import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray } from '@fluentui/chart-utilities';
+import { format as d3Format } from 'd3-format';
+import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
+import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
+import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
+import { rgb } from 'd3-color';
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -53,6 +56,7 @@ function getTitles(layout) {
     };
     return titles;
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const correctYearMonth = (xValues)=>{
     const presentYear = new Date().getFullYear();
     if (xValues.length > 0 && Array.isArray(xValues[0])) {
@@ -62,32 +66,35 @@ export const correctYearMonth = (xValues)=>{
         const parsedDate = `${possiblyMonthValue} 01, ${presentYear}`;
         return isDate(parsedDate) ? new Date(parsedDate) : null;
     });
-    for(let i = dates.length - 1; i > 0; i--){
-        const currentMonth = dates[i].getMonth();
-        const previousMonth = dates[i - 1].getMonth();
-        const currentYear = dates[i].getFullYear();
-        const previousYear = dates[i - 1].getFullYear();
+    const filteredDateIndexPairs = dates.map((date, index)=>[
+            date,
+            index
+        ]).filter(([date])=>date !== null);
+    for(let i = filteredDateIndexPairs.length - 1; i > 0; i--){
+        const currentDate = filteredDateIndexPairs[i][0];
+        const previousDate = filteredDateIndexPairs[i - 1][0];
+        const currentMonth = currentDate.getMonth();
+        const previousMonth = previousDate.getMonth();
+        const currentYear = currentDate.getFullYear();
+        const previousYear = previousDate.getFullYear();
         if (previousMonth >= currentMonth) {
-            dates[i - 1].setFullYear(dates[i].getFullYear() - 1);
+            filteredDateIndexPairs[i - 1][0].setFullYear(currentYear - 1);
         } else if (previousYear > currentYear) {
-            dates[i - 1].setFullYear(currentYear);
+            filteredDateIndexPairs[i - 1][0].setFullYear(currentYear);
         }
+        dates[filteredDateIndexPairs[i - 1][1]] = filteredDateIndexPairs[i - 1][0];
     }
     xValues = xValues.map((month, index)=>{
+        if (dates[index] === null) {
+            return null;
+        }
         return `${month} 01, ${dates[index].getFullYear()}`;
     });
     return xValues;
 };
-export const getColor = (legendLabel, colorMap, isDarkTheme)=>{
-    if (!colorMap.current.has(legendLabel)) {
-        const nextColor = getNextColor(colorMap.current.size + 1, 0, isDarkTheme);
-        colorMap.current.set(legendLabel, nextColor);
-        return nextColor;
-    }
-    return colorMap.current.get(legendLabel);
-};
-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;
@@ -95,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) {
@@ -125,29 +132,60 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
         }
     };
 };
-export const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
-    var _firstData_labels, _input_layout, _input_layout1, _input_layout2, _input_layout3;
+export const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDarkTheme)=>{
+    const extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
+    return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
+};
+export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNumber)=>{
+    if (x === null || x === undefined) {
+        return '';
+    }
+    if (isXYearCategory) {
+        return x.toString();
+    }
+    if (isXString) {
+        if (isXDate) {
+            const date = new Date(x);
+            return date;
+        }
+        if (isXNumber) {
+            return parseFloat(x);
+        }
+        return x;
+    }
+    return x;
+};
+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;
+    // extract colors for each series only once
+    // use piecolorway if available
+    // otherwise, default to colorway from template
+    const colors = extractColor((_input_layout_piecolorway = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.piecolorway) !== null && _input_layout_piecolorway !== void 0 ? _input_layout_piecolorway : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.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, (_input_layout_piecolorway1 = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.piecolorway) !== null && _input_layout_piecolorway1 !== void 0 ? _input_layout_piecolorway1 : firstData === null || firstData === void 0 ? void 0 : (_firstData_marker = firstData.marker) === null || _firstData_marker === void 0 ? void 0 : _firstData_marker.colors, colorMap, isDarkTheme);
     const mapLegendToDataPoint = {};
     (_firstData_labels = firstData.labels) === null || _firstData_labels === void 0 ? void 0 : _firstData_labels.forEach((label, index)=>{
-        var _firstData_values;
-        const color = getColor(label, colorMap, isDarkTheme);
-        //ToDo how to handle string data?
-        const value = typeof ((_firstData_values = firstData.values) === null || _firstData_values === void 0 ? void 0 : _firstData_values[index]) === 'number' ? firstData.values[index] : 1;
-        if (!mapLegendToDataPoint[label]) {
-            mapLegendToDataPoint[label] = {
-                legend: label,
+        const value = getNumberAtIndexOrDefault(firstData.values, index);
+        if (isInvalidValue(value) || value < 0) {
+            return;
+        }
+        const legend = `${label}`;
+        // resolve color for each legend from the extracted colors
+        const color = resolveColor(colors, index, legend, colorMap, isDarkTheme);
+        if (!mapLegendToDataPoint[legend]) {
+            mapLegendToDataPoint[legend] = {
+                legend,
                 data: value,
                 color
             };
         } else {
-            mapLegendToDataPoint[label].data += value;
+            mapLegendToDataPoint[legend].data += value;
         }
     });
     var _input_layout_width;
-    const width = (_input_layout_width = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width) !== null && _input_layout_width !== void 0 ? _input_layout_width : 440;
+    const width = (_input_layout_width = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width) !== null && _input_layout_width !== void 0 ? _input_layout_width : 440;
     var _input_layout_height;
-    const height = (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220;
+    const height = (_input_layout_height = (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : _input_layout4.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220;
     const hideLabels = firstData.textinfo ? ![
         'value',
         'percent',
@@ -155,82 +193,110 @@ export const transformPlotlyJsonToDonutProps = (input, colorMap, isDarkTheme)=>{
     ].includes(firstData.textinfo) : false;
     const donutMarginHorizontal = hideLabels ? 0 : 80;
     const donutMarginVertical = 40 + (hideLabels ? 0 : 40);
-    const innerRadius = firstData.hole ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) : 0;
+    const innerRadius = firstData.hole ? firstData.hole * (Math.min(width - donutMarginHorizontal, height - donutMarginVertical) / 2) : MIN_DONUT_RADIUS;
     const { chartTitle } = getTitles(input.layout);
     return {
         data: {
             chartTitle,
             chartData: Object.values(mapLegendToDataPoint)
         },
-        hideLegend: ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.showlegend) === false ? true : false,
-        width: (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width,
+        hideLegend: ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false ? true : false,
+        width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
         height,
         innerRadius,
         hideLabels,
         showLabelsInPercent: firstData.textinfo ? [
             'percent',
             'label+percent'
-        ].includes(firstData.textinfo) : true
+        ].includes(firstData.textinfo) : true,
+        roundCorners: true
     };
 };
-export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fallbackVSBC)=>{
-    var _input_layout, _input_layout1;
+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)=>{
-        var _series_x;
+        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, _input_layout_template_layout1, _input_layout_template1, _input_layout2, _series_line;
+        if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
-        (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
-            var _series_y;
-            if (!mapXToDataPoints[x]) {
-                mapXToDataPoints[x] = {
-                    xAxisPoint: isXYearCategory ? x.toString() : x,
-                    chartData: [],
-                    lineData: []
-                };
-            }
-            const legend = legends[index1];
-            var _series_y_index2;
-            const yVal = (_series_y_index2 = (_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2]) !== null && _series_y_index2 !== void 0 ? _series_y_index2 : 0;
-            if (series.type === 'bar') {
-                const color = getColor(legend, colorMap, isDarkTheme);
-                mapXToDataPoints[x].chartData.push({
-                    legend,
-                    data: yVal,
-                    color
-                });
-                yMaxValue = Math.max(yMaxValue, yVal);
-            } else if (series.type === 'scatter' || !!fallbackVSBC) {
-                var _series_line;
-                const color = getColor(legend, colorMap, isDarkTheme);
-                const lineOptions = getLineOptions(series.line);
-                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' : 'default';
-                mapXToDataPoints[x].lineData.push({
-                    legend,
-                    legendShape,
-                    y: yVal,
-                    color,
-                    ...lineOptions ? {
-                        lineOptions
-                    } : {},
-                    useSecondaryYScale: usesSecondaryYScale(series)
-                });
-                if (!usesSecondaryYScale(series)) {
-                    yMaxValue = Math.max(yMaxValue, yVal);
+        // extract bar colors for each series only once
+        const extractedBarColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.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, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
+        // extract line colors for each series only once
+        const extractedLineColors = 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 = isDateArray(xValues);
+        const isXString = isStringArray(xValues);
+        const isXNumber = isNumberArray(xValues);
+        const validXYRanges = getValidXYRanges(series);
+        validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
+            const rangeXValues = series.x.slice(rangeStart, rangeEnd);
+            const rangeYValues = series.y.slice(rangeStart, rangeEnd);
+            rangeXValues.forEach((x, index2)=>{
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+                if (!mapXToDataPoints[x]) {
+                    mapXToDataPoints[x] = {
+                        xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        chartData: [],
+                        lineData: []
+                    };
                 }
-            }
-            yMaxValue = Math.max(yMaxValue, yVal);
-            yMinValue = Math.min(yMinValue, yVal);
+                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: (_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;
+                    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 legendShape = getLegendShape(series);
+                    var _rgb_copy_formatHex81;
+                    mapXToDataPoints[x].lineData.push({
+                        legend: legend + (validXYRanges.length > 1 ? `.${rangeIdx + 1}` : ''),
+                        legendShape,
+                        y: yVal,
+                        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, input.layout)
+                    });
+                    if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
+                        yMaxValue = Math.max(yMaxValue, yVal);
+                        yMinValue = Math.min(yMinValue, yVal);
+                    }
+                }
+                yMaxValue = Math.max(yMaxValue, yVal);
+            });
         });
     });
     const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
-        data: Object.values(mapXToDataPoints),
+        data: vsbcData,
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
@@ -241,19 +307,49 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, isDarkTheme, fal
         yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
+        wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
         hideTickOverlap: true,
         barGapMax: 2,
-        hideLegend
+        hideLegend,
+        roundCorners: true,
+        showYAxisLables: true,
+        noOfCharsToTruncate: 20,
+        showYAxisLablesTooltip: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
-    var _input_layout, _input_layout1;
+const createColorScale = (layout, series)=>{
+    var _layout_coloraxis, _series_marker, _layout_coloraxis1, _layout_coloraxis2;
+    const scale = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis = layout.coloraxis) === null || _layout_coloraxis === void 0 ? void 0 : _layout_coloraxis.colorscale;
+    const colorValues = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color;
+    var _layout_coloraxis_cmin, _layout_coloraxis_cmax;
+    const [dMin, dMax] = [
+        (_layout_coloraxis_cmin = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis1 = layout.coloraxis) === null || _layout_coloraxis1 === void 0 ? void 0 : _layout_coloraxis1.cmin) !== null && _layout_coloraxis_cmin !== void 0 ? _layout_coloraxis_cmin : Math.min(...colorValues),
+        (_layout_coloraxis_cmax = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis2 = layout.coloraxis) === null || _layout_coloraxis2 === void 0 ? void 0 : _layout_coloraxis2.cmax) !== null && _layout_coloraxis_cmax !== void 0 ? _layout_coloraxis_cmax : Math.max(...colorValues)
+    ];
+    // Normalize colorscale domain to actual data domain
+    const scaleDomain = scale.map(([pos])=>dMin + pos * (dMax - dMin));
+    const scaleColors = scale.map((item)=>item[1]);
+    return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
+};
+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 _series_x;
+        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;
+        if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
+        // extract colors for each series only once
+        const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.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, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         (_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x.forEach((x, index2)=>{
+            var _series_y;
+            if (isInvalidValue(x) || isInvalidValue((_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2])) {
+                return;
+            }
             if (!mapXToDataPoints[x]) {
                 mapXToDataPoints[x] = {
                     name: x.toString(),
@@ -261,25 +357,30 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
                 };
             }
             if (series.type === 'bar') {
-                var _series_y;
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
                 const legend = legends[index1];
-                const color = getColor(legend, colorMap, isDarkTheme);
-                var _series_y_index2;
+                // 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, index2, legend, colorMap, isDarkTheme);
+                const opacity = getOpacity(series, index2);
+                var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
                     key: legend,
-                    data: (_series_y_index2 = (_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index2]) !== null && _series_y_index2 !== void 0 ? _series_y_index2 : 0,
+                    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)
                 });
             }
         });
     });
     const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const gvbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
-        data: Object.values(mapXToDataPoints),
+        data: gvbcData,
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
@@ -289,30 +390,47 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, isDarkTheme)=>{
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        hideLegend
+        wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
+        hideLegend,
+        roundCorners: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
-    var _input_layout, _input_layout1;
+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 _series_xbins, _series_xbins1, _series_xbins2;
+        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;
         if (!series.x) {
             return;
         }
-        const isXString = isStringArray(series.x);
+        if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
+        // extract colors for each series only once
+        const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.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, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
+        const xValues = [];
+        const yValues = [];
+        series.x.forEach((xVal, index)=>{
+            const yVal = getNumberAtIndexOrDefault(series.y, index);
+            if (isInvalidValue(xVal) || isInvalidValue(yVal)) {
+                return;
+            }
+            xValues.push(xVal);
+            yValues.push(yVal);
+        });
+        const isXString = 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(series.x, (_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);
+        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);
         const yBins = xBins.map(()=>[]);
         let total = 0;
-        series.x.forEach((xVal, index)=>{
+        xValues.forEach((xVal, index)=>{
             const binIdx = findBinIndex(xBins, xVal, isXString);
             if (binIdx !== -1) {
-                var _series_y;
-                var _series_y_index;
-                yBins[binIdx].push((_series_y_index = (_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[index]) !== null && _series_y_index !== void 0 ? _series_y_index : 1);
+                yBins[binIdx].push(yValues[index]);
             }
         });
         const y = yBins.map((bin)=>{
@@ -321,14 +439,20 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
             return yVal;
         });
         xBins.forEach((bin, index)=>{
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
             const legend = legends[seriesIdx];
-            const color = getColor(legend, colorMap, isDarkTheme);
+            // 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})`
                 }
@@ -346,54 +470,102 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, isDarkTheme)=>{
         yAxisTitle,
         mode: 'histogram',
         hideTickOverlap: true,
+        wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
-        hideLegend
+        hideLegend,
+        roundCorners: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, colorMap, 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_line;
+        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);
         const xValues = series.x;
-        const isString = typeof xValues[0] === 'string';
+        const isXString = isStringArray(xValues);
         const isXDate = isDateArray(xValues);
         const isXNumber = isNumberArray(xValues);
+        const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         const legend = legends[index];
-        const lineColor = getColor(legend, colorMap, isDarkTheme);
+        // 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 = getLineOptions(series.line);
-        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' : 'default';
-        return {
-            legend,
-            legendShape,
-            data: xValues.map((x, i)=>{
-                var _series_marker, _series_marker1;
-                return {
-                    x: isString ? isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x : x,
-                    y: series.y[i],
-                    ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
-                        markerSize: series.marker.size[i]
-                    } : typeof ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.size) === 'number' ? {
-                        markerSize: series.marker.size
-                    } : {}
-                };
-            }),
-            color: lineColor,
-            ...lineOptions ? {
-                lineOptions
-            } : {},
-            useSecondaryYScale: usesSecondaryYScale(series)
-        };
-    });
+        const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
+        const legendShape = getLegendShape(series);
+        const validXYRanges = getValidXYRanges(series);
+        return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
+            var _series_marker;
+            const rangeXValues = xValues.slice(rangeStart, rangeEnd);
+            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,
+                data: rangeXValues.map((x, i)=>{
+                    var _series_marker, _series_marker1;
+                    return {
+                        x: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        y: rangeYValues[i],
+                        ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
+                            markerSize: markerSizes[i]
+                        } : typeof ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.size) === 'number' ? {
+                            markerSize: series.marker.size
+                        } : {},
+                        ...textValues ? {
+                            text: textValues[i]
+                        } : {}
+                    };
+                }),
+                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, input.layout)
+            };
+        });
+    }).flat();
     const yMinMaxValues = findNumericMinMaxOfY(chartData);
     const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const numDataPoints = chartData.reduce((total, lineChartPoints)=>total + lineChartPoints.data.length, 0);
     const chartProps = {
         chartTitle,
         lineChartData: chartData
     };
+    const scatterChartProps = {
+        chartTitle,
+        scatterChartData: chartData
+    };
     if (isAreaChart) {
         var _input_layout, _input_layout1;
         var _input_layout_height;
@@ -408,13 +580,14 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
             height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
             hideTickOverlap: true,
             useUTC: false,
-            hideLegend
+            hideLegend,
+            optimizeLargeData: numDataPoints > 1000
         };
     } else {
         var _input_layout2, _input_layout3;
         var _input_layout_height1;
         return {
-            data: chartProps,
+            data: isScatterChart ? scatterChartProps : chartProps,
             supportNegativeData: true,
             xAxisTitle,
             yAxisTitle,
@@ -426,26 +599,42 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, color
             height: (_input_layout_height1 = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height1 !== void 0 ? _input_layout_height1 : 350,
             hideTickOverlap: true,
             useUTC: false,
-            hideLegend
+            hideLegend,
+            optimizeLargeData: numDataPoints > 1000
         };
     }
 };
-export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, 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;
+        if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_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[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
+        // extract colors for each series only once
+        const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.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, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
         const legend = legends[index];
-        const color = getColor(legend, colorMap, isDarkTheme);
         return series.y.map((yValue, i)=>{
+            var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
+            if (isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || isInvalidValue(yValue)) {
+                return null;
+            }
+            // 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
             };
-        });
-    }).reverse().flat()//reversing the order to invert the Y bars order as required by plotly.
-    .reverse();
+        }).filter((point)=>point !== null);
+    }).flat();
     var _input_layout_height;
     const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
     var _input_layout_margin_l;
@@ -471,31 +660,43 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        hideLegend
+        hideLegend,
+        roundCorners: true,
+        ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToHeatmapProps = (input)=>{
-    var _input_layout, _input_layout1;
+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 = [];
     let zMin = Number.POSITIVE_INFINITY;
     let zMax = Number.NEGATIVE_INFINITY;
     if (firstData.type === 'histogram2d') {
-        var _firstData_xbins, _firstData_xbins1, _firstData_xbins2, _firstData_ybins, _firstData_ybins1, _firstData_ybins2, _firstData_x;
-        const isXString = isStringArray(firstData.x);
-        const isYString = isStringArray(firstData.y);
-        const xBins = createBins(firstData.x, (_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(firstData.y, (_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(()=>[]));
-        let total = 0;
+        var _firstData_x, _firstData_xbins, _firstData_xbins1, _firstData_xbins2, _firstData_ybins, _firstData_ybins1, _firstData_ybins2;
+        const xValues = [];
+        const yValues = [];
+        const zValues = [];
         (_firstData_x = firstData.x) === null || _firstData_x === void 0 ? void 0 : _firstData_x.forEach((xVal, index)=>{
             var _firstData_y;
+            const zVal = getNumberAtIndexOrDefault(firstData.z, index);
+            if (isInvalidValue(xVal) || isInvalidValue((_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index]) || isInvalidValue(zVal)) {
+                return;
+            }
+            xValues.push(xVal);
+            yValues.push(firstData.y[index]);
+            zValues.push(zVal);
+        });
+        const isXString = isStringArray(xValues);
+        const isYString = 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(()=>[]));
+        let total = 0;
+        xValues.forEach((xVal, index)=>{
             const xBinIdx = findBinIndex(xBins, xVal, isXString);
-            const yBinIdx = findBinIndex(yBins, (_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index], isYString);
+            const yBinIdx = findBinIndex(yBins, yValues[index], isYString);
             if (xBinIdx !== -1 && yBinIdx !== -1) {
-                var _firstData_z;
-                var _firstData_z_index;
-                zBins[yBinIdx][xBinIdx].push((_firstData_z_index = (_firstData_z = firstData.z) === null || _firstData_z === void 0 ? void 0 : _firstData_z[index]) !== null && _firstData_z_index !== void 0 ? _firstData_z_index : 1);
+                zBins[yBinIdx][xBinIdx].push(zValues[index]);
             }
         });
         const z = zBins.map((row)=>{
@@ -523,7 +724,8 @@ export const transformPlotlyJsonToHeatmapProps = (input)=>{
     } else {
         var _firstData_x1;
         (_firstData_x1 = firstData.x) === null || _firstData_x1 === void 0 ? void 0 : _firstData_x1.forEach((xVal, xIdx)=>{
-            var _firstData_y;
+            var // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _firstData_y;
             (_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y.forEach((yVal, yIdx)=>{
                 var _firstData_z_yIdx, _firstData_z, _input_layout_xaxis, _input_layout, _input_layout_yaxis, _input_layout1;
                 const zVal = (_firstData_z = firstData.z) === null || _firstData_z === void 0 ? void 0 : (_firstData_z_yIdx = _firstData_z[yIdx]) === null || _firstData_z_yIdx === void 0 ? void 0 : _firstData_z_yIdx[xIdx];
@@ -557,8 +759,23 @@ export const transformPlotlyJsonToHeatmapProps = (input)=>{
         getColorFromToken(DataVizPalette.color2),
         getColorFromToken(DataVizPalette.color3)
     ];
-    const domainValuesForColorScale = Array.isArray(firstData.colorscale) ? firstData.colorscale.map((arr)=>arr[0] * (zMax - zMin) + zMin) : defaultDomain;
-    const rangeValuesForColorScale = Array.isArray(firstData.colorscale) ? firstData.colorscale.map((arr)=>arr[1]) : defaultRange;
+    var _firstData_colorscale, _ref, _ref1, _ref2, _ref3;
+    let colorscale = (_ref3 = (_ref2 = (_ref1 = (_ref = (_firstData_colorscale = firstData === null || firstData === void 0 ? void 0 : firstData.colorscale) !== null && _firstData_colorscale !== void 0 ? _firstData_colorscale : (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.colorscale) !== null && _ref !== void 0 ? _ref : (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout1.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : _input_layout_coloraxis.colorscale) !== null && _ref1 !== void 0 ? _ref1 : (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template = _input_layout2.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.colorscale) !== null && _ref2 !== void 0 ? _ref2 : firstData.type === 'histogram2d' && ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_template1 = _input_layout3.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_data = _input_layout_template1.data) === null || _input_layout_template_data === void 0 ? void 0 : (_input_layout_template_data_histogram2d = _input_layout_template_data.histogram2d) === null || _input_layout_template_data_histogram2d === void 0 ? void 0 : (_input_layout_template_data_histogram2d_ = _input_layout_template_data_histogram2d[0]) === null || _input_layout_template_data_histogram2d_ === void 0 ? void 0 : _input_layout_template_data_histogram2d_.colorscale)) !== null && _ref3 !== void 0 ? _ref3 : (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template2 = _input_layout4.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_data1 = _input_layout_template2.data) === null || _input_layout_template_data1 === void 0 ? void 0 : (_input_layout_template_data_heatmap = _input_layout_template_data1.heatmap) === null || _input_layout_template_data_heatmap === void 0 ? void 0 : (_input_layout_template_data_heatmap_ = _input_layout_template_data_heatmap[0]) === null || _input_layout_template_data_heatmap_ === void 0 ? void 0 : _input_layout_template_data_heatmap_.colorscale;
+    // determine if the types diverging, sequential or sequentialminus are present in colorscale
+    if (colorscale && typeof colorscale === 'object' && ('diverging' in colorscale || 'sequential' in colorscale || 'sequentialminus' in colorscale)) {
+        const isDivergent = zMin < 0 && zMax > 0; // Data spans both positive and negative values
+        const isSequential = zMin >= 0; // Data is entirely positive
+        const isSequentialMinus = zMax <= 0; // Data is entirely negative
+        if (isDivergent) {
+            colorscale = colorscale === null || colorscale === void 0 ? void 0 : colorscale.diverging;
+        } else if (isSequential) {
+            colorscale = colorscale === null || colorscale === void 0 ? void 0 : colorscale.sequential;
+        } else if (isSequentialMinus) {
+            colorscale = colorscale === null || colorscale === void 0 ? void 0 : colorscale.sequentialminus;
+        }
+    }
+    const domainValuesForColorScale = Array.isArray(colorscale) ? colorscale.map((arr)=>arr[0] * (zMax - zMin) + zMin) : defaultDomain;
+    const rangeValuesForColorScale = Array.isArray(colorscale) ? colorscale.map((arr)=>arr[1]) : defaultRange;
     const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     var _input_layout_height;
     return {
@@ -573,33 +790,44 @@ export const transformPlotlyJsonToHeatmapProps = (input)=>{
         xAxisTitle,
         yAxisTitle,
         sortOrder: 'none',
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
+        width: (_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.width,
+        height: (_input_layout_height = (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true
+        showYAxisLablesTooltip: true,
+        wrapXAxisLables: true,
+        ...getAxisCategoryOrderProps([
+            firstData
+        ], input.layout)
     };
 };
-export const transformPlotlyJsonToSankeyProps = (input, colorMap, isDarkTheme)=>{
-    var _node_label, _input_layout, _input_layout1;
+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;
-    const validLinks = ((_link_value = link === null || link === void 0 ? void 0 : link.value) !== null && _link_value !== void 0 ? _link_value : []).map((val, index)=>({
+    const validLinks = ((_link_value = link === null || link === void 0 ? void 0 : link.value) !== null && _link_value !== void 0 ? _link_value : []).map((val, index)=>{
+        var _link_source, _link_target;
+        if (isInvalidValue(val) || isInvalidValue(link === null || link === void 0 ? void 0 : (_link_source = link.source) === null || _link_source === void 0 ? void 0 : _link_source[index]) || isInvalidValue(link === null || link === void 0 ? void 0 : (_link_target = link.target) === null || _link_target === void 0 ? void 0 : _link_target[index])) {
+            return null;
+        }
+        return {
             value: val,
             source: link === null || link === void 0 ? void 0 : link.source[index],
             target: link === null || link === void 0 ? void 0 : link.target[index]
-        }))// eslint-disable-next-line @typescript-eslint/no-shadow
-    // Filter out negative nodes, unequal nodes and self-references (circular links)
-    .filter((x)=>x.source >= 0 && x.target >= 0 && x.source !== x.target);
+        };
+    })// Filter out negative nodes, unequal nodes and self-references (circular links)
+    .filter((x)=>x !== null && x.source >= 0 && x.target >= 0 && x.source !== x.target);
+    const extractedNodeColors = 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, node === null || node === void 0 ? void 0 : node.color, colorMap, isDarkTheme);
     const sankeyChartData = {
         nodes: (_node_label = node.label) === null || _node_label === void 0 ? void 0 : _node_label.map((label, index)=>{
-            const color = getColor(label, colorMap, isDarkTheme);
+            const color = resolveColor(extractedNodeColors, index, label, colorMap, isDarkTheme);
             return {
                 nodeId: index,
                 name: label,
                 color
             };
         }),
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         links: validLinks.map((validLink, index)=>{
             return {
                 ...validLink
@@ -618,18 +846,20 @@ export const transformPlotlyJsonToSankeyProps = (input, colorMap, isDarkTheme)=>
             chartTitle,
             SankeyChartData: sankeyChartData
         },
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 468
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        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, isDarkTheme)=>{
-    var _firstData_gauge_steps, _firstData_gauge, _firstData_gauge_axis_range, _firstData_gauge_axis, _firstData_gauge1, _firstData_gauge_axis_range1, _firstData_gauge_axis1, _firstData_gauge2, _firstData_delta, _firstData_gauge_axis_range2, _firstData_gauge_axis2, _firstData_gauge3, _firstData_gauge_axis_range3, _firstData_gauge_axis3, _firstData_gauge4, _firstData_gauge_axis_range4, _firstData_gauge_axis4, _firstData_gauge5, _firstData_gauge_axis_range5, _firstData_gauge_axis5, _firstData_gauge6, _input_layout, _input_layout1, _firstData_gauge_steps1, _firstData_gauge7;
+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;
+    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, stepsColors, colorMap, isDarkTheme);
     var _firstData_gauge_axis_range_, _firstData_value, _firstData_gauge_axis_range_1, _firstData_value1;
-    const segments = ((_firstData_gauge = firstData.gauge) === null || _firstData_gauge === void 0 ? void 0 : (_firstData_gauge_steps = _firstData_gauge.steps) === null || _firstData_gauge_steps === void 0 ? void 0 : _firstData_gauge_steps.length) ? firstData.gauge.steps.map((step, index)=>{
+    const segments = ((_firstData_gauge1 = firstData.gauge) === null || _firstData_gauge1 === void 0 ? void 0 : (_firstData_gauge_steps = _firstData_gauge1.steps) === null || _firstData_gauge_steps === void 0 ? void 0 : _firstData_gauge_steps.length) ? firstData.gauge.steps.map((step, index)=>{
         var _step_range, _step_range1;
         const legend = step.name || `Segment ${index + 1}`;
-        const color = getColor(legend, colorMap, isDarkTheme);
+        const color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         return {
             legend,
             size: ((_step_range = step.range) === null || _step_range === void 0 ? void 0 : _step_range[1]) - ((_step_range1 = step.range) === null || _step_range1 === void 0 ? void 0 : _step_range1[0]),
@@ -638,34 +868,36 @@ export const transformPlotlyJsonToGaugeProps = (input, colorMap, isDarkTheme)=>{
     }) : [
         {
             legend: 'Current',
-            size: (_firstData_value = firstData.value) !== null && _firstData_value !== void 0 ? _firstData_value : 0 - ((_firstData_gauge_axis_range_ = (_firstData_gauge1 = firstData.gauge) === null || _firstData_gauge1 === void 0 ? void 0 : (_firstData_gauge_axis = _firstData_gauge1.axis) === null || _firstData_gauge_axis === void 0 ? void 0 : (_firstData_gauge_axis_range = _firstData_gauge_axis.range) === null || _firstData_gauge_axis_range === void 0 ? void 0 : _firstData_gauge_axis_range[0]) !== null && _firstData_gauge_axis_range_ !== void 0 ? _firstData_gauge_axis_range_ : 0),
-            color: getColor('Current', colorMap, isDarkTheme)
+            size: (_firstData_value = firstData.value) !== null && _firstData_value !== void 0 ? _firstData_value : 0 - ((_firstData_gauge_axis_range_ = (_firstData_gauge2 = firstData.gauge) === null || _firstData_gauge2 === void 0 ? void 0 : (_firstData_gauge_axis = _firstData_gauge2.axis) === null || _firstData_gauge_axis === void 0 ? void 0 : (_firstData_gauge_axis_range = _firstData_gauge_axis.range) === null || _firstData_gauge_axis_range === void 0 ? void 0 : _firstData_gauge_axis_range[0]) !== null && _firstData_gauge_axis_range_ !== void 0 ? _firstData_gauge_axis_range_ : 0),
+            color: _getGaugeAxisColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.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, (_firstData_gauge3 = firstData.gauge) === null || _firstData_gauge3 === void 0 ? void 0 : (_firstData_gauge_axis1 = _firstData_gauge3.axis) === null || _firstData_gauge_axis1 === void 0 ? void 0 : _firstData_gauge_axis1.color, colorMap, isDarkTheme)
         },
         {
             legend: 'Target',
-            size: ((_firstData_gauge_axis_range_1 = (_firstData_gauge2 = firstData.gauge) === null || _firstData_gauge2 === void 0 ? void 0 : (_firstData_gauge_axis1 = _firstData_gauge2.axis) === null || _firstData_gauge_axis1 === void 0 ? void 0 : (_firstData_gauge_axis_range1 = _firstData_gauge_axis1.range) === null || _firstData_gauge_axis_range1 === void 0 ? void 0 : _firstData_gauge_axis_range1[1]) !== null && _firstData_gauge_axis_range_1 !== void 0 ? _firstData_gauge_axis_range_1 : 100) - ((_firstData_value1 = firstData.value) !== null && _firstData_value1 !== void 0 ? _firstData_value1 : 0),
+            size: ((_firstData_gauge_axis_range_1 = (_firstData_gauge4 = firstData.gauge) === null || _firstData_gauge4 === void 0 ? void 0 : (_firstData_gauge_axis2 = _firstData_gauge4.axis) === null || _firstData_gauge_axis2 === void 0 ? void 0 : (_firstData_gauge_axis_range1 = _firstData_gauge_axis2.range) === null || _firstData_gauge_axis_range1 === void 0 ? void 0 : _firstData_gauge_axis_range1[1]) !== null && _firstData_gauge_axis_range_1 !== void 0 ? _firstData_gauge_axis_range_1 : 100) - ((_firstData_value1 = firstData.value) !== null && _firstData_value1 !== void 0 ? _firstData_value1 : 0),
             color: DataVizPalette.disabled
         }
     ];
     let sublabel;
-    // let sublabelColor: string | undefined;
+    let sublabelColor;
     if ((_firstData_delta = firstData.delta) === null || _firstData_delta === void 0 ? void 0 : _firstData_delta.reference) {
         const diff = firstData.value - firstData.delta.reference;
         if (diff >= 0) {
+            var _input_layout_template_layout2, _input_layout_template2, _input_layout4, _firstData_delta_increasing, _firstData_delta1;
             sublabel = `\u25B2 ${diff}`;
-        // const color = getColorFromToken(DataVizPalette.success, isDarkTheme);
-        // sublabelColor = color;
+            const extractedIncreasingDeltaColors = extractColor((_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_template2 = _input_layout4.template) === null || _input_layout_template2 === void 0 ? void 0 : (_input_layout_template_layout2 = _input_layout_template2.layout) === null || _input_layout_template_layout2 === void 0 ? void 0 : _input_layout_template_layout2.colorway, colorwayType, (_firstData_delta1 = firstData.delta) === null || _firstData_delta1 === void 0 ? void 0 : (_firstData_delta_increasing = _firstData_delta1.increasing) === null || _firstData_delta_increasing === void 0 ? void 0 : _firstData_delta_increasing.color, colorMap, isDarkTheme);
+            const color = resolveColor(extractedIncreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            sublabelColor = color;
         } else {
+            var _input_layout_template_layout3, _input_layout_template3, _input_layout5, _firstData_delta_decreasing, _firstData_delta2;
             sublabel = `\u25BC ${Math.abs(diff)}`;
-        // const color = getColorFromToken(DataVizPalette.error, isDarkTheme);
-        // sublabelColor = color;
+            const extractedDecreasingDeltaColors = extractColor((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_template3 = _input_layout5.template) === null || _input_layout_template3 === void 0 ? void 0 : (_input_layout_template_layout3 = _input_layout_template3.layout) === null || _input_layout_template_layout3 === void 0 ? void 0 : _input_layout_template_layout3.colorway, colorwayType, (_firstData_delta2 = firstData.delta) === null || _firstData_delta2 === void 0 ? void 0 : (_firstData_delta_decreasing = _firstData_delta2.decreasing) === null || _firstData_delta_decreasing === void 0 ? void 0 : _firstData_delta_decreasing.color, colorMap, isDarkTheme);
+            const color = resolveColor(extractedDecreasingDeltaColors, 0, '', colorMap, isDarkTheme);
+            sublabelColor = color;
         }
     }
-    // const styles: GaugeChartProps['styles'] = {
-    //   sublabel: {
-    //     fill: sublabelColor,
-    //   },
-    // };
+    const styles = {
+        sublabel: sublabelColor
+    };
     const { chartTitle } = getTitles(input.layout);
     var _firstData_value2, _input_layout_height;
     return {
@@ -674,18 +906,168 @@ export const transformPlotlyJsonToGaugeProps = (input, colorMap, isDarkTheme)=>{
         chartTitle,
         sublabel,
         // range values can be null
-        minValue: typeof ((_firstData_gauge3 = firstData.gauge) === null || _firstData_gauge3 === void 0 ? void 0 : (_firstData_gauge_axis2 = _firstData_gauge3.axis) === null || _firstData_gauge_axis2 === void 0 ? void 0 : (_firstData_gauge_axis_range2 = _firstData_gauge_axis2.range) === null || _firstData_gauge_axis_range2 === void 0 ? void 0 : _firstData_gauge_axis_range2[0]) === 'number' ? (_firstData_gauge4 = firstData.gauge) === null || _firstData_gauge4 === void 0 ? void 0 : (_firstData_gauge_axis3 = _firstData_gauge4.axis) === null || _firstData_gauge_axis3 === void 0 ? void 0 : (_firstData_gauge_axis_range3 = _firstData_gauge_axis3.range) === null || _firstData_gauge_axis_range3 === void 0 ? void 0 : _firstData_gauge_axis_range3[0] : undefined,
-        maxValue: typeof ((_firstData_gauge5 = firstData.gauge) === null || _firstData_gauge5 === void 0 ? void 0 : (_firstData_gauge_axis4 = _firstData_gauge5.axis) === null || _firstData_gauge_axis4 === void 0 ? void 0 : (_firstData_gauge_axis_range4 = _firstData_gauge_axis4.range) === null || _firstData_gauge_axis_range4 === void 0 ? void 0 : _firstData_gauge_axis_range4[1]) === 'number' ? (_firstData_gauge6 = firstData.gauge) === null || _firstData_gauge6 === void 0 ? void 0 : (_firstData_gauge_axis5 = _firstData_gauge6.axis) === null || _firstData_gauge_axis5 === void 0 ? void 0 : (_firstData_gauge_axis_range5 = _firstData_gauge_axis5.range) === null || _firstData_gauge_axis_range5 === void 0 ? void 0 : _firstData_gauge_axis_range5[1] : undefined,
+        minValue: typeof ((_firstData_gauge5 = firstData.gauge) === null || _firstData_gauge5 === void 0 ? void 0 : (_firstData_gauge_axis3 = _firstData_gauge5.axis) === null || _firstData_gauge_axis3 === void 0 ? void 0 : (_firstData_gauge_axis_range2 = _firstData_gauge_axis3.range) === null || _firstData_gauge_axis_range2 === void 0 ? void 0 : _firstData_gauge_axis_range2[0]) === 'number' ? (_firstData_gauge6 = firstData.gauge) === null || _firstData_gauge6 === void 0 ? void 0 : (_firstData_gauge_axis4 = _firstData_gauge6.axis) === null || _firstData_gauge_axis4 === void 0 ? void 0 : (_firstData_gauge_axis_range3 = _firstData_gauge_axis4.range) === null || _firstData_gauge_axis_range3 === void 0 ? void 0 : _firstData_gauge_axis_range3[0] : undefined,
+        maxValue: typeof ((_firstData_gauge7 = firstData.gauge) === null || _firstData_gauge7 === void 0 ? void 0 : (_firstData_gauge_axis5 = _firstData_gauge7.axis) === null || _firstData_gauge_axis5 === void 0 ? void 0 : (_firstData_gauge_axis_range4 = _firstData_gauge_axis5.range) === null || _firstData_gauge_axis_range4 === void 0 ? void 0 : _firstData_gauge_axis_range4[1]) === 'number' ? (_firstData_gauge8 = firstData.gauge) === null || _firstData_gauge8 === void 0 ? void 0 : (_firstData_gauge_axis6 = _firstData_gauge8.axis) === null || _firstData_gauge_axis6 === void 0 ? void 0 : (_firstData_gauge_axis_range5 = _firstData_gauge_axis6.range) === null || _firstData_gauge_axis_range5 === void 0 ? void 0 : _firstData_gauge_axis_range5[1] : undefined,
         chartValueFormat: ()=>{
             var _firstData_value;
             var _firstData_value_toString;
             return (_firstData_value_toString = (_firstData_value = firstData.value) === null || _firstData_value === void 0 ? void 0 : _firstData_value.toString()) !== null && _firstData_value_toString !== void 0 ? _firstData_value_toString : '';
         },
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220,
+        width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
+        height: (_input_layout_height = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 220,
         // TODO
         // styles,
-        variant: ((_firstData_gauge7 = firstData.gauge) === null || _firstData_gauge7 === void 0 ? void 0 : (_firstData_gauge_steps1 = _firstData_gauge7.steps) === null || _firstData_gauge_steps1 === void 0 ? void 0 : _firstData_gauge_steps1.length) ? 'multiple-segments' : 'single-segment'
+        variant: ((_firstData_gauge9 = firstData.gauge) === null || _firstData_gauge9 === void 0 ? void 0 : (_firstData_gauge_steps1 = _firstData_gauge9.steps) === null || _firstData_gauge_steps1 === void 0 ? void 0 : _firstData_gauge_steps1.length) ? 'multiple-segments' : 'single-segment',
+        styles,
+        roundCorners: true
+    };
+};
+const cleanText = (text)=>{
+    return text.replace(/&lt;[^&]*?&gt;/g, '').replace(/<[^>]*>/g, '').replace(/&lt;br&gt;|\\u003cbr\\u003e|<br>/gi, '').replace(/\$[^$]*\$/g, '$').trim();
+};
+const formatValue = (value, colIndex, cells)=>{
+    if (value === null || typeof value === 'boolean') {
+        return value;
+    }
+    const formatStr = Array.isArray(cells.format) ? cells.format[colIndex] : cells.format;
+    const prefix = Array.isArray(cells.prefix) ? cells.prefix[colIndex] : cells.prefix;
+    const suffix = Array.isArray(cells.suffix) ? cells.suffix[colIndex] : cells.suffix;
+    let formatted = value;
+    if (typeof value === 'number') {
+        if (typeof formatStr === 'string') {
+            try {
+                formatted = d3Format(formatStr)(value);
+            } catch  {
+                formatted = formatScientificLimitWidth(value);
+            }
+        } else {
+            formatted = formatScientificLimitWidth(value);
+        }
+    }
+    return `${prefix !== null && prefix !== void 0 ? prefix : ''}${formatted}${suffix !== null && suffix !== void 0 ? suffix : ''}`;
+};
+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)=>{
+        const cleanedValues = Array.isArray(values[0]) ? values.map((row)=>row.map((cell)=>cleanText(cell)).filter(Boolean).join(' ')) : values.map((cell)=>cleanText(cell));
+        return cleanedValues.map((value, colIndex)=>{
+            var _header_font, _header_font1, _header_fill;
+            const fontColorRaw = header === null || header === void 0 ? void 0 : (_header_font = header.font) === null || _header_font === void 0 ? void 0 : _header_font.color;
+            let fontColor;
+            if (Array.isArray(fontColorRaw)) {
+                const colorEntry = fontColorRaw[colIndex];
+                if (Array.isArray(colorEntry)) {
+                    fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
+                } else if (typeof colorEntry === 'string') {
+                    fontColor = colorEntry;
+                }
+            } else if (typeof fontColorRaw === 'string') {
+                fontColor = fontColorRaw;
+            }
+            const fontSizeRaw = header === null || header === void 0 ? void 0 : (_header_font1 = header.font) === null || _header_font1 === void 0 ? void 0 : _header_font1.size;
+            let fontSize;
+            if (Array.isArray(fontSizeRaw)) {
+                fontSize = Array.isArray(fontSizeRaw[0]) ? fontSizeRaw[0][colIndex] : fontSizeRaw[colIndex];
+            } else if (typeof fontSizeRaw === 'number') {
+                fontSize = fontSizeRaw;
+            }
+            const updatedColIndex = colIndex >= 1 ? 1 : 0;
+            const fillColorRaw = header === null || header === void 0 ? void 0 : (_header_fill = header.fill) === null || _header_fill === void 0 ? void 0 : _header_fill.color;
+            const backgroundColor = Array.isArray(fillColorRaw) ? fillColorRaw[updatedColIndex] : fillColorRaw;
+            const textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
+            const textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] : textAlignRaw;
+            const style = {
+                ...typeof fontColor === 'string' ? {
+                    color: fontColor
+                } : {},
+                ...typeof fontSize === 'number' ? {
+                    fontSize
+                } : {},
+                ...typeof backgroundColor === 'string' ? {
+                    backgroundColor
+                } : {},
+                ...textAlign ? {
+                    textAlign
+                } : {}
+            };
+            return {
+                value,
+                style
+            };
+        });
+    };
+    var _tableData_cells_values;
+    const columns = (_tableData_cells_values = (_tableData_cells = tableData.cells) === null || _tableData_cells === void 0 ? void 0 : _tableData_cells.values) !== null && _tableData_cells_values !== void 0 ? _tableData_cells_values : [];
+    const cells = tableData.cells.font ? tableData.cells : (_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_data = _input_layout_template.data) === null || _input_layout_template_data === void 0 ? void 0 : _input_layout_template_data.table[0].cells;
+    const rows = columns[0].map((_, rowIndex)=>columns.map((col, colIndex)=>{
+            var _cells_font, _cells_font1, _cells_fill;
+            const cellValue = col[rowIndex];
+            const cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
+            const formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number' ? formatValue(cleanValue, colIndex, cells) : cleanValue;
+            const rawFontColor = cells === null || cells === void 0 ? void 0 : (_cells_font = cells.font) === null || _cells_font === void 0 ? void 0 : _cells_font.color;
+            let fontColor;
+            if (Array.isArray(rawFontColor)) {
+                const entry = rawFontColor[colIndex];
+                const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                fontColor = typeof colorValue === 'string' ? colorValue : undefined;
+            } else if (typeof rawFontColor === 'string') {
+                fontColor = rawFontColor;
+            }
+            const rawFontSize = cells === null || cells === void 0 ? void 0 : (_cells_font1 = cells.font) === null || _cells_font1 === void 0 ? void 0 : _cells_font1.size;
+            let fontSize;
+            if (Array.isArray(rawFontSize)) {
+                const entry = rawFontSize[colIndex];
+                const fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
+            } else if (typeof rawFontSize === 'number') {
+                fontSize = rawFontSize;
+            }
+            const updatedColIndex = colIndex >= 1 ? 1 : 0;
+            const rawBackgroundColor = cells === null || cells === void 0 ? void 0 : (_cells_fill = cells.fill) === null || _cells_fill === void 0 ? void 0 : _cells_fill.color;
+            let backgroundColor;
+            if (Array.isArray(rawBackgroundColor)) {
+                const entry = rawBackgroundColor[updatedColIndex];
+                const colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
+            } else if (typeof rawBackgroundColor === 'string') {
+                backgroundColor = rawBackgroundColor;
+            }
+            const rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? cells.align[colIndex] : cells === null || cells === void 0 ? void 0 : cells.align;
+            const textAlign = rawTextAlign;
+            const style = {
+                ...fontColor ? {
+                    color: fontColor
+                } : {},
+                ...typeof fontSize === 'number' ? {
+                    fontSize
+                } : {},
+                ...backgroundColor ? {
+                    backgroundColor
+                } : {},
+                ...textAlign ? {
+                    textAlign
+                } : {}
+            };
+            return {
+                value: formattedValue,
+                style
+            };
+        }));
+    const styles = {
+        root: {
+            ...((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_font = _input_layout1.font) === null || _input_layout_font === void 0 ? void 0 : _input_layout_font.size) ? {
+                fontSize: input.layout.font.size
+            } : {}
+        }
+    };
+    var _tableData_header_values;
+    return {
+        headers: normalizeHeaders((_tableData_header_values = (_tableData_header = tableData.header) === null || _tableData_header === void 0 ? void 0 : _tableData_header.values) !== null && _tableData_header_values !== void 0 ? _tableData_header_values : [], ((_tableData_header1 = tableData.header) === null || _tableData_header1 === void 0 ? void 0 : _tableData_header1.font) ? tableData.header : (_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_data1 = _input_layout_template1.data) === null || _input_layout_template_data1 === void 0 ? void 0 : _input_layout_template_data1.table[0].header),
+        rows,
+        width: (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : _input_layout3.width,
+        height: (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : _input_layout4.height,
+        styles
     };
 };
 export const projectPolarToCartesian = (input)=>{
@@ -693,34 +1075,47 @@ export const projectPolarToCartesian = (input)=>{
         ...input
     };
     for(let sindex = 0; sindex < input.data.length; sindex++){
+        var _series_r;
         const series = input.data[sindex];
         series.x = [];
         series.y = [];
-        for(let ptindex = 0; ptindex < series.r.length; ptindex++){
+        var _series_r_length;
+        for(let ptindex = 0; ptindex < ((_series_r_length = (_series_r = series.r) === null || _series_r === void 0 ? void 0 : _series_r.length) !== null && _series_r_length !== void 0 ? _series_r_length : 0); ptindex++){
+            var _series_theta, _series_r1;
+            if (isInvalidValue((_series_theta = series.theta) === null || _series_theta === void 0 ? void 0 : _series_theta[ptindex]) || isInvalidValue((_series_r1 = series.r) === null || _series_r1 === void 0 ? void 0 : _series_r1[ptindex])) {
+                continue;
+            }
             const thetaRad = series.theta[ptindex] * Math.PI / 180;
             const radius = series.r[ptindex];
-            series.x[ptindex] = radius * Math.cos(thetaRad);
-            series.y[ptindex] = radius * Math.sin(thetaRad);
+            series.x.push(radius * Math.cos(thetaRad));
+            series.y.push(radius * Math.sin(thetaRad));
         }
         projection.data[sindex] = series;
     }
     return projection;
 };
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isPlainObject(obj) {
     return Object.prototype.toString.call(obj) === '[object Object]' && Object.getPrototypeOf(obj).hasOwnProperty('hasOwnProperty');
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var arrayAttributes = [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var stack = [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var isArrayStack = [];
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var baseContainer, baseAttrName;
 /**
  * Interate iteratively through the trace object and find all the array attributes.
  * 1 trace record = 1 series of data
  * @param trace
- */ export function findArrayAttributes(trace) {
+ */ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function findArrayAttributes(trace) {
     // Init basecontainer and baseAttrName
     crawlIntoTrace(baseContainer, 0, '');
 }
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function crawlIntoTrace(container, i, astrPartial) {
     var item = container[stack[i]];
     var newAstrPartial = astrPartial + stack[i];
@@ -772,9 +1167,6 @@ function getLineOptions(line) {
     }
     return Object.keys(lineOptions).length > 0 ? lineOptions : undefined;
 }
-const isStringArray = (arr)=>{
-    return isArrayOfType(arr, (value)=>typeof value === 'string');
-};
 // TODO: Use binary search to find the appropriate bin for numeric value.
 const findBinIndex = (bins, value, isString)=>{
     if (typeof value === 'undefined' || value === null) {
@@ -869,7 +1261,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 || '');
@@ -878,9 +1309,257 @@ 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)=>{
+    if (isArrayOrTypedArray(data)) {
+        if (typeof data[index] !== 'number' || !isFinite(data[index])) {
+            return;
+        }
+        return data[index];
+    }
+    return 1;
+};
+export const getValidXYRanges = (series)=>{
+    if (!isArrayOrTypedArray(series.x) || !isArrayOrTypedArray(series.y)) {
+        return [];
+    }
+    const ranges = [];
+    let start = 0;
+    let end = 0;
+    for(; end < series.x.length; end++){
+        if (isInvalidValue(series.x[end]) || isInvalidValue(series.y[end])) {
+            if (end - start > 0) {
+                ranges.push([
+                    start,
+                    end
+                ]);
+            }
+            start = end + 1;
+        }
+    }
+    if (end - start > 0) {
+        ranges.push([
+            start,
+            end
+        ]);
+    }
+    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
+    };
+};
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/category_order_defaults.js#L50}
+ */ const getAxisCategoryOrderProps = (data, layout)=>{
+    const result = {};
+    const axesById = {
+        x: layout === null || layout === void 0 ? void 0 : layout.xaxis,
+        y: layout === null || layout === void 0 ? void 0 : layout.yaxis
     };
+    Object.keys(axesById).forEach((axId)=>{
+        const ax = axesById[axId];
+        const axLetter = axId[0];
+        const propName = `${axLetter}AxisCategoryOrder`;
+        const values = [];
+        data.forEach((series)=>{
+            var _series_axLetter;
+            (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
+                if (!isInvalidValue(val)) {
+                    values.push(val);
+                }
+            });
+        });
+        const isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || isStringArray(values) && !isNumberArray(values) && !isDateArray(values);
+        if (!isAxisTypeCategory) {
+            return;
+        }
+        const isValidArray = isArrayOrTypedArray(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
+        if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
+            result[propName] = ax.categoryarray;
+            return;
+        }
+        if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
+            const categoriesInTraceOrder = Array.from(new Set(values));
+            result[propName] = categoriesInTraceOrder;
+            return;
+        }
+        result[propName] = ax.categoryorder;
+    });
+    return result;
 };