@fluentui/react-charts 0.0.0-nightly-20250826-0412.1 → 0.0.0-nightly-20250826-2140.1

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -4,12 +4,10 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
-import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString } from '@fluentui/chart-utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
-export const NON_PLOT_KEY_PREFIX = 'nonplot_';
-export const SINGLE_REPEAT = 'repeat(1, 1fr)';
 const dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -58,47 +56,6 @@ 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();
@@ -243,7 +200,7 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
             chartTitle,
             chartData: Object.values(mapLegendToDataPoint)
         },
-        hideLegend: isMultiPlot || ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false,
+        hideLegend: ((_input_layout5 = input.layout) === null || _input_layout5 === void 0 ? void 0 : _input_layout5.showlegend) === false ? true : false,
         width: (_input_layout6 = input.layout) === null || _input_layout6 === void 0 ? void 0 : _input_layout6.width,
         height,
         innerRadius,
@@ -262,7 +219,6 @@ 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;
@@ -296,7 +252,6 @@ 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({
@@ -304,8 +259,7 @@ 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,
-                        yAxisCalloutData
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -327,8 +281,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                             ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
                             mode: series.mode
                         },
-                        useSecondaryYScale: usesSecondaryYScale(series, input.layout),
-                        yAxisCalloutData
+                        useSecondaryYScale: usesSecondaryYScale(series, input.layout)
                     });
                     if (!usesSecondaryYScale(series, input.layout) && typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -339,6 +292,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
             });
         });
     });
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
@@ -348,6 +302,9 @@ 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',
@@ -357,11 +314,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         roundCorners: true,
         showYAxisLables: true,
         noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true,
-        ...getTitles(input.layout),
-        ...getXAxisTickFormat(input.data[0], input.layout),
-        ...yAxisTickFormat,
-        ...getAxisCategoryOrderProps(input.data, input.layout)
+        showYAxisLablesTooltip: true
     };
 };
 const createColorScale = (layout, series)=>{
@@ -384,7 +337,6 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
     const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
-    const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     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') {
@@ -407,24 +359,23 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
                 var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
                 const legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
-                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index2, legend, colorMap, isDarkTheme);
+                const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
                 const opacity = getOpacity(series, index2);
-                const yVal = series.y[index2];
                 var _rgb_copy_formatHex8;
                 mapXToDataPoints[x].series.push({
                     key: legend,
-                    data: yVal,
+                    data: series.y[index2],
                     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),
-                    yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
+                    useSecondaryYScale: usesSecondaryYScale(series, input.layout)
                 });
             }
         });
     });
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const gvbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
@@ -432,17 +383,15 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
         width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
         height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
+        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,
-        ...getTitles(input.layout),
-        ...getYMinMaxValues(input.data[0], input.layout),
-        ...getXAxisTickFormat(input.data[0], input.layout),
-        ...yAxisTickFormat,
-        ...getAxisCategoryOrderProps(input.data, input.layout)
+        roundCorners: true
     };
 };
 export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -508,20 +457,21 @@ 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)
+        roundCorners: true
     };
 };
 export const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -534,9 +484,8 @@ 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_, _input_layout, _input_layout1;
+    var _input_data_;
     const isScatterMarkers = [
-        'markers',
         'text+markers',
         'markers+text',
         'lines+markers',
@@ -548,7 +497,6 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     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;
@@ -564,7 +512,6 @@ 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';
-        // 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')) ? getLineOptions(series.line) : undefined;
         const legendShape = getLegendShape(series);
         const validXYRanges = getValidXYRanges(series);
@@ -590,8 +537,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                         } : {},
                         ...textValues ? {
                             text: textValues[i]
-                        } : {},
-                        yAxisCalloutData: getFormattedCalloutYData(rangeYValues[i], yAxisTickFormat)
+                        } : {}
                     };
                 }),
                 color: (_rgb_copy_formatHex8 = rgb(seriesColor).copy({
@@ -605,45 +551,52 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
             };
         });
     }).flat();
-    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 yMinMaxValues = findNumericMinMaxOfY(chartData);
+    const { chartTitle, xAxisTitle, yAxisTitle } = getTitles(input.layout);
     const numDataPoints = chartData.reduce((total, lineChartPoints)=>total + lineChartPoints.data.length, 0);
     const chartProps = {
+        chartTitle,
         lineChartData: chartData
     };
     const scatterChartProps = {
+        chartTitle,
         scatterChartData: chartData
     };
-    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
-    };
     if (isAreaChart) {
+        var _input_layout, _input_layout1;
+        var _input_layout_height;
         return {
             data: chartProps,
+            supportNegativeData: true,
+            xAxisTitle,
+            yAxisTitle,
+            ...secondaryYAxisValues,
             mode,
-            ...commonProps
+            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
         };
     } else {
+        var _input_layout2, _input_layout3;
+        var _input_layout_height1;
         return {
             data: isScatterChart ? scatterChartProps : chartProps,
+            supportNegativeData: true,
+            xAxisTitle,
+            yAxisTitle,
+            ...secondaryYAxisValues,
             roundedTicks: true,
-            ...commonProps,
-            ...yMinMax
+            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
         };
     }
 };
@@ -677,7 +630,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
                 }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
             };
         }).filter((point)=>point !== null);
-    }).flat();
+    }).reverse().flat()//reversing the order to invert the Y bars order as required by plotly.
+    .reverse();
     var _input_layout_height;
     const chartHeight = (_input_layout_height = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 450;
     var _input_layout_margin_l;
@@ -689,8 +643,12 @@ 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,
@@ -700,9 +658,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
         hideLegend,
-        roundCorners: true,
-        ...getTitles(input.layout),
-        ...getAxisCategoryOrderProps(input.data, input.layout)
+        roundCorners: true
     };
 };
 export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -816,6 +772,7 @@ 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: [
@@ -825,17 +782,16 @@ 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,
         hideTickOverlap: true,
         noOfCharsToTruncate: 20,
         showYAxisLablesTooltip: true,
-        wrapXAxisLables: true,
-        ...getTitles(input.layout),
-        ...getAxisCategoryOrderProps([
-            firstData
-        ], input.layout)
+        wrapXAxisLables: true
     };
 };
 export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -1308,44 +1264,25 @@ const getLegendShape = (series)=>{
     }
     return 'default';
 };
-export const getAllupLegendsProps = (input, colorMap, colorwayType, traceInfo, isDarkTheme)=>{
+export const getAllupLegendsProps = (input, colorMap, colorwayType, isDarkTheme)=>{
     const allupLegends = [];
     // reduce on showlegend boolean propperty. reduce should return true if at least one series has showlegend true
     const toShowLegend = input.data.reduce((acc, series)=>{
-        return acc || series.showlegend === true || series.showlegend === undefined;
+        return acc || series.showlegend === true;
     }, false);
     if (toShowLegend) {
         input.data.forEach((series, index)=>{
-            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
-                        });
-                    }
+            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
                 });
-            } 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
-                    });
-                }
             }
         });
     }
@@ -1411,21 +1348,28 @@ const getIndexFromKey = (key, pattern)=>{
     const normalizedKey = key.replace(pattern, '') === '' ? '1' : key.replace(pattern, '');
     return parseInt(normalizedKey, 10) - 1;
 };
-export const isNonPlotType = (chartType)=>{
-    return [
-        'donut',
-        'sankey',
-        'pie'
-    ].includes(chartType);
-};
-export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
-    const domainX = [];
-    const domainY = [];
-    let cartesianDomains = 0;
+export const getGridProperties = (layout, isMultiPlot)=>{
+    var _layout_annotations;
+    const gridX = [];
+    const gridY = [];
     const annotations = {};
     let templateRows = '1fr';
     let templateColumns = '1fr';
     const gridLayout = {};
+    if (layout === undefined || layout === null || Object.keys(layout).length === 0) {
+        return {
+            templateRows,
+            templateColumns,
+            layout: gridLayout
+        };
+    }
+    if (!layout.xaxis || !layout.yaxis) {
+        return {
+            templateRows,
+            templateColumns,
+            layout: gridLayout
+        };
+    }
     if (!isMultiPlot) {
         return {
             templateRows,
@@ -1433,182 +1377,143 @@ export const getGridProperties = (schema, isMultiPlot, validTracesInfo)=>{
             layout: gridLayout
         };
     }
-    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}`);
-                }
-                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}`);
+    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 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);
+                throw new Error(`Invalid layout: yaxis ${index + 1} anchor should be x${anchorIndex + 1}`);
             }
-        });
-    }
-    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);
+            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 : [];
         }
     });
-    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;
-                }
+    (_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 (domainX.length > 0) {
+            if ((annotation === null || annotation === void 0 ? void 0 : annotation.textangle) === 90) {
+                annotations[yMatch].yAnnotation = annotation.text;
+            } else {
+                annotations[yMatch].xAnnotation = annotation.text;
+            }
+        }
+    });
+    if (gridX.length > 0) {
         const uniqueXIntervals = new Map();
-        domainX.forEach((interval)=>{
-            const key = `${interval.start}-${interval.end}`;
+        gridX.forEach((interval)=>{
+            const key = `${interval[0]}-${interval[1]}`;
             if (!uniqueXIntervals.has(key)) {
                 uniqueXIntervals.set(key, interval);
             }
         });
-        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 minXInterval = Math.min(...Array.from(uniqueXIntervals.values()).map((interval)=>interval[1] - interval[0]));
+        templateColumns = Array.from(uniqueXIntervals.values()).map((interval)=>`${(interval[1] - interval[0]) / minXInterval}fr`).join(' ');
+        let columnNumber = 1;
+        let lastIntervalEnd = 0;
+        gridX.forEach((interval, index)=>{
+            if (interval.length === 0) {
+                return;
+            }
+            const cellName = `x${index === 0 ? '' : index + 1}`;
             const annotationProps = annotations[index];
             const xAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.xAnnotation;
+            if (interval[0] < lastIntervalEnd) {
+                columnNumber = 1;
+            }
+            lastIntervalEnd = interval[1];
             const row = {
                 row: -1,
                 column: columnNumber,
-                xAnnotation,
-                xDomain: interval,
-                yDomain: {
-                    start: 0,
-                    end: 1
-                }
+                xAnnotation
             };
             gridLayout[cellName] = row;
+            columnNumber += 1;
         });
     }
-    if (domainY.length > 0) {
+    const numColumns = Math.max(...Object.values(gridLayout).map((cell)=>{
+        var _cell_column;
+        return (_cell_column = cell.column) !== null && _cell_column !== void 0 ? _cell_column : 0;
+    }));
+    const columnFill = {};
+    for(let i = 1; i <= numColumns; i++){
+        columnFill[i] = {
+            row: 1,
+            fillDomain: 0
+        };
+    }
+    if (gridY.length > 0) {
         const uniqueYIntervals = new Map();
-        domainY.forEach((interval)=>{
-            const key = `${interval.start}-${interval.end}`;
+        gridY.forEach((interval)=>{
+            const key = `${interval[0]}-${interval[1]}`;
             if (!uniqueYIntervals.has(key)) {
                 uniqueYIntervals.set(key, interval);
             }
         });
-        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 minYInterval = Math.min(...Array.from(uniqueYIntervals.values()).map((interval)=>interval[1] - interval[0]));
+        templateRows = Array.from(uniqueYIntervals.values()).map((interval)=>`${(interval[1] - interval[0]) / minYInterval}fr`).join(' ');
+        gridY.forEach((interval, index)=>{
+            if (interval.length === 0) {
+                return;
+            }
+            const cellName = `x${index === 0 ? '' : index + 1}`;
             const annotationProps = annotations[index];
             const yAnnotation = annotationProps === null || annotationProps === void 0 ? void 0 : annotationProps.yAnnotation;
             const cell = gridLayout[cellName];
             if (cell !== undefined) {
-                cell.row = rowNumber;
+                cell.row = columnFill[cell.column].row;
                 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: gridLayout
-    };
-};
-/**
- * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/category_order_defaults.js#L50}
- */ const getAxisCategoryOrderProps = (data, layout)=>{
-    const result = {};
-    const axesById = {
-        x: layout === null || layout === void 0 ? void 0 : layout.xaxis,
-        y: layout === null || layout === void 0 ? void 0 : layout.yaxis
+        layout: reversedGridLayout
     };
-    Object.keys(axesById).forEach((axId)=>{
-        const ax = axesById[axId];
-        const axLetter = axId[0];
-        const propName = `${axLetter}AxisCategoryOrder`;
-        const values = [];
-        data.forEach((series)=>{
-            var _series_axLetter;
-            (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
-                if (!isInvalidValue(val)) {
-                    values.push(val);
-                }
-            });
-        });
-        const isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || isStringArray(values) && !isNumberArray(values) && !isDateArray(values);
-        if (!isAxisTypeCategory) {
-            return;
-        }
-        const isValidArray = isArrayOrTypedArray(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
-        if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
-            result[propName] = ax.categoryarray;
-            return;
-        }
-        if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
-            const categoriesInTraceOrder = Array.from(new Set(values));
-            result[propName] = categoriesInTraceOrder;
-            return;
-        }
-        result[propName] = ax.categoryorder;
-    });
-    return result;
 };