@fluentui/react-charting 5.12.24 → 5.12.27

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

@@ -0,0 +1,610 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VerticalStackedBarChartBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var d3_array_1 = require("d3-array");
+var d3_selection_1 = require("d3-selection");
+var d3_scale_1 = require("d3-scale");
+var Utilities_1 = require("@fluentui/react/lib-commonjs/Utilities");
+var Callout_1 = require("@fluentui/react/lib-commonjs/Callout");
+var index_1 = require("../Legends/index");
+var index_2 = require("../../index");
+var react_focus_1 = require("@fluentui/react-focus");
+var index_3 = require("../../utilities/index");
+var getClassNames = Utilities_1.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 CircleVisbility;
+(function (CircleVisbility) {
+    CircleVisbility["show"] = "visibility";
+    CircleVisbility["hide"] = "hidden";
+})(CircleVisbility || (CircleVisbility = {}));
+var VerticalStackedBarChartBase = /** @class */ (function (_super) {
+    tslib_1.__extends(VerticalStackedBarChartBase, _super);
+    function VerticalStackedBarChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._isRtl = Utilities_1.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.isLegendSelected) {
+                    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(tslib_1.__assign(tslib_1.__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 _b = _this.state, isLegendHovered = _b.isLegendHovered, isLegendSelected = _b.isLegendSelected, selectedLegendTitle = _b.selectedLegendTitle;
+            var isNumeric = _this._xAxisType === index_3.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 = true;
+                if (isLegendHovered || isLegendSelected) {
+                    shouldHighlight = selectedLegendTitle === item; // 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) + _this._additionalSpace;
+                    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) + _this._additionalSpace;
+                    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", tslib_1.__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)" }, (isLegendSelected &&
+                        selectedLegendTitle === 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", tslib_1.__assign({ key: index + "-" + subIndex + "-dot", cx: isNumeric
+                            ? xScale(circlePoint.xItem.xAxisPoint)
+                            : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                xBarScale(circlePoint.xItem.xAxisPoint) + _this._additionalSpace, cy: yScale(circlePoint.y), onMouseOver: isLegendSelected && selectedLegendTitle === item
+                            ? _this._lineHover.bind(_this, circlePoint)
+                            : _this._onStackHover.bind(_this, circlePoint.xItem) }, (isLegendSelected &&
+                        selectedLegendTitle === 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, isLegendSelected = _a.isLegendSelected, activeXAxisDataPoint = _a.activeXAxisDataPoint, selectedLegendTitle = _a.selectedLegendTitle;
+            if (isLegendSelected) {
+                if (xAxispoint === activeXAxisDataPoint && legend === selectedLegendTitle) {
+                    return { visibility: CircleVisbility.show, radius: 8 };
+                }
+                else if (legend === selectedLegendTitle) {
+                    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 === index_3.XAxisTypes.NumericAxis
+                    ? singleChartData.xAxisPoint
+                    : singleChartData.xAxisPoint);
+                // 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 = true;
+                    if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
+                        shouldHighlight = _this.state.selectedLegendTitle === point.legend;
+                    }
+                    var 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-labelledby': "toolTip" + _this._calloutId,
+                        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),
+                    };
+                    var barHeight = heightValueScale * point.data;
+                    if (barHeight < barMinimumHeight) {
+                        barHeight = barMinimumHeight;
+                    }
+                    yPoint = yPoint - barHeight - (index ? gapHeight : 0);
+                    var xScaleBandwidthTranslate = _this._xAxisType === index_3.XAxisTypes.NumericAxis ? 0 : xBarScale.bandwidth() / 2;
+                    // 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", tslib_1.__assign({ key: index + indexNumber + ("" + shouldFocusWholeStack), className: 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", tslib_1.__assign({ key: index + indexNumber, className: classNames.opacityChangeOnHover, x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, fill: color, ref: function (e) { return (ref.refElement = e); } }, rectFocusProps, { role: "text", transform: "translate(" + xScaleBandwidthTranslate + ", 0)" })));
+                });
+                var groupRef = {};
+                var stackFocusProps = shouldFocusWholeStack && {
+                    'data-is-focusable': !_this.props.hideTooltip,
+                    'aria-labelledby': "toolTip" + _this._calloutId,
+                    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: 'text',
+                };
+                return (React.createElement("g", tslib_1.__assign({ key: indexNumber + ("" + shouldFocusWholeStack), id: indexNumber + "-singleBar", ref: function (e) { return (groupRef.refElement = e); } }, stackFocusProps), singleBar));
+            });
+            var className = 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_1.select(xElement).call(xBarScale);
+                try {
+                    document.getElementById(_this._tooltipId) && document.getElementById(_this._tooltipId).remove();
+                    // eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+                var tooltipProps = {
+                    tooltipCls: className.tooltip,
+                    id: _this._tooltipId,
+                    xAxis: xAxisElement,
+                };
+                xAxisElement && index_3.tooltipOfXAxislabels(tooltipProps);
+            }
+            return bars.filter(function (bar) { return !!bar; });
+        };
+        _this._getScales = function (containerHeight, containerWidth, isNumeric) {
+            var yMax = _this._yMax;
+            var yBarScale = d3_scale_1.scaleLinear()
+                .domain([0, yMax])
+                .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
+            if (isNumeric) {
+                var xMax = d3_array_1.max(_this._dataset, function (point) { return point.x; });
+                var xBarScale = d3_scale_1.scaleLinear()
+                    .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
+                    .nice()
+                    .range([_this.margins.left, containerWidth - _this.margins.right - _this._barWidth]);
+                return { xBarScale: xBarScale, yBarScale: yBarScale };
+            }
+            else {
+                var xBarScale = d3_scale_1.scaleBand()
+                    .domain(_this._xAxisLabels)
+                    .range([
+                    _this.margins.left - _this._additionalSpace,
+                    containerWidth - _this.margins.right - _this._additionalSpace,
+                ])
+                    .padding(_this.props.xAxisPadding || 0.1);
+                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 === index_3.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.state = {
+            isCalloutVisible: false,
+            isLegendSelected: false,
+            isLegendHovered: false,
+            selectedLegendTitle: '',
+            refSelected: null,
+            dataForHoverCard: 0,
+            color: '',
+            hoverXValue: '',
+            YValueHover: [],
+            xCalloutValue: '',
+            yCalloutValue: '',
+            activeXAxisDataPoint: '',
+        };
+        Utilities_1.warnDeprecations(COMPONENT_NAME, props, {
+            colors: 'IVSChartDataPoint.color',
+            chartLabel: 'use your own title for chart',
+        });
+        _this._handleMouseOut = _this._handleMouseOut.bind(_this);
+        _this._calloutId = Utilities_1.getId('callout');
+        _this._tooltipId = Utilities_1.getId('VSBCTooltipId_');
+        _this._adjustProps();
+        _this._dataset = _this._createDataSetLayer();
+        _this._createLegendsForLine = Utilities_1.memoizeFunction(function (data) { return _this._getLineLegends(data); });
+        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));
+        var calloutProps = tslib_1.__assign(tslib_1.__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: "toolTip" + this._calloutId, target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, color: this.state.color, legend: this.state.selectedLegendTitle, 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), index_3.getAccessibleDataObject(this.state.callOutAccessibilityData));
+        var tickParams = {
+            tickValues: this.props.tickValues,
+            tickFormat: this.props.tickFormat,
+        };
+        return (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { points: this._dataset, chartType: index_3.ChartTypes.VerticalStackedBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, isCalloutForStack: shouldFocusWholeStack, barwidth: this._barWidth, focusZoneDirection: isCalloutForStack || _isHavingLines ? react_focus_1.FocusZoneDirection.horizontal : react_focus_1.FocusZoneDirection.vertical, getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, customizedCallout: this._getCustomizedCallout(), onChartMouseLeave: this._handleChartMouseLeave, 
+            /* 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 || 32;
+        this._additionalSpace = 0.5 * this._barWidth;
+        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 = index_3.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(index_2.ChartHoverCard, { XValue: props.xAxisCalloutData, Legend: props.legend, YValue: props.yAxisCalloutData, color: props.color, culture: this.props.culture })) : null;
+    };
+    VerticalStackedBarChartBase.prototype._onLegendClick = function (customMessage) {
+        if (this.state.isLegendSelected) {
+            if (this.state.selectedLegendTitle === customMessage) {
+                this.setState({
+                    isLegendSelected: false,
+                    selectedLegendTitle: customMessage,
+                });
+            }
+            else {
+                this.setState({
+                    selectedLegendTitle: customMessage,
+                });
+            }
+        }
+        else {
+            this.setState({
+                isLegendSelected: true,
+                selectedLegendTitle: customMessage,
+            });
+        }
+    };
+    VerticalStackedBarChartBase.prototype._onLegendHover = function (customMessage) {
+        if (this.state.isLegendSelected === false) {
+            this.setState({
+                isLegendHovered: true,
+                selectedLegendTitle: customMessage,
+            });
+        }
+    };
+    VerticalStackedBarChartBase.prototype._onLegendLeave = function (isLegendFocused) {
+        if (!!isLegendFocused || this.state.isLegendSelected === false) {
+            this.setState({
+                isLegendHovered: false,
+                selectedLegendTitle: '',
+                isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+            });
+        }
+    };
+    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 () { return _this._onLegendHover(point.legend); } : undefined,
+                    onMouseOutAction: allowHoverOnLegend ? function (isLegendSelected) { return _this._onLegendLeave(isLegendSelected); } : 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 () { return _this._onLegendHover(point.title); } : undefined,
+                    onMouseOutAction: allowHoverOnLegend ? function (isLegendSelected) { return _this._onLegendLeave(isLegendSelected); } : undefined,
+                };
+                legendsOfLine.push(legend);
+            });
+        }
+        var totalLegends = legendsOfLine.concat(actions);
+        return (React.createElement(index_1.Legends, tslib_1.__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.state.isLegendSelected === false ||
+            (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
+            this._calloutAnchorPoint !== point) {
+            this._calloutAnchorPoint = point;
+            this.setState({
+                refSelected: refSelected,
+                isCalloutVisible: true,
+                selectedLegendTitle: 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
+                ? tslib_1.__spreadArray(tslib_1.__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));
+exports.VerticalStackedBarChartBase = VerticalStackedBarChartBase;
+//# sourceMappingURL=VerticalStackedBarChart.base.js.map