@fluentui/react-charting 5.24.20 → 5.24.22

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

@@ -1,7 +1,7 @@
 define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-shape", "./PlotlyColorAdapter", "d3-color"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_shape_1, PlotlyColorAdapter_1, d3_color_1) {
     "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;
     exports.NON_PLOT_KEY_PREFIX = 'nonplot_';
     exports.SINGLE_REPEAT = 'repeat(1, 1fr)';
     var dashOptions = {
@@ -199,6 +199,125 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         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];
@@ -335,16 +454,37 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     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])) {
@@ -369,14 +509,14 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                         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) {
@@ -541,7 +681,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         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);
         }
@@ -1788,7 +1928,15 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     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) {
@@ -1819,5 +1967,34 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             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