@fluentui/react-charting 5.24.2 → 5.24.4

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

@@ -0,0 +1,485 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScatterChartBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var d3_selection_1 = require("d3-selection");
+var index_1 = require("../Legends/index");
+var d3_array_1 = require("d3-array");
+var index_2 = require("../../utilities/index");
+var index_3 = require("../../index");
+var index_4 = require("../../utilities/index");
+var react_1 = require("@fluentui/react");
+var image_export_utils_1 = require("../../utilities/image-export-utils");
+var chart_utilities_1 = require("@fluentui/chart-utilities");
+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-commonjs/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-commonjs/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-commonjs/components/ScatterChart/ScatterChart.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScatterChart = void 0;
+var Utilities_1 = require("@fluentui/react/lib/Utilities");
+var ScatterChart_base_1 = require("./ScatterChart.base");
+var ScatterChart_styles_1 = require("./ScatterChart.styles");
+// 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-commonjs/components/ScatterChart/ScatterChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.js","sourceRoot":"../src/","sources":["components/ScatterChart/ScatterChart.tsx"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD,yDAAuD;AACvD,6DAAkD;AAElD,8FAA8F;AAC9F;;;GAGG;AACU,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-commonjs/components/ScatterChart/ScatterChart.styles.d.ts

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