@fluentui/react-charting 5.24.1 → 5.24.3

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

@@ -1,7 +1,16 @@
 import { __assign } from "tslib";
+import { HighContrastSelector } from '@fluentui/react/lib/Styling';
 export var getStyles = function (props) {
+    var _a;
     return {
         tooltip: __assign(__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[HighContrastSelector] = {
+                    fill: 'CanvasText',
+                },
+                _a),
+        },
     };
 };
 //# sourceMappingURL=LineChart.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LineChart.styles.js","sourceRoot":"../src/","sources":["components/LineChart/LineChart.styles.ts"],"names":[],"mappings":";AAEA,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA2B;IACnD,OAAO;QACL,OAAO,wBACF,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;KACF,CAAC;AACJ,CAAC,CAAC","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":";AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA2B;;IACnD,OAAO;QACL,OAAO,wBACF,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;QACD,WAAW,EAAE;YACX,SAAS;gBACP,GAAC,oBAAoB,IAAG;oBACtB,IAAI,EAAE,YAAY;iBACnB;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","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/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/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/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/components/ScatterChart/ScatterChart.base.js

@@ -0,0 +1,453 @@
+import { __assign, __spreadArray } from "tslib";
+import * as React from 'react';
+import { select as d3Select } from 'd3-selection';
+import { Legends } from '../Legends/index';
+import { max as d3Max, min as d3Min } from 'd3-array';
+import { areArraysEqual, createStringYAxis, createYAxisForScatterChart, domainRangeOfDateForScatterChart, domainRangeOfNumericForScatterChart, domainRangeOfXStringAxis, findNumericMinMaxOfY, } from '../../utilities/index';
+import { CartesianChart, } from '../../index';
+import { calloutData, ChartTypes, XAxisTypes, tooltipOfAxislabels, getTypeOfAxis, getNextColor, getColorFromToken, } from '../../utilities/index';
+import { classNamesFunction, DirectionalHint, find, getId, getRTL } from '@fluentui/react';
+import { toImage as convertToImage } from '../../utilities/image-export-utils';
+import { formatDateToLocaleString } from '@fluentui/chart-utilities';
+var getClassNames = classNamesFunction();
+// Create a ScatterChart variant which uses these default styles and this styled subcomponent.
+/**
+ * ScatterChart component
+ * {@docCategory ScatterChart}
+ */
+export var ScatterChartBase = React.forwardRef(function (props, forwardedRef) {
+    var _circleId = React.useMemo(function () { return getId('circle'); }, []);
+    var _seriesId = React.useMemo(function () { return getId('seriesID'); }, []);
+    var _verticalLine = React.useMemo(function () { return getId('verticalLine'); }, []);
+    var _tooltipId = React.useMemo(function () { return getId('ScatterChartTooltipId_'); }, []);
+    var _firstRenderOptimization = true;
+    var _emptyChartId = React.useMemo(function () { return 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 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 (!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 convertToImage((_a = cartesianChartRef.current) === null || _a === void 0 ? void 0 : _a.chartContainer, (_b = legendsRef.current) === null || _b === void 0 ? void 0 : _b.toSVG, getRTL(), opts);
+            },
+        });
+    }, []);
+    var _xAxisType = props.data.scatterChartData &&
+        props.data.scatterChartData.length > 0 &&
+        props.data.scatterChartData[0].data &&
+        props.data.scatterChartData[0].data.length > 0
+        ? getTypeOfAxis(props.data.scatterChartData[0].data[0].x, true)
+        : 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 = 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 = getNextColor(index, 0);
+                }
+                else {
+                    color = getColorFromToken(item.color);
+                }
+                return __assign(__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 = __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(Legends, __assign({ legends: __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 === XAxisTypes.NumericAxis) {
+            return domainRangeOfNumericForScatterChart(points, domainMargins, width, isRTL);
+        }
+        else if (xAxisType === XAxisTypes.DateAxis) {
+            return domainRangeOfDateForScatterChart(points, domainMargins, width, isRTL, tickValues);
+        }
+        // String Axis type
+        return domainRangeOfXStringAxis(domainMargins, width, isRTL);
+    }, []);
+    var _handleFocus = React.useCallback(function (seriesId, x, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData) {
+        _uniqueCallOutID.current = circleId;
+        var formattedData = x instanceof Date ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
+        var xVal = x instanceof Date ? x.getTime() : x;
+        var found = 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) {
+            d3Select("#".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 ? formatDateToLocaleString(x, props.culture, props.useUTC) : x;
+        var xVal = x instanceof Date ? x.getTime() : x;
+        var found = 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) {
+            d3Select("#".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 () {
+        d3Select("#".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 ? 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 = d3Max(_points.current, function (point) {
+            return d3Max(point.data, function (item) { return item.y; });
+        });
+        var yMin = d3Min(_points.current, function (point) {
+            return d3Min(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 === XAxisTypes.StringAxis) {
+            _xBandwidth.current = ((_c = _xAxisScale.current) === null || _c === void 0 ? void 0 : _c.bandwidth()) / 2;
+            xPaddingRange = _xBandwidth.current;
+        }
+        else if (_xAxisType === XAxisTypes.DateAxis) {
+            var xMin = d3Min(_points.current, function (point) {
+                return d3Min(point.data, function (item) { return item.x; });
+            });
+            var xMax = d3Max(_points.current, function (point) {
+                return d3Max(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 = d3Min(_points.current, function (point) {
+                return d3Min(point.data, function (item) { return item.x; });
+            });
+            var xMax = d3Max(_points.current, function (point) {
+                return d3Max(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 = d3Max(_points.current, function (point) {
+            return d3Max(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", __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 = d3Select(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 && 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 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 = 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 = __assign({ isCalloutVisible: isCalloutVisible, directionalHint: 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(CartesianChart, __assign({}, props, { ref: cartesianChartRef, chartTitle: props.data.chartTitle, isCalloutForStack: true, points: points, chartType: ChartTypes.ScatterChart, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, getmargins: _getMargins, getMinMaxOfYAxis: findNumericMinMaxOfY, getDomainNRangeValues: getDomainNRangeValuesScatterChart, createYAxis: 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' }));
+});
+ScatterChartBase.displayName = 'ScatterChart';
+//# sourceMappingURL=ScatterChart.base.js.map