@fluentui/react-charting 5.24.2 → 5.24.4

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

@@ -0,0 +1,476 @@
+define(["require", "exports", "tslib", "react", "d3-selection", "../Legends/index", "d3-array", "../../utilities/index", "../../index", "../../utilities/index", "@fluentui/react", "../../utilities/image-export-utils", "@fluentui/chart-utilities"], function (require, exports, tslib_1, React, d3_selection_1, index_1, d3_array_1, index_2, index_3, index_4, react_1, image_export_utils_1, chart_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ScatterChartBase = void 0;
+    var getClassNames = (0, react_1.classNamesFunction)();
+    // Create a ScatterChart variant which uses these default styles and this styled subcomponent.
+    /**
+     * ScatterChart component
+     * {@docCategory ScatterChart}
+     */
+    exports.ScatterChartBase = React.forwardRef(function (props, forwardedRef) {
+        var _circleId = React.useMemo(function () { return (0, react_1.getId)('circle'); }, []);
+        var _seriesId = React.useMemo(function () { return (0, react_1.getId)('seriesID'); }, []);
+        var _verticalLine = React.useMemo(function () { return (0, react_1.getId)('verticalLine'); }, []);
+        var _tooltipId = React.useMemo(function () { return (0, react_1.getId)('ScatterChartTooltipId_'); }, []);
+        var _firstRenderOptimization = true;
+        var _emptyChartId = React.useMemo(function () { return (0, react_1.getId)('_ScatterChart_empty'); }, []);
+        var _points = React.useRef(_injectIndexPropertyInScatterChartData(props.data.scatterChartData));
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var _calloutPoints = React.useMemo(function () { return (0, index_4.calloutData)(_points.current) || []; }, [_points]);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var _xAxisScale = React.useRef('');
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var _yAxisScale = React.useRef('');
+        var _uniqueCallOutID = React.useRef(null);
+        var _refArray = React.useMemo(function () { return []; }, []);
+        var margins = React.useRef(null);
+        var renderSeries = React.useRef([]);
+        var _xAxisLabels = [];
+        var _xAxisCalloutAccessibilityData = {};
+        var _xBandwidth = React.useRef(0);
+        var cartesianChartRef = React.useRef(null);
+        var legendsRef = React.useRef(null);
+        var _a = React.useState(''), hoverXValue = _a[0], setHoverXValue = _a[1];
+        var _b = React.useState(''), activeLegend = _b[0], setActiveLegend = _b[1];
+        var _c = React.useState([]), YValueHover = _c[0], setYValueHover = _c[1];
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var _d = React.useState([]), selectedLegendPoints = _d[0], setSelectedLegendPoints = _d[1];
+        var _e = React.useState(false), isSelectedLegend = _e[0], setIsSelectedLegend = _e[1];
+        var _f = React.useState(''), activePoint = _f[0], setActivePoint = _f[1];
+        var _g = React.useState(), stackCalloutProps = _g[0], setStackCalloutProps = _g[1];
+        var _h = React.useState(false), isCalloutVisible = _h[0], setCalloutVisible = _h[1];
+        var _j = React.useState([]), selectedLegends = _j[0], setSelectedLegends = _j[1];
+        var _k = React.useState(''), refSelected = _k[0], setRefSelected = _k[1];
+        var prevPropsRef = React.useRef(null);
+        var classNames = getClassNames(props.styles, {
+            theme: props.theme,
+        });
+        React.useEffect(function () {
+            var _a, _b, _c;
+            if (prevPropsRef.current) {
+                var prevProps = prevPropsRef.current;
+                if (!(0, index_2.areArraysEqual)((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
+                    setSelectedLegends(((_c = props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || []);
+                }
+            }
+            prevPropsRef.current = props;
+        }, [props]);
+        React.useImperativeHandle(props.componentRef, function () {
+            var _a, _b;
+            return ({
+                chartContainer: (_b = (_a = cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer) !== null && _b !== void 0 ? _b : null,
+                toImage: function (opts) {
+                    var _a, _b;
+                    return (0, image_export_utils_1.toImage)((_a = cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, (0, react_1.getRTL)(), opts);
+                },
+            });
+        }, []);
+        var _xAxisType = props.data.scatterChartData &&
+            props.data.scatterChartData.length > 0 &&
+            props.data.scatterChartData[0].data &&
+            props.data.scatterChartData[0].data.length > 0
+            ? (0, index_4.getTypeOfAxis)(props.data.scatterChartData[0].data[0].x, true)
+            : index_4.XAxisTypes.StringAxis;
+        var pointsRef = React.useRef([]);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var calloutPointsRef = React.useRef([]);
+        React.useEffect(function () {
+            /** note that height and width are not used to resize or set as dimesions of the chart,
+             * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart
+             */
+            if (_points.current !== _injectIndexPropertyInScatterChartData(props.data.scatterChartData) ||
+                props.data !== _points.current) {
+                pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
+                calloutPointsRef.current = (0, index_4.calloutData)(pointsRef.current);
+            }
+        }, [props.height, props.width, props.data, _points]);
+        function _injectIndexPropertyInScatterChartData(scatterChartData) {
+            return scatterChartData
+                ? scatterChartData.map(function (item, index) {
+                    var color;
+                    if (typeof item.color === 'undefined') {
+                        color = (0, index_4.getNextColor)(index, 0);
+                    }
+                    else {
+                        color = (0, index_4.getColorFromToken)(item.color);
+                    }
+                    return tslib_1.__assign(tslib_1.__assign({}, item), { index: -1, color: color });
+                })
+                : [];
+        }
+        var _getMargins = React.useCallback(function (_margins) {
+            margins.current = _margins;
+        }, []);
+        function _onHoverCardHide() {
+            setSelectedLegendPoints([]);
+            setIsSelectedLegend(false);
+        }
+        function _createLegends(data) {
+            var legendProps = props.legendProps;
+            var isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);
+            var mapLegendToPoints = {};
+            data.forEach(function (point) {
+                if (point.legend) {
+                    if (!mapLegendToPoints[point.legend]) {
+                        mapLegendToPoints[point.legend] = [];
+                    }
+                    mapLegendToPoints[point.legend].push(point);
+                }
+            });
+            var legendDataItems = Object.entries(mapLegendToPoints).map(function (_a) {
+                var legendTitle = _a[0], points = _a[1];
+                var representativePoint = points[0];
+                // mapping data to the format Legends component needs
+                var legend = tslib_1.__assign({ title: legendTitle, color: representativePoint.color, onMouseOutAction: function () {
+                        setActiveLegend('');
+                    }, hoverAction: function () {
+                        _handleChartMouseLeave();
+                        setActiveLegend(legendTitle);
+                    } }, (representativePoint.legendShape && {
+                    shape: representativePoint.legendShape,
+                }));
+                return legend;
+            });
+            return (React.createElement(index_1.Legends, tslib_1.__assign({ legends: tslib_1.__spreadArray([], legendDataItems, true), enabledWrapLines: props.enabledLegendsWrapLines, overflowProps: props.legendsOverflowProps, focusZonePropsInHoverCard: props.focusZonePropsForLegendsInHoverCard, overflowText: props.legendsOverflowText }, (isLegendMultiSelectEnabled && { onLegendHoverCardLeave: _onHoverCardHide }), { onChange: _onLegendSelectionChange }, props.legendProps)));
+        }
+        function _onLegendSelectionChange(legendsSelected, event, currentLegend) {
+            var _a, _b;
+            if ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
+                setSelectedLegends(legendsSelected);
+            }
+            else {
+                setSelectedLegends(legendsSelected.slice(-1));
+            }
+            if ((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+                props.legendProps.onChange(legendsSelected, event, currentLegend);
+            }
+        }
+        var _getPointFill = React.useCallback(function (lineColor, pointId) {
+            var theme = props.theme;
+            if (activePoint === pointId) {
+                return theme.semanticColors.bodyBackground;
+            }
+            else {
+                return lineColor;
+            }
+        }, [activePoint, props]);
+        var getDomainNRangeValuesScatterChart = React.useCallback(function (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        points, domainMargins, width, _chartType, isRTL, xAxisType, _barWidth, tickValues) {
+            if (xAxisType === index_4.XAxisTypes.NumericAxis) {
+                return (0, index_2.domainRangeOfNumericForScatterChart)(points, domainMargins, width, isRTL);
+            }
+            else if (xAxisType === index_4.XAxisTypes.DateAxis) {
+                return (0, index_2.domainRangeOfDateForScatterChart)(points, domainMargins, width, isRTL, tickValues);
+            }
+            // String Axis type
+            return (0, index_2.domainRangeOfXStringAxis)(domainMargins, width, isRTL);
+        }, []);
+        var _handleFocus = React.useCallback(function (seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
+            _uniqueCallOutID.current = circleId;
+            var formattedData = x instanceof Date ? (0, chart_utilities_1.formatDateToLocaleString)(x, props.culture, props.useUTC) : x;
+            var xVal = x instanceof Date ? x.getTime() : x;
+            var found = (0, react_1.find)(_calloutPoints, function (element) { return element.x === xVal; });
+            // 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(_verticalLine))
+                    .attr('transform', function () { var _a; return "translate(".concat(((_a = _xAxisScale.current) === null || _a === void 0 ? void 0 : _a.call(_xAxisScale, x)) + _xBandwidth.current, ", 0)"); })
+                    .attr('visibility', 'visibility');
+                _refArray.forEach(function (obj) {
+                    if (obj.index === seriesId) {
+                        setCalloutVisible(true);
+                        xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
+                        setRefSelected("#".concat(circleId));
+                        setYValueHover(found.values);
+                        setActivePoint(circleId);
+                    }
+                });
+            }
+            else {
+                setActivePoint(circleId);
+            }
+        }, [_verticalLine, _xAxisScale, _xBandwidth, _calloutPoints, _refArray, props.culture, props.useUTC]);
+        var _handleHover = React.useCallback(function (x, y, lineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, mouseEvent) {
+            var _a;
+            mouseEvent === null || mouseEvent === void 0 ? void 0 : mouseEvent.persist();
+            var formattedData = x instanceof Date ? (0, chart_utilities_1.formatDateToLocaleString)(x, props.culture, props.useUTC) : x;
+            var xVal = x instanceof Date ? x.getTime() : x;
+            var found = (0, react_1.find)(_calloutPoints, function (element) { return element.x === xVal; });
+            // 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(_verticalLine))
+                    .attr('transform', function () { var _a, _b; return "translate(".concat(((_a = _xAxisScale.current) === null || _a === void 0 ? void 0 : _a.call(_xAxisScale, x)) + _xBandwidth.current, ", ").concat((_b = _yAxisScale.current) === null || _b === void 0 ? void 0 : _b.call(_yAxisScale, y), ")"); })
+                    .attr('visibility', 'visibility')
+                    .attr('y2', "".concat(lineHeight - ((_a = _yAxisScale.current) === null || _a === void 0 ? void 0 : _a.call(_yAxisScale, y))));
+                if (_uniqueCallOutID.current !== circleId) {
+                    _uniqueCallOutID.current = circleId;
+                    setCalloutVisible(true);
+                    xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);
+                    setRefSelected("#".concat(circleId));
+                    setYValueHover(found.values);
+                    setStackCalloutProps(found);
+                    setActivePoint(circleId);
+                }
+            }
+            else {
+                setActivePoint(circleId);
+            }
+        }, [_verticalLine, _xAxisScale, _xBandwidth, _calloutPoints, props.culture, props.useUTC]);
+        var _handleMouseOut = React.useCallback(function () {
+            (0, d3_selection_1.select)("#".concat(_verticalLine)).attr('visibility', 'hidden');
+        }, [_verticalLine]);
+        var _handleChartMouseLeave = React.useCallback(function () {
+            _uniqueCallOutID.current = null;
+            setActivePoint('');
+            if (isCalloutVisible) {
+                setCalloutVisible(false);
+            }
+        }, [_uniqueCallOutID, isCalloutVisible, setActivePoint, setCalloutVisible]);
+        /**
+         * This function checks if none of the legends is selected or hovered.*/
+        var _noLegendHighlighted = React.useCallback(function () {
+            return selectedLegends.length === 0;
+        }, [selectedLegends]);
+        var _getHighlightedLegend = React.useCallback(function () {
+            return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];
+        }, [selectedLegends, activeLegend]);
+        /**
+         * This function checks if the given legend is highlighted or not.
+         * A legend can be highlighted in 2 ways:
+         * 1. selection: if the user clicks on it
+         * 2. hovering: if there is no selected legend and the user hovers over it*/
+        var _legendHighlighted = React.useCallback(function (legend) {
+            return _getHighlightedLegend().includes(legend);
+        }, [_getHighlightedLegend]);
+        var _getAriaLabel = React.useCallback(function (seriesIndex, pointIndex) {
+            var _a, _b;
+            var series = (_a = _points.current) === null || _a === void 0 ? void 0 : _a[seriesIndex];
+            var point = series.data[pointIndex];
+            var formattedDate = point.x instanceof Date ? (0, chart_utilities_1.formatDateToLocaleString)(point.x, props.culture, props.useUTC) : point.x;
+            var xValue = point.xAxisCalloutData || formattedDate;
+            var legend = series.legend;
+            var yValue = point.yAxisCalloutData || point.y;
+            return ((_b = point.callOutAccessibilityData) === null || _b === void 0 ? void 0 : _b.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
+        }, [_points, props.culture, props.useUTC]);
+        function _getRangeForScatterMarkerSize(yScale, yPadding, xMin, xMax, xPadding) {
+            var _a, _b, _c, _d;
+            var extraXPixels = (0, react_1.getRTL)()
+                ? ((_a = _xAxisScale.current) === null || _a === void 0 ? void 0 : _a.call(_xAxisScale, xMax - xPadding)) - ((_b = _xAxisScale.current) === null || _b === void 0 ? void 0 : _b.call(_xAxisScale, xMax))
+                : ((_c = _xAxisScale.current) === null || _c === void 0 ? void 0 : _c.call(_xAxisScale, xMin + xPadding)) - ((_d = _xAxisScale.current) === null || _d === void 0 ? void 0 : _d.call(_xAxisScale, xMin));
+            var yMin = yScale.domain()[0];
+            var extraYPixels = yScale(yMin) - yScale(yMin + yPadding);
+            return Math.min(extraXPixels, extraYPixels);
+        }
+        var _createPlot = React.useCallback(function (xElement, containerHeight) {
+            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;
+            var series = [];
+            if (isSelectedLegend) {
+                _points.current = selectedLegendPoints;
+            }
+            else {
+                _points.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
+            }
+            var yMax = (0, d3_array_1.max)(_points.current, function (point) {
+                return (0, d3_array_1.max)(point.data, function (item) { return item.y; });
+            });
+            var yMin = (0, d3_array_1.min)(_points.current, function (point) {
+                return (0, d3_array_1.min)(point.data, function (item) { return item.y; });
+            });
+            var yPadding = (yMax - yMin) * 0.1;
+            var xPadding = 0;
+            var xMin = 0;
+            var xMax = 0;
+            if (_xAxisType === index_4.XAxisTypes.StringAxis) {
+                _xBandwidth.current = ((_a = _xAxisScale.current) === null || _a === void 0 ? void 0 : _a.bandwidth()) / 2;
+            }
+            else if (_xAxisType === index_4.XAxisTypes.DateAxis) {
+                xMin = (0, d3_array_1.min)(_points.current, function (point) {
+                    return (0, d3_array_1.min)(point.data, function (item) { return item.x; });
+                }).getTime();
+                xMax = (0, d3_array_1.max)(_points.current, function (point) {
+                    return (0, d3_array_1.max)(point.data, function (item) {
+                        return item.x;
+                    });
+                }).getTime();
+                xPadding = (xMax - xMin) * 0.1;
+            }
+            else {
+                xMin = (0, d3_array_1.min)(_points.current, function (point) {
+                    return (0, d3_array_1.min)(point.data, function (item) { return item.x; });
+                });
+                xMax = (0, d3_array_1.max)(_points.current, function (point) {
+                    return (0, d3_array_1.max)(point.data, function (item) {
+                        return item.x;
+                    });
+                });
+                xPadding = (xMax - xMin) * 0.1;
+            }
+            var maxMarkerSize = (0, d3_array_1.max)(_points.current, function (point) {
+                return (0, d3_array_1.max)(point.data, function (item) {
+                    return item.markerSize;
+                });
+            });
+            var _loop_1 = function (i) {
+                var pointsForSeries = [];
+                var legendVal = (_d = (_c = _points.current) === null || _c === void 0 ? void 0 : _c[i]) === null || _d === void 0 ? void 0 : _d.legend;
+                var seriesColor = (_f = (_e = _points.current) === null || _e === void 0 ? void 0 : _e[i]) === null || _f === void 0 ? void 0 : _f.color;
+                var verticaLineHeight = containerHeight - ((_h = (_g = margins.current) === null || _g === void 0 ? void 0 : _g.bottom) !== null && _h !== void 0 ? _h : 0) + 6;
+                var _loop_2 = function (j) {
+                    var seriesId = "".concat(_seriesId, "_").concat(i, "_").concat(j);
+                    var circleId = "".concat(_circleId, "_").concat(i, "_").concat(j);
+                    var _8 = (_o = (_m = _points.current) === null || _m === void 0 ? void 0 : _m[i]) === null || _o === void 0 ? void 0 : _o.data[j], x = _8.x, y = _8.y, xAxisCalloutData = _8.xAxisCalloutData, xAxisCalloutAccessibilityData = _8.xAxisCalloutAccessibilityData;
+                    var pointMarkerSize = ((_q = (_p = _points.current) === null || _p === void 0 ? void 0 : _p[i]) === null || _q === void 0 ? void 0 : _q.data[j]).markerSize;
+                    var extraMaxPixels = _xAxisType !== index_4.XAxisTypes.StringAxis
+                        ? _getRangeForScatterMarkerSize(_yAxisScale.current, yPadding, xMin, xMax, xPadding)
+                        : 0;
+                    var minPixel = 4;
+                    var maxPixel = 16;
+                    var circleRadius = pointMarkerSize && maxMarkerSize !== 0
+                        ? _xAxisType !== index_4.XAxisTypes.StringAxis
+                            ? (pointMarkerSize * extraMaxPixels) / maxMarkerSize
+                            : minPixel + ((pointMarkerSize - minPixel) / (maxMarkerSize - minPixel)) * (maxPixel - minPixel)
+                        : activePoint === circleId
+                            ? 6
+                            : 4;
+                    var isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
+                    var currentPointHidden = ((_s = (_r = _points.current) === null || _r === void 0 ? void 0 : _r[i]) === null || _s === void 0 ? void 0 : _s.hideNonActiveDots) && activePoint !== circleId;
+                    var text = (_u = (_t = _points.current) === null || _t === void 0 ? void 0 : _t[i].data[j]) === null || _u === void 0 ? void 0 : _u.text;
+                    pointsForSeries.push(React.createElement(React.Fragment, null,
+                        React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: Math.max(circleRadius, 4), cx: ((_v = _xAxisScale.current) === null || _v === void 0 ? void 0 : _v.call(_xAxisScale, x)) + _xBandwidth.current, cy: (_w = _yAxisScale.current) === null || _w === void 0 ? void 0 : _w.call(_yAxisScale, y), "data-is-focusable": isLegendSelected, onMouseOver: function (event) {
+                                return _handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event);
+                            }, onMouseMove: function (event) {
+                                return _handleHover(x, y, verticaLineHeight, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData, event);
+                            }, onMouseOut: _handleMouseOut, onFocus: function () { return _handleFocus(seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData); }, onBlur: _handleMouseOut }, _getClickHandler((_z = (_y = (_x = _points.current) === null || _x === void 0 ? void 0 : _x[i]) === null || _y === void 0 ? void 0 : _y.data[j]) === null || _z === void 0 ? void 0 : _z.onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.1, fill: _getPointFill(seriesColor, circleId), stroke: seriesColor, role: "img", "aria-label": _getAriaLabel(i, j), tabIndex: ((_1 = (_0 = _points.current) === null || _0 === void 0 ? void 0 : _0[i]) === null || _1 === void 0 ? void 0 : _1.legend) !== '' ? 0 : undefined })),
+                        text && (React.createElement("text", { key: "".concat(circleId, "-label"), x: ((_2 = _xAxisScale.current) === null || _2 === void 0 ? void 0 : _2.call(_xAxisScale, x)) + _xBandwidth.current, y: ((_3 = _yAxisScale.current) === null || _3 === void 0 ? void 0 : _3.call(_yAxisScale, y)) + Math.max(circleRadius + 12, 16), className: classNames.markerLabel }, text))));
+                };
+                for (var j = 0; j < ((_l = (_k = (_j = _points.current) === null || _j === void 0 ? void 0 : _j[i]) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.length); j++) {
+                    _loop_2(j);
+                }
+                series.push(React.createElement("g", { key: "series_".concat(i), role: "region", "aria-label": "".concat(legendVal, ", series ").concat(i + 1, " of ").concat((_4 = _points.current) === null || _4 === void 0 ? void 0 : _4.length, " with ").concat((_7 = (_6 = (_5 = _points.current) === null || _5 === void 0 ? void 0 : _5[i]) === null || _6 === void 0 ? void 0 : _6.data) === null || _7 === void 0 ? void 0 : _7.length, " data points.") }, pointsForSeries));
+            };
+            for (var i = ((_b = _points.current) === null || _b === void 0 ? void 0 : _b.length) - 1; i >= 0; i--) {
+                _loop_1(i);
+            }
+            // Removing un wanted tooltip div from DOM, when prop not provided.
+            if (!props.showXAxisLablesTooltip) {
+                try {
+                    document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+            }
+            // Used to display tooltip at x axis labels.
+            if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {
+                var xAxisElement = (0, d3_selection_1.select)(xElement).call(_xAxisScale.current);
+                try {
+                    document.getElementById(_tooltipId) && document.getElementById(_tooltipId).remove();
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                var tooltipProps = {
+                    tooltipCls: classNames.tooltip,
+                    id: _tooltipId,
+                    xAxis: xAxisElement,
+                };
+                xAxisElement && (0, index_4.tooltipOfAxislabels)(tooltipProps);
+            }
+            return series;
+        }, [
+            _xAxisScale,
+            _yAxisScale,
+            props.data.scatterChartData,
+            props.showXAxisLablesTooltip,
+            props.wrapXAxisLables,
+            _circleId,
+            _getAriaLabel,
+            _getPointFill,
+            _handleFocus,
+            _handleHover,
+            _handleMouseOut,
+            _legendHighlighted,
+            _noLegendHighlighted,
+            _seriesId,
+            _tooltipId,
+            _xAxisType,
+            activePoint,
+            isSelectedLegend,
+            selectedLegendPoints,
+            classNames,
+        ]);
+        var _initializeScatterChartData = React.useCallback(function (xScale, yScale, containerHeight, containerWidth, xElement) {
+            _xAxisScale.current = xScale;
+            _yAxisScale.current = yScale;
+            renderSeries.current = _createPlot(xElement, containerHeight);
+        }, [renderSeries, _xAxisScale, _yAxisScale, _createPlot]);
+        /**
+         * Screen readers announce an element as clickable if the onClick attribute is set.
+         * This function sets the attribute only when a click event handler is provided.*/
+        function _getClickHandler(func) {
+            if (func) {
+                return {
+                    onClick: func,
+                };
+            }
+            return {};
+        }
+        function _isChartEmpty() {
+            return !(props.data &&
+                props.data.scatterChartData &&
+                props.data.scatterChartData.length > 0 &&
+                props.data.scatterChartData.filter(function (item) { return item.data.length; }).length > 0);
+        }
+        function _closeCallout() {
+            setCalloutVisible(false);
+        }
+        function _getNumericMinMaxOfY(points, yAxisType) {
+            // eslint-disable-next-line @typescript-eslint/no-shadow
+            var _a = (0, index_2.findNumericMinMaxOfY)(points, yAxisType), startValue = _a.startValue, endValue = _a.endValue;
+            var yPadding = 0;
+            yPadding = (endValue - startValue) * 0.1;
+            return {
+                startValue: startValue - yPadding,
+                endValue: endValue + yPadding,
+            };
+        }
+        var _getMinMaxofXAxis = React.useCallback(function (points, yAxisType) { return _getNumericMinMaxOfY(points, yAxisType); }, []);
+        var legendProps = props.legendProps, tickValues = props.tickValues, tickFormat = props.tickFormat;
+        _points.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);
+        var points = _points.current;
+        if (legendProps && !!legendProps.canSelectMultipleLegends) {
+            points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points.current;
+            _calloutPoints = (0, index_4.calloutData)(points);
+        }
+        var legendBars = null;
+        // reduce computation cost by only creating legendBars
+        // if when hideLegend is false.
+        // NOTE: they are rendered only when hideLegend is false in CartesianChart.
+        if (!props.hideLegend) {
+            legendBars = _createLegends(_points.current); // ToDo: Memoize legends to improve performance.
+        }
+        var calloutProps = tslib_1.__assign({ isCalloutVisible: isCalloutVisible, directionalHint: react_1.DirectionalHint.topAutoEdge, YValueHover: YValueHover, hoverXValue: hoverXValue, id: "toolTip".concat(_uniqueCallOutID.current), target: refSelected, isBeakVisible: false, gapSpace: 15, onDismiss: _closeCallout, preventDismissOnEvent: function () { return true; }, hidden: !(!props.hideTooltip && isCalloutVisible), descriptionMessage: props.getCalloutDescriptionMessage && stackCalloutProps
+                ? props.getCalloutDescriptionMessage(stackCalloutProps)
+                : undefined, 'data-is-focusable': true, xAxisCalloutAccessibilityData: _xAxisCalloutAccessibilityData }, props.calloutProps);
+        var tickParams = {
+            tickValues: tickValues,
+            tickFormat: tickFormat,
+        };
+        var xAxisLabels = _points.current
+            .map(function (point) { return point.data.map(function (dp) { return dp.x; }); })
+            .flat();
+        _xAxisLabels = Array.from(new Set(xAxisLabels));
+        return !_isChartEmpty() ? (React.createElement(index_3.CartesianChart, tslib_1.__assign({}, props, { ref: cartesianChartRef, chartTitle: props.data.chartTitle, isCalloutForStack: true, points: points, chartType: index_4.ChartTypes.ScatterChart, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, getmargins: _getMargins, getMinMaxOfYAxis: _getMinMaxofXAxis, getDomainNRangeValues: getDomainNRangeValuesScatterChart, createYAxis: index_2.createNumericYAxis, createStringYAxis: index_2.createStringYAxis, getGraphData: _initializeScatterChartData, xAxisType: _xAxisType, onChartMouseLeave: _handleChartMouseLeave, enableFirstRenderOptimization: _firstRenderOptimization, datasetForXAxisDomain: _xAxisLabels, componentRef: cartesianChartRef, 
+            /* eslint-disable react/jsx-no-bind */
+            // eslint-disable-next-line react/no-children-prop
+            children: function (childProps) {
+                _xAxisScale.current = childProps.xScale;
+                _yAxisScale.current = childProps.yScalePrimary;
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("g", null,
+                        React.createElement("line", { x1: 0, y1: 0, x2: 0, y2: childProps.containerHeight, stroke: '#323130', id: _verticalLine, visibility: 'hidden', strokeDasharray: '5,5' }),
+                        React.createElement("g", null, renderSeries.current))));
+            } }))) : (React.createElement("div", { id: _emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+    });
+    exports.ScatterChartBase.displayName = 'ScatterChart';
+});
+//# sourceMappingURL=ScatterChart.base.js.map

package/lib-amd/components/ScatterChart/ScatterChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.base.js","sourceRoot":"../src/","sources":["components/ScatterChart/ScatterChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IChildProps, IScatterChartStyleProps, IScatterChartStyles, IScatterChartProps } from './ScatterChart.types';\nimport { Axis as D3Axis } from 'd3-axis';\nimport { select as d3Select } from 'd3-selection';\nimport { ILegend, ILegendContainer, Legends } from '../Legends/index';\nimport { max as d3Max, min as d3Min } from 'd3-array';\nimport {\n  areArraysEqual,\n  createNumericYAxis,\n  createStringYAxis,\n  domainRangeOfDateForScatterChart,\n  domainRangeOfNumericForScatterChart,\n  domainRangeOfXStringAxis,\n  findNumericMinMaxOfY,\n  YAxisType,\n} from '../../utilities/index';\nimport {\n  IAccessibilityProps,\n  CartesianChart,\n  ICustomizedCalloutData,\n  IMargins,\n  IRefArrayData,\n  IChart,\n} from '../../index';\nimport {\n  calloutData,\n  ChartTypes,\n  XAxisTypes,\n  tooltipOfAxislabels,\n  getTypeOfAxis,\n  getNextColor,\n  getColorFromToken,\n} from '../../utilities/index';\nimport { classNamesFunction, DirectionalHint, find, getId, getRTL } from '@fluentui/react';\nimport { IImageExportOptions, IScatterChartDataPoint, IScatterChartPoints } from '../../types/index';\nimport { toImage as convertToImage } from '../../utilities/image-export-utils';\nimport { formatDateToLocaleString } from '@fluentui/chart-utilities';\nimport { ScaleLinear } from 'd3-scale';\n\ntype NumericAxis = D3Axis<number | { valueOf(): number }>;\n\ntype ScatterChartDataWithIndex = IScatterChartPoints & { index: number };\nconst getClassNames = classNamesFunction<IScatterChartStyleProps, IScatterChartStyles>();\n\n// Create a ScatterChart variant which uses these default styles and this styled subcomponent.\n/**\n * ScatterChart component\n * {@docCategory ScatterChart}\n */\nexport const ScatterChartBase: React.FunctionComponent<IScatterChartProps> = React.forwardRef<\n  HTMLDivElement,\n  IScatterChartProps\n>((props, forwardedRef) => {\n  const _circleId = React.useMemo(() => getId('circle'), []);\n  const _seriesId: string = React.useMemo(() => getId('seriesID'), []);\n  const _verticalLine: string = React.useMemo(() => getId('verticalLine'), []);\n  const _tooltipId: string = React.useMemo(() => getId('ScatterChartTooltipId_'), []);\n  const _firstRenderOptimization = true;\n  const _emptyChartId: string = React.useMemo(() => getId('_ScatterChart_empty'), []);\n  const _points = React.useRef<ScatterChartDataWithIndex[]>(\n    _injectIndexPropertyInScatterChartData(props.data.scatterChartData),\n  );\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  let _calloutPoints = React.useMemo(() => calloutData(_points.current as any) || [], [_points]);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const _xAxisScale: any = React.useRef<any>('');\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const _yAxisScale: any = React.useRef<any>('');\n  const _uniqueCallOutID = React.useRef<string | null>(null);\n  const _refArray = React.useMemo(() => [], []);\n  const margins = React.useRef<IMargins | null>(null);\n  const renderSeries = React.useRef<JSX.Element[]>([]);\n  let _xAxisLabels: string[] = [];\n  const _xAxisCalloutAccessibilityData: IAccessibilityProps = {};\n  const _xBandwidth = React.useRef<number>(0);\n  const cartesianChartRef = React.useRef<IChart>(null);\n  const legendsRef = React.useRef<ILegendContainer>(null);\n\n  const [hoverXValue, setHoverXValue] = React.useState<string | number>('');\n  const [activeLegend, setActiveLegend] = React.useState<string>('');\n  const [YValueHover, setYValueHover] = React.useState<[]>([]);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const [selectedLegendPoints, setSelectedLegendPoints] = React.useState<any[]>([]);\n  const [isSelectedLegend, setIsSelectedLegend] = React.useState<boolean>(false);\n  const [activePoint, setActivePoint] = React.useState<string>('');\n  const [stackCalloutProps, setStackCalloutProps] = React.useState<ICustomizedCalloutData>();\n  const [isCalloutVisible, setCalloutVisible] = React.useState(false);\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>([]);\n  const [refSelected, setRefSelected] = React.useState<string>('');\n  const prevPropsRef = React.useRef<IScatterChartProps | null>(null);\n\n  const classNames = getClassNames(props.styles!, {\n    theme: props.theme!,\n  });\n\n  React.useEffect(() => {\n    if (prevPropsRef.current) {\n      const prevProps = prevPropsRef.current;\n      if (!areArraysEqual(prevProps.legendProps?.selectedLegends, props.legendProps?.selectedLegends)) {\n        setSelectedLegends(props.legendProps?.selectedLegends || []);\n      }\n    }\n    prevPropsRef.current = props;\n  }, [props]);\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      chartContainer: cartesianChartRef.current?.chartContainer ?? null,\n      toImage: (opts?: IImageExportOptions): Promise<string> => {\n        return convertToImage(cartesianChartRef.current?.chartContainer, legendsRef.current?.toSVG, getRTL(), opts);\n      },\n    }),\n    [],\n  );\n\n  const _xAxisType: XAxisTypes =\n    props.data.scatterChartData! &&\n    props.data.scatterChartData!.length > 0 &&\n    props.data.scatterChartData![0].data &&\n    props.data.scatterChartData![0].data.length > 0\n      ? (getTypeOfAxis(props.data.scatterChartData![0].data[0].x, true) as XAxisTypes)\n      : XAxisTypes.StringAxis;\n\n  const pointsRef = React.useRef<ScatterChartDataWithIndex[] | []>([]);\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const calloutPointsRef = React.useRef<any[]>([]);\n  React.useEffect(() => {\n    /** note that height and width are not used to resize or set as dimesions of the chart,\n     * fitParentContainer is responisble for setting the height and width or resizing of the svg/chart\n     */\n\n    if (\n      _points.current !== _injectIndexPropertyInScatterChartData(props.data.scatterChartData) ||\n      props.data !== _points.current\n    ) {\n      pointsRef.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);\n      calloutPointsRef.current = calloutData(pointsRef.current);\n    }\n  }, [props.height, props.width, props.data, _points]);\n\n  function _injectIndexPropertyInScatterChartData(\n    scatterChartData?: IScatterChartPoints[],\n  ): ScatterChartDataWithIndex[] | [] {\n    return scatterChartData\n      ? scatterChartData.map((item: IScatterChartPoints, index: number) => {\n          let color: string;\n          if (typeof item.color === 'undefined') {\n            color = getNextColor(index, 0);\n          } else {\n            color = getColorFromToken(item.color);\n          }\n          return {\n            ...item,\n            index: -1,\n            color,\n          };\n        })\n      : [];\n  }\n\n  const _getMargins = React.useCallback((_margins: IMargins) => {\n    margins.current = _margins;\n  }, []);\n\n  function _onHoverCardHide() {\n    setSelectedLegendPoints([]);\n    setIsSelectedLegend(false);\n  }\n\n  function _createLegends(data: ScatterChartDataWithIndex[]): JSX.Element {\n    const { legendProps } = props;\n    const isLegendMultiSelectEnabled = !!(legendProps && !!legendProps.canSelectMultipleLegends);\n    const mapLegendToPoints: Record<string, ScatterChartDataWithIndex[]> = {};\n    data.forEach((point: ScatterChartDataWithIndex) => {\n      if (point.legend) {\n        if (!mapLegendToPoints[point.legend]) {\n          mapLegendToPoints[point.legend] = [];\n        }\n        mapLegendToPoints[point.legend].push(point);\n      }\n    });\n    const legendDataItems: ILegend[] = Object.entries(mapLegendToPoints).map(([legendTitle, points]) => {\n      const representativePoint = points[0];\n      // mapping data to the format Legends component needs\n      const legend: ILegend = {\n        title: legendTitle,\n        color: representativePoint.color!,\n        onMouseOutAction: () => {\n          setActiveLegend('');\n        },\n        hoverAction: () => {\n          _handleChartMouseLeave();\n          setActiveLegend(legendTitle);\n        },\n        ...(representativePoint.legendShape && {\n          shape: representativePoint.legendShape,\n        }),\n      };\n      return legend;\n    });\n\n    return (\n      <Legends\n        legends={[...legendDataItems]}\n        enabledWrapLines={props.enabledLegendsWrapLines}\n        overflowProps={props.legendsOverflowProps}\n        focusZonePropsInHoverCard={props.focusZonePropsForLegendsInHoverCard}\n        overflowText={props.legendsOverflowText}\n        {...(isLegendMultiSelectEnabled && { onLegendHoverCardLeave: _onHoverCardHide })}\n        onChange={_onLegendSelectionChange}\n        {...props.legendProps}\n      />\n    );\n  }\n\n  function _onLegendSelectionChange(\n    legendsSelected: string[],\n    event: React.MouseEvent<HTMLButtonElement>,\n    currentLegend?: ILegend,\n  ): void {\n    if (props.legendProps?.canSelectMultipleLegends) {\n      setSelectedLegends(legendsSelected);\n    } else {\n      setSelectedLegends(legendsSelected.slice(-1));\n    }\n\n    if (props.legendProps?.onChange) {\n      props.legendProps.onChange(legendsSelected, event, currentLegend);\n    }\n  }\n\n  const _getPointFill = React.useCallback(\n    (lineColor: string, pointId: string) => {\n      const { theme } = props;\n      if (activePoint === pointId) {\n        return theme!.semanticColors.bodyBackground;\n      } else {\n        return lineColor;\n      }\n    },\n    [activePoint, props],\n  );\n\n  const getDomainNRangeValuesScatterChart = React.useCallback(\n    (\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      points: any,\n      domainMargins: IMargins,\n      width: number,\n      _chartType: ChartTypes,\n      isRTL: boolean,\n      xAxisType: XAxisTypes,\n      _barWidth: number,\n      tickValues: number[] | Date[] | string[] | undefined,\n    ) => {\n      if (xAxisType === XAxisTypes.NumericAxis) {\n        return domainRangeOfNumericForScatterChart(points, domainMargins, width, isRTL);\n      } else if (xAxisType === XAxisTypes.DateAxis) {\n        return domainRangeOfDateForScatterChart(points, domainMargins, width, isRTL, tickValues! as Date[]);\n      }\n      // String Axis type\n      return domainRangeOfXStringAxis(domainMargins, width, isRTL);\n    },\n    [],\n  );\n\n  const _handleFocus = React.useCallback(\n    (\n      seriesId: string,\n      x: number | Date | string,\n      xAxisCalloutData: string | undefined,\n      circleId: string,\n      xAxisCalloutAccessibilityData?: IAccessibilityProps,\n    ) => {\n      _uniqueCallOutID.current = circleId;\n      const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;\n      const xVal = x instanceof Date ? x.getTime() : x;\n      const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal) as\n        | { x: string | number; values: [] }\n        | undefined;\n      // if no points need to be called out then don't show vertical line and callout card\n      if (found) {\n        d3Select(`#${_verticalLine}`)\n          .attr('transform', () => `translate(${_xAxisScale.current?.(x) + _xBandwidth.current}, 0)`)\n          .attr('visibility', 'visibility');\n        _refArray.forEach((obj: IRefArrayData) => {\n          if (obj.index === seriesId) {\n            setCalloutVisible(true);\n            xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);\n            setRefSelected(`#${circleId}`);\n            setYValueHover(found!.values);\n            setActivePoint(circleId);\n          }\n        });\n      } else {\n        setActivePoint(circleId);\n      }\n    },\n    [_verticalLine, _xAxisScale, _xBandwidth, _calloutPoints, _refArray, props.culture, props.useUTC],\n  );\n\n  const _handleHover = React.useCallback(\n    (\n      x: number | Date | string,\n      y: number | Date,\n      lineHeight: number,\n      xAxisCalloutData: string | undefined,\n      circleId: string,\n      xAxisCalloutAccessibilityData: IAccessibilityProps | undefined,\n      mouseEvent: React.MouseEvent<SVGElement>,\n    ) => {\n      mouseEvent?.persist();\n      const formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;\n      const xVal = x instanceof Date ? x.getTime() : x;\n      const found = find(_calloutPoints, (element: { x: string | number }) => element.x === xVal) as\n        | { x: string | number; values: [] }\n        | undefined;\n      // if no points need to be called out then don't show vertical line and callout card\n      if (found) {\n        d3Select(`#${_verticalLine}`)\n          .attr(\n            'transform',\n            () => `translate(${_xAxisScale.current?.(x) + _xBandwidth.current}, ${_yAxisScale.current?.(y)})`,\n          )\n          .attr('visibility', 'visibility')\n          .attr('y2', `${lineHeight - _yAxisScale.current?.(y)}`);\n\n        if (_uniqueCallOutID.current !== circleId) {\n          _uniqueCallOutID.current = circleId;\n          setCalloutVisible(true);\n          xAxisCalloutData ? setHoverXValue(xAxisCalloutData) : setHoverXValue('' + formattedData);\n          setRefSelected(`#${circleId}`);\n          setYValueHover(found.values);\n          setStackCalloutProps(found!);\n          setActivePoint(circleId);\n        }\n      } else {\n        setActivePoint(circleId);\n      }\n    },\n    [_verticalLine, _xAxisScale, _xBandwidth, _calloutPoints, props.culture, props.useUTC],\n  );\n\n  const _handleMouseOut = React.useCallback(() => {\n    d3Select(`#${_verticalLine}`).attr('visibility', 'hidden');\n  }, [_verticalLine]);\n\n  const _handleChartMouseLeave = React.useCallback(() => {\n    _uniqueCallOutID.current = null;\n    setActivePoint('');\n    if (isCalloutVisible) {\n      setCalloutVisible(false);\n    }\n  }, [_uniqueCallOutID, isCalloutVisible, setActivePoint, setCalloutVisible]);\n\n  /**\n   * This function checks if none of the legends is selected or hovered.*/\n\n  const _noLegendHighlighted = React.useCallback((): boolean => {\n    return selectedLegends.length === 0;\n  }, [selectedLegends]);\n\n  const _getHighlightedLegend = React.useCallback((): string[] => {\n    return selectedLegends.length > 0 ? selectedLegends : activeLegend ? [activeLegend] : [];\n  }, [selectedLegends, activeLegend]);\n\n  /**\n   * This function checks if the given legend is highlighted or not.\n   * A legend can be highlighted in 2 ways:\n   * 1. selection: if the user clicks on it\n   * 2. hovering: if there is no selected legend and the user hovers over it*/\n\n  const _legendHighlighted = React.useCallback(\n    (legend: string): boolean => {\n      return _getHighlightedLegend().includes(legend);\n    },\n    [_getHighlightedLegend],\n  );\n\n  const _getAriaLabel = React.useCallback(\n    (seriesIndex: number, pointIndex: number): string => {\n      const series = _points.current?.[seriesIndex];\n      const point = series.data[pointIndex];\n      const formattedDate =\n        point.x instanceof Date ? formatDateToLocaleString(point.x, props.culture, props.useUTC) : point.x;\n      const xValue = point.xAxisCalloutData || formattedDate;\n      const legend = series.legend;\n      const yValue = point.yAxisCalloutData || point.y;\n      return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;\n    },\n    [_points, props.culture, props.useUTC],\n  );\n\n  function _getRangeForScatterMarkerSize(\n    yScale: ScaleLinear<number, number>,\n    yPadding: number,\n    xMin: number,\n    xMax: number,\n    xPadding: number,\n  ): number {\n    const extraXPixels = getRTL()\n      ? _xAxisScale.current?.(xMax - xPadding) - _xAxisScale.current?.(xMax)\n      : _xAxisScale.current?.(xMin + xPadding) - _xAxisScale.current?.(xMin);\n\n    const yMin = yScale.domain()[0];\n    const extraYPixels = yScale(yMin) - yScale(yMin + yPadding);\n    return Math.min(extraXPixels, extraYPixels);\n  }\n\n  const _createPlot = React.useCallback(\n    (xElement: SVGElement, containerHeight: number): JSX.Element[] => {\n      const series: JSX.Element[] = [];\n      if (isSelectedLegend) {\n        _points.current = selectedLegendPoints;\n      } else {\n        _points.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);\n      }\n\n      const yMax = d3Max(_points.current, (point: IScatterChartPoints) => {\n        return d3Max(point.data as IScatterChartDataPoint[], (item: IScatterChartDataPoint) => item.y)!;\n      })!;\n      const yMin = d3Min(_points.current, (point: IScatterChartPoints) => {\n        return d3Min(point.data as IScatterChartDataPoint[], (item: IScatterChartDataPoint) => item.y)!;\n      })!;\n      const yPadding = (yMax - yMin) * 0.1;\n\n      let xPadding = 0;\n      let xMin: number = 0;\n      let xMax: number = 0;\n      if (_xAxisType === XAxisTypes.StringAxis) {\n        _xBandwidth.current = _xAxisScale.current?.bandwidth() / 2;\n      } else if (_xAxisType === XAxisTypes.DateAxis) {\n        xMin = d3Min(_points.current, (point: IScatterChartPoints) => {\n          return d3Min(point.data as IScatterChartDataPoint[], (item: IScatterChartDataPoint) => item.x as Date)!;\n        })!.getTime();\n\n        xMax = d3Max(_points.current, (point: IScatterChartPoints) => {\n          return d3Max(point.data as IScatterChartDataPoint[], (item: IScatterChartDataPoint) => {\n            return item.x as Date;\n          });\n        })!.getTime();\n\n        xPadding = (xMax - xMin) * 0.1;\n      } else {\n        xMin = d3Min(_points.current, (point: IScatterChartPoints) => {\n          return d3Min(point.data as IScatterChartDataPoint[], (item: IScatterChartDataPoint) => item.x as number)!;\n        })!;\n\n        xMax = d3Max(_points.current, (point: IScatterChartPoints) => {\n          return d3Max(point.data as IScatterChartDataPoint[], (item: IScatterChartDataPoint) => {\n            return item.x as number;\n          });\n        })!;\n\n        xPadding = (xMax - xMin) * 0.1;\n      }\n\n      const maxMarkerSize = d3Max(_points.current, (point: IScatterChartPoints) => {\n        return d3Max(point.data as IScatterChartDataPoint[], (item: IScatterChartDataPoint) => {\n          return item.markerSize as number;\n        });\n      })!;\n\n      for (let i = _points.current?.length - 1; i >= 0; i--) {\n        const pointsForSeries: JSX.Element[] = [];\n\n        const legendVal: string = _points.current?.[i]?.legend;\n        const seriesColor: string = _points.current?.[i]?.color!;\n        const verticaLineHeight = containerHeight - (margins.current?.bottom ?? 0) + 6;\n\n        for (let j = 0; j < _points.current?.[i]?.data?.length; j++) {\n          const seriesId = `${_seriesId}_${i}_${j}`;\n          const circleId = `${_circleId}_${i}_${j}`;\n          const { x, y, xAxisCalloutData, xAxisCalloutAccessibilityData } = _points.current?.[i]?.data[j];\n          const pointMarkerSize = (_points.current?.[i]?.data[j] as IScatterChartDataPoint).markerSize;\n          const extraMaxPixels =\n            _xAxisType !== XAxisTypes.StringAxis\n              ? _getRangeForScatterMarkerSize(_yAxisScale.current, yPadding, xMin, xMax, xPadding)\n              : 0;\n          const minPixel = 4;\n          const maxPixel = 16;\n          const circleRadius =\n            pointMarkerSize && maxMarkerSize !== 0\n              ? _xAxisType !== XAxisTypes.StringAxis\n                ? (pointMarkerSize * extraMaxPixels) / maxMarkerSize\n                : minPixel + ((pointMarkerSize - minPixel) / (maxMarkerSize - minPixel)) * (maxPixel - minPixel)\n              : activePoint === circleId\n              ? 6\n              : 4;\n\n          const isLegendSelected: boolean = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;\n\n          const currentPointHidden = _points.current?.[i]?.hideNonActiveDots && activePoint !== circleId;\n          const text = _points.current?.[i].data[j]?.text;\n          pointsForSeries.push(\n            <>\n              <circle\n                id={circleId}\n                key={circleId}\n                r={Math.max(circleRadius, 4)}\n                cx={_xAxisScale.current?.(x) + _xBandwidth.current}\n                cy={_yAxisScale.current?.(y)}\n                data-is-focusable={isLegendSelected}\n                onMouseOver={(event: React.MouseEvent<SVGElement>) =>\n                  _handleHover(\n                    x,\n                    y,\n                    verticaLineHeight,\n                    xAxisCalloutData,\n                    circleId,\n                    xAxisCalloutAccessibilityData,\n                    event,\n                  )\n                }\n                onMouseMove={(event: React.MouseEvent<SVGElement>) =>\n                  _handleHover(\n                    x,\n                    y,\n                    verticaLineHeight,\n                    xAxisCalloutData,\n                    circleId,\n                    xAxisCalloutAccessibilityData,\n                    event,\n                  )\n                }\n                onMouseOut={_handleMouseOut}\n                onFocus={() => _handleFocus(seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}\n                onBlur={_handleMouseOut}\n                {..._getClickHandler(_points.current?.[i]?.data[j]?.onDataPointClick)}\n                opacity={isLegendSelected && !currentPointHidden ? 1 : 0.1}\n                fill={_getPointFill(seriesColor, circleId)}\n                stroke={seriesColor}\n                role=\"img\"\n                aria-label={_getAriaLabel(i, j)}\n                tabIndex={_points.current?.[i]?.legend !== '' ? 0 : undefined}\n              />\n              {text && (\n                <text\n                  key={`${circleId}-label`}\n                  x={_xAxisScale.current?.(x) + _xBandwidth.current}\n                  y={_yAxisScale.current?.(y) + Math.max(circleRadius + 12, 16)}\n                  className={classNames.markerLabel}\n                >\n                  {text}\n                </text>\n              )}\n            </>,\n          );\n        }\n\n        series.push(\n          <g\n            key={`series_${i}`}\n            role=\"region\"\n            aria-label={`${legendVal}, series ${i + 1} of ${_points.current?.length} with ${\n              _points.current?.[i]?.data?.length\n            } data points.`}\n          >\n            {pointsForSeries}\n          </g>,\n        );\n      }\n\n      // Removing un wanted tooltip div from DOM, when prop not provided.\n      if (!props.showXAxisLablesTooltip) {\n        try {\n          document.getElementById(_tooltipId) && document.getElementById(_tooltipId)!.remove();\n          // eslint-disable-next-line no-empty\n        } catch (e) {}\n      }\n      // Used to display tooltip at x axis labels.\n      if (!props.wrapXAxisLables && props.showXAxisLablesTooltip) {\n        const xAxisElement = d3Select(xElement).call(_xAxisScale.current);\n        try {\n          document.getElementById(_tooltipId) && document.getElementById(_tooltipId)!.remove();\n          // eslint-disable-next-line no-empty\n        } catch (e) {}\n        const tooltipProps = {\n          tooltipCls: classNames.tooltip!,\n          id: _tooltipId,\n          xAxis: xAxisElement,\n        };\n        xAxisElement && tooltipOfAxislabels(tooltipProps);\n      }\n      return series;\n    },\n    [\n      _xAxisScale,\n      _yAxisScale,\n      props.data.scatterChartData,\n      props.showXAxisLablesTooltip,\n      props.wrapXAxisLables,\n      _circleId,\n      _getAriaLabel,\n      _getPointFill,\n      _handleFocus,\n      _handleHover,\n      _handleMouseOut,\n      _legendHighlighted,\n      _noLegendHighlighted,\n      _seriesId,\n      _tooltipId,\n      _xAxisType,\n      activePoint,\n      isSelectedLegend,\n      selectedLegendPoints,\n      classNames,\n    ],\n  );\n\n  const _initializeScatterChartData = React.useCallback(\n    (\n      xScale: NumericAxis,\n      yScale: NumericAxis,\n      containerHeight: number,\n      containerWidth: number,\n      xElement: SVGElement | null,\n    ) => {\n      _xAxisScale.current = xScale;\n      _yAxisScale.current = yScale;\n      renderSeries.current = _createPlot(xElement!, containerHeight!);\n    },\n    [renderSeries, _xAxisScale, _yAxisScale, _createPlot],\n  );\n\n  /**\n   * Screen readers announce an element as clickable if the onClick attribute is set.\n   * This function sets the attribute only when a click event handler is provided.*/\n\n  function _getClickHandler(func?: () => void): { onClick?: () => void } {\n    if (func) {\n      return {\n        onClick: func,\n      };\n    }\n\n    return {};\n  }\n\n  function _isChartEmpty(): boolean {\n    return !(\n      props.data &&\n      props.data.scatterChartData &&\n      props.data.scatterChartData.length > 0 &&\n      props.data.scatterChartData.filter((item: IScatterChartPoints) => item.data.length).length > 0\n    );\n  }\n\n  function _closeCallout() {\n    setCalloutVisible(false);\n  }\n\n  function _getNumericMinMaxOfY(\n    points: IScatterChartPoints[],\n    yAxisType?: YAxisType,\n  ): { startValue: number; endValue: number } {\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const { startValue, endValue } = findNumericMinMaxOfY(points, yAxisType);\n    let yPadding = 0;\n    yPadding = (endValue - startValue) * 0.1;\n\n    return {\n      startValue: startValue - yPadding,\n      endValue: endValue + yPadding,\n    };\n  }\n\n  const _getMinMaxofXAxis = React.useCallback(\n    (points, yAxisType) => _getNumericMinMaxOfY(points as IScatterChartPoints[], yAxisType),\n    [],\n  );\n\n  const { legendProps, tickValues, tickFormat } = props;\n  _points.current = _injectIndexPropertyInScatterChartData(props.data.scatterChartData);\n\n  let points = _points.current as IScatterChartPoints[];\n  if (legendProps && !!legendProps.canSelectMultipleLegends) {\n    points = selectedLegendPoints.length >= 1 ? selectedLegendPoints : _points.current;\n    _calloutPoints = calloutData(points);\n  }\n\n  let legendBars = null;\n  // reduce computation cost by only creating legendBars\n  // if when hideLegend is false.\n  // NOTE: they are rendered only when hideLegend is false in CartesianChart.\n  if (!props.hideLegend) {\n    legendBars = _createLegends(_points.current!); // ToDo: Memoize legends to improve performance.\n  }\n  const calloutProps = {\n    isCalloutVisible,\n    directionalHint: DirectionalHint.topAutoEdge,\n    YValueHover,\n    hoverXValue,\n    id: `toolTip${_uniqueCallOutID.current}`,\n    target: refSelected,\n    isBeakVisible: false,\n    gapSpace: 15,\n    onDismiss: _closeCallout,\n    preventDismissOnEvent: () => true,\n    hidden: !(!props.hideTooltip && isCalloutVisible),\n    descriptionMessage:\n      props.getCalloutDescriptionMessage && stackCalloutProps\n        ? props.getCalloutDescriptionMessage(stackCalloutProps)\n        : undefined,\n    'data-is-focusable': true,\n    xAxisCalloutAccessibilityData: _xAxisCalloutAccessibilityData,\n    ...props.calloutProps,\n  };\n  const tickParams = {\n    tickValues,\n    tickFormat,\n  };\n\n  const xAxisLabels: string[] = _points.current\n    .map((point: ScatterChartDataWithIndex) => point.data.map((dp: IScatterChartDataPoint) => dp.x as string))\n    .flat();\n\n  _xAxisLabels = Array.from(new Set(xAxisLabels));\n\n  return !_isChartEmpty() ? (\n    <CartesianChart\n      {...props}\n      ref={cartesianChartRef}\n      chartTitle={props.data.chartTitle}\n      isCalloutForStack\n      points={points}\n      chartType={ChartTypes.ScatterChart}\n      calloutProps={calloutProps}\n      tickParams={tickParams}\n      legendBars={legendBars}\n      getmargins={_getMargins}\n      getMinMaxOfYAxis={_getMinMaxofXAxis}\n      getDomainNRangeValues={getDomainNRangeValuesScatterChart}\n      createYAxis={createNumericYAxis}\n      createStringYAxis={createStringYAxis}\n      getGraphData={_initializeScatterChartData}\n      xAxisType={_xAxisType}\n      onChartMouseLeave={_handleChartMouseLeave}\n      enableFirstRenderOptimization={_firstRenderOptimization}\n      datasetForXAxisDomain={_xAxisLabels}\n      componentRef={cartesianChartRef}\n      /* eslint-disable react/jsx-no-bind */\n      // eslint-disable-next-line react/no-children-prop\n      children={(childProps: IChildProps) => {\n        _xAxisScale.current = childProps.xScale!;\n        _yAxisScale.current = childProps.yScalePrimary!;\n        return (\n          <>\n            <g>\n              <line\n                x1={0}\n                y1={0}\n                x2={0}\n                y2={childProps.containerHeight}\n                stroke={'#323130'}\n                id={_verticalLine}\n                visibility={'hidden'}\n                strokeDasharray={'5,5'}\n              />\n              <g>{renderSeries.current}</g>\n            </g>\n          </>\n        );\n      }}\n    />\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n});\nScatterChartBase.displayName = 'ScatterChart';\n"]}

package/lib-amd/components/ScatterChart/ScatterChart.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IScatterChartProps } from './ScatterChart.types';
+/**
+ * Scatterchart component
+ * {@docCategory ScatterChart}
+ */
+export declare const ScatterChart: React.FunctionComponent<IScatterChartProps>;

package/lib-amd/components/ScatterChart/ScatterChart.js

@@ -0,0 +1,12 @@
+define(["require", "exports", "@fluentui/react/lib/Utilities", "./ScatterChart.base", "./ScatterChart.styles"], function (require, exports, Utilities_1, ScatterChart_base_1, ScatterChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ScatterChart = void 0;
+    // Create a ScatterChart variant which uses these default styles and this styled subcomponent.
+    /**
+     * Scatterchart component
+     * {@docCategory ScatterChart}
+     */
+    exports.ScatterChart = (0, Utilities_1.styled)(ScatterChart_base_1.ScatterChartBase, ScatterChart_styles_1.getStyles);
+});
+//# sourceMappingURL=ScatterChart.js.map

package/lib-amd/components/ScatterChart/ScatterChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.js","sourceRoot":"../src/","sources":["components/ScatterChart/ScatterChart.tsx"],"names":[],"mappings":";;;;IAMA,8FAA8F;IAC9F;;;OAGG;IACU,QAAA,YAAY,GAAgD,IAAA,kBAAM,EAI7E,oCAAgB,EAAE,+BAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IScatterChartProps, IScatterChartStyleProps, IScatterChartStyles } from './ScatterChart.types';\nimport { ScatterChartBase } from './ScatterChart.base';\nimport { getStyles } from './ScatterChart.styles';\n\n// Create a ScatterChart variant which uses these default styles and this styled subcomponent.\n/**\n * Scatterchart component\n * {@docCategory ScatterChart}\n */\nexport const ScatterChart: React.FunctionComponent<IScatterChartProps> = styled<\n  IScatterChartProps,\n  IScatterChartStyleProps,\n  IScatterChartStyles\n>(ScatterChartBase, getStyles);\n"]}

package/lib-amd/components/ScatterChart/ScatterChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IScatterChartStyleProps, IScatterChartStyles } from './ScatterChart.types';
+export declare const getStyles: (props: IScatterChartStyleProps) => IScatterChartStyles;