@fluentui/react-charting 5.16.24 → 5.16.25

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

@@ -0,0 +1,555 @@
+define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-selection", "d3-shape", "@fluentui/react/lib/Utilities", "../../index", "@fluentui/react/lib/Utilities", "../../utilities/index", "../Legends/index", "@fluentui/react/lib/Callout"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_selection_2, d3_shape_1, Utilities_1, index_1, Utilities_2, index_2, index_3, Callout_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.AreaChartBase = void 0;
+    var getClassNames = Utilities_1.classNamesFunction();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    var bisect = d3_array_1.bisector(function (d) { return d.x; }).left;
+    var COMPONENT_NAME = 'AREA CHART';
+    var InterceptVisibility;
+    (function (InterceptVisibility) {
+        InterceptVisibility["show"] = "visibility";
+        InterceptVisibility["hide"] = "hidden";
+    })(InterceptVisibility || (InterceptVisibility = {}));
+    var AreaChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(AreaChartBase, _super);
+        function AreaChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._getMargins = function (margins) {
+                _this.margins = margins;
+            };
+            _this._onRectMouseMove = function (mouseEvent) {
+                mouseEvent.persist();
+                var data = _this.props.data;
+                var lineChartData = data.lineChartData;
+                // This will get the value of the X when mouse is on the chart
+                var xOffset = _this._xAxisRectScale.invert(d3_selection_1.clientPoint(document.getElementById(_this._rectId), mouseEvent)[0]);
+                var i = bisect(lineChartData[0].data, xOffset);
+                var d0 = lineChartData[0].data[i - 1];
+                var d1 = lineChartData[0].data[i];
+                var axisType = null;
+                var pointToHighlight = null;
+                var index = null;
+                if (d0 === undefined && d1 !== undefined) {
+                    pointToHighlight = d1.x;
+                    index = i;
+                }
+                else if (d0 !== undefined && d1 === undefined) {
+                    pointToHighlight = d0.x;
+                    index = i - 1;
+                }
+                else {
+                    axisType = index_2.getTypeOfAxis(lineChartData[0].data[0].x, true);
+                    var x0 = void 0;
+                    var point0 = void 0;
+                    var point1 = void 0;
+                    switch (axisType) {
+                        case index_2.XAxisTypes.DateAxis:
+                            x0 = new Date(xOffset).getTime();
+                            point0 = d0.x.getTime();
+                            point1 = d1.x.getTime();
+                            pointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
+                            index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
+                            break;
+                        case index_2.XAxisTypes.NumericAxis:
+                            x0 = xOffset;
+                            point0 = d0.x;
+                            point1 = d1.x;
+                            pointToHighlight = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? d1.x : d0.x;
+                            index = Math.abs(x0 - point0) > Math.abs(x0 - point1) ? i : i - 1;
+                            break;
+                        default:
+                            break;
+                    }
+                }
+                var _a = lineChartData[0].data[index], xAxisCalloutData = _a.xAxisCalloutData, xAxisCalloutAccessibilityData = _a.xAxisCalloutAccessibilityData;
+                var formattedDate = pointToHighlight instanceof Date ? pointToHighlight.toLocaleString() : pointToHighlight;
+                var modifiedXVal = pointToHighlight instanceof Date ? pointToHighlight.getTime() : pointToHighlight;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var found = Utilities_1.find(_this._calloutPoints, function (element) {
+                    return element.x === modifiedXVal;
+                });
+                var nearestCircleToHighlight = axisType === index_2.XAxisTypes.DateAxis ? pointToHighlight.getTime() : pointToHighlight;
+                var pointToHighlightUpdated = _this.state.nearestCircleToHighlight !== nearestCircleToHighlight;
+                // if no points need to be called out then don't show vertical line and callout card
+                if (found && pointToHighlightUpdated && !_this.state.isShowCalloutPending) {
+                    _this.setState({
+                        nearestCircleToHighlight: nearestCircleToHighlight,
+                        isCalloutVisible: false,
+                        isShowCalloutPending: true,
+                        lineXValue: _this._xAxisRectScale(pointToHighlight),
+                        displayOfLine: InterceptVisibility.show,
+                        isCircleClicked: false,
+                        stackCalloutProps: found,
+                        YValueHover: found.values,
+                        dataPointCalloutProps: found,
+                        hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
+                        xAxisCalloutAccessibilityData: xAxisCalloutAccessibilityData,
+                        activePoint: '',
+                    });
+                }
+                else {
+                    /*
+                    When above if condition is false but found=true, it means either
+              
+                    1). pointToHighlightUpdated is false.
+                    For this case we dont need to do anything.
+              
+                    2). isShowCalloutPending is true.
+                    For this case there will be no callout updation for the event.
+                    This condition has been added to prevent repeated callout flashing.
+                    Currently there is a fraction of second delay between hover event and subsequent callout refresh.
+                    In the meantime if another event is received, the callout continues to flash for the set of
+                    intermediate hover events.
+              
+                    This does not cause any issue as the user interaction takes atleast a fraction of second and the final
+                    callout state is ultimately achieved.
+                    If a user performs very swift mouse maneuver, the intermediate events will be lost but the callout experience
+                    remains smooth.
+                    */
+                }
+                if (!found) {
+                    _this.setState({
+                        isCalloutVisible: false,
+                        nearestCircleToHighlight: nearestCircleToHighlight,
+                        displayOfLine: InterceptVisibility.hide,
+                        isCircleClicked: false,
+                    });
+                }
+            };
+            /**
+             * just cleaning up the state which we have set in the mouse move event
+             */
+            _this._onRectMouseOut = function () {
+                /**/
+            };
+            _this._handleChartMouseLeave = function () {
+                _this.setState({
+                    refSelected: null,
+                    isCalloutVisible: false,
+                    nearestCircleToHighlight: null,
+                    lineXValue: 0,
+                    displayOfLine: InterceptVisibility.hide,
+                    isCircleClicked: false,
+                    stackCalloutProps: undefined,
+                    dataPointCalloutProps: undefined,
+                    hoverXValue: undefined,
+                    YValueHover: [],
+                });
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._getStackedData = function (keys, dataSet) {
+                var stackedValues = d3_shape_1.stack().keys(keys)(dataSet);
+                var maxOfYVal = d3_array_1.max(stackedValues[stackedValues.length - 1], function (dp) { return dp[1]; });
+                var stackedData = [];
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                stackedValues.forEach(function (layer) {
+                    var currentStack = [];
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    layer.forEach(function (d) {
+                        currentStack.push({
+                            values: d,
+                            xVal: d.data.xVal,
+                        });
+                    });
+                    stackedData.push(currentStack);
+                });
+                _this._isMultiStackChart = stackedData && stackedData.length > 1 ? true : false;
+                return {
+                    stackedData: stackedData,
+                    maxOfYVal: maxOfYVal,
+                };
+            };
+            _this._createDataSet = function (points) {
+                var allChartPoints = [];
+                var dataSet = [];
+                var colors = [];
+                var opacity = [];
+                var calloutPoints = index_2.calloutData(points);
+                points &&
+                    points.length &&
+                    points.forEach(function (singleChartPoint) {
+                        colors.push(singleChartPoint.color);
+                        opacity.push(singleChartPoint.opacity || 1);
+                        allChartPoints.push.apply(allChartPoints, singleChartPoint.data);
+                    });
+                var tempArr = allChartPoints;
+                var _loop_1 = function () {
+                    var valToCheck = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                    var filteredChartPoints = tempArr.filter(function (point) { return (point.x instanceof Date ? point.x.toLocaleString() : point.x) === valToCheck; });
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var singleDataset = {};
+                    filteredChartPoints.forEach(function (singleDataPoint, index) {
+                        singleDataset.xVal = singleDataPoint.x;
+                        singleDataset["chart" + index] = singleDataPoint.y;
+                    });
+                    dataSet.push(singleDataset);
+                    // removing compared objects from array
+                    var val = tempArr[0].x instanceof Date ? tempArr[0].x.toLocaleString() : tempArr[0].x;
+                    tempArr = tempArr.filter(function (point) { return (point.x instanceof Date ? point.x.toLocaleString() : point.x) !== val; });
+                };
+                while (tempArr.length) {
+                    _loop_1();
+                }
+                // get keys from dataset, used to create stacked data
+                var keysLength = dataSet && Object.keys(dataSet[0]).length;
+                var keys = [];
+                for (var i = 0; i < keysLength - 1; i++) {
+                    var keyVal = "chart" + i;
+                    keys.push(keyVal);
+                }
+                // Stacked Info used to draw graph
+                var stackedInfo = _this._getStackedData(keys, dataSet);
+                return {
+                    colors: colors,
+                    opacity: opacity,
+                    keys: keys,
+                    stackedInfo: stackedInfo,
+                    calloutPoints: calloutPoints,
+                };
+            };
+            _this._getCustomizedCallout = function () {
+                return _this.props.onRenderCalloutPerStack
+                    ? _this.props.onRenderCalloutPerStack(_this.state.stackCalloutProps)
+                    : _this.props.onRenderCalloutPerDataPoint
+                        ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps)
+                        : null;
+            };
+            _this._getGraphData = function (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            xAxis, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            yAxis, containerHeight, containerWidth, xElement) {
+                _this._chart = _this._drawGraph(containerHeight, xAxis, yAxis, xElement);
+            };
+            _this._getLegendData = function (points) {
+                var data = points;
+                var actions = [];
+                data.forEach(function (singleChartData) {
+                    var color = singleChartData.color;
+                    var checkSimilarLegends = actions.filter(function (leg) { return leg.title === singleChartData.legend && leg.color === color; });
+                    if (checkSimilarLegends.length > 0) {
+                        return;
+                    }
+                    var legend = {
+                        title: singleChartData.legend,
+                        color: color,
+                        action: function () {
+                            _this._onLegendClick(singleChartData.legend);
+                        },
+                        hoverAction: function () {
+                            _this._handleChartMouseLeave();
+                            _this._onLegendHover(singleChartData.legend);
+                        },
+                        onMouseOutAction: function () {
+                            _this._onLegendLeave();
+                        },
+                    };
+                    actions.push(legend);
+                });
+                return (React.createElement(index_3.Legends, tslib_1.__assign({ legends: actions, overflowProps: _this.props.legendsOverflowProps, enabledWrapLines: _this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard }, _this.props.legendProps)));
+            };
+            _this._onDataPointClick = function (func) {
+                if (func) {
+                    func();
+                }
+                _this.setState({ isCircleClicked: true });
+            };
+            _this._getOpacity = function (legend) {
+                if (!_this._isMultiStackChart) {
+                    return 0.7;
+                }
+                else {
+                    var opacity = _this._legendHighlighted(legend) || _this._noLegendHighlighted() ? 0.7 : 0.1;
+                    return opacity;
+                }
+            };
+            _this._getLineOpacity = function (legend) {
+                if (!_this._isMultiStackChart) {
+                    return 1;
+                }
+                else {
+                    var opacity = 0.3;
+                    if (_this.state.isCalloutVisible) {
+                        opacity = 1;
+                    }
+                    if (!_this._noLegendHighlighted()) {
+                        opacity = _this._legendHighlighted(legend) ? 0 : 0.1;
+                    }
+                    return opacity;
+                }
+            };
+            _this._updateCircleFillColor = function (xDataPoint, lineColor, circleId) {
+                var fillColor = lineColor;
+                if (_this.state.nearestCircleToHighlight === xDataPoint || _this.state.activePoint === circleId) {
+                    _this._highlightedCircleId = circleId;
+                    if (!_this.state.isCircleClicked) {
+                        fillColor = _this.props.theme.palette.white;
+                    }
+                }
+                return fillColor;
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._drawGraph = function (containerHeight, xScale, yScale, xElement) {
+                var points = _this._addDefaultColors(_this.props.data.lineChartData);
+                var _a = _this.props.data, pointOptions = _a.pointOptions, pointLineOptions = _a.pointLineOptions;
+                var area = d3_shape_1.area()
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .x(function (d) { return xScale(d.xVal); })
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .y0(function (d) { return yScale(d.values[0]); })
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .y1(function (d) { return yScale(d.values[1]); })
+                    .curve(d3_shape_1.curveMonotoneX);
+                var line = d3_shape_1.line()
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .x(function (d) { return xScale(d.xVal); })
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .y(function (d) { return yScale(d.values[1]); })
+                    .curve(d3_shape_1.curveMonotoneX);
+                var graph = [];
+                var lineColor;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                _this._stackedData.forEach(function (singleStackedData, index) {
+                    graph.push(React.createElement(React.Fragment, { key: index + "-graph-" + _this._uniqueIdForGraph },
+                        React.createElement("path", tslib_1.__assign({ id: index + "-line-" + _this._uniqueIdForGraph, d: line(singleStackedData), fill: 'transparent', strokeWidth: 3, stroke: _this._colors[index], opacity: _this._getLineOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, points[index].lineOptions)),
+                        singleStackedData.length === 1 ? (React.createElement("circle", { id: index + "-graph-" + _this._uniqueIdForGraph, cx: xScale(singleStackedData[0].xVal), cy: yScale(singleStackedData[0].values[1]), r: 6, stroke: _this._colors[index], strokeWidth: 3, fill: _this._colors[index], opacity: _this._opacity[index], fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove })) : (React.createElement("path", tslib_1.__assign({ id: index + "-graph-" + _this._uniqueIdForGraph, d: area(singleStackedData), fill: _this._colors[index], opacity: _this._opacity[index], fillOpacity: _this._getOpacity(points[index].legend), onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove }, (_this.props.optimizeLargeData && {
+                            'data-is-focusable': true,
+                            role: 'img',
+                            'aria-label': points[index].legend + ", series " + (index + 1) + " of " + points.length + " with " + points[index].data.length + " data points.",
+                        }))))));
+                });
+                var circleRadius = pointOptions && pointOptions.r ? Number(pointOptions.r) : 8;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                _this._stackedData.forEach(function (singleStackedData, index) {
+                    if (points.length === index) {
+                        return;
+                    }
+                    if (!_this.props.optimizeLargeData || singleStackedData.length === 1) {
+                        // Render circles for all data points
+                        graph.push(React.createElement("g", { key: index + "-dots-" + _this._uniqueIdForGraph, d: area(singleStackedData), clipPath: "url(#clip)" }, singleStackedData.map(function (singlePoint, pointIndex) {
+                            var circleId = _this._circleId + "_" + (index * _this._stackedData[0].length + pointIndex);
+                            var xDataPoint = singlePoint.xVal instanceof Date ? singlePoint.xVal.getTime() : singlePoint.xVal;
+                            lineColor = points[index].color;
+                            return (React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, "data-is-focusable": true, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, onClick: _this._onDataPointClick.bind(_this, points[index].data[pointIndex].onDataPointClick), onFocus: function () { return _this._handleFocus(index, pointIndex, circleId); }, onBlur: _this._handleBlur }, pointOptions, { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId), role: "img", "aria-label": _this._getAriaLabel(index, pointIndex) })));
+                        })));
+                    }
+                    else {
+                        // Render circles for data points close to the mouse pointer only
+                        singleStackedData.forEach(function (singlePoint, pointIndex) {
+                            var xDataPoint = singlePoint.xVal instanceof Date ? singlePoint.xVal.getTime() : singlePoint.xVal;
+                            if (_this.state.nearestCircleToHighlight === xDataPoint) {
+                                var circleId = _this._circleId + "_" + (index * _this._stackedData[0].length + pointIndex);
+                                lineColor = points[index].color;
+                                graph.push(React.createElement("circle", tslib_1.__assign({ key: circleId, id: circleId, cx: xScale(singlePoint.xVal), cy: yScale(singlePoint.values[1]), stroke: lineColor, strokeWidth: 3, fill: _this._updateCircleFillColor(xDataPoint, lineColor, circleId), onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove, onClick: _this._onDataPointClick.bind(_this, points[index].data[pointIndex].onDataPointClick) }, pointOptions, { r: _this._getCircleRadius(xDataPoint, circleRadius, circleId) })));
+                            }
+                        });
+                    }
+                });
+                graph.push(React.createElement("line", tslib_1.__assign({ id: _this._verticalLineId, key: _this._verticalLineId, x1: _this.state.lineXValue, y1: 0, x2: _this.state.lineXValue, y2: containerHeight, strokeWidth: 1, strokeDasharray: 5.5, stroke: lineColor, opacity: 0.5, visibility: _this.state.displayOfLine }, pointLineOptions)));
+                var classNames = getClassNames(_this.props.styles, {
+                    theme: _this.props.theme,
+                });
+                // Removing un wanted tooltip div from DOM, when prop not provided.
+                if (!_this.props.showXAxisLablesTooltip) {
+                    try {
+                        document.getElementById(_this._tooltipId) && document.getElementById(_this._tooltipId).remove();
+                        // eslint-disable-next-line no-empty
+                    }
+                    catch (e) { }
+                }
+                // Used to display tooltip at x axis labels.
+                if (!_this.props.wrapXAxisLables && _this.props.showXAxisLablesTooltip) {
+                    var xAxisElement = d3_selection_2.select(xElement).call(xScale);
+                    try {
+                        document.getElementById(_this._tooltipId) && document.getElementById(_this._tooltipId).remove();
+                        // eslint-disable-next-line no-empty
+                    }
+                    catch (e) { }
+                    var tooltipProps = {
+                        tooltipCls: classNames.tooltip,
+                        id: _this._tooltipId,
+                        xAxis: xAxisElement,
+                    };
+                    xAxisElement && index_2.tooltipOfXAxislabels(tooltipProps);
+                }
+                return graph;
+            };
+            _this._getCircleRadius = function (xDataPoint, circleRadius, circleId) {
+                var _a = _this.state, isCircleClicked = _a.isCircleClicked, nearestCircleToHighlight = _a.nearestCircleToHighlight, activePoint = _a.activePoint;
+                if (isCircleClicked && nearestCircleToHighlight === xDataPoint) {
+                    return 1;
+                }
+                else if (nearestCircleToHighlight === xDataPoint || activePoint === circleId) {
+                    return circleRadius;
+                }
+                else {
+                    return 0;
+                }
+            };
+            _this._closeCallout = function () {
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            /**
+             * 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
+             */
+            _this._legendHighlighted = function (legend) {
+                return (_this.state.selectedLegend === legend || (_this.state.selectedLegend === '' && _this.state.activeLegend === legend));
+            };
+            /**
+             * This function checks if none of the legends is selected or hovered.
+             */
+            _this._noLegendHighlighted = function () {
+                return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+            };
+            _this._addDefaultColors = function (lineChartData) {
+                return lineChartData
+                    ? lineChartData.map(function (item, index) {
+                        var _a, _b;
+                        var color;
+                        // isInverted property is applicable to v8 themes only
+                        if (typeof item.color === 'undefined') {
+                            color = index_2.getNextColor(index, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                        }
+                        else {
+                            color = index_2.getColorFromToken(item.color, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                        }
+                        return tslib_1.__assign(tslib_1.__assign({}, item), { color: color });
+                    })
+                    : [];
+            };
+            _this._handleFocus = function (lineIndex, pointIndex, circleId) {
+                var _a = _this.props.data.lineChartData[lineIndex].data[pointIndex], x = _a.x, y = _a.y, xAxisCalloutData = _a.xAxisCalloutData;
+                var formattedDate = x instanceof Date ? x.toLocaleString() : x;
+                var modifiedXVal = x instanceof Date ? x.getTime() : x;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var found = _this._calloutPoints.find(function (e) { return e.x === modifiedXVal; });
+                // Show details in the callout for the focused point only
+                found.values = found.values.filter(function (e) { return e.y === y; });
+                _this.setState({
+                    refSelected: "#" + circleId,
+                    isCalloutVisible: true,
+                    hoverXValue: xAxisCalloutData ? xAxisCalloutData : formattedDate,
+                    YValueHover: found.values,
+                    stackCalloutProps: found,
+                    dataPointCalloutProps: found,
+                    activePoint: circleId,
+                });
+            };
+            _this._handleBlur = function () {
+                _this.setState({
+                    refSelected: null,
+                    isCalloutVisible: false,
+                    hoverXValue: undefined,
+                    YValueHover: [],
+                    stackCalloutProps: undefined,
+                    dataPointCalloutProps: undefined,
+                    activePoint: '',
+                });
+            };
+            _this._getAriaLabel = function (lineIndex, pointIndex) {
+                var _a;
+                var line = _this.props.data.lineChartData[lineIndex];
+                var point = line.data[pointIndex];
+                var formattedDate = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+                var xValue = point.xAxisCalloutData || formattedDate;
+                var legend = line.legend;
+                var yValue = point.yAxisCalloutData || point.y;
+                return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
+            };
+            _this._createSet = Utilities_1.memoizeFunction(_this._createDataSet);
+            _this.state = {
+                selectedLegend: '',
+                activeLegend: '',
+                hoverXValue: '',
+                isCalloutVisible: false,
+                refSelected: null,
+                YValueHover: [],
+                lineXValue: 0,
+                displayOfLine: InterceptVisibility.hide,
+                isCircleClicked: false,
+                nearestCircleToHighlight: null,
+                isShowCalloutPending: false,
+                activePoint: '',
+            };
+            Utilities_2.warnDeprecations(COMPONENT_NAME, props, {
+                showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
+            });
+            _this._uniqueIdForGraph = Utilities_1.getId('areaChart_');
+            _this._verticalLineId = Utilities_1.getId('verticalLine_');
+            _this._circleId = Utilities_1.getId('circle');
+            _this._rectId = Utilities_1.getId('rectangle');
+            _this._tooltipId = Utilities_1.getId('AreaChartTooltipID');
+            return _this;
+        }
+        AreaChartBase.prototype.componentDidUpdate = function () {
+            if (this.state.isShowCalloutPending) {
+                this.setState({
+                    refSelected: "#" + this._highlightedCircleId,
+                    isCalloutVisible: true,
+                    isShowCalloutPending: false,
+                });
+            }
+        };
+        AreaChartBase.prototype.render = function () {
+            var _this = this;
+            var _a = this.props.data, lineChartData = _a.lineChartData, chartTitle = _a.chartTitle;
+            var points = this._addDefaultColors(lineChartData);
+            var _b = this._createSet(points), colors = _b.colors, opacity = _b.opacity, stackedInfo = _b.stackedInfo, calloutPoints = _b.calloutPoints;
+            this._calloutPoints = calloutPoints;
+            var isXAxisDateType = index_2.getXAxisType(points);
+            this._colors = colors;
+            this._opacity = opacity;
+            this._stackedData = stackedInfo.stackedData;
+            var legends = this._getLegendData(points);
+            var tickParams = {
+                tickValues: this.props.tickValues,
+                tickFormat: this.props.tickFormat,
+            };
+            var calloutProps = tslib_1.__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, id: "toolTip" + this._uniqueCallOutID, gapSpace: 15, isBeakVisible: false, onDismiss: this._closeCallout, 'data-is-focusable': true, xAxisCalloutAccessibilityData: this.state.xAxisCalloutAccessibilityData }, this.props.calloutProps);
+            return (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: chartTitle, points: points, chartType: index_2.ChartTypes.AreaChart, calloutProps: calloutProps, legendBars: legends, isCalloutForStack: true, xAxisType: isXAxisDateType ? index_2.XAxisTypes.DateAxis : index_2.XAxisTypes.NumericAxis, tickParams: tickParams, maxOfYVal: stackedInfo.maxOfYVal, getGraphData: this._getGraphData, getmargins: this._getMargins, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, 
+                /* eslint-disable react/jsx-no-bind */
+                // eslint-disable-next-line react/no-children-prop
+                children: function (props) {
+                    _this._xAxisRectScale = props.xScale;
+                    var ticks = _this._xAxisRectScale.ticks();
+                    var width1 = _this._xAxisRectScale(ticks[ticks.length - 1]);
+                    var rectHeight = props.containerHeight - _this.margins.top;
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement("g", null,
+                            React.createElement("rect", { id: _this._rectId, width: width1, height: rectHeight, fill: 'transparent', onMouseMove: _this._onRectMouseMove, onMouseOut: _this._onRectMouseOut, onMouseOver: _this._onRectMouseMove })),
+                        React.createElement("g", null, _this._chart)));
+                } })));
+        };
+        AreaChartBase.prototype._onLegendClick = function (legend) {
+            if (this.state.selectedLegend === legend) {
+                this.setState({
+                    selectedLegend: '',
+                });
+            }
+            else {
+                this.setState({
+                    selectedLegend: legend,
+                });
+            }
+        };
+        AreaChartBase.prototype._onLegendHover = function (legend) {
+            this.setState({
+                activeLegend: legend,
+            });
+        };
+        AreaChartBase.prototype._onLegendLeave = function () {
+            this.setState({
+                activeLegend: '',
+            });
+        };
+        return AreaChartBase;
+    }(React.Component));
+    exports.AreaChartBase = AreaChartBase;
+});
+//# sourceMappingURL=AreaChart.base.js.map