@fluentui/react-charting 5.24.33 → 5.24.35

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

@@ -407,12 +407,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     };
     exports.transformPlotlyJsonToDonutProps = transformPlotlyJsonToDonutProps;
     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) {
@@ -483,8 +483,53 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
                 });
             });
         });
+        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 = (0, d3_color_1.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 = (0, d3_color_1.rgb)(lineColor).formatHex8()) !== null && _c !== void 0 ? _c : lineColor,
+                lineOptions: getLineOptions(shape.line),
+                useSecondaryYScale: false,
+            });
+        });
         var vsbcData = Object.values(mapXToDataPoints);
-        return tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__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 tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__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));
     };
     exports.transformPlotlyJsonToVSBCProps = transformPlotlyJsonToVSBCProps;
     var transformPlotlyJsonToGVBCProps = function (input, isMultiPlot, colorMap, colorwayType, isDarkTheme) {
@@ -658,7 +703,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
     };
     exports.transformPlotlyJsonToScatterChartProps = transformPlotlyJsonToScatterChartProps;
     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',
@@ -673,8 +718,9 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         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;
@@ -690,6 +736,7 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             var isXDate = (0, chart_utilities_1.isDateArray)(xValues);
             var isXNumber = (0, chart_utilities_1.isNumberArray)(xValues);
             var isXYearCategory = (0, chart_utilities_1.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 = (0, PlotlyColorAdapter_1.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);
@@ -741,6 +788,22 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
             });
         })
             .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 = (0, d3_color_1.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 = (0, utilities_1.findNumericMinMaxOfY)(chartData);
@@ -749,12 +812,12 @@ define(["require", "exports", "tslib", "d3-array", "d3-scale", "d3-format", "../
         }
         var numDataPoints = chartData.reduce(function (total, lineChartPoints) { return total + lineChartPoints.data.length; }, 0);
         var chartProps = {
-            lineChartData: chartData,
+            lineChartData: tslib_1.__spreadArray(tslib_1.__spreadArray([], chartData, true), lineShape, true),
         };
         var scatterChartProps = {
             scatterChartData: chartData,
         };
-        var commonProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__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 = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__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 tslib_1.__assign({ data: chartProps, mode: mode }, commonProps);
         }