@fluentui/react-charts 0.0.0-nightly-20251015-0406.1 → 0.0.0-nightly-20251017-0406.1

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -5,7 +5,7 @@ import { scaleLinear as d3ScaleLinear } from 'd3-scale';
 import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 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 { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey, isScatterAreaChart } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor, createColorScale } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
@@ -140,11 +140,12 @@ const usesSecondaryYScale = (series, layout)=>{
     var _layout_yaxis2, _layout_yaxis21;
     return series.yaxis === 'y2' && ((layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.anchor) === 'x' || (layout === null || layout === void 0 ? void 0 : (_layout_yaxis21 = layout.yaxis2) === null || _layout_yaxis21 === void 0 ? void 0 : _layout_yaxis21.side) === 'right');
 };
-const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>{
+const getSecondaryYAxisValues = (data, layout)=>{
     var _layout_yaxis2, _layout_yaxis21, _layout_yaxis2_title, _layout_yaxis22;
     let containsSecondaryYAxis = false;
     let yMinValue;
     let yMaxValue;
+    let allLineSeries = true;
     data.forEach((series)=>{
         if (usesSecondaryYScale(series, layout)) {
             containsSecondaryYAxis = true;
@@ -153,16 +154,21 @@ const getSecondaryYAxisValues = (data, layout, maxAllowedMinY, minAllowedMaxY)=>
                 yMinValue = Math.min(...yValues);
                 yMaxValue = Math.max(...yValues);
             }
+            if (series.type !== 'scatter' || isScatterAreaChart(series)) {
+                allLineSeries = false;
+            }
         }
     });
     if (!containsSecondaryYAxis) {
         return {};
     }
-    if (typeof yMinValue === 'number' && typeof maxAllowedMinY === 'number') {
-        yMinValue = Math.min(yMinValue, maxAllowedMinY);
-    }
-    if (typeof yMaxValue === 'number' && typeof minAllowedMaxY === 'number') {
-        yMaxValue = Math.max(yMaxValue, minAllowedMaxY);
+    if (!allLineSeries) {
+        if (typeof yMinValue === 'number') {
+            yMinValue = Math.min(yMinValue, 0);
+        }
+        if (typeof yMaxValue === 'number') {
+            yMaxValue = Math.max(yMaxValue, 0);
+        }
     }
     if (layout === null || layout === void 0 ? void 0 : (_layout_yaxis2 = layout.yaxis2) === null || _layout_yaxis2 === void 0 ? void 0 : _layout_yaxis2.range) {
         yMinValue = layout.yaxis2.range[0];
@@ -403,27 +409,23 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
     };
 };
 export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
-    var _input_layout, _input_layout1, _vsbcData_;
+    var _input_data_, _input_layout, _input_layout1, _input_layout2, _vsbcData_;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
+    let yMinValue = 0;
     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;
+    const resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
     input.data.forEach((series, index1)=>{
         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_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_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);
-        const isXNumber = isNumberArray(xValues);
-        const validXYRanges = getValidXYRanges(series);
+        const validXYRanges = getValidXYRanges(series, resolveXAxisValue);
         validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
@@ -431,7 +433,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
                 var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
-                        xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        xAxisPoint: resolveXAxisValue(x),
                         chartData: [],
                         lineData: []
                     };
@@ -484,12 +486,59 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
             });
         });
     });
+    var _input_data__x;
+    const xCategories = (_input_data__x = (_input_data_ = input.data[0]) === null || _input_data_ === void 0 ? void 0 : _input_data_.x) !== null && _input_data__x !== void 0 ? _input_data__x : [];
+    var _input_layout_shapes;
+    ((_input_layout_shapes = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.shapes) !== null && _input_layout_shapes !== void 0 ? _input_layout_shapes : []).filter((shape)=>shape.type === 'line').forEach((shape, shapeIdx)=>{
+        var _shape_line;
+        const lineColor = (_shape_line = shape.line) === null || _shape_line === void 0 ? void 0 : _shape_line.color;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const resolveX = (val)=>{
+            if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
+                return xCategories[val];
+            }
+            return val;
+        };
+        const x0Key = resolveX(shape.x0);
+        const x1Key = resolveX(shape.x1);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const resolveY = (val)=>{
+            if (shape.yref === 'paper') {
+                if (val === 0) {
+                    return yMinValue;
+                }
+                if (val === 1) {
+                    return yMaxValue;
+                }
+                return yMinValue + val * (yMaxValue - yMinValue);
+            }
+            return val;
+        };
+        const y0Val = resolveY(shape.y0);
+        const y1Val = resolveY(shape.y1);
+        var _rgb_formatHex8;
+        mapXToDataPoints[x0Key].lineData.push({
+            legend: `Reference_${shapeIdx}`,
+            y: y0Val,
+            color: (_rgb_formatHex8 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex8 !== void 0 ? _rgb_formatHex8 : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false
+        });
+        var _rgb_formatHex81;
+        mapXToDataPoints[x1Key].lineData.push({
+            legend: `Reference_${shapeIdx}`,
+            y: y1Val,
+            color: (_rgb_formatHex81 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex81 !== void 0 ? _rgb_formatHex81 : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false
+        });
+    });
     const vsbcData = Object.values(mapXToDataPoints);
     var _input_layout_height;
     return {
         data: vsbcData,
-        width: (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.width,
-        height: (_input_layout_height = (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        height: (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         barWidth: 'auto',
         yMaxValue,
         yMinValue,
@@ -513,7 +562,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
     };
 };
 export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
-    var _processedInput_layout, _processedInput_layout1, _gvbcData_;
+    var _processedInput_layout, _processedInput_layout1;
     // Handle object arrays in y values by normalizing the data first
     let processedInput = {
         ...input
@@ -542,60 +591,90 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
             data: processedData
         };
     }
-    const mapXToDataPoints = {};
-    const secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout, 0, 0);
+    const gvbcDataV2 = [];
+    const secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout);
     const { legends, hideLegend } = getLegendProps(processedInput.data, processedInput.layout, isMultiPlot);
     let colorScale = undefined;
     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((_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])) {
-                return;
-            }
-            if (!mapXToDataPoints[x]) {
-                mapXToDataPoints[x] = {
-                    name: x.toString(),
-                    series: []
-                };
-            }
-            if (series.type === 'bar') {
-                var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout;
-                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, (_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, isDarkTheme);
-                const opacity = getOpacity(series, index2);
-                const yVal = series.y[index2];
+        const legend = legends[index1];
+        const legendShape = getLegendShape(series);
+        if (series.type === 'bar') {
+            var _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout, _series_marker;
+            // extract bar colors for each series only once
+            const extractedBarColors = 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);
+            gvbcDataV2.push({
+                type: 'bar',
+                legend,
+                key: legend,
+                data: series.x.map((x, xIndex)=>{
+                    var _series_y, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _processedInput_layout_template_layout, _processedInput_layout_template, _processedInput_layout;
+                    if (isInvalidValue(x) || isInvalidValue((_series_y = series.y) === null || _series_y === void 0 ? void 0 : _series_y[xIndex])) {
+                        return;
+                    }
+                    // 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[xIndex % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedBarColors, xIndex, legend, colorMap, (_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, isDarkTheme);
+                    const opacity = getOpacity(series, xIndex);
+                    const yVal = series.y[xIndex];
+                    var _rgb_copy_formatHex8;
+                    return {
+                        x: x.toString(),
+                        y: yVal,
+                        yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
+                        color: (_rgb_copy_formatHex8 = rgb(color).copy({
+                            opacity
+                        }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color
+                    };
+                }).filter((item)=>typeof item !== 'undefined'),
+                useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout)
+            });
+        } else if (series.type === 'scatter') {
+            var _processedInput_layout_template_layout1, _processedInput_layout_template1, _processedInput_layout1, _series_line, _processedInput_layout_template_layout2, _processedInput_layout_template2, _processedInput_layout2;
+            // extract line colors for each series only once
+            const extractedLineColors = extractColor((_processedInput_layout1 = processedInput.layout) === null || _processedInput_layout1 === void 0 ? void 0 : (_processedInput_layout_template1 = _processedInput_layout1.template) === null || _processedInput_layout_template1 === void 0 ? void 0 : (_processedInput_layout_template_layout1 = _processedInput_layout_template1.layout) === null || _processedInput_layout_template_layout1 === void 0 ? void 0 : _processedInput_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
+            const lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, (_processedInput_layout2 = processedInput.layout) === null || _processedInput_layout2 === void 0 ? void 0 : (_processedInput_layout_template2 = _processedInput_layout2.template) === null || _processedInput_layout_template2 === void 0 ? void 0 : (_processedInput_layout_template_layout2 = _processedInput_layout_template2.layout) === null || _processedInput_layout_template_layout2 === void 0 ? void 0 : _processedInput_layout_template_layout2.colorway, isDarkTheme);
+            const lineOptions = getLineOptions(series.line);
+            const opacity = getOpacity(series, index1);
+            const validXYRanges = getValidXYRanges(series);
+            validXYRanges.forEach(([rangeStart, rangeEnd])=>{
+                const rangeXValues = series.x.slice(rangeStart, rangeEnd);
+                const rangeYValues = series.y.slice(rangeStart, rangeEnd);
                 var _rgb_copy_formatHex8;
-                mapXToDataPoints[x].series.push({
-                    key: legend,
-                    data: yVal,
-                    xAxisCalloutData: x,
-                    color: (_rgb_copy_formatHex8 = rgb(color).copy({
-                        opacity
-                    }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : color,
+                gvbcDataV2.push({
+                    type: 'line',
                     legend,
-                    useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
-                    yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
+                    legendShape,
+                    data: rangeXValues.map((x, i)=>{
+                        const yVal = rangeYValues[i];
+                        return {
+                            x: x.toString(),
+                            y: yVal,
+                            yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat)
+                        };
+                    }),
+                    color: (_rgb_copy_formatHex8 = rgb(lineColor).copy({
+                        opacity
+                    }).formatHex8()) !== null && _rgb_copy_formatHex8 !== void 0 ? _rgb_copy_formatHex8 : lineColor,
+                    lineOptions: {
+                        ...lineOptions !== null && lineOptions !== void 0 ? lineOptions : {},
+                        mode: series.mode
+                    },
+                    useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout)
                 });
-            }
-        });
+            });
+        }
     });
-    const gvbcData = Object.values(mapXToDataPoints);
     var _processedInput_layout_height;
     return {
-        data: gvbcData,
+        dataV2: gvbcDataV2,
         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',
         mode: 'plotly',
         ...secondaryYAxisValues,
         hideTickOverlap: true,
-        wrapXAxisLables: typeof ((_gvbcData_ = gvbcData[0]) === null || _gvbcData_ === void 0 ? void 0 : _gvbcData_.name) === 'string',
+        wrapXAxisLables: true,
         hideLegend,
         roundCorners: true,
         ...getTitles(processedInput.layout),
@@ -623,8 +702,9 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
         const xValues = [];
         const yValues = [];
         series.x.forEach((xVal, index)=>{
-            const yVal = getNumberAtIndexOrDefault(series.y, index);
-            if (isInvalidValue(xVal) || isInvalidValue(yVal)) {
+            var _getNumberAtIndexOrDefault;
+            const yVal = (_getNumberAtIndexOrDefault = getNumberAtIndexOrDefault(series.y, index)) !== null && _getNumberAtIndexOrDefault !== void 0 ? _getNumberAtIndexOrDefault : 0;
+            if (isInvalidValue(xVal)) {
                 return;
             }
             xValues.push(xVal);
@@ -694,7 +774,7 @@ 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_, _input_layout, _input_layout1, _input_layout2;
     const isScatterMarkers = [
         'text',
         'markers',
@@ -707,22 +787,18 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     ].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);
+    const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    var shouldWrapLabels = false;
+    const resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
+    const shouldWrapLabels = getAxisType(input.data, input.layout, 'x') === 'category';
     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, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_mode1;
         const colors = isScatterMarkers ? (series === null || series === void 0 ? void 0 : (_series_mode = series.mode) === null || _series_mode === void 0 ? void 0 : _series_mode.includes('line')) ? (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color : (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color : (_series_line1 = series.line) === null || _series_line1 === void 0 ? void 0 : _series_line1.color;
         // extract colors for each series only once
         const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, colors, colorMap, isDarkTheme);
         const xValues = series.x;
-        const isXString = isStringArray(xValues);
-        const isXDate = isDateArray(xValues);
-        const isXNumber = isNumberArray(xValues);
-        const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
-        shouldWrapLabels = shouldWrapLabels || isXString && !isXDate;
         const legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         const seriesColor = resolveColor(extractedColors, index, legend, colorMap, (_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, isDarkTheme);
@@ -731,7 +807,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         // 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);
+        const validXYRanges = getValidXYRanges(series, resolveXAxisValue);
         return validXYRanges.map(([rangeStart, rangeEnd], rangeIdx)=>{
             var _series_marker, _series_marker1, _series_marker2, _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);
@@ -746,7 +822,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                 data: rangeXValues.map((x, i)=>{
                     var _series_marker, _series_marker1;
                     return {
-                        x: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        x: resolveXAxisValue(x),
                         y: rangeYValues[i],
                         ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
                             markerSize: markerSizes[i]
@@ -782,6 +858,28 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
             };
         });
     }).flat();
+    var _input_layout_shapes;
+    const lineShape = ((_input_layout_shapes = (_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : _input_layout.shapes) !== null && _input_layout_shapes !== void 0 ? _input_layout_shapes : []).filter((shape)=>shape.type === 'line').map((shape, shapeIdx)=>{
+        var _shape_line;
+        const lineColor = (_shape_line = shape.line) === null || _shape_line === void 0 ? void 0 : _shape_line.color;
+        var _rgb_formatHex8;
+        return {
+            legend: `Reference_${shapeIdx}`,
+            data: [
+                {
+                    x: shape.x0,
+                    y: shape.y0
+                },
+                {
+                    x: shape.x1,
+                    y: shape.y1
+                }
+            ],
+            color: (_rgb_formatHex8 = rgb(lineColor).formatHex8()) !== null && _rgb_formatHex8 !== void 0 ? _rgb_formatHex8 : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false
+        };
+    });
     const yMinMax = getYMinMaxValues(input.data[0], input.layout);
     if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
         const yMinMaxValues = findNumericMinMaxOfY(chartData);
@@ -790,7 +888,10 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     }
     const numDataPoints = chartData.reduce((total, lineChartPoints)=>total + lineChartPoints.data.length, 0);
     const chartProps = {
-        lineChartData: chartData
+        lineChartData: [
+            ...chartData,
+            ...lineShape
+        ]
     };
     const scatterChartProps = {
         scatterChartData: chartData
@@ -799,8 +900,8 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     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,
+        width: (_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : _input_layout1.width,
+        height: (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 350,
         hideTickOverlap: true,
         hideLegend,
         useUTC: false,
@@ -842,8 +943,8 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
         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, _input_layout_template_layout, _input_layout_template, _input_layout;
-            if (isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || isInvalidValue(yValue)) {
+            var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_x;
+            if (isInvalidValue(yValue)) {
                 return null;
             }
             // resolve color for each legend's bars from the colorscale or extracted colors
@@ -851,7 +952,7 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
             const opacity = getOpacity(series, i);
             var _rgb_copy_formatHex8;
             return {
-                x: series.x[i],
+                x: isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) ? 0 : series.x[i],
                 y: yValue,
                 legend,
                 color: (_rgb_copy_formatHex8 = rgb(color).copy({
@@ -893,13 +994,13 @@ export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMa
     var _input_layout, _input_layout1;
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
+    const isXDate = getAxisType(input.data, input.layout, 'x') === 'date';
     const chartData = input.data.map((series, index)=>{
-        var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_xaxis, _input_layout1;
+        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_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;
@@ -959,8 +1060,9 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         const zValues = [];
         (_firstData_x = firstData.x) === null || _firstData_x === void 0 ? void 0 : _firstData_x.forEach((xVal, index)=>{
             var _firstData_y;
-            const zVal = getNumberAtIndexOrDefault(firstData.z, index);
-            if (isInvalidValue(xVal) || isInvalidValue((_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index]) || isInvalidValue(zVal)) {
+            var _getNumberAtIndexOrDefault;
+            const zVal = (_getNumberAtIndexOrDefault = getNumberAtIndexOrDefault(firstData.z, index)) !== null && _getNumberAtIndexOrDefault !== void 0 ? _getNumberAtIndexOrDefault : 0;
+            if (isInvalidValue(xVal) || isInvalidValue((_firstData_y = firstData.y) === null || _firstData_y === void 0 ? void 0 : _firstData_y[index])) {
                 return;
             }
             xValues.push(xVal);
@@ -1881,7 +1983,7 @@ export const getNumberAtIndexOrDefault = (data, index)=>{
     }
     return 1;
 };
-export const getValidXYRanges = (series)=>{
+export const getValidXYRanges = (series, resolveX, resolveY)=>{
     if (!isArrayOrTypedArray(series.x) || !isArrayOrTypedArray(series.y)) {
         return [];
     }
@@ -1889,7 +1991,7 @@ export const getValidXYRanges = (series)=>{
     let start = 0;
     let end = 0;
     for(; end < series.x.length; end++){
-        if (isInvalidValue(series.x[end]) || isInvalidValue(series.y[end])) {
+        if (isInvalidValue(series.x[end]) || typeof resolveX === 'function' && isInvalidValue(resolveX(series.x[end])) || isInvalidValue(series.y[end]) || typeof resolveY === 'function' && isInvalidValue(resolveY(series.y[end]))) {
             if (end - start > 0) {
                 ranges.push([
                     start,
@@ -2177,7 +2279,7 @@ const getAxisScaleTypeProps = (data, layout)=>{
         if (!ax) {
             return;
         }
-        const axType = getAxisType(data, axId[0], ax);
+        const axType = getAxisType(data, 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') {
@@ -2193,12 +2295,12 @@ const getAxisScaleTypeProps = (data, layout)=>{
             if (axId === 'x') {
                 props.xAxis = {
                     tickStep: dtick,
-                    tick0: tick0
+                    tick0
                 };
             } else if (axId === 'y') {
                 props.yAxis = {
                     tickStep: dtick,
-                    tick0: tick0
+                    tick0
                 };
             }
             return;
@@ -2275,44 +2377,88 @@ const getAxisObjects = (data, layout)=>{
         xAxisId = axisIds.x;
         yAxisIds.add(axisIds.y);
     });
+    const makeAxisObject = (axLetter, axId)=>({
+            ...layout === null || layout === void 0 ? void 0 : layout[getAxisKey(axLetter, axId)],
+            _id: `${axLetter}${axId > 1 ? axId : ''}`
+        });
     const axisObjects = {};
     if (typeof xAxisId === 'number') {
-        axisObjects.x = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('x', xAxisId)];
+        axisObjects.x = makeAxisObject('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])];
+        axisObjects.y = makeAxisObject('y', sortedYAxisIds[0]);
     }
     if (sortedYAxisIds.length > 1) {
-        axisObjects.y2 = layout === null || layout === void 0 ? void 0 : layout[getAxisKey('y', sortedYAxisIds[1])];
+        axisObjects.y2 = makeAxisObject('y', sortedYAxisIds[1]);
     }
     return axisObjects;
 };
-const getAxisType = (data, axLetter, ax)=>{
+function getAxisType(data, arg2, arg3) {
+    let ax;
+    if (arg2 && typeof arg2 === 'object' && '_id' in arg2) {
+        ax = arg2;
+    } else if (typeof arg3 === 'string') {
+        const layout = arg2;
+        ax = getAxisObjects(data, layout)[arg3];
+    }
+    if (!ax) {
+        return 'category';
+    }
+    var _ax_type;
+    if ([
+        'linear',
+        'log',
+        'date',
+        'category'
+    ].includes((_ax_type = ax.type) !== null && _ax_type !== void 0 ? _ax_type : '')) {
+        return ax.type;
+    }
+    const axLetter = ax._id[0];
     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';
+        const axId = series[`${axLetter}axis`];
+        if (axId === ax._id || !axId && ax._id === axLetter) {
+            var _series_axLetter;
+            (_series_axLetter = series[axLetter]) === null || _series_axLetter === void 0 ? void 0 : _series_axLetter.forEach((val)=>{
+                if (!isInvalidValue(val)) {
+                    values.push(val);
+                }
+            });
         }
+    });
+    if (isNumberArray(values) && !isYearArray(values)) {
         return 'linear';
     }
     if (isDateArray(values)) {
         return 'date';
     }
-    if (isStringArray(values)) {
-        return 'category';
-    }
+    return 'category';
+}
+const getAxisValueResolver = (data, layout, axisId)=>{
+    const axType = getAxisType(data, layout, axisId);
+    return (value)=>{
+        if (isInvalidValue(value)) {
+            return null;
+        }
+        switch(axType){
+            case 'linear':
+            case 'log':
+                return isNumber(value) ? +value : null;
+            case 'date':
+                if (isNumber(value)) {
+                    return new Date(+value);
+                }
+                if (typeof value === 'string') {
+                    return new Date(value);
+                }
+                return null;
+            case 'category':
+                return `${value}`;
+            default:
+                return null;
+        }
+    };
 };
 /**
  * This is experimental. Use it only with valid datetime strings to verify if they conform to the ISO 8601 format.