@fluentui/react-charting 5.24.10 → 5.24.12

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

@@ -10,8 +10,9 @@ import { CartesianChart, } from '../../index';
 import { DirectionalHint } from '@fluentui/react/lib/Callout';
 import { formatDateToLocaleString } from '@fluentui/chart-utilities';
 import { EventsAnnotation } from './eventAnnotation/EventAnnotation';
-import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfNumericForAreaChart, createStringYAxis, areArraysEqual, getCurveFactory, } from '../../utilities/index';
+import { calloutData, ChartTypes, getXAxisType, XAxisTypes, tooltipOfAxislabels, Points, pointTypes, getTypeOfAxis, getNextColor, getColorFromToken, findNumericMinMaxOfY, createNumericYAxis, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfNumericForAreaChart, createStringYAxis, areArraysEqual, getCurveFactory, isScatterPolarSeries, } from '../../utilities/index';
 import { toImage } from '../../utilities/image-export-utils';
+import { renderScatterPolarCategoryLabels } from '../../utilities/scatterpolar-utils';
 var getClassNames = classNamesFunction();
 var PointSize;
 (function (PointSize) {
@@ -69,6 +70,7 @@ var LineChartBase = /** @class */ (function (_super) {
         _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 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);
@@ -106,6 +108,7 @@ var LineChartBase = /** @class */ (function (_super) {
                 : 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 = isScatterPolarSeries(filteredData);
             return filteredData
                 ? filteredData.map(function (item, index) {
                     var _a, _b;
@@ -241,6 +244,7 @@ var LineChartBase = /** @class */ (function (_super) {
         };
         _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;
@@ -422,6 +426,16 @@ var LineChartBase = /** @class */ (function (_super) {
             var yVal = y instanceof Date ? y.getTime() : y;
             var _this = _this_1;
             var found = 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 = 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) {
                 d3Select("#".concat(_this_1._verticalLine))
@@ -439,7 +453,7 @@ var LineChartBase = /** @class */ (function (_super) {
                         legendVal: legendVal,
                         lineColor: lineColor,
                         stackCalloutProps: found,
-                        dataPointCalloutProps: found,
+                        dataPointCalloutProps: hoverDp,
                         activePoint: circleId,
                         xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
                         nearestCircleToHighlight: null,
@@ -722,6 +736,7 @@ var LineChartBase = /** @class */ (function (_super) {
             this._calloutPoints = 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;
@@ -746,7 +761,7 @@ var LineChartBase = /** @class */ (function (_super) {
             tickValues: tickValues,
             tickFormat: tickFormat,
         };
-        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: ChartTypes.LineChart, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: this._isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis, customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: createStringYAxis, onChartMouseLeave: this._handleChartMouseLeave, enableFirstRenderOptimization: this.props.enablePerfOptimization && this._firstRenderOptimization, ref: this._cartesianChartRef, 
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: points, chartType: ChartTypes.LineChart, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: createNumericYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: this._getNumericMinMaxOfY, getGraphData: this._initializeLineChartData, xAxisType: this._isXAxisDateType ? XAxisTypes.DateAxis : XAxisTypes.NumericAxis }, (this._isScatterPolar ? { yMaxValue: 1, yMinValue: -1 } : {}), { customizedCallout: this._getCustomizedCallout(), getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: 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) {
@@ -771,6 +786,7 @@ var LineChartBase = /** @class */ (function (_super) {
         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;
@@ -847,9 +863,11 @@ var LineChartBase = /** @class */ (function (_super) {
         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;
@@ -866,8 +884,11 @@ var LineChartBase = /** @class */ (function (_super) {
             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;
@@ -878,7 +899,7 @@ var LineChartBase = /** @class */ (function (_super) {
             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;
@@ -892,7 +913,7 @@ var LineChartBase = /** @class */ (function (_super) {
                                 : 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))));
             }
@@ -943,8 +964,8 @@ var LineChartBase = /** @class */ (function (_super) {
                     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;
@@ -956,7 +977,7 @@ var LineChartBase = /** @class */ (function (_super) {
                         React.createElement("circle", __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", __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) {
@@ -965,7 +986,7 @@ var LineChartBase = /** @class */ (function (_super) {
                         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;
@@ -974,7 +995,7 @@ var LineChartBase = /** @class */ (function (_super) {
                                 React.createElement("circle", __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", __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);
@@ -1007,6 +1028,26 @@ var LineChartBase = /** @class */ (function (_super) {
                     _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, 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,
@@ -1053,7 +1094,7 @@ var LineChartBase = /** @class */ (function (_super) {
     LineChartBase.defaultProps = {
         enableReflow: true,
         useUTC: true,
-        isCalloutForStack: false,
+        isCalloutForStack: true,
     };
     return LineChartBase;
 }(React.Component));