@fluentui/react-charts 9.3.3 → 9.3.5

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -182,7 +182,8 @@ const getSecondaryYAxisValues = (data, layout)=>{
         }
     };
 };
-export const _getGaugeAxisColor = (colorway, colorwayType, color, colorMap, isDarkTheme)=>{
+export const _getGaugeAxisColor = (colorway, colorwayType, color, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, isDarkTheme)=>{
     const extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
     return resolveColor(extractedColors, 0, '', colorMap, colorway, isDarkTheme);
 };
@@ -319,7 +320,8 @@ export const resolveXAxisPoint = (x, isXYearCategory, isXString, isXDate, isXNum
         x
     };
 };
-export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     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;
@@ -408,8 +410,9 @@ export const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, co
         order: 'sorted'
     };
 };
-export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
-    var _input_data_, _input_layout, _input_layout1, _input_layout2, _vsbcData_;
+export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
+    var _input_layout, _input_layout1, _input_layout2, _vsbcData_;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     let yMinValue = 0;
@@ -417,7 +420,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    const resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
+    const resolveXValue = getAxisValueResolver(getAxisType(input.data, getAxisObjects(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);
@@ -425,7 +428,7 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         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 validXYRanges = getValidXYRanges(series, resolveXAxisValue);
+        const validXYRanges = getValidXYRanges(series, resolveXValue);
         validXYRanges.forEach(([rangeStart, rangeEnd], rangeIdx)=>{
             const rangeXValues = series.x.slice(rangeStart, rangeEnd);
             const rangeYValues = series.y.slice(rangeStart, rangeEnd);
@@ -433,7 +436,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: resolveXAxisValue(x),
+                        xAxisPoint: resolveXValue(x),
                         chartData: [],
                         lineData: []
                     };
@@ -486,15 +489,38 @@ 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_data;
+    const xCategories = Array.from(new Set(((_input_data = input.data) !== null && _input_data !== void 0 ? _input_data : []).flatMap((trace)=>{
+        const xData = trace.x;
+        if (!xData) {
+            return [];
+        }
+        if (Array.isArray(xData)) {
+            return xData.flat().map((x)=>{
+                return x;
+            });
+        }
+        return [];
+    }).filter((x)=>x !== undefined && x !== null)));
     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;
         const resolveX = (val)=>{
-            if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
-                return xCategories[val];
+            if (shape.xref === 'x domain') {
+                if (val === 0) {
+                    return xCategories[0];
+                }
+                if (val === 1) {
+                    return xCategories[xCategories.length - 1];
+                }
+            }
+            if (typeof val === 'number' && Array.isArray(xCategories)) {
+                if (xCategories[val] !== undefined) {
+                    return xCategories[val];
+                } else {
+                    return xCategories[shapeIdx];
+                }
             }
             return val;
         };
@@ -562,7 +588,8 @@ export const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, col
         ...getAxisTickProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _processedInput_layout, _processedInput_layout1;
     // Handle object arrays in y values by normalizing the data first
     let processedInput = {
@@ -687,7 +714,8 @@ export const transformPlotlyJsonToGVBCProps = (input, isMultiPlot, colorMap, col
         ...getAxisTickProps(processedInput.data, processedInput.layout)
     };
 };
-export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout1, _vbcData_;
     const vbcData = [];
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
@@ -765,13 +793,16 @@ export const transformPlotlyJsonToVBCProps = (input, isMultiPlot, colorMap, colo
         ...getAxisCategoryOrderProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToAreaChartProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
 };
-export const transformPlotlyJsonToLineChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToLineChartProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'line', colorMap, colorwayType, isDarkTheme);
 };
-export const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToScatterChartProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
 };
 const mapColorFillBars = (layout)=>{
@@ -795,7 +826,8 @@ const mapColorFillBars = (layout)=>{
         };
     });
 };
-const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme)=>{
+const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _input_data_, _chartData__data_, _chartData_, _chartData__data_1, _chartData_1, _chartData__data_2, _chartData_2, _chartData__data_3, _chartData_3, _input_layout, _input_layout1, _input_layout2;
     const isScatterMarkers = [
         'text',
@@ -813,8 +845,9 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
     let mode = 'tonexty';
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     const yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    const resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
-    const shouldWrapLabels = getAxisType(input.data, input.layout, 'x') === 'category';
+    const xAxisType = getAxisType(input.data, getAxisObjects(input.data, input.layout).x);
+    const resolveXValue = getAxisValueResolver(xAxisType);
+    const shouldWrapLabels = xAxisType === '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;
@@ -829,7 +862,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, resolveXAxisValue);
+        const validXYRanges = getValidXYRanges(series, resolveXValue);
         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);
@@ -844,7 +877,7 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
                 data: rangeXValues.map((x, i)=>{
                     var _series_marker, _series_marker1;
                     return {
-                        x: resolveXAxisValue(x),
+                        x: resolveXValue(x),
                         y: rangeYValues[i],
                         ...Array.isArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.size) ? {
                             markerSize: markerSizes[i]
@@ -994,7 +1027,8 @@ const transformPlotlyJsonToScatterTraceProps = (input, isMultiPlot, chartType, c
         };
     }
 };
-export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
     const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
     let colorScale = undefined;
@@ -1052,48 +1086,74 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
         ...getAxisTickProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout1;
-    const { legends, hideLegend } = getLegendProps(input.data, input.layout, isMultiPlot);
+    const data = input.data.filter((series)=>series.type !== 'scatter' || series.mode !== 'markers');
+    const { legends, hideLegend } = getLegendProps(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;
-        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 xAxisType = getAxisType(data, getAxisObjects(data, input.layout).x);
+    const resolveXValue = getAxisValueResolver(xAxisType, parseLocalDate);
+    const resolveGanttXValue = (value)=>{
+        const resolvedValue = resolveXValue(value);
+        return typeof resolvedValue === 'string' ? 0 : resolvedValue !== null && resolvedValue !== void 0 ? resolvedValue : 0;
+    };
+    const isXDate = xAxisType === 'date';
+    const ganttData = [];
+    data.forEach((series, index)=>{
         const legend = legends[index];
-        // 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, _input_layout_template_layout, _input_layout_template, _input_layout, _series_base, _series_x;
-            if (isInvalidValue(yVal)) {
-                return null;
+        if (series.type === 'bar') {
+            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);
+            series.y.forEach((yVal, i)=>{
+                var _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout, _series_base, _series_x;
+                if (isInvalidValue(yVal)) {
+                    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[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, (_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, isDarkTheme);
+                const opacity = getOpacity(series, i);
+                const base = +resolveGanttXValue((_series_base = series.base) === null || _series_base === void 0 ? void 0 : _series_base[i]);
+                const xVal = +resolveGanttXValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]);
+                var _rgb_copy_formatHex8;
+                ganttData.push({
+                    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
+                });
+            });
+        } else if (series.type === 'scatter' && series.mode === 'none' && series.fill === 'toself') {
+            for(let i = 0; i < series.y.length; i += 5){
+                if (isInvalidValue(series.y[i]) || isInvalidValue(series.y[i + 3])) {
+                    continue;
+                }
+                const x0 = resolveGanttXValue(series.x[i]);
+                const x1 = resolveGanttXValue(series.x[i + 1]);
+                const y0 = series.y[i];
+                const y1 = series.y[i + 3];
+                ganttData.push({
+                    x: {
+                        start: x0,
+                        end: x1
+                    },
+                    y: Math.round((y0 + y1) / 2),
+                    legend,
+                    color: series.fillcolor
+                });
             }
-            // 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, (_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, 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,
+        data: ganttData,
         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,
@@ -1104,12 +1164,13 @@ export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMa
         roundCorners: true,
         useUTC: false,
         ...getTitles(input.layout),
-        ...getAxisCategoryOrderProps(input.data, input.layout),
-        ...getBarProps(input.data, input.layout, true),
-        ...getAxisTickProps(input.data, input.layout)
+        ...getAxisCategoryOrderProps(data, input.layout),
+        ...getBarProps(data, input.layout, true),
+        ...getAxisTickProps(data, input.layout)
     };
 };
-export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout, _input_layout_coloraxis, _input_layout1, _input_layout_template_layout, _input_layout_template, _input_layout2, _input_layout_template_data_histogram2d_, _input_layout_template_data_histogram2d, _input_layout_template_data, _input_layout_template1, _input_layout3, _input_layout_template_data_heatmap_, _input_layout_template_data_heatmap, _input_layout_template_data1, _input_layout_template2, _input_layout4, _input_layout5, _input_layout6;
     const firstData = input.data[0];
     const heatmapDataPoints = [];
@@ -1244,7 +1305,8 @@ export const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap,
         ...getAxisTickProps(input.data, input.layout)
     };
 };
-export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _input_layout_template_layout, _input_layout_template, _input_layout, _node_label, _input_layout1, _input_layout2;
     const { link, node } = input.data[0];
     var _link_value;
@@ -1294,7 +1356,8 @@ export const transformPlotlyJsonToSankeyProps = (input, isMultiPlot, colorMap, c
         height: (_input_layout_height = (_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : _input_layout2.height) !== null && _input_layout_height !== void 0 ? _input_layout_height : 468
     };
 };
-export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToGaugeProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     var _firstData_gauge, _input_layout_template_layout, _input_layout_template, _input_layout, _firstData_gauge_steps, _firstData_gauge1, _firstData_gauge_axis_range, _firstData_gauge_axis, _firstData_gauge2, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _firstData_gauge_axis1, _firstData_gauge3, _firstData_gauge_axis_range1, _firstData_gauge_axis2, _firstData_gauge4, _firstData_delta, _firstData_gauge_axis_range2, _firstData_gauge_axis3, _firstData_gauge5, _firstData_gauge_axis_range3, _firstData_gauge_axis4, _firstData_gauge6, _firstData_gauge_axis_range4, _firstData_gauge_axis5, _firstData_gauge7, _firstData_gauge_axis_range5, _firstData_gauge_axis6, _firstData_gauge8, _input_layout2, _input_layout3, _firstData_gauge_steps1, _firstData_gauge9;
     const firstData = input.data[0];
     const stepsColors = ((_firstData_gauge = firstData.gauge) === null || _firstData_gauge === void 0 ? void 0 : _firstData_gauge.steps) ? firstData.gauge.steps.map((step)=>step.color) : undefined;
@@ -1420,7 +1483,8 @@ function mergeCells(tableCells, templateCells) {
         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)=>{
+export const transformPlotlyJsonToChartTableProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+colorMap, colorwayType, isDarkTheme)=>{
     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)=>{
@@ -1573,7 +1637,8 @@ function getCategoriesAndValues(series) {
         }
     }
 }
-export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
+export const transformPlotlyJsonToFunnelChartProps = (input, isMultiPlot, // eslint-disable-next-line @typescript-eslint/no-deprecated
+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
@@ -1970,7 +2035,8 @@ const getLegendShape = (series)=>{
     }
     return 'default';
 };
-export const getAllupLegendsProps = (input, colorMap, colorwayType, traceInfo, isDarkTheme)=>{
+export const getAllupLegendsProps = (input, // eslint-disable-next-line @typescript-eslint/no-deprecated
+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)=>{
@@ -2346,8 +2412,14 @@ const getAxisScaleTypeProps = (data, layout)=>{
             const tickValues = axType === 'date' ? ax.tickvals.map((v)=>new Date(v)) : ax.tickvals;
             if (axId === 'x') {
                 props.tickValues = tickValues;
+                props.xAxis = {
+                    tickText: ax.ticktext
+                };
             } else if (axId === 'y') {
                 props.yAxisTickValues = tickValues;
+                props.yAxis = {
+                    tickText: ax.ticktext
+                };
             }
             return;
         }
@@ -2456,14 +2528,7 @@ const getAxisObjects = (data, layout)=>{
     }
     return axisObjects;
 };
-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];
-    }
+const getAxisType = (data, ax)=>{
     if (!ax) {
         return 'category';
     }
@@ -2496,9 +2561,12 @@ function getAxisType(data, arg2, arg3) {
         return 'date';
     }
     return 'category';
-}
-const getAxisValueResolver = (data, layout, axisId)=>{
-    const axType = getAxisType(data, layout, axisId);
+};
+const getAxisValueResolver = (axType, dateParser)=>{
+    const toDate = (value)=>{
+        const date = dateParser ? dateParser(value) : new Date(value);
+        return isNaN(date.getTime()) ? null : date;
+    };
     return (value)=>{
         if (isInvalidValue(value)) {
             return null;
@@ -2509,10 +2577,10 @@ const getAxisValueResolver = (data, layout, axisId)=>{
                 return isNumber(value) ? +value : null;
             case 'date':
                 if (isNumber(value)) {
-                    return new Date(+value);
+                    return toDate(+value);
                 }
                 if (typeof value === 'string') {
-                    return new Date(value);
+                    return toDate(value);
                 }
                 return null;
             case 'category':