@fluentui/react-charting 5.24.20 → 5.24.22

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToFunnelChartProps = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToGanttChartProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
+exports.getGridProperties = exports.isNonPlotType = exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.getAllupLegendsProps = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToFunnelChartProps = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToGanttChartProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToLineChartProps = exports.transformPlotlyJsonToAreaChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.normalizeObjectArrayForGVBC = exports.resolveXAxisPoint = exports._getGaugeAxisColor = exports.correctYearMonth = exports.SINGLE_REPEAT = exports.NON_PLOT_KEY_PREFIX = void 0;
 var tslib_1 = require("tslib");
 var d3_array_1 = require("d3-array");
 var d3_scale_1 = require("d3-scale");
@@ -209,6 +209,125 @@ var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate, isXNum
     return x;
 };
 exports.resolveXAxisPoint = resolveXAxisPoint;
+/**
+ * Checks if a key should be ignored during normalization
+ * @param key The key to check
+ * @returns true if the key should be ignored
+ */
+var shouldIgnoreKey = function (key) {
+    var lowerKey = key.toLowerCase();
+    if (lowerKey.includes('style') || lowerKey === 'style') {
+        return true;
+    }
+    // Use regex to match common CSS property patterns
+    // (color, fill, stroke, border, background, font, shadow, outline, etc.)
+    var cssKeyRegex = new RegExp('^(color|fill|stroke|border|background|font|shadow|outline|margin|padding|gap|align|justify|display|flex|grid|' +
+        'text|line|letter|word|vertical|horizontal|overflow|position|top|right|bottom|left|zindex|z-index|opacity|' +
+        'filter|clip|cursor|resize|transition|animation|transform|box|column|row|direction|visibility|' +
+        'content|width|height|aspect|image|user|pointer|caret|scroll|%)|(-webkit-|-moz-|-ms-|-o-)', 'i');
+    if (cssKeyRegex.test(lowerKey)) {
+        return true;
+    }
+    return false;
+};
+/**
+ * Flattens a nested object into a single level object with dot notation keys
+ * @param obj Object to flatten
+ * @param prefix Optional prefix for keys
+ * @returns Flattened object
+ */
+var flattenObject = function (obj, prefix) {
+    if (prefix === void 0) { prefix = ''; }
+    var flattened = {};
+    for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key)) {
+            var newKey = prefix ? "".concat(prefix, ".").concat(key) : key;
+            var value = obj[key];
+            if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                // Recursively flatten nested objects
+                Object.assign(flattened, flattenObject(value, newKey));
+            }
+            else {
+                flattened[newKey] = value;
+            }
+        }
+    }
+    return flattened;
+};
+/**
+ * Normalizes an array of objects by flattening nested structures and creating grouped data
+ * Uses json_normalize approach with D3 color detection and filtering
+ * @param data Array of objects to normalize
+ * @returns Object containing traces for grouped vertical bar chart
+ */
+var normalizeObjectArrayForGVBC = function (data, xLabels) {
+    if (!data || data.length === 0) {
+        return { traces: [], x: [] };
+    }
+    // Use provided xLabels if available, otherwise default to Item 1, Item 2, ...
+    var x = xLabels && xLabels.length === data.length ? xLabels : data.map(function (_, index) { return "Item ".concat(index + 1); });
+    // First, flatten all objects and collect all unique keys, excluding style keys
+    var flattenedObjects = data.map(function (item, index) {
+        var _a;
+        if (typeof item === 'object' && item !== null) {
+            var flattened_1 = flattenObject(item);
+            // Only keep keys where the value is numeric (number or numeric string) and not a style key
+            var filtered_1 = {};
+            Object.keys(flattened_1).forEach(function (key) {
+                var value = flattened_1[key];
+                if (!shouldIgnoreKey(key) && (typeof value === 'number' || (typeof value === 'string' && (0, chart_utilities_1.isNumber)(value)))) {
+                    filtered_1[key] = value;
+                }
+            });
+            return filtered_1;
+        }
+        else if (typeof item === 'number' || (typeof item === 'string' && (0, chart_utilities_1.isNumber)(item))) {
+            // Only keep primitive numeric values
+            return _a = {}, _a[x[index] || "item_".concat(index)] = item, _a;
+        }
+        else {
+            // Non-numeric primitive, ignore by returning empty object
+            return {};
+        }
+    });
+    // Collect all unique keys across all objects
+    var allKeys = new Set();
+    flattenedObjects.forEach(function (obj) {
+        Object.keys(obj).forEach(function (key) { return allKeys.add(key); });
+    });
+    // Create traces for each key (property)
+    var traces = [];
+    allKeys.forEach(function (key) {
+        var yValues = [];
+        var hasValidData = false;
+        var isNumericData = false;
+        flattenedObjects.forEach(function (obj, index) {
+            var value = obj[key];
+            if (typeof value === 'number') {
+                yValues.push(value);
+                hasValidData = true;
+                isNumericData = true;
+            }
+            else if (typeof value === 'string' && (0, chart_utilities_1.isNumber)(value)) {
+                yValues.push(parseFloat(value));
+                hasValidData = true;
+                isNumericData = true;
+            }
+        });
+        // Only create trace if we have valid numeric data
+        if (hasValidData && isNumericData) {
+            var trace = {
+                type: 'bar',
+                name: key,
+                x: x,
+                y: yValues,
+            };
+            traces.push(trace);
+        }
+    });
+    return { traces: traces, x: x };
+};
+exports.normalizeObjectArrayForGVBC = normalizeObjectArrayForGVBC;
 var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var firstData = input.data[0];
@@ -345,16 +464,37 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
 exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
 var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d;
+    // Handle object arrays in y values by normalizing the data first
+    var processedInput = tslib_1.__assign({}, input);
+    // Check if any bar traces have object arrays as y values
+    var hasObjectArrayData = input.data.some(function (series) { return series.type === 'bar' && (0, chart_utilities_1.isObjectArray)(series.y); });
+    if (hasObjectArrayData) {
+        // Process each trace that has object array y values
+        var processedData = input.data
+            .map(function (series, index) {
+            if (series.type === 'bar' && (0, chart_utilities_1.isObjectArray)(series.y)) {
+                // Normalize the object array to create multiple traces for GVBC
+                var traces = (0, exports.normalizeObjectArrayForGVBC)(series.y, Array.isArray(series.x) ? series.x : undefined).traces;
+                // Return all the new traces, each representing a property from the objects
+                return traces.map(function (trace) { return (tslib_1.__assign(tslib_1.__assign({}, trace), { 
+                    // Copy other properties from the original series if needed
+                    marker: series.marker })); });
+            }
+            return [series];
+        })
+            .flat();
+        processedInput = tslib_1.__assign(tslib_1.__assign({}, input), { data: processedData });
+    }
     var mapXToDataPoints = {};
-    var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
-    var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
+    var secondaryYAxisValues = getSecondaryYAxisValues(processedInput.data, processedInput.layout, 0, 0);
+    var _e = getLegendProps(processedInput.data, processedInput.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
     var colorScale = undefined;
-    var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
-    input.data.forEach(function (series, index1) {
+    var yAxisTickFormat = getYAxisTickFormat(processedInput.data[0], processedInput.layout);
+    processedInput.data.forEach(function (series, index1) {
         var _a, _b, _c, _d, _e;
-        colorScale = (0, PlotlyColorAdapter_1.createColorScale)(input.layout, series, colorScale);
+        colorScale = (0, PlotlyColorAdapter_1.createColorScale)(processedInput.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 extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_c = (_b = (_a = processedInput.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);
         (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
             var _a, _b, _c, _d, _e, _f;
             if ((0, chart_utilities_1.isInvalidValue)(x) || (0, chart_utilities_1.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
@@ -379,14 +519,14 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
                     xAxisCalloutData: x,
                     color: (_f = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                     legend: legend,
-                    useSecondaryYScale: usesSecondaryYScale(series, input.layout),
+                    useSecondaryYScale: usesSecondaryYScale(series, processedInput.layout),
                     yAxisCalloutData: getFormattedCalloutYData(yVal, yAxisTickFormat),
                 });
             }
         });
     });
     var gvbcData = Object.values(mapXToDataPoints);
-    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: gvbcData, width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = gvbcData[0]) === null || _d === void 0 ? void 0 : _d.name) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout));
+    return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ data: gvbcData, width: (_a = processedInput.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = processedInput.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barwidth: 'auto', mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, wrapXAxisLables: typeof ((_d = gvbcData[0]) === null || _d === void 0 ? void 0 : _d.name) === 'string' }), getTitles(processedInput.layout)), getAxisCategoryOrderProps(processedInput.data, processedInput.layout)), getYMinMaxValues(processedInput.data[0], processedInput.layout)), getXAxisTickFormat(processedInput.data[0], processedInput.layout)), yAxisTickFormat), getBarProps(processedInput.data, processedInput.layout));
 };
 exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
 var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -551,7 +691,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     var scatterChartProps = {
         scatterChartData: chartData,
     };
-    var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat);
+    var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout));
     if (isAreaChart) {
         return tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
     }
@@ -1798,7 +1938,15 @@ var parseLocalDate = function (value) {
 var getBarProps = function (data, layout, isHorizontal) {
     var padding;
     if (typeof (layout === null || layout === void 0 ? void 0 : layout.bargap) === 'number') {
-        padding = layout.bargap;
+        if (layout.bargap >= 0 && layout.bargap <= 1) {
+            padding = layout.bargap;
+        }
+        else {
+            // Plotly uses a default bargap of 0.2, as noted here: https://github.com/plotly/plotly.js/blob/1d5a249e43dd31ae50acf02117a19e5ac97387e9/src/traces/bar/layout_defaults.js#L58.
+            // However, we don't use this value as our default padding because it causes the bars to
+            // appear disproportionately wide in large containers.
+            padding = 0.2;
+        }
     }
     var plotlyBarWidths = data
         .map(function (series) {
@@ -1829,4 +1977,33 @@ var getBarProps = function (data, layout, isHorizontal) {
         xAxisOuterPadding: padding / 2,
     };
 };
+var getAxisScaleTypeProps = function (data, layout) {
+    var result = {};
+    // Traces are grouped by their xaxis property, and for each group/subplot, the adapter functions
+    // are called with the corresponding filtered data. As a result, all traces passed to an adapter
+    // function share the same xaxis.
+    var xAxisId;
+    var yAxisIds = new Set();
+    data.forEach(function (series) {
+        var axisIds = (0, chart_utilities_1.getAxisIds)(series);
+        xAxisId = axisIds.x;
+        yAxisIds.add(axisIds.y);
+    });
+    var isLogAxis = function (axLetter, axId) {
+        var _a;
+        var axisKey = (0, chart_utilities_1.getAxisKey)(axLetter, axId);
+        return ((_a = layout === null || layout === void 0 ? void 0 : layout[axisKey]) === null || _a === void 0 ? void 0 : _a.type) === 'log';
+    };
+    if (typeof xAxisId === 'number' && isLogAxis('x', xAxisId)) {
+        result.xScaleType = 'log';
+    }
+    var sortedYAxisIds = Array.from(yAxisIds).sort();
+    if (sortedYAxisIds.length > 0 && isLogAxis('y', sortedYAxisIds[0])) {
+        result.yScaleType = 'log';
+    }
+    if (sortedYAxisIds.length > 1 && isLogAxis('y', sortedYAxisIds[1])) {
+        result.secondaryYScaleType = 'log';
+    }
+    return result;
+};
 //# sourceMappingURL=PlotlySchemaAdapter.js.map