@fluentui/react-charting 5.24.35 → 5.24.37

package/lib-commonjs/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-commonjs/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -426,19 +426,15 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
     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);
@@ -447,7 +443,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                 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: [],
                     };
@@ -658,8 +654,9 @@ var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colo
         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);
@@ -713,8 +710,27 @@ var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot, color
     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',
@@ -729,9 +745,10 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     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;
@@ -743,11 +760,6 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         // 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);
@@ -756,7 +768,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         // 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];
@@ -776,7 +788,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
                 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 }
@@ -833,8 +845,10 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         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) {
@@ -851,18 +865,18 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
         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,
@@ -888,14 +902,14 @@ var transformPlotlyJsonToGanttChartProps = function (input, isMultiPlot, colorMa
     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;
@@ -942,9 +956,9 @@ var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap,
         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);
@@ -1784,7 +1798,7 @@ var getNumberAtIndexOrDefault = function (data, index) {
     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 [];
     }
@@ -1792,7 +1806,10 @@ var getValidXYRanges = function (series) {
     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]);
             }
@@ -2105,7 +2122,7 @@ var getAxisTickProps = function (data, layout) {
         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') {
@@ -2212,43 +2229,80 @@ var getAxisObjects = function (data, layout) {
         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