@fluentui/react-charting 5.24.10 → 5.24.12

package/lib-amd/components/LineChart/LineChart.base.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "d3-array", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "@fluentui/chart-utilities", "./eventAnnotation/EventAnnotation", "../../utilities/index", "../../utilities/image-export-utils"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, d3_array_2, Utilities_1, index_2, Callout_1, chart_utilities_1, EventAnnotation_1, index_3, image_export_utils_1) {
+define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../Legends/index", "d3-shape", "d3-array", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Callout", "@fluentui/chart-utilities", "./eventAnnotation/EventAnnotation", "../../utilities/index", "../../utilities/image-export-utils", "../../utilities/scatterpolar-utils"], function (require, exports, tslib_1, React, d3_selection_1, d3_array_1, index_1, d3_shape_1, d3_array_2, Utilities_1, index_2, Callout_1, chart_utilities_1, EventAnnotation_1, index_3, image_export_utils_1, scatterpolar_utils_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.LineChartBase = void 0;
@@ -59,6 +59,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             _this_1._yPaddingSecondary = 0;
             _this_1._hasMarkersMode = false;
             _this_1._isXAxisDateType = false;
+            _this_1._isScatterPolar = false;
             _this_1.toImage = function (opts) {
                 var _a, _b;
                 return (0, image_export_utils_1.toImage)((_a = _this_1._cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = _this_1._legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, _this_1._isRTL, opts);
@@ -96,6 +97,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                     : lineChartData;
                 _this_1._hasMarkersMode =
                     (_a = filteredData === null || filteredData === void 0 ? void 0 : filteredData.some(function (item) { var _a, _b, _c; return (_c = (_b = (_a = item.lineOptions) === null || _a === void 0 ? void 0 : _a.mode) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, 'markers'); })) !== null && _a !== void 0 ? _a : false;
+                _this_1._isScatterPolar = (0, index_3.isScatterPolarSeries)(filteredData);
                 return filteredData
                     ? filteredData.map(function (item, index) {
                         var _a, _b;
@@ -231,6 +233,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             };
             _this_1._createColorFillBars = function (containerHeight) {
                 var _a;
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 var colorFillBars = [];
                 if (_this_1.state.isSelectedLegend) {
                     _this_1._colorFillBars = _this_1.state.selectedColorBarLegend;
@@ -412,6 +415,16 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var yVal = y instanceof Date ? y.getTime() : y;
                 var _this = _this_1;
                 var found = (0, Utilities_1.find)(_this_1._calloutPoints, function (element) { return element.x === xVal; });
+                var hoverDp = undefined;
+                if (_this_1.props.isCalloutForStack === false && (found === null || found === void 0 ? void 0 : found.values)) {
+                    var dp = (0, Utilities_1.find)(found.values, function (val) { return (val === null || val === void 0 ? void 0 : val.y) === yVal; });
+                    if (dp) {
+                        hoverDp = {
+                            x: xVal,
+                            values: [dp],
+                        };
+                    }
+                }
                 // if no points need to be called out then don't show vertical line and callout card
                 if (found) {
                     (0, d3_selection_1.select)("#".concat(_this_1._verticalLine))
@@ -429,7 +442,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             legendVal: legendVal,
                             lineColor: lineColor,
                             stackCalloutProps: found,
-                            dataPointCalloutProps: found,
+                            dataPointCalloutProps: hoverDp,
                             activePoint: circleId,
                             xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
                             nearestCircleToHighlight: null,
@@ -712,6 +725,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 this._calloutPoints = (0, index_3.calloutData)(this._points) || [];
             }
         };
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         LineChartBase.prototype.render = function () {
             var _this_1 = this;
             var _a = this.props, tickValues = _a.tickValues, tickFormat = _a.tickFormat, eventAnnotationProps = _a.eventAnnotationProps, legendProps = _a.legendProps, data = _a.data;
@@ -736,7 +750,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 tickValues: tickValues,
                 tickFormat: tickFormat,
             };
-            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: this._isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
+            return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: index_3.ChartTypes.LineChart, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_3.createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: this._isXAxisDateType ? index_3.XAxisTypes.DateAxis : index_3.XAxisTypes.NumericAxis }, (this._isScatterPolar ? { yMaxValue: 1, yMinValue: -1 } : {}), { customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_3.createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
                 /* eslint-disable react/jsx-no-bind */
                 // eslint-disable-next-line react/no-children-prop
                 children: function (props) {
@@ -761,6 +775,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             enumerable: false,
             configurable: true
         });
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         LineChartBase.prototype._createLegends = function (data) {
             var _this_1 = this;
             var _a = this.props, legendProps = _a.legendProps, _b = _a.allowMultipleShapesForPoints, allowMultipleShapesForPoints = _b === void 0 ? false : _b;
@@ -837,9 +852,11 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
             var extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
             return Math.min(extraXPixels, extraYPixels);
         };
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         LineChartBase.prototype._createLines = function (xElement, containerHeight) {
             var _this_1 = this;
-            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, _9, _10, _11, _12, _13, _14, _15, _16;
+            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, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
             var lines = [];
             if (this.state.isSelectedLegend) {
                 this._points = this.state.selectedLegendPoints;
@@ -856,8 +873,11 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 theme: this.props.theme,
             });
             var _loop_1 = function (i) {
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 var linesForLine = [];
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 var bordersForLine = [];
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
                 var pointsForLine = [];
                 var legendVal = this_1._points[i].legend;
                 var lineColor = this_1._points[i].color;
@@ -868,7 +888,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                 var yPadding = this_1._points[i].useSecondaryYScale && this_1._yScaleSecondary ? this_1._yPaddingSecondary : this_1._yPaddingPrimary;
                 var extraMaxPixels = this_1._hasMarkersMode ? this_1._getRangeForScatterMarkerSize(yScale, yPadding) : 0;
                 if (this_1._points[i].data.length === 1) {
-                    var _17 = this_1._points[i].data[0], x1_1 = _17.x, y1 = _17.y, xAxisCalloutData_1 = _17.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _17.xAxisCalloutAccessibilityData;
+                    var _19 = this_1._points[i].data[0], x1_1 = _19.x, y1 = _19.y, xAxisCalloutData_1 = _19.xAxisCalloutData, xAxisCalloutAccessibilityData_1 = _19.xAxisCalloutAccessibilityData;
                     var circleId_1 = "".concat(this_1._circleId, "_").concat(i);
                     var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
                     var currentMarkerSize = this_1._points[i].data[0].markerSize;
@@ -882,7 +902,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                                     : 3.5, cx: this_1._xAxisScale(x1_1), cy: yScale(y1), fill: activePoint === circleId_1 ? theme.semanticColors.bodyBackground : lineColor, opacity: isLegendSelected ? 1 : 0.1, onMouseOver: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1_1, y1, verticaLineHeight, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, strokeWidth: activePoint === circleId_1 ? DEFAULT_LINE_STROKE_SIZE : 0, stroke: activePoint === circleId_1 ? lineColor : '', role: "img", "aria-label": this_1._getAriaLabel(i, 0), "data-is-focusable": isLegendSelected, ref: function (e) {
                                 _this_1._refCallback(e, circleId_1);
                             }, onFocus: function () { return _this_1._handleFocus(circleId_1, x1_1, xAxisCalloutData_1, circleId_1, xAxisCalloutAccessibilityData_1); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[0].onDataPointClick))),
-                        supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId_1, "-label"), x: this_1._xAxisScale(x1_1), y: yScale(y1) +
+                        !this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId_1, "-label"), x: this_1._xAxisScale(x1_1), y: yScale(y1) +
                                 Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 3.5, 4) +
                                 12, className: classNames.markerLabel, opacity: isLegendSelected ? 1 : 0.1 }, text))));
                 }
@@ -933,8 +953,8 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         var lineId = "".concat(this_1._lineId, "_").concat(i, "_").concat(j);
                         var borderId = "".concat(this_1._borderId, "_").concat(i, "_").concat(j);
                         var circleId = "".concat(this_1._circleId, "_").concat(i, "_").concat(j);
-                        var _18 = this_1._points[i].data[j - 1], x1 = _18.x, y1 = _18.y, xAxisCalloutData = _18.xAxisCalloutData, xAxisCalloutAccessibilityData = _18.xAxisCalloutAccessibilityData;
-                        var _19 = this_1._points[i].data[j], x2 = _19.x, y2 = _19.y;
+                        var _20 = this_1._points[i].data[j - 1], x1 = _20.x, y1 = _20.y, xAxisCalloutData = _20.xAxisCalloutData, xAxisCalloutAccessibilityData = _20.xAxisCalloutAccessibilityData;
+                        var _21 = this_1._points[i].data[j], x2 = _21.x, y2 = _21.y;
                         var path = this_1._getPath(this_1._xAxisScale(x1), yScale(y1), circleId, j, false, this_1._points[i].index);
                         var strokeWidth = ((_s = this_1._points[i].lineOptions) === null || _s === void 0 ? void 0 : _s.strokeWidth) || this_1.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
                         var isLegendSelected = this_1._legendHighlighted(legendVal) || this_1._noLegendHighlighted() || this_1.state.isSelectedLegend;
@@ -946,7 +966,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x1), cy: yScale(y1), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                     return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData);
                                 }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_x = this_1._points[i].data[j - 1].text) !== null && _x !== void 0 ? _x : this_1._getAriaLabel(i, j - 1) })),
-                            supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) +
+                            !this_1._isScatterPolar && supportsTextMode && text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: this_1._xAxisScale(x1), y: yScale(y1) +
                                     Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
                                     12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: circleId, key: circleId, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x1, y1, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () { return _this_1._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j - 1].onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, circleId, j, false), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": this_1._getAriaLabel(i, j - 1) }))));
                         if (j + 1 === this_1._points[i].data.length) {
@@ -955,7 +975,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                             var hiddenHoverCircleId = "".concat(circleId).concat(j, "D");
                             var lastPointHidden = this_1._points[i].hideNonActiveDots && activePoint !== lastCircleId_1;
                             path = this_1._getPath(this_1._xAxisScale(x2), yScale(y2), lastCircleId_1, j, true, this_1._points[i].index);
-                            var _20 = this_1._points[i].data[j], lastCirlceXCallout_1 = _20.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _20.xAxisCalloutAccessibilityData;
+                            var _22 = this_1._points[i].data[j], lastCirlceXCallout_1 = _22.xAxisCalloutData, lastCirlceXCalloutAccessibilityData_1 = _22.xAxisCalloutAccessibilityData;
                             currentMarkerSize = this_1._points[i].data[j].markerSize;
                             var lastSupportsTextMode = (_z = (_y = this_1._points[i].lineOptions) === null || _y === void 0 ? void 0 : _y.mode) === null || _z === void 0 ? void 0 : _z.includes('text');
                             var lastText = this_1._points[i].data[j].text;
@@ -964,7 +984,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                                     React.createElement("circle", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, r: currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, cx: this_1._xAxisScale(x2), cy: yScale(y2), "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                             return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
                                         }, onBlur: this_1._handleMouseOut }, this_1._getClickHandler(this_1._points[i].data[j].onDataPointClick), { opacity: isLegendSelected && !lastPointHidden ? 1 : 0.01, fill: this_1._getPointFill(lineColor, lastCircleId_1, j, true), stroke: lineColor, strokeWidth: strokeWidth, role: "img", "aria-label": (_2 = this_1._points[i].data[j].text) !== null && _2 !== void 0 ? _2 : this_1._getAriaLabel(i, j) })),
-                                    lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) +
+                                    !this_1._isScatterPolar && lastSupportsTextMode && lastText && (React.createElement("text", { key: "".concat(lastCircleId_1, "-label"), x: this_1._xAxisScale(x2), y: yScale(y2) +
                                             Math.max(currentMarkerSize ? (currentMarkerSize * extraMaxPixels) / maxMarkerSize : 4, 4) +
                                             12, className: classNames.markerLabel, opacity: isLegendSelected && !currentPointHidden ? 1 : 0.01 }, text)))) : (React.createElement("path", tslib_1.__assign({ id: lastCircleId_1, key: lastCircleId_1, d: path, "data-is-focusable": isLegendSelected, onMouseOver: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseMove: this_1._handleHover.bind(this_1, x2, y2, verticaLineHeight, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1, yScale, legendVal, lineColor), onMouseOut: this_1._handleMouseOut, onFocus: function () {
                                         return _this_1._handleFocus(lineId, x2, lastCirlceXCallout_1, lastCircleId_1, lastCirlceXCalloutAccessibilityData_1);
@@ -997,6 +1017,26 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
                         _loop_2(j);
                     }
                 }
+                if (this_1._isScatterPolar) {
+                    // Render category labels for all series at once to avoid overlap
+                    var allSeriesData = this_1._points.map(function (series) { return ({
+                        data: series.data
+                            .filter(function (pt) { return typeof pt.x === 'number' && typeof pt.y === 'number'; })
+                            .map(function (pt) { return ({ x: pt.x, y: pt.y, text: pt.text }); }),
+                    }); });
+                    pointsForLine.push.apply(pointsForLine, (0, scatterpolar_utils_1.renderScatterPolarCategoryLabels)({
+                        allSeriesData: allSeriesData,
+                        xAxisScale: this_1._xAxisScale,
+                        yAxisScale: yScale,
+                        className: classNames.markerLabel || '',
+                        maybeLineOptions: ((_17 = this_1._points[i]) === null || _17 === void 0 ? void 0 : _17.lineOptions)
+                            ? {
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                originXOffset: (_18 = this_1._points[i].lineOptions) === null || _18 === void 0 ? void 0 : _18.originXOffset,
+                            }
+                            : undefined,
+                    }));
+                }
                 lines.push(React.createElement("g", { key: "line_".concat(i), role: "region", "aria-label": "".concat(legendVal, ", line ").concat(i + 1, " of ").concat(this_1._points.length, " with ").concat(this_1._points[i].data.length, " data points.") },
                     bordersForLine,
                     linesForLine,
@@ -1043,7 +1083,7 @@ define(["require", "exports", "tslib", "react", "d3-selection", "d3-array", "../
         LineChartBase.defaultProps = {
             enableReflow: true,
             useUTC: true,
-            isCalloutForStack: false,
+            isCalloutForStack: true,
         };
         return LineChartBase;
     }(React.Component));