@fluentui/react-charting 5.23.86 → 5.23.88

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"], 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) {
+define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/colors", "../GaugeChart/index", "../../utilities/utilities", "@fluentui/chart-utilities", "d3-time-format", "d3-shape", "d3-color"], 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, d3_color_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports.getColor = exports.correctYearMonth = exports.isMonthArray = void 0;
+    exports.findArrayAttributes = exports.projectPolarToCartesian = exports.transformPlotlyJsonToGaugeProps = exports.transformPlotlyJsonToSankeyProps = exports.transformPlotlyJsonToHeatmapProps = exports.transformPlotlyJsonToHorizontalBarWithAxisProps = exports.transformPlotlyJsonToScatterChartProps = exports.transformPlotlyJsonToVBCProps = exports.transformPlotlyJsonToGVBCProps = exports.transformPlotlyJsonToVSBCProps = exports.transformPlotlyJsonToDonutProps = exports._resolveColor = exports._extractColor = exports.getSchemaColors = exports.getColor = exports.correctYearMonth = exports.isMonthArray = void 0;
     var dashOptions = {
         dot: {
             strokeDasharray: '1, 5',
@@ -137,13 +137,59 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             },
         };
     };
-    var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTheme) {
-        var _a, _b, _c, _d, _e, _f, _g;
+    var getSchemaColors = function (colors, colorMap, isDarkTheme) {
+        var hexColors = [];
+        if (!colors) {
+            return undefined;
+        }
+        if ((0, chart_utilities_1.isArrayOrTypedArray)(colors)) {
+            colors.forEach(function (element, index) {
+                var colorString = element === null || element === void 0 ? void 0 : element.toString().trim();
+                var nextFluentColor = (0, exports.getColor)("Label_".concat(index), colorMap, isDarkTheme);
+                if (colorString) {
+                    var parsedColor = (0, d3_color_1.color)(colorString);
+                    hexColors.push(parsedColor ? parsedColor.formatHex() : nextFluentColor);
+                }
+                else {
+                    hexColors.push(nextFluentColor);
+                }
+            });
+        }
+        else if (typeof colors === 'string') {
+            var parsedColor = (0, d3_color_1.color)(colors);
+            return parsedColor ? parsedColor.formatHex() : (0, exports.getColor)('Label_0', colorMap, isDarkTheme);
+        }
+        return hexColors;
+    };
+    exports.getSchemaColors = getSchemaColors;
+    var _extractColor = function (useFluentVizColorPalette, colors, colorMap, isDarkTheme) {
+        return !useFluentVizColorPalette && colors ? (0, exports.getSchemaColors)(colors, colorMap, isDarkTheme) : undefined;
+    };
+    exports._extractColor = _extractColor;
+    var _resolveColor = function (extractedColors, index, legend, colorMap, isDarkTheme) {
+        var color = '';
+        if (extractedColors && (0, chart_utilities_1.isArrayOrTypedArray)(extractedColors) && extractedColors[index]) {
+            color = extractedColors[index % extractedColors.length];
+        }
+        else if (typeof extractedColors === 'string') {
+            color = extractedColors;
+        }
+        else {
+            color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+        }
+        return color;
+    };
+    exports._resolveColor = _resolveColor;
+    var transformPlotlyJsonToDonutProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         var firstData = input.data[0];
+        // extract colors for each series only once
+        var colors = (0, exports._extractColor)(useFluentVizColorPalette, (_a = firstData === null || firstData === void 0 ? void 0 : firstData.marker) === null || _a === void 0 ? void 0 : _a.colors, colorMap, isDarkTheme);
         var mapLegendToDataPoint = {};
-        (_a = firstData.labels) === null || _a === void 0 ? void 0 : _a.forEach(function (label, index) {
+        (_b = firstData.labels) === null || _b === void 0 ? void 0 : _b.forEach(function (label, index) {
             var _a;
-            var color = (0, exports.getColor)(label, colorMap, isDarkTheme);
+            // resolve color for each legend from the extracted colors
+            var color = (0, exports._resolveColor)(colors, index, label, colorMap, isDarkTheme);
             //ToDo how to handle string data?
             var value = typeof ((_a = firstData.values) === null || _a === void 0 ? void 0 : _a[index]) === 'number' ? firstData.values[index] : 1;
             if (!mapLegendToDataPoint[label]) {
@@ -157,8 +203,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                 mapLegendToDataPoint[label].data += value;
             }
         });
-        var width = (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width) !== null && _c !== void 0 ? _c : 440;
-        var height = (_e = (_d = input.layout) === null || _d === void 0 ? void 0 : _d.height) !== null && _e !== void 0 ? _e : 220;
+        var width = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.width) !== null && _d !== void 0 ? _d : 440;
+        var height = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 220;
         var hideLabels = firstData.textinfo
             ? !['value', 'percent', 'label+percent'].includes(firstData.textinfo)
             : false;
@@ -173,8 +219,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                 chartTitle: chartTitle,
                 chartData: Object.values(mapLegendToDataPoint),
             },
-            hideLegend: ((_f = input.layout) === null || _f === void 0 ? void 0 : _f.showlegend) === false ? true : false,
-            width: (_g = input.layout) === null || _g === void 0 ? void 0 : _g.width,
+            hideLegend: ((_g = input.layout) === null || _g === void 0 ? void 0 : _g.showlegend) === false ? true : false,
+            width: (_h = input.layout) === null || _h === void 0 ? void 0 : _h.width,
             height: height,
             innerRadius: innerRadius,
             hideLabels: hideLabels,
@@ -182,24 +228,29 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         };
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
-    var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkTheme, fallbackVSBC) {
+    var transformPlotlyJsonToVSBCProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme, fallbackVSBC) {
         var _a, _b, _c;
         var mapXToDataPoints = {};
         var yMaxValue = 0;
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
         var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
         input.data.forEach(function (series, index1) {
-            var _a;
+            var _a, _b, _c;
             var isXYearCategory = (0, chart_utilities_1.isYearArray)(series.x); // Consider year as categorical not numeric continuous axis
-            (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, index2) {
+            // extract bar colors for each series only once
+            var extractedBarColors = (0, exports._extractColor)(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
+            // extract line colors for each series only once
+            var extractedLineColors = (0, exports._extractColor)(useFluentVizColorPalette, (_b = series.line) === null || _b === void 0 ? void 0 : _b.color, colorMap, isDarkTheme);
+            (_c = series.x) === null || _c === void 0 ? void 0 : _c.forEach(function (x, index2) {
                 var _a, _b, _c;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
                 }
                 var legend = legends[index1];
+                // resolve color for each legend's bars from the extracted colors
+                var color = (0, exports._resolveColor)(extractedBarColors, index1, legend, colorMap, isDarkTheme);
                 var yVal = (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[index2]) !== null && _b !== void 0 ? _b : 0;
                 if (series.type === 'bar') {
-                    var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].chartData.push({
                         legend: legend,
                         data: yVal,
@@ -208,11 +259,11 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
                     yMaxValue = Math.max(yMaxValue, yVal);
                 }
                 else if (series.type === 'scatter' || !!fallbackVSBC) {
-                    var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+                    var lineColor = (0, exports._resolveColor)(extractedLineColors, index1, legend, colorMap, isDarkTheme);
                     var lineOptions = getLineOptions(series.line);
                     var dashType = ((_c = series.line) === null || _c === void 0 ? void 0 : _c.dash) || 'solid';
                     var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
-                    mapXToDataPoints[x].lineData.push(tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, y: yVal, color: color }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
+                    mapXToDataPoints[x].lineData.push(tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, y: yVal, color: lineColor }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
                     if (!usesSecondaryYScale(series)) {
                         yMaxValue = Math.max(yMaxValue, yVal);
                     }
@@ -223,21 +274,24 @@ 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, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend });
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
-    var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToGVBCProps = function (input, colorMap, useFluentVizColorPalette, 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;
         input.data.forEach(function (series, index1) {
-            var _a;
-            (_a = series.x) === null || _a === void 0 ? void 0 : _a.forEach(function (x, xIndex) {
+            var _a, _b;
+            // extract colors for each series only once
+            var extractedColors = (0, exports._extractColor)(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
+            (_b = series.x) === null || _b === void 0 ? void 0 : _b.forEach(function (x, xIndex) {
                 var _a, _b;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = { name: x.toString(), series: [] };
                 }
                 if (series.type === 'bar') {
                     var legend = legends[index1];
-                    var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+                    // resolve color for each legend's bars from the extracted colors
+                    var color = (0, exports._resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
                     mapXToDataPoints[x].series.push({
                         key: legend,
                         data: (_b = (_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex]) !== null && _b !== void 0 ? _b : 0,
@@ -253,19 +307,21 @@ 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', chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend });
     };
     exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
-    var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToVBCProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
         var _a, _b, _c;
         var vbcData = [];
         var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
         input.data.forEach(function (series, seriesIdx) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (!series.x) {
                 return;
             }
+            // extract colors for each series only once
+            var extractedColors = (0, exports._extractColor)(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
             var isXString = isStringArray(series.x);
             // TODO: In case of a single bin, add an empty bin of the same size to prevent the
             // default bar width from being used and ensure the bar spans the full intended range.
-            var xBins = createBins(series.x, (_a = series.xbins) === null || _a === void 0 ? void 0 : _a.start, (_b = series.xbins) === null || _b === void 0 ? void 0 : _b.end, (_c = series.xbins) === null || _c === void 0 ? void 0 : _c.size);
+            var xBins = createBins(series.x, (_b = series.xbins) === null || _b === void 0 ? void 0 : _b.start, (_c = series.xbins) === null || _c === void 0 ? void 0 : _c.end, (_d = series.xbins) === null || _d === void 0 ? void 0 : _d.size);
             var yBins = xBins.map(function () { return []; });
             var total = 0;
             series.x.forEach(function (xVal, index) {
@@ -282,7 +338,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             });
             xBins.forEach(function (bin, index) {
                 var legend = legends[seriesIdx];
-                var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the extracted colors
+                var color = (0, exports._resolveColor)(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
                 var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
                 vbcData.push(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: color }, (isXString
                     ? {}
@@ -305,22 +362,25 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         };
     };
     exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
-    var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, colorMap, useFluentVizColorPalette, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f;
         var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, isAreaChart ? 0 : undefined, isAreaChart ? 0 : undefined);
         var mode = 'tonexty';
         var _g = getLegendProps(input.data, input.layout), legends = _g.legends, hideLegend = _g.hideLegend;
         var chartData = input.data.map(function (series, index) {
-            var _a;
+            var _a, _b;
+            // extract colors for each series only once
+            var extractedColors = (0, exports._extractColor)(useFluentVizColorPalette, (_a = series.line) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
             var xValues = series.x;
             var isString = typeof xValues[0] === 'string';
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
             var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
             var legend = legends[index];
-            var lineColor = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+            // resolve color for each legend's lines from the extracted colors
+            var lineColor = (0, exports._resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
             mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
             var lineOptions = getLineOptions(series.line);
-            var dashType = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.dash) || 'solid';
+            var dashType = ((_b = series.line) === null || _b === void 0 ? void 0 : _b.dash) || 'solid';
             var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot' ? 'dottedLine' : 'default';
             return tslib_1.__assign(tslib_1.__assign({ legend: legend, legendShape: legendShape, data: xValues.map(function (x, i) {
                     var _a, _b;
@@ -345,13 +405,17 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         }
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
-    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, isDarkTheme) {
+    var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, useFluentVizColorPalette, isDarkTheme) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         var _s = getLegendProps(input.data, input.layout), legends = _s.legends, hideLegend = _s.hideLegend;
         var chartData = input.data
             .map(function (series, index) {
+            var _a;
+            // extract colors for each series only once
+            var extractedColors = (0, exports._extractColor)(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
             var legend = legends[index];
-            var color = (0, exports.getColor)(legend, colorMap, isDarkTheme);
+            // resolve color for each legend's bars from the extracted colors
+            var color = (0, exports._resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
             return series.y.map(function (yValue, i) {
                 return {
                     x: series.x[i],
@@ -391,6 +455,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width,
             hideTickOverlap: true,
             hideLegend: hideLegend,
+            noOfCharsToTruncate: 20,
+            showYAxisLablesTooltip: true,
         };
     };
     exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
@@ -489,6 +555,8 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             width: (_k = input.layout) === null || _k === void 0 ? void 0 : _k.width,
             height: (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.height) !== null && _m !== void 0 ? _m : 350,
             hideTickOverlap: true,
+            noOfCharsToTruncate: 20,
+            showYAxisLablesTooltip: true,
         };
     };
     exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
@@ -501,7 +569,6 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
             source: link === null || link === void 0 ? void 0 : link.source[index],
             target: link === null || link === void 0 ? void 0 : link.target[index],
         }); })
-            // eslint-disable-next-line @typescript-eslint/no-shadow
             // Filter out negative nodes, unequal nodes and self-references (circular links)
             .filter(function (x) { return x.source >= 0 && x.target >= 0 && x.source !== x.target; });
         var sankeyChartData = {
@@ -794,7 +861,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "../../utilities/
         var hideLegends = data.every(function (series) { return series.showlegend === false; });
         return {
             legends: legends,
-            hideLegend: (layout === null || layout === void 0 ? void 0 : layout.showlegend) === false ? true : hideLegends,
+            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,
         };
     };
 });