@fluentui/react-charts 9.2.3 → 9.3.0

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -1,13 +1,16 @@
+'use client';
 /* 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 { 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 { DEFAULT_DATE_STRING, findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS, calculatePrecision, precisionRound } from '../../utilities/utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
-import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
+import { getOpacity, extractColor, resolveColor, createColorScale } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
+export const NON_PLOT_KEY_PREFIX = 'nonplot_';
+export const SINGLE_REPEAT = 'repeat(1, 1fr)';
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -56,6 +59,47 @@ function getTitles(layout) {
     };
     return titles;
 }
+const getXAxisTickFormat = (series, layout)=>{
+    const xAxis = getXAxisProperties(series, layout);
+    if (xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat) {
+        return {
+            tickFormat: xAxis === null || xAxis === void 0 ? void 0 : xAxis.tickformat
+        };
+    }
+    return {};
+};
+const getYAxisTickFormat = (series, layout)=>{
+    const yAxis = getYAxisProperties(series, layout);
+    if (yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat) {
+        return {
+            yAxisTickFormat: d3Format(yAxis === null || yAxis === void 0 ? void 0 : yAxis.tickformat)
+        };
+    }
+    return {};
+};
+const getYMinMaxValues = (series, layout)=>{
+    var _getYAxisProperties;
+    const range = (_getYAxisProperties = getYAxisProperties(series, layout)) === null || _getYAxisProperties === void 0 ? void 0 : _getYAxisProperties.range;
+    if (range && range.length === 2) {
+        return {
+            yMinValue: range[0],
+            yMaxValue: range[1]
+        };
+    }
+    return {};
+};
+const getYAxisProperties = (series, layout)=>{
+    return layout === null || layout === void 0 ? void 0 : layout.yaxis;
+};
+const getXAxisProperties = (series, layout)=>{
+    return layout === null || layout === void 0 ? void 0 : layout.xaxis;
+};
+const getFormattedCalloutYData = (yVal, yAxisFormat)=>{
+    if (typeof (yAxisFormat === null || yAxisFormat === void 0 ? void 0 : yAxisFormat.yAxisTickFormat) === 'function' && typeof yVal === 'number') {
+        return yAxisFormat.yAxisTickFormat(yVal);
+    }
+    return formatToLocaleString(yVal);
+};
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const correctYearMonth = (xValues)=>{
     const presentYear = new Date().getFullYear();
@@ -155,8 +199,122 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
     }
     return x;
 };
+/**
+ * Checks if a key should be ignored during normalization
+ * @param key The key to check
+ * @returns true if the key should be ignored
+ */ const shouldIgnoreKey = (key)=>{
+    const lowerKey = key.toLowerCase();
+    if (lowerKey.includes('style') || lowerKey === 'style') {
+        return true;
+    }
+    // Use regex to match common CSS property patterns
+    // (color, fill, stroke, border, background, font, shadow, outline, etc.)
+    const cssKeyRegex = new RegExp('^(color|fill|stroke|border|background|font|shadow|outline|margin|padding|gap|align|justify|display|flex|grid|' + 'text|line|letter|word|vertical|horizontal|overflow|position|top|right|bottom|left|zindex|z-index|opacity|' + 'filter|clip|cursor|resize|transition|animation|transform|box|column|row|direction|visibility|' + 'content|width|height|aspect|image|user|pointer|caret|scroll|%)|(-webkit-|-moz-|-ms-|-o-)', 'i');
+    if (cssKeyRegex.test(lowerKey)) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Flattens a nested object into a single level object with dot notation keys
+ * @param obj Object to flatten
+ * @param prefix Optional prefix for keys
+ * @returns Flattened object
+ */ const flattenObject = (obj, prefix = '')=>{
+    const flattened = {};
+    for(const key in obj){
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            const newKey = prefix ? `${prefix}.${key}` : key;
+            const value = obj[key];
+            if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                // Recursively flatten nested objects
+                Object.assign(flattened, flattenObject(value, newKey));
+            } else {
+                flattened[newKey] = value;
+            }
+        }
+    }
+    return flattened;
+};
+/**
+ * Normalizes an array of objects by flattening nested structures and creating grouped data
+ * Uses json_normalize approach with D3 color detection and filtering
+ * @param data Array of objects to normalize
+ * @returns Object containing traces for grouped vertical bar chart
+ */ export const normalizeObjectArrayForGVBC = (data, xLabels)=>{
+    if (!data || data.length === 0) {
+        return {
+            traces: [],
+            x: []
+        };
+    }
+    // Use provided xLabels if available, otherwise default to Item 1, Item 2, ...
+    const x = xLabels && xLabels.length === data.length ? xLabels : data.map((_, index)=>`Item ${index + 1}`);
+    // First, flatten all objects and collect all unique keys, excluding style keys
+    const flattenedObjects = data.map((item, index)=>{
+        if (typeof item === 'object' && item !== null) {
+            const flattened = flattenObject(item);
+            // Only keep keys where the value is numeric (number or numeric string) and not a style key
+            const filtered = {};
+            Object.keys(flattened).forEach((key)=>{
+                const value = flattened[key];
+                if (!shouldIgnoreKey(key) && (typeof value === 'number' || typeof value === 'string' && isNumber(value))) {
+                    filtered[key] = value;
+                }
+            });
+            return filtered;
+        } else if (typeof item === 'number' || typeof item === 'string' && isNumber(item)) {
+            // Only keep primitive numeric values
+            return {
+                [x[index] || `item_${index}`]: item
+            };
+        } else {
+            // Non-numeric primitive, ignore by returning empty object
+            return {};
+        }
+    });
+    // Collect all unique keys across all objects
+    const allKeys = new Set();
+    flattenedObjects.forEach((obj)=>{
+        Object.keys(obj).forEach((key)=>allKeys.add(key));
+    });
+    // Create traces for each key (property)
+    const traces = [];
+    allKeys.forEach((key)=>{
+        const yValues = [];
+        let hasValidData = false;
+        let isNumericData = false;
+        flattenedObjects.forEach((obj, index)=>{
+            const value = obj[key];
+            if (typeof value === 'number') {
+                yValues.push(value);
+                hasValidData = true;
+                isNumericData = true;
+            } else if (typeof value === 'string' && isNumber(value)) {
+                yValues.push(parseFloat(value));
+                hasValidData = true;
+                isNumericData = true;
+            }
+        });
+        // Only create trace if we have valid numeric data
+        if (hasValidData && isNumericData) {
+            const trace = {
+                type: 'bar',
+                name: key,
+                x,
+                y: yValues
+            };
+            traces.push(trace);
+        }
+    });
+    return {
+        traces,
+        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;
+    var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _firstData_marker, _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
@@ -164,24 +322,53 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     // 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)=>{
-        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[legend].data += value;
+    if (colors) {
+        var _firstData_labels;
+        (_firstData_labels = firstData.labels) === null || _firstData_labels === void 0 ? void 0 : _firstData_labels.forEach((label, index)=>{
+            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[legend].data += value;
+            }
+        });
+    } else {
+        // Sort labels by value descending before mapping
+        if (firstData.labels && firstData.values) {
+            const labelValuePairs = firstData.labels.map((label, index)=>({
+                    label,
+                    value: getNumberAtIndexOrDefault(firstData.values, index),
+                    index
+                }));
+            // Filter out invalid values
+            const validPairs = labelValuePairs.filter((pair)=>!isInvalidValue(pair.value));
+            // Sort descending by value
+            validPairs.sort((a, b)=>b.value - a.value);
+            validPairs.forEach((pair, sortedIdx)=>{
+                const legend = `${pair.label}`;
+                const color = resolveColor(colors, sortedIdx, legend, colorMap, isDarkTheme);
+                if (!mapLegendToDataPoint[legend]) {
+                    mapLegendToDataPoint[legend] = {
+                        legend,
+                        data: pair.value,
+                        color
+                    };
+                } else {
+                    mapLegendToDataPoint[legend].data += pair.value;
+                }
+            });
         }
-    });
+    }
     var _input_layout_width;
     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;
@@ -200,7 +387,7 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
             chartTitle,
             chartData: Object.values(mapLegendToDataPoint)
         },
-        hideLegend: ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false ? true : false,
+        hideLegend: isMultiPlot || ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false,
         width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
         height,
         innerRadius,
@@ -219,17 +406,16 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     let yMinValue = 0;
     input.data.forEach((series, index1)=>{
-        var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _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);
-        }
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
+        colorScale = createColorScale(input.layout, series, colorScale);
         const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         // 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);
+        const extractedBarColors = 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, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.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 extractedLineColors = extractColor((_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, (_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);
@@ -252,6 +438,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                 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];
+                const yAxisCalloutData = getFormattedCalloutYData(yVal, yAxisTickFormat);
                 if (series.type === 'bar') {
                     var _rgb_copy_formatHex8;
                     mapXToDataPoints[x].chartData.push({
@@ -259,7 +446,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                         data: yVal,
                         color: (_rgb_copy_formatHex8 = rgb(color).copy({
                             opacity
-                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                        yAxisCalloutData
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -281,7 +469,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                             ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
                             mode: series.mode
                         },
-                        useSecondaryYScale: usesSecondaryYScale(series, input.layout)
+                        useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                        yAxisCalloutData
                     });
                     if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -292,7 +481,6 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
             });
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
@@ -302,9 +490,6 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         barWidth: 'auto',
         yMaxValue,
         yMinValue,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
         wrapXAxisLables: typeof ((_vsbcData_ = vsbcData[0]) === null || _vsbcData_ === void 0 ? void 0 : _vsbcData_.xAxisPoint) === 'string',
@@ -315,36 +500,55 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         showYAxisLables: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        ...getAxisCategoryOrderProps(input.data, input.layout)
+        ...getTitles(input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat,
+        ...getAxisCategoryOrderProps(input.data, input.layout),
+        ...getBarProps(input.data, input.layout),
+        ...getYMinMaxValues(input.data[0], input.layout),
+        ...getAxisTickProps(input.data, input.layout)
     };
 };
-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_;
+    var _processedInput_layout, _processedInput_layout1, _gvbcData_;
+    // Handle object arrays in y values by normalizing the data first
+    let processedInput = {
+        ...input
+    };
+    // Check if any bar traces have object arrays as y values
+    const hasObjectArrayData = input.data.some((series)=>series.type === 'bar' && isObjectArray(series.y));
+    if (hasObjectArrayData) {
+        // Process each trace that has object array y values
+        const processedData = input.data.map((series, index)=>{
+            if (series.type === 'bar' && isObjectArray(series.y)) {
+                // Normalize the object array to create multiple traces for GVBC
+                const { traces } = normalizeObjectArrayForGVBC(series.y, Array.isArray(series.x) ? series.x : undefined);
+                // Return all the new traces, each representing a property from the objects
+                return traces.map((trace)=>({
+                        ...trace,
+                        // Copy other properties from the original series if needed
+                        marker: series.marker
+                    }));
+            }
+            return [
+                series
+            ];
+        }).flat();
+        processedInput = {
+            ...input,
+            data: processedData
+        };
+    }
     const mapXToDataPoints = {};
-    const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+    const secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout, 0, 0);
+    const { legends, hideLegend } = getLegendProps(processedInput.data, processedInput.layout, isMultiPlot);
     let colorScale = undefined;
-    input.data.forEach((series, index1)=>{
-        var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_x;
-        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 yAxisTickFormat = getYAxisTickFormat(processedInput.data[0], processedInput.layout);
+    processedInput.data.forEach((series, index1)=>{
+        var _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout, _series_marker, _series_x;
+        colorScale = createColorScale(processedInput.layout, series, colorScale);
         // 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 extractedColors = extractColor((_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : (_processedInput_layout_template = _processedInput_layout.template) === null || _processedInput_layout_template === void 0 ? void 0 : (_processedInput_layout_template_layout = _processedInput_layout_template.layout) === null || _processedInput_layout_template_layout === void 0 ? void 0 : _processedInput_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.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])) {
@@ -362,38 +566,42 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                 // 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);
+                const yVal = series.y[index2];
                 var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
                     key: legend,
-                    data: series.y[index2],
+                    data: yVal,
                     xAxisCalloutData: x,
                     color: (_rgb_copy_formatHex8 = rgb(color).copy({
                         opacity
                     }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
                     legend,
-                    useSecondaryYScale: usesSecondaryYScale(series, input.layout)
+                    useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
+                    yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
                 });
             }
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const gvbcData = Object.values(mapXToDataPoints);
-    var _input_layout_height;
+    var _processedInput_layout_height;
     return {
         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,
+        width: (_processedInput_layout = processedInput.layout) === null || _processedInput_layout === void 0 ? void 0 : _processedInput_layout.width,
+        height: (_processedInput_layout_height = (_processedInput_layout1 = processedInput.layout) === null || _processedInput_layout1 === void 0 ? void 0 : _processedInput_layout1.height) !== null && _processedInput_layout_height !== void 0 ? _processedInput_layout_height : 350,
         barWidth: 'auto',
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
         wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
         hideLegend,
         roundCorners: true,
-        ...getAxisCategoryOrderProps(input.data, input.layout)
+        ...getTitles(processedInput.layout),
+        ...getAxisCategoryOrderProps(processedInput.data, processedInput.layout),
+        ...getYMinMaxValues(processedInput.data[0], processedInput.layout),
+        ...getXAxisTickFormat(processedInput.data[0], processedInput.layout),
+        ...yAxisTickFormat,
+        ...getBarProps(processedInput.data, processedInput.layout),
+        ...getAxisTickProps(processedInput.data, processedInput.layout)
     };
 };
 export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -402,15 +610,13 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
     input.data.forEach((series, seriesIdx)=>{
-        var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_xbins, _series_xbins1, _series_xbins2;
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_xbins, _series_xbins1, _series_xbins2;
         if (!series.x) {
             return;
         }
-        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);
-        }
+        colorScale = createColorScale(input.layout, series, colorScale);
         // 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 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, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         const xValues = [];
         const yValues = [];
         series.x.forEach((xVal, index)=>{
@@ -459,21 +665,19 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
             });
         });
     });
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     var _input_layout_height;
     return {
         data: vbcData,
         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,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         mode: 'histogram',
         hideTickOverlap: true,
         wrapXAxisLables: typeof ((_vbcData_ = vbcData[0]) === null || _vbcData_ === void 0 ? void 0 : _vbcData_.x) === 'string',
         maxBarWidth: 50,
         hideLegend,
         roundCorners: true,
+        ...getTitles(input.layout),
+        ...getYMinMaxValues(input.data[0], input.layout),
         ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
@@ -487,20 +691,23 @@ export const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, color
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
 };
 const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme)=>{
-    var _input_data_;
+    var _input_data_, _input_layout, _input_layout1;
     const isScatterMarkers = [
+        'text',
         'markers',
         'text+markers',
         'markers+text',
         'lines+markers',
         'markers+line',
-        'text+lines+markers'
+        'text+lines+markers',
+        'lines+markers+text'
     ].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, isMultiPlot);
+    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     const chartData = input.data.map((series, index)=>{
         var _series_mode, _series_line, _series_marker, _series_line1, _input_layout_template_layout, _input_layout_template, _input_layout, _series_mode1;
         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;
@@ -516,11 +723,12 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         const seriesOpacity = getOpacity(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
-        const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) ? getLineOptions(series.line) : undefined;
+        // if mode contains 'text', we prioritize showing the text over curving the line
+        const lineOptions = !((_series_mode1 = series.mode) === null || _series_mode1 === void 0 ? void 0 : _series_mode1.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
         const legendShape = getLegendShape(series);
         const validXYRanges = getValidXYRanges(series);
         return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
-            var _series_marker;
+            var _series_marker, _input_layout, _input_layout_polar_angularaxis, _input_layout_polar, _input_layout1, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout2;
             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) : [];
@@ -541,7 +749,8 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                         } : {},
                         ...textValues ? {
                             text: textValues[i]
-                        } : {}
+                        } : {},
+                        yAxisCalloutData: getFormattedCalloutYData(rangeYValues[i], yAxisTickFormat)
                     };
                 }),
                 color: (_rgb_copy_formatHex8 = rgb(seriesColor).copy({
@@ -549,58 +758,65 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                 }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : seriesColor,
                 lineOptions: {
                     ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
-                    mode: series.mode
+                    mode: series.type !== 'scatterpolar' ? series.mode : 'scatterpolar',
+                    // originXOffset is not typed on Layout, but may be present in input.layout as a part of projection of
+                    // scatter polar coordingates to cartesian coordinates
+                    ...series.type === 'scatterpolar' ? {
+                        originXOffset: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.__polarOriginX,
+                        direction: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_polar = _input_layout1.polar) === null || _input_layout_polar === void 0 ? void 0 : (_input_layout_polar_angularaxis = _input_layout_polar.angularaxis) === null || _input_layout_polar_angularaxis === void 0 ? void 0 : _input_layout_polar_angularaxis.direction,
+                        rotation: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_polar1 = _input_layout2.polar) === null || _input_layout_polar1 === void 0 ? void 0 : (_input_layout_polar_angularaxis1 = _input_layout_polar1.angularaxis) === null || _input_layout_polar_angularaxis1 === void 0 ? void 0 : _input_layout_polar_angularaxis1.rotation,
+                        axisLabel: series.__axisLabel ? series.__axisLabel : {}
+                    } : {}
                 },
                 useSecondaryYScale: usesSecondaryYScale(series, input.layout)
             };
         });
     }).flat();
-    const yMinMaxValues = findNumericMinMaxOfY(chartData);
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
+    const yMinMax = getYMinMaxValues(input.data[0], input.layout);
+    if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
+        const yMinMaxValues = findNumericMinMaxOfY(chartData);
+        yMinMax.yMinValue = yMinMaxValues.startValue;
+        yMinMax.yMaxValue = yMinMaxValues.endValue;
+    }
     const numDataPoints = chartData.reduce((total, lineChartPoints)=>total + lineChartPoints.data.length, 0);
     const chartProps = {
-        chartTitle,
         lineChartData: chartData
     };
     const scatterChartProps = {
-        chartTitle,
         scatterChartData: chartData
     };
+    var _input_layout_height;
+    const commonProps = {
+        supportNegativeData: true,
+        ...secondaryYAxisValues,
+        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,
+        hideTickOverlap: true,
+        hideLegend,
+        useUTC: false,
+        optimizeLargeData: numDataPoints > 1000,
+        ...getTitles(input.layout),
+        ...getXAxisTickFormat(input.data[0], input.layout),
+        ...yAxisTickFormat,
+        ...getAxisScaleTypeProps(input.data, input.layout),
+        ...getAxisTickProps(input.data, input.layout)
+    };
     if (isAreaChart) {
-        var _input_layout, _input_layout1;
-        var _input_layout_height;
         return {
             data: chartProps,
-            supportNegativeData: true,
-            xAxisTitle,
-            yAxisTitle,
-            ...secondaryYAxisValues,
             mode,
-            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,
-            hideTickOverlap: true,
-            useUTC: false,
-            hideLegend,
-            optimizeLargeData: numDataPoints > 1000
+            ...commonProps
         };
     } else {
-        var _input_layout2, _input_layout3;
-        var _input_layout_height1;
         return {
             data: isScatterChart ? scatterChartProps : chartProps,
-            supportNegativeData: true,
-            xAxisTitle,
-            yAxisTitle,
-            ...secondaryYAxisValues,
             roundedTicks: true,
-            yMinValue: yMinMaxValues.startValue,
-            yMaxValue: yMinMaxValues.endValue,
-            width: (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.width,
-            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,
-            optimizeLargeData: numDataPoints > 1000
+            ...commonProps,
+            ...yMinMax,
+            ...isScatterChart ? {
+                showYAxisLablesTooltip: true,
+                ...getAxisCategoryOrderProps(input.data, input.layout)
+            } : {}
         };
     }
 };
@@ -609,12 +825,10 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
     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);
-        }
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
+        colorScale = createColorScale(input.layout, series, colorScale);
         // 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 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, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
         const legend = legends[index];
         return series.y.map((yValue, i)=>{
             var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
@@ -646,12 +860,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
     const scalingFactor = 0.01;
     const gapFactor = 1 / (1 + scalingFactor * numberOfRows);
     const barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
-    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     return {
         data: chartData,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         secondaryYAxistitle: typeof ((_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_yaxis2 = _input_layout3.yaxis2) === null || _input_layout_yaxis2 === void 0 ? void 0 : _input_layout_yaxis2.title) === 'string' ? (_input_layout4 = input.layout) === null || _input_layout4 === void 0 ? void 0 : (_input_layout_yaxis21 = _input_layout4.yaxis2) === null || _input_layout_yaxis21 === void 0 ? void 0 : _input_layout_yaxis21.title : ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : (_input_layout_yaxis22 = _input_layout5.yaxis2) === null || _input_layout_yaxis22 === void 0 ? void 0 : (_input_layout_yaxis2_title = _input_layout_yaxis22.title) === null || _input_layout_yaxis2_title === void 0 ? void 0 : _input_layout_yaxis2_title.text) || '',
         barHeight,
         showYAxisLables: true,
@@ -662,7 +872,67 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
         showYAxisLablesTooltip: true,
         hideLegend,
         roundCorners: true,
-        ...getAxisCategoryOrderProps(input.data, input.layout)
+        ...getTitles(input.layout),
+        ...getAxisCategoryOrderProps(input.data, input.layout),
+        ...getBarProps(input.data, input.layout, true),
+        ...getAxisTickProps(input.data, input.layout)
+    };
+};
+export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+    var _input_layout, _input_layout1;
+    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+    let colorScale = undefined;
+    const chartData = input.data.map((series, index)=>{
+        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_xaxis, _input_layout1;
+        colorScale = createColorScale(input.layout, series, colorScale);
+        // 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, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
+        const legend = legends[index];
+        const isXDate = ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_xaxis = _input_layout1.xaxis) === null || _input_layout_xaxis === void 0 ? void 0 : _input_layout_xaxis.type) === 'date' || isDateArray(series.x);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const convertXValueToNumber = (value)=>{
+            return isInvalidValue(value) ? 0 : isXDate ? +parseLocalDate(value) : +value;
+        };
+        return series.y.map((yVal, i)=>{
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _series_base, _series_x;
+            if (isInvalidValue(yVal)) {
+                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);
+            const base = convertXValueToNumber((_series_base = series.base) === null || _series_base === void 0 ? void 0 : _series_base[i]);
+            const xVal = convertXValueToNumber((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]);
+            var _rgb_copy_formatHex8;
+            return {
+                x: {
+                    start: isXDate ? new Date(base) : base,
+                    end: isXDate ? new Date(base + xVal) : base + xVal
+                },
+                y: yVal,
+                legend,
+                color: (_rgb_copy_formatHex8 = rgb(color).copy({
+                    opacity
+                }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+            };
+        }).filter((point)=>point !== null);
+    }).flat();
+    var _input_layout_height;
+    return {
+        data: chartData,
+        showYAxisLables: true,
+        height: (_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 : 350,
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        hideTickOverlap: true,
+        hideLegend,
+        noOfCharsToTruncate: 20,
+        showYAxisLablesTooltip: true,
+        roundCorners: true,
+        useUTC: false,
+        ...getTitles(input.layout),
+        ...getAxisCategoryOrderProps(input.data, input.layout),
+        ...getBarProps(input.data, input.layout, true),
+        ...getAxisTickProps(input.data, input.layout)
     };
 };
 export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -776,7 +1046,6 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
     }
     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 {
         data: [
@@ -786,9 +1055,6 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         rangeValuesForColorScale,
         hideLegend: true,
         showYAxisLables: true,
-        chartTitle,
-        xAxisTitle,
-        yAxisTitle,
         sortOrder: 'none',
         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,
@@ -796,9 +1062,11 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
         wrapXAxisLables: true,
+        ...getTitles(input.layout),
         ...getAxisCategoryOrderProps([
             firstData
-        ], input.layout)
+        ], input.layout),
+        ...getAxisTickProps(input.data, input.layout)
     };
 };
 export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -946,37 +1214,49 @@ const formatValue = (value, colIndex, cells)=>{
     }
     return `${prefix !== null && prefix !== void 0 ? prefix : ''}${formatted}${suffix !== null && suffix !== void 0 ? suffix : ''}`;
 };
+function resolveCellStyle(raw, rowIndex, colIndex) {
+    if (Array.isArray(raw)) {
+        var _raw_colIndex;
+        const rowEntry = (_raw_colIndex = raw[colIndex]) !== null && _raw_colIndex !== void 0 ? _raw_colIndex : raw[0];
+        if (Array.isArray(rowEntry)) {
+            var _rowEntry_rowIndex;
+            return (_rowEntry_rowIndex = rowEntry[rowIndex]) !== null && _rowEntry_rowIndex !== void 0 ? _rowEntry_rowIndex : rowEntry[0];
+        }
+        return rowEntry;
+    }
+    return raw;
+}
+function mergeCells(tableCells, templateCells) {
+    var _tableCells_values, _ref, _tableCells_align, _templateCells_fill, _tableCells_fill, _templateCells_font, _tableCells_font, _tableCells_format, _tableCells_prefix, _tableCells_suffix;
+    return {
+        values: (_ref = (_tableCells_values = tableCells === null || tableCells === void 0 ? void 0 : tableCells.values) !== null && _tableCells_values !== void 0 ? _tableCells_values : templateCells === null || templateCells === void 0 ? void 0 : templateCells.values) !== null && _ref !== void 0 ? _ref : [],
+        align: (_tableCells_align = tableCells === null || tableCells === void 0 ? void 0 : tableCells.align) !== null && _tableCells_align !== void 0 ? _tableCells_align : templateCells === null || templateCells === void 0 ? void 0 : templateCells.align,
+        fill: {
+            ...(_templateCells_fill = templateCells === null || templateCells === void 0 ? void 0 : templateCells.fill) !== null && _templateCells_fill !== void 0 ? _templateCells_fill : {},
+            ...(_tableCells_fill = tableCells === null || tableCells === void 0 ? void 0 : tableCells.fill) !== null && _tableCells_fill !== void 0 ? _tableCells_fill : {}
+        },
+        font: {
+            ...(_templateCells_font = templateCells === null || templateCells === void 0 ? void 0 : templateCells.font) !== null && _templateCells_font !== void 0 ? _templateCells_font : {},
+            ...(_tableCells_font = tableCells === null || tableCells === void 0 ? void 0 : tableCells.font) !== null && _tableCells_font !== void 0 ? _tableCells_font : {}
+        },
+        format: (_tableCells_format = tableCells === null || tableCells === void 0 ? void 0 : tableCells.format) !== null && _tableCells_format !== void 0 ? _tableCells_format : templateCells === null || templateCells === void 0 ? void 0 : templateCells.format,
+        prefix: (_tableCells_prefix = tableCells === null || tableCells === void 0 ? void 0 : tableCells.prefix) !== null && _tableCells_prefix !== void 0 ? _tableCells_prefix : templateCells === null || templateCells === void 0 ? void 0 : templateCells.prefix,
+        suffix: (_tableCells_suffix = tableCells === null || tableCells === void 0 ? void 0 : tableCells.suffix) !== null && _tableCells_suffix !== void 0 ? _tableCells_suffix : templateCells === null || templateCells === void 0 ? void 0 : templateCells.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;
+    var _tableData_cells, _input_layout_template_data_table_, _input_layout_template_data_table, _input_layout_template_data, _input_layout_template, _input_layout, _input_layout_font, _input_layout1, _input_layout_template_data_table_1, _input_layout_template_data_table1, _input_layout_template_data1, _input_layout_template1, _input_layout2, _tableData_header, _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;
+            //headers are at first row only
+            const rowIndex = 0;
+            const fontColor = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_font = header.font) === null || _header_font === void 0 ? void 0 : _header_font.color, rowIndex, colIndex);
+            const fontSize = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_font1 = header.font) === null || _header_font1 === void 0 ? void 0 : _header_font1.size, rowIndex, colIndex);
+            const backgroundColor = resolveCellStyle(header === null || header === void 0 ? void 0 : (_header_fill = header.fill) === null || _header_fill === void 0 ? void 0 : _header_fill.color, rowIndex, colIndex);
+            const textAlign = resolveCellStyle(header === null || header === void 0 ? void 0 : header.align, rowIndex, colIndex);
             const style = {
                 ...typeof fontColor === 'string' ? {
                     color: fontColor
@@ -999,42 +1279,16 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
     };
     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 cells = mergeCells(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 = _input_layout_template_data.table) === null || _input_layout_template_data_table === void 0 ? void 0 : (_input_layout_template_data_table_ = _input_layout_template_data_table[0]) === null || _input_layout_template_data_table_ === void 0 ? void 0 : _input_layout_template_data_table_.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 fontColor = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_font = cells.font) === null || _cells_font === void 0 ? void 0 : _cells_font.color, rowIndex, colIndex);
+            const fontSize = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_font1 = cells.font) === null || _cells_font1 === void 0 ? void 0 : _cells_font1.size, rowIndex, colIndex);
+            const backgroundColor = resolveCellStyle(cells === null || cells === void 0 ? void 0 : (_cells_fill = cells.fill) === null || _cells_fill === void 0 ? void 0 : _cells_fill.color, rowIndex, colIndex);
+            const textAlign = resolveCellStyle(cells === null || cells === void 0 ? void 0 : cells.align, rowIndex, colIndex);
             const style = {
                 ...fontColor ? {
                     color: fontColor
@@ -1061,37 +1315,314 @@ export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, colorMa
             } : {}
         }
     };
+    const templateHeader = (_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_data_table1 = _input_layout_template_data1.table) === null || _input_layout_template_data_table1 === void 0 ? void 0 : (_input_layout_template_data_table_1 = _input_layout_template_data_table1[0]) === null || _input_layout_template_data_table_1 === void 0 ? void 0 : _input_layout_template_data_table_1.header;
+    const tableHeader = tableData.header;
+    var _tableHeader_align, _templateHeader_fill, _tableHeader_fill, _templateHeader_font, _tableHeader_font, _tableHeader_values, _ref;
+    const header = {
+        align: (_tableHeader_align = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.align) !== null && _tableHeader_align !== void 0 ? _tableHeader_align : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.align,
+        fill: {
+            ...(_templateHeader_fill = templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.fill) !== null && _templateHeader_fill !== void 0 ? _templateHeader_fill : {},
+            ...(_tableHeader_fill = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.fill) !== null && _tableHeader_fill !== void 0 ? _tableHeader_fill : {}
+        },
+        font: {
+            ...(_templateHeader_font = templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.font) !== null && _templateHeader_font !== void 0 ? _templateHeader_font : {},
+            ...(_tableHeader_font = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.font) !== null && _tableHeader_font !== void 0 ? _tableHeader_font : {}
+        },
+        values: (_ref = (_tableHeader_values = tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.values) !== null && _tableHeader_values !== void 0 ? _tableHeader_values : templateHeader === null || templateHeader === void 0 ? void 0 : templateHeader.values) !== null && _ref !== void 0 ? _ref : []
+    };
     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),
+        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 : [], 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
     };
 };
+function getCategoriesAndValues(series) {
+    const orientation = series.orientation || 'h';
+    var _series_labels, _ref;
+    const y = (_ref = (_series_labels = series.labels) !== null && _series_labels !== void 0 ? _series_labels : series.y) !== null && _ref !== void 0 ? _ref : series.stage;
+    var _series_values, _ref1;
+    const x = (_ref1 = (_series_values = series.values) !== null && _series_values !== void 0 ? _series_values : series.x) !== null && _ref1 !== void 0 ? _ref1 : series.value;
+    const xIsString = isStringArray(x);
+    const yIsString = isStringArray(y);
+    const xIsNumber = isNumberArray(x);
+    const yIsNumber = isNumberArray(y);
+    // Helper to ensure array of (string | number)
+    const toArray = (arr)=>{
+        if (Array.isArray(arr)) {
+            return arr;
+        }
+        if (typeof arr === 'string' || typeof arr === 'number') {
+            return [
+                arr
+            ];
+        }
+        return [];
+    };
+    if (orientation === 'h') {
+        if (yIsString && xIsNumber) {
+            return {
+                categories: toArray(y),
+                values: toArray(x)
+            };
+        } else if (xIsString && yIsNumber) {
+            return {
+                categories: toArray(x),
+                values: toArray(y)
+            };
+        } else {
+            return {
+                categories: yIsString ? toArray(y) : toArray(x),
+                values: yIsString ? toArray(x) : toArray(y)
+            };
+        }
+    } else {
+        if (xIsString && yIsNumber) {
+            return {
+                categories: toArray(x),
+                values: toArray(y)
+            };
+        } else if (yIsString && xIsNumber) {
+            return {
+                categories: toArray(y),
+                values: toArray(x)
+            };
+        } else {
+            return {
+                categories: xIsString ? toArray(x) : toArray(y),
+                values: xIsString ? toArray(y) : toArray(x)
+            };
+        }
+    }
+}
+export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+    var _input_layout, _input_layout1, _input_data_, _input_layout2;
+    const funnelData = [];
+    // Determine if data is stacked based on multiple series with multiple values per series
+    const isStacked = input.data.length > 1 && input.data.every((series)=>{
+        var _series_values, _ref;
+        const values = (_ref = (_series_values = series.values) !== null && _series_values !== void 0 ? _series_values : series.x) !== null && _ref !== void 0 ? _ref : series.value;
+        var _series_labels, _ref1;
+        const labels = (_ref1 = (_series_labels = series.labels) !== null && _series_labels !== void 0 ? _series_labels : series.y) !== null && _ref1 !== void 0 ? _ref1 : series.stage;
+        return Array.isArray(labels) && Array.isArray(values) && values.length > 1 && labels.length > 1;
+    });
+    if (isStacked) {
+        // Assign a color per series/category and use it for all subValues of that category
+        const seriesColors = {};
+        input.data.forEach((series, seriesIdx)=>{
+            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_marker1;
+            const category = series.name || `Category ${seriesIdx + 1}`;
+            var _series_marker_colors;
+            // Use the same color for this category across all stages
+            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, (_series_marker_colors = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.colors) !== null && _series_marker_colors !== void 0 ? _series_marker_colors : (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color, colorMap, isDarkTheme);
+            // Always use the first color for the series/category
+            const color = resolveColor(extractedColors, 0, category, colorMap, isDarkTheme);
+            seriesColors[category] = color;
+            var _series_labels, _ref;
+            const labels = (_ref = (_series_labels = series.labels) !== null && _series_labels !== void 0 ? _series_labels : series.y) !== null && _ref !== void 0 ? _ref : series.stage;
+            var _series_values, _ref1;
+            const values = (_ref1 = (_series_values = series.values) !== null && _series_values !== void 0 ? _series_values : series.x) !== null && _ref1 !== void 0 ? _ref1 : series.value;
+            if (!isArrayOrTypedArray(labels) || !isArrayOrTypedArray(values)) {
+                return;
+            }
+            if (labels && isArrayOrTypedArray(labels) && labels.length > 0) {
+                labels.forEach((label, i)=>{
+                    const stageIndex = funnelData.findIndex((stage)=>stage.stage === label);
+                    const valueNum = Number(values[i]);
+                    if (isNaN(valueNum)) {
+                        return;
+                    }
+                    if (stageIndex === -1) {
+                        funnelData.push({
+                            stage: label,
+                            subValues: [
+                                {
+                                    category,
+                                    value: valueNum,
+                                    color
+                                }
+                            ]
+                        });
+                    } else {
+                        funnelData[stageIndex].subValues.push({
+                            category,
+                            value: valueNum,
+                            color
+                        });
+                    }
+                });
+            }
+        });
+    } else {
+        // Non-stacked data handling (multiple series with single-value arrays)
+        input.data.forEach((series, seriesIdx)=>{
+            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_marker1;
+            const { categories, values } = getCategoriesAndValues(series);
+            if (!isArrayOrTypedArray(categories) || !isArrayOrTypedArray(values)) {
+                return;
+            }
+            var _series_marker_colors;
+            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, (_series_marker_colors = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.colors) !== null && _series_marker_colors !== void 0 ? _series_marker_colors : (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color, colorMap, isDarkTheme);
+            categories.forEach((label, i)=>{
+                const color = resolveColor(extractedColors, i, label, colorMap, isDarkTheme);
+                const valueNum = Number(values[i]);
+                if (isNaN(valueNum)) {
+                    return;
+                }
+                funnelData.push({
+                    stage: label,
+                    value: valueNum,
+                    color
+                });
+            });
+        });
+    }
+    return {
+        data: funnelData,
+        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
+        height: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height,
+        orientation: ((_input_data_ = input.data[0]) === null || _input_data_ === void 0 ? void 0 : _input_data_.orientation) === 'v' ? 'horizontal' : 'vertical',
+        hideLegend: isMultiPlot || ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.showlegend) === false
+    };
+};
 export const projectPolarToCartesian = (input)=>{
+    var _input_layout, _input_layout1;
     const projection = {
         ...input
     };
+    // Find the global min and max radius across all series
+    let minRadius = 0;
+    let maxRadius = 0;
     for(let sindex = 0; sindex < input.data.length; sindex++){
-        var _series_r;
+        const rVals = input.data[sindex].r;
+        if (rVals && isArrayOrTypedArray(rVals)) {
+            for(let ptindex = 0; ptindex < rVals.length; ptindex++){
+                if (!isInvalidValue(rVals[ptindex])) {
+                    minRadius = Math.min(minRadius, rVals[ptindex]);
+                    maxRadius = Math.max(maxRadius, rVals[ptindex]);
+                }
+            }
+        }
+    }
+    // If there are negative radii, compute the shift
+    const radiusShift = minRadius < 0 ? -minRadius : 0;
+    // Collect all unique theta values from all scatterpolar series for equal spacing
+    const allThetaValues = new Set();
+    for(let sindex = 0; sindex < input.data.length; sindex++){
+        const series = input.data[sindex];
+        if (series.theta && isArrayOrTypedArray(series.theta)) {
+            series.theta.forEach((theta)=>allThetaValues.add(String(theta)));
+        }
+    }
+    // Project all points and create a perfect square domain
+    const allX = [];
+    const allY = [];
+    let originX = null;
+    for(let sindex = 0; sindex < input.data.length; sindex++){
+        var _input_layout_polar_angularaxis, _input_layout_polar, _input_layout2, _input_layout_polar_angularaxis1, _input_layout_polar1, _input_layout3;
         const series = input.data[sindex];
+        // If scatterpolar, set __axisLabel to all unique theta values for equal spacing
+        if (isArrayOrTypedArray(series.theta)) {
+            series.__axisLabel = Array.from(allThetaValues);
+        }
         series.x = [];
         series.y = [];
-        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])) {
+        const thetas = series.theta;
+        const rVals = series.r;
+        // Skip if rVals or thetas are not arrays
+        if (!isArrayOrTypedArray(rVals) || !isArrayOrTypedArray(thetas)) {
+            projection.data[sindex] = series;
+            continue;
+        }
+        // retrieve polar axis settings
+        const dirMultiplier = ((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_polar = _input_layout2.polar) === null || _input_layout_polar === void 0 ? void 0 : (_input_layout_polar_angularaxis = _input_layout_polar.angularaxis) === null || _input_layout_polar_angularaxis === void 0 ? void 0 : _input_layout_polar_angularaxis.direction) === 'clockwise' ? -1 : 1;
+        var _input_layout_polar_angularaxis_rotation;
+        const startAngleInRad = ((_input_layout_polar_angularaxis_rotation = (_input_layout3 = input.layout) === null || _input_layout3 === void 0 ? void 0 : (_input_layout_polar1 = _input_layout3.polar) === null || _input_layout_polar1 === void 0 ? void 0 : (_input_layout_polar_angularaxis1 = _input_layout_polar1.angularaxis) === null || _input_layout_polar_angularaxis1 === void 0 ? void 0 : _input_layout_polar_angularaxis1.rotation) !== null && _input_layout_polar_angularaxis_rotation !== void 0 ? _input_layout_polar_angularaxis_rotation : 0) * Math.PI / 180;
+        // Compute tick positions if categorical
+        let uniqueTheta = [];
+        let categorical = false;
+        if (!isNumberArray(thetas)) {
+            uniqueTheta = Array.from(new Set(thetas));
+            categorical = true;
+        }
+        for(let ptindex = 0; ptindex < rVals.length; ptindex++){
+            if (isInvalidValue(thetas === null || thetas === void 0 ? void 0 : thetas[ptindex]) || isInvalidValue(rVals === null || rVals === void 0 ? void 0 : rVals[ptindex])) {
                 continue;
             }
-            const thetaRad = series.theta[ptindex] * Math.PI / 180;
-            const radius = series.r[ptindex];
-            series.x.push(radius * Math.cos(thetaRad));
-            series.y.push(radius * Math.sin(thetaRad));
+            // Map theta to angle in radians
+            let thetaRad;
+            if (categorical) {
+                const idx = uniqueTheta.indexOf(thetas[ptindex]);
+                const step = 2 * Math.PI / uniqueTheta.length;
+                thetaRad = startAngleInRad + dirMultiplier * idx * step;
+            } else {
+                thetaRad = startAngleInRad + dirMultiplier * (thetas[ptindex] * Math.PI / 180);
+            }
+            // Shift only the polar origin (not the cartesian)
+            const rawRadius = rVals[ptindex];
+            const polarRadius = rawRadius + radiusShift; // Only for projection
+            // Calculate cartesian coordinates (with shifted polar origin)
+            const x = polarRadius * Math.cos(thetaRad);
+            const y = polarRadius * Math.sin(thetaRad);
+            // Calculate the cartesian coordinates of the original polar origin (0,0)
+            // This is the point that should be mapped to (0,0) in cartesian coordinates
+            if (sindex === 0 && ptindex === 0) {
+                // For polar origin (r=0, θ=0), cartesian coordinates are (0,0)
+                // But since we shifted the radius by radiusShift, the cartesian origin is at (radiusShift, 0)
+                originX = radiusShift;
+            }
+            series.x.push(x);
+            series.y.push(y);
+            allX.push(x);
+            allY.push(y);
+        }
+        // Map text to each data point for downstream chart rendering
+        if (series.x && series.y) {
+            series.data = series.x.map((xVal, idx)=>({
+                    x: xVal,
+                    y: series.y[idx],
+                    ...series.text ? {
+                        text: series.text[idx]
+                    } : {}
+                }));
         }
         projection.data[sindex] = series;
     }
+    // 7. Recenter all cartesian coordinates
+    if (originX !== null) {
+        for(let sindex = 0; sindex < projection.data.length; sindex++){
+            const series = projection.data[sindex];
+            if (series.x && series.y) {
+                series.x = series.x.map((v)=>v - originX);
+            }
+        }
+        // Also recenter allX for normalization
+        for(let i = 0; i < allX.length; i++){
+            allX[i] = allX[i] - originX;
+        }
+    }
+    // 8. Find the maximum absolute value among all x and y
+    let maxAbs = Math.max(...allX.map(Math.abs), ...allY.map(Math.abs));
+    maxAbs = maxAbs === 0 ? 1 : maxAbs;
+    // 9. Rescale all points so that the largest |x| or |y| is 0.5
+    for(let sindex = 0; sindex < projection.data.length; sindex++){
+        const series = projection.data[sindex];
+        if (series.x && series.y) {
+            series.x = series.x.map((v)=>v / (2 * maxAbs));
+            series.y = series.y.map((v)=>v / (2 * maxAbs));
+        }
+    }
+    // 10. Customize layout for perfect square with absolute positioning
+    const size = ((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width) || ((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) || 500;
+    projection.layout = {
+        ...projection.layout,
+        width: size,
+        height: size
+    };
+    // Attach originX as custom properties
+    projection.layout.__polarOriginX = originX !== null && originX !== void 0 ? originX : undefined;
     return projection;
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1202,7 +1733,7 @@ const createBins = (data, binStart, binEnd, binSize)=>{
     ]);
     if (typeof binSize === 'number' && binSize > 0) {
         const thresholds = [];
-        const precision = Math.max(getPrecision(minVal), getPrecision(binSize));
+        const precision = Math.max(calculatePrecision(minVal), calculatePrecision(binSize));
         let th = precisionRound(minVal, precision);
         while(th < precisionRound(maxVal + binSize, precision)){
             thresholds.push(th);
@@ -1252,15 +1783,6 @@ const calculateHistNorm = (histnorm, value, total, dx, dy = 1)=>{
             return value;
     }
 };
-const getPrecision = (value)=>{
-    var _value_toString_split_;
-    var _value_toString_split__length;
-    return (_value_toString_split__length = (_value_toString_split_ = value.toString().split('.')[1]) === null || _value_toString_split_ === void 0 ? void 0 : _value_toString_split_.length) !== null && _value_toString_split__length !== void 0 ? _value_toString_split__length : 0;
-};
-const precisionRound = (value, precision)=>{
-    const factor = Math.pow(10, precision);
-    return Math.round(value * factor) / factor;
-};
 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';
@@ -1271,25 +1793,44 @@ const getLegendShape = (series)=>{
     }
     return 'default';
 };
-export const getAllupLegendsProps = (input, colorMap, colorwayType, isDarkTheme)=>{
+export const getAllupLegendsProps = (input, colorMap, colorwayType, traceInfo, 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;
+        return acc || series.showlegend === true || series.showlegend === undefined;
     }, 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
+            if (traceInfo[index].type === 'donut') {
+                var _input_layout, _input_layout_template_layout, _input_layout_template, _input_layout1, _input_layout2, _pieSeries_marker, _pieSeries_labels;
+                const pieSeries = series;
+                var _input_layout_piecolorway, _input_layout_piecolorway1;
+                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 : pieSeries === null || pieSeries === void 0 ? void 0 : (_pieSeries_marker = pieSeries.marker) === null || _pieSeries_marker === void 0 ? void 0 : _pieSeries_marker.colors, colorMap, isDarkTheme);
+                (_pieSeries_labels = pieSeries.labels) === null || _pieSeries_labels === void 0 ? void 0 : _pieSeries_labels.forEach((label, labelIndex)=>{
+                    const legend = `${label}`;
+                    // resolve color for each legend from the extracted colors
+                    const color = resolveColor(colors, labelIndex, legend, colorMap, isDarkTheme);
+                    if (legend !== '' && allupLegends.some((group)=>group.title === legend) === false) {
+                        allupLegends.push({
+                            title: legend,
+                            color
+                        });
+                    }
                 });
+            } else if (isNonPlotType(traceInfo[index].type) === false) {
+                var _plotSeries_line, _plotSeries_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout3;
+                const plotSeries = series;
+                const name = plotSeries.legendgroup;
+                const color = ((_plotSeries_line = plotSeries.line) === null || _plotSeries_line === void 0 ? void 0 : _plotSeries_line.color) || ((_plotSeries_marker = plotSeries.marker) === null || _plotSeries_marker === void 0 ? void 0 : _plotSeries_marker.color);
+                const legendShape = getLegendShape(plotSeries);
+                const resolvedColor = extractColor((_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_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, color, colorMap, isDarkTheme);
+                if (name !== undefined && name !== '' && allupLegends.some((group)=>group.title === name) === false) {
+                    allupLegends.push({
+                        title: name,
+                        color: resolvedColor,
+                        shape: legendShape
+                    });
+                }
             }
         });
     }
@@ -1355,28 +1896,21 @@ 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 = [];
+export const isNonPlotType = (chartType)=>{
+    return [
+        'donut',
+        'sankey',
+        'pie'
+    ].includes(chartType);
+};
+export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
+    const domainX = [];
+    const domainY = [];
+    let cartesianDomains = 0;
     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,
@@ -1384,144 +1918,144 @@ export const getGridProperties = (layout, isMultiPlot)=>{
             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
-                    };
+    const layout = schema === null || schema === void 0 ? void 0 : schema.layout;
+    if (layout !== undefined && layout !== null && Object.keys(layout).length > 0) {
+        Object.keys(layout !== null && layout !== void 0 ? layout : {}).forEach((key)=>{
+            if (key.startsWith('xaxis')) {
+                var _layout_key;
+                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}`);
                 }
-                throw new Error(`Invalid layout: yaxis ${index + 1} anchor should be x${anchorIndex + 1}`);
+                const xAxisLayout = layout[key];
+                const domainXInfo = {
+                    start: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[0] : 0,
+                    end: (xAxisLayout === null || xAxisLayout === void 0 ? void 0 : xAxisLayout.domain) ? xAxisLayout.domain[1] : 1
+                };
+                domainX.push(domainXInfo);
+            } else if (key.startsWith('yaxis')) {
+                var _layout_key1;
+                const index = getIndexFromKey(key, 'yaxis');
+                var _layout_key_anchor1;
+                const anchor = (_layout_key_anchor1 = (_layout_key1 = layout[key]) === null || _layout_key1 === void 0 ? void 0 : _layout_key1.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}`);
+                }
+                const yAxisLayout = layout[key];
+                const domainYInfo = {
+                    start: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[0] : 0,
+                    end: (yAxisLayout === null || yAxisLayout === void 0 ? void 0 : yAxisLayout.domain) ? yAxisLayout.domain[1] : 1
+                };
+                domainY.push(domainYInfo);
             }
-            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 : [];
+        });
+    }
+    cartesianDomains = domainX.length; // Assuming that the number of x and y axes is the same
+    validTracesInfo.forEach((trace, index)=>{
+        if (isNonPlotType(trace.type)) {
+            var _schema_data, _series_domain, _series_domain1, _series_domain2, _series_domain3;
+            const series = schema === null || schema === void 0 ? void 0 : (_schema_data = schema.data) === null || _schema_data === void 0 ? void 0 : _schema_data[index];
+            const domainXInfo = {
+                start: ((_series_domain = series.domain) === null || _series_domain === void 0 ? void 0 : _series_domain.x) ? series.domain.x[0] : 0,
+                end: ((_series_domain1 = series.domain) === null || _series_domain1 === void 0 ? void 0 : _series_domain1.x) ? series.domain.x[1] : 1
+            };
+            const domainYInfo = {
+                start: ((_series_domain2 = series.domain) === null || _series_domain2 === void 0 ? void 0 : _series_domain2.y) ? series.domain.y[0] : 0,
+                end: ((_series_domain3 = series.domain) === null || _series_domain3 === void 0 ? void 0 : _series_domain3.y) ? series.domain.y[1] : 1
+            };
+            domainX.push(domainXInfo);
+            domainY.push(domainYInfo);
         }
     });
-    (_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 (layout !== undefined && layout !== null && Object.keys(layout).length > 0) {
+        var _layout_annotations;
+        (_layout_annotations = layout.annotations) === null || _layout_annotations === void 0 ? void 0 : _layout_annotations.forEach((annotation)=>{
+            const xMatches = domainX.flatMap((interval, idx)=>(annotation === null || annotation === void 0 ? void 0 : annotation.x) >= interval.start && (annotation === null || annotation === void 0 ? void 0 : annotation.x) <= interval.end ? [
+                    idx
+                ] : []);
+            const yMatch = domainY.findIndex((interval, yIndex)=>xMatches.includes(yIndex) && (annotation === null || annotation === void 0 ? void 0 : annotation.y) >= interval.start && (annotation === null || annotation === void 0 ? void 0 : annotation.y) <= interval.end);
+            if (yMatch !== -1) {
+                if (annotations[yMatch] === undefined) {
+                    annotations[yMatch] = {};
+                }
+                if ((annotation === null || annotation === void 0 ? void 0 : annotation.textangle) === 90) {
+                    annotations[yMatch].yAnnotation = annotation.text;
+                } else {
+                    annotations[yMatch].xAnnotation = annotation.text;
+                }
             }
-        }
-    });
-    if (gridX.length > 0) {
+        });
+    }
+    if (domainX.length > 0) {
         const uniqueXIntervals = new Map();
-        gridX.forEach((interval)=>{
-            const key = `${interval[0]}-${interval[1]}`;
+        domainX.forEach((interval)=>{
+            const key = `${interval.start}-${interval.end}`;
             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 sortedXStart = Array.from(uniqueXIntervals.values()).map((interval)=>interval.start).sort();
+        templateColumns = `repeat(${sortedXStart.length}, 1fr)`;
+        domainX.forEach((interval, index)=>{
+            const cellName = index >= cartesianDomains ? `${NON_PLOT_KEY_PREFIX}${index - cartesianDomains + 1}` : `x${index === 0 ? '' : index + 1}`;
+            const columnIndex = sortedXStart.findIndex((start)=>start === interval.start);
+            const columnNumber = columnIndex + 1; // Column numbers are 1-based
             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
+                xAnnotation,
+                xDomain: interval,
+                yDomain: {
+                    start: 0,
+                    end: 1
+                }
             };
             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) {
+    if (domainY.length > 0) {
         const uniqueYIntervals = new Map();
-        gridY.forEach((interval)=>{
-            const key = `${interval[0]}-${interval[1]}`;
+        domainY.forEach((interval)=>{
+            const key = `${interval.start}-${interval.end}`;
             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 sortedYStart = Array.from(uniqueYIntervals.values()).map((interval)=>interval.start).sort();
+        const numberOfRows = sortedYStart.length;
+        templateRows = `repeat(${numberOfRows}, 1fr)`;
+        domainY.forEach((interval, index)=>{
+            const cellName = index >= cartesianDomains ? `${NON_PLOT_KEY_PREFIX}${index - cartesianDomains + 1}` : `x${index === 0 ? '' : index + 1}`;
+            const rowIndex = sortedYStart.findIndex((start)=>start === interval.start);
+            const rowNumber = numberOfRows - rowIndex; // Rows are 1-based and we need to reverse the order for CSS grid
             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.row = rowNumber;
                 cell.yAnnotation = yAnnotation;
+                cell.yDomain = interval;
             }
-            columnFill[cell.column].fillDomain = interval[1];
-            columnFill[cell.column].row += 1;
         });
     }
-    // reverse the order of rows in grid layout from bottom-top to top-bottom as required by CSS grid
-    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
+        layout: gridLayout
     };
 };
 /**
@@ -1563,3 +2097,228 @@ export const getGridProperties = (layout, isMultiPlot)=>{
     });
     return result;
 };
+const getBarProps = (data, layout, isHorizontal)=>{
+    let padding;
+    if (typeof (layout === null || layout === void 0 ? void 0 : layout.bargap) === 'number') {
+        if (layout.bargap >= 0 && layout.bargap <= 1) {
+            padding = layout.bargap;
+        } else {
+            // Plotly uses a default bargap of 0.2, as noted here: https://github.com/plotly/plotly.js/blob/1d5a249e43dd31ae50acf02117a19e5ac97387e9/src/traces/bar/layout_defaults.js#L58.
+            // However, we don't use this value as our default padding because it causes the bars to
+            // appear disproportionately wide in large containers.
+            padding = 0.2;
+        }
+    }
+    const plotlyBarWidths = data.map((series)=>{
+        if (series.type === 'bar' && (isArrayOrTypedArray(series.width) || typeof series.width === 'number')) {
+            return series.width;
+        }
+        return [];
+    }).flat();
+    const maxPlotlyBarWidth = d3Max(plotlyBarWidths);
+    if (typeof maxPlotlyBarWidth === 'number') {
+        padding = 1 - maxPlotlyBarWidth;
+        padding = Math.max(0, Math.min(padding, 1));
+    }
+    if (typeof padding === 'undefined') {
+        return {};
+    }
+    if (isHorizontal) {
+        return {
+            maxBarHeight: 1000,
+            yAxisPadding: padding
+        };
+    }
+    return {
+        barWidth: 'auto',
+        maxBarWidth: 1000,
+        xAxisInnerPadding: padding,
+        xAxisOuterPadding: padding / 2
+    };
+};
+const getAxisScaleTypeProps = (data, layout)=>{
+    var _axisObjects_x, _axisObjects_y, _axisObjects_y2;
+    const result = {};
+    const axisObjects = getAxisObjects(data, layout);
+    if (((_axisObjects_x = axisObjects.x) === null || _axisObjects_x === void 0 ? void 0 : _axisObjects_x.type) === 'log') {
+        result.xScaleType = 'log';
+    }
+    if (((_axisObjects_y = axisObjects.y) === null || _axisObjects_y === void 0 ? void 0 : _axisObjects_y.type) === 'log') {
+        result.yScaleType = 'log';
+    }
+    if (((_axisObjects_y2 = axisObjects.y2) === null || _axisObjects_y2 === void 0 ? void 0 : _axisObjects_y2.type) === 'log') {
+        result.secondaryYScaleType = 'log';
+    }
+    return result;
+};
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/tick_value_defaults.js#L8}
+ */ const getAxisTickProps = (data, layout)=>{
+    const props = {};
+    const axisObjects = getAxisObjects(data, layout);
+    Object.keys(axisObjects).forEach((axId)=>{
+        const ax = axisObjects[axId];
+        if (!ax) {
+            return;
+        }
+        const axType = getAxisType(data, axId[0], ax);
+        if ((!ax.tickmode || ax.tickmode === 'array') && isArrayOrTypedArray(ax.tickvals)) {
+            const tickValues = axType === 'date' ? ax.tickvals.map((v)=>new Date(v)) : ax.tickvals;
+            if (axId === 'x') {
+                props.tickValues = tickValues;
+            } else if (axId === 'y') {
+                props.yAxisTickValues = tickValues;
+            }
+            return;
+        }
+        if ((!ax.tickmode || ax.tickmode === 'linear') && ax.dtick) {
+            const dtick = plotlyDtick(ax.dtick, axType);
+            const tick0 = plotlyTick0(ax.tick0, axType, dtick);
+            if (axId === 'x') {
+                props.xAxis = {
+                    tickStep: dtick,
+                    tick0: tick0
+                };
+            } else if (axId === 'y') {
+                props.yAxis = {
+                    tickStep: dtick,
+                    tick0: tick0
+                };
+            }
+            return;
+        }
+        if ((!ax.tickmode || ax.tickmode === 'auto') && typeof ax.nticks === 'number' && ax.nticks >= 0) {
+            if (axId === 'x') {
+                props.xAxisTickCount = ax.nticks;
+            } else if (axId === 'y') {
+                props.yAxisTickCount = ax.nticks;
+            }
+        }
+    });
+    return props;
+};
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/clean_ticks.js#L16}
+ */ const plotlyDtick = (dtick, axType)=>{
+    const isLogAx = axType === 'log';
+    const isDateAx = axType === 'date';
+    const isCatAx = axType === 'category';
+    const dtickDflt = isDateAx ? 86400000 : 1;
+    if (!dtick) {
+        return dtickDflt;
+    }
+    if (isNumber(dtick)) {
+        dtick = Number(dtick);
+        if (dtick <= 0) {
+            return dtickDflt;
+        }
+        if (isCatAx) {
+            // category dtick must be positive integers
+            return Math.max(1, Math.round(dtick));
+        }
+        if (isDateAx) {
+            // date dtick must be at least 0.1ms (our current precision)
+            return Math.max(0.1, dtick);
+        }
+        return dtick;
+    }
+    if (typeof dtick !== 'string' || !(isDateAx || isLogAx)) {
+        return dtickDflt;
+    }
+    const prefix = dtick.charAt(0);
+    const dtickNum = isNumber(dtick.slice(1)) ? Number(dtick.slice(1)) : 0;
+    if (dtickNum <= 0 || !// "M<n>" gives ticks every (integer) n months
+    (isDateAx && prefix === 'M' && dtickNum === Math.round(dtickNum) || // "L<f>" gives ticks linearly spaced in data (not in position) every (float) f
+    isLogAx && prefix === 'L' || // "D1" gives powers of 10 with all small digits between, "D2" gives only 2 and 5
+    isLogAx && prefix === 'D' && (dtickNum === 1 || dtickNum === 2))) {
+        return dtickDflt;
+    }
+    return dtick;
+};
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/clean_ticks.js#L70}
+ */ const plotlyTick0 = (tick0, axType, dtick)=>{
+    if (axType === 'date') {
+        return isDate(tick0) ? new Date(tick0) : new Date(DEFAULT_DATE_STRING);
+    }
+    if (dtick === 'D1' || dtick === 'D2') {
+        // D1 and D2 modes ignore tick0 entirely
+        return undefined;
+    }
+    // Aside from date axes, tick0 must be numeric
+    return isNumber(tick0) ? Number(tick0) : 0;
+};
+const getAxisObjects = (data, layout)=>{
+    // Traces are grouped by their xaxis property, and for each group/subplot, the adapter functions
+    // are called with the corresponding filtered data. As a result, all traces passed to an adapter
+    // function share the same xaxis.
+    let xAxisId;
+    const yAxisIds = new Set();
+    data.forEach((series)=>{
+        const axisIds = getAxisIds(series);
+        xAxisId = axisIds.x;
+        yAxisIds.add(axisIds.y);
+    });
+    const axisObjects = {};
+    if (typeof xAxisId === 'number') {
+        axisObjects.x = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('x', xAxisId)];
+    }
+    const sortedYAxisIds = Array.from(yAxisIds).sort();
+    if (sortedYAxisIds.length > 0) {
+        axisObjects.y = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('y', sortedYAxisIds[0])];
+    }
+    if (sortedYAxisIds.length > 1) {
+        axisObjects.y2 = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('y', sortedYAxisIds[1])];
+    }
+    return axisObjects;
+};
+const getAxisType = (data, axLetter, ax)=>{
+    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);
+            }
+        });
+    });
+    // Note: When ax.type is explicitly specified, Plotly casts the values to match that type.
+    // Therefore, simply checking the type of the values may not be sufficient. At the moment,
+    // we don’t always perform this casting ourselves and instead use the values as provided.
+    if (isNumberArray(values)) {
+        if ((ax === null || ax === void 0 ? void 0 : ax.type) === 'log') {
+            return 'log';
+        }
+        return 'linear';
+    }
+    if (isDateArray(values)) {
+        return 'date';
+    }
+    if (isStringArray(values)) {
+        return 'category';
+    }
+};
+/**
+ * This is experimental. Use it only with valid datetime strings to verify if they conform to the ISO 8601 format.
+ */ const isoDateRegex = /^\d{4}(-\d{2}(-\d{2})?)?(T\d{2}:\d{2}(:\d{2}(\.\d{1,9})?)?(Z)?)?$/;
+/**
+ * We want to display localized date and time in the charts, so the useUTC prop is set to false.
+ * But this can sometimes cause the formatters to display the datetime incorrectly.
+ * To work around this issue, we use this function to adjust datetime strings so that they are always interpreted
+ * as local time, allowing the formatters to produce the correct output.
+ *
+ * FIXME: The formatters should always produce a clear and accurate localized output, regardless of the
+ * format used to create the date object.
+ */ const parseLocalDate = (value)=>{
+    if (typeof value === 'string') {
+        const match = value.match(isoDateRegex);
+        if (match) {
+            if (!match[3]) {
+                value += 'T00:00';
+            } else if (match[6]) {
+                value = value.replace('Z', '');
+            }
+        }
+    }
+    return new Date(value);
+};