@fluentui/react-charting 5.24.1 → 5.24.3

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

@@ -1,10 +1,18 @@
-define(["require", "exports", "tslib"], function (require, exports, tslib_1) {
+define(["require", "exports", "tslib", "@fluentui/react/lib/Styling"], function (require, exports, tslib_1, Styling_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.getStyles = void 0;
     var getStyles = function (props) {
+        var _a;
         return {
             tooltip: tslib_1.__assign(tslib_1.__assign({}, props.theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: props.theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none', color: props.theme.semanticColors.bodyText }),
+            markerLabel: {
+                selectors: (_a = {},
+                    _a[Styling_1.HighContrastSelector] = {
+                        fill: 'CanvasText',
+                    },
+                    _a),
+            },
         };
     };
     exports.getStyles = getStyles;

package/lib-amd/components/LineChart/LineChart.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.styles.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.styles.ts"],"names":[],"mappings":";;;;IAEO,IAAM,SAAS,GAAG,UAAC,KAA2B;QACnD,OAAO;YACL,OAAO,wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ,GAC5C;SACF,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,SAAS,aAgBpB","sourcesContent":["import { ILineChartStyleProps, ILineChartStyles } from './LineChart.types';\n\nexport const getStyles = (props: ILineChartStyleProps): ILineChartStyles => {\n  return {\n    tooltip: {\n      ...props.theme!.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: props.theme!.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n      color: props.theme!.semanticColors.bodyText,\n    },\n  };\n};\n"]}
+{"version":3,"file":"LineChart.styles.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,SAAS,GAAG,UAAC,KAA2B;;QACnD,OAAO;YACL,OAAO,wCACF,KAAK,CAAC,KAAM,CAAC,KAAK,CAAC,MAAM,KAC5B,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,cAAc,EACtD,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,EACrB,KAAK,EAAE,KAAK,CAAC,KAAM,CAAC,cAAc,CAAC,QAAQ,GAC5C;YACD,WAAW,EAAE;gBACX,SAAS;oBACP,GAAC,8BAAoB,IAAG;wBACtB,IAAI,EAAE,YAAY;qBACnB;uBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IAvBW,QAAA,SAAS,aAuBpB","sourcesContent":["import { HighContrastSelector } from '@fluentui/react/lib/Styling';\nimport { ILineChartStyleProps, ILineChartStyles } from './LineChart.types';\n\nexport const getStyles = (props: ILineChartStyleProps): ILineChartStyles => {\n  return {\n    tooltip: {\n      ...props.theme!.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      padding: '8px',\n      position: 'absolute',\n      textAlign: 'center',\n      top: '0px',\n      background: props.theme!.semanticColors.bodyBackground,\n      borderRadius: '2px',\n      pointerEvents: 'none',\n      color: props.theme!.semanticColors.bodyText,\n    },\n    markerLabel: {\n      selectors: {\n        [HighContrastSelector]: {\n          fill: 'CanvasText',\n        },\n      },\n    },\n  };\n};\n"]}

package/lib-amd/components/LineChart/LineChart.types.d.ts

@@ -2,6 +2,7 @@ import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Uti
 import { IChartProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData, ICustomizedCalloutData } from '../../types/index';
 import { IEventAnnotation } from '../../types/IEventAnnotation';
 import { ICartesianChartProps, ICartesianChartStyleProps, ICartesianChartStyles, IChildProps } from '../CommonComponents/index';
+import { IStyle } from '@fluentui/react/lib/Styling';
 export type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };
 /**
  * Line Chart properties
@@ -77,6 +78,7 @@ export interface IEventsAnnotationProps {
  * {@docCategory LineChart}
  */
 export interface ILineChartStyles extends ICartesianChartStyles {
+    markerLabel?: IStyle;
 }
 /**
  * Line Chart style properties

package/lib-amd/components/LineChart/LineChart.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.types.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  ILineChartPoints,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  ICustomizedCalloutData,\n} from '../../types/index';\nimport { IEventAnnotation } from '../../types/IEventAnnotation';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n} from '../CommonComponents/index';\n\nexport type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILineChartStyleProps, ILineChartStyles>;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: IEventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: IColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * The prop used to define line chart mode(default or scatter)\n   * @deprecated this prop no longer used to identify scatter mode\n   */\n  lineMode?: 'default' | 'scatter';\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IEventsAnnotationProps {\n  events: IEventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyles extends ICartesianChartStyles {}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: IColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"]}
+{"version":3,"file":"LineChart.types.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport {\n  IChartProps,\n  ILineChartPoints,\n  IMargins,\n  IBasestate,\n  IRefArrayData,\n  ICustomizedCalloutData,\n} from '../../types/index';\nimport { IEventAnnotation } from '../../types/IEventAnnotation';\nimport {\n  ICartesianChartProps,\n  ICartesianChartStyleProps,\n  ICartesianChartStyles,\n  IChildProps,\n} from '../CommonComponents/index';\nimport { IStyle } from '@fluentui/react/lib/Styling';\n\nexport type { IChildProps, ILineChartPoints, IMargins, IBasestate, IRefArrayData };\n\n/**\n * Line Chart properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartProps extends ICartesianChartProps {\n  /**\n   * Data to render in the chart.\n   */\n  data: IChartProps;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<ILineChartStyleProps, ILineChartStyles>;\n\n  /**\n   * Show event annotation\n   */\n  eventAnnotationProps?: IEventsAnnotationProps;\n\n  /**\n   * Define a custom callout renderer for a data point\n   */\n  onRenderCalloutPerDataPoint?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Define a custom callout renderer for a stack; default is to render per data point\n   */\n  onRenderCalloutPerStack?: IRenderFunction<ICustomizedCalloutData>;\n\n  /**\n   * Callback for getting callout description message\n   */\n  getCalloutDescriptionMessage?: (calloutDataProps: ICustomizedCalloutData) => string | undefined;\n\n  /*\n   * Color fill bars for the chart,\n   */\n  colorFillBars?: IColorFillBarsProps[];\n\n  /**\n   * if this is set to true, then for each line there will be a unique shape assigned to the point,\n   * there are total 8 shapes which are as follow circle, square, triangele, diamond, pyramid,\n   *  hexagon, pentagon and octagon, which will get assigned as respectively, if there are more\n   * than 8 lines in the line chart then it will again start from cicle to octagon.\n   * setting this flag to true will also change the behavior of the points, like for a\n   * line, last point shape and first point shape will be visible all the times, and all\n   * other points will get enlarge only when hovered over them\n   * if set to false default shape will be circle, with the existing behavior\n   * @default false\n   */\n  allowMultipleShapesForPoints?: boolean;\n\n  /*\n   * Optimize line chart rendering for large data set. If this prop is enabled, line chart\n   * can easily render over 10K datapoints with multiple lines smoothly.\n   * This rendering mechanism does not support gaps in lines.\n   */\n  optimizeLargeData?: boolean;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * @default false\n   * The prop used to enable the perf optimization\n   */\n  enablePerfOptimization?: boolean;\n\n  /**\n   * The prop used to define line chart mode(default or scatter)\n   * @deprecated this prop no longer used to identify scatter mode\n   */\n  lineMode?: 'default' | 'scatter';\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IEventsAnnotationProps {\n  events: IEventAnnotation[];\n  strokeColor?: string;\n  labelColor?: string;\n  labelHeight?: number;\n  labelWidth?: number;\n  mergedLabel: (count: number) => string;\n}\n\n/**\n * Line Chart styles\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyles extends ICartesianChartStyles {\n  markerLabel?: IStyle;\n}\n\n/**\n * Line Chart style properties\n * {@docCategory LineChart}\n */\nexport interface ILineChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarsProps {\n  legend: string;\n  color: string;\n  data: IColorFillBarData[];\n  applyPattern?: boolean;\n  onLegendClick?: (selectedLegend: string | string[] | null) => void | undefined;\n}\n\n/**\n * {@docCategory LineChart}\n */\nexport interface IColorFillBarData {\n  startX: number | Date;\n  endX: number | Date;\n}\n"]}

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

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

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

@@ -0,0 +1,447 @@
+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);
+        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 legendDataItems = data.map(function (point) {
+                var color = point.color;
+                // mapping data to the format Legends component needs
+                var legend = tslib_1.__assign({ title: point.legend, color: color, onMouseOutAction: function () {
+                        setActiveLegend('');
+                    }, hoverAction: function () {
+                        _handleChartMouseLeave();
+                        setActiveLegend(point.legend);
+                    } }, (point.legendShape && {
+                    shape: point.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]);
+        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, _8, _9;
+            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 yPaddingRange = Math.abs(((_a = _yAxisScale.current) === null || _a === void 0 ? void 0 : _a.call(_yAxisScale, yMin + yPadding)) - ((_b = _yAxisScale.current) === null || _b === void 0 ? void 0 : _b.call(_yAxisScale, yMin)));
+            var maxMarkerRange = 40;
+            var xPaddingRange = 0;
+            if (_xAxisType === index_4.XAxisTypes.StringAxis) {
+                _xBandwidth.current = ((_c = _xAxisScale.current) === null || _c === void 0 ? void 0 : _c.bandwidth()) / 2;
+                xPaddingRange = _xBandwidth.current;
+            }
+            else if (_xAxisType === index_4.XAxisTypes.DateAxis) {
+                var xMin = (0, d3_array_1.min)(_points.current, function (point) {
+                    return (0, d3_array_1.min)(point.data, function (item) { return item.x; });
+                });
+                var xMax = (0, d3_array_1.max)(_points.current, function (point) {
+                    return (0, d3_array_1.max)(point.data, function (item) {
+                        return item.x;
+                    });
+                });
+                var xPadding = (xMax.getTime() - xMin.getTime()) * 0.1;
+                xPaddingRange = Math.abs(((_d = _xAxisScale.current) === null || _d === void 0 ? void 0 : _d.call(_xAxisScale, new Date(xMin.getTime() + xPadding))) - ((_e = _xAxisScale.current) === null || _e === void 0 ? void 0 : _e.call(_xAxisScale, xMin)));
+            }
+            else {
+                var xMin = (0, d3_array_1.min)(_points.current, function (point) {
+                    return (0, d3_array_1.min)(point.data, function (item) { return item.x; });
+                });
+                var xMax = (0, d3_array_1.max)(_points.current, function (point) {
+                    return (0, d3_array_1.max)(point.data, function (item) {
+                        return item.x;
+                    });
+                });
+                var xPadding = (xMax - xMin) * 0.1;
+                xPaddingRange = Math.abs(((_f = _xAxisScale.current) === null || _f === void 0 ? void 0 : _f.call(_xAxisScale, xMin + xPadding)) - ((_g = _xAxisScale.current) === null || _g === void 0 ? void 0 : _g.call(_xAxisScale, xMin)));
+            }
+            maxMarkerRange = Math.min(maxMarkerRange, Math.min(xPaddingRange, yPaddingRange));
+            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 = (_k = (_j = _points.current) === null || _j === void 0 ? void 0 : _j[i]) === null || _k === void 0 ? void 0 : _k.legend;
+                var seriesColor = (_m = (_l = _points.current) === null || _l === void 0 ? void 0 : _l[i]) === null || _m === void 0 ? void 0 : _m.color;
+                var verticaLineHeight = containerHeight - ((_p = (_o = margins.current) === null || _o === void 0 ? void 0 : _o.bottom) !== null && _p !== void 0 ? _p : 0) + 6;
+                var _loop_2 = function (j) {
+                    var seriesId = "".concat(_seriesId, "_").concat(i, "_").concat(j);
+                    var circleId = "".concat(_circleId, "_").concat(i, "_").concat(j);
+                    var _10 = (_u = (_t = _points.current) === null || _t === void 0 ? void 0 : _t[i]) === null || _u === void 0 ? void 0 : _u.data[j], x = _10.x, y = _10.y, xAxisCalloutData = _10.xAxisCalloutData, xAxisCalloutAccessibilityData = _10.xAxisCalloutAccessibilityData;
+                    var circleRadius = 3.5;
+                    var pointMarkerSize = ((_w = (_v = _points.current) === null || _v === void 0 ? void 0 : _v[i]) === null || _w === void 0 ? void 0 : _w.data[j]).markerSize;
+                    if (pointMarkerSize !== undefined) {
+                        circleRadius = Math.min((pointMarkerSize * maxMarkerRange) / maxMarkerSize, pointMarkerSize);
+                    }
+                    var isLegendSelected = _legendHighlighted(legendVal) || _noLegendHighlighted() || isSelectedLegend;
+                    var currentPointHidden = ((_y = (_x = _points.current) === null || _x === void 0 ? void 0 : _x[i]) === null || _y === void 0 ? void 0 : _y.hideNonActiveDots) && activePoint !== circleId;
+                    pointsForSeries.push(React.createElement("circle", tslib_1.__assign({ id: circleId, key: circleId, r: circleRadius, cx: ((_z = _xAxisScale.current) === null || _z === void 0 ? void 0 : _z.call(_xAxisScale, x)) + _xBandwidth.current, cy: (_0 = _yAxisScale.current) === null || _0 === void 0 ? void 0 : _0.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((_3 = (_2 = (_1 = _points.current) === null || _1 === void 0 ? void 0 : _1[i]) === null || _2 === void 0 ? void 0 : _2.data[j]) === null || _3 === void 0 ? void 0 : _3.onDataPointClick), { opacity: isLegendSelected && !currentPointHidden ? 1 : 0.1, fill: _getPointFill(seriesColor, circleId), stroke: seriesColor, role: "img", "aria-label": _getAriaLabel(i, j), tabIndex: ((_5 = (_4 = _points.current) === null || _4 === void 0 ? void 0 : _4[i]) === null || _5 === void 0 ? void 0 : _5.legend) !== '' ? 0 : undefined })));
+                };
+                for (var j = 0; j < ((_s = (_r = (_q = _points.current) === null || _q === void 0 ? void 0 : _q[i]) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.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((_6 = _points.current) === null || _6 === void 0 ? void 0 : _6.length, " with ").concat((_9 = (_8 = (_7 = _points.current) === null || _7 === void 0 ? void 0 : _7[i]) === null || _8 === void 0 ? void 0 : _8.data) === null || _9 === void 0 ? void 0 : _9.length, " data points.") }, pointsForSeries));
+            };
+            for (var i = ((_h = _points.current) === null || _h === void 0 ? void 0 : _h.length) - 1; i >= 0; i--) {
+                _loop_1(i);
+            }
+            var classNames = getClassNames(props.styles, {
+                theme: props.theme,
+            });
+            // 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.theme,
+            props.styles,
+            props.showXAxisLablesTooltip,
+            props.wrapXAxisLables,
+            _circleId,
+            _getAriaLabel,
+            _getPointFill,
+            _handleFocus,
+            _handleHover,
+            _handleMouseOut,
+            _legendHighlighted,
+            _noLegendHighlighted,
+            _seriesId,
+            _tooltipId,
+            _xAxisType,
+            activePoint,
+            isSelectedLegend,
+            selectedLegendPoints,
+        ]);
+        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);
+        }
+        var _createStringYAxis = React.useCallback(function () {
+            var createStringAxisprops = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                createStringAxisprops[_i] = arguments[_i];
+            }
+            return index_2.createStringYAxis.apply(void 0, createStringAxisprops);
+        }, []);
+        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: index_2.findNumericMinMaxOfY, getDomainNRangeValues: getDomainNRangeValuesScatterChart, createYAxis: index_2.createYAxisForScatterChart, createStringYAxis: _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