@fluentui/react-charting 5.24.33 → 5.24.35

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -409,12 +409,12 @@ export var transformPlotlyJsonToDonutProps = function (input, isMultiPlot, color
     };
 };
 export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme, fallbackVSBC) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var mapXToDataPoints = {};
     var yMaxValue = 0;
     var yMinValue = 0;
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
-    var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
+    var _j = getLegendProps(input.data, input.layout, isMultiPlot), legends = _j.legends, hideLegend = _j.hideLegend;
     var colorScale = undefined;
     var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
     input.data.forEach(function (series, index1) {
@@ -485,8 +485,53 @@ export var transformPlotlyJsonToVSBCProps = function (input, isMultiPlot, colorM
             });
         });
     });
+    var xCategories = (_b = (_a = input.data[0]) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : [];
+    ((_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.shapes) !== null && _d !== void 0 ? _d : [])
+        .filter(function (shape) { return shape.type === 'line'; })
+        .forEach(function (shape, shapeIdx) {
+        var _a, _b, _c;
+        var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var resolveX = function (val) {
+            if (typeof val === 'number' && Array.isArray(xCategories) && xCategories[val] !== undefined) {
+                return xCategories[val];
+            }
+            return val;
+        };
+        var x0Key = resolveX(shape.x0);
+        var x1Key = resolveX(shape.x1);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var resolveY = function (val) {
+            if (shape.yref === 'paper') {
+                if (val === 0) {
+                    return yMinValue;
+                }
+                if (val === 1) {
+                    return yMaxValue;
+                }
+                return yMinValue + val * (yMaxValue - yMinValue);
+            }
+            return val;
+        };
+        var y0Val = resolveY(shape.y0);
+        var y1Val = resolveY(shape.y1);
+        mapXToDataPoints[x0Key].lineData.push({
+            legend: "Reference_".concat(shapeIdx),
+            y: y0Val,
+            color: (_b = rgb(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false,
+        });
+        mapXToDataPoints[x1Key].lineData.push({
+            legend: "Reference_".concat(shapeIdx),
+            y: y1Val,
+            color: (_c = rgb(lineColor).formatHex8()) !== null && _c !== void 0 ? _c : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false,
+        });
+    });
     var vsbcData = Object.values(mapXToDataPoints);
-    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: vsbcData, 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, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_d = vsbcData[0]) === null || _d === void 0 ? void 0 : _d.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
+    return __assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign(__assign({ data: vsbcData, width: (_e = input.layout) === null || _e === void 0 ? void 0 : _e.width, height: (_g = (_f = input.layout) === null || _f === void 0 ? void 0 : _f.height) !== null && _g !== void 0 ? _g : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true, wrapXAxisLables: typeof ((_h = vsbcData[0]) === null || _h === void 0 ? void 0 : _h.xAxisPoint) === 'string' }), getTitles(input.layout)), getAxisCategoryOrderProps(input.data, input.layout)), getYMinMaxValues(input.data[0], input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getBarProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
 };
 export var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c;
@@ -654,7 +699,7 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isMultiPlot
     return transformPlotlyJsonToScatterTraceProps(input, isMultiPlot, 'scatter', colorMap, colorwayType, isDarkTheme);
 };
 var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chartType, colorMap, colorwayType, isDarkTheme) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     var isScatterMarkers = [
         'text',
         'markers',
@@ -669,8 +714,9 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     var isScatterChart = chartType === 'scatter';
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     var mode = 'tonexty';
-    var _e = getLegendProps(input.data, input.layout, isMultiPlot), legends = _e.legends, hideLegend = _e.hideLegend;
+    var _g = getLegendProps(input.data, input.layout, isMultiPlot), legends = _g.legends, hideLegend = _g.hideLegend;
     var yAxisTickFormat = getYAxisTickFormat(input.data[0], input.layout);
+    var shouldWrapLabels = false;
     var chartData = input.data
         .map(function (series, index) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -686,6 +732,7 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         var isXDate = isDateArray(xValues);
         var isXNumber = isNumberArray(xValues);
         var isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
+        shouldWrapLabels = shouldWrapLabels || (isXString && !isXDate);
         var legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         var seriesColor = resolveColor(extractedColors, index, legend, colorMap, (_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, isDarkTheme);
@@ -737,6 +784,22 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
         });
     })
         .flat();
+    var lineShape = ((_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.shapes) !== null && _c !== void 0 ? _c : [])
+        .filter(function (shape) { return shape.type === 'line'; })
+        .map(function (shape, shapeIdx) {
+        var _a, _b;
+        var lineColor = (_a = shape.line) === null || _a === void 0 ? void 0 : _a.color;
+        return {
+            legend: "Reference_".concat(shapeIdx),
+            data: [
+                { x: shape.x0, y: shape.y0 },
+                { x: shape.x1, y: shape.y1 },
+            ],
+            color: (_b = rgb(lineColor).formatHex8()) !== null && _b !== void 0 ? _b : lineColor,
+            lineOptions: getLineOptions(shape.line),
+            useSecondaryYScale: false,
+        };
+    });
     var yMinMax = getYMinMaxValues(input.data[0], input.layout);
     if (yMinMax.yMinValue === undefined && yMinMax.yMaxValue === undefined) {
         var yMinMaxValues = findNumericMinMaxOfY(chartData);
@@ -745,12 +808,12 @@ var transformPlotlyJsonToScatterTraceProps = function (input, isMultiPlot, chart
     }
     var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
     var chartProps = {
-        lineChartData: chartData,
+        lineChartData: __spreadArray(__spreadArray([], chartData, true), lineShape, true),
     };
     var scatterChartProps = {
         scatterChartData: chartData,
     };
-    var commonProps = __assign(__assign(__assign(__assign(__assign(__assign(__assign({ supportNegativeData: true }, secondaryYAxisValues), { width: (_b = input.layout) === null || _b === void 0 ? void 0 : _b.width, height: (_d = (_c = input.layout) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 350, hideTickOverlap: true, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000 }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
+    var commonProps = __assign(__assign(__assign(__assign(__assign(__assign(__assign({ supportNegativeData: true }, secondaryYAxisValues), { 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, hideLegend: hideLegend, useUTC: false, optimizeLargeData: numDataPoints > 1000, shouldWrapLabels: shouldWrapLabels }), getTitles(input.layout)), getXAxisTickFormat(input.data[0], input.layout)), yAxisTickFormat), getAxisScaleTypeProps(input.data, input.layout)), getAxisTickProps(input.data, input.layout));
     if (isAreaChart) {
         return __assign({ data: chartProps, mode: mode }, commonProps);
     }