@fluentui/react-charting 5.12.25 → 5.12.26

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

@@ -0,0 +1,482 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { max as d3Max } from 'd3-array';
+import { line as d3Line } from 'd3-shape';
+import { select as d3Select } from 'd3-selection';
+import { scaleLinear as d3ScaleLinear, scaleBand as d3ScaleBand } 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, } from '../../utilities/index';
+var CircleVisbility;
+(function (CircleVisbility) {
+    CircleVisbility["show"] = "visibility";
+    CircleVisbility["hide"] = "hidden";
+})(CircleVisbility || (CircleVisbility = {}));
+var getClassNames = classNamesFunction();
+var VerticalBarChartBase = /** @class */ (function (_super) {
+    __extends(VerticalBarChartBase, _super);
+    function VerticalBarChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._isRtl = 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 === 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 = d3Line()
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .x(function (d) { return (!isNumericAxis ? xBarScale(d.index) + 0.5 * _this._barWidth : xScale(d.x)); })
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                .y(function (d) { return yScale(d.y); });
+            var shouldHighlight = true;
+            if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
+                shouldHighlight = _this.state.selectedLegendTitle === lineLegendText;
+            }
+            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.index) + 0.5 * _this._barWidth : 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(ChartHoverCard, __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(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 === 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) {
+            if (_this.state.isLegendSelected === false ||
+                (_this.state.isLegendSelected && _this.state.selectedLegendTitle === point.legend)) {
+                var _a = _this._getCalloutContentForLineAndBar(point), YValueHover_1 = _a.YValueHover, hoverXValue_1 = _a.hoverXValue;
+                _this._refArray.forEach(function (obj, index) {
+                    if (obj.index === point.legend && refArrayIndexNumber === index) {
+                        _this.setState({
+                            refSelected: obj.refElement,
+                            isCalloutVisible: true,
+                            selectedLegendTitle: 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_1,
+                            hoverXValue: hoverXValue_1,
+                            callOutAccessibilityData: point.callOutAccessibilityData,
+                        });
+                    }
+                });
+            }
+        };
+        _this._getScales = function (containerHeight, containerWidth, isNumericScale) {
+            if (isNumericScale) {
+                var xMax = d3Max(_this._points, function (point) { return point.x; });
+                var xBarScale = d3ScaleLinear()
+                    .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
+                    .nice()
+                    .range([
+                    _this.margins.left + _this._barWidth / 2,
+                    containerWidth - _this.margins.right - _this._barWidth - _this._barWidth / 2,
+                ]);
+                var yBarScale = d3ScaleLinear()
+                    .domain([0, _this._yMax])
+                    .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
+                return { xBarScale: xBarScale, yBarScale: yBarScale };
+            }
+            else {
+                var xBarScale = d3ScaleBand()
+                    .domain(_this._xAxisLabels)
+                    .range([_this.margins.left, containerWidth - _this.margins.right])
+                    .padding(_this.props.xAxisPadding || 0.1);
+                var yBarScale = d3ScaleLinear()
+                    .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._onLegendHover(point.legend);
+                    },
+                    onMouseOutAction: function (isLegendSelected) {
+                        _this._onLegendLeave(isLegendSelected);
+                    },
+                };
+                actions.push(legend);
+            });
+            if (_this._isHavingLine && lineLegendText && lineLegendColor) {
+                var lineLegend = {
+                    title: lineLegendText,
+                    color: lineLegendColor,
+                    action: function () {
+                        _this._onLegendClick(lineLegendText);
+                    },
+                    hoverAction: function () {
+                        _this._onLegendHover(lineLegendText);
+                    },
+                    onMouseOutAction: function (isLegendSelected) {
+                        _this._onLegendLeave(isLegendSelected);
+                    },
+                    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.state = {
+            color: '',
+            dataForHoverCard: 0,
+            isCalloutVisible: false,
+            isLegendSelected: false,
+            isLegendHovered: false,
+            refSelected: null,
+            selectedLegendTitle: '',
+            xCalloutValue: '',
+            yCalloutValue: '',
+            activeXdataPoint: null,
+            YValueHover: [],
+            hoverXValue: '',
+        };
+        _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;
+        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" + 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.selectedLegendTitle, 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 (React.createElement(CartesianChart, __assign({}, this.props, { points: this._points, chartType: ChartTypes.VerticalBarChart, xAxisType: this._xAxisType, calloutProps: calloutProps, tickParams: tickParams }, (this._isHavingLine && { isCalloutForStack: true }), { legendBars: legendBars, datasetForXAxisDomain: this._xAxisLabels, barwidth: this._barWidth, focusZoneDirection: FocusZoneDirection.horizontal, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, 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),
+                    _this._isHavingLine && (React.createElement("g", null, _this._createLine(props.xScale, props.yScale, props.containerHeight, props.containerWidth)))));
+            } })));
+    };
+    VerticalBarChartBase.prototype._adjustProps = function () {
+        this._points = this.props.data || [];
+        this._barWidth = this.props.barWidth || 32;
+        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 = 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.state.isLegendSelected === false ||
+            (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&
+            this._calloutAnchorPoint !== point) {
+            this._calloutAnchorPoint = point;
+            this.setState({
+                refSelected: mouseEvent,
+                isCalloutVisible: true,
+                dataForHoverCard: point.y,
+                selectedLegendTitle: 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 = true;
+            if (_this.state.isLegendHovered || _this.state.isLegendSelected) {
+                shouldHighlight = _this.state.selectedLegendTitle === point.legend;
+            }
+            _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 }, " ");
+            }
+            return (React.createElement("rect", { key: point.x, x: xBarScale(point.x), className: _this._classNames.opacityChangeOnHover, y: containerHeight - _this.margins.bottom - yBarScale(point.y), width: _this._barWidth, "data-is-focusable": !_this.props.hideTooltip, height: Math.max(yBarScale(point.y), 0), ref: function (e) {
+                    _this._refCallback(e, point.legend);
+                }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, colorScale(point.y)), "aria-label": "Vertical bar chart", role: "text", "aria-labelledby": "toolTip" + _this._calloutId, 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) }));
+        });
+        // 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._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 }, " ");
+            }
+            return (React.createElement("rect", { key: point.x, x: xBarScale(point.x), y: containerHeight - _this.margins.bottom - yBarScale(point.y), width: _this._barWidth, height: barHeight, "aria-label": "Vertical bar chart", role: "text", "aria-labelledby": "toolTip" + _this._calloutId, 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), transform: "translate(" + 0.5 * (xBarScale.bandwidth() - _this._barWidth) + ", 0)" }));
+        });
+        // 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._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,
+            });
+        }
+    };
+    VerticalBarChartBase.prototype._onLegendHover = function (customMessage) {
+        if (this.state.isLegendSelected === false) {
+            this.setState({
+                isLegendHovered: true,
+                selectedLegendTitle: customMessage,
+            });
+        }
+    };
+    VerticalBarChartBase.prototype._onLegendLeave = function (isLegendFocused) {
+        if (!!isLegendFocused || this.state.isLegendSelected === false) {
+            this.setState({
+                isLegendHovered: false,
+                selectedLegendTitle: '',
+                isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+            });
+        }
+    };
+    return VerticalBarChartBase;
+}(React.Component));
+export { VerticalBarChartBase };
+//# sourceMappingURL=VerticalBarChart.base.js.map

package/lib/components/VerticalBarChart/VerticalBarChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalBarChart.base.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { max as d3Max } from 'd3-array';\nimport { line as d3Line } from 'd3-shape';\nimport { select as d3Select } from 'd3-selection';\nimport { scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { DirectionalHint } from '@fluentui/react/lib/Callout';\nimport {\n  IAccessibilityProps,\n  CartesianChart,\n  ChartHoverCard,\n  IBasestate,\n  IMargins,\n  ILegend,\n  IRefArrayData,\n  IVerticalBarChartProps,\n  IVerticalBarChartStyleProps,\n  IVerticalBarChartStyles,\n  IVerticalBarChartDataPoint,\n  Legends,\n  IChildProps,\n  IYValueHover,\n} from '../../index';\nimport { FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n  ChartTypes,\n  IAxisData,\n  getAccessibleDataObject,\n  XAxisTypes,\n  NumericAxis,\n  StringAxis,\n  getTypeOfAxis,\n  tooltipOfXAxislabels,\n} from '../../utilities/index';\n\nenum CircleVisbility {\n  show = 'visibility',\n  hide = 'hidden',\n}\nconst getClassNames = classNamesFunction<IVerticalBarChartStyleProps, IVerticalBarChartStyles>();\nexport interface IVerticalBarChartState extends IBasestate {\n  selectedLegendTitle: string;\n  dataPointCalloutProps?: IVerticalBarChartDataPoint; // define this in hover and focus\n  /**\n   * data point of x, where rectangle is hovered or focused\n   */\n  activeXdataPoint: number | string | null;\n  YValueHover: IYValueHover[];\n  hoverXValue?: string | number | null;\n  callOutAccessibilityData?: IAccessibilityProps;\n}\n\ntype ColorScale = (_p?: number) => string;\n\nexport class VerticalBarChartBase extends React.Component<IVerticalBarChartProps, IVerticalBarChartState> {\n  private _points: IVerticalBarChartDataPoint[];\n  private _barWidth: number;\n  private _colors: string[];\n  private _classNames: IProcessedStyleSet<IVerticalBarChartStyles>;\n  private _refArray: IRefArrayData[];\n  private _calloutId: string;\n  private margins: IMargins;\n  private _isRtl: boolean = getRTL();\n  private _bars: JSX.Element[];\n  private _xAxisLabels: string[];\n  private _yMax: number;\n  private _isHavingLine: boolean;\n  private _tooltipId: string;\n  private _xAxisType: XAxisTypes;\n  private _calloutAnchorPoint: IVerticalBarChartDataPoint | null;\n\n  public constructor(props: IVerticalBarChartProps) {\n    super(props);\n    this.state = {\n      color: '',\n      dataForHoverCard: 0,\n      isCalloutVisible: false,\n      isLegendSelected: false,\n      isLegendHovered: false,\n      refSelected: null,\n      selectedLegendTitle: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n      activeXdataPoint: null,\n      YValueHover: [],\n      hoverXValue: '',\n    };\n    this._isHavingLine = this._checkForLine();\n    this._calloutId = getId('callout');\n    this._tooltipId = getId('VCTooltipID_');\n    this._refArray = [];\n    this._xAxisType =\n      this.props.data! && this.props.data!.length > 0\n        ? (getTypeOfAxis(this.props.data![0].x, true) as XAxisTypes)\n        : XAxisTypes.StringAxis;\n  }\n\n  public render(): JSX.Element {\n    this._adjustProps();\n    this._xAxisLabels = this._points.map((point: IVerticalBarChartDataPoint) => point.x as string);\n    this._yMax = Math.max(\n      d3Max(this._points, (point: IVerticalBarChartDataPoint) => point.y)!,\n      this.props.yMaxValue || 0,\n    );\n    const legendBars: JSX.Element = this._getLegendData(this._points, this.props.theme!.palette);\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      legendColor: this.state.color,\n    });\n    const calloutProps = {\n      isCalloutVisible: this.state.isCalloutVisible,\n      directionalHint: DirectionalHint.topAutoEdge,\n      id: `toolTip${this._calloutId}`,\n      target: this.state.refSelected,\n      isBeakVisible: false,\n      ...(this._isHavingLine && {\n        YValueHover: this.state.YValueHover,\n        hoverXValue: this.state.hoverXValue,\n      }),\n      gapSpace: 15,\n      color: this.state.color,\n      legend: this.state.selectedLegendTitle,\n      XValue: this.state.xCalloutValue,\n      YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,\n      onDismiss: this._closeCallout,\n      preventDismissOnLostFocus: true,\n      ...this.props.calloutProps,\n      ...getAccessibleDataObject(this.state.callOutAccessibilityData),\n    };\n    const tickParams = {\n      tickValues: this.props.tickValues,\n      tickFormat: this.props.tickFormat,\n    };\n    return (\n      <CartesianChart\n        {...this.props}\n        points={this._points}\n        chartType={ChartTypes.VerticalBarChart}\n        xAxisType={this._xAxisType}\n        calloutProps={calloutProps}\n        tickParams={tickParams}\n        {...(this._isHavingLine && { isCalloutForStack: true })}\n        legendBars={legendBars}\n        datasetForXAxisDomain={this._xAxisLabels}\n        barwidth={this._barWidth}\n        focusZoneDirection={FocusZoneDirection.horizontal}\n        customizedCallout={this._getCustomizedCallout()}\n        getmargins={this._getMargins}\n        getGraphData={this._getGraphData}\n        getAxisData={this._getAxisData}\n        onChartMouseLeave={this._handleChartMouseLeave}\n        /* eslint-disable react/jsx-no-bind */\n        // eslint-disable-next-line react/no-children-prop\n        children={(props: IChildProps) => {\n          return (\n            <>\n              <g>{this._bars}</g>\n              {this._isHavingLine && (\n                <g>{this._createLine(props.xScale!, props.yScale!, props.containerHeight, props.containerWidth)}</g>\n              )}\n            </>\n          );\n        }}\n      />\n    );\n  }\n\n  private _createLine = (\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    xScale: any,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    yScale: any,\n    containerHeight: number = 0,\n    containerWidth: number = 0,\n  ): React.ReactNode => {\n    const isNumericAxis = this._xAxisType === XAxisTypes.NumericAxis;\n    const { xBarScale } = this._getScales(containerHeight, containerWidth, isNumericAxis);\n    const colorScale = this._createColors();\n    const { theme } = this.props;\n    const { data, lineLegendColor = theme!.palette.yellow, lineLegendText } = this.props;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const lineData: Array<any> = [];\n    const line: JSX.Element[] = [];\n    data &&\n      data.forEach((item: IVerticalBarChartDataPoint, index: number) => {\n        if (item.lineData && item.lineData.y) {\n          lineData.push({ x: item.x, y: item.lineData!.y, point: item, index });\n        }\n      });\n    const linePath = d3Line()\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .x((d: any) => (!isNumericAxis ? xBarScale(d.index) + 0.5 * this._barWidth : xScale(d.x)))\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      .y((d: any) => yScale(d.y));\n    let shouldHighlight = true;\n    if (this.state.isLegendHovered || this.state.isLegendSelected) {\n      shouldHighlight = this.state.selectedLegendTitle === lineLegendText;\n    }\n    const lineBorderWidth = this.props.lineOptions?.lineBorderWidth\n      ? Number.parseFloat(this.props.lineOptions!.lineBorderWidth!.toString())\n      : 0;\n\n    if (lineBorderWidth > 0) {\n      line.push(\n        <path\n          opacity={shouldHighlight ? 1 : 0.1}\n          d={linePath(lineData)!}\n          fill=\"transparent\"\n          strokeLinecap=\"square\"\n          strokeWidth={3 + lineBorderWidth * 2}\n          stroke={theme!.palette.white}\n        />,\n      );\n    }\n    line.push(\n      <path\n        opacity={shouldHighlight ? 1 : 0.1}\n        d={linePath(lineData)!}\n        fill=\"transparent\"\n        strokeLinecap=\"square\"\n        strokeWidth={3}\n        stroke={lineLegendColor}\n      />,\n    );\n\n    const dots: React.ReactNode[] = lineData.map(\n      (item: { x: number | string; y: number; point: IVerticalBarChartDataPoint; index: number }, index: number) => {\n        return (\n          <circle\n            key={index}\n            cx={!isNumericAxis ? xBarScale(item.index) + 0.5 * this._barWidth : xScale(item.x)}\n            cy={yScale(item.y)}\n            onMouseOver={this._onBarHover.bind(this, item.point, colorScale(item.y))}\n            onMouseOut={this._onBarLeave}\n            r={8}\n            stroke={lineLegendColor}\n            fill={this.props.theme!.palette.white}\n            strokeWidth={3}\n            visibility={this.state.activeXdataPoint === item.x ? CircleVisbility.show : CircleVisbility.hide}\n            onClick={item.point.lineData?.onClick}\n          />\n        );\n      },\n    );\n\n    return (\n      <>\n        {line}\n        {dots}\n      </>\n    );\n  };\n\n  private _checkForLine = (): boolean => {\n    const { data } = this.props;\n    return data!.some((item: IVerticalBarChartDataPoint) => item?.lineData?.y !== undefined);\n  };\n\n  private _adjustProps(): void {\n    this._points = this.props.data || [];\n    this._barWidth = this.props.barWidth || 32;\n    const { palette } = this.props.theme!;\n    this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];\n    this._isHavingLine = this._checkForLine();\n  }\n\n  private _getMargins = (margins: IMargins) => {\n    this.margins = margins;\n  };\n\n  private _renderContentForBothLineAndBars = (point: IVerticalBarChartDataPoint): JSX.Element => {\n    const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point);\n    const content: JSX.Element[] = YValueHover.map((item: IYValueHover, index: number) => {\n      return (\n        <ChartHoverCard\n          key={index}\n          Legend={item.legend}\n          {...(index === 0 && { XValue: `${hoverXValue || item.data}` })}\n          color={item.color}\n          YValue={item.data || item.y}\n          culture={this.props.culture}\n        />\n      );\n    });\n    return <>{content}</>;\n  };\n  private _renderContentForOnlyBars = (props: IVerticalBarChartDataPoint): JSX.Element => {\n    const { useSingleColor = false } = this.props;\n    return (\n      <>\n        <ChartHoverCard\n          XValue={props.xAxisCalloutData || (props.x as string)}\n          Legend={props.legend}\n          YValue={props.yAxisCalloutData || props.y}\n          color={!useSingleColor && props.color ? props.color : this._createColors()(props.y)}\n          culture={this.props.culture}\n        />\n      </>\n    );\n  };\n\n  private _renderCallout = (props?: IVerticalBarChartDataPoint): JSX.Element | null => {\n    return props\n      ? this._isHavingLine\n        ? this._renderContentForBothLineAndBars(props)\n        : this._renderContentForOnlyBars(props)\n      : null;\n  };\n\n  private _getCustomizedCallout = () => {\n    return this.props.onRenderCalloutPerDataPoint\n      ? this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps, this._renderCallout)\n      : null;\n  };\n\n  private _getGraphData = (\n    xScale: StringAxis,\n    yScale: NumericAxis,\n    containerHeight: number,\n    containerWidth: number,\n    xElement?: SVGElement | null,\n  ) => {\n    return (this._bars =\n      this._xAxisType === XAxisTypes.NumericAxis\n        ? this._createNumericBars(containerHeight, containerWidth, xElement!)\n        : this._createStringBars(containerHeight, containerWidth, xElement!));\n  };\n\n  private _createColors(): D3ScaleLinear<string, string> | ColorScale {\n    const increment = this._colors.length <= 1 ? 1 : 1 / (this._colors.length - 1);\n    const { useSingleColor = false } = this.props;\n    if (useSingleColor) {\n      return (_p?: number) => {\n        const { theme, colors } = this.props;\n        return colors && colors.length > 0 ? colors[0] : theme!.palette.blueLight;\n      };\n    }\n    const domainValues = [];\n    for (let i = 0; i < this._colors.length; i++) {\n      domainValues.push(increment * i * this._yMax);\n    }\n    const colorScale = d3ScaleLinear<string>().domain(domainValues).range(this._colors);\n    return colorScale;\n  }\n\n  private _refCallback = (element: SVGRectElement, legendTitle: string): void => {\n    this._refArray.push({ index: legendTitle, refElement: element });\n  };\n\n  private _getCalloutContentForLineAndBar = (\n    point: IVerticalBarChartDataPoint,\n  ): { YValueHover: IYValueHover[]; hoverXValue: string | number | null } => {\n    const YValueHover: IYValueHover[] = [];\n    const { theme, useSingleColor = false } = this.props;\n    const { data, lineLegendText, lineLegendColor = theme!.palette.yellow } = this.props;\n    const selectedPoint = data!.filter((xDataPoint: IVerticalBarChartDataPoint) => xDataPoint.x === point.x);\n    // there might be no y value of the line for the hovered bar. so we need to check this condition\n    if (this._isHavingLine && selectedPoint[0].lineData?.y !== undefined) {\n      // callout data for the  line\n      YValueHover.push({\n        legend: lineLegendText,\n        color: lineLegendColor,\n        y: selectedPoint[0].lineData?.y,\n        data: selectedPoint[0].lineData?.yAxisCalloutData,\n        yAxisCalloutData: selectedPoint[0].lineData?.yAxisCalloutData,\n      });\n    }\n    // callout data for the bar\n    YValueHover.push({\n      legend: selectedPoint[0].legend,\n      y: selectedPoint[0].y,\n      color: !useSingleColor\n        ? selectedPoint[0].color\n          ? selectedPoint[0].color\n          : this._createColors()(selectedPoint[0].y)\n        : this._createColors()(1),\n      data: selectedPoint[0].yAxisCalloutData,\n      yAxisCalloutData: selectedPoint[0].yAxisCalloutData,\n    });\n    return { YValueHover, hoverXValue: point.xAxisCalloutData || point.x.toString() };\n  };\n\n  private _onBarHover(\n    point: IVerticalBarChartDataPoint,\n    color: string,\n    mouseEvent: React.MouseEvent<SVGElement>,\n  ): void {\n    mouseEvent.persist();\n\n    const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point);\n    if (\n      (this.state.isLegendSelected === false ||\n        (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)) &&\n      this._calloutAnchorPoint !== point\n    ) {\n      this._calloutAnchorPoint = point;\n      this.setState({\n        refSelected: mouseEvent,\n        isCalloutVisible: true,\n        dataForHoverCard: point.y,\n        selectedLegendTitle: point.legend!,\n        color: point.color || color,\n        // To display callout value, if no callout value given, taking given point.x value as a string.\n        xCalloutValue: point.xAxisCalloutData || point.x.toString(),\n        yCalloutValue: point.yAxisCalloutData!,\n        dataPointCalloutProps: point,\n        activeXdataPoint: point.x,\n        YValueHover,\n        hoverXValue,\n        callOutAccessibilityData: point.callOutAccessibilityData,\n      });\n    }\n  }\n\n  private _onBarLeave = (): void => {\n    /**/\n  };\n\n  private _handleChartMouseLeave = (): void => {\n    this._calloutAnchorPoint = null;\n    this.setState({\n      isCalloutVisible: false,\n      activeXdataPoint: null,\n      YValueHover: [],\n      hoverXValue: '',\n    });\n  };\n\n  private _onBarFocus = (point: IVerticalBarChartDataPoint, refArrayIndexNumber: number, color: string): void => {\n    if (\n      this.state.isLegendSelected === false ||\n      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)\n    ) {\n      const { YValueHover, hoverXValue } = this._getCalloutContentForLineAndBar(point);\n      this._refArray.forEach((obj: IRefArrayData, index: number) => {\n        if (obj.index === point.legend! && refArrayIndexNumber === index) {\n          this.setState({\n            refSelected: obj.refElement,\n            isCalloutVisible: true,\n            selectedLegendTitle: point.legend!,\n            dataForHoverCard: point.y,\n            color: point.color || color,\n            xCalloutValue: point.xAxisCalloutData || point.x.toString(),\n            yCalloutValue: point.yAxisCalloutData!,\n            dataPointCalloutProps: point,\n            activeXdataPoint: point.x,\n            YValueHover,\n            hoverXValue,\n            callOutAccessibilityData: point.callOutAccessibilityData,\n          });\n        }\n      });\n    }\n  };\n\n  private _getScales = (\n    containerHeight: number,\n    containerWidth: number,\n    isNumericScale: boolean,\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  ): { xBarScale: any; yBarScale: any } => {\n    if (isNumericScale) {\n      const xMax = d3Max(this._points, (point: IVerticalBarChartDataPoint) => point.x as number)!;\n      const xBarScale = d3ScaleLinear()\n        .domain(this._isRtl ? [xMax, 0] : [0, xMax])\n        .nice()\n        .range([\n          this.margins.left! + this._barWidth / 2,\n          containerWidth - this.margins.right! - this._barWidth - this._barWidth / 2,\n        ]);\n      const yBarScale = d3ScaleLinear()\n        .domain([0, this._yMax])\n        .range([0, containerHeight - this.margins.bottom! - this.margins.top!]);\n      return { xBarScale, yBarScale };\n    } else {\n      const xBarScale = d3ScaleBand()\n        .domain(this._xAxisLabels)\n        .range([this.margins.left!, containerWidth - this.margins.right!])\n        .padding(this.props.xAxisPadding || 0.1);\n\n      const yBarScale = d3ScaleLinear()\n        .domain([0, this._yMax])\n        .range([0, containerHeight - this.margins.bottom! - this.margins.top!]);\n      return { xBarScale, yBarScale };\n    }\n  };\n\n  private _createNumericBars(containerHeight: number, containerWidth: number, xElement: SVGElement): JSX.Element[] {\n    const { useSingleColor = false } = this.props;\n    const { xBarScale, yBarScale } = this._getScales(containerHeight, containerWidth, true);\n    const colorScale = this._createColors();\n    const bars = this._points.map((point: IVerticalBarChartDataPoint, index: number) => {\n      let shouldHighlight = true;\n      if (this.state.isLegendHovered || this.state.isLegendSelected) {\n        shouldHighlight = this.state.selectedLegendTitle === point.legend;\n      }\n      this._classNames = getClassNames(this.props.styles!, {\n        theme: this.props.theme!,\n        legendColor: this.state.color,\n        shouldHighlight: shouldHighlight,\n      });\n      const barHeight: number = Math.max(yBarScale(point.y), 0);\n      if (barHeight < 1) {\n        return <React.Fragment key={point.x}> </React.Fragment>;\n      }\n      return (\n        <rect\n          key={point.x}\n          x={xBarScale(point.x as number)}\n          className={this._classNames.opacityChangeOnHover}\n          y={containerHeight - this.margins.bottom! - yBarScale(point.y)}\n          width={this._barWidth}\n          data-is-focusable={!this.props.hideTooltip}\n          height={Math.max(yBarScale(point.y), 0)}\n          ref={(e: SVGRectElement) => {\n            this._refCallback(e, point.legend!);\n          }}\n          onClick={point.onClick}\n          onMouseOver={this._onBarHover.bind(this, point, colorScale(point.y))}\n          aria-label=\"Vertical bar chart\"\n          role=\"text\"\n          aria-labelledby={`toolTip${this._calloutId}`}\n          onMouseLeave={this._onBarLeave}\n          onFocus={this._onBarFocus.bind(this, point, index, colorScale(point.y))}\n          onBlur={this._onBarLeave}\n          fill={point.color && !useSingleColor ? point.color : colorScale(point.y)}\n        />\n      );\n    });\n    // Removing un wanted tooltip div from DOM, when prop not provided.\n    if (!this.props.showXAxisLablesTooltip) {\n      try {\n        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n        // eslint-disable-next-line no-empty\n      } catch (e) {}\n    }\n    // Used to display tooltip at x axis labels.\n    if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {\n      const xAxisElement = d3Select(xElement).call(xBarScale);\n      try {\n        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n        // eslint-disable-next-line no-empty\n      } catch (e) {}\n      const tooltipProps = {\n        tooltipCls: this._classNames.tooltip!,\n        id: this._tooltipId,\n        xAxis: xAxisElement,\n      };\n      xAxisElement && tooltipOfXAxislabels(tooltipProps);\n    }\n    return bars;\n  }\n\n  private _createStringBars(containerHeight: number, containerWidth: number, xElement: SVGElement): JSX.Element[] {\n    const { xBarScale, yBarScale } = this._getScales(containerHeight, containerWidth, false);\n    const colorScale = this._createColors();\n    const bars = this._points.map((point: IVerticalBarChartDataPoint, index: number) => {\n      const barHeight: number = Math.max(yBarScale(point.y), 0);\n      if (barHeight < 1) {\n        return <React.Fragment key={point.x}> </React.Fragment>;\n      }\n      return (\n        <rect\n          key={point.x}\n          x={xBarScale(point.x)}\n          y={containerHeight - this.margins.bottom! - yBarScale(point.y)}\n          width={this._barWidth}\n          height={barHeight}\n          aria-label=\"Vertical bar chart\"\n          role=\"text\"\n          aria-labelledby={`toolTip${this._calloutId}`}\n          ref={(e: SVGRectElement) => {\n            this._refCallback(e, point.legend!);\n          }}\n          onClick={point.onClick}\n          onMouseOver={this._onBarHover.bind(this, point, colorScale(point.y))}\n          onMouseLeave={this._onBarLeave}\n          onBlur={this._onBarLeave}\n          data-is-focusable={!this.props.hideTooltip}\n          onFocus={this._onBarFocus.bind(this, point, index, colorScale(point.y))}\n          fill={point.color ? point.color : colorScale(point.y)}\n          transform={`translate(${0.5 * (xBarScale.bandwidth() - this._barWidth)}, 0)`}\n        />\n      );\n    });\n\n    // Removing un wanted tooltip div from DOM, when prop not provided.\n    if (!this.props.showXAxisLablesTooltip) {\n      try {\n        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n        // eslint-disable-next-line no-empty\n      } catch (e) {}\n    }\n    // Used to display tooltip at x axis labels.\n    if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {\n      const xAxisElement = d3Select(xElement).call(xBarScale);\n      try {\n        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n        // eslint-disable-next-line no-empty\n      } catch (e) {}\n      const tooltipProps = {\n        tooltipCls: this._classNames.tooltip!,\n        id: this._tooltipId,\n        xAxis: xAxisElement,\n        showTooltip: this.props.showXAxisLablesTooltip,\n      };\n      xAxisElement && tooltipOfXAxislabels(tooltipProps);\n    }\n    return bars;\n  }\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  private _onLegendClick(customMessage: string): void {\n    if (this.state.isLegendSelected) {\n      if (this.state.selectedLegendTitle === customMessage) {\n        this.setState({\n          isLegendSelected: false,\n          selectedLegendTitle: customMessage,\n        });\n      } else {\n        this.setState({\n          selectedLegendTitle: customMessage,\n        });\n      }\n    } else {\n      this.setState({\n        isLegendSelected: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _onLegendHover(customMessage: string): void {\n    if (this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: true,\n        selectedLegendTitle: customMessage,\n      });\n    }\n  }\n\n  private _onLegendLeave(isLegendFocused?: boolean): void {\n    if (!!isLegendFocused || this.state.isLegendSelected === false) {\n      this.setState({\n        isLegendHovered: false,\n        selectedLegendTitle: '',\n        isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,\n      });\n    }\n  }\n\n  private _getLegendData = (data: IVerticalBarChartDataPoint[], palette: IPalette): JSX.Element => {\n    const { theme, useSingleColor } = this.props;\n    const { lineLegendText, lineLegendColor = theme!.palette.yellow } = this.props;\n    const actions: ILegend[] = [];\n    data.forEach((point: IVerticalBarChartDataPoint, _index: number) => {\n      const color: string = !useSingleColor ? point.color! : this._createColors()(1);\n      // mapping data to the format Legends component needs\n      const legend: ILegend = {\n        title: point.legend!,\n        color: color,\n        action: () => {\n          this._onLegendClick(point.legend!);\n        },\n        hoverAction: () => {\n          this._onLegendHover(point.legend!);\n        },\n        onMouseOutAction: (isLegendSelected?: boolean) => {\n          this._onLegendLeave(isLegendSelected);\n        },\n      };\n      actions.push(legend);\n    });\n    if (this._isHavingLine && lineLegendText && lineLegendColor) {\n      const lineLegend: ILegend = {\n        title: lineLegendText,\n        color: lineLegendColor,\n        action: () => {\n          this._onLegendClick(lineLegendText);\n        },\n        hoverAction: () => {\n          this._onLegendHover(lineLegendText);\n        },\n        onMouseOutAction: (isLegendSelected?: boolean) => {\n          this._onLegendLeave(isLegendSelected);\n        },\n        isLineLegendInBarChart: true,\n      };\n      actions.unshift(lineLegend);\n    }\n    const legends = (\n      <Legends\n        legends={actions}\n        enabledWrapLines={this.props.enabledLegendsWrapLines}\n        overflowProps={this.props.legendsOverflowProps}\n        focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n        overflowText={this.props.legendsOverflowText}\n        {...this.props.legendProps}\n      />\n    );\n    return legends;\n  };\n\n  private _getAxisData = (yAxisData: IAxisData) => {\n    if (yAxisData && yAxisData.yAxisDomainValues.length) {\n      const { yAxisDomainValues: domainValue } = yAxisData;\n      this._yMax = Math.max(domainValue[domainValue.length - 1], this.props.yMaxValue || 0);\n    }\n  };\n}\n"]}

package/lib/components/VerticalBarChart/VerticalBarChart.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IVerticalBarChartProps } from '../../index';
+export declare const VerticalBarChart: React.FunctionComponent<IVerticalBarChartProps>;

package/lib/components/VerticalBarChart/VerticalBarChart.js

@@ -0,0 +1,6 @@
+import { styled } from '../../Utilities';
+import { VerticalBarChartBase } from './VerticalBarChart.base';
+import { getStyles } from './VerticalBarChart.styles';
+// Create a VerticalBarChart variant which uses these default styles and this styled subcomponent.
+export var VerticalBarChart = styled(VerticalBarChartBase, getStyles);
+//# sourceMappingURL=VerticalBarChart.js.map

package/lib/components/VerticalBarChart/VerticalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalBarChart.js","sourceRoot":"../src/","sources":["components/VerticalBarChart/VerticalBarChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,kGAAkG;AAClG,MAAM,CAAC,IAAM,gBAAgB,GAAoD,MAAM,CAIrF,oBAAoB,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { IVerticalBarChartProps, IVerticalBarChartStyleProps, IVerticalBarChartStyles } from '../../index';\nimport { VerticalBarChartBase } from './VerticalBarChart.base';\nimport { getStyles } from './VerticalBarChart.styles';\n\n// Create a VerticalBarChart variant which uses these default styles and this styled subcomponent.\nexport const VerticalBarChart: React.FunctionComponent<IVerticalBarChartProps> = styled<\n  IVerticalBarChartProps,\n  IVerticalBarChartStyleProps,\n  IVerticalBarChartStyles\n>(VerticalBarChartBase, getStyles);\n"]}

package/lib/components/VerticalBarChart/VerticalBarChart.styles.d.ts

@@ -0,0 +1,2 @@
+import { IVerticalBarChartStyleProps, IVerticalBarChartStyles } from '../../index';
+export declare const getStyles: (props: IVerticalBarChartStyleProps) => IVerticalBarChartStyles;

package/lib/components/VerticalBarChart/VerticalBarChart.styles.js

@@ -0,0 +1,22 @@
+import { __assign } from "tslib";
+export var getStyles = function (props) {
+    var shouldHighlight = props.shouldHighlight, theme = props.theme;
+    return {
+        opacityChangeOnHover: {
+            opacity: shouldHighlight ? '' : '0.1',
+        },
+        xAxisTicks: [],
+        yAxisTicks: [
+            {
+                transform: 'scaleX(-1)',
+            },
+        ],
+        yAxisDomain: [
+            {
+                transform: 'scaleX(-1)',
+            },
+        ],
+        tooltip: __assign(__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
+    };
+};
+//# sourceMappingURL=VerticalBarChart.styles.js.map