@fluentui/react-charting 5.23.86 → 5.23.88

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -7,6 +7,7 @@ import { findNumericMinMaxOfY } from '../../utilities/utilities';
 import { isArrayOfType, isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isYearArray, } from '@fluentui/chart-utilities';
 import { timeParse } from 'd3-time-format';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
+import { color as d3Color } from 'd3-color';
 var dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -139,13 +140,56 @@ var getSecondaryYAxisValues = function (data, layout, maxAllowedMinY, minAllowed
         },
     };
 };
-export var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTheme) {
-    var _a, _b, _c, _d, _e, _f, _g;
+export var getSchemaColors = function (colors, colorMap, isDarkTheme) {
+    var hexColors = [];
+    if (!colors) {
+        return undefined;
+    }
+    if (isArrayOrTypedArray(colors)) {
+        colors.forEach(function (element, index) {
+            var colorString = element === null || element === void 0 ? void 0 : element.toString().trim();
+            var nextFluentColor = getColor("Label_".concat(index), colorMap, isDarkTheme);
+            if (colorString) {
+                var parsedColor = d3Color(colorString);
+                hexColors.push(parsedColor ? parsedColor.formatHex() : nextFluentColor);
+            }
+            else {
+                hexColors.push(nextFluentColor);
+            }
+        });
+    }
+    else if (typeof colors === 'string') {
+        var parsedColor = d3Color(colors);
+        return parsedColor ? parsedColor.formatHex() : getColor('Label_0', colorMap, isDarkTheme);
+    }
+    return hexColors;
+};
+export var _extractColor = function (useFluentVizColorPalette, colors, colorMap, isDarkTheme) {
+    return !useFluentVizColorPalette && colors ? getSchemaColors(colors, colorMap, isDarkTheme) : undefined;
+};
+export var _resolveColor = function (extractedColors, index, legend, colorMap, isDarkTheme) {
+    var color = '';
+    if (extractedColors && isArrayOrTypedArray(extractedColors) && extractedColors[index]) {
+        color = extractedColors[index % extractedColors.length];
+    }
+    else if (typeof extractedColors === 'string') {
+        color = extractedColors;
+    }
+    else {
+        color = getColor(legend, colorMap, isDarkTheme);
+    }
+    return color;
+};
+export 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 = _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 = getColor(label, colorMap, isDarkTheme);
+        // resolve color for each legend from the extracted colors
+        var color = _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]) {
@@ -159,8 +203,8 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTh
             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;
@@ -175,32 +219,37 @@ export var transformPlotlyJsonToDonutProps = function (input, colorMap, isDarkTh
             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,
         showLabelsInPercent: firstData.textinfo ? ['percent', 'label+percent'].includes(firstData.textinfo) : true,
     };
 };
-export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkTheme, fallbackVSBC) {
+export 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 = 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 = _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 = _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 = _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 = getColor(legend, colorMap, isDarkTheme);
                 mapXToDataPoints[x].chartData.push({
                     legend: legend,
                     data: yVal,
@@ -209,11 +258,11 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkThe
                 yMaxValue = Math.max(yMaxValue, yVal);
             }
             else if (series.type === 'scatter' || !!fallbackVSBC) {
-                var color = getColor(legend, colorMap, isDarkTheme);
+                var lineColor = _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(__assign(__assign({ legend: legend, legendShape: legendShape, y: yVal, color: color }, (lineOptions ? { lineOptions: lineOptions } : {})), { useSecondaryYScale: usesSecondaryYScale(series) }));
+                mapXToDataPoints[x].lineData.push(__assign(__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 +272,24 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, isDarkThe
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
     return __assign(__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 });
 };
-export var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkTheme) {
+export 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 = _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 = getColor(legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the extracted colors
+                var color = _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,
@@ -252,19 +304,21 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, isDarkThe
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
     return __assign(__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 });
 };
-export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkTheme) {
+export 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 = _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) {
@@ -281,7 +335,8 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkThem
         });
         xBins.forEach(function (bin, index) {
             var legend = legends[seriesIdx];
-            var color = getColor(legend, colorMap, isDarkTheme);
+            // resolve color for each legend's bars from the extracted colors
+            var color = _resolveColor(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
             var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: color }, (isXString
                 ? {}
@@ -303,22 +358,25 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, isDarkThem
         hideLegend: hideLegend,
     };
 };
-export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart, colorMap, isDarkTheme) {
+export 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 = _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 = isDateArray(xValues);
         var isXNumber = isNumberArray(xValues);
         var legend = legends[index];
-        var lineColor = getColor(legend, colorMap, isDarkTheme);
+        // resolve color for each legend's lines from the extracted colors
+        var lineColor = _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 __assign(__assign({ legend: legend, legendShape: legendShape, data: xValues.map(function (x, i) {
                 var _a, _b;
@@ -342,13 +400,17 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
         return __assign(__assign({ data: chartProps, supportNegativeData: true, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle }, secondaryYAxisValues), { roundedTicks: true, yMinValue: yMinMaxValues.startValue, yMaxValue: yMinMaxValues.endValue, width: (_d = input.layout) === null || _d === void 0 ? void 0 : _d.width, height: (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.height) !== null && _f !== void 0 ? _f : 350, hideTickOverlap: true, enableReflow: false, hideLegend: hideLegend, useUTC: false });
     }
 };
-export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, isDarkTheme) {
+export 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 = _extractColor(useFluentVizColorPalette, (_a = series.marker) === null || _a === void 0 ? void 0 : _a.color, colorMap, isDarkTheme);
         var legend = legends[index];
-        var color = getColor(legend, colorMap, isDarkTheme);
+        // resolve color for each legend's bars from the extracted colors
+        var color = _resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         return series.y.map(function (yValue, i) {
             return {
                 x: series.x[i],
@@ -388,6 +450,8 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, co
         width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width,
         hideTickOverlap: true,
         hideLegend: hideLegend,
+        noOfCharsToTruncate: 20,
+        showYAxisLablesTooltip: true,
     };
 };
 export var transformPlotlyJsonToHeatmapProps = function (input) {
@@ -485,6 +549,8 @@ export var transformPlotlyJsonToHeatmapProps = function (input) {
         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,
     };
 };
 export var transformPlotlyJsonToSankeyProps = function (input, colorMap, isDarkTheme) {
@@ -496,7 +562,6 @@ export var transformPlotlyJsonToSankeyProps = function (input, colorMap, isDarkT
         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 = {
@@ -785,7 +850,7 @@ var getLegendProps = function (data, layout) {
     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,
     };
 };
 //# sourceMappingURL=PlotlySchemaAdapter.js.map