@fluentui/react-charting 5.24.36 → 5.24.37

package/lib-amd/components/DeclarativeChart/PlotlySchemaAdapter.d.ts

@@ -71,7 +71,7 @@ export declare const projectPolarToCartesian: (input: PlotlySchema) => PlotlySch
 export declare function findArrayAttributes(trace: any): void;
 export declare const getAllupLegendsProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, traceInfo: TraceInfo[], isDarkTheme?: boolean) => ILegendsProps;
 export declare const getNumberAtIndexOrDefault: (data: PlotData["z"] | undefined, index: number) => number | undefined;
-export declare const getValidXYRanges: (series: Partial<PlotData>) => [number, number][];
+export declare const getValidXYRanges: (series: Partial<PlotData>, resolveX?: (v: Datum) => Datum, resolveY?: (v: Datum) => Datum) => [number, number][];
 export declare const isNonPlotType: (chartType: string) => boolean;
 export declare const getGridProperties: (schema: PlotlySchema | undefined, isMultiPlot: boolean, validTracesInfo: TraceInfo[]) => GridProperties;
 export {};

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

@@ -415,19 +415,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var _j = getLegendProps(input.data, input.layout, isMultiPlot), legends = _j.legends, hideLegend = _j.hideLegend;
         var colorScale = undefined;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
+        var resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
         input.data.forEach(function (series, index1) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
-            var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
             // extract bar colors for each series only once
             var extractedBarColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             // extract line colors for each series only once
             var extractedLineColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
-            var xValues = series.x;
-            var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
-            var isXString = (0, chart_utilities_1.isStringArray)(xValues);
-            var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
-            var validXYRanges = (0, exports.getValidXYRanges)(series);
+            var validXYRanges = (0, exports.getValidXYRanges)(series, resolveXAxisValue);
             validXYRanges.forEach(function (_a, rangeIdx) {
                 var rangeStart = _a[0], rangeEnd = _a[1];
                 var rangeXValues = series.x.slice(rangeStart, rangeEnd);
@@ -436,7 +432,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                     if (!mapXToDataPoints[x]) {
                         mapXToDataPoints[x] = {
-                            xAxisPoint: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber),
+                            xAxisPoint: resolveXAxisValue(x),
                             chartData: [],
                             lineData: [],
                         };
@@ -647,8 +643,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var xValues = [];
             var yValues = [];
             series.x.forEach(function (xVal, index) {
-                var yVal = (0, exports.getNumberAtIndexOrDefault)(series.y, index);
-                if ((0, chart_utilities_1.isInvalidValue)(xVal) || (0, chart_utilities_1.isInvalidValue)(yVal)) {
+                var _a;
+                var yVal = (_a = (0, exports.getNumberAtIndexOrDefault)(series.y, index)) !== null && _a !== void 0 ? _a : 0;
+                if ((0, chart_utilities_1.isInvalidValue)(xVal)) {
                     return;
                 }
                 xValues.push(xVal);
@@ -702,8 +699,27 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var mapColorFillBars = function (layout) {
+        if (!Array.isArray(layout === null || layout === void 0 ? void 0 : layout.shapes)) {
+            return [];
+        }
+        return layout.shapes
+            .filter(function (shape) { return shape.type === 'rect'; })
+            .map(function (shape) {
+            //colorFillbars doesn't support string dates or categories
+            if (typeof shape.x0 === 'string' || typeof shape.x1 === 'string') {
+                return null;
+            }
+            return {
+                color: shape.fillcolor,
+                data: [{ startX: shape.x0, endX: shape.x1 }],
+                applyPattern: false,
+            };
+        });
+    };
     var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g;
         var isScatterMarkers = [
             'text',
             'markers',
@@ -718,9 +734,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var isScatterChart = chartType === 'scatter';
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
         var mode = 'tonexty';
-        var _g = getLegendProps(input.data, input.layout, isMultiPlot), legends = _g.legends, hideLegend = _g.hideLegend;
+        var _h = getLegendProps(input.data, input.layout, isMultiPlot), legends = _h.legends, hideLegend = _h.hideLegend;
         var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-        var shouldWrapLabels = false;
+        var resolveXAxisValue = getAxisValueResolver(input.data, input.layout, 'x');
+        var shouldWrapLabels = getAxisType(input.data, input.layout, 'x') === 'category';
         var chartData = input.data
             .map(function (series, index) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -732,11 +749,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // extract colors for each series only once
             var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, colors, colorMap, isDarkTheme);
             var xValues = series.x;
-            var isXString = (0, chart_utilities_1.isStringArray)(xValues);
-            var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
-            var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
-            var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
-            shouldWrapLabels = shouldWrapLabels || (isXString && !isXDate);
             var legend = legends[index];
             // resolve color for each legend's lines from the extracted colors
             var seriesColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, (_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, isDarkTheme);
@@ -745,7 +757,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             // if mode contains 'text', we prioritize showing the text over curving the line
             var lineOptions = !((_l = series.mode) === null || _l === void 0 ? void 0 : _l.includes('text')) && series.type !== 'scatterpolar' ? getLineOptions(series.line) : undefined;
             var legendShape = getLegendShape(series);
-            var validXYRanges = (0, exports.getValidXYRanges)(series);
+            var validXYRanges = (0, exports.getValidXYRanges)(series, resolveXAxisValue);
             return validXYRanges.map(function (_a, rangeIdx) {
                 var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
                 var rangeStart = _a[0], rangeEnd = _a[1];
@@ -765,7 +777,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                     legendShape: legendShape,
                     data: rangeXValues.map(function (x, i) {
                         var _a, _b;
-                        return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ x: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
+                        return (tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ x: resolveXAxisValue(x), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
                             ? { markerSize: markerSizes[i] }
                             : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
                                 ? { markerSize: series.marker.size }
@@ -822,8 +834,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
         }
         else {
-            return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, roundedTicks: true, enableReflow: false }, commonProps), yMinMax), (isScatterChart
-                ? tslib_1.__assign({ showYAxisLablesTooltip: true }, getAxisCategoryOrderProps(input.data, input.layout)) : {}));
+            return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: isScatterChart ? scatterChartProps : chartProps, roundedTicks: true, enableReflow: false }, commonProps), yMinMax), (isScatterChart
+                ? tslib_1.__assign({ showYAxisLablesTooltip: true }, getAxisCategoryOrderProps(input.data, input.layout)) : {})), (!isScatterChart && ((_g = mapColorFillBars(input.layout)) === null || _g === void 0 ? void 0 : _g.length)
+                ? { colorFillBars: mapColorFillBars(input.layout) }
+                : {}));
         }
     };
     var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -840,18 +854,18 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             return series.y
                 .map(function (yValue, i) {
                 var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                if ((0, chart_utilities_1.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, chart_utilities_1.isInvalidValue)(yValue)) {
+                if ((0, chart_utilities_1.isInvalidValue)(yValue)) {
                     return null;
                 }
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 var color = colorScale
-                    ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
-                        ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[i % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
+                    ? colorScale((0, chart_utilities_1.isArrayOrTypedArray)((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
+                        ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[i % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                         : 0)
-                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, (_h = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.template) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.colorway, isDarkTheme);
+                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, (_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, isDarkTheme);
                 var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
                 return {
-                    x: series.x[i],
+                    x: (0, chart_utilities_1.isInvalidValue)((_h = series.x) === null || _h === void 0 ? void 0 : _h[i]) ? 0 : series.x[i],
                     y: yValue,
                     legend: legend,
                     color: (_j = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _j !== void 0 ? _j : color,
@@ -877,14 +891,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var _a, _b, _c;
         var _d = getLegendProps(input.data, input.layout, isMultiPlot), legends = _d.legends, hideLegend = _d.hideLegend;
         var colorScale = undefined;
+        var isXDate = getAxisType(input.data, input.layout, 'x') === 'date';
         var chartData = input.data
             .map(function (series, index) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
             colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
             // extract colors for each series only once
             var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
             var legend = legends[index];
-            var isXDate = ((_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.xaxis) === null || _f === void 0 ? void 0 : _f.type) === 'date' || (0, chart_utilities_1.isDateArray)(series.x);
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             var convertXValueToNumber = function (value) {
                 return (0, chart_utilities_1.isInvalidValue)(value) ? 0 : isXDate ? +parseLocalDate(value) : +value;
@@ -931,9 +945,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var yValues_1 = [];
             var zValues_1 = [];
             (_a = firstData.x) === null || _a === void 0 ? void 0 : _a.forEach(function (xVal, index) {
-                var _a;
-                var zVal = (0, exports.getNumberAtIndexOrDefault)(firstData.z, index);
-                if ((0, chart_utilities_1.isInvalidValue)(xVal) || (0, chart_utilities_1.isInvalidValue)((_a = firstData.y) === null || _a === void 0 ? void 0 : _a[index]) || (0, chart_utilities_1.isInvalidValue)(zVal)) {
+                var _a, _b;
+                var zVal = (_a = (0, exports.getNumberAtIndexOrDefault)(firstData.z, index)) !== null && _a !== void 0 ? _a : 0;
+                if ((0, chart_utilities_1.isInvalidValue)(xVal) || (0, chart_utilities_1.isInvalidValue)((_b = firstData.y) === null || _b === void 0 ? void 0 : _b[index])) {
                     return;
                 }
                 xValues_1.push(xVal);
@@ -1773,7 +1787,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         return 1;
     };
     exports.getNumberAtIndexOrDefault = getNumberAtIndexOrDefault;
-    var getValidXYRanges = function (series) {
+    var getValidXYRanges = function (series, resolveX, resolveY) {
         if (!(0, chart_utilities_1.isArrayOrTypedArray)(series.x) || !(0, chart_utilities_1.isArrayOrTypedArray)(series.y)) {
             return [];
         }
@@ -1781,7 +1795,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         var start = 0;
         var end = 0;
         for (; end < series.x.length; end++) {
-            if ((0, chart_utilities_1.isInvalidValue)(series.x[end]) || (0, chart_utilities_1.isInvalidValue)(series.y[end])) {
+            if ((0, chart_utilities_1.isInvalidValue)(series.x[end]) ||
+                (typeof resolveX === 'function' && (0, chart_utilities_1.isInvalidValue)(resolveX(series.x[end]))) ||
+                (0, chart_utilities_1.isInvalidValue)(series.y[end]) ||
+                (typeof resolveY === 'function' && (0, chart_utilities_1.isInvalidValue)(resolveY(series.y[end])))) {
                 if (end - start > 0) {
                     ranges.push([start, end]);
                 }
@@ -2094,7 +2111,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             if (!ax) {
                 return;
             }
-            var axType = getAxisType(data, axId[0], ax);
+            var axType = getAxisType(data, ax);
             if ((!ax.tickmode || ax.tickmode === 'array') && (0, chart_utilities_1.isArrayOrTypedArray)(ax.tickvals)) {
                 var tickValues = axType === 'date' ? ax.tickvals.map(function (v) { return new Date(v); }) : ax.tickvals;
                 if (axId === 'x') {
@@ -2201,44 +2218,81 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             xAxisId = axisIds.x;
             yAxisIds.add(axisIds.y);
         });
+        var makeAxisObject = function (axLetter, axId) { return (tslib_1.__assign(tslib_1.__assign({}, layout === null || layout === void 0 ? void 0 : layout[(0, chart_utilities_1.getAxisKey)(axLetter, axId)]), { _id: "".concat(axLetter).concat(axId > 1 ? axId : '') })); };
         var axisObjects = {};
         if (typeof xAxisId === 'number') {
-            axisObjects.x = layout === null || layout === void 0 ? void 0 : layout[(0, chart_utilities_1.getAxisKey)('x', xAxisId)];
+            axisObjects.x = makeAxisObject('x', xAxisId);
         }
         var sortedYAxisIds = Array.from(yAxisIds).sort();
         if (sortedYAxisIds.length > 0) {
-            axisObjects.y = layout === null || layout === void 0 ? void 0 : layout[(0, chart_utilities_1.getAxisKey)('y', sortedYAxisIds[0])];
+            axisObjects.y = makeAxisObject('y', sortedYAxisIds[0]);
         }
         if (sortedYAxisIds.length > 1) {
-            axisObjects.y2 = layout === null || layout === void 0 ? void 0 : layout[(0, chart_utilities_1.getAxisKey)('y', sortedYAxisIds[1])];
+            axisObjects.y2 = makeAxisObject('y', sortedYAxisIds[1]);
         }
         return axisObjects;
     };
-    var getAxisType = function (data, axLetter, ax) {
+    function getAxisType(data, arg2, arg3) {
+        var _a;
+        var ax;
+        if (arg2 && typeof arg2 === 'object' && '_id' in arg2) {
+            ax = arg2;
+        }
+        else if (typeof arg3 === 'string') {
+            var layout = arg2;
+            ax = getAxisObjects(data, layout)[arg3];
+        }
+        if (!ax) {
+            return 'category';
+        }
+        if (['linear', 'log', 'date', 'category'].includes((_a = ax.type) !== null && _a !== void 0 ? _a : '')) {
+            return ax.type;
+        }
+        var axLetter = ax._id[0];
         var values = [];
         data.forEach(function (series) {
             var _a;
-            (_a = series[axLetter]) === null || _a === void 0 ? void 0 : _a.forEach(function (val) {
-                if (!(0, chart_utilities_1.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 ((0, chart_utilities_1.isNumberArray)(values)) {
-            if ((ax === null || ax === void 0 ? void 0 : ax.type) === 'log') {
-                return 'log';
+            var axId = series["".concat(axLetter, "axis")];
+            if (axId === ax._id || (!axId && ax._id === axLetter)) {
+                (_a = series[axLetter]) === null || _a === void 0 ? void 0 : _a.forEach(function (val) {
+                    if (!(0, chart_utilities_1.isInvalidValue)(val)) {
+                        values.push(val);
+                    }
+                });
             }
+        });
+        if ((0, chart_utilities_1.isNumberArray)(values) && !(0, chart_utilities_1.isYearArray)(values)) {
             return 'linear';
         }
         if ((0, chart_utilities_1.isDateArray)(values)) {
             return 'date';
         }
-        if ((0, chart_utilities_1.isStringArray)(values)) {
-            return 'category';
-        }
+        return 'category';
+    }
+    var getAxisValueResolver = function (data, layout, axisId) {
+        var axType = getAxisType(data, layout, axisId);
+        return function (value) {
+            if ((0, chart_utilities_1.isInvalidValue)(value)) {
+                return null;
+            }
+            switch (axType) {
+                case 'linear':
+                case 'log':
+                    return (0, chart_utilities_1.isNumber)(value) ? +value : null;
+                case 'date':
+                    if ((0, chart_utilities_1.isNumber)(value)) {
+                        return new Date(+value);
+                    }
+                    if (typeof value === 'string') {
+                        return new Date(value);
+                    }
+                    return null;
+                case 'category':
+                    return "".concat(value);
+                default:
+                    return null;
+            }
+        };
     };
 });
 //# sourceMappingURL=PlotlySchemaAdapter.js.map