@fluentui/react-charting 5.16.22 → 5.16.23

package/lib/components/VerticalStackedBarChart/VerticalStackedBarChart.base.js

@@ -1,666 +0,0 @@
-import { __assign, __extends, __spreadArray } from "tslib";
-import * as React from 'react';
-import { max as d3Max, min as d3Min } from 'd3-array';
-import { select as d3Select } from 'd3-selection';
-import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';
-import { classNamesFunction, getId, getRTL, warnDeprecations, memoizeFunction } from '@fluentui/react/lib/Utilities';
-import { DirectionalHint } from '@fluentui/react/lib/Callout';
-import { Legends } from '../Legends/index';
-import { CartesianChart, ChartHoverCard, } from '../../index';
-import { FocusZoneDirection } from '@fluentui/react-focus';
-import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, } from '../../utilities/index';
-import { formatPrefix as d3FormatPrefix } from 'd3-format';
-var getClassNames = classNamesFunction();
-var COMPONENT_NAME = 'VERTICAL STACKED BAR CHART';
-// When displaying gaps between bars, the max height of the gap is given in the
-// props. The actual gap is calculated with this multiplier, with a minimum gap
-// of 1 pixel. (If these values are changed, update the comment for barGapMax.)
-var barGapMultiplier = 0.2;
-var barGapMin = 1;
-var MIN_DOMAIN_MARGIN = 8;
-var CircleVisbility;
-(function (CircleVisbility) {
-    CircleVisbility["show"] = "visibility";
-    CircleVisbility["hide"] = "hidden";
-})(CircleVisbility || (CircleVisbility = {}));
-var VerticalStackedBarChartBase = /** @class */ (function (_super) {
-    __extends(VerticalStackedBarChartBase, _super);
-    function VerticalStackedBarChartBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this._isRtl = getRTL();
-        /**
-         * This function tells us what to focus either the whole stack as focusable item.
-         * or each individual item in the stack as focusable item. basically it depends
-         * on the prop `isCalloutForStack` if it's false user can focus each individual bar
-         * within the bar if it's true then user can focus whole bar as item.
-         * but if we have lines in the chart then we force the user to focus only the whole
-         * bar, even if isCalloutForStack is false
-         */
-        _this._toFocusWholeStack = function (_isHavingLines) {
-            var _a = _this.props.isCalloutForStack, isCalloutForStack = _a === void 0 ? false : _a;
-            var shouldFocusStackOnly = false;
-            if (_isHavingLines) {
-                if (_this.state.selectedLegend !== '') {
-                    shouldFocusStackOnly = false;
-                }
-                else {
-                    shouldFocusStackOnly = true;
-                }
-            }
-            else {
-                shouldFocusStackOnly = isCalloutForStack;
-            }
-            return shouldFocusStackOnly;
-        };
-        _this._getFormattedLineData = function (data) {
-            var linesData = [];
-            var formattedLineData = {};
-            data.forEach(function (item, index) {
-                if (item.lineData) {
-                    // injecting corresponding x data point in each of the line data
-                    // we inject index also , it will be helpful to draw lines when x axis is
-                    // of string type
-                    item.lineData.forEach(function (line) {
-                        linesData.push(__assign(__assign({}, line), { index: index, xItem: item }));
-                    });
-                }
-            });
-            linesData.forEach(function (item) {
-                if (formattedLineData[item.legend]) {
-                    formattedLineData[item.legend].push(item);
-                }
-                else {
-                    formattedLineData[item.legend] = [item];
-                }
-            });
-            return formattedLineData;
-        };
-        _this._getLineLegends = function (data) {
-            var lineObject = _this._lineObject;
-            var lineLegends = [];
-            Object.keys(lineObject).forEach(function (item) {
-                lineLegends.push({
-                    title: item,
-                    color: lineObject[item][0].color,
-                });
-            });
-            return lineLegends;
-        };
-        _this._createLines = function (xScale, yScale, containerHeight, containerWidth) {
-            var _a;
-            var isNumeric = _this._xAxisType === XAxisTypes.NumericAxis;
-            var xBarScale = _this._getScales(containerHeight, containerWidth, isNumeric).xBarScale;
-            var lineObject = _this._getFormattedLineData(_this.props.data);
-            var lines = [];
-            var borderForLines = [];
-            var dots = [];
-            var theme = _this.props.theme;
-            var lineBorderWidth = ((_a = _this.props.lineOptions) === null || _a === void 0 ? void 0 : _a.lineBorderWidth)
-                ? Number.parseFloat(_this.props.lineOptions.lineBorderWidth.toString())
-                : 0;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            var xScaleBandwidthTranslate = isNumeric ? 0 : xBarScale.bandwidth() / 2;
-            Object.keys(lineObject).forEach(function (item, index) {
-                var shouldHighlight = _this._legendHighlighted(item) || _this._noLegendHighlighted(); // item is legend name
-                for (var i = 1; i < lineObject[item].length; i++) {
-                    var x1 = isNumeric
-                        ? xScale(lineObject[item][i - 1].xItem.xAxisPoint)
-                        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            xBarScale(lineObject[item][i - 1].xItem.xAxisPoint);
-                    var y1 = yScale(lineObject[item][i - 1].y);
-                    var x2 = isNumeric
-                        ? xScale(lineObject[item][i].xItem.xAxisPoint)
-                        : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                            xBarScale(lineObject[item][i].xItem.xAxisPoint);
-                    var y2 = yScale(lineObject[item][i].y);
-                    if (lineBorderWidth > 0) {
-                        borderForLines.push(React.createElement("line", { key: index + "-" + i + "-BorderLine", x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3 + lineBorderWidth * 2, fill: "transparent", strokeLinecap: "round", stroke: theme.palette.white, transform: "translate(" + xScaleBandwidthTranslate + ", 0)" }));
-                    }
-                    lines.push(React.createElement("line", __assign({ key: index + "-" + i + "-line", x1: x1, y1: y1, x2: x2, y2: y2, opacity: shouldHighlight ? 1 : 0.1, strokeWidth: 3, strokeLinecap: "round", stroke: lineObject[item][i].color, transform: "translate(" + xScaleBandwidthTranslate + ", 0)" }, (_this.state.selectedLegend === item && {
-                        onMouseOver: _this._lineHover.bind(_this, lineObject[item][i - 1]),
-                        onMouseLeave: _this._lineHoverOut,
-                    }))));
-                }
-            });
-            Object.keys(lineObject).forEach(function (item, index) {
-                lineObject[item].forEach(function (circlePoint, subIndex) {
-                    dots.push(React.createElement("circle", __assign({ key: index + "-" + subIndex + "-dot", cx: isNumeric
-                            ? xScale(circlePoint.xItem.xAxisPoint)
-                            : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                xBarScale(circlePoint.xItem.xAxisPoint), cy: yScale(circlePoint.y), onMouseOver: _this.state.selectedLegend === item
-                            ? _this._lineHover.bind(_this, circlePoint)
-                            : _this._onStackHover.bind(_this, circlePoint.xItem) }, (_this.state.selectedLegend === item && {
-                        onMouseLeave: _this._lineHoverOut,
-                    }), { r: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).radius, stroke: circlePoint.color, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this._getCircleVisibilityAndRadius(circlePoint.xItem.xAxisPoint, circlePoint.legend).visibility, transform: "translate(" + xScaleBandwidthTranslate + ", 0)" })));
-                });
-            });
-            return (React.createElement(React.Fragment, null,
-                borderForLines,
-                lines,
-                dots));
-        };
-        _this._getCircleVisibilityAndRadius = function (xAxispoint, legend) {
-            var _a = _this.state, selectedLegend = _a.selectedLegend, activeXAxisDataPoint = _a.activeXAxisDataPoint;
-            if (selectedLegend !== '') {
-                if (xAxispoint === activeXAxisDataPoint && selectedLegend === legend) {
-                    return { visibility: CircleVisbility.show, radius: 8 };
-                }
-                else if (selectedLegend === legend) {
-                    return { visibility: CircleVisbility.show, radius: 0.3 };
-                }
-                else {
-                    return { visibility: CircleVisbility.hide, radius: 0 };
-                }
-            }
-            else {
-                return {
-                    visibility: activeXAxisDataPoint === xAxispoint ? CircleVisbility.show : CircleVisbility.hide,
-                    radius: 8,
-                };
-            }
-        };
-        _this._getMargins = function (margins) {
-            _this.margins = margins;
-        };
-        _this._getCustomizedCallout = function () {
-            var _isHavingLines = _this.props.data.some(function (item) { return item.lineData && item.lineData.length > 0; });
-            return _this.props.onRenderCalloutPerStack
-                ? _this.props.onRenderCalloutPerStack(_this.state.stackCalloutProps)
-                : _this.props.onRenderCalloutPerDataPoint && !_isHavingLines
-                    ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps, _this._renderCallout)
-                    : null;
-        };
-        _this._lineHover = function (lineData, mouseEvent) {
-            mouseEvent.persist();
-            _this.setState({
-                refSelected: mouseEvent,
-                isCalloutVisible: true,
-                xCalloutValue: "" + lineData.xItem.xAxisPoint,
-                yCalloutValue: "" + (lineData.yAxisCalloutData || lineData.data || lineData.y),
-                activeXAxisDataPoint: lineData.xItem.xAxisPoint,
-                color: lineData.color,
-            });
-        };
-        _this._lineHoverOut = function () {
-            _this.setState({
-                refSelected: null,
-                isCalloutVisible: false,
-                xCalloutValue: '',
-                yCalloutValue: '',
-                activeXAxisDataPoint: '',
-                color: '',
-            });
-        };
-        _this._handleMouseOut = function () {
-            /**/
-        };
-        _this._handleChartMouseLeave = function () {
-            _this._calloutAnchorPoint = null;
-            _this.setState({
-                isCalloutVisible: false,
-                activeXAxisDataPoint: '',
-            });
-        };
-        _this._createBar = function (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        xBarScale, yBarScale, containerHeight, xElement) {
-            var _a = _this.props, _b = _a.barCornerRadius, barCornerRadius = _b === void 0 ? 0 : _b, _c = _a.barMinimumHeight, barMinimumHeight = _c === void 0 ? 0 : _c;
-            var _isHavingLines = _this.props.data.some(function (item) { return item.lineData && item.lineData.length > 0; });
-            var shouldFocusWholeStack = _this._toFocusWholeStack(_isHavingLines);
-            var bars = _this._points.map(function (singleChartData, indexNumber) {
-                var yPoint = containerHeight - _this.margins.bottom;
-                var xPoint = xBarScale(_this._xAxisType === XAxisTypes.NumericAxis
-                    ? singleChartData.xAxisPoint
-                    : singleChartData.xAxisPoint);
-                var xScaleBandwidthTranslate = _this._xAxisType === XAxisTypes.NumericAxis ? 0 : (xBarScale.bandwidth() - _this._barWidth) / 2;
-                var barTotalValue = 0;
-                // Removing datapoints with zero data
-                var barsToDisplay = singleChartData.chartData.filter(function (point) { return point.data > 0; });
-                if (!barsToDisplay.length) {
-                    return undefined;
-                }
-                var _a = _this._getBarGapAndScale(barsToDisplay, yBarScale), gapHeight = _a.gapHeight, heightValueScale = _a.heightValueScale;
-                if (heightValueScale < 0) {
-                    return undefined;
-                }
-                var singleBar = barsToDisplay.map(function (point, index) {
-                    var color = point.color ? point.color : _this._colors[index];
-                    var ref = {};
-                    var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
-                    _this._classNames = getClassNames(_this.props.styles, {
-                        theme: _this.props.theme,
-                        shouldHighlight: shouldHighlight,
-                        href: _this.props.href,
-                    });
-                    var rectFocusProps = !shouldFocusWholeStack && {
-                        'data-is-focusable': !_this.props.hideTooltip,
-                        'aria-label': _this._getAriaLabel(singleChartData, point),
-                        onMouseOver: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, color),
-                        onMouseMove: _this._onRectHover.bind(_this, singleChartData.xAxisPoint, point, color),
-                        onMouseLeave: _this._handleMouseOut,
-                        onFocus: _this._onRectFocus.bind(_this, point, singleChartData.xAxisPoint, color, ref),
-                        onBlur: _this._handleMouseOut,
-                        onClick: _this._onClick.bind(_this, point),
-                        role: 'img',
-                    };
-                    var barHeight = heightValueScale * point.data;
-                    if (barHeight < barMinimumHeight) {
-                        barHeight = barMinimumHeight;
-                    }
-                    yPoint = yPoint - barHeight - (index ? gapHeight : 0);
-                    barTotalValue += point.data;
-                    // If set, apply the corner radius to the top of the final bar
-                    if (barCornerRadius && barHeight > barCornerRadius && index === barsToDisplay.length - 1) {
-                        return (React.createElement("path", __assign({ key: index + indexNumber + ("" + shouldFocusWholeStack), className: _this._classNames.opacityChangeOnHover, d: "\n                M " + xPoint + " " + (yPoint + barCornerRadius) + "\n                a " + barCornerRadius + " " + barCornerRadius + " 0 0 1 " + barCornerRadius + " " + -barCornerRadius + "\n                h " + (_this._barWidth - 2 * barCornerRadius) + "\n                a " + barCornerRadius + " " + barCornerRadius + " 0 0 1 " + barCornerRadius + " " + barCornerRadius + "\n                v " + (barHeight - barCornerRadius) + "\n                h " + -_this._barWidth + "\n                z\n              ", fill: color, ref: function (e) { return (ref.refElement = e); }, transform: "translate(" + xScaleBandwidthTranslate + ", 0)" }, rectFocusProps)));
-                    }
-                    if (barHeight < 1) {
-                        return React.createElement(React.Fragment, { key: index + indexNumber }, " ");
-                    }
-                    return (React.createElement("rect", __assign({ key: index + indexNumber, className: _this._classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: color, ref: function (e) { return (ref.refElement = e); } }, rectFocusProps, { transform: "translate(" + xScaleBandwidthTranslate + ", 0)" })));
-                });
-                var groupRef = {};
-                var stackFocusProps = shouldFocusWholeStack && {
-                    'data-is-focusable': !_this.props.hideTooltip,
-                    'aria-label': _this._getAriaLabel(singleChartData),
-                    onMouseOver: _this._onStackHover.bind(_this, singleChartData),
-                    onMouseMove: _this._onStackHover.bind(_this, singleChartData),
-                    onMouseLeave: _this._handleMouseOut,
-                    onFocus: _this._onStackFocus.bind(_this, singleChartData, groupRef),
-                    onBlur: _this._handleMouseOut,
-                    onClick: _this._onClick.bind(_this, singleChartData),
-                    role: 'img',
-                };
-                return (React.createElement("g", { key: indexNumber + ("" + shouldFocusWholeStack) },
-                    React.createElement("g", __assign({ id: indexNumber + "-singleBar", ref: function (e) { return (groupRef.refElement = e); } }, stackFocusProps), singleBar),
-                    !_this.props.hideLabels && _this._barWidth >= 16 && (React.createElement("text", { x: xPoint + _this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: _this._classNames.barLabel, "aria-label": "Total: " + barTotalValue, role: "img", transform: "translate(" + xScaleBandwidthTranslate + ", 0)" }, d3FormatPrefix(barTotalValue < 1000 ? '.2~' : '.1', barTotalValue)(barTotalValue)))));
-            });
-            // 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 = d3Select(xElement).call(xBarScale);
-                try {
-                    document.getElementById(_this._tooltipId) && document.getElementById(_this._tooltipId).remove();
-                    // eslint-disable-next-line no-empty
-                }
-                catch (e) { }
-                var tooltipProps = {
-                    tooltipCls: _this._classNames.tooltip,
-                    id: _this._tooltipId,
-                    xAxis: xAxisElement,
-                };
-                xAxisElement && tooltipOfXAxislabels(tooltipProps);
-            }
-            return bars.filter(function (bar) { return !!bar; });
-        };
-        _this._getScales = function (containerHeight, containerWidth, isNumeric) {
-            var yMax = _this._yMax;
-            var yBarScale = d3ScaleLinear()
-                .domain([0, yMax])
-                .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
-            if (isNumeric) {
-                var xMax = d3Max(_this._dataset, function (point) { return point.x; });
-                var xMin = d3Min(_this._dataset, function (point) { return point.x; });
-                var xBarScale = d3ScaleLinear()
-                    .domain(_this._isRtl ? [xMax, xMin] : [xMin, xMax])
-                    .nice()
-                    .range([
-                    _this.margins.left + _this._domainMargin,
-                    containerWidth - _this.margins.right - _this._barWidth - _this._domainMargin,
-                ]);
-                return { xBarScale: xBarScale, yBarScale: yBarScale };
-            }
-            else {
-                var xBarScale = d3ScaleBand()
-                    .domain(_this._xAxisLabels)
-                    .range([_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin])
-                    .paddingInner(2 / 3);
-                return { xBarScale: xBarScale, yBarScale: yBarScale };
-            }
-        };
-        _this._createNumericBars = function (containerHeight, containerWidth, xElement) {
-            var _a = _this._getScales(containerHeight, containerWidth, true), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
-            return _this._createBar(xBarScale, yBarScale, containerHeight, xElement);
-        };
-        _this._createStringBars = function (containerHeight, containerWidth, xElement) {
-            var _a = _this._getScales(containerHeight, containerWidth, false), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
-            return _this._createBar(xBarScale, yBarScale, containerHeight, xElement);
-        };
-        _this._getGraphData = function (
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        xScale, yScale, containerHeight, containerWidth, xElement) {
-            return (_this._bars =
-                _this._xAxisType === XAxisTypes.NumericAxis
-                    ? _this._createNumericBars(containerHeight, containerWidth, xElement)
-                    : _this._createStringBars(containerHeight, containerWidth, xElement));
-        };
-        _this._closeCallout = function () {
-            _this.setState({
-                isCalloutVisible: false,
-            });
-        };
-        _this._getAxisData = function (yAxisData) {
-            if (yAxisData && yAxisData.yAxisDomainValues.length) {
-                var domainValue = yAxisData.yAxisDomainValues;
-                _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
-            }
-        };
-        /**
-         * 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 (legendTitle) {
-            return (_this.state.selectedLegend === legendTitle ||
-                (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
-        };
-        /**
-         * This function checks if none of the legends is selected or hovered.
-         */
-        _this._noLegendHighlighted = function () {
-            return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
-        };
-        _this._getAriaLabel = function (singleChartData, point) {
-            var _a, _b, _c;
-            if (!point) {
-                /** if shouldFocusWholeStack is true */
-                var xValue_1 = singleChartData.xAxisCalloutData || singleChartData.xAxisPoint;
-                var pointValues = singleChartData.chartData
-                    .map(function (pt) {
-                    var legend = pt.legend;
-                    var yValue = pt.yAxisCalloutData || pt.data;
-                    return legend + ", " + yValue + ".";
-                })
-                    .join(' ');
-                var lineValues = (_a = singleChartData.lineData) === null || _a === void 0 ? void 0 : _a.map(function (ln) {
-                    var legend = ln.legend;
-                    var yValue = ln.yAxisCalloutData || ln.data || ln.y;
-                    return legend + ", " + yValue + ".";
-                }).join(' ');
-                return (((_b = singleChartData.stackCallOutAccessibilityData) === null || _b === void 0 ? void 0 : _b.ariaLabel) ||
-                    xValue_1 + ". " + pointValues + (lineValues ? " " + lineValues : ''));
-            }
-            /** if shouldFocusWholeStack is false */
-            var xValue = singleChartData.xAxisCalloutData || point.xAxisCalloutData || singleChartData.xAxisPoint;
-            var legend = point.legend;
-            var yValue = point.yAxisCalloutData || point.data;
-            return ((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) || xValue + ". " + legend + ", " + yValue + ".";
-        };
-        _this._getDomainMargins = function (containerWidth) {
-            if (_this._xAxisType !== XAxisTypes.NumericAxis) {
-                /** Total width available to render the bars */
-                var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
-                var barWidth = Math.min(_this.props.barWidth || 16, 24);
-                /** Total width required to render the bars. Directly proportional to bar width */
-                var reqWidth = (3 * _this._xAxisLabels.length - 2) * barWidth;
-                _this._domainMargin = MIN_DOMAIN_MARGIN;
-                if (totalWidth >= reqWidth) {
-                    // Center align the chart by setting equal left and right margins for domain
-                    _this._domainMargin += (totalWidth - reqWidth) / 2;
-                }
-                else {
-                    /** Maximum possible bar width to maintain 2:1 spacing */
-                    var maxBandwidth = totalWidth / (3 * _this._xAxisLabels.length - 2);
-                    barWidth = maxBandwidth;
-                }
-                _this._barWidth = barWidth;
-            }
-            return __assign(__assign({}, _this.margins), { left: _this.margins.left + _this._domainMargin, right: _this.margins.right + _this._domainMargin });
-        };
-        _this.state = {
-            isCalloutVisible: false,
-            selectedLegend: '',
-            activeLegend: '',
-            refSelected: null,
-            dataForHoverCard: 0,
-            color: '',
-            hoverXValue: '',
-            YValueHover: [],
-            xCalloutValue: '',
-            yCalloutValue: '',
-            activeXAxisDataPoint: '',
-            calloutLegend: '',
-        };
-        warnDeprecations(COMPONENT_NAME, props, {
-            colors: 'IVSChartDataPoint.color',
-            chartLabel: 'use your own title for chart',
-        });
-        _this._handleMouseOut = _this._handleMouseOut.bind(_this);
-        _this._calloutId = getId('callout');
-        _this._tooltipId = getId('VSBCTooltipId_');
-        _this._adjustProps();
-        _this._dataset = _this._createDataSetLayer();
-        _this._createLegendsForLine = memoizeFunction(function (data) { return _this._getLineLegends(data); });
-        _this._domainMargin = MIN_DOMAIN_MARGIN;
-        return _this;
-    }
-    VerticalStackedBarChartBase.prototype.componentDidUpdate = function (prevProps) {
-        if (prevProps.height !== this.props.height ||
-            prevProps.width !== this.props.width ||
-            prevProps.data !== this.props.data) {
-            this._adjustProps();
-            this._dataset = this._createDataSetLayer();
-        }
-    };
-    VerticalStackedBarChartBase.prototype.render = function () {
-        var _this = this;
-        this._adjustProps();
-        var _isHavingLines = this.props.data.some(function (item) { return item.lineData && item.lineData.length > 0; });
-        var shouldFocusWholeStack = this._toFocusWholeStack(_isHavingLines);
-        var _a = this.props.isCalloutForStack, isCalloutForStack = _a === void 0 ? false : _a;
-        this._dataset = this._createDataSetLayer();
-        var legendBars = this._getLegendData(this._points, this.props.theme.palette, this._createLegendsForLine(this.props.data));
-        this._classNames = getClassNames(this.props.styles, {
-            theme: this.props.theme,
-            href: this.props.href,
-        });
-        var calloutProps = __assign(__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, id: "toolTip" + this._calloutId, target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, color: this.state.color, legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps), getAccessibleDataObject(this.state.callOutAccessibilityData));
-        var tickParams = {
-            tickValues: this.props.tickValues,
-            tickFormat: this.props.tickFormat,
-        };
-        return (React.createElement(CartesianChart, __assign({}, this.props, { points: this._dataset, chartType: ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines ? FocusZoneDirection.horizontal : FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType !== XAxisTypes.NumericAxis && { xAxisInnerPadding: 2 / 3, xAxisOuterPadding: 0 }), { 
-            /* eslint-disable react/jsx-no-bind */
-            // eslint-disable-next-line react/no-children-prop
-            children: function (props) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement("g", null, _this._bars),
-                    React.createElement("g", null, _isHavingLines &&
-                        _this._createLines(props.xScale, props.yScale, props.containerHeight, props.containerWidth))));
-            } })));
-    };
-    VerticalStackedBarChartBase.prototype._adjustProps = function () {
-        this._points = this.props.data || [];
-        this._barWidth = this.props.barWidth || 16;
-        var theme = this.props.theme;
-        var palette = theme.palette;
-        // eslint-disable-next-line deprecation/deprecation
-        this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
-        this._xAxisType = getTypeOfAxis(this.props.data[0].xAxisPoint, true);
-        this._lineObject = this._getFormattedLineData(this.props.data);
-    };
-    VerticalStackedBarChartBase.prototype._createDataSetLayer = function () {
-        var tempArr = [];
-        var dataset = this._points.map(function (singlePointData) {
-            var total = 0;
-            singlePointData.chartData.forEach(function (point) {
-                total = total + point.data;
-            });
-            tempArr.push(singlePointData.xAxisPoint);
-            return {
-                x: singlePointData.xAxisPoint,
-                y: total,
-            };
-        });
-        this._xAxisLabels = tempArr;
-        return dataset;
-    };
-    VerticalStackedBarChartBase.prototype._renderCallout = function (props) {
-        return props ? (React.createElement(ChartHoverCard, { XValue: props.xAxisCalloutData, Legend: props.legend, YValue: props.yAxisCalloutData, color: props.color, culture: this.props.culture })) : null;
-    };
-    VerticalStackedBarChartBase.prototype._onLegendClick = function (legendTitle) {
-        if (this.state.selectedLegend === legendTitle) {
-            this.setState({
-                selectedLegend: '',
-            });
-        }
-        else {
-            this.setState({
-                selectedLegend: legendTitle,
-            });
-        }
-    };
-    VerticalStackedBarChartBase.prototype._onLegendHover = function (legendTitle) {
-        this.setState({
-            activeLegend: legendTitle,
-        });
-    };
-    VerticalStackedBarChartBase.prototype._onLegendLeave = function () {
-        this.setState({
-            activeLegend: '',
-        });
-    };
-    VerticalStackedBarChartBase.prototype._getLegendData = function (data, palette, lineLegends) {
-        var _this = this;
-        if (this.props.hideLegend) {
-            return React.createElement(React.Fragment, null);
-        }
-        var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
-        var actions = [];
-        var _a = this.props.allowHoverOnLegend, allowHoverOnLegend = _a === void 0 ? true : _a;
-        data.forEach(function (singleChartData) {
-            singleChartData.chartData.forEach(function (point) {
-                var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
-                var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
-                if (checkSimilarLegends.length > 0) {
-                    return;
-                }
-                var legend = {
-                    title: point.legend,
-                    color: color,
-                    action: function () {
-                        _this._onLegendClick(point.legend);
-                    },
-                    hoverAction: allowHoverOnLegend
-                        ? function () {
-                            _this._handleChartMouseLeave();
-                            _this._onLegendHover(point.legend);
-                        }
-                        : undefined,
-                    onMouseOutAction: allowHoverOnLegend ? function () { return _this._onLegendLeave(); } : undefined,
-                };
-                actions.push(legend);
-            });
-        });
-        var legendsOfLine = [];
-        if (lineLegends && lineLegends.length > 0) {
-            lineLegends.forEach(function (point) {
-                var legend = {
-                    title: point.title,
-                    color: point.color,
-                    isLineLegendInBarChart: true,
-                    action: function () {
-                        _this._onLegendClick(point.title);
-                    },
-                    hoverAction: allowHoverOnLegend
-                        ? function () {
-                            _this._handleChartMouseLeave();
-                            _this._onLegendHover(point.title);
-                        }
-                        : undefined,
-                    onMouseOutAction: allowHoverOnLegend ? function () { return _this._onLegendLeave(); } : undefined,
-                };
-                legendsOfLine.push(legend);
-            });
-        }
-        var totalLegends = legendsOfLine.concat(actions);
-        return (React.createElement(Legends, __assign({ legends: totalLegends, overflowProps: this.props.legendsOverflowProps, enabledWrapLines: this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: this.props.focusZonePropsForLegendsInHoverCard, overflowText: this.props.legendsOverflowText }, this.props.legendProps)));
-    };
-    VerticalStackedBarChartBase.prototype._onRectHover = function (xAxisPoint, point, color, mouseEvent) {
-        mouseEvent.persist();
-        this._onRectFocusHover(xAxisPoint, point, color, mouseEvent);
-    };
-    VerticalStackedBarChartBase.prototype._onRectFocusHover = function (xAxisPoint, point, color, refSelected) {
-        if (this._calloutAnchorPoint !== point) {
-            this._calloutAnchorPoint = point;
-            this.setState({
-                refSelected: refSelected,
-                /**
-                 * Show the callout if highlighted bar is focused/hovered
-                 * and Hide it if unhighlighted bar is focused/hovered
-                 */
-                isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
-                calloutLegend: point.legend,
-                dataForHoverCard: point.data,
-                color: color,
-                xCalloutValue: point.xAxisCalloutData ? point.xAxisCalloutData : xAxisPoint,
-                yCalloutValue: point.yAxisCalloutData,
-                dataPointCalloutProps: point,
-                callOutAccessibilityData: point.callOutAccessibilityData,
-            });
-        }
-    };
-    VerticalStackedBarChartBase.prototype._onStackHover = function (stack, mouseEvent) {
-        mouseEvent.persist();
-        this._onStackHoverFocus(stack, mouseEvent);
-    };
-    VerticalStackedBarChartBase.prototype._onStackHoverFocus = function (stack, refSelected) {
-        var lineData = stack.lineData;
-        var isLinesPresent = lineData !== undefined && lineData.length > 0;
-        if (isLinesPresent) {
-            lineData.forEach(function (item) {
-                item.data = item.data || item.y;
-                item.shouldDrawBorderBottom = true;
-            });
-        }
-        this.setState({
-            refSelected: refSelected,
-            isCalloutVisible: true,
-            YValueHover: isLinesPresent
-                ? __spreadArray(__spreadArray([], lineData.sort(function (a, b) { return (a.data < b.data ? 1 : -1); })), stack.chartData.slice().reverse()) : stack.chartData.slice().reverse(),
-            hoverXValue: stack.xAxisPoint,
-            stackCalloutProps: stack,
-            activeXAxisDataPoint: stack.xAxisPoint,
-            callOutAccessibilityData: stack.stackCallOutAccessibilityData,
-        });
-    };
-    VerticalStackedBarChartBase.prototype._onRectFocus = function (point, xAxisPoint, color, ref) {
-        if (ref.refElement) {
-            this._onRectFocusHover(xAxisPoint, point, color, ref.refElement);
-        }
-    };
-    VerticalStackedBarChartBase.prototype._onStackFocus = function (stack, groupRef) {
-        if (groupRef.refElement) {
-            this._onStackHoverFocus(stack, groupRef.refElement);
-        }
-    };
-    VerticalStackedBarChartBase.prototype._onClick = function (data, mouseEvent) {
-        var _a, _b;
-        (_b = (_a = this.props).onBarClick) === null || _b === void 0 ? void 0 : _b.call(_a, mouseEvent, data);
-        this.props.href ? (window.location.href = this.props.href) : '';
-    };
-    VerticalStackedBarChartBase.prototype._getBarGapAndScale = function (bars, yBarScale, defaultTotalHeight) {
-        var _a = this.props.barGapMax, barGapMax = _a === void 0 ? 0 : _a;
-        // When displaying gaps between the bars, the height of each bar is
-        // adjusted so that the total of all bars is not changed by the gaps
-        var totalData = bars.reduce(function (iter, value) { return iter + value.data; }, 0);
-        var totalHeight = defaultTotalHeight !== null && defaultTotalHeight !== void 0 ? defaultTotalHeight : yBarScale(totalData);
-        var gaps = barGapMax && bars.length - 1;
-        var gapHeight = gaps && Math.max(barGapMin, Math.min(barGapMax, (totalHeight * barGapMultiplier) / gaps));
-        var heightValueScale = (totalHeight - gapHeight * gaps) / totalData;
-        return {
-            gapHeight: gapHeight,
-            heightValueScale: heightValueScale,
-        };
-    };
-    return VerticalStackedBarChartBase;
-}(React.Component));
-export { VerticalStackedBarChartBase };
-//# sourceMappingURL=VerticalStackedBarChart.base.js.map