@fluentui/react-charting 5.23.96 → 5.23.97

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

@@ -1,7 +1,7 @@
-define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, PlotlyColorAdapter_1) {
+define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "./PlotlyColorAdapter"], function (require, exports, tslib_1, d3_array_1, d3_scale_1, d3_format_1, colors_1, index_1, utilities_1, chart_utilities_1, d3_time_format_1, d3_shape_1, PlotlyColorAdapter_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.isInvalidValue = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
+    exports.getValidXYRanges = exports.getNumberAtIndexOrDefault = exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToChartTableProps = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._getGaugeAxisColor = exports.correctYearMonth = exports.isMonthArray = void 0;
     var dashOptions = {
         dot: {
             strokeDasharray: '1, 5',
@@ -156,7 +156,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var mapLegendToDataPoint = {};
         (_j = firstData.labels) === null || _j === void 0 ? void 0 : _j.forEach(function (label, index) {
             var value = (0, exports.getNumberAtIndexOrDefault)(firstData.values, index);
-            if ((0, exports.isInvalidValue)(value) || value < 0) {
+            if ((0, chart_utilities_1.isInvalidValue)(value) || value < 0) {
                 return;
             }
             var legend = "".concat(label);
@@ -264,18 +264,41 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         return tslib_1.__assign(tslib_1.__assign({ data: Object.values(mapXToDataPoints), 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', yMaxValue: yMaxValue, yMinValue: yMinValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2 });
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
+    var createColorScale = function (colorscale, domain) {
+        var dMin = domain[0], dMax = domain[1];
+        // Normalize colorscale domain to actual data domain
+        var scaleDomain = colorscale.map(function (_a) {
+            var pos = _a[0];
+            return dMin + pos * (dMax - dMin);
+        });
+        var scaleColors = colorscale.map(function (item) { return item[1]; });
+        return (0, d3_scale_1.scaleLinear)().domain(scaleDomain).range(scaleColors);
+    };
     var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
         var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+        var colorScale = undefined;
         input.data.forEach(function (series, index1) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+            if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+                (0, chart_utilities_1.isArrayOrTypedArray)((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+                ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+                typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+                var scale = input.layout.coloraxis.colorscale;
+                var colorValues = (_h = series.marker) === null || _h === void 0 ? void 0 : _h.color;
+                var _t = [
+                    (_k = (_j = input.layout.coloraxis) === null || _j === void 0 ? void 0 : _j.cmin) !== null && _k !== void 0 ? _k : Math.min.apply(Math, colorValues),
+                    (_m = (_l = input.layout.coloraxis) === null || _l === void 0 ? void 0 : _l.cmax) !== null && _m !== void 0 ? _m : Math.max.apply(Math, colorValues),
+                ], dMin = _t[0], dMax = _t[1];
+                colorScale = createColorScale(scale, [dMin, dMax]);
+            }
             // 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);
-            (_e = series.x) === null || _e === void 0 ? void 0 : _e.forEach(function (x, xIndex) {
-                var _a;
-                if ((0, exports.isInvalidValue)(x) || (0, exports.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
+            var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.template) === null || _p === void 0 ? void 0 : _p.layout) === null || _q === void 0 ? void 0 : _q.colorway, colorwayType, (_r = series.marker) === null || _r === void 0 ? void 0 : _r.color, colorMap, isDarkTheme);
+            (_s = series.x) === null || _s === void 0 ? void 0 : _s.forEach(function (x, xIndex) {
+                var _a, _b, _c, _d;
+                if ((0, chart_utilities_1.isInvalidValue)(x) || (0, chart_utilities_1.isInvalidValue)((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                     return;
                 }
                 if (!mapXToDataPoints[x]) {
@@ -283,8 +306,10 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                 }
                 if (series.type === 'bar') {
                     var legend = legends[index1];
-                    // resolve color for each legend's bars from the extracted colors
-                    var color = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
+                    // 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[xIndex] : 0)
+                        : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].series.push({
                         key: legend,
                         data: series.y[xIndex],
@@ -315,7 +340,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             var yValues = [];
             series.x.forEach(function (xVal, index) {
                 var yVal = (0, exports.getNumberAtIndexOrDefault)(series.y, index);
-                if ((0, exports.isInvalidValue)(xVal) || (0, exports.isInvalidValue)(yVal)) {
+                if ((0, chart_utilities_1.isInvalidValue)(xVal) || (0, chart_utilities_1.isInvalidValue)(yVal)) {
                     return;
                 }
                 xValues.push(xVal);
@@ -446,7 +471,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             return series.y
                 .map(function (yValue, i) {
                 var _a;
-                if ((0, exports.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, exports.isInvalidValue)(yValue)) {
+                if ((0, chart_utilities_1.isInvalidValue)((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || (0, chart_utilities_1.isInvalidValue)(yValue)) {
                     return null;
                 }
                 return {
@@ -504,7 +529,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             (_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, exports.isInvalidValue)(xVal) || (0, exports.isInvalidValue)((_a = firstData.y) === null || _a === void 0 ? void 0 : _a[index]) || (0, exports.isInvalidValue)(zVal)) {
+                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)) {
                     return;
                 }
                 xValues_1.push(xVal);
@@ -628,7 +653,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var validLinks = ((_a = link === null || link === void 0 ? void 0 : link.value) !== null && _a !== void 0 ? _a : [])
             .map(function (val, index) {
             var _a, _b;
-            if ((0, exports.isInvalidValue)(val) || (0, exports.isInvalidValue)((_a = link === null || link === void 0 ? void 0 : link.source) === null || _a === void 0 ? void 0 : _a[index]) || (0, exports.isInvalidValue)((_b = link === null || link === void 0 ? void 0 : link.target) === null || _b === void 0 ? void 0 : _b[index])) {
+            if ((0, chart_utilities_1.isInvalidValue)(val) || (0, chart_utilities_1.isInvalidValue)((_a = link === null || link === void 0 ? void 0 : link.source) === null || _a === void 0 ? void 0 : _a[index]) || (0, chart_utilities_1.isInvalidValue)((_b = link === null || link === void 0 ? void 0 : link.target) === null || _b === void 0 ? void 0 : _b[index])) {
                 return null;
             }
             return {
@@ -747,37 +772,132 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             .replace(/\$[^$]*\$/g, '$')
             .trim();
     };
+    var formatValue = function (value, colIndex, cells) {
+        if (value === null || typeof value === 'boolean') {
+            return value;
+        }
+        var formatStr = Array.isArray(cells.format) ? cells.format[colIndex] : cells.format;
+        var prefix = Array.isArray(cells.prefix) ? cells.prefix[colIndex] : cells.prefix;
+        var suffix = Array.isArray(cells.suffix) ? cells.suffix[colIndex] : cells.suffix;
+        var formatted = value;
+        if (typeof value === 'number') {
+            if (typeof formatStr === 'string') {
+                try {
+                    formatted = (0, d3_format_1.format)(formatStr)(value);
+                }
+                catch (_a) {
+                    formatted = (0, utilities_1.formatValueLimitWidth)(value);
+                }
+            }
+            else {
+                formatted = (0, utilities_1.formatValueLimitWidth)(value);
+            }
+        }
+        return "".concat(prefix !== null && prefix !== void 0 ? prefix : '').concat(formatted).concat(suffix !== null && suffix !== void 0 ? suffix : '');
+    };
     var transformPlotlyJsonToChartTableProps = function (input, colorMap, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         var tableData = input.data[0];
-        var normalizeHeaders = function (values) {
-            // Case: values is array of arrays
-            if (Array.isArray(values[0])) {
-                return values.map(function (row) {
+        var normalizeHeaders = function (values, header) {
+            var cleanedValues = Array.isArray(values[0])
+                ? values.map(function (row) {
                     return row
                         .map(function (cell) { return cleanText(cell); })
                         .filter(Boolean)
                         .join(' ');
-                });
-            }
-            // Case: values is 1d array
-            return values.map(function (cell) { return cleanText(cell); });
+                })
+                : values.map(function (cell) { return cleanText(cell); });
+            return cleanedValues.map(function (value, colIndex) {
+                var _a, _b, _c;
+                var fontColorRaw = (_a = header === null || header === void 0 ? void 0 : header.font) === null || _a === void 0 ? void 0 : _a.color;
+                var fontColor;
+                if (Array.isArray(fontColorRaw)) {
+                    var colorEntry = fontColorRaw[colIndex];
+                    if (Array.isArray(colorEntry)) {
+                        fontColor = typeof colorEntry[0] === 'string' ? colorEntry[0] : undefined;
+                    }
+                    else if (typeof colorEntry === 'string') {
+                        fontColor = colorEntry;
+                    }
+                }
+                else if (typeof fontColorRaw === 'string') {
+                    fontColor = fontColorRaw;
+                }
+                var fontSizeRaw = (_b = header === null || header === void 0 ? void 0 : header.font) === null || _b === void 0 ? void 0 : _b.size;
+                var fontSize;
+                if (Array.isArray(fontSizeRaw)) {
+                    fontSize = Array.isArray(fontSizeRaw[0]) ? fontSizeRaw[0][colIndex] : fontSizeRaw[colIndex];
+                }
+                else if (typeof fontSizeRaw === 'number') {
+                    fontSize = fontSizeRaw;
+                }
+                var updatedColIndex = colIndex >= 1 ? 1 : 0;
+                var fillColorRaw = (_c = header === null || header === void 0 ? void 0 : header.fill) === null || _c === void 0 ? void 0 : _c.color;
+                var backgroundColor = Array.isArray(fillColorRaw) ? fillColorRaw[updatedColIndex] : fillColorRaw;
+                var textAlignRaw = header === null || header === void 0 ? void 0 : header.align;
+                var textAlign = Array.isArray(textAlignRaw) ? textAlignRaw[colIndex] : textAlignRaw;
+                var style = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (typeof fontColor === 'string' ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (typeof backgroundColor === 'string' ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
+                return { value: value, style: style };
+            });
         };
         var columns = (_b = (_a = tableData.cells) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
+        var cells = tableData.cells.font ? tableData.cells : (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.template) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.table[0].cells;
         var rows = columns[0].map(function (_, rowIndex) {
-            return columns.map(function (col) {
-                var cell = col[rowIndex];
-                return typeof cell === 'string' ? cleanText(cell) : cell;
+            return columns.map(function (col, colIndex) {
+                var _a, _b, _c;
+                var cellValue = col[rowIndex];
+                var cleanValue = typeof cellValue === 'string' ? cleanText(cellValue) : cellValue;
+                var formattedValue = typeof cleanValue === 'string' || typeof cleanValue === 'number'
+                    ? formatValue(cleanValue, colIndex, cells)
+                    : cleanValue;
+                var rawFontColor = (_a = cells === null || cells === void 0 ? void 0 : cells.font) === null || _a === void 0 ? void 0 : _a.color;
+                var fontColor;
+                if (Array.isArray(rawFontColor)) {
+                    var entry = rawFontColor[colIndex];
+                    var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                    fontColor = typeof colorValue === 'string' ? colorValue : undefined;
+                }
+                else if (typeof rawFontColor === 'string') {
+                    fontColor = rawFontColor;
+                }
+                var rawFontSize = (_b = cells === null || cells === void 0 ? void 0 : cells.font) === null || _b === void 0 ? void 0 : _b.size;
+                var fontSize;
+                if (Array.isArray(rawFontSize)) {
+                    var entry = rawFontSize[colIndex];
+                    var fontSizeValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                    fontSize = typeof fontSizeValue === 'number' ? fontSizeValue : undefined;
+                }
+                else if (typeof rawFontSize === 'number') {
+                    fontSize = rawFontSize;
+                }
+                var updatedColIndex = colIndex >= 1 ? 1 : 0;
+                var rawBackgroundColor = (_c = cells === null || cells === void 0 ? void 0 : cells.fill) === null || _c === void 0 ? void 0 : _c.color;
+                var backgroundColor;
+                if (Array.isArray(rawBackgroundColor)) {
+                    var entry = rawBackgroundColor[updatedColIndex];
+                    var colorValue = Array.isArray(entry) ? entry[rowIndex] : entry;
+                    backgroundColor = typeof colorValue === 'string' ? colorValue : undefined;
+                }
+                else if (typeof rawBackgroundColor === 'string') {
+                    backgroundColor = rawBackgroundColor;
+                }
+                var rawTextAlign = Array.isArray(cells === null || cells === void 0 ? void 0 : cells.align) ? cells.align[colIndex] : cells === null || cells === void 0 ? void 0 : cells.align;
+                var textAlign = rawTextAlign;
+                var style = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, (fontColor ? { color: fontColor } : {})), (typeof fontSize === 'number' ? { fontSize: fontSize } : {})), (backgroundColor ? { backgroundColor: backgroundColor } : {})), (textAlign ? { textAlign: textAlign } : {}));
+                return {
+                    value: formattedValue,
+                    style: style,
+                };
             });
         });
         var styles = {
-            root: tslib_1.__assign({}, (((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.font) === null || _d === void 0 ? void 0 : _d.size) ? { fontSize: input.layout.font.size } : {})),
+            root: tslib_1.__assign({}, (((_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.font) === null || _g === void 0 ? void 0 : _g.size) ? { fontSize: input.layout.font.size } : {})),
         };
         return {
-            headers: normalizeHeaders((_f = (_e = tableData.header) === null || _e === void 0 ? void 0 : _e.values) !== null && _f !== void 0 ? _f : []),
+            headers: normalizeHeaders((_j = (_h = tableData.header) === null || _h === void 0 ? void 0 : _h.values) !== null && _j !== void 0 ? _j : [], ((_k = tableData.header) === null || _k === void 0 ? void 0 : _k.font) ? tableData.header : (_o = (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.template) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.table[0].header),
             rows: rows,
-            width: (_g = input.layout) === null || _g === void 0 ? void 0 : _g.width,
-            height: (_h = input.layout) === null || _h === void 0 ? void 0 : _h.height,
+            width: (_p = input.layout) === null || _p === void 0 ? void 0 : _p.width,
+            height: (_q = input.layout) === null || _q === void 0 ? void 0 : _q.height,
             styles: styles,
         };
     };
@@ -790,7 +910,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             series.x = [];
             series.y = [];
             for (var ptindex = 0; ptindex < ((_b = (_a = series.r) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0); ptindex++) {
-                if ((0, exports.isInvalidValue)((_c = series.theta) === null || _c === void 0 ? void 0 : _c[ptindex]) || (0, exports.isInvalidValue)((_d = series.r) === null || _d === void 0 ? void 0 : _d[ptindex])) {
+                if ((0, chart_utilities_1.isInvalidValue)((_c = series.theta) === null || _c === void 0 ? void 0 : _c[ptindex]) || (0, chart_utilities_1.isInvalidValue)((_d = series.r) === null || _d === void 0 ? void 0 : _d[ptindex])) {
                     continue;
                 }
                 var thetaRad = (series.theta[ptindex] * Math.PI) / 180;
@@ -996,11 +1116,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false || ((layout === null || layout === void 0 ? void 0 : layout.showlegend) !== true && legends.length < 2) ? true : hideLegends,
         };
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var isInvalidValue = function (value) {
-        return typeof value === 'undefined' || value === null || (typeof value === 'number' && !isFinite(value));
-    };
-    exports.isInvalidValue = isInvalidValue;
     var getNumberAtIndexOrDefault = function (data, index) {
         if ((0, chart_utilities_1.isArrayOrTypedArray)(data)) {
             if (typeof data[index] !== 'number' || !isFinite(data[index])) {
@@ -1019,7 +1134,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var start = 0;
         var end = 0;
         for (; end < series.x.length; end++) {
-            if ((0, exports.isInvalidValue)(series.x[end]) || (0, exports.isInvalidValue)(series.y[end])) {
+            if ((0, chart_utilities_1.isInvalidValue)(series.x[end]) || (0, chart_utilities_1.isInvalidValue)(series.y[end])) {
                 if (end - start > 0) {
                     ranges.push([start, end]);
                 }