@fluentui/react-charts 0.0.0-nightly-20251021-0406.1 → 0.0.0-nightly-20251023-0407.1

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -417,7 +417,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 +425,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 +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: resolveXAxisValue(x),
+                        xAxisPoint: resolveXValue(x),
                         chartData: [],
                         lineData: []
                     };
@@ -813,8 +813,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 +830,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 +845,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]
@@ -1054,46 +1055,71 @@ export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPl
 };
 export const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, 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,9 +1130,9 @@ 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)=>{
@@ -2346,8 +2372,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 +2488,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 +2521,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 +2537,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':