@fluentui/react-charting 5.24.3 → 5.24.4

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

@@ -11,6 +11,7 @@ var utilities_1 = require("../../utilities/utilities");
 var chart_utilities_1 = require("@fluentui/chart-utilities");
 var d3_shape_1 = require("d3-shape");
 var PlotlyColorAdapter_1 = require("./PlotlyColorAdapter");
+var d3_color_1 = require("d3-color");
 var dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -249,7 +250,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
             var rangeXValues = series.x.slice(rangeStart, rangeEnd);
             var rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach(function (x, index2) {
-                var _a, _b, _c, _d;
+                var _a, _b, _c, _d, _e, _f;
                 if (!mapXToDataPoints[x]) {
                     mapXToDataPoints[x] = {
                         xAxisPoint: (0, exports.resolveXAxisPoint)(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -264,12 +265,13 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                         ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index2 % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                         : 0)
                     : (0, PlotlyColorAdapter_1.resolveColor)(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index2);
                 var yVal = rangeYValues[index2];
                 if (series.type === 'bar') {
                     mapXToDataPoints[x].chartData.push({
                         legend: legend,
                         data: yVal,
-                        color: color,
+                        color: (_e = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color,
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -283,7 +285,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
                         legend: legend + (validXYRanges.length > 1 ? ".".concat(rangeIdx + 1) : ''),
                         legendShape: legendShape,
                         y: yVal,
-                        color: lineColor,
+                        color: (_f = (0, d3_color_1.rgb)(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                         lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                         useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                     });
@@ -296,7 +298,7 @@ var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, col
         });
     });
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-    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, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true });
+    return tslib_1.__assign(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, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true }), getAxisCategoryOrderProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
 var createColorScale = function (layout, series) {
@@ -332,7 +334,7 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
         // extract colors for each series only once
         var extractedColors = (0, PlotlyColorAdapter_1.extractColor)((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
         (_m = series.x) === null || _m === void 0 ? void 0 : _m.forEach(function (x, xIndex) {
-            var _a, _b, _c, _d, _e;
+            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])) {
                 return;
             }
@@ -346,12 +348,13 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
                     ? 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 % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
                         : 0)
-                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index1, legend, colorMap, isDarkTheme);
+                    : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, xIndex, legend, colorMap, isDarkTheme);
+                var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, xIndex);
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: series.y[xIndex],
                     xAxisCalloutData: x,
-                    color: color,
+                    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),
                 });
@@ -359,7 +362,7 @@ var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, col
         });
     });
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-    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, roundCorners: true });
+    return tslib_1.__assign(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, roundCorners: true }), getAxisCategoryOrderProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToGVBCProps = transformPlotlyJsonToGVBCProps;
 var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -408,7 +411,7 @@ var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colo
             return yVal;
         });
         xBins.forEach(function (bin, index) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             var legend = legends[seriesIdx];
             // resolve color for each legend's bars from the colorscale or extracted colors
             var color = colorScale
@@ -416,27 +419,15 @@ var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colo
                     ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
                     : 0)
                 : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+            var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index);
             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
+            vbcData.push(tslib_1.__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_e = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color }, (isXString
                 ? {}
                 : { xAxisCalloutData: "[".concat(bin.x0, " - ").concat(bin.x1, ")") })));
         });
     });
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
-    return {
-        data: vbcData,
-        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,
-        supportNegativeData: true,
-        chartTitle: chartTitle,
-        xAxisTitle: xAxisTitle,
-        yAxisTitle: yAxisTitle,
-        mode: 'histogram',
-        hideTickOverlap: true,
-        maxBarWidth: 50,
-        hideLegend: hideLegend,
-        roundCorners: true,
-    };
+    return tslib_1.__assign({ data: vbcData, 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, supportNegativeData: true, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'histogram', hideTickOverlap: true, maxBarWidth: 50, hideLegend: hideLegend, roundCorners: true }, getAxisCategoryOrderProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToVBCProps = transformPlotlyJsonToVBCProps;
 var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -454,6 +445,7 @@ exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterCha
 var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g;
     var isScatterMarkers = [
+        'markers',
         'text+markers',
         'markers+text',
         'lines+markers',
@@ -483,12 +475,13 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         var legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         var seriesColor = (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, index, legend, colorMap, isDarkTheme);
+        var seriesOpacity = (0, PlotlyColorAdapter_1.getOpacity)(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         var lineOptions = getLineOptions(series.line);
         var legendShape = getLegendShape(series);
         var validXYRanges = (0, exports.getValidXYRanges)(series);
         return validXYRanges.map(function (_a, rangeIdx) {
-            var _b;
+            var _b, _c;
             var rangeStart = _a[0], rangeEnd = _a[1];
             var rangeXValues = xValues.slice(rangeStart, rangeEnd);
             var rangeYValues = series.y.slice(rangeStart, rangeEnd);
@@ -507,7 +500,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
                             ? { markerSize: series.marker.size }
                             : {})), (textValues ? { text: textValues[i] } : {})));
                 }),
-                color: seriesColor,
+                color: (_c = (0, d3_color_1.rgb)(seriesColor).copy({ opacity: seriesOpacity }).formatHex8()) !== null && _c !== void 0 ? _c : seriesColor,
                 lineOptions: tslib_1.__assign(tslib_1.__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                 useSecondaryYScale: usesSecondaryYScale(series, input.layout),
             };
@@ -550,7 +543,7 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
         var legend = legends[index];
         return series.y
             .map(function (yValue, i) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             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;
             }
@@ -560,19 +553,17 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
                     ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[i % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
                     : 0)
                 : (0, PlotlyColorAdapter_1.resolveColor)(extractedColors, i, legend, colorMap, isDarkTheme);
+            var opacity = (0, PlotlyColorAdapter_1.getOpacity)(series, i);
             return {
                 x: series.x[i],
                 y: yValue,
                 legend: legend,
-                color: color,
+                color: (_f = (0, d3_color_1.rgb)(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
             };
         })
             .filter(function (point) { return point !== null; });
     })
-        .reverse()
-        .flat()
-        //reversing the order to invert the Y bars order as required by plotly.
-        .reverse();
+        .flat();
     var chartHeight = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.height) !== null && _b !== void 0 ? _b : 450;
     var margin = (_e = (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.margin) === null || _d === void 0 ? void 0 : _d.l) !== null && _e !== void 0 ? _e : 0;
     var padding = (_h = (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.margin) === null || _g === void 0 ? void 0 : _g.pad) !== null && _h !== void 0 ? _h : 0;
@@ -582,24 +573,9 @@ var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, isMultiPl
     var gapFactor = 1 / (1 + scalingFactor * numberOfRows);
     var barHeight = availableHeight / (numberOfRows * (1 + gapFactor));
     var _t = getTitles(input.layout), chartTitle = _t.chartTitle, xAxisTitle = _t.xAxisTitle, yAxisTitle = _t.yAxisTitle;
-    return {
-        data: chartData,
-        chartTitle: chartTitle,
-        xAxisTitle: xAxisTitle,
-        yAxisTitle: yAxisTitle,
-        secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
+    return tslib_1.__assign({ data: chartData, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, secondaryYAxistitle: typeof ((_k = (_j = input.layout) === null || _j === void 0 ? void 0 : _j.yaxis2) === null || _k === void 0 ? void 0 : _k.title) === 'string'
             ? (_m = (_l = input.layout) === null || _l === void 0 ? void 0 : _l.yaxis2) === null || _m === void 0 ? void 0 : _m.title
-            : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '',
-        barHeight: barHeight,
-        showYAxisLables: true,
-        height: chartHeight,
-        width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width,
-        hideTickOverlap: true,
-        hideLegend: hideLegend,
-        noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true,
-        roundCorners: true,
-    };
+            : ((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.yaxis2) === null || _p === void 0 ? void 0 : _p.title) === null || _q === void 0 ? void 0 : _q.text) || '', barHeight: barHeight, showYAxisLables: true, height: chartHeight, width: (_r = input.layout) === null || _r === void 0 ? void 0 : _r.width, hideTickOverlap: true, hideLegend: hideLegend, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, roundCorners: true }, getAxisCategoryOrderProps(input.data, input.layout));
 };
 exports.transformPlotlyJsonToHorizontalBarWithAxisProps = transformPlotlyJsonToHorizontalBarWithAxisProps;
 var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -715,22 +691,7 @@ var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap,
         ? colorscale.map(function (arr) { return arr[1]; })
         : defaultRange;
     var _9 = getTitles(input.layout), chartTitle = _9.chartTitle, xAxisTitle = _9.xAxisTitle, yAxisTitle = _9.yAxisTitle;
-    return {
-        data: [heatmapData],
-        domainValuesForColorScale: domainValuesForColorScale,
-        rangeValuesForColorScale: rangeValuesForColorScale,
-        hideLegend: true,
-        showYAxisLables: true,
-        chartTitle: chartTitle,
-        xAxisTitle: xAxisTitle,
-        yAxisTitle: yAxisTitle,
-        sortOrder: 'none',
-        width: (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.width,
-        height: (_8 = (_7 = input.layout) === null || _7 === void 0 ? void 0 : _7.height) !== null && _8 !== void 0 ? _8 : 350,
-        hideTickOverlap: true,
-        noOfCharsToTruncate: 20,
-        showYAxisLablesTooltip: true,
-    };
+    return tslib_1.__assign({ data: [heatmapData], domainValuesForColorScale: domainValuesForColorScale, rangeValuesForColorScale: rangeValuesForColorScale, hideLegend: true, showYAxisLables: true, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, sortOrder: 'none', width: (_6 = input.layout) === null || _6 === void 0 ? void 0 : _6.width, height: (_8 = (_7 = input.layout) === null || _7 === void 0 ? void 0 : _7.height) !== null && _8 !== void 0 ? _8 : 350, hideTickOverlap: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true }, getAxisCategoryOrderProps([firstData], input.layout));
 };
 exports.transformPlotlyJsonToHeatmapProps = transformPlotlyJsonToHeatmapProps;
 var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -1424,4 +1385,44 @@ var getGridProperties = function (layout, isMultiPlot) {
     };
 };
 exports.getGridProperties = getGridProperties;
+/**
+ * @see {@link https://github.com/plotly/plotly.js/blob/master/src/plots/cartesian/category_order_defaults.js#L50}
+ */
+var getAxisCategoryOrderProps = function (data, layout) {
+    var result = {};
+    var axesById = {
+        x: layout === null || layout === void 0 ? void 0 : layout.xaxis,
+        y: layout === null || layout === void 0 ? void 0 : layout.yaxis,
+    };
+    Object.keys(axesById).forEach(function (axId) {
+        var ax = axesById[axId];
+        var axLetter = axId[0];
+        var propName = "".concat(axLetter, "AxisCategoryOrder");
+        var values = [];
+        data.forEach(function (series) {
+            var _a;
+            (_a = series[axLetter]) === null || _a === void 0 ? void 0 : _a.forEach(function (val) {
+                if (!(0, chart_utilities_1.isInvalidValue)(val)) {
+                    values.push(val);
+                }
+            });
+        });
+        var isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || ((0, chart_utilities_1.isStringArray)(values) && !(0, chart_utilities_1.isNumberArray)(values) && !(0, chart_utilities_1.isDateArray)(values));
+        if (!isAxisTypeCategory) {
+            return;
+        }
+        var isValidArray = (0, chart_utilities_1.isArrayOrTypedArray)(ax === null || ax === void 0 ? void 0 : ax.categoryarray) && ax.categoryarray.length > 0;
+        if (isValidArray && (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'array')) {
+            result[propName] = ax.categoryarray;
+            return;
+        }
+        if (!(ax === null || ax === void 0 ? void 0 : ax.categoryorder) || ax.categoryorder === 'trace' || ax.categoryorder === 'array') {
+            var categoriesInTraceOrder = Array.from(new Set(values));
+            result[propName] = categoriesInTraceOrder;
+            return;
+        }
+        result[propName] = ax.categoryorder;
+    });
+    return result;
+};
 //# sourceMappingURL=PlotlySchemaAdapter.js.map