@fluentui/react-charts 9.3.3 → 9.3.5

package/lib-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -497,7 +497,7 @@ const transformPlotlyJsonToDonutProps = (input, isMultiPlot, colorMap, colorwayT
     };
 };
 const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC)=>{
-    var _input_data_, _input_layout, _input_layout1, _input_layout2, _vsbcData_;
+    var _input_layout, _input_layout1, _input_layout2, _vsbcData_;
     const mapXToDataPoints = {};
     let yMaxValue = 0;
     let yMinValue = 0;
@@ -505,7 +505,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
     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 = (0, _PlotlyColorAdapter.createColorScale)(input.layout, series, colorScale);
@@ -513,7 +513,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
         const extractedBarColors = (0, _PlotlyColorAdapter.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 = (0, _PlotlyColorAdapter.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);
@@ -521,7 +521,7 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
                 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: []
                     };
@@ -574,15 +574,38 @@ const transformPlotlyJsonToVSBCProps = (input, isMultiPlot, colorMap, colorwayTy
             });
         });
     });
-    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;
         };
@@ -901,8 +924,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;
@@ -917,7 +941,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);
@@ -932,7 +956,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]
@@ -1142,46 +1166,71 @@ const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, isMultiPlot, col
 };
 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 = (0, _PlotlyColorAdapter.createColorScale)(input.layout, series, colorScale);
-        // extract colors for each series only once
-        const extractedColors = (0, _PlotlyColorAdapter.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 (0, _chartutilities.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 ((0, _chartutilities.isInvalidValue)(yVal)) {
-                return null;
+        if (series.type === 'bar') {
+            var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
+            colorScale = (0, _PlotlyColorAdapter.createColorScale)(input.layout, series, colorScale);
+            // extract colors for each series only once
+            const extractedColors = (0, _PlotlyColorAdapter.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 ((0, _chartutilities.isInvalidValue)(yVal)) {
+                    return;
+                }
+                // resolve color for each legend's bars from the colorscale or extracted colors
+                const color = colorScale ? colorScale((0, _chartutilities.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) : (0, _PlotlyColorAdapter.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 = (0, _PlotlyColorAdapter.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 = (0, _d3color.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 ((0, _chartutilities.isInvalidValue)(series.y[i]) || (0, _chartutilities.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((0, _chartutilities.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) : (0, _PlotlyColorAdapter.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 = (0, _PlotlyColorAdapter.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 = (0, _d3color.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,
@@ -1192,9 +1241,9 @@ const transformPlotlyJsonToGanttChartProps = (input, isMultiPlot, colorMap, colo
         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)
     };
 };
 const transformPlotlyJsonToHeatmapProps = (input, isMultiPlot, colorMap, colorwayType, isDarkTheme)=>{
@@ -2428,8 +2477,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;
         }
@@ -2537,14 +2592,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';
     }
@@ -2577,9 +2625,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 ((0, _chartutilities.isInvalidValue)(value)) {
             return null;
@@ -2590,10 +2641,10 @@ const getAxisValueResolver = (data, layout, axisId)=>{
                 return (0, _chartutilities.isNumber)(value) ? +value : null;
             case 'date':
                 if ((0, _chartutilities.isNumber)(value)) {
-                    return new Date(+value);
+                    return toDate(+value);
                 }
                 if (typeof value === 'string') {
-                    return new Date(value);
+                    return toDate(value);
                 }
                 return null;
             case 'category':