@fluentui/react-charting 5.24.3 → 5.24.4

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -7,7 +7,8 @@ import { GaugeChartVariant } from '../GaugeChart/index';
 import { findNumericMinMaxOfY, formatScientificLimitWidth, MIN_DONUT_RADIUS } from '../../utilities/utilities';
 import { isArrayOrTypedArray, isDate, isDateArray, isNumberArray, isStringArray, isYearArray, isInvalidValue, } from '@fluentui/chart-utilities';
 import { curveCardinal as d3CurveCardinal } from 'd3-shape';
-import { extractColor, resolveColor } from './PlotlyColorAdapter';
+import { getOpacity, extractColor, resolveColor } from './PlotlyColorAdapter';
+import { rgb } from 'd3-color';
 var dashOptions = {
     dot: {
         strokeDasharray: '1, 5',
@@ -242,7 +243,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
             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: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -257,12 +258,13 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
                         ? (_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)
                     : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
+                var opacity = getOpacity(series, index2);
                 var yVal = rangeYValues[index2];
                 if (series.type === 'bar') {
                     mapXToDataPoints[x].chartData.push({
                         legend: legend,
                         data: yVal,
-                        color: color,
+                        color: (_e = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _e !== void 0 ? _e : color,
                     });
                     if (typeof yVal === 'number') {
                         yMaxValue = Math.max(yMaxValue, yVal);
@@ -276,7 +278,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
                         legend: legend + (validXYRanges.length > 1 ? ".".concat(rangeIdx + 1) : ''),
                         legendShape: legendShape,
                         y: yVal,
-                        color: lineColor,
+                        color: (_f = rgb(lineColor).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                         lineOptions: __assign(__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                         useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                     });
@@ -289,7 +291,7 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
         });
     });
     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, 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 __assign(__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, 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));
 };
 var createColorScale = function (layout, series) {
     var _a, _b, _c, _d, _e, _f;
@@ -324,7 +326,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
         // extract colors for each series only once
         var extractedColors = 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 (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                 return;
             }
@@ -338,12 +340,13 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
                     ? colorScale(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)
-                    : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
+                    : resolveColor(extractedColors, xIndex, legend, colorMap, isDarkTheme);
+                var opacity = getOpacity(series, xIndex);
                 mapXToDataPoints[x].series.push({
                     key: legend,
                     data: series.y[xIndex],
                     xAxisCalloutData: x,
-                    color: color,
+                    color: (_f = rgb(color).copy({ opacity: opacity }).formatHex8()) !== null && _f !== void 0 ? _f : color,
                     legend: legend,
                     useSecondaryYScale: usesSecondaryYScale(series, input.layout),
                 });
@@ -351,7 +354,7 @@ export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorM
         });
     });
     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, roundCorners: true });
+    return __assign(__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, roundCorners: true }), getAxisCategoryOrderProps(input.data, input.layout));
 };
 export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
@@ -399,7 +402,7 @@ export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMa
             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
@@ -407,27 +410,15 @@ export var transformPlotlyJsonToVBCProps = function (input, isMultiPlot, colorMa
                     ? (_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)
                 : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+            var opacity = getOpacity(series, index);
             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
+            vbcData.push(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: (_e = 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 __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));
 };
 export var transformPlotlyJsonToAreaChartProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'area', colorMap, colorwayType, isDarkTheme);
@@ -441,6 +432,7 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot
 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',
@@ -470,12 +462,13 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         var legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         var seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
+        var seriesOpacity = getOpacity(series, index);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         var lineOptions = getLineOptions(series.line);
         var legendShape = getLegendShape(series);
         var validXYRanges = 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);
@@ -494,7 +487,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
                             ? { markerSize: series.marker.size }
                             : {})), (textValues ? { text: textValues[i] } : {})));
                 }),
-                color: seriesColor,
+                color: (_c = rgb(seriesColor).copy({ opacity: seriesOpacity }).formatHex8()) !== null && _c !== void 0 ? _c : seriesColor,
                 lineOptions: __assign(__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
                 useSecondaryYScale: usesSecondaryYScale(series, input.layout),
             };
@@ -537,7 +530,7 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
         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 (isInvalidValue((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || isInvalidValue(yValue)) {
                 return null;
             }
@@ -547,19 +540,17 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
                     ? (_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)
                 : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
+            var opacity = getOpacity(series, i);
             return {
                 x: series.x[i],
                 y: yValue,
                 legend: legend,
-                color: color,
+                color: (_f = 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;
@@ -569,24 +560,9 @@ export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, is
     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 __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));
 };
 export var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8;
@@ -701,22 +677,7 @@ export var transformPlotlyJsonToHeatmapProps = function (input, isMultiPlot, col
         ? 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 __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));
 };
 export var transformPlotlyJsonToSankeyProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -1400,4 +1361,44 @@ export var getGridProperties = function (layout, isMultiPlot) {
         layout: reversedGridLayout,
     };
 };
+/**
+ * @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 (!isInvalidValue(val)) {
+                    values.push(val);
+                }
+            });
+        });
+        var isAxisTypeCategory = (ax === null || ax === void 0 ? void 0 : ax.type) === 'category' || (isStringArray(values) && !isNumberArray(values) && !isDateArray(values));
+        if (!isAxisTypeCategory) {
+            return;
+        }
+        var isValidArray = 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