npm - @fluentui/react-charting - Versions diffs - 5.23.14 → 5.23.16 - Mend

@fluentui/react-charting 5.23.14 → 5.23.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1338) hide show

package/lib/components/VerticalBarChart/VerticalBarChart.base.js ADDED Viewed

@@ -0,0 +1,795 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { max as d3Max, min as d3Min } from 'd3-array';
+import { line as d3Line } from 'd3-shape';
+import { select as d3Select } from 'd3-selection';
+import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand, scaleUtc as d3ScaleUtc, scaleTime as d3ScaleTime, } from 'd3-scale';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
+import { DirectionalHint } from '@fluentui/react/lib/Callout';
+import { CartesianChart, ChartHoverCard, Legends, } from '../../index';
+import { FocusZoneDirection } from '@fluentui/react-focus';
+import { ChartTypes, getAccessibleDataObject, XAxisTypes, getTypeOfAxis, tooltipOfXAxislabels, formatValueWithSIPrefix, getBarWidth, getScalePadding, isScalePaddingDefined, calculateAppropriateBarWidth, findVerticalNumericMinMaxOfY, createNumericYAxis, domainRageOfVerticalNumeric, domainRangeOfDateForAreaLineVerticalBarChart, domainRangeOfXStringAxis, createStringYAxis, formatDate, getNextGradient, } from '../../utilities/index';
+var CircleVisbility;
+(function (CircleVisbility) {
+    CircleVisbility["show"] = "visibility";
+    CircleVisbility["hide"] = "hidden";
+})(CircleVisbility || (CircleVisbility = {}));
+var getClassNames = classNamesFunction();
+var MIN_DOMAIN_MARGIN = 8;
+var VerticalBarChartBase = /** @class */ (function (_super) {
+    __extends(VerticalBarChartBase, _super);
+    function VerticalBarChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._isRtl = getRTL();
+        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+            var domainNRangeValue;
+            if (xAxisType === XAxisTypes.NumericAxis) {
+                domainNRangeValue = domainRageOfVerticalNumeric(points, margins, width, isRTL, barWidth);
+            }
+            else if (xAxisType === XAxisTypes.DateAxis) {
+                domainNRangeValue = domainRangeOfDateForAreaLineVerticalBarChart(points, margins, width, isRTL, tickValues, chartType, barWidth);
+            }
+            else {
+                domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);
+            }
+            return domainNRangeValue;
+        };
+        _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,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        yScaleSecondary) {
+            var _a;
+            if (containerHeight === void 0) { containerHeight = 0; }
+            if (containerWidth === void 0) { containerWidth = 0; }
+            var isStringAxis = _this._xAxisType === XAxisTypes.StringAxis;
+            var xBarScale = _this._getScales(containerHeight, containerWidth).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) {
+                    var _a;
+                    if (item.lineData && item.lineData.y) {
+                        lineData.push({
+                            x: item.x,
+                            y: item.lineData.y,
+                            useSecondaryYScale: (_a = item.lineData.useSecondaryYScale) !== null && _a !== void 0 ? _a : false,
+                            point: item,
+                            index: index,
+                        });
+                    }
+                });
+            var linePath = d3Line()
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .x(function (d) { return (isStringAxis ? xBarScale(d.x) + 0.5 * xBarScale.bandwidth() : xScale(d.x)); })
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .y(function (d) { return (d.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(d.y) : 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", { key: getId('_VBC_line_'), id: getId('_VBC_line_'), opacity: shouldHighlight ? 1 : 0.1, d: linePath(lineData), fill: "transparent", strokeLinecap: "square", strokeWidth: 3 + lineBorderWidth * 2, stroke: theme.semanticColors.bodyBackground }));
+            }
+            line.push(React.createElement("path", { key: getId('_VBC_line_'), id: getId('_VBC_line_'), 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;
+                // Create an object to store line point ref so that the object can be passed by reference to the focus handler
+                var circleRef = { refElement: null };
+                return (React.createElement("circle", { key: index, id: getId('_VBC_point_'), cx: isStringAxis ? xBarScale(item.x) + 0.5 * xBarScale.bandwidth() : xScale(item.x), cy: item.useSecondaryYScale && yScaleSecondary ? yScaleSecondary(item.y) : yScale(item.y), onMouseOver: _this._legendHighlighted(lineLegendText)
+                        ? _this._lineHover.bind(_this, item.point)
+                        : _this._onBarHover.bind(_this, item.point, colorScale(item.y)), onMouseOut: _this._onBarLeave, r: _this._getCircleVisibilityAndRadius(item.x, lineLegendText).radius, stroke: lineLegendColor, fill: _this.props.theme.semanticColors.bodyBackground, strokeWidth: 3, visibility: _this._getCircleVisibilityAndRadius(item.x, lineLegendText).visibility, onClick: (_a = item.point.lineData) === null || _a === void 0 ? void 0 : _a.onClick, "data-is-focusable": _this._legendHighlighted(lineLegendText), ref: function (e) { return (circleRef.refElement = e); }, onFocus: _this._lineFocus.bind(_this, item.point, circleRef), onBlur: _this._handleChartMouseLeave }));
+            });
+            return (React.createElement(React.Fragment, null,
+                line,
+                dots));
+        };
+        _this._getCircleVisibilityAndRadius = function (xAxisPoint, legend) {
+            var _a = _this.state, selectedLegend = _a.selectedLegend, activeXdataPoint = _a.activeXdataPoint;
+            if (selectedLegend !== '') {
+                if (xAxisPoint === activeXdataPoint && selectedLegend === legend) {
+                    return { visibility: CircleVisbility.show, radius: 8 };
+                }
+                else if (selectedLegend === legend) {
+                    // Don't hide the circle to keep it focusable. For more information,
+                    // see https://fuzzbomb.github.io/accessibility-demos/visually-hidden-focus-test.html
+                    return { visibility: CircleVisbility.show, radius: 0.3 };
+                }
+                else {
+                    return { visibility: CircleVisbility.hide, radius: 0 };
+                }
+            }
+            else {
+                return {
+                    visibility: activeXdataPoint === xAxisPoint ? CircleVisbility.show : CircleVisbility.hide,
+                    radius: 8,
+                };
+            }
+        };
+        _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(ChartHoverCard, __assign({ key: index, Legend: item.legend }, (index === 0 && { XValue: "".concat(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(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 (
+        // 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._xAxisType === XAxisTypes.DateAxis
+                        ? _this._createDateBars(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, _e;
+            var YValueHover = [];
+            var _f = _this.props, theme = _f.theme, _g = _f.useSingleColor, useSingleColor = _g === void 0 ? false : _g, enableGradient = _f.enableGradient;
+            var _h = _this.props, data = _h.data, lineLegendText = _h.lineLegendText, _j = _h.lineLegendColor, lineLegendColor = _j === void 0 ? theme.palette.yellow : _j;
+            var selectedPoint = data.filter(function (xDataPoint) { return xDataPoint.x === point.x; });
+            var pointIndex = data.indexOf(selectedPoint[0]);
+            var calloutColor = !useSingleColor
+                ? selectedPoint[0].color
+                    ? selectedPoint[0].color
+                    : _this._createColors()(selectedPoint[0].y)
+                : _this._createColors()(1);
+            // 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: enableGradient
+                    ? useSingleColor
+                        ? getNextGradient(0, 0)[0]
+                        : ((_e = selectedPoint[0].gradient) === null || _e === void 0 ? void 0 : _e[0]) || getNextGradient(pointIndex, 0)[0]
+                    : calloutColor,
+                data: selectedPoint[0].yAxisCalloutData,
+                yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
+            });
+            var hoverXValue = point.x instanceof Date ? formatDate(point.x, _this.props.useUTC) : point.x.toString();
+            return {
+                YValueHover: YValueHover,
+                hoverXValue: point.xAxisCalloutData || hoverXValue,
+            };
+        };
+        _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 instanceof Date ? formatDate(point.x, _this.props.useUTC) : point.x.toString()),
+                        yCalloutValue: point.yAxisCalloutData,
+                        dataPointCalloutProps: point,
+                        activeXdataPoint: point.x,
+                        YValueHover: YValueHover,
+                        hoverXValue: hoverXValue,
+                        callOutAccessibilityData: point.callOutAccessibilityData,
+                    });
+                }
+            });
+        };
+        _this._lineHover = function (point, mouseEvent) {
+            mouseEvent.persist();
+            _this._lineHoverFocus(point, mouseEvent);
+        };
+        _this._lineFocus = function (point, ref) {
+            if (ref.refElement) {
+                _this._lineHoverFocus(point, ref.refElement);
+            }
+        };
+        _this._lineHoverFocus = function (point, refSelected) {
+            var theme = _this.props.theme;
+            var _a = _this.props, _b = _a.lineLegendText, lineLegendText = _b === void 0 ? '' : _b, _c = _a.lineLegendColor, lineLegendColor = _c === void 0 ? theme.palette.yellow : _c;
+            _this.setState({
+                refSelected: refSelected,
+                isCalloutVisible: true,
+                calloutLegend: lineLegendText,
+                dataForHoverCard: point.lineData.y,
+                color: lineLegendColor,
+                xCalloutValue: point.xAxisCalloutData ||
+                    (point.x instanceof Date ? formatDate(point.x, _this.props.useUTC) : point.x.toString()),
+                yCalloutValue: point.lineData.yAxisCalloutData,
+                dataPointCalloutProps: point,
+                activeXdataPoint: point.x,
+            });
+        };
+        _this._getScales = function (containerHeight, containerWidth) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var xBarScale;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var yBarScale = d3ScaleLinear()
+                .domain([0, _this._yMax])
+                .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
+            if (_this._xAxisType === XAxisTypes.NumericAxis) {
+                var xMax = d3Max(_this._points, function (point) { return point.x; });
+                var xMin = d3Min(_this._points, function (point) { return point.x; });
+                xBarScale = d3ScaleLinear()
+                    .domain(_this._isRtl ? [xMax, xMin] : [xMin, xMax])
+                    .nice()
+                    .range([_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin]);
+            }
+            else if (_this._xAxisType === XAxisTypes.DateAxis) {
+                var sDate = d3Min(_this._points, function (point) { return point.x; });
+                var lDate = d3Max(_this._points, function (point) { return point.x; });
+                xBarScale = _this.props.useUTC ? d3ScaleUtc() : d3ScaleTime();
+                xBarScale
+                    .domain([sDate, lDate])
+                    .range(_this._isRtl
+                    ? [containerWidth - _this.margins.right - _this._domainMargin, _this.margins.left + _this._domainMargin]
+                    : [_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin]);
+            }
+            else {
+                xBarScale = d3ScaleBand()
+                    .domain(_this._xAxisLabels)
+                    .range(_this._isRtl
+                    ? [containerWidth - _this.margins.right - _this._domainMargin, _this.margins.left + _this._domainMargin]
+                    : [_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin])
+                    .paddingInner(_this._xAxisInnerPadding)
+                    .paddingOuter(_this._xAxisOuterPadding);
+            }
+            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 _a, _b, _c;
+                var color = !useSingleColor ? point.color : _this._createColors()(1);
+                if (_this.props.enableGradient) {
+                    var pointIndex = Math.max(((_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.findIndex(function (item) { return item.legend === point.legend; })) || 0, 0);
+                    color = ((_b = point.gradient) === null || _b === void 0 ? void 0 : _b[0]) || getNextGradient(pointIndex, 0, theme === null || theme === void 0 ? void 0 : theme.isInverted)[0];
+                    if (useSingleColor) {
+                        color = getNextGradient(0, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
+                    }
+                }
+                // 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(Legends, __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.xAxisCalloutData
+                : point.x instanceof Date
+                    ? formatDate(point.x, _this.props.useUTC)
+                    : 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) ||
+                "".concat(xValue, ". ") +
+                    (legend ? "".concat(legend, ", ") : '') +
+                    "".concat(yValue, ".") +
+                    (typeof lineYValue !== 'undefined' ? " ".concat(lineLegend, ", ").concat(lineYValue, ".") : ''));
+        };
+        _this._getDomainMargins = function (containerWidth) {
+            var _a;
+            _this._domainMargin = MIN_DOMAIN_MARGIN;
+            /** Total width available to render the bars */
+            var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
+            if (_this._xAxisType === XAxisTypes.StringAxis) {
+                if (isScalePaddingDefined(_this.props.xAxisOuterPadding, _this.props.xAxisPadding)) {
+                    // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
+                    // to adjust the space before the first bar and after the last bar.
+                    _this._domainMargin = 0;
+                }
+                else if (_this.props.barWidth !== 'auto') {
+                    /** Rate at which the space between the bars changes wrt the bar width */
+                    var barGapRate = _this._xAxisInnerPadding / (1 - _this._xAxisInnerPadding);
+                    // Update the bar width so that when CartesianChart rerenders,
+                    // the following calculations don't use the previous bar width.
+                    _this._barWidth = getBarWidth(_this.props.barWidth, _this.props.maxBarWidth);
+                    /** Total width required to render the bars. Directly proportional to bar width */
+                    var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * barGapRate) * _this._barWidth;
+                    if (totalWidth >= reqWidth) {
+                        // Center align the chart by setting equal left and right margins for domain
+                        _this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
+                    }
+                }
+            }
+            else {
+                var data = ((_a = _this.props.data) === null || _a === void 0 ? void 0 : _a.map(function (point) { return point.x; })) || [];
+                _this._barWidth = getBarWidth(_this.props.barWidth, _this.props.maxBarWidth, calculateAppropriateBarWidth(data, totalWidth));
+                _this._domainMargin = MIN_DOMAIN_MARGIN + _this._barWidth / 2;
+            }
+            return __assign(__assign({}, _this.margins), { left: _this.margins.left + _this._domainMargin, right: _this.margins.right + _this._domainMargin });
+        };
+        _this._getChartTitle = function () {
+            var _a = _this.props, chartTitle = _a.chartTitle, data = _a.data;
+            return ((chartTitle ? "".concat(chartTitle, ". ") : '') +
+                "Vertical bar chart with ".concat((data === null || data === void 0 ? void 0 : data.length) || 0, " bars") +
+                (_this._isHavingLine ? ' and 1 line' : '') +
+                '. ');
+        };
+        _this.state = {
+            color: '',
+            dataForHoverCard: 0,
+            isCalloutVisible: false,
+            refSelected: null,
+            selectedLegend: '',
+            activeLegend: '',
+            xCalloutValue: '',
+            yCalloutValue: '',
+            activeXdataPoint: null,
+            YValueHover: [],
+            hoverXValue: '',
+            calloutLegend: '',
+        };
+        _this._isHavingLine = _this._checkForLine();
+        _this._calloutId = getId('callout');
+        _this._tooltipId = getId('VCTooltipID_');
+        _this._refArray = [];
+        _this._xAxisType =
+            _this.props.data && _this.props.data.length > 0
+                ? getTypeOfAxis(_this.props.data[0].x, true)
+                : XAxisTypes.StringAxis;
+        _this._emptyChartId = getId('_VBC_empty');
+        _this._domainMargin = MIN_DOMAIN_MARGIN;
+        return _this;
+    }
+    VerticalBarChartBase.prototype.render = function () {
+        var _this = this;
+        this._adjustProps();
+        this._xAxisLabels = this._points.map(function (point) { return point.x; });
+        this._yMax = Math.max(d3Max(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 = __assign(__assign(__assign(__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: DirectionalHint.topAutoEdge, id: "toolTip".concat(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), getAccessibleDataObject(this.state.callOutAccessibilityData));
+        var tickParams = {
+            tickValues: this.props.tickValues,
+            tickFormat: this.props.tickFormat,
+        };
+        return !this._isChartEmpty() ? (React.createElement(CartesianChart, __assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, createYAxis: createNumericYAxis, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && this._noLegendHighlighted() && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), createStringYAxis: createStringYAxis, getmargins: this._getMargins, getMinMaxOfYAxis: findVerticalNumericMinMaxOfY, getGraphData: this._getGraphData, getDomainNRangeValues: this._getDomainNRangeValues, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === XAxisTypes.StringAxis && {
+            xAxisInnerPadding: this._xAxisInnerPadding,
+            xAxisOuterPadding: this._xAxisOuterPadding,
+        }), {
+            /* eslint-disable react/jsx-no-bind */
+            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, props.yScaleSecondary)))));
+            } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+    };
+    VerticalBarChartBase.prototype._adjustProps = function () {
+        this._points = this.props.data || [];
+        this._barWidth = getBarWidth(this.props.barWidth, this.props.maxBarWidth);
+        var palette = this.props.theme.palette;
+        this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];
+        this._isHavingLine = this._checkForLine();
+        this._xAxisInnerPadding = getScalePadding(this.props.xAxisInnerPadding, this.props.xAxisPadding, 2 / 3);
+        this._xAxisOuterPadding = getScalePadding(this.props.xAxisOuterPadding, this.props.xAxisPadding, 0);
+    };
+    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 = d3ScaleLinear().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 instanceof Date ? formatDate(point.x, this.props.useUTC) : point.x.toString()),
+                yCalloutValue: point.yAxisCalloutData,
+                dataPointCalloutProps: point,
+                // Hovering over a bar should highlight corresponding line points only when no legend is selected
+                activeXdataPoint: this._noLegendHighlighted() ? point.x : null,
+                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), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
+        var colorScale = this._createColors();
+        var bars = this._points.map(function (point, index) {
+            var _a, _b, _c, _d, _e, _f;
+            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);
+            var adjustedBarHeight = 0;
+            if (barHeight <= 0) {
+                return React.createElement(React.Fragment, { key: point.x }, " ");
+            }
+            else if (barHeight <= Math.ceil(yBarScale(_this._yMax) / 100.0)) {
+                adjustedBarHeight = Math.ceil(yBarScale(_this._yMax) / 100.0);
+            }
+            else {
+                adjustedBarHeight = barHeight;
+            }
+            var xPoint = xBarScale(point.x) - _this._barWidth / 2;
+            var yPoint = containerHeight - _this.margins.bottom - adjustedBarHeight;
+            var startColor = point.color && !useSingleColor ? point.color : colorScale(point.y);
+            var endColor = startColor;
+            if (_this.props.enableGradient) {
+                startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || getNextGradient(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || getNextGradient(index, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
+                if (useSingleColor) {
+                    startColor = getNextGradient(0, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[0];
+                    endColor = getNextGradient(0, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
+                }
+                _this._points[index].color = startColor;
+            }
+            var gradientId = getId('VBC_Gradient') + "_".concat(index, "_").concat(startColor);
+            return (React.createElement("g", { key: point.x },
+                _this.props.enableGradient && (React.createElement("defs", null,
+                    React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
+                        React.createElement("stop", { offset: "0", stopColor: startColor }),
+                        React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                React.createElement("rect", { id: getId('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: yPoint, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
+                        _this._refCallback(e, point.legend);
+                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
+                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend)));
+        });
+        // 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;
+    };
+    VerticalBarChartBase.prototype._createStringBars = function (containerHeight, containerWidth, xElement) {
+        var _this = this;
+        var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
+        var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
+        var colorScale = this._createColors();
+        var bars = this._points.map(function (point, index) {
+            var _a, _b, _c, _d, _e, _f;
+            var barHeight = Math.max(yBarScale(point.y), 0);
+            var adjustedBarHeight = 0;
+            if (barHeight <= 0) {
+                return React.createElement(React.Fragment, { key: point.x instanceof Date ? point.x.getTime() : point.x }, " ");
+            }
+            else if (barHeight <= Math.ceil(yBarScale(_this._yMax) / 100.0)) {
+                adjustedBarHeight = Math.ceil(yBarScale(_this._yMax) / 100.0);
+            }
+            else {
+                adjustedBarHeight = barHeight;
+            }
+            var xPoint = xBarScale(point.x);
+            var yPoint = containerHeight - _this.margins.bottom - adjustedBarHeight;
+            // Setting the bar width here is safe because there are no dependencies earlier in the code
+            // that rely on the width of bars in vertical bar charts with string x-axis.
+            _this._barWidth = getBarWidth(_this.props.barWidth, _this.props.maxBarWidth, xBarScale.bandwidth());
+            var startColor = point.color ? point.color : colorScale(point.y);
+            var endColor = startColor;
+            if (_this.props.enableGradient) {
+                startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || getNextGradient(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || getNextGradient(index, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
+                if (useSingleColor) {
+                    startColor = getNextGradient(0, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[0];
+                    endColor = getNextGradient(0, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
+                }
+                _this._points[index].color = startColor;
+            }
+            var gradientId = getId('VBC_Gradient') + "_".concat(index, "_").concat(startColor);
+            return (React.createElement("g", { key: point.x instanceof Date ? point.x.getTime() : point.x, transform: "translate(".concat(0.5 * (xBarScale.bandwidth() - _this._barWidth), ", 0)") },
+                _this.props.enableGradient && (React.createElement("defs", null,
+                    React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
+                        React.createElement("stop", { offset: "0", stopColor: startColor }),
+                        React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                React.createElement("rect", { id: getId('_VBC_bar_'), x: xPoint, y: yPoint, width: _this._barWidth, height: adjustedBarHeight, "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
+                        _this._refCallback(e, point.legend);
+                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
+                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend)));
+        });
+        // 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,
+                showTooltip: this.props.showXAxisLablesTooltip,
+            };
+            xAxisElement && tooltipOfXAxislabels(tooltipProps);
+        }
+        return bars;
+    };
+    VerticalBarChartBase.prototype._createDateBars = function (containerHeight, containerWidth, xElement) {
+        var _this = this;
+        var _a = this.props.useSingleColor, useSingleColor = _a === void 0 ? false : _a;
+        var _b = this._getScales(containerHeight, containerWidth), xBarScale = _b.xBarScale, yBarScale = _b.yBarScale;
+        var colorScale = this._createColors();
+        var bars = this._points.map(function (point, index) {
+            var _a, _b, _c, _d, _e, _f;
+            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);
+            var adjustedBarHeight = 0;
+            if (barHeight <= 0) {
+                return React.createElement(React.Fragment, { key: point.x instanceof Date ? point.x.getTime() : point.x }, " ");
+            }
+            else if (barHeight <= Math.ceil(yBarScale(_this._yMax) / 100.0)) {
+                adjustedBarHeight = Math.ceil(yBarScale(_this._yMax) / 100.0);
+            }
+            else {
+                adjustedBarHeight = barHeight;
+            }
+            var xPoint = xBarScale(point.x) - _this._barWidth / 2;
+            var yPoint = containerHeight - _this.margins.bottom - adjustedBarHeight;
+            var startColor = point.color && !useSingleColor ? point.color : colorScale(point.y);
+            var endColor = startColor;
+            if (_this.props.enableGradient) {
+                startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || getNextGradient(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || getNextGradient(index, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
+                if (useSingleColor) {
+                    startColor = getNextGradient(0, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[0];
+                    endColor = getNextGradient(0, 0, (_f = _this.props.theme) === null || _f === void 0 ? void 0 : _f.isInverted)[1];
+                }
+                _this._points[index].color = startColor;
+            }
+            var gradientId = getId('VBC_Gradient') + "_".concat(index, "_").concat(startColor);
+            return (React.createElement("g", { key: point.x instanceof Date ? point.x.getTime() : point.x },
+                _this.props.enableGradient && (React.createElement("defs", null,
+                    React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
+                        React.createElement("stop", { offset: "0", stopColor: startColor }),
+                        React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                React.createElement("rect", { id: getId('_VBC_bar_'), x: xPoint, className: _this._classNames.opacityChangeOnHover, y: yPoint, width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip && shouldHighlight, height: adjustedBarHeight, ref: function (e) {
+                        _this._refCallback(e, point.legend);
+                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, startColor), "aria-label": _this._getAriaLabel(point), role: "img", onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, startColor), onBlur: _this._onBarLeave, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0 }),
+                _this._renderBarLabel(xPoint, yPoint, point.y, point.legend)));
+        });
+        // 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;
+    };
+    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, legend) {
+        if (this.props.hideLabels ||
+            this._barWidth < 16 ||
+            !(this._legendHighlighted(legend) || this._noLegendHighlighted())) {
+            return null;
+        }
+        return (React.createElement("text", { x: xPoint + this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: this._classNames.barLabel, "aria-hidden": true }, formatValueWithSIPrefix(barValue)));
+    };
+    VerticalBarChartBase.prototype._isChartEmpty = function () {
+        return (this._points.length === 0 ||
+            (d3Max(this._points, function (point) { return point.y; }) <= 0 && !this._isHavingLine));
+    };
+    VerticalBarChartBase.defaultProps = {
+        maxBarWidth: 24,
+        useUTC: true,
+    };
+    return VerticalBarChartBase;
+}(React.Component));
+export { VerticalBarChartBase };
+//# sourceMappingURL=VerticalBarChart.base.js.map