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

@fluentui/react-charting 5.23.14 → 5.23.15

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

Files changed (1338) hide show

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js ADDED Viewed

@@ -0,0 +1,456 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedVerticalBarChartBase = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var d3_array_1 = require("d3-array");
+var d3_selection_1 = require("d3-selection");
+var d3_scale_1 = require("d3-scale");
+var Utilities_1 = require("@fluentui/react/lib/Utilities");
+var Callout_1 = require("@fluentui/react/lib/Callout");
+var react_focus_1 = require("@fluentui/react-focus");
+var index_1 = require("../../utilities/index");
+var index_2 = require("../../index");
+var COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';
+var getClassNames = (0, Utilities_1.classNamesFunction)();
+var MIN_DOMAIN_MARGIN = 8;
+var X1_INNER_PADDING = 0.1;
+// x1_inner_padding = space_between_bars / (space_between_bars + bar_width)
+// => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width
+/** Rate at which the space between the bars in a group changes wrt the bar width */
+var BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);
+var GroupedVerticalBarChartBase = /** @class */ (function (_super) {
+    tslib_1.__extends(GroupedVerticalBarChartBase, _super);
+    function GroupedVerticalBarChartBase(props) {
+        var _this = _super.call(this, props) || this;
+        _this._isRtl = (0, Utilities_1.getRTL)();
+        _this._getMinMaxOfYAxis = function () {
+            return { startValue: 0, endValue: 0 };
+        };
+        _this._getDomainNRangeValues = function (points, margins, width, chartType, isRTL, xAxisType, barWidth, tickValues, shiftX) {
+            var domainNRangeValue;
+            if (xAxisType === index_1.XAxisTypes.NumericAxis || xAxisType === index_1.XAxisTypes.DateAxis) {
+                domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };
+            }
+            else {
+                domainNRangeValue = (0, index_1.domainRangeOfXStringAxis)(margins, width, isRTL);
+            }
+            return domainNRangeValue;
+        };
+        _this._getGraphData = function (xScale, yScale, containerHeight, containerWidth, xElement) {
+            var xScale0 = _this._createX0Scale(containerWidth);
+            // Setting the bar width here is safe because there are no dependencies earlier in the code
+            // that rely on the width of bars in vertical bar charts with string x-axis.
+            _this._barWidth = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth, xScale0.bandwidth() / (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE));
+            _this._groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * _this._barWidth;
+            var xScale1 = _this._createX1Scale();
+            var allGroupsBars = [];
+            _this._datasetForBars.forEach(function (singleSet) {
+                allGroupsBars.push(_this._buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement));
+            });
+            _this._groupedVerticalBarGraph = allGroupsBars;
+        };
+        _this._getMargins = function (margins) { return (_this.margins = margins); };
+        _this._createDataSetOfGVBC = function (points) {
+            var keys = [];
+            var xAxisLabels = points.map(function (singlePoint) { return singlePoint.name; });
+            points[0].series.forEach(function (singleKey) {
+                keys.push(singleKey.key);
+            });
+            var datasetForBars = _this._createDataset(points);
+            return {
+                keys: keys,
+                xAxisLabels: xAxisLabels,
+                datasetForBars: datasetForBars,
+            };
+        };
+        _this._getCustomizedCallout = function () {
+            return _this.props.onRenderCalloutPerDataPoint
+                ? _this.props.onRenderCalloutPerDataPoint(_this.state.dataPointCalloutProps)
+                : null;
+        };
+        _this._getOpacity = function (legendTitle) {
+            var opacity = _this._legendHighlighted(legendTitle) || _this._noLegendHighlighted() ? '' : '0.1';
+            return opacity;
+        };
+        _this._onBarHover = function (pointData,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        groupData, mouseEvent) {
+            mouseEvent.persist();
+            if (_this._calloutAnchorPoint !== pointData) {
+                _this._calloutAnchorPoint = pointData;
+                _this.setState({
+                    refSelected: mouseEvent,
+                    /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */
+                    isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === pointData.legend,
+                    calloutLegend: pointData.legend,
+                    dataForHoverCard: pointData.data,
+                    color: pointData.color,
+                    xCalloutValue: pointData.xAxisCalloutData,
+                    yCalloutValue: pointData.yAxisCalloutData,
+                    dataPointCalloutProps: pointData,
+                    callOutAccessibilityData: _this.props.isCalloutForStack
+                        ? groupData.stackCallOutAccessibilityData
+                        : pointData.callOutAccessibilityData,
+                    YValueHover: groupData.groupSeries,
+                    hoverXValue: pointData.xAxisCalloutData,
+                });
+            }
+        };
+        _this._onBarLeave = function () {
+            /**/
+        };
+        _this._handleChartMouseLeave = function () {
+            _this._calloutAnchorPoint = null;
+            _this.setState({ isCalloutVisible: false });
+        };
+        _this._onBarFocus = function (pointData,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        groupData, refArrayIndexNumber) {
+            _this._refArray.forEach(function (obj, index) {
+                if (obj.index === pointData.legend && refArrayIndexNumber === index) {
+                    _this.setState({
+                        refSelected: obj.refElement,
+                        /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */
+                        isCalloutVisible: _this.state.selectedLegend === '' || _this.state.selectedLegend === pointData.legend,
+                        calloutLegend: pointData.legend,
+                        dataForHoverCard: pointData.data,
+                        color: pointData.color,
+                        xCalloutValue: pointData.xAxisCalloutData,
+                        yCalloutValue: pointData.yAxisCalloutData,
+                        dataPointCalloutProps: pointData,
+                        callOutAccessibilityData: _this.props.isCalloutForStack
+                            ? groupData.stackCallOutAccessibilityData
+                            : pointData.callOutAccessibilityData,
+                        YValueHover: groupData.groupSeries,
+                        hoverXValue: pointData.xAxisCalloutData,
+                    });
+                }
+            });
+        };
+        _this._redirectToUrl = function (href) {
+            href ? (window.location.href = href) : '';
+        };
+        _this._buildGraph = function (
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        singleSet,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        xScale0,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        xScale1, containerHeight, xElement) {
+            var singleGroup = [];
+            var barLabelsForGroup = [];
+            var yBarScale = (0, d3_scale_1.scaleLinear)()
+                .domain([0, _this._yMax])
+                .range([0, containerHeight - _this.margins.bottom - _this.margins.top]);
+            var tempDataSet = Object.keys(_this._datasetForBars[0]).splice(0, _this._keys.length);
+            tempDataSet.forEach(function (datasetKey, index) {
+                var _a, _b, _c, _d, _e;
+                var refIndexNumber = singleSet.indexNum * tempDataSet.length + index;
+                var pointData = singleSet[datasetKey];
+                // To align the centers of the generated bandwidth and the calculated one when they differ,
+                // use the following addend.
+                var xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - _this._barWidth) / 2;
+                var yPoint = Math.max(containerHeight - _this.margins.bottom - yBarScale(pointData.data), 0);
+                var startColor = pointData.color ? pointData.color : (0, index_1.getNextColor)(index, 0, (_a = _this.props.theme) === null || _a === void 0 ? void 0 : _a.isInverted);
+                var endColor = startColor;
+                if (_this.props.enableGradient) {
+                    startColor = ((_b = pointData.gradient) === null || _b === void 0 ? void 0 : _b[0]) || (0, index_1.getNextGradient)(index, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
+                    endColor = ((_d = pointData.gradient) === null || _d === void 0 ? void 0 : _d[1]) || (0, index_1.getNextGradient)(index, 0, (_e = _this.props.theme) === null || _e === void 0 ? void 0 : _e.isInverted)[1];
+                    pointData.color = startColor;
+                }
+                var gradientId = (0, Utilities_1.getId)('GVBC_Gradient') + "_".concat(singleSet.indexNum, "_").concat(index);
+                // Not rendering data with 0.
+                pointData.data &&
+                    singleGroup.push(React.createElement(React.Fragment, { key: "".concat(singleSet.indexNum, "-").concat(index) },
+                        _this.props.enableGradient && (React.createElement("defs", null,
+                            React.createElement("linearGradient", { id: gradientId, x1: "0%", y1: "100%", x2: "0%", y2: "0%" },
+                                React.createElement("stop", { offset: "0", stopColor: startColor }),
+                                React.createElement("stop", { offset: "100%", stopColor: endColor })))),
+                        React.createElement("rect", { className: _this._classNames.opacityChangeOnHover, height: Math.max(yBarScale(pointData.data), 0), width: _this._barWidth, x: xPoint, y: yPoint, "data-is-focusable": !_this.props.hideTooltip && (_this._legendHighlighted(pointData.legend) || _this._noLegendHighlighted()), opacity: _this._getOpacity(pointData.legend), ref: function (e) {
+                                _this._refCallback(e, pointData.legend, refIndexNumber);
+                            }, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, rx: _this.props.roundCorners ? 3 : 0, onMouseOver: _this._onBarHover.bind(_this, pointData, singleSet), onMouseMove: _this._onBarHover.bind(_this, pointData, singleSet), onMouseOut: _this._onBarLeave, onFocus: _this._onBarFocus.bind(_this, pointData, singleSet, refIndexNumber), onBlur: _this._onBarLeave, onClick: _this.props.href ? _this._redirectToUrl.bind(_this, _this.props.href) : pointData.onClick, "aria-label": _this._getAriaLabel(pointData, singleSet.xAxisPoint), role: "img" })));
+                if (pointData.data &&
+                    !_this.props.hideLabels &&
+                    _this._barWidth >= 16 &&
+                    (_this._legendHighlighted(pointData.legend) || _this._noLegendHighlighted())) {
+                    barLabelsForGroup.push(React.createElement("text", { key: "".concat(singleSet.indexNum, "-").concat(index), x: xPoint + _this._barWidth / 2, y: yPoint - 6, textAnchor: "middle", className: _this._classNames.barLabel, "aria-hidden": true }, (0, index_1.formatValueWithSIPrefix)(pointData.data)));
+                }
+            });
+            // Used to display tooltip at x axis labels.
+            if (!_this.props.wrapXAxisLables && _this.props.showXAxisLablesTooltip) {
+                var xAxisElement = (0, d3_selection_1.select)(xElement).call(xScale0);
+                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 && (0, index_1.tooltipOfXAxislabels)(tooltipProps);
+            }
+            return (React.createElement("g", { key: singleSet.indexNum, transform: "translate(".concat(xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - _this._groupWidth) / 2, ", 0)") },
+                singleGroup,
+                barLabelsForGroup));
+        };
+        _this._createDataset = function (points) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var datasetForBars = [];
+            var dataset = [];
+            points.forEach(function (point, index) {
+                var singleDatasetPoint = {};
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                var singleDatasetPointForBars = {};
+                var singleDataSeries = [];
+                point.series.forEach(function (seriesPoint, seriesIndex) {
+                    var _a, _b;
+                    if (_this.props.enableGradient) {
+                        seriesPoint.color =
+                            ((_a = seriesPoint.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_1.getNextGradient)(seriesIndex, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
+                    }
+                    singleDatasetPoint[seriesPoint.key] = seriesPoint.data;
+                    singleDatasetPointForBars[seriesPoint.key] = tslib_1.__assign({}, seriesPoint);
+                    singleDataSeries.push(seriesPoint);
+                });
+                singleDatasetPointForBars.xAxisPoint = point.name;
+                singleDatasetPointForBars.indexNum = index;
+                singleDatasetPointForBars.groupSeries = singleDataSeries;
+                singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;
+                datasetForBars.push(singleDatasetPointForBars);
+                dataset.push(singleDatasetPoint);
+            });
+            _this._dataset = dataset;
+            return datasetForBars;
+        };
+        // For grouped vertical bar chart, First need to define total scale (from start to end)
+        // From that need to define scale for single group of bars - done by createX1Scale
+        _this._createX0Scale = function (containerWidth) {
+            var x0Axis = (0, d3_scale_1.scaleBand)()
+                .domain(_this._xAxisLabels)
+                .range(_this._isRtl
+                ? [containerWidth - _this.margins.right - _this._domainMargin, _this.margins.left + _this._domainMargin]
+                : [_this.margins.left + _this._domainMargin, containerWidth - _this.margins.right - _this._domainMargin])
+                .paddingInner(_this._xAxisInnerPadding)
+                .paddingOuter(_this._xAxisOuterPadding);
+            return x0Axis;
+        };
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        _this._createX1Scale = function () {
+            return ((0, d3_scale_1.scaleBand)()
+                .domain(_this._keys)
+                // When there is only one group, xScale0 adds padding around it,
+                // causing the bandwidth to become smaller than the actual group width.
+                // So to render bars in the group correctly, use groupWidth instead of the generated scale bandwidth.
+                .range(_this._isRtl ? [_this._groupWidth, 0] : [0, _this._groupWidth])
+                .paddingInner(X1_INNER_PADDING));
+        };
+        _this._closeCallout = function () {
+            _this.setState({
+                isCalloutVisible: false,
+            });
+        };
+        _this._getLegendData = function (points, palette) {
+            var data = points;
+            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
+            var actions = [];
+            data.forEach(function (singleChartData) {
+                singleChartData.series.forEach(function (point) {
+                    var _a, _b, _c;
+                    var color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
+                    if (_this.props.enableGradient) {
+                        var pointIndex = Math.max(((_a = singleChartData.series) === null || _a === void 0 ? void 0 : _a.findIndex(function (item) { return item.legend === point.legend; })) || 0, 0);
+                        color = ((_b = point.gradient) === null || _b === void 0 ? void 0 : _b[0]) || (0, index_1.getNextGradient)(pointIndex, 0, (_c = _this.props.theme) === null || _c === void 0 ? void 0 : _c.isInverted)[0];
+                    }
+                    var checkSimilarLegends = actions.filter(function (leg) { return leg.title === point.legend && leg.color === color; });
+                    if (checkSimilarLegends.length > 0) {
+                        return;
+                    }
+                    var legend = {
+                        title: point.legend,
+                        color: color,
+                        action: function () {
+                            _this._onLegendClick(point.legend);
+                        },
+                        hoverAction: function () {
+                            _this._handleChartMouseLeave();
+                            _this._onLegendHover(point.legend);
+                        },
+                        onMouseOutAction: function () {
+                            _this._onLegendLeave();
+                        },
+                    };
+                    actions.push(legend);
+                });
+            });
+            return (React.createElement(index_2.Legends, tslib_1.__assign({ legends: actions, overflowProps: _this.props.legendsOverflowProps, enabledWrapLines: _this.props.enabledLegendsWrapLines, focusZonePropsInHoverCard: _this.props.focusZonePropsForLegendsInHoverCard }, _this.props.legendProps)));
+        };
+        _this._getAxisData = function (yAxisData) {
+            if (yAxisData && yAxisData.yAxisDomainValues.length) {
+                var domainValue = yAxisData.yAxisDomainValues;
+                _this._yMax = Math.max(domainValue[domainValue.length - 1], _this.props.yMaxValue || 0);
+            }
+        };
+        /**
+         * This function checks if the given legend is highlighted or not.
+         * A legend can be highlighted in 2 ways:
+         * 1. selection: if the user clicks on it
+         * 2. hovering: if there is no selected legend and the user hovers over it
+         */
+        _this._legendHighlighted = function (legendTitle) {
+            return (_this.state.selectedLegend === legendTitle ||
+                (_this.state.selectedLegend === '' && _this.state.activeLegend === legendTitle));
+        };
+        /**
+         * This function checks if none of the legends is selected or hovered.
+         */
+        _this._noLegendHighlighted = function () {
+            return _this.state.selectedLegend === '' && _this.state.activeLegend === '';
+        };
+        _this._getAriaLabel = function (point, xAxisPoint) {
+            var _a;
+            var xValue = point.xAxisCalloutData || xAxisPoint;
+            var legend = point.legend;
+            var yValue = point.yAxisCalloutData || point.data;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
+        };
+        _this._getDomainMargins = function (containerWidth) {
+            _this._domainMargin = MIN_DOMAIN_MARGIN;
+            if (_this._xAxisType === index_1.XAxisTypes.StringAxis) {
+                if ((0, index_1.isScalePaddingDefined)(_this.props.xAxisOuterPadding)) {
+                    // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available
+                    // to adjust the space before the first group and after the last group.
+                    _this._domainMargin = 0;
+                }
+                else if (_this.props.barwidth !== 'auto') {
+                    /** Total width available to render the bars */
+                    var totalWidth = containerWidth - (_this.margins.left + MIN_DOMAIN_MARGIN) - (_this.margins.right + MIN_DOMAIN_MARGIN);
+                    // Update the bar width so that when CartesianChart rerenders,
+                    // the following calculations don't use the previous bar width.
+                    _this._barWidth = (0, index_1.getBarWidth)(_this.props.barwidth, _this.props.maxBarWidth);
+                    var groupWidth = (_this._keys.length + (_this._keys.length - 1) * BAR_GAP_RATE) * _this._barWidth;
+                    /** Rate at which the space between the groups changes wrt the group width */
+                    var groupGapRate = _this._xAxisInnerPadding / (1 - _this._xAxisInnerPadding);
+                    /** Total width required to render the groups. Directly proportional to group width */
+                    var reqWidth = (_this._xAxisLabels.length + (_this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;
+                    if (totalWidth >= reqWidth) {
+                        // Center align the chart by setting equal left and right margins for domain
+                        _this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;
+                    }
+                }
+            }
+            return tslib_1.__assign(tslib_1.__assign({}, _this.margins), { left: _this.margins.left + _this._domainMargin, right: _this.margins.right + _this._domainMargin });
+        };
+        _this._getChartTitle = function () {
+            var chartTitle = _this.props.chartTitle;
+            return ((chartTitle ? "".concat(chartTitle, ". ") : '') +
+                "Vertical bar chart with ".concat(_this._xAxisLabels.length, " groups of ").concat(_this._keys.length, " bars each. "));
+        };
+        _this._createSet = (0, Utilities_1.memoizeFunction)(function (data) { return _this._createDataSetOfGVBC(data); });
+        _this.state = {
+            color: '',
+            dataForHoverCard: 0,
+            isCalloutVisible: false,
+            refSelected: null,
+            selectedLegend: '',
+            xCalloutValue: '',
+            yCalloutValue: '',
+            YValueHover: [],
+            hoverXValue: '',
+            calloutLegend: '',
+            activeLegend: '',
+        };
+        (0, Utilities_1.warnDeprecations)(COMPONENT_NAME, props, {
+            showYAxisGridLines: 'Dont use this property. Lines are drawn by default',
+            showXAxisPath: 'Dont use this property. Axis line removed default.',
+            showYAxisPath: 'Dont use this property. No need to display Y axis path. Handling default',
+            showXAxisGridLines: 'Dont use this property. Handling with default value.',
+            legendColor: 'Dont use this property. colour will pick from given data.',
+        });
+        _this._refArray = [];
+        _this._calloutId = (0, Utilities_1.getId)('callout');
+        _this._tooltipId = (0, Utilities_1.getId)('GVBCTooltipId_');
+        _this._emptyChartId = (0, Utilities_1.getId)('_GVBC_empty');
+        _this._domainMargin = MIN_DOMAIN_MARGIN;
+        return _this;
+    }
+    GroupedVerticalBarChartBase.prototype.render = function () {
+        var _this = this;
+        var points = this.props.data;
+        var _a = this._createSet(points), keys = _a.keys, xAxisLabels = _a.xAxisLabels, datasetForBars = _a.datasetForBars;
+        this._keys = keys;
+        this._xAxisLabels = xAxisLabels;
+        this._datasetForBars = datasetForBars;
+        this._xAxisType = (0, index_1.getTypeOfAxis)(points[0].name, true);
+        var legends = this._getLegendData(points, this.props.theme.palette);
+        this._adjustProps();
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var yMax = (0, d3_array_1.max)(this._dataset, function (point) { return (0, d3_array_1.max)(_this._keys, function (key) { return point[key]; }); });
+        this._yMax = Math.max(yMax, this.props.yMaxValue || 0);
+        this._classNames = getClassNames(this.props.styles, {
+            theme: this.props.theme,
+            href: this.props.href,
+        });
+        var calloutProps = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ target: this.state.refSelected, isCalloutVisible: this.state.isCalloutVisible, directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: "toolTip".concat(this._calloutId), gapSpace: 15, isBeakVisible: false, setInitialFocus: true, color: this.state.color, Legend: this.state.calloutLegend, XValue: this.state.xCalloutValue, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard, YValueHover: this.state.YValueHover, hoverXValue: this.state.hoverXValue, onDismiss: this._closeCallout }, this.props.calloutProps), { preventDismissOnLostFocus: true }), (0, index_1.getAccessibleDataObject)(this.state.callOutAccessibilityData, 'text', false));
+        var tickParams = {
+            tickValues: this.props.tickValues,
+            tickFormat: this.props.tickFormat,
+        };
+        return !this._isChartEmpty() ? (React.createElement(index_2.CartesianChart, tslib_1.__assign({}, this.props, { chartTitle: this._getChartTitle(), points: this._datasetForBars, chartType: index_1.ChartTypes.GroupedVerticalBarChart, calloutProps: calloutProps, legendBars: legends, xAxisType: this._xAxisType, createYAxis: index_1.createNumericYAxis, datasetForXAxisDomain: this._xAxisLabels, tickParams: tickParams, getDomainNRangeValues: this._getDomainNRangeValues, getMinMaxOfYAxis: this._getMinMaxOfYAxis, createStringYAxis: index_1.createStringYAxis, tickPadding: this.props.tickPadding || 5, maxOfYVal: this._yMax, svgFocusZoneProps: {
+                direction: react_focus_1.FocusZoneDirection.horizontal,
+            }, customizedCallout: this._getCustomizedCallout(), getmargins: this._getMargins, getGraphData: this._getGraphData, getAxisData: this._getAxisData, onChartMouseLeave: this._handleChartMouseLeave, getDomainMargins: this._getDomainMargins }, (this._xAxisType === index_1.XAxisTypes.StringAxis && {
+            xAxisInnerPadding: this._xAxisInnerPadding,
+            xAxisOuterPadding: this._xAxisOuterPadding,
+        }), { barwidth: this._barWidth,
+            /* eslint-disable react/jsx-no-bind */
+            children: function () {
+                return React.createElement("g", null, _this._groupedVerticalBarGraph);
+            } }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+    };
+    GroupedVerticalBarChartBase.prototype._refCallback = function (element, legendTitle, refIndexNumber) {
+        this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };
+    };
+    GroupedVerticalBarChartBase.prototype._onLegendClick = function (legendTitle) {
+        if (this.state.selectedLegend === legendTitle) {
+            this.setState({
+                selectedLegend: '',
+            });
+        }
+        else {
+            this.setState({
+                selectedLegend: legendTitle,
+            });
+        }
+    };
+    GroupedVerticalBarChartBase.prototype._onLegendHover = function (legendTitle) {
+        this.setState({
+            activeLegend: legendTitle,
+        });
+    };
+    GroupedVerticalBarChartBase.prototype._onLegendLeave = function () {
+        this.setState({
+            activeLegend: '',
+        });
+    };
+    GroupedVerticalBarChartBase.prototype._isChartEmpty = function () {
+        return !(this.props.data &&
+            this.props.data.length > 0 &&
+            this.props.data.filter(function (item) { return item.series.length; }).length > 0);
+    };
+    GroupedVerticalBarChartBase.prototype._adjustProps = function () {
+        this._barWidth = (0, index_1.getBarWidth)(this.props.barwidth, this.props.maxBarWidth);
+        // x0_inner_padding = space_between_groups / (space_between_groups + group_width)
+        // space_between_groups = 2 * bar_width
+        // group_width = this._keys.length * bar_width + (this._keys.length - 1) * space_between_bars
+        this._xAxisInnerPadding = (0, index_1.getScalePadding)(this.props.xAxisInnerPadding, undefined, 2 / (2 + this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE));
+        this._xAxisOuterPadding = (0, index_1.getScalePadding)(this.props.xAxisOuterPadding);
+    };
+    GroupedVerticalBarChartBase.defaultProps = {
+        maxBarWidth: 24,
+    };
+    return GroupedVerticalBarChartBase;
+}(React.Component));
+exports.GroupedVerticalBarChartBase = GroupedVerticalBarChartBase;
+//# sourceMappingURL=GroupedVerticalBarChart.base.js.map

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupedVerticalBarChart.base.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.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 { Axis as D3Axis } from 'd3-axis';\nimport { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale';\nimport { classNamesFunction, getId, getRTL, memoizeFunction, warnDeprecations } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZoneDirection } from '@fluentui/react-focus';\nimport {\n ChartTypes,\n IAxisData,\n getAccessibleDataObject,\n tooltipOfXAxislabels,\n XAxisTypes,\n getTypeOfAxis,\n formatValueWithSIPrefix,\n getScalePadding,\n getBarWidth,\n isScalePaddingDefined,\n createNumericYAxis,\n IDomainNRange,\n domainRangeOfXStringAxis,\n createStringYAxis,\n getNextGradient,\n getNextColor,\n} from '../../utilities/index';\nimport {\n IAccessibilityProps,\n CartesianChart,\n ILegend,\n IGroupedVerticalBarChartData,\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartStyleProps,\n IGroupedVerticalBarChartStyles,\n IGVBarChartSeriesPoint,\n IMargins,\n IBasestate,\n IRefArrayData,\n Legends,\n} from '../../index';\n\nconst COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';\nconst getClassNames = classNamesFunction<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>();\ntype StringAxis = D3Axis<string>;\ntype NumericAxis = D3Axis<number | { valueOf(): number }>;\n\nconst MIN_DOMAIN_MARGIN = 8;\nconst X1_INNER_PADDING = 0.1;\n// x1_inner_padding = space_between_bars / (space_between_bars + bar_width)\n// => space_between_bars = (x1_inner_padding / (1 - x1_inner_padding)) * bar_width\n/** Rate at which the space between the bars in a group changes wrt the bar width */\nconst BAR_GAP_RATE = X1_INNER_PADDING / (1 - X1_INNER_PADDING);\n\n// This interface used for - While forming datapoints from given prop \"data\" in code\ninterface IGVDataPoint {\n [key: string]: number | string;\n}\n\n// While forming datapoints from given prop \"data\" in code. These datapoints are used for to draw graph easily.\ninterface IGVSingleDataPoint {\n [key: string]: IGVDataPoint;\n}\nexport interface IGroupedVerticalBarChartState extends IBasestate {\n dataPointCalloutProps?: IGVBarChartSeriesPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n calloutLegend: string;\n}\n\nexport class GroupedVerticalBarChartBase extends React.Component<\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartState\n> {\n public static defaultProps: Partial<IGroupedVerticalBarChartProps> = {\n maxBarWidth: 24,\n };\n\n private _createSet: (\n data: IGroupedVerticalBarChartData[],\n ) => // eslint-disable-next-line @typescript-eslint/no-explicit-any\n { keys: string[]; xAxisLabels: string[]; datasetForBars: any };\n private _dataset: IGVDataPoint[];\n private _keys: string[];\n private _xAxisLabels: string[];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _datasetForBars: any;\n private margins: IMargins;\n private _groupedVerticalBarGraph: JSX.Element[];\n private _classNames: IProcessedStyleSet<IGroupedVerticalBarChartStyles>;\n private _refArray: IRefArrayData[];\n private _yMax: number;\n private _calloutId: string;\n private _tooltipId: string;\n private _xAxisType: XAxisTypes;\n private _isRtl: boolean = getRTL();\n private _calloutAnchorPoint: IGVBarChartSeriesPoint | null;\n private _barWidth: number;\n private _domainMargin: number;\n private _emptyChartId: string;\n private _groupWidth: number;\n private _xAxisInnerPadding: number;\n private _xAxisOuterPadding: number;\n\n public constructor(props: IGroupedVerticalBarChartProps) {\n super(props);\n this._createSet = memoizeFunction((data: IGroupedVerticalBarChartData[]) => this._createDataSetOfGVBC(data));\n this.state = {\n color: '',\n dataForHoverCard: 0,\n isCalloutVisible: false,\n refSelected: null,\n selectedLegend: '',\n xCalloutValue: '',\n yCalloutValue: '',\n YValueHover: [],\n hoverXValue: '',\n calloutLegend: '',\n activeLegend: '',\n };\n warnDeprecations(COMPONENT_NAME, props, {\n showYAxisGridLines: 'Dont use this property. Lines are drawn by default',\n showXAxisPath: 'Dont use this property. Axis line removed default.',\n showYAxisPath: 'Dont use this property. No need to display Y axis path. Handling default',\n showXAxisGridLines: 'Dont use this property. Handling with default value.',\n legendColor: 'Dont use this property. colour will pick from given data.',\n });\n this._refArray = [];\n this._calloutId = getId('callout');\n this._tooltipId = getId('GVBCTooltipId_');\n this._emptyChartId = getId('_GVBC_empty');\n this._domainMargin = MIN_DOMAIN_MARGIN;\n }\n\n public render(): React.ReactNode {\n const points = this.props.data;\n const { keys, xAxisLabels, datasetForBars } = this._createSet(points);\n this._keys = keys;\n this._xAxisLabels = xAxisLabels;\n this._datasetForBars = datasetForBars;\n this._xAxisType = getTypeOfAxis(points[0].name, true) as XAxisTypes;\n const legends: JSX.Element = this._getLegendData(points, this.props.theme!.palette);\n this._adjustProps();\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const yMax = d3Max(this._dataset, (point: any) => d3Max(this._keys, (key: string) => point[key]));\n this._yMax = Math.max(yMax, this.props.yMaxValue || 0);\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n href: this.props.href!,\n });\n const calloutProps = {\n target: this.state.refSelected,\n isCalloutVisible: this.state.isCalloutVisible,\n directionalHint: DirectionalHint.topAutoEdge,\n id: `toolTip${this._calloutId}`,\n gapSpace: 15,\n isBeakVisible: false,\n setInitialFocus: true,\n color: this.state.color,\n Legend: this.state.calloutLegend,\n XValue: this.state.xCalloutValue,\n YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.dataForHoverCard,\n YValueHover: this.state.YValueHover,\n hoverXValue: this.state.hoverXValue,\n onDismiss: this._closeCallout,\n ...this.props.calloutProps,\n preventDismissOnLostFocus: true,\n ...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false),\n };\n const tickParams = {\n tickValues: this.props.tickValues!,\n tickFormat: this.props.tickFormat!,\n };\n\n return !this._isChartEmpty() ? (\n <CartesianChart\n {...this.props}\n chartTitle={this._getChartTitle()}\n points={this._datasetForBars}\n chartType={ChartTypes.GroupedVerticalBarChart}\n calloutProps={calloutProps}\n legendBars={legends}\n xAxisType={this._xAxisType}\n createYAxis={createNumericYAxis}\n datasetForXAxisDomain={this._xAxisLabels}\n tickParams={tickParams}\n getDomainNRangeValues={this._getDomainNRangeValues}\n getMinMaxOfYAxis={this._getMinMaxOfYAxis}\n createStringYAxis={createStringYAxis}\n tickPadding={this.props.tickPadding || 5}\n maxOfYVal={this._yMax}\n svgFocusZoneProps={{\n direction: FocusZoneDirection.horizontal,\n }}\n customizedCallout={this._getCustomizedCallout()}\n getmargins={this._getMargins}\n getGraphData={this._getGraphData}\n getAxisData={this._getAxisData}\n onChartMouseLeave={this._handleChartMouseLeave}\n getDomainMargins={this._getDomainMargins}\n {...(this._xAxisType === XAxisTypes.StringAxis && {\n xAxisInnerPadding: this._xAxisInnerPadding,\n xAxisOuterPadding: this._xAxisOuterPadding,\n })}\n barwidth={this._barWidth}\n /* eslint-disable react/jsx-no-bind */\n children={() => {\n return <g>{this._groupedVerticalBarGraph}</g>;\n }}\n />\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _getMinMaxOfYAxis = () => {\n return { startValue: 0, endValue: 0 };\n };\n\n private _getDomainNRangeValues = (\n points: IGroupedVerticalBarChartData[],\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 || xAxisType === XAxisTypes.DateAxis) {\n domainNRangeValue = { dStartValue: 0, dEndValue: 0, rStartValue: 0, rEndValue: 0 };\n } else {\n domainNRangeValue = domainRangeOfXStringAxis(margins, width, isRTL);\n }\n return domainNRangeValue;\n };\n\n private _getGraphData = (\n xScale: StringAxis | NumericAxis,\n yScale: NumericAxis,\n containerHeight: number,\n containerWidth: number,\n xElement?: SVGElement | null,\n ) => {\n const xScale0 = this._createX0Scale(containerWidth);\n\n // Setting the bar width here is safe because there are no dependencies earlier in the code\n // that rely on the width of bars in vertical bar charts with string x-axis.\n this._barWidth = getBarWidth(\n this.props.barwidth,\n this.props.maxBarWidth,\n xScale0.bandwidth() / (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE),\n );\n this._groupWidth = (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE) * this._barWidth;\n\n const xScale1 = this._createX1Scale();\n const allGroupsBars: JSX.Element[] = [];\n this._datasetForBars.forEach((singleSet: IGVSingleDataPoint) => {\n allGroupsBars.push(this._buildGraph(singleSet, xScale0, xScale1, containerHeight, xElement!));\n });\n this._groupedVerticalBarGraph = allGroupsBars;\n };\n\n private _getMargins = (margins: IMargins) => (this.margins = margins);\n\n private _createDataSetOfGVBC = (points: IGroupedVerticalBarChartData[]) => {\n const keys: string[] = [];\n const xAxisLabels: string[] = points.map(singlePoint => singlePoint.name);\n points[0].series.forEach((singleKey: IGVBarChartSeriesPoint) => {\n keys.push(singleKey.key);\n });\n const datasetForBars = this._createDataset(points);\n return {\n keys,\n xAxisLabels,\n datasetForBars,\n };\n };\n\n private _getCustomizedCallout = () => {\n return this.props.onRenderCalloutPerDataPoint\n ? this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)\n : null;\n };\n\n private _getOpacity = (legendTitle: string): string => {\n const opacity = this._legendHighlighted(legendTitle) || this._noLegendHighlighted() ? '' : '0.1';\n return opacity;\n };\n\n private _onBarHover = (\n pointData: IGVBarChartSeriesPoint,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupData: any,\n mouseEvent: React.MouseEvent<SVGElement>,\n ): void => {\n mouseEvent.persist();\n if (this._calloutAnchorPoint !== pointData) {\n this._calloutAnchorPoint = pointData;\n this.setState({\n refSelected: mouseEvent,\n /** Show the callout if highlighted bar is hovered and Hide it if unhighlighted bar is hovered */\n isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend,\n calloutLegend: pointData.legend,\n dataForHoverCard: pointData.data,\n color: pointData.color,\n xCalloutValue: pointData.xAxisCalloutData,\n yCalloutValue: pointData.yAxisCalloutData,\n dataPointCalloutProps: pointData,\n callOutAccessibilityData: this.props.isCalloutForStack\n ? groupData.stackCallOutAccessibilityData\n : pointData.callOutAccessibilityData,\n YValueHover: groupData.groupSeries,\n hoverXValue: pointData.xAxisCalloutData,\n });\n }\n };\n\n private _onBarLeave = (): void => {\n /**/\n };\n\n private _handleChartMouseLeave = (): void => {\n this._calloutAnchorPoint = null;\n this.setState({ isCalloutVisible: false });\n };\n\n private _onBarFocus = (\n pointData: IGVBarChartSeriesPoint,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n groupData: any,\n refArrayIndexNumber: number,\n ): void => {\n this._refArray.forEach((obj: IRefArrayData, index: number) => {\n if (obj.index === pointData.legend && refArrayIndexNumber === index) {\n this.setState({\n refSelected: obj.refElement,\n /** Show the callout if highlighted bar is focused and Hide it if unhighlighted bar is focused */\n isCalloutVisible: this.state.selectedLegend === '' || this.state.selectedLegend === pointData.legend,\n calloutLegend: pointData.legend,\n dataForHoverCard: pointData.data,\n color: pointData.color,\n xCalloutValue: pointData.xAxisCalloutData,\n yCalloutValue: pointData.yAxisCalloutData,\n dataPointCalloutProps: pointData,\n callOutAccessibilityData: this.props.isCalloutForStack\n ? groupData.stackCallOutAccessibilityData\n : pointData.callOutAccessibilityData,\n YValueHover: groupData.groupSeries,\n hoverXValue: pointData.xAxisCalloutData,\n });\n }\n });\n };\n\n private _redirectToUrl = (href: string | undefined): void => {\n href ? (window.location.href = href) : '';\n };\n\n private _refCallback(element: SVGRectElement, legendTitle: string, refIndexNumber: number): void {\n this._refArray[refIndexNumber] = { index: legendTitle, refElement: element };\n }\n\n private _buildGraph = (\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n singleSet: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale0: any,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n xScale1: any,\n containerHeight: number,\n xElement: SVGElement,\n ): JSX.Element => {\n const singleGroup: JSX.Element[] = [];\n const barLabelsForGroup: JSX.Element[] = [];\n\n const yBarScale = d3ScaleLinear()\n .domain([0, this._yMax])\n .range([0, containerHeight! - this.margins.bottom! - this.margins.top!]);\n\n const tempDataSet = Object.keys(this._datasetForBars[0]).splice(0, this._keys.length);\n tempDataSet.forEach((datasetKey: string, index: number) => {\n const refIndexNumber = singleSet.indexNum * tempDataSet.length + index;\n const pointData = singleSet[datasetKey];\n // To align the centers of the generated bandwidth and the calculated one when they differ,\n // use the following addend.\n const xPoint = xScale1(datasetKey) + (xScale1.bandwidth() - this._barWidth) / 2;\n const yPoint = Math.max(containerHeight! - this.margins.bottom! - yBarScale(pointData.data), 0);\n let startColor = pointData.color ? pointData.color : getNextColor(index, 0, this.props.theme?.isInverted);\n let endColor = startColor;\n\n if (this.props.enableGradient) {\n startColor = pointData.gradient?.[0] || getNextGradient(index, 0, this.props.theme?.isInverted)[0];\n endColor = pointData.gradient?.[1] || getNextGradient(index, 0, this.props.theme?.isInverted)[1];\n pointData.color = startColor;\n }\n\n const gradientId = getId('GVBC_Gradient') + `_${singleSet.indexNum}_${index}`;\n\n // Not rendering data with 0.\n pointData.data &&\n singleGroup.push(\n <React.Fragment key={`${singleSet.indexNum}-${index}`}>\n {this.props.enableGradient && (\n <defs>\n <linearGradient id={gradientId} x1=\"0%\" y1=\"100%\" x2=\"0%\" y2=\"0%\">\n <stop offset=\"0\" stopColor={startColor} />\n <stop offset=\"100%\" stopColor={endColor} />\n </linearGradient>\n </defs>\n )}\n <rect\n className={this._classNames.opacityChangeOnHover}\n height={Math.max(yBarScale(pointData.data), 0)}\n width={this._barWidth}\n x={xPoint}\n y={yPoint}\n data-is-focusable={\n !this.props.hideTooltip && (this._legendHighlighted(pointData.legend) || this._noLegendHighlighted())\n }\n opacity={this._getOpacity(pointData.legend)}\n ref={(e: SVGRectElement | null) => {\n this._refCallback(e!, pointData.legend, refIndexNumber);\n }}\n fill={this.props.enableGradient ? `url(#${gradientId})` : startColor}\n rx={this.props.roundCorners ? 3 : 0}\n onMouseOver={this._onBarHover.bind(this, pointData, singleSet)}\n onMouseMove={this._onBarHover.bind(this, pointData, singleSet)}\n onMouseOut={this._onBarLeave}\n onFocus={this._onBarFocus.bind(this, pointData, singleSet, refIndexNumber)}\n onBlur={this._onBarLeave}\n onClick={this.props.href ? this._redirectToUrl.bind(this, this.props.href!) : pointData.onClick}\n aria-label={this._getAriaLabel(pointData, singleSet.xAxisPoint)}\n role=\"img\"\n />\n </React.Fragment>,\n );\n if (\n pointData.data &&\n !this.props.hideLabels &&\n this._barWidth >= 16 &&\n (this._legendHighlighted(pointData.legend) || this._noLegendHighlighted())\n ) {\n barLabelsForGroup.push(\n <text\n key={`${singleSet.indexNum}-${index}`}\n x={xPoint + this._barWidth / 2}\n y={yPoint - 6}\n textAnchor=\"middle\"\n className={this._classNames.barLabel}\n aria-hidden={true}\n >\n {formatValueWithSIPrefix(pointData.data)}\n </text>,\n );\n }\n });\n // Used to display tooltip at x axis labels.\n if (!this.props.wrapXAxisLables && this.props.showXAxisLablesTooltip) {\n const xAxisElement = d3Select(xElement).call(xScale0);\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 (\n <g\n key={singleSet.indexNum}\n transform={`translate(${xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - this._groupWidth) / 2}, 0)`}\n >\n {singleGroup}\n {barLabelsForGroup}\n </g>\n );\n };\n\n private _createDataset = (points: IGroupedVerticalBarChartData[]) => {\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const datasetForBars: any = [];\n const dataset: IGVDataPoint[] = [];\n\n points.forEach((point: IGroupedVerticalBarChartData, index: number) => {\n const singleDatasetPoint: IGVDataPoint = {};\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const singleDatasetPointForBars: any = {};\n const singleDataSeries: IGVBarChartSeriesPoint[] = [];\n\n point.series.forEach((seriesPoint: IGVBarChartSeriesPoint, seriesIndex) => {\n if (this.props.enableGradient) {\n seriesPoint.color =\n seriesPoint.gradient?.[0] || getNextGradient(seriesIndex, 0, this.props.theme?.isInverted)[0];\n }\n singleDatasetPoint[seriesPoint.key] = seriesPoint.data;\n singleDatasetPointForBars[seriesPoint.key] = {\n ...seriesPoint,\n };\n singleDataSeries.push(seriesPoint);\n });\n\n singleDatasetPointForBars.xAxisPoint = point.name;\n singleDatasetPointForBars.indexNum = index;\n singleDatasetPointForBars.groupSeries = singleDataSeries;\n singleDatasetPointForBars.stackCallOutAccessibilityData = point.stackCallOutAccessibilityData;\n datasetForBars.push(singleDatasetPointForBars);\n dataset.push(singleDatasetPoint);\n });\n this._dataset = dataset;\n return datasetForBars;\n };\n\n // For grouped vertical bar chart, First need to define total scale (from start to end)\n // From that need to define scale for single group of bars - done by createX1Scale\n private _createX0Scale = (containerWidth: number) => {\n const x0Axis = d3ScaleBand()\n .domain(this._xAxisLabels)\n .range(\n this._isRtl\n ? [containerWidth! - this.margins.right! - this._domainMargin, this.margins.left! + this._domainMargin]\n : [this.margins.left! + this._domainMargin, containerWidth! - this.margins.right! - this._domainMargin],\n )\n .paddingInner(this._xAxisInnerPadding)\n .paddingOuter(this._xAxisOuterPadding);\n return x0Axis;\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _createX1Scale = (): any => {\n return (\n d3ScaleBand()\n .domain(this._keys)\n // When there is only one group, xScale0 adds padding around it,\n // causing the bandwidth to become smaller than the actual group width.\n // So to render bars in the group correctly, use groupWidth instead of the generated scale bandwidth.\n .range(this._isRtl ? [this._groupWidth, 0] : [0, this._groupWidth])\n .paddingInner(X1_INNER_PADDING)\n );\n };\n\n private _closeCallout = () => {\n this.setState({\n isCalloutVisible: false,\n });\n };\n\n private _onLegendClick(legendTitle: string): void {\n if (this.state.selectedLegend === legendTitle) {\n this.setState({\n selectedLegend: '',\n });\n } else {\n this.setState({\n selectedLegend: legendTitle,\n });\n }\n }\n\n private _onLegendHover(legendTitle: string): void {\n this.setState({\n activeLegend: legendTitle,\n });\n }\n\n private _onLegendLeave(): void {\n this.setState({\n activeLegend: '',\n });\n }\n\n private _getLegendData = (points: IGroupedVerticalBarChartData[], palette: IPalette): JSX.Element => {\n const data = points;\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const actions: ILegend[] = [];\n\n data.forEach((singleChartData: IGroupedVerticalBarChartData) => {\n singleChartData.series.forEach((point: IGVBarChartSeriesPoint) => {\n let color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n if (this.props.enableGradient) {\n const pointIndex = Math.max(singleChartData.series?.findIndex(item => item.legend === point.legend) || 0, 0);\n color = point.gradient?.[0] || getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n }\n const checkSimilarLegends = actions.filter((leg: ILegend) => leg.title === point.legend && leg.color === color);\n if (checkSimilarLegends!.length > 0) {\n return;\n }\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: () => {\n this._onLegendLeave();\n },\n };\n\n actions.push(legend);\n });\n });\n return (\n <Legends\n legends={actions}\n overflowProps={this.props.legendsOverflowProps}\n enabledWrapLines={this.props.enabledLegendsWrapLines}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n {...this.props.legendProps}\n />\n );\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 /**\n * This function checks if the given legend is highlighted or not.\n * A legend can be highlighted in 2 ways:\n * 1. selection: if the user clicks on it\n * 2. hovering: if there is no selected legend and the user hovers over it\n */\n private _legendHighlighted = (legendTitle: string) => {\n return (\n this.state.selectedLegend === legendTitle ||\n (this.state.selectedLegend === '' && this.state.activeLegend === legendTitle)\n );\n };\n\n /**\n * This function checks if none of the legends is selected or hovered.\n */\n private _noLegendHighlighted = () => {\n return this.state.selectedLegend === '' && this.state.activeLegend === '';\n };\n\n private _getAriaLabel = (point: IGVBarChartSeriesPoint, xAxisPoint: string): string => {\n const xValue = point.xAxisCalloutData || xAxisPoint;\n const legend = point.legend;\n const yValue = point.yAxisCalloutData || point.data;\n return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;\n };\n\n private _getDomainMargins = (containerWidth: number): IMargins => {\n this._domainMargin = MIN_DOMAIN_MARGIN;\n\n if (this._xAxisType === XAxisTypes.StringAxis) {\n if (isScalePaddingDefined(this.props.xAxisOuterPadding)) {\n // Setting the domain margin for string x-axis to 0 because the xAxisOuterPadding prop is now available\n // to adjust the space before the first group and after the last group.\n this._domainMargin = 0;\n } else if (this.props.barwidth !== 'auto') {\n /** Total width available to render the bars */\n const totalWidth =\n containerWidth - (this.margins.left! + MIN_DOMAIN_MARGIN) - (this.margins.right! + MIN_DOMAIN_MARGIN);\n // Update the bar width so that when CartesianChart rerenders,\n // the following calculations don't use the previous bar width.\n this._barWidth = getBarWidth(this.props.barwidth, this.props.maxBarWidth);\n const groupWidth = (this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE) * this._barWidth;\n /** Rate at which the space between the groups changes wrt the group width */\n const groupGapRate = this._xAxisInnerPadding / (1 - this._xAxisInnerPadding);\n /** Total width required to render the groups. Directly proportional to group width */\n const reqWidth = (this._xAxisLabels.length + (this._xAxisLabels.length - 1) * groupGapRate) * groupWidth;\n\n if (totalWidth >= reqWidth) {\n // Center align the chart by setting equal left and right margins for domain\n this._domainMargin = MIN_DOMAIN_MARGIN + (totalWidth - reqWidth) / 2;\n }\n }\n }\n\n return {\n ...this.margins,\n left: this.margins.left! + this._domainMargin,\n right: this.margins.right! + this._domainMargin,\n };\n };\n\n private _isChartEmpty(): boolean {\n return !(\n this.props.data &&\n this.props.data.length > 0 &&\n this.props.data.filter((item: IGroupedVerticalBarChartData) => item.series.length).length > 0\n );\n }\n\n private _adjustProps(): void {\n this._barWidth = getBarWidth(this.props.barwidth, this.props.maxBarWidth);\n // x0_inner_padding = space_between_groups / (space_between_groups + group_width)\n // space_between_groups = 2 * bar_width\n // group_width = this._keys.length * bar_width + (this._keys.length - 1) * space_between_bars\n this._xAxisInnerPadding = getScalePadding(\n this.props.xAxisInnerPadding,\n undefined,\n 2 / (2 + this._keys.length + (this._keys.length - 1) * BAR_GAP_RATE),\n );\n this._xAxisOuterPadding = getScalePadding(this.props.xAxisOuterPadding);\n }\n\n private _getChartTitle = (): string => {\n const { chartTitle } = this.props;\n return (\n (chartTitle ? `${chartTitle}. ` : '') +\n `Vertical bar chart with ${this._xAxisLabels.length} groups of ${this._keys.length} bars each. `\n );\n };\n}\n"]}

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.d.ts ADDED Viewed

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

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js ADDED Viewed

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupedVerticalBarChart = void 0;
+var Utilities_1 = require("../../Utilities");
+var GroupedVerticalBarChart_base_1 = require("./GroupedVerticalBarChart.base");
+var GroupedVerticalBarChart_styles_1 = require("./GroupedVerticalBarChart.styles");
+// Create a GroupedVerticalBarChart variant which uses these default styles and this styled subcomponent.
+/**
+ * GroupedVerticalBarchart component.
+ * {@docCategory GroupedVerticalBarChart}
+ */
+exports.GroupedVerticalBarChart = (0, Utilities_1.styled)(GroupedVerticalBarChart_base_1.GroupedVerticalBarChartBase, GroupedVerticalBarChart_styles_1.getStyles);
+//# sourceMappingURL=GroupedVerticalBarChart.js.map

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupedVerticalBarChart.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx"],"names":[],"mappings":";;;AACA,6CAAyC;AAMzC,+EAA6E;AAC7E,mFAA6D;AAE7D,yGAAyG;AACzG;;;GAGG;AACU,QAAA,uBAAuB,GAA2D,IAAA,kBAAM,EAInG,0DAA2B,EAAE,0CAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '../../Utilities';\nimport {\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartStyleProps,\n IGroupedVerticalBarChartStyles,\n} from '../../index';\nimport { GroupedVerticalBarChartBase } from './GroupedVerticalBarChart.base';\nimport { getStyles } from './GroupedVerticalBarChart.styles';\n\n// Create a GroupedVerticalBarChart variant which uses these default styles and this styled subcomponent.\n/**\n * GroupedVerticalBarchart component.\n * {@docCategory GroupedVerticalBarChart}\n */\nexport const GroupedVerticalBarChart: React.FunctionComponent<IGroupedVerticalBarChartProps> = styled<\n IGroupedVerticalBarChartProps,\n IGroupedVerticalBarChartStyleProps,\n IGroupedVerticalBarChartStyles\n>(GroupedVerticalBarChartBase, getStyles);\n"]}

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.d.ts ADDED Viewed

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

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js ADDED Viewed

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyles = void 0;
+var tslib_1 = require("tslib");
+var Styling_1 = require("@fluentui/react/lib/Styling");
+var getStyles = function (props) {
+    var theme = props.theme, href = props.href;
+    return {
+        opacityChangeOnHover: {
+            cursor: href ? 'pointer' : 'default',
+        },
+        tooltip: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', padding: '8px', position: 'absolute', textAlign: 'center', top: '0px', background: theme.semanticColors.bodyBackground, borderRadius: '2px', pointerEvents: 'none' }),
+        barLabel: {
+            fontSize: Styling_1.FontSizes.small,
+            fontWeight: Styling_1.FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+    };
+};
+exports.getStyles = getStyles;
+//# sourceMappingURL=GroupedVerticalBarChart.styles.js.map

package/lib-commonjs/components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GroupedVerticalBarChart.styles.js","sourceRoot":"../src/","sources":["components/GroupedVerticalBarChart/GroupedVerticalBarChart.styles.ts"],"names":[],"mappings":";;;;AAAA,uDAAqE;AAG9D,IAAM,SAAS,GAAG,UAAC,KAAyC;IACzD,IAAA,KAAK,GAAW,KAAK,MAAhB,EAAE,IAAI,GAAK,KAAK,KAAV,CAAW;IAC9B,OAAO;QACL,oBAAoB,EAAE;YACpB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;SACrC;QAED,OAAO,wCACF,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,QAAQ,EACnB,GAAG,EAAE,KAAK,EACV,UAAU,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,EAC/C,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,MAAM,GACtB;QAED,QAAQ,EAAE;YACR,QAAQ,EAAE,mBAAS,CAAC,KAAK;YACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACnC;KACF,CAAC;AACJ,CAAC,CAAC;AA1BW,QAAA,SAAS,aA0BpB","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport { IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles } from '../../index';\n\nexport const getStyles = (props: IGroupedVerticalBarChartStyleProps): IGroupedVerticalBarChartStyles => {\n const { theme, href } = props;\n return {\n opacityChangeOnHover: {\n cursor: href ? 'pointer' : 'default',\n },\n\n tooltip: {\n ...theme.fonts.medium,\n display: 'flex',\n flexDirection: 'column',\n padding: '8px',\n position: 'absolute',\n textAlign: 'center',\n top: '0px',\n background: theme.semanticColors.bodyBackground,\n borderRadius: '2px',\n pointerEvents: 'none',\n },\n\n barLabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n };\n};\n"]}