@fluentui/react-charting 5.24.21 → 5.24.22

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -5,7 +5,7 @@ import { format as d3Format } from 'd3-format';
 import { DataVizPalette, getColorFromToken } from '../../utilities/colors';
 import { GaugeChartVariant } from '../GaugeChart/index';
 import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
-import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, } from '@fluentui/chart-utilities';
+import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, formatToLocaleString, isNumber, isObjectArray, getAxisIds, getAxisKey, } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
 import { getOpacity, extractColor, resolveColor, createColorScale } from './PlotlyColorAdapter';
 import { rgb } from 'd3-color';
@@ -203,6 +203,124 @@ export var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate,
     }
     return x;
 };
+/**
+ * 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
+ */
+export 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' && isNumber(value)))) {
+                    filtered_1[key] = value;
+                }
+            });
+            return filtered_1;
+        }
+        else if (typeof item === 'number' || (typeof item === 'string' && 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' && 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 };
+};
 export 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];
@@ -337,16 +455,37 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
 };
 export 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 = __assign({}, input);
+    // Check if any bar traces have object arrays as y values
+    var hasObjectArrayData = input.data.some(function (series) { return series.type === 'bar' && 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' && isObjectArray(series.y)) {
+                // Normalize the object array to create multiple traces for GVBC
+                var traces = 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 (__assign(__assign({}, trace), { 
+                    // Copy other properties from the original series if needed
+                    marker: series.marker })); });
+            }
+            return [series];
+        })
+            .flat();
+        processedInput = __assign(__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 = createColorScale(input.layout, series, colorScale);
+        colorScale = createColorScale(processedInput.layout, series, colorScale);
         // extract colors for each series only once
-        var extractedColors = 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 = 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 (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
@@ -371,14 +510,14 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
                     xAxisCalloutData: x,
                     color: (_f = 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 __assign(__assign(__assign(__assign(__assign(__assign(__assign(__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 __assign(__assign(__assign(__assign(__assign(__assign(__assign(__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));
 };
 export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d;
@@ -538,7 +677,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     var scatterChartProps = {
         scatterChartData: chartData,
     };
-    var commonProps = __assign(__assign(__assign(__assign(__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 = __assign(__assign(__assign(__assign(__assign(__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 __assign({ data: chartProps, mode: mode }, commonProps);
     }
@@ -1771,7 +1910,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) {
@@ -1802,4 +1949,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 = getAxisIds(series);
+        xAxisId = axisIds.x;
+        yAxisIds.add(axisIds.y);
+    });
+    var isLogAxis = function (axLetter, axId) {
+        var _a;
+        var axisKey = 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