@fluentui/react-charting 5.16.24 → 5.16.26

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

@@ -0,0 +1,529 @@
+define(["require", "exports", "tslib", "react", "d3-array", "d3-shape", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "../../index", "@fluentui/react-focus", "../../utilities/index", "d3-format"], function (require, exports, tslib_1, React, d3_array_1, d3_shape_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, index_1, react_focus_1, index_2, d3_format_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.VerticalBarChartBase = void 0;
+    var CircleVisbility;
+    (function (CircleVisbility) {
+        CircleVisbility["show"] = "visibility";
+        CircleVisbility["hide"] = "hidden";
+    })(CircleVisbility || (CircleVisbility = {}));
+    var getClassNames = Utilities_1.classNamesFunction();
+    var MIN_DOMAIN_MARGIN = 8;
+    var VerticalBarChartBase = /** @class */ (function (_super) {
+        tslib_1.__extends(VerticalBarChartBase, _super);
+        function VerticalBarChartBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._isRtl = Utilities_1.getRTL();
+            _this._createLine = function (
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            xScale, 
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            yScale, containerHeight, containerWidth) {
+                var _a;
+                if (containerHeight === void 0) { containerHeight = 0; }
+                if (containerWidth === void 0) { containerWidth = 0; }
+                var isNumericAxis = _this._xAxisType === index_2.XAxisTypes.NumericAxis;
+                var xBarScale = _this._getScales(containerHeight, containerWidth, isNumericAxis).xBarScale;
+                var colorScale = _this._createColors();
+                var theme = _this.props.theme;
+                var _b = _this.props, data = _b.data, _c = _b.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c, lineLegendText = _b.lineLegendText;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var lineData = [];
+                var line = [];
+                data &&
+                    data.forEach(function (item, index) {
+                        if (item.lineData && item.lineData.y) {
+                            lineData.push({ x: item.x, y: item.lineData.y, point: item, index: index });
+                        }
+                    });
+                var linePath = d3_shape_1.line()
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .x(function (d) { return (!isNumericAxis ? xBarScale(d.x) + 0.5 * xBarScale.bandwidth() : xScale(d.x)); })
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .y(function (d) { return yScale(d.y); });
+                var shouldHighlight = _this._legendHighlighted(lineLegendText) || _this._noLegendHighlighted() ? true : false;
+                var lineBorderWidth = ((_a = _this.props.lineOptions) === null || _a === void 0 ? void 0 : _a.lineBorderWidth)
+                    ? Number.parseFloat(_this.props.lineOptions.lineBorderWidth.toString())
+                    : 0;
+                if (lineBorderWidth > 0) {
+                    line.push(React.createElement("path", { opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3 + lineBorderWidth * 2, stroke: theme.palette.white }));
+                }
+                line.push(React.createElement("path", { opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3, stroke: lineLegendColor }));
+                var dots = lineData.map(function (item, index) {
+                    var _a;
+                    return (React.createElement("circle", { key: index, cx: !isNumericAxis ? xBarScale(item.x) + 0.5 * xBarScale.bandwidth() : xScale(item.x), cy: yScale(item.y), onMouseOver: _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: 8, stroke: lineLegendColor, fill: _this.props.theme.palette.white, strokeWidth: 3, visibility: _this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick }));
+                });
+                return (React.createElement(React.Fragment, null,
+                    line,
+                    dots));
+            };
+            _this._checkForLine = function () {
+                var data = _this.props.data;
+                return data.some(function (item) { var _a; return ((_a = item === null || item === void 0 ? void 0 : item.lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined; });
+            };
+            _this._getMargins = function (margins) {
+                _this.margins = margins;
+            };
+            _this._renderContentForBothLineAndBars = function (point) {
+                var _a = _this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
+                var content = YValueHover.map(function (item, index) {
+                    return (React.createElement(index_1.ChartHoverCard, tslib_1.__assign({ key: index, Legend: item.legend }, (index === 0 && { XValue: "" + (hoverXValue || item.data) }), { color: item.color, YValue: item.data || item.y, culture: _this.props.culture })));
+                });
+                return React.createElement(React.Fragment, null, content);
+            };
+            _this._renderContentForOnlyBars = function (props) {
+                var _a = _this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(index_1.ChartHoverCard, { XValue: props.xAxisCalloutData || props.x, Legend: props.legend, YValue: props.yAxisCalloutData || props.y, color: !useSingleColor && props.color ? props.color : _this._createColors()(props.y), culture: _this.props.culture })));
+            };
+            _this._renderCallout = function (props) {
+                return props
+                    ? _this._isHavingLine
+                        ? _this._renderContentForBothLineAndBars(props)
+                        : _this._renderContentForOnlyBars(props)
+                    : null;
+            };
+            _this._getCustomizedCallout = function () {
+                return _this.props.onRenderCalloutPerDataPoint
+                    ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps, _this._renderCallout)
+                    : null;
+            };
+            _this._getGraphData = function (xScale, yScale, containerHeight, containerWidth, xElement) {
+                return (_this._bars =
+                    _this._xAxisType === index_2.XAxisTypes.NumericAxis
+                        ? _this._createNumericBars(containerHeight, containerWidth, xElement)
+                        : _this._createStringBars(containerHeight, containerWidth, xElement));
+            };
+            _this._refCallback = function (element, legendTitle) {
+                _this._refArray.push({ index: legendTitle, refElement: element });
+            };
+            _this._getCalloutContentForLineAndBar = function (point) {
+                var _a, _b, _c, _d;
+                var YValueHover = [];
+                var _e = _this.props, theme = _e.theme, _f = _e.useSingleColor, useSingleColor = _f === void 0 ? false : _f;
+                var _g = _this.props, data = _g.data, lineLegendText = _g.lineLegendText, _h = _g.lineLegendColor, lineLegendColor = _h === void 0 ? theme.palette.yellow : _h;
+                var selectedPoint = data.filter(function (xDataPoint) { return xDataPoint.x === point.x; });
+                // there might be no y value of the line for the hovered bar. so we need to check this condition
+                if (_this._isHavingLine && ((_a = selectedPoint[0].lineData) === null || _a === void 0 ? void 0 : _a.y) !== undefined) {
+                    // callout data for the  line
+                    YValueHover.push({
+                        legend: lineLegendText,
+                        color: lineLegendColor,
+                        y: (_b = selectedPoint[0].lineData) === null || _b === void 0 ? void 0 : _b.y,
+                        data: (_c = selectedPoint[0].lineData) === null || _c === void 0 ? void 0 : _c.yAxisCalloutData,
+                        yAxisCalloutData: (_d = selectedPoint[0].lineData) === null || _d === void 0 ? void 0 : _d.yAxisCalloutData,
+                    });
+                }
+                // callout data for the bar
+                YValueHover.push({
+                    legend: selectedPoint[0].legend,
+                    y: selectedPoint[0].y,
+                    color: !useSingleColor
+                        ? selectedPoint[0].color
+                            ? selectedPoint[0].color
+                            : _this._createColors()(selectedPoint[0].y)
+                        : _this._createColors()(1),
+                    data: selectedPoint[0].yAxisCalloutData,
+                    yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
+                });
+                return { YValueHover: YValueHover, hoverXValue: point.xAxisCalloutData || point.x.toString() };
+            };
+            _this._onBarLeave = function () {
+                /**/
+            };
+            _this._handleChartMouseLeave = function () {
+                _this._calloutAnchorPoint = null;
+                _this.setState({
+                    isCalloutVisible: false,
+                    activeXdataPoint: null,
+                    YValueHover: [],
+                    hoverXValue: '',
+                });
+            };
+            _this._onBarFocus = function (point, refArrayIndexNumber, color) {
+                var _a = _this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
+                _this._refArray.forEach(function (obj, index) {
+                    if (obj.index === point.legend && refArrayIndexNumber === index) {
+                        _this.setState({
+                            refSelected: obj.refElement,
+                            /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+                            isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === point.legend,
+                            calloutLegend: point.legend,
+                            dataForHoverCard: point.y,
+                            color: point.color || color,
+                            xCalloutValue: point.xAxisCalloutData || point.x.toString(),
+                            yCalloutValue: point.yAxisCalloutData,
+                            dataPointCalloutProps: point,
+                            activeXdataPoint: point.x,
+                            YValueHover: YValueHover,
+                            hoverXValue: hoverXValue,
+                            callOutAccessibilityData: point.callOutAccessibilityData,
+                        });
+                    }
+                });
+            };
+            _this._getScales = function (containerHeight, containerWidth, isNumericScale) {
+                if (isNumericScale) {
+                    var xMax = d3_array_1.max(_this._points, function (point) { return point.x; });
+                    var xMin = d3_array_1.min(_this._points, function (point) { return point.x; });
+                    var xBarScale = d3_scale_1.scaleLinear()
+                        .domain(_this._isRtl ? [xMax, xMin] : [xMin, xMax])
+                        .nice()
+                        .range([
+                        _this.margins.left + _this._domainMargin,
+                        containerWidth - _this.margins.right - _this._barWidth - _this._domainMargin,
+                    ]);
+                    var yBarScale = d3_scale_1.scaleLinear()
+                        .domain([0, _this._yMax])
+                        .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
+                    return { xBarScale: xBarScale, yBarScale: yBarScale };
+                }
+                else {
+                    var xBarScale = d3_scale_1.scaleBand()
+                        .domain(_this._xAxisLabels)
+                        .range([_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin])
+                        .paddingInner(2 / 3);
+                    var yBarScale = d3_scale_1.scaleLinear()
+                        .domain([0, _this._yMax])
+                        .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
+                    return { xBarScale: xBarScale, yBarScale: yBarScale };
+                }
+            };
+            _this._closeCallout = function () {
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            _this._getLegendData = function (data, palette) {
+                var _a = _this.props, theme = _a.theme, useSingleColor = _a.useSingleColor;
+                var _b = _this.props, lineLegendText = _b.lineLegendText, _c = _b.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c;
+                var actions = [];
+                data.forEach(function (point, _index) {
+                    var color = !useSingleColor ? point.color : _this._createColors()(1);
+                    // mapping data to the format Legends component needs
+                    var legend = {
+                        title: point.legend,
+                        color: color,
+                        action: function () {
+                            _this._onLegendClick(point.legend);
+                        },
+                        hoverAction: function () {
+                            _this._handleChartMouseLeave();
+                            _this._onLegendHover(point.legend);
+                        },
+                        onMouseOutAction: function () {
+                            _this._onLegendLeave();
+                        },
+                    };
+                    actions.push(legend);
+                });
+                if (_this._isHavingLine && lineLegendText && lineLegendColor) {
+                    var lineLegend = {
+                        title: lineLegendText,
+                        color: lineLegendColor,
+                        action: function () {
+                            _this._onLegendClick(lineLegendText);
+                        },
+                        hoverAction: function () {
+                            _this._handleChartMouseLeave();
+                            _this._onLegendHover(lineLegendText);
+                        },
+                        onMouseOutAction: function () {
+                            _this._onLegendLeave();
+                        },
+                        isLineLegendInBarChart: true,
+                    };
+                    actions.unshift(lineLegend);
+                }
+                var legends = (React.createElement(index_1.Legends, tslib_1.__assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
+                return legends;
+            };
+            _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 (point) {
+                var _a, _b, _c;
+                var xValue = point.xAxisCalloutData || point.x;
+                var legend = point.legend;
+                var yValue = point.yAxisCalloutData || point.y;
+                var lineLegend = _this.props.lineLegendText || 'Line';
+                var lineYValue = ((_a = point.lineData) === null || _a === void 0 ? void 0 : _a.yAxisCalloutData) || ((_b = point.lineData) === null || _b === void 0 ? void 0 : _b.y);
+                return (((_c = point.callOutAccessibilityData) === null || _c === void 0 ? void 0 : _c.ariaLabel) ||
+                    xValue + ". " +
+                        (legend ? legend + ", " : '') +
+                        (yValue + ".") +
+                        (typeof lineYValue !== 'undefined' ? " " + lineLegend + ", " + lineYValue + "." : ''));
+            };
+            _this._getDomainMargins = function (containerWidth) {
+                if (_this._xAxisType !== index_2.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 tslib_1.__assign(tslib_1.__assign({}, _this.margins), { left: _this.margins.left + _this._domainMargin, right: _this.margins.right + _this._domainMargin });
+            };
+            _this.state = {
+                color: '',
+                dataForHoverCard: 0,
+                isCalloutVisible: false,
+                refSelected: null,
+                selectedLegend: '',
+                activeLegend: '',
+                xCalloutValue: '',
+                yCalloutValue: '',
+                activeXdataPoint: null,
+                YValueHover: [],
+                hoverXValue: '',
+                calloutLegend: '',
+                emptyChart: false,
+            };
+            _this._isHavingLine = _this._checkForLine();
+            _this._calloutId = Utilities_1.getId('callout');
+            _this._tooltipId = Utilities_1.getId('VCTooltipID_');
+            _this._refArray = [];
+            _this._xAxisType =
+                _this.props.data && _this.props.data.length > 0
+                    ? index_2.getTypeOfAxis(_this.props.data[0].x, true)
+                    : index_2.XAxisTypes.StringAxis;
+            _this._domainMargin = MIN_DOMAIN_MARGIN;
+            return _this;
+        }
+        VerticalBarChartBase.prototype.componentDidMount = function () {
+            var isChartEmpty = this.state.emptyChart ||
+                this._points.length === 0 ||
+                (d3_array_1.max(this._points, function (point) { return point.y; }) <= 0 && !this._isHavingLine);
+            if (this.state.emptyChart !== isChartEmpty) {
+                this.setState({ emptyChart: isChartEmpty });
+            }
+        };
+        VerticalBarChartBase.prototype.render = function () {
+            var _this = this;
+            this._adjustProps();
+            this._xAxisLabels = this._points.map(function (point) { return point.x; });
+            this._yMax = Math.max(d3_array_1.max(this._points, function (point) { return point.y; }), this.props.yMaxValue || 0);
+            var legendBars = this._getLegendData(this._points, this.props.theme.palette);
+            this._classNames = getClassNames(this.props.styles, {
+                theme: this.props.theme,
+                legendColor: this.state.color,
+            });
+            var calloutProps = tslib_1.__assign(tslib_1.__assign(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 }, (this._isHavingLine && {
+                YValueHover: this.state.YValueHover,
+                hoverXValue: this.state.hoverXValue,
+            })), { gapSpace: 15, color: this.state.color, legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }), this.props.calloutProps), index_2.getAccessibleDataObject(this.state.callOutAccessibilityData));
+            var tickParams = {
+                tickValues: this.props.tickValues,
+                tickFormat: this.props.tickFormat,
+            };
+            return !this.state.emptyChart ? (React.createElement(index_1.CartesianChart, tslib_1.__assign({}, this.props, { points: this._points, chartType: index_2.ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: react_focus_1.FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType !== index_2.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),
+                        _this._isHavingLine && (React.createElement("g", null, _this._createLine(props.xScale, props.yScale, props.containerHeight, props.containerWidth)))));
+                } }))) : (React.createElement("div", { id: Utilities_1.getId('_VBC_'), role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+        };
+        VerticalBarChartBase.prototype._adjustProps = function () {
+            this._points = this.props.data || [];
+            this._barWidth = this.props.barWidth || 16;
+            var palette = this.props.theme.palette;
+            this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];
+            this._isHavingLine = this._checkForLine();
+        };
+        VerticalBarChartBase.prototype._createColors = function () {
+            var _this = this;
+            var increment = this._colors.length <= 1 ? 1 : 1 / (this._colors.length - 1);
+            var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
+            if (useSingleColor) {
+                return function (_p) {
+                    var _a = _this.props, theme = _a.theme, colors = _a.colors;
+                    return colors && colors.length > 0 ? colors[0] : theme.palette.blueLight;
+                };
+            }
+            var domainValues = [];
+            for (var i = 0; i < this._colors.length; i++) {
+                domainValues.push(increment * i * this._yMax);
+            }
+            var colorScale = d3_scale_1.scaleLinear().domain(domainValues).range(this._colors);
+            return colorScale;
+        };
+        VerticalBarChartBase.prototype._onBarHover = function (point, color, mouseEvent) {
+            mouseEvent.persist();
+            var _a = this._getCalloutContentForLineAndBar(point), YValueHover = _a.YValueHover, hoverXValue = _a.hoverXValue;
+            if (this._calloutAnchorPoint !== point) {
+                this._calloutAnchorPoint = point;
+                this.setState({
+                    refSelected: mouseEvent,
+                    /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+                    isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === point.legend,
+                    dataForHoverCard: point.y,
+                    calloutLegend: point.legend,
+                    color: point.color || color,
+                    // To display callout value, if no callout value given, taking given point.x value as a string.
+                    xCalloutValue: point.xAxisCalloutData || point.x.toString(),
+                    yCalloutValue: point.yAxisCalloutData,
+                    dataPointCalloutProps: point,
+                    activeXdataPoint: point.x,
+                    YValueHover: YValueHover,
+                    hoverXValue: hoverXValue,
+                    callOutAccessibilityData: point.callOutAccessibilityData,
+                });
+            }
+        };
+        VerticalBarChartBase.prototype._createNumericBars = function (containerHeight, containerWidth, xElement) {
+            var _this = this;
+            var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
+            var _b = this._getScales(containerHeight, containerWidth, true), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
+            var colorScale = this._createColors();
+            var bars = this._points.map(function (point, index) {
+                var shouldHighlight = _this._legendHighlighted(point.legend) || _this._noLegendHighlighted() ? true : false;
+                _this._classNames = getClassNames(_this.props.styles, {
+                    theme: _this.props.theme,
+                    legendColor: _this.state.color,
+                    shouldHighlight: shouldHighlight,
+                });
+                var barHeight = Math.max(yBarScale(point.y), 0);
+                if (barHeight < 1) {
+                    return React.createElement(React.Fragment, { key: point.x }, " ");
+                }
+                var xPoint = xBarScale(point.x);
+                var yPoint = containerHeight - _this.margins.bottom - yBarScale(point.y);
+                return (React.createElement("g", { key: point.x },
+                    React.createElement("rect", { x: xPoint, className: _this._classNames.opacityChangeOnHover, y: yPoint, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip, height: barHeight, ref: function (e) {
+                            _this._refCallback(e, point.legend);
+                        }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, colorScale(point.y)), onBlur: _this._onBarLeave, fill: point.color && !useSingleColor ? point.color : colorScale(point.y) }),
+                    _this._renderBarLabel(xPoint, yPoint, point.y)));
+            });
+            // 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: this._classNames.tooltip,
+                    id: this._tooltipId,
+                    xAxis: xAxisElement,
+                };
+                xAxisElement && index_2.tooltipOfXAxislabels(tooltipProps);
+            }
+            return bars;
+        };
+        VerticalBarChartBase.prototype._createStringBars = function (containerHeight, containerWidth, xElement) {
+            var _this = this;
+            var _a = this._getScales(containerHeight, containerWidth, false), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
+            var colorScale = this._createColors();
+            var bars = this._points.map(function (point, index) {
+                var barHeight = Math.max(yBarScale(point.y), 0);
+                if (barHeight < 1) {
+                    return React.createElement(React.Fragment, { key: point.x }, " ");
+                }
+                var xPoint = xBarScale(point.x);
+                var yPoint = containerHeight - _this.margins.bottom - yBarScale(point.y);
+                return (React.createElement("g", { key: point.x, transform: "translate(" + 0.5 * (xBarScale.bandwidth() - _this._barWidth) + ", 0)" },
+                    React.createElement("rect", { x: xPoint, y: yPoint, width: _this._barWidth, height: barHeight, "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
+                            _this._refCallback(e, point.legend);
+                        }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, point, index, colorScale(point.y)), fill: point.color ? point.color : colorScale(point.y) }),
+                    _this._renderBarLabel(xPoint, yPoint, point.y)));
+            });
+            // 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: this._classNames.tooltip,
+                    id: this._tooltipId,
+                    xAxis: xAxisElement,
+                    showTooltip: this.props.showXAxisLablesTooltip,
+                };
+                xAxisElement && index_2.tooltipOfXAxislabels(tooltipProps);
+            }
+            return bars;
+        };
+        VerticalBarChartBase.prototype._onLegendClick = function (legendTitle) {
+            if (this.state.selectedLegend === legendTitle) {
+                this.setState({
+                    selectedLegend: '',
+                });
+            }
+            else {
+                this.setState({
+                    selectedLegend: legendTitle,
+                });
+            }
+        };
+        VerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
+            this.setState({
+                activeLegend: legendTitle,
+            });
+        };
+        VerticalBarChartBase.prototype._onLegendLeave = function () {
+            this.setState({
+                activeLegend: '',
+            });
+        };
+        VerticalBarChartBase.prototype._renderBarLabel = function (xPoint, yPoint, barValue) {
+            if (this.props.hideLabels || this._barWidth < 16) {
+                return null;
+            }
+            return (React.createElement("text", { x: xPoint + this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: this._classNames.barLabel, "aria-hidden": true }, d3_format_1.formatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)));
+        };
+        return VerticalBarChartBase;
+    }(React.Component));
+    exports.VerticalBarChartBase = VerticalBarChartBase;
+});
+//# sourceMappingURL=VerticalBarChart.base.js.map