@fluentui/react-charting 5.21.28 → 5.21.29

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

@@ -0,0 +1,499 @@
+define(["require", "exports", "tslib", "react", "d3-array", "d3-selection", "d3-scale", "@fluentui/react/lib/Utilities", "@fluentui/react/lib/Callout", "../../components/Legends/Legends", "../CommonComponents/CartesianChart", "@fluentui/react-focus", "../../utilities/index"], function (require, exports, tslib_1, React, d3_array_1, d3_selection_1, d3_scale_1, Utilities_1, Callout_1, Legends_1, CartesianChart_1, react_focus_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.HorizontalBarChartWithAxisBase = void 0;
+    var getClassNames = (0, Utilities_1.classNamesFunction)();
+    var HorizontalBarChartWithAxisBase = /** @class */ (function (_super) {
+        tslib_1.__extends(HorizontalBarChartWithAxisBase, _super);
+        function HorizontalBarChartWithAxisBase(props) {
+            var _this = _super.call(this, props) || this;
+            _this._isRtl = (0, Utilities_1.getRTL)();
+            _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+                var domainNRangeValue;
+                if (xAxisType === index_1.XAxisTypes.NumericAxis) {
+                    domainNRangeValue = (0, index_1.domainRangeOfNumericForHorizontalBarChartWithAxis)(points, margins, width, isRTL, shiftX);
+                }
+                else {
+                    domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+                }
+                return domainNRangeValue;
+            };
+            _this._getMargins = function (margins) {
+                _this.margins = margins;
+            };
+            _this._renderContentForOnlyBars = function (point) {
+                var _a, _b;
+                var _c = _this.props.useSingleColor, useSingleColor = _c === void 0 ? false : _c;
+                var selectedPointIndex = 0;
+                _this.props.data.forEach(function (yDataPoint, index) {
+                    if (yDataPoint.y === point.y) {
+                        selectedPointIndex = index;
+                    }
+                });
+                var color;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    color = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                }
+                else {
+                    color = point.color
+                        ? point.color
+                        : _this.props.colors
+                            ? _this._createColors()(point.x)
+                            : (0, index_1.getNextColor)(selectedPointIndex, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                }
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(index_1.ChartHoverCard, { XValue: point.xAxisCalloutData || point.x.toString(), Legend: point.legend, YValue: point.yAxisCalloutData || point.y, color: color, culture: _this.props.culture })));
+            };
+            _this._renderCallout = function (props) {
+                return 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, yElement) {
+                return (_this._bars =
+                    _this._yAxisType === index_1.YAxisType.NumericAxis
+                        ? _this._createNumericBars(containerHeight, containerWidth, xElement, yElement)
+                        : _this._createStringBars(containerHeight, containerWidth, xElement, yElement));
+            };
+            _this._refCallback = function (element, legendTitle) {
+                _this._refArray.push({ index: legendTitle, refElement: element });
+            };
+            _this._getCalloutContentForBar = function (point) {
+                var _a, _b;
+                var YValueHover = [];
+                var _c = _this.props.useSingleColor, useSingleColor = _c === void 0 ? false : _c;
+                var data = _this.props.data;
+                var selectedPoint = data.filter(function (yDataPoint) { return yDataPoint.y === point.y; });
+                var selectedPointIndex = 0;
+                data.forEach(function (yDataPoint, index) {
+                    if (yDataPoint.y === point.y) {
+                        selectedPointIndex = index;
+                    }
+                });
+                var color;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    color = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                }
+                else {
+                    color = selectedPoint[0].color
+                        ? selectedPoint[0].color
+                        : _this.props.colors
+                            ? _this._createColors()(selectedPoint[0].x)
+                            : (0, index_1.getNextColor)(selectedPointIndex, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                }
+                // callout data for the bar
+                YValueHover.push({
+                    legend: selectedPoint[0].legend,
+                    // For HBCWA x and y Values are swapped
+                    y: selectedPoint[0].x,
+                    color: color,
+                    data: selectedPoint[0].yAxisCalloutData,
+                    yAxisCalloutData: selectedPoint[0].yAxisCalloutData,
+                });
+                return { YValueHover: YValueHover, hoverXValue: point.yAxisCalloutData || point.y.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._getCalloutContentForBar(point), YValueHover_1 = _a.YValueHover, hoverXValue_1 = _a.hoverXValue;
+                    _this._refArray.forEach(function (obj, index) {
+                        if (refArrayIndexNumber === index) {
+                            _this.setState({
+                                refSelected: obj.refElement,
+                                isCalloutVisible: true,
+                                selectedLegendTitle: point.legend,
+                                dataForHoverCard: point.x,
+                                color: _this.props.useSingleColor ? color : point.color,
+                                xCalloutValue: point.yAxisCalloutData || point.y.toString(),
+                                yCalloutValue: point.xAxisCalloutData || point.x.toString(),
+                                dataPointCalloutProps: point,
+                                activeXdataPoint: point.x,
+                                YValueHover: YValueHover_1,
+                                hoverXValue: hoverXValue_1,
+                                callOutAccessibilityData: point.callOutAccessibilityData,
+                            });
+                        }
+                    });
+                }
+            };
+            _this._getScales = function (containerHeight, containerWidth, isNumericScale) {
+                if (isNumericScale) {
+                    var xMax = (0, d3_array_1.max)(_this._points, function (point) { return point.x; });
+                    var yMax = (0, d3_array_1.max)(_this._points, function (point) { return point.y; });
+                    var xBarScale = (0, d3_scale_1.scaleLinear)()
+                        .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
+                        .nice()
+                        .range([_this.margins.left, containerWidth - _this.margins.right]);
+                    var yBarScale = (0, d3_scale_1.scaleLinear)()
+                        .domain([0, yMax])
+                        .range([containerHeight - _this.margins.bottom, _this.margins.top]);
+                    return { xBarScale: xBarScale, yBarScale: yBarScale };
+                }
+                else {
+                    var xMax = (0, d3_array_1.max)(_this._points, function (point) { return point.x; });
+                    // please note these padding default values must be consistent in here
+                    // and CatrtesianChartBase w for more details refer example
+                    // http://using-d3js.com/04_07_ordinal_scales.html
+                    var yBarScale = (0, d3_scale_1.scaleBand)()
+                        .domain(_this._yAxisLabels)
+                        .range([containerHeight - _this.margins.bottom - _this._barHeight / 2, _this.margins.top + _this._barHeight / 2])
+                        .padding(_this.props.yAxisPadding || 0);
+                    var xBarScale = (0, d3_scale_1.scaleLinear)()
+                        .domain(_this._isRtl ? [xMax, 0] : [0, xMax])
+                        .nice()
+                        .range([_this.margins.left, containerWidth - _this.margins.right]);
+                    return { xBarScale: xBarScale, yBarScale: yBarScale };
+                }
+            };
+            _this._closeCallout = function () {
+                _this.setState({
+                    isCalloutVisible: false,
+                });
+            };
+            _this._getLegendData = function (data, palette) {
+                var useSingleColor = _this.props.useSingleColor;
+                var actions = [];
+                data.forEach(function (point, _index) {
+                    var _a;
+                    var color = useSingleColor
+                        ? _this.props.colors
+                            ? _this._createColors()(1)
+                            : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted)
+                        : point.color;
+                    // 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 (isLegendSelected) {
+                            _this._onLegendLeave(isLegendSelected);
+                        },
+                    };
+                    actions.push(legend);
+                });
+                var legends = (React.createElement(Legends_1.Legends, tslib_1.__assign({ legends: actions, enabledWrapLines: _this.props.enabledLegendsWrapLines, overflowProps: _this.props.legendsOverflowProps, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard, overflowText: _this.props.legendsOverflowText }, _this.props.legendProps)));
+                return legends;
+            };
+            _this._getAxisData = function (yAxisData) {
+                if (yAxisData && yAxisData.yAxisDomainValues.length) {
+                    // For HBCWA x and y Values are swapped
+                    var domainValue = yAxisData.yAxisDomainValues;
+                    _this._xMax = Math.max(domainValue[domainValue.length - 1], _this.props.xMaxValue || 0);
+                }
+            };
+            _this._getAriaLabel = function (point) {
+                var _a;
+                var xValue = point.xAxisCalloutData || point.x;
+                var yValue = point.yAxisCalloutData || point.y;
+                return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ") + "".concat(yValue, ".");
+            };
+            _this._getChartTitle = function () {
+                var _a = _this.props, chartTitle = _a.chartTitle, data = _a.data;
+                return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Horizontal bar chart with ".concat((data === null || data === void 0 ? void 0 : data.length) || 0, " bars. ");
+            };
+            _this.state = {
+                color: '',
+                dataForHoverCard: 0,
+                isCalloutVisible: false,
+                isLegendSelected: false,
+                isLegendHovered: false,
+                refSelected: null,
+                selectedLegendTitle: '',
+                xCalloutValue: '',
+                yCalloutValue: '',
+                activeXdataPoint: null,
+                YValueHover: [],
+                hoverXValue: '',
+            };
+            _this._calloutId = (0, Utilities_1.getId)('callout');
+            _this._tooltipId = (0, Utilities_1.getId)('HBCWATooltipID_');
+            _this._refArray = [];
+            _this._xAxisType =
+                _this.props.data && _this.props.data.length > 0
+                    ? (0, index_1.getTypeOfAxis)(_this.props.data[0].x, true)
+                    : index_1.XAxisTypes.NumericAxis;
+            _this._yAxisType =
+                _this.props.data && _this.props.data.length > 0
+                    ? (0, index_1.getTypeOfAxis)(_this.props.data[0].y, false)
+                    : index_1.YAxisType.StringAxis;
+            return _this;
+        }
+        HorizontalBarChartWithAxisBase.prototype.render = function () {
+            var _this = this;
+            this._adjustProps();
+            var reversedBars = tslib_1.__spreadArray([], this._points, true).reverse();
+            this._yAxisLabels = reversedBars.map(function (point) { return point.y; });
+            this._xMax = Math.max((0, d3_array_1.max)(this._points, function (point) { return point.x; }), this.props.xMaxValue || 0);
+            var legendBars = this._getLegendData(this._points, this.props.theme.palette);
+            this._classNames = getClassNames(this.props.styles, {
+                theme: this.props.theme,
+                legendColor: this.state.color,
+            });
+            var calloutProps = tslib_1.__assign(tslib_1.__assign({ isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: "toolTip".concat(this._calloutId), target: this.state.refSelected, isBeakVisible: false, gapSpace: 15, color: this.state.color, legend: this.state.selectedLegendTitle, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps), (0, index_1.getAccessibleDataObject)(this.state.callOutAccessibilityData));
+            var tickParams = {
+                tickValues: this.props.tickValues,
+                tickFormat: this.props.tickFormat,
+            };
+            return (React.createElement(CartesianChart_1.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._points, chartType: index_1.ChartTypes.HorizontalBarChartWithAxis, xAxisType: this._xAxisType, yAxisType: this._yAxisType, stringDatasetForYAxisDomain: this._yAxisLabels, calloutProps: calloutProps, tickParams: tickParams, legendBars: legendBars, createYAxis: index_1.createYAxisForHorizontalBarChartWithAxis, getDomainNRangeValues: this._getDomainNRangeValues, createStringYAxis: index_1.createStringYAxisForHorizontalBarChartWithAxis, getMinMaxOfYAxis: index_1.findHBCWANumericMinMaxOfY, barwidth: this._barHeight, focusZoneDirection: react_focus_1.FocusZoneDirection.vertical, 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)));
+                } })));
+        };
+        HorizontalBarChartWithAxisBase.prototype._adjustProps = function () {
+            this._points = this.props.data || [];
+            this._barHeight = this.props.barHeight || 32;
+            var palette = this.props.theme.palette;
+            this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];
+        };
+        HorizontalBarChartWithAxisBase.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._xMax);
+            }
+            var colorScale = (0, d3_scale_1.scaleLinear)().domain(domainValues).range(this._colors);
+            return colorScale;
+        };
+        HorizontalBarChartWithAxisBase.prototype._onBarHover = function (point, color, mouseEvent) {
+            mouseEvent.persist();
+            var _a = this._getCalloutContentForBar(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.x,
+                    selectedLegendTitle: point.legend,
+                    color: this.props.useSingleColor ? color : point.color,
+                    // To display callout value, if no callout value given, taking given point.x value as a string.
+                    xCalloutValue: point.yAxisCalloutData || point.y.toString(),
+                    yCalloutValue: point.xAxisCalloutData || point.x.toString(),
+                    dataPointCalloutProps: point,
+                    activeXdataPoint: point.x,
+                    YValueHover: YValueHover,
+                    hoverXValue: hoverXValue,
+                    callOutAccessibilityData: point.callOutAccessibilityData,
+                });
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        HorizontalBarChartWithAxisBase.prototype._createNumericBars = function (containerHeight, containerWidth, xElement, yElement) {
+            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 sortedBars = tslib_1.__spreadArray([], this._points, true);
+            sortedBars.sort(function (a, b) {
+                var aValue = typeof a.y === 'number' ? a.y : parseFloat(a.y);
+                var bValue = typeof b.y === 'number' ? b.y : parseFloat(b.y);
+                return bValue - aValue;
+            });
+            var bars = sortedBars.map(function (point, index) {
+                var _a, _b;
+                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 }, " ");
+                }
+                var color;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    color = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                }
+                else {
+                    color = _this.props.colors
+                        ? _this._createColors()(point.x)
+                        : (0, index_1.getNextColor)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                }
+                return (React.createElement("rect", { key: point.y, x: _this._isRtl ? xBarScale(point.x) : _this.margins.left, className: _this._classNames.opacityChangeOnHover, y: yBarScale(point.y) - _this._barHeight / 2, "data-is-focusable": shouldHighlight, width: _this._isRtl
+                        ? containerWidth - _this.margins.right - Math.max(xBarScale(point.x), 0)
+                        : Math.max(xBarScale(point.x), 0) - _this.margins.left, height: _this._barHeight, ref: function (e) {
+                        _this._refCallback(e, point.legend);
+                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, color), "aria-label": _this._getAriaLabel(point), role: "img", "aria-labelledby": "toolTip".concat(_this._calloutId), onMouseLeave: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, point, index, color), onBlur: _this._onBarLeave, fill: point.color && !useSingleColor ? point.color : color }));
+            });
+            return bars;
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        HorizontalBarChartWithAxisBase.prototype._tooltipOfYAxislabels = function (ytooltipProps) {
+            var _this = this;
+            var tooltipCls = ytooltipProps.tooltipCls, yAxis = ytooltipProps.yAxis, id = ytooltipProps.id;
+            if (yAxis === null) {
+                return null;
+            }
+            var div = (0, d3_selection_1.select)('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);
+            var aa = yAxis.selectAll('#BaseSpan')._groups[0];
+            var baseSpanLength = aa && Object.keys(aa).length;
+            var originalDataArray = [];
+            for (var i = 0; i < baseSpanLength; i++) {
+                var originalData = aa[i].dataset && Object.values(aa[i].dataset)[0];
+                originalDataArray.push(originalData);
+            }
+            var tickObject = yAxis.selectAll('.tick')._groups[0];
+            var tickObjectLength = tickObject && Object.keys(tickObject).length;
+            var _loop_1 = function (i) {
+                var d1 = tickObject[i];
+                (0, d3_selection_1.select)(d1)
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    .on('mouseover', function (event, d) {
+                    if (!_this.state.tooltipElement) {
+                        div.style('opacity', 0.9);
+                        div
+                            .html(originalDataArray[i])
+                            .style('left', event.pageX + 'px')
+                            .style('top', event.pageY - 28 + 'px');
+                    }
+                })
+                    .on('mouseout', function (d) {
+                    div.style('opacity', 0);
+                });
+            };
+            for (var i = 0; i < tickObjectLength; i++) {
+                _loop_1(i);
+            }
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        HorizontalBarChartWithAxisBase.prototype._createStringBars = function (containerHeight, containerWidth, xElement, yElement) {
+            var _this = this;
+            var _a = this._getScales(containerHeight, containerWidth, false), xBarScale = _a.xBarScale, yBarScale = _a.yBarScale;
+            var _b = this.props.useSingleColor, useSingleColor = _b === void 0 ? false : _b;
+            var bars = this._points.map(function (point, index) {
+                var _a, _b;
+                var barHeight = Math.max(yBarScale(point.y), 0);
+                if (barHeight < 1) {
+                    return React.createElement(React.Fragment, { key: point.x }, " ");
+                }
+                var color;
+                if (useSingleColor) {
+                    //if useSingle color , then check if user has given a palette or not
+                    // and pick the first color from that or else from our paltette.
+                    color = _this.props.colors ? _this._createColors()(1) : (0, index_1.getNextColor)(1, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                }
+                else {
+                    color = _this.props.colors
+                        ? _this._createColors()(point.x)
+                        : (0, index_1.getNextColor)(index, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted);
+                }
+                return (React.createElement("rect", { transform: "translate(0,".concat(0.5 * (yBarScale.bandwidth() - _this._barHeight), ")"), key: point.x, x: _this._isRtl ? xBarScale(point.x) : _this.margins.left, y: yBarScale(point.y), width: _this._isRtl
+                        ? containerWidth - _this.margins.right - Math.max(xBarScale(point.x), 0)
+                        : Math.max(xBarScale(point.x), 0) - _this.margins.left, height: _this._barHeight, "aria-labelledby": "toolTip".concat(_this._calloutId), "aria-label": _this._getAriaLabel(point), role: "img", ref: function (e) {
+                        _this._refCallback(e, point.legend);
+                    }, onClick: point.onClick, onMouseOver: _this._onBarHover.bind(_this, point, color), onMouseLeave: _this._onBarLeave, onBlur: _this._onBarLeave, "data-is-focusable": true, onFocus: _this._onBarFocus.bind(_this, point, index, color), fill: point.color && !useSingleColor ? point.color : color }));
+            });
+            // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup
+            // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur
+            // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)
+            if (!this.props.showYAxisLablesTooltip) {
+                try {
+                    document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                    //eslint-disable-next-line no-empty
+                }
+                catch (e) { }
+            }
+            // Used to display tooltip at y axis labels.
+            if (this.props.showYAxisLablesTooltip) {
+                var yAxisElement = (0, d3_selection_1.select)(yElement).call(yBarScale);
+                if (!this.state.tooltipElement) {
+                    try {
+                        document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId).remove();
+                        //eslint-disable-next-line no-empty
+                    }
+                    catch (e) { }
+                }
+                var ytooltipProps = {
+                    tooltipCls: this._classNames.tooltip,
+                    id: this._tooltipId,
+                    yAxis: yAxisElement,
+                };
+                yAxisElement && this._tooltipOfYAxislabels(ytooltipProps);
+            }
+            return bars;
+        };
+        HorizontalBarChartWithAxisBase.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,
+                });
+            }
+        };
+        HorizontalBarChartWithAxisBase.prototype._onLegendHover = function (customMessage) {
+            if (this.state.isLegendSelected === false) {
+                this.setState({
+                    isLegendHovered: true,
+                    selectedLegendTitle: customMessage,
+                });
+            }
+        };
+        HorizontalBarChartWithAxisBase.prototype._onLegendLeave = function (isLegendFocused) {
+            if (!!isLegendFocused || this.state.isLegendSelected === false) {
+                this.setState({
+                    isLegendHovered: false,
+                    selectedLegendTitle: '',
+                    isLegendSelected: isLegendFocused ? false : this.state.isLegendSelected,
+                });
+            }
+        };
+        return HorizontalBarChartWithAxisBase;
+    }(React.Component));
+    exports.HorizontalBarChartWithAxisBase = HorizontalBarChartWithAxisBase;
+});
+//# sourceMappingURL=HorizontalBarChartWithAxis.base.js.map

package/lib-amd/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalBarChartWithAxis.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { max as d3Max } from 'd3-array';\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 { ILegend } from '../../components/Legends/Legends.types';\nimport { Legends } from '../../components/Legends/Legends';\nimport {\n  IAccessibilityProps,\n  IBasestate,\n  IHorizontalBarChartWithAxisDataPoint,\n  IRefArrayData,\n  IMargins,\n} from '../../types/IDataPoint';\nimport { IChildProps, IYValueHover } from '../CommonComponents/CartesianChart.types';\nimport { CartesianChart } from '../CommonComponents/CartesianChart';\nimport {\n  IHorizontalBarChartWithAxisProps,\n  IHorizontalBarChartWithAxisStyleProps,\n  IHorizontalBarChartWithAxisStyles,\n} from './HorizontalBarChartWithAxis.types';\nimport { FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n  ChartHoverCard,\n  ChartTypes,\n  IAxisData,\n  getAccessibleDataObject,\n  YAxisType,\n  XAxisTypes,\n  NumericAxis,\n  StringAxis,\n  getTypeOfAxis,\n  getNextColor,\n  findHBCWANumericMinMaxOfY,\n  createYAxisForHorizontalBarChartWithAxis,\n  IDomainNRange,\n  domainRangeOfNumericForHorizontalBarChartWithAxis,\n  createStringYAxisForHorizontalBarChartWithAxis,\n} from '../../utilities/index';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartWithAxisStyleProps, IHorizontalBarChartWithAxisStyles>();\nexport interface IHorizontalBarChartWithAxisState extends IBasestate {\n  selectedLegendTitle: string;\n  dataPointCalloutProps?: IHorizontalBarChartWithAxisDataPoint; // define this in hover and focus\n  /**\n   * data point of x, where rectangle is hovered or focused\n   */\n  activeXdataPoint: number | null;\n  YValueHover: IYValueHover[];\n  hoverXValue?: string | number | null;\n  callOutAccessibilityData?: IAccessibilityProps;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  tooltipElement?: any;\n}\n\ntype ColorScale = (_p?: number) => string;\n\nexport class HorizontalBarChartWithAxisBase extends React.Component<\n  IHorizontalBarChartWithAxisProps,\n  IHorizontalBarChartWithAxisState\n> {\n  private _points: IHorizontalBarChartWithAxisDataPoint[];\n  private _barHeight: number;\n  private _colors: string[];\n  private _classNames: IProcessedStyleSet<IHorizontalBarChartWithAxisStyles>;\n  private _refArray: IRefArrayData[];\n  private _calloutId: string;\n  private margins: IMargins;\n  private _isRtl: boolean = getRTL();\n  private _bars: JSX.Element[];\n  private _yAxisLabels: string[];\n  private _xMax: number;\n  private _tooltipId: string;\n  private _xAxisType: XAxisTypes;\n  private _yAxisType: YAxisType;\n  private _calloutAnchorPoint: IHorizontalBarChartWithAxisDataPoint | null;\n\n  public constructor(props: IHorizontalBarChartWithAxisProps) {\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._calloutId = getId('callout');\n    this._tooltipId = getId('HBCWATooltipID_');\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.NumericAxis;\n    this._yAxisType =\n      this.props.data! && this.props.data!.length > 0\n        ? (getTypeOfAxis(this.props.data![0].y, false) as YAxisType)\n        : YAxisType.StringAxis;\n  }\n\n  public render(): JSX.Element {\n    this._adjustProps();\n    const reversedBars = [...this._points].reverse();\n    this._yAxisLabels = reversedBars.map((point: IHorizontalBarChartWithAxisDataPoint) => point.y as string);\n    this._xMax = Math.max(\n      d3Max(this._points, (point: IHorizontalBarChartWithAxisDataPoint) => point.x)!,\n      this.props.xMaxValue || 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      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        chartTitle={this._getChartTitle()}\n        points={this._points}\n        chartType={ChartTypes.HorizontalBarChartWithAxis}\n        xAxisType={this._xAxisType}\n        yAxisType={this._yAxisType}\n        stringDatasetForYAxisDomain={this._yAxisLabels}\n        calloutProps={calloutProps}\n        tickParams={tickParams}\n        legendBars={legendBars}\n        createYAxis={createYAxisForHorizontalBarChartWithAxis}\n        getDomainNRangeValues={this._getDomainNRangeValues}\n        createStringYAxis={createStringYAxisForHorizontalBarChartWithAxis}\n        getMinMaxOfYAxis={findHBCWANumericMinMaxOfY}\n        barwidth={this._barHeight}\n        focusZoneDirection={FocusZoneDirection.vertical}\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            </>\n          );\n        }}\n      />\n    );\n  }\n\n  private _getDomainNRangeValues = (\n    points: IHorizontalBarChartWithAxisDataPoint[],\n    margins: IMargins,\n    width: number,\n    chartType: ChartTypes,\n    isRTL: boolean,\n    xAxisType: XAxisTypes,\n    barWidth: number,\n    tickValues: Date[] | number[] | undefined,\n    shiftX: number,\n  ) => {\n    let domainNRangeValue: IDomainNRange;\n    if (xAxisType === XAxisTypes.NumericAxis) {\n      domainNRangeValue = domainRangeOfNumericForHorizontalBarChartWithAxis(points, margins, width, isRTL, shiftX);\n    } else {\n      domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };\n    }\n    return domainNRangeValue;\n  };\n\n  private _adjustProps(): void {\n    this._points = this.props.data || [];\n    this._barHeight = this.props.barHeight || 32;\n    const { palette } = this.props.theme!;\n    this._colors = this.props.colors || [palette.blueLight, palette.blue, palette.blueMid, palette.blueDark];\n  }\n\n  private _getMargins = (margins: IMargins) => {\n    this.margins = margins;\n  };\n\n  private _renderContentForOnlyBars = (point: IHorizontalBarChartWithAxisDataPoint): JSX.Element => {\n    const { useSingleColor = false } = this.props;\n    let selectedPointIndex = 0;\n    this.props.data!.forEach((yDataPoint: IHorizontalBarChartWithAxisDataPoint, index: number) => {\n      if (yDataPoint.y === point.y) {\n        selectedPointIndex = index;\n      }\n    });\n    let color: string;\n    if (useSingleColor) {\n      //if useSingle color , then check if user has given a palette or not\n      // and pick the first color from that or else from our paltette.\n      color = this.props.colors ? this._createColors()(1) : getNextColor(1, 0, this.props.theme?.isInverted);\n    } else {\n      color = point.color\n        ? point.color\n        : this.props.colors\n        ? this._createColors()(point.x)\n        : getNextColor(selectedPointIndex, 0, this.props.theme?.isInverted);\n    }\n    return (\n      <>\n        <ChartHoverCard\n          XValue={point.xAxisCalloutData || point.x.toString()}\n          Legend={point.legend}\n          YValue={point.yAxisCalloutData || point.y}\n          color={color}\n          culture={this.props.culture}\n        />\n      </>\n    );\n  };\n\n  private _renderCallout = (props?: IHorizontalBarChartWithAxisDataPoint): JSX.Element | null => {\n    return props ? this._renderContentForOnlyBars(props) : 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: NumericAxis,\n    yScale: NumericAxis | StringAxis,\n    containerHeight: number,\n    containerWidth: number,\n    xElement?: SVGElement | null,\n    yElement?: SVGElement | null,\n  ) => {\n    return (this._bars =\n      this._yAxisType === YAxisType.NumericAxis\n        ? this._createNumericBars(containerHeight, containerWidth, xElement!, yElement!)\n        : this._createStringBars(containerHeight, containerWidth, xElement!, yElement!));\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._xMax);\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 _getCalloutContentForBar = (\n    point: IHorizontalBarChartWithAxisDataPoint,\n  ): { YValueHover: IYValueHover[]; hoverXValue: string | number | null } => {\n    const YValueHover: IYValueHover[] = [];\n    const { useSingleColor = false } = this.props;\n    const { data } = this.props;\n    const selectedPoint = data!.filter((yDataPoint: IHorizontalBarChartWithAxisDataPoint) => yDataPoint.y === point.y);\n    let selectedPointIndex = 0;\n    data!.forEach((yDataPoint: IHorizontalBarChartWithAxisDataPoint, index: number) => {\n      if (yDataPoint.y === point.y) {\n        selectedPointIndex = index;\n      }\n    });\n    let color: string;\n    if (useSingleColor) {\n      //if useSingle color , then check if user has given a palette or not\n      // and pick the first color from that or else from our paltette.\n      color = this.props.colors ? this._createColors()(1) : getNextColor(1, 0, this.props.theme?.isInverted);\n    } else {\n      color = selectedPoint[0].color\n        ? selectedPoint[0].color\n        : this.props.colors\n        ? this._createColors()(selectedPoint[0].x)\n        : getNextColor(selectedPointIndex, 0, this.props.theme?.isInverted);\n    }\n    // callout data for the bar\n    YValueHover.push({\n      legend: selectedPoint[0].legend,\n      // For HBCWA x and y Values are swapped\n      y: selectedPoint[0].x,\n      color,\n      data: selectedPoint[0].yAxisCalloutData,\n      yAxisCalloutData: selectedPoint[0].yAxisCalloutData,\n    });\n    return { YValueHover, hoverXValue: point.yAxisCalloutData || point.y.toString() };\n  };\n\n  private _onBarHover(\n    point: IHorizontalBarChartWithAxisDataPoint,\n    color: string,\n    mouseEvent: React.MouseEvent<SVGElement>,\n  ): void {\n    mouseEvent.persist();\n\n    const { YValueHover, hoverXValue } = this._getCalloutContentForBar(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.x,\n        selectedLegendTitle: point.legend!,\n        color: this.props.useSingleColor ? color : point.color,\n        // To display callout value, if no callout value given, taking given point.x value as a string.\n        xCalloutValue: point.yAxisCalloutData! || point.y.toString(),\n        yCalloutValue: point.xAxisCalloutData || point.x.toString(),\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 = (\n    point: IHorizontalBarChartWithAxisDataPoint,\n    refArrayIndexNumber: number,\n    color: string,\n  ): void => {\n    if (\n      this.state.isLegendSelected === false ||\n      (this.state.isLegendSelected && this.state.selectedLegendTitle === point.legend)\n    ) {\n      const { YValueHover, hoverXValue } = this._getCalloutContentForBar(point);\n      this._refArray.forEach((obj: IRefArrayData, index: number) => {\n        if (refArrayIndexNumber === index) {\n          this.setState({\n            refSelected: obj.refElement,\n            isCalloutVisible: true,\n            selectedLegendTitle: point.legend!,\n            dataForHoverCard: point.x,\n            color: this.props.useSingleColor ? color : point.color,\n            xCalloutValue: point.yAxisCalloutData || point.y.toString(),\n            yCalloutValue: point.xAxisCalloutData! || point.x.toString(),\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: IHorizontalBarChartWithAxisDataPoint) => point.x as number)!;\n      const yMax = d3Max(this._points, (point: IHorizontalBarChartWithAxisDataPoint) => point.y as number)!;\n      const xBarScale = d3ScaleLinear()\n        .domain(this._isRtl ? [xMax, 0] : [0, xMax])\n        .nice()\n        .range([this.margins.left!, containerWidth - this.margins.right!]);\n      const yBarScale = d3ScaleLinear()\n        .domain([0, yMax])\n        .range([containerHeight - this.margins.bottom!, this.margins.top!]);\n      return { xBarScale, yBarScale };\n    } else {\n      const xMax = d3Max(this._points, (point: IHorizontalBarChartWithAxisDataPoint) => point.x as number)!;\n      // please note these padding default values must be consistent in here\n      // and CatrtesianChartBase w for more details refer example\n      // http://using-d3js.com/04_07_ordinal_scales.html\n      const yBarScale = d3ScaleBand()\n        .domain(this._yAxisLabels)\n        .range([containerHeight - this.margins.bottom! - this._barHeight / 2, this.margins.top! + this._barHeight / 2])\n        .padding(this.props.yAxisPadding || 0);\n\n      const xBarScale = d3ScaleLinear()\n        .domain(this._isRtl ? [xMax, 0] : [0, xMax])\n        .nice()\n        .range([this.margins.left!, containerWidth - this.margins.right!]);\n      return { xBarScale, yBarScale };\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _createNumericBars(\n    containerHeight: number,\n    containerWidth: number,\n    xElement: SVGElement,\n    yElement: SVGElement,\n  ): JSX.Element[] {\n    const { useSingleColor = false } = this.props;\n    const { xBarScale, yBarScale } = this._getScales(containerHeight, containerWidth, true);\n    const sortedBars: IHorizontalBarChartWithAxisDataPoint[] = [...this._points];\n    sortedBars.sort((a, b) => {\n      const aValue = typeof a.y === 'number' ? a.y : parseFloat(a.y);\n      const bValue = typeof b.y === 'number' ? b.y : parseFloat(b.y);\n      return bValue - aValue;\n    });\n    const bars = sortedBars.map((point: IHorizontalBarChartWithAxisDataPoint, 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,\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      let color: string;\n      if (useSingleColor) {\n        //if useSingle color , then check if user has given a palette or not\n        // and pick the first color from that or else from our paltette.\n        color = this.props.colors ? this._createColors()(1) : getNextColor(1, 0, this.props.theme?.isInverted);\n      } else {\n        color = this.props.colors\n          ? this._createColors()(point.x)\n          : getNextColor(index, 0, this.props.theme?.isInverted);\n      }\n      return (\n        <rect\n          key={point.y}\n          x={this._isRtl ? xBarScale(point.x) : this.margins.left!}\n          className={this._classNames.opacityChangeOnHover}\n          y={yBarScale(point.y) - this._barHeight / 2}\n          data-is-focusable={shouldHighlight}\n          width={\n            this._isRtl\n              ? containerWidth - this.margins.right! - Math.max(xBarScale(point.x), 0)\n              : Math.max(xBarScale(point.x), 0) - this.margins.left!\n          }\n          height={this._barHeight}\n          ref={(e: SVGRectElement) => {\n            this._refCallback(e, point.legend!);\n          }}\n          onClick={point.onClick}\n          onMouseOver={this._onBarHover.bind(this, point, color)}\n          aria-label={this._getAriaLabel(point)}\n          role=\"img\"\n          aria-labelledby={`toolTip${this._calloutId}`}\n          onMouseLeave={this._onBarLeave}\n          onFocus={this._onBarFocus.bind(this, point, index, color)}\n          onBlur={this._onBarLeave}\n          fill={point.color && !useSingleColor ? point.color : color}\n        />\n      );\n    });\n    return bars;\n  }\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _tooltipOfYAxislabels(ytooltipProps: any) {\n    const { tooltipCls, yAxis, id } = ytooltipProps;\n    if (yAxis === null) {\n      return null;\n    }\n    const div = d3Select('body').append('div').attr('id', id).attr('class', tooltipCls).style('opacity', 0);\n    const aa = yAxis!.selectAll('#BaseSpan')._groups[0];\n    const baseSpanLength = aa && Object.keys(aa)!.length;\n    const originalDataArray: string[] = [];\n    for (let i = 0; i < baseSpanLength; i++) {\n      const originalData = aa[i].dataset && (Object.values(aa[i].dataset)[0] as string);\n      originalDataArray.push(originalData);\n    }\n    const tickObject = yAxis!.selectAll('.tick')._groups[0];\n    const tickObjectLength = tickObject && Object.keys(tickObject)!.length;\n    for (let i = 0; i < tickObjectLength; i++) {\n      const d1 = tickObject[i];\n      d3Select(d1)\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        .on('mouseover', (event: any, d) => {\n          if (!this.state.tooltipElement) {\n            div.style('opacity', 0.9);\n            div\n              .html(originalDataArray[i])\n              .style('left', event.pageX + 'px')\n              .style('top', event.pageY - 28 + 'px');\n          }\n        })\n        .on('mouseout', d => {\n          div.style('opacity', 0);\n        });\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _createStringBars(\n    containerHeight: number,\n    containerWidth: number,\n    xElement: SVGElement,\n    yElement: SVGElement,\n  ): JSX.Element[] {\n    const { xBarScale, yBarScale } = this._getScales(containerHeight, containerWidth, false);\n    const { useSingleColor = false } = this.props;\n    const bars = this._points.map((point: IHorizontalBarChartWithAxisDataPoint, 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      let color: string;\n      if (useSingleColor) {\n        //if useSingle color , then check if user has given a palette or not\n        // and pick the first color from that or else from our paltette.\n        color = this.props.colors ? this._createColors()(1) : getNextColor(1, 0, this.props.theme?.isInverted);\n      } else {\n        color = this.props.colors\n          ? this._createColors()(point.x)\n          : getNextColor(index, 0, this.props.theme?.isInverted);\n      }\n\n      return (\n        <rect\n          transform={`translate(0,${0.5 * (yBarScale.bandwidth() - this._barHeight)})`}\n          key={point.x}\n          x={this._isRtl ? xBarScale(point.x) : this.margins.left!}\n          y={yBarScale(point.y)}\n          width={\n            this._isRtl\n              ? containerWidth - this.margins.right! - Math.max(xBarScale(point.x), 0)\n              : Math.max(xBarScale(point.x), 0) - this.margins.left!\n          }\n          height={this._barHeight}\n          aria-labelledby={`toolTip${this._calloutId}`}\n          aria-label={this._getAriaLabel(point)}\n          role=\"img\"\n          ref={(e: SVGRectElement) => {\n            this._refCallback(e, point.legend!);\n          }}\n          onClick={point.onClick}\n          onMouseOver={this._onBarHover.bind(this, point, color)}\n          onMouseLeave={this._onBarLeave}\n          onBlur={this._onBarLeave}\n          data-is-focusable={true}\n          onFocus={this._onBarFocus.bind(this, point, index, color)}\n          fill={point.color && !useSingleColor ? point.color : color}\n        />\n      );\n    });\n\n    // Removing un wanted tooltip div from DOM, when prop not provided, for proper cleanup\n    // of unwanted DOM elements, to prevent flacky behaviour in tooltips , that might occur\n    // in creating tooltips when tooltips are enabled( as we try to recreate a tspan with this._tooltipId)\n    if (!this.props.showYAxisLablesTooltip) {\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 y axis labels.\n    if (this.props.showYAxisLablesTooltip) {\n      const yAxisElement = d3Select(yElement).call(yBarScale);\n      if (!this.state.tooltipElement) {\n        try {\n          document.getElementById(this._tooltipId) && document.getElementById(this._tooltipId)!.remove();\n          //eslint-disable-next-line no-empty\n        } catch (e) {}\n      }\n      const ytooltipProps = {\n        tooltipCls: this._classNames.tooltip!,\n        id: this._tooltipId,\n        yAxis: yAxisElement,\n      };\n      yAxisElement && this._tooltipOfYAxislabels(ytooltipProps);\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: IHorizontalBarChartWithAxisDataPoint[], palette: IPalette): JSX.Element => {\n    const { useSingleColor } = this.props;\n    const actions: ILegend[] = [];\n    data.forEach((point: IHorizontalBarChartWithAxisDataPoint, _index: number) => {\n      const color: string = useSingleColor\n        ? this.props.colors\n          ? this._createColors()(1)\n          : getNextColor(1, 0, this.props.theme?.isInverted)\n        : point.color!;\n      // mapping data to the format Legends component needs\n      const legend: ILegend = {\n        title: point.legend!,\n        color,\n        action: () => {\n          this._onLegendClick(point.legend!);\n        },\n        hoverAction: () => {\n          this._handleChartMouseLeave();\n          this._onLegendHover(point.legend!);\n        },\n        onMouseOutAction: (isLegendSelected?: boolean) => {\n          this._onLegendLeave(isLegendSelected);\n        },\n      };\n      actions.push(legend);\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      // For HBCWA x and y Values are swapped\n      const { yAxisDomainValues: domainValue } = yAxisData;\n      this._xMax = Math.max(domainValue[domainValue.length - 1], this.props.xMaxValue || 0);\n    }\n  };\n  private _getAriaLabel = (point: IHorizontalBarChartWithAxisDataPoint): string => {\n    const xValue = point.xAxisCalloutData || point.x;\n    const yValue = point.yAxisCalloutData || point.y;\n    return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ` + `${yValue}.`;\n  };\n\n  private _getChartTitle = (): string => {\n    const { chartTitle, data } = this.props;\n    return (chartTitle ? `${chartTitle}. ` : '') + `Horizontal bar chart with ${data?.length || 0} bars. `;\n  };\n}\n"]}

package/lib-amd/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IHorizontalBarChartWithAxisProps } from '../../index';
+/**
+ * HorizontalBarchartWithAxis component.
+ * {@docCategory HorizontalBarChartWithAxis}
+ */
+export declare const HorizontalBarChartWithAxis: React.FunctionComponent<IHorizontalBarChartWithAxisProps>;

package/lib-amd/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.js

@@ -0,0 +1,12 @@
+define(["require", "exports", "@fluentui/react/lib/Utilities", "./HorizontalBarChartWithAxis.base", "./HorizontalBarChartWithAxis.styles"], function (require, exports, Utilities_1, HorizontalBarChartWithAxis_base_1, HorizontalBarChartWithAxis_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.HorizontalBarChartWithAxis = void 0;
+    // Create a HorizontalBarChartWithAxis variant which uses these default styles and this styled subcomponent.
+    /**
+     * HorizontalBarchartWithAxis component.
+     * {@docCategory HorizontalBarChartWithAxis}
+     */
+    exports.HorizontalBarChartWithAxis = (0, Utilities_1.styled)(HorizontalBarChartWithAxis_base_1.HorizontalBarChartWithAxisBase, HorizontalBarChartWithAxis_styles_1.getStyles);
+});
+//# sourceMappingURL=HorizontalBarChartWithAxis.js.map