@fluentui/react-charts 1.1.0 → 9.0.0

package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    donutClassNames: function() {
+        return donutClassNames;
+    },
+    useDonutChartStyles: function() {
+        return useDonutChartStyles;
+    }
+});
+const _react = require("@griffel/react");
+const donutClassNames = {
+    root: 'fui-donut__root',
+    chart: 'fui-donut__chart',
+    legendContainer: 'fui-donut__legendContainer',
+    chartWrapper: 'fui-donut__chartWrapper'
+};
+/**
+ * Base Styles
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl"
+    },
+    chart: {
+        B7ck84d: "f1e4lqlz",
+        ek0pe7: "fzm18in",
+        mc9l5x: "ftgm304",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1gl81tg"
+    },
+    legendContainer: {
+        z8tnut: "fikn0iw"
+    }
+}, {
+    d: [
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".f22iagw{display:flex;}",
+        ".f1vx9l62{flex-direction:column;}",
+        ".fly5x3f{width:100%;}",
+        ".f1l02sjl{height:100%;}",
+        ".f1e4lqlz{box-sizing:content-box;}",
+        ".fzm18in{alignment-adjust:center;}",
+        ".ftgm304{display:block;}",
+        [
+            ".f1gl81tg{overflow:visible;}",
+            {
+                p: -1
+            }
+        ],
+        ".fikn0iw{padding-top:var(--spacingVerticalL);}"
+    ]
+});
+const useDonutChartStyles = (props)=>{
+    var _props_styles, _props_styles1, _props_styles2;
+    const { className } = props;
+    const baseStyles = useStyles();
+    return {
+        root: (0, _react.mergeClasses)(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),
+        chart: (0, _react.mergeClasses)(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),
+        legendContainer: (0, _react.mergeClasses)(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),
+        chartWrapper: donutClassNames.chartWrapper
+    };
+}; //# sourceMappingURL=useDonutChartStyles.styles.js.map

package/lib-commonjs/components/DonutChart/useDonutChartStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDonutChartStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n/**\n * @internal\n */ export const donutClassNames = {\n    root: 'fui-donut__root',\n    chart: 'fui-donut__chart',\n    legendContainer: 'fui-donut__legendContainer',\n    chartWrapper: 'fui-donut__chartWrapper'\n};\n/**\n * Base Styles\n */ const useStyles = makeStyles({\n    root: {\n        // alignItems: 'center',\n        ...typographyStyles.body1,\n        display: 'flex',\n        flexDirection: 'column',\n        width: '100%',\n        height: '100%'\n    },\n    chart: {\n        boxSizing: 'content-box',\n        alignmentAdjust: 'center',\n        display: 'block',\n        overflow: 'visible'\n    },\n    legendContainer: {\n        paddingTop: tokens.spacingVerticalL\n    }\n});\n/**\n * Apply styling to the DonutChart component\n */ export const useDonutChartStyles = (props)=>{\n    var _props_styles, _props_styles1, _props_styles2;\n    const { className } = props;\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(donutClassNames.root, baseStyles.root, className, (_props_styles = props.styles) === null || _props_styles === void 0 ? void 0 : _props_styles.root),\n        chart: mergeClasses(donutClassNames.chart, baseStyles.chart, (_props_styles1 = props.styles) === null || _props_styles1 === void 0 ? void 0 : _props_styles1.chart),\n        legendContainer: mergeClasses(donutClassNames.legendContainer, baseStyles.legendContainer, (_props_styles2 = props.styles) === null || _props_styles2 === void 0 ? void 0 : _props_styles2.legendContainer),\n        chartWrapper: donutClassNames.chartWrapper\n    };\n};\n"],"names":["donutClassNames","useDonutChartStyles","root","chart","legendContainer","chartWrapper","useStyles","__styles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","mc9l5x","Beiy3e4","a9b677","Bqenvij","B7ck84d","ek0pe7","B68tc82","Bmxbyg5","Bpg54ce","z8tnut","d","p","props","_props_styles","_props_styles1","_props_styles2","className","baseStyles","mergeClasses","styles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAIiBA,eAAe;eAAfA;;IA6BAC,mBAAmB;eAAnBA;;;uBAjCwB;AAI9B,MAAMD,kBAAkB;IAC/BE,MAAM;IACNC,OAAO;IACPC,iBAAiB;IACjBC,cAAc;AAClB;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAL,MAAA;QAAAM,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAZ,OAAA;QAAAa,SAAA;QAAAC,QAAA;QAAAL,QAAA;QAAAM,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAhB,iBAAA;QAAAiB,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA;AAqBX,MAAMtB,sBAAuBuB,CAAAA;IACpC,IAAIC,eAAeC,gBAAgBC;IACnC,MAAM,EAAEC,SAAAA,EAAW,GAAGJ;IACtB,MAAMK,aAAavB;IACnB,OAAO;QACHJ,MAAM4B,IAAAA,mBAAY,EAAC9B,gBAAgBE,IAAI,EAAE2B,WAAW3B,IAAI,EAAE0B,WAAW,AAACH,CAAAA,gBAAgBD,MAAMO,MAAM,AAANA,MAAY,QAAQN,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcvB,IAAI;QACtKC,OAAO2B,IAAAA,mBAAY,EAAC9B,gBAAgBG,KAAK,EAAE0B,WAAW1B,KAAK,EAAE,AAACuB,CAAAA,iBAAiBF,MAAMO,MAAM,AAANA,MAAY,QAAQL,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAevB,KAAK;QAClKC,iBAAiB0B,IAAAA,mBAAY,EAAC9B,gBAAgBI,eAAe,EAAEyB,WAAWzB,eAAe,EAAE,AAACuB,CAAAA,iBAAiBH,MAAMO,MAAM,AAANA,MAAY,QAAQJ,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAevB,eAAe;QAC1MC,cAAcL,gBAAgBK,YAAAA;IAClC;AACJ"}

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js

@@ -0,0 +1,408 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HorizontalBarChart", {
+    enumerable: true,
+    get: function() {
+        return HorizontalBarChart;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useHorizontalBarChartStylesstyles = require("./useHorizontalBarChartStyles.styles");
+const _index = require("./index");
+const _localeutil = require("../../utilities/locale-util");
+const _index1 = require("../../utilities/index");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const _ChartPopover = require("../CommonComponents/ChartPopover");
+const _FocusableTooltipText = require("../../utilities/FocusableTooltipText");
+const _index2 = require("../../index");
+const HorizontalBarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
+    const legendContainer = _react.useRef(null);
+    const _uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
+    const _refArray = [];
+    const _isRTL = (0, _index1.useRtl)();
+    const barChartSvgRef = /*#__PURE__*/ _react.createRef();
+    const _emptyChartId = (0, _reactutilities.useId)('_HBC_empty');
+    let _barHeight;
+    let _calloutAnchorPoint;
+    let isSingleBar = true;
+    const [hoverValue, setHoverValue] = _react.useState('');
+    const [lineColor, setLineColor] = _react.useState('');
+    const [legend, setLegend] = _react.useState('');
+    const [xCalloutValue, setXCalloutValue] = _react.useState('');
+    const [yCalloutValue, setYCalloutValue] = _react.useState('');
+    const [barCalloutProps, setBarCalloutProps] = _react.useState();
+    const [barSpacingInPercent, setBarSpacingInPercent] = _react.useState(0);
+    const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
+    const [clickPosition, setClickPosition] = _react.useState({
+        x: 0,
+        y: 0
+    });
+    const [selectedLegend, setSelectedLegend] = _react.useState('');
+    const [activeLegend, setActiveLegend] = _react.useState('');
+    function _refCallback(element, legendTitle) {
+        _refArray.push({
+            index: legendTitle,
+            refElement: element
+        });
+    }
+    function _hoverOn(event, hoverVal, point) {
+        if ((!isPopoverOpen || legend !== point.legend) && _calloutAnchorPoint !== point && (_legendHighlighted(point.legend) || _noLegendHighlighted())) {
+            _calloutAnchorPoint = point;
+            updatePosition(event.clientX, event.clientY);
+            setHoverValue(hoverVal);
+            setLineColor(point.color);
+            setLegend(point.legend);
+            setXCalloutValue(point.xAxisCalloutData);
+            setYCalloutValue(point.yAxisCalloutData);
+            setBarCalloutProps(point);
+        // ToDo - Confirm setting multiple state variables like this is performant.
+        }
+    }
+    function _hoverOff() {
+    /*ToDo. To fix*/ }
+    const _handleChartMouseLeave = ()=>{
+        _calloutAnchorPoint = null;
+        if (isPopoverOpen) {
+            setPopoverOpen(false);
+            setHoverValue('');
+            setLineColor('');
+            setLegend('');
+        }
+    };
+    const _adjustProps = ()=>{
+        _barHeight = props.barHeight || 12;
+    };
+    const _getChartDataText = (data)=>{
+        /* return props.barChartCustomData ? (
+        <div role="text">{props.barChartCustomData(data)}</div>
+      ) : ( */ return _getDefaultTextData(data);
+    //)
+    };
+    function _createLegends(chartProps) {
+        const legendItems = [];
+        chartProps.forEach((point)=>{
+            point.chartData.forEach((dataPoint)=>{
+                const color = dataPoint.color;
+                // mapping data to the format Legends component needs
+                const legendItem = {
+                    title: dataPoint.legend,
+                    color,
+                    action: ()=>{
+                        if (selectedLegend === dataPoint.legend) {
+                            setSelectedLegend('');
+                        } else {
+                            setSelectedLegend(dataPoint.legend);
+                        }
+                    },
+                    hoverAction: ()=>{
+                        _handleChartMouseLeave();
+                        setActiveLegend(dataPoint.legend);
+                    },
+                    onMouseOutAction: ()=>{
+                        setActiveLegend('');
+                    }
+                };
+                legendItems.push(legendItem);
+            });
+        });
+        const legends = /*#__PURE__*/ _react.createElement(_index2.Legends, {
+            legends: legendItems,
+            centerLegends: true,
+            overflowText: props.legendsOverflowText,
+            ...props.legendProps
+        });
+        return legends;
+    }
+    function _getDefaultTextData(data) {
+        const { culture } = props;
+        const accessibilityData = (0, _index1.getAccessibleDataObject)(data.chartDataAccessibilityData, 'text', false);
+        if (!isSingleBar) {
+            const total = data.chartData.reduce((acc, point)=>acc + (point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0), 0);
+            return /*#__PURE__*/ _react.createElement("div", {
+                className: classes.chartTitleRight,
+                ...accessibilityData
+            }, (0, _localeutil.convertToLocaleString)(total, culture));
+        }
+        const chartDataMode = props.chartDataMode || 'default';
+        const chartData = data.chartData[0];
+        const x = chartData.horizontalBarChartdata.x;
+        const y = chartData.horizontalBarChartdata.total;
+        switch(chartDataMode){
+            case 'default':
+                return /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.chartTitleRight,
+                    ...accessibilityData
+                }, (0, _localeutil.convertToLocaleString)(x, culture));
+            case 'fraction':
+                return /*#__PURE__*/ _react.createElement("div", accessibilityData, /*#__PURE__*/ _react.createElement("span", {
+                    className: classes.chartTitleRight
+                }, (0, _localeutil.convertToLocaleString)(x, culture)), /*#__PURE__*/ _react.createElement("span", {
+                    className: classes.chartDataTextDenominator
+                }, ' / ' + (0, _localeutil.convertToLocaleString)(y, culture)));
+            case 'percentage':
+                const dataRatioPercentage = `${(0, _localeutil.convertToLocaleString)(Math.round(x / y * 100), culture)}%`;
+                return /*#__PURE__*/ _react.createElement("div", {
+                    className: classes.chartTitleRight,
+                    ...accessibilityData
+                }, dataRatioPercentage);
+        }
+    }
+    function _createBenchmark(data) {
+        if (data.chartData[0].horizontalBarChartdata.total === undefined) {
+            return /*#__PURE__*/ _react.createElement(_react.Fragment, null);
+        }
+        const totalData = data.chartData[0].horizontalBarChartdata.total;
+        const benchmarkData = data.chartData[0].data;
+        const benchmarkRatio = Math.round((benchmarkData ? benchmarkData : 0) / totalData * 100);
+        const benchmarkStyles = {
+            left: 'calc(' + benchmarkRatio + '% - 4px)'
+        };
+        return /*#__PURE__*/ _react.createElement("div", {
+            className: classes.benchmarkContainer
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.triangle,
+            style: benchmarkStyles
+        }));
+    }
+    /**
+   * This functions returns an array of <rect> elements, which form the bars
+   * For each bar an x value, and a width needs to be specified
+   * The computations are done based on percentages
+   * Extra margin is also provided, in the x value to provide some spacing in between the bars
+   */ function _createBars(data) {
+        var _data_chartData;
+        const noOfBars = ((_data_chartData = data.chartData) === null || _data_chartData === void 0 ? void 0 : _data_chartData.reduce((count, point)=>count += (point.data || 0) > 0 ? 1 : 0, 0)) || 1;
+        const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);
+        const defaultColors = [
+            _reacttheme.tokens.colorPaletteBlueForeground2,
+            _reacttheme.tokens.colorPaletteCornflowerForeground2,
+            _reacttheme.tokens.colorPaletteDarkGreenForeground2,
+            _reacttheme.tokens.colorPaletteNavyForeground2,
+            _reacttheme.tokens.colorPaletteDarkOrangeForeground2
+        ];
+        // calculating starting point of each bar and it's range
+        const startingPoint = [];
+        const total = data.chartData.reduce((acc, point)=>acc + (point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0), 0);
+        let prevPosition = 0;
+        let value = 0;
+        let sumOfPercent = 0;
+        data.chartData.map((point, index)=>{
+            const pointData = point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0;
+            value = pointData / total * 100;
+            if (value < 0) {
+                value = 0;
+            } else if (value < 1 && value !== 0) {
+                value = 1;
+            }
+            sumOfPercent += value;
+            return sumOfPercent;
+        });
+        /**
+     * The %age of the space occupied by the margin needs to subtracted
+     * while computing the scaling ratio, since the margins are not being
+     * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+     * Eg: 95% of the space is taken by the bars, 5% by the margins
+     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+     * since that's only space available to the bars
+     */ const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;
+        const bars = data.chartData.map((point, index)=>{
+            const color = point.color ? point.color : defaultColors[Math.floor(Math.random() * 4 + 1)];
+            const pointData = point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0;
+            if (index > 0) {
+                prevPosition += value;
+            }
+            value = pointData / total * 100;
+            if (value < 0) {
+                value = 0;
+            } else if (value < 1 && value !== 0) {
+                value = 1 / scalingRatio;
+            } else {
+                value = value / scalingRatio;
+            }
+            startingPoint.push(prevPosition);
+            const xValue = point.horizontalBarChartdata.x;
+            const placeholderIndex = 1;
+            const isLegendSelected = _legendHighlighted(point.legend) || _noLegendHighlighted();
+            // Render bar label instead of placeholder bar for absolute-scale variant
+            if (index === placeholderIndex && props.variant === _index.HorizontalBarChartVariant.AbsoluteScale) {
+                if (props.hideLabels) {
+                    return /*#__PURE__*/ _react.createElement("text", {
+                        key: index
+                    });
+                }
+                const barValue = data.chartData[0].horizontalBarChartdata.x;
+                return /*#__PURE__*/ _react.createElement("text", {
+                    key: index,
+                    x: `${_isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`,
+                    y: _barHeight / 2,
+                    dominantBaseline: "central",
+                    transform: `translate(${_isRTL ? -4 : 4})`,
+                    className: classes.barLabel,
+                    "aria-hidden": true
+                }, (0, _index1.formatValueWithSIPrefix)(barValue));
+            }
+            return /*#__PURE__*/ _react.createElement("rect", {
+                key: index,
+                x: `${_isRTL ? 100 - startingPoint[index] - value - index * barSpacingInPercent : startingPoint[index] + index * barSpacingInPercent}%`,
+                y: 0,
+                "data-is-focusable": point.legend !== '' ? true : false,
+                width: value + '%',
+                height: _barHeight,
+                fill: color,
+                onMouseOver: point.legend !== '' ? (event)=>_hoverOn(event, xValue, point) : undefined,
+                onFocus: point.legend !== '' ? (event)=>_hoverOn.bind(event, xValue, point) : undefined,
+                role: "img",
+                "aria-label": _getAriaLabel(point),
+                onBlur: _hoverOff,
+                onMouseLeave: _hoverOff,
+                className: classes.barWrapper,
+                opacity: isLegendSelected ? 1 : 0.1,
+                tabIndex: point.legend !== '' ? 0 : undefined
+            });
+        });
+        return bars;
+    }
+    const _getAriaLabel = (point)=>{
+        var _point_callOutAccessibilityData;
+        const legend = point.xAxisCalloutData || point.legend;
+        var _point_horizontalBarChartdata_total;
+        const yValue = point.yAxisCalloutData || (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${(_point_horizontalBarChartdata_total = point.horizontalBarChartdata.total) !== null && _point_horizontalBarChartdata_total !== void 0 ? _point_horizontalBarChartdata_total : ''}` : 0);
+        return ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || (legend ? `${legend}, ` : '') + `${yValue}.`;
+    };
+    function _isChartEmpty() {
+        return !(props.data && props.data.length > 0);
+    }
+    function updatePosition(newX, newY) {
+        const threshold = 1; // Set a threshold for movement
+        const { x, y } = clickPosition;
+        // Calculate the distance moved
+        const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));
+        // Update the position only if the distance moved is greater than the threshold
+        if (distance > threshold) {
+            setClickPosition({
+                x: newX,
+                y: newY
+            });
+            setPopoverOpen(true);
+        }
+    }
+    _react.useEffect(()=>{
+        var _barChartSvgRef_current;
+        const svgWidth = (barChartSvgRef === null || barChartSvgRef === void 0 ? void 0 : (_barChartSvgRef_current = barChartSvgRef.current) === null || _barChartSvgRef_current === void 0 ? void 0 : _barChartSvgRef_current.getBoundingClientRect().width) || 0;
+        const MARGIN_WIDTH_IN_PX = 3;
+        if (svgWidth) {
+            const currentBarSpacing = MARGIN_WIDTH_IN_PX / svgWidth * 100;
+            setBarSpacingInPercent(currentBarSpacing);
+        }
+    }, [
+        barChartSvgRef
+    ]);
+    function _legendHighlighted(barLegend) {
+        if (barLegend === undefined) {
+            return false;
+        }
+        return selectedLegend === barLegend || selectedLegend === '' && activeLegend === barLegend;
+    }
+    /**
+   * This function checks if none of the legends is selected or hovered.*/ function _noLegendHighlighted() {
+        return selectedLegend === '' && activeLegend === '';
+    }
+    const { data } = props;
+    _adjustProps();
+    const classes = (0, _useHorizontalBarChartStylesstyles.useHorizontalBarChartStyles)(props);
+    const focusAttributes = (0, _reacttabster.useFocusableGroup)();
+    const legendButtons = _createLegends(data);
+    let datapoint = 0;
+    var _props_culture;
+    return !_isChartEmpty() ? /*#__PURE__*/ _react.createElement("div", {
+        className: classes.root,
+        onMouseLeave: _handleChartMouseLeave
+    }, data.map((points, index)=>{
+        if (points.chartData && points.chartData[0] && points.chartData[0].horizontalBarChartdata.x) {
+            datapoint = points.chartData[0].horizontalBarChartdata.x;
+        } else {
+            datapoint = 0;
+        }
+        isSingleBar = points.chartData.length === 1 || points.chartData.length > 1 && points.chartData[1].legend === '';
+        if (isSingleBar) {
+            points.chartData[1] = {
+                legend: '',
+                horizontalBarChartdata: {
+                    x: points.chartData[0].horizontalBarChartdata.total - datapoint,
+                    total: points.chartData[0].horizontalBarChartdata.total
+                },
+                color: _reacttheme.tokens.colorBackgroundOverlay
+            };
+        }
+        // Hide right side text of chart title for absolute-scale variant
+        const chartDataText = props.variant === _index.HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points);
+        const bars = _createBars(points);
+        const keyVal = _uniqLineText + '_' + index;
+        // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet
+        /*         const classes = useHorizontalBarChartStyles(props.styles!, {
+          width: props.width,
+          showTriangle: !!points!.chartData![0].data,
+          variant: props.variant,
+        }); */ return /*#__PURE__*/ _react.createElement("div", {
+            key: index
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.items,
+            ...focusAttributes
+        }, /*#__PURE__*/ _react.createElement("div", {
+            className: classes.chartTitle
+        }, points.chartTitle && /*#__PURE__*/ _react.createElement(_FocusableTooltipText.FocusableTooltipText, {
+            className: classes.chartTitleLeft,
+            content: points.chartTitle,
+            accessibilityData: points.chartTitleAccessibilityData
+        }), chartDataText), points.chartData[0].data && _createBenchmark(points), /*#__PURE__*/ _react.createElement("svg", {
+            ref: barChartSvgRef,
+            className: classes.chart,
+            "aria-label": points.chartTitle
+        }, /*#__PURE__*/ _react.createElement("g", {
+            id: keyVal,
+            key: keyVal,
+            ref: (e)=>{
+                _refCallback(e, points.chartData[0].legend);
+            },
+            // NOTE: points.chartData![0] contains current data value
+            onClick: ()=>{
+                const p = points.chartData[0];
+                if (p && p.onClick) {
+                    p.onClick();
+                }
+            }
+        }, bars))));
+    }), /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, {
+        xCalloutValue: xCalloutValue,
+        yCalloutValue: yCalloutValue,
+        culture: (_props_culture = props.culture) !== null && _props_culture !== void 0 ? _props_culture : 'en-us',
+        clickPosition: clickPosition,
+        isPopoverOpen: isPopoverOpen,
+        legend: legend,
+        YValue: hoverValue,
+        color: lineColor,
+        isCalloutForStack: false,
+        customCallout: {
+            customizedCallout: props.onRenderCalloutPerHorizontalBar ? props.onRenderCalloutPerHorizontalBar(barCalloutProps) : undefined,
+            customCalloutProps: props.calloutPropsPerDataPoint ? props.calloutPropsPerDataPoint(barCalloutProps) : undefined
+        },
+        isCartesian: false
+    }), !isSingleBar && /*#__PURE__*/ _react.createElement("div", {
+        ref: (e)=>legendContainer.current = e,
+        className: classes.legendContainer
+    }, legendButtons)) : /*#__PURE__*/ _react.createElement("div", {
+        id: _emptyChartId,
+        role: 'alert',
+        style: {
+            opacity: '0'
+        },
+        "aria-label": 'Graph has no data to display'
+    });
+//TODO validate and fix focus border for issue for popover
+});
+HorizontalBarChart.displayName = 'HorizontalBarChart';

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HorizontalBarChart.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useHorizontalBarChartStyles } from './useHorizontalBarChartStyles.styles';\nimport { ChartProps, HorizontalBarChartProps, ChartDataPoint, RefArrayData, HorizontalBarChartVariant } from './index';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport { formatValueWithSIPrefix, getAccessibleDataObject, useRtl } from '../../utilities/index';\nimport { useId } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFocusableGroup } from '@fluentui/react-tabster';\nimport { ChartPopover } from '../CommonComponents/ChartPopover';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\nimport { Legend, Legends } from '../../index';\n\n/**\n * HorizontalBarChart is the context wrapper and container for all HorizontalBarChart content/controls,\n * It has no direct style or slot opinions.\n *\n * HorizontalBarChart also provides API interfaces for callbacks that will occur on navigation events.\n */\nexport const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps> = React.forwardRef<\n  HTMLDivElement,\n  HorizontalBarChartProps\n>((props, forwardedRef) => {\n  const legendContainer = React.useRef<HTMLDivElement | null>(null);\n  const _uniqLineText: string = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n  const _refArray: RefArrayData[] = [];\n  const _isRTL: boolean = useRtl();\n  const barChartSvgRef: React.RefObject<SVGSVGElement> = React.createRef<SVGSVGElement>();\n  const _emptyChartId: string = useId('_HBC_empty');\n  let _barHeight: number;\n  let _calloutAnchorPoint: ChartDataPoint | null;\n  let isSingleBar: boolean = true;\n\n  const [hoverValue, setHoverValue] = React.useState<string | number | Date | null>('');\n  const [lineColor, setLineColor] = React.useState<string>('');\n  const [legend, setLegend] = React.useState<string | null>('');\n  const [xCalloutValue, setXCalloutValue] = React.useState<string | undefined>('');\n  const [yCalloutValue, setYCalloutValue] = React.useState<string | undefined>('');\n  const [barCalloutProps, setBarCalloutProps] = React.useState<ChartDataPoint>();\n  const [barSpacingInPercent, setBarSpacingInPercent] = React.useState<number>(0);\n  const [isPopoverOpen, setPopoverOpen] = React.useState<boolean>(false);\n  const [clickPosition, setClickPosition] = React.useState({ x: 0, y: 0 });\n  const [selectedLegend, setSelectedLegend] = React.useState<string>('');\n  const [activeLegend, setActiveLegend] = React.useState<string>('');\n\n  function _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n    _refArray.push({ index: legendTitle, refElement: element });\n  }\n\n  function _hoverOn(\n    event: React.MouseEvent<SVGRectElement, MouseEvent>,\n    hoverVal: string | number | Date,\n    point: ChartDataPoint,\n  ): void {\n    if (\n      (!isPopoverOpen || legend !== point.legend!) &&\n      _calloutAnchorPoint !== point &&\n      (_legendHighlighted(point.legend) || _noLegendHighlighted())\n    ) {\n      _calloutAnchorPoint = point;\n      updatePosition(event.clientX, event.clientY);\n      setHoverValue(hoverVal);\n      setLineColor(point.color!);\n      setLegend(point.legend!);\n      setXCalloutValue(point.xAxisCalloutData!);\n      setYCalloutValue(point.yAxisCalloutData!);\n      setBarCalloutProps(point);\n      // ToDo - Confirm setting multiple state variables like this is performant.\n    }\n  }\n\n  function _hoverOff(): void {\n    /*ToDo. To fix*/\n  }\n\n  const _handleChartMouseLeave = () => {\n    _calloutAnchorPoint = null;\n    if (isPopoverOpen) {\n      setPopoverOpen(false);\n      setHoverValue('');\n      setLineColor('');\n      setLegend('');\n    }\n  };\n\n  const _adjustProps = (): void => {\n    _barHeight = props.barHeight || 12;\n  };\n\n  const _getChartDataText = (data: ChartProps) => {\n    /* return props.barChartCustomData ? (\n        <div role=\"text\">{props.barChartCustomData(data)}</div>\n      ) : ( */\n    return _getDefaultTextData(data);\n    //)\n  };\n\n  function _createLegends(chartProps: ChartProps[]): JSX.Element {\n    const legendItems: Legend[] = [];\n    chartProps.forEach((point: ChartProps) => {\n      point.chartData!.forEach((dataPoint: ChartDataPoint) => {\n        const color: string = dataPoint.color!;\n        // mapping data to the format Legends component needs\n        const legendItem: Legend = {\n          title: dataPoint.legend!,\n          color,\n          action: () => {\n            if (selectedLegend === dataPoint.legend) {\n              setSelectedLegend('');\n            } else {\n              setSelectedLegend(dataPoint.legend!);\n            }\n          },\n          hoverAction: () => {\n            _handleChartMouseLeave();\n            setActiveLegend(dataPoint.legend!);\n          },\n          onMouseOutAction: () => {\n            setActiveLegend('');\n          },\n        };\n        legendItems.push(legendItem);\n      });\n    });\n    const legends = (\n      <Legends legends={legendItems} centerLegends overflowText={props.legendsOverflowText} {...props.legendProps} />\n    );\n    return legends;\n  }\n\n  function _getDefaultTextData(data: ChartProps): JSX.Element {\n    const { culture } = props;\n    const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n    if (!isSingleBar) {\n      const total = data.chartData!.reduce(\n        (acc: number, point: ChartDataPoint) =>\n          acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n        0,\n      );\n      return (\n        <div className={classes.chartTitleRight} {...accessibilityData}>\n          {convertToLocaleString(total, culture)}\n        </div>\n      );\n    }\n    const chartDataMode = props.chartDataMode || 'default';\n    const chartData: ChartDataPoint = data!.chartData![0];\n    const x = chartData.horizontalBarChartdata!.x;\n    const y = chartData.horizontalBarChartdata!.total!;\n\n    switch (chartDataMode) {\n      case 'default':\n        return (\n          <div className={classes.chartTitleRight} {...accessibilityData}>\n            {convertToLocaleString(x, culture)}\n          </div>\n        );\n      case 'fraction':\n        return (\n          <div {...accessibilityData}>\n            <span className={classes.chartTitleRight}>{convertToLocaleString(x, culture)}</span>\n            <span className={classes.chartDataTextDenominator}>{' / ' + convertToLocaleString(y, culture)}</span>\n          </div>\n        );\n      case 'percentage':\n        const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;\n        return (\n          <div className={classes.chartTitleRight} {...accessibilityData}>\n            {dataRatioPercentage}\n          </div>\n        );\n    }\n  }\n\n  function _createBenchmark(data: ChartProps): JSX.Element {\n    if (data.chartData![0].horizontalBarChartdata!.total === undefined) {\n      return <></>;\n    }\n    const totalData = data.chartData![0].horizontalBarChartdata!.total!;\n    const benchmarkData = data.chartData![0].data;\n    const benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);\n\n    const benchmarkStyles = {\n      left: 'calc(' + benchmarkRatio + '% - 4px)',\n    };\n\n    return (\n      <div className={classes.benchmarkContainer}>\n        <div className={classes.triangle} style={benchmarkStyles} />\n      </div>\n    );\n  }\n\n  /**\n   * This functions returns an array of <rect> elements, which form the bars\n   * For each bar an x value, and a width needs to be specified\n   * The computations are done based on percentages\n   * Extra margin is also provided, in the x value to provide some spacing in between the bars\n   */\n\n  function _createBars(data: ChartProps): JSX.Element[] {\n    const noOfBars =\n      data.chartData?.reduce((count: number, point: ChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||\n      1;\n    const totalMarginPercent = barSpacingInPercent * (noOfBars - 1);\n    const defaultColors: string[] = [\n      tokens.colorPaletteBlueForeground2,\n      tokens.colorPaletteCornflowerForeground2,\n      tokens.colorPaletteDarkGreenForeground2,\n      tokens.colorPaletteNavyForeground2,\n      tokens.colorPaletteDarkOrangeForeground2,\n    ];\n    // calculating starting point of each bar and it's range\n    const startingPoint: number[] = [];\n    const total = data.chartData!.reduce(\n      (acc: number, point: ChartDataPoint) =>\n        acc + (point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0),\n      0,\n    );\n    let prevPosition = 0;\n    let value = 0;\n\n    let sumOfPercent = 0;\n    data.chartData!.map((point: ChartDataPoint, index: number) => {\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1;\n      }\n      sumOfPercent += value;\n\n      return sumOfPercent;\n    });\n\n    /**\n     * The %age of the space occupied by the margin needs to subtracted\n     * while computing the scaling ratio, since the margins are not being\n     * scaled down, only the data is being scaled down from a higher percentage to lower percentage\n     * Eg: 95% of the space is taken by the bars, 5% by the margins\n     * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%\n     * since that's only space available to the bars\n     */\n    const scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;\n\n    const bars = data.chartData!.map((point: ChartDataPoint, index: number) => {\n      const color: string = point.color ? point.color : defaultColors[Math.floor(Math.random() * 4 + 1)];\n      const pointData = point.horizontalBarChartdata!.x ? point.horizontalBarChartdata!.x : 0;\n      if (index > 0) {\n        prevPosition += value;\n      }\n      value = (pointData / total) * 100;\n      if (value < 0) {\n        value = 0;\n      } else if (value < 1 && value !== 0) {\n        value = 1 / scalingRatio;\n      } else {\n        value = value / scalingRatio;\n      }\n      startingPoint.push(prevPosition);\n\n      const xValue = point.horizontalBarChartdata!.x;\n      const placeholderIndex = 1;\n      const isLegendSelected: boolean = _legendHighlighted(point.legend) || _noLegendHighlighted();\n\n      // Render bar label instead of placeholder bar for absolute-scale variant\n      if (index === placeholderIndex && props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n        if (props.hideLabels) {\n          return <text key={index} />;\n        }\n\n        const barValue = data.chartData![0].horizontalBarChartdata!.x;\n\n        return (\n          <text\n            key={index}\n            x={`${_isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n            y={_barHeight / 2}\n            dominantBaseline=\"central\"\n            transform={`translate(${_isRTL ? -4 : 4})`}\n            className={classes.barLabel}\n            aria-hidden={true}\n          >\n            {formatValueWithSIPrefix(barValue)}\n          </text>\n        );\n      }\n\n      return (\n        <rect\n          key={index}\n          x={`${\n            _isRTL\n              ? 100 - startingPoint[index] - value - index * barSpacingInPercent\n              : startingPoint[index] + index * barSpacingInPercent\n          }%`}\n          y={0}\n          data-is-focusable={point.legend !== '' ? true : false}\n          width={value + '%'}\n          height={_barHeight}\n          fill={color}\n          onMouseOver={point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}\n          onFocus={point.legend !== '' ? event => _hoverOn.bind(event, xValue, point) : undefined}\n          role=\"img\"\n          aria-label={_getAriaLabel(point)}\n          onBlur={_hoverOff}\n          onMouseLeave={_hoverOff}\n          className={classes.barWrapper}\n          opacity={isLegendSelected ? 1 : 0.1}\n          tabIndex={point.legend !== '' ? 0 : undefined}\n        />\n      );\n    });\n    return bars;\n  }\n\n  const _getAriaLabel = (point: ChartDataPoint): string => {\n    const legend = point.xAxisCalloutData || point.legend;\n    const yValue =\n      point.yAxisCalloutData ||\n      (point.horizontalBarChartdata\n        ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.total ?? ''}`\n        : 0);\n    return point.callOutAccessibilityData?.ariaLabel || (legend ? `${legend}, ` : '') + `${yValue}.`;\n  };\n\n  function _isChartEmpty(): boolean {\n    return !(props.data && props.data.length > 0);\n  }\n\n  function updatePosition(newX: number, newY: number): void {\n    const threshold = 1; // Set a threshold for movement\n    const { x, y } = clickPosition;\n\n    // Calculate the distance moved\n    const distance = Math.sqrt(Math.pow(newX - x, 2) + Math.pow(newY - y, 2));\n    // Update the position only if the distance moved is greater than the threshold\n    if (distance > threshold) {\n      setClickPosition({ x: newX, y: newY });\n      setPopoverOpen(true);\n    }\n  }\n\n  React.useEffect(() => {\n    const svgWidth = barChartSvgRef?.current?.getBoundingClientRect().width || 0;\n    const MARGIN_WIDTH_IN_PX = 3;\n    if (svgWidth) {\n      const currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;\n      setBarSpacingInPercent(currentBarSpacing);\n    }\n  }, [barChartSvgRef]);\n\n  function _legendHighlighted(barLegend?: string) {\n    if (barLegend === undefined) {\n      return false;\n    }\n    return selectedLegend === barLegend || (selectedLegend === '' && activeLegend === barLegend);\n  }\n\n  /**\n   * This function checks if none of the legends is selected or hovered.*/\n\n  function _noLegendHighlighted() {\n    return selectedLegend === '' && activeLegend === '';\n  }\n\n  const { data } = props;\n  _adjustProps();\n  const classes = useHorizontalBarChartStyles(props);\n  const focusAttributes = useFocusableGroup();\n  const legendButtons = _createLegends(data!);\n\n  let datapoint: number | undefined = 0;\n  return !_isChartEmpty() ? (\n    <div className={classes.root} onMouseLeave={_handleChartMouseLeave}>\n      {data!.map((points: ChartProps, index: number) => {\n        if (points.chartData && points.chartData![0] && points.chartData![0].horizontalBarChartdata!.x) {\n          datapoint = points.chartData![0].horizontalBarChartdata!.x;\n        } else {\n          datapoint = 0;\n        }\n        isSingleBar =\n          points.chartData!.length === 1 || (points.chartData!.length > 1 && points.chartData![1].legend === '');\n        if (isSingleBar) {\n          points.chartData![1] = {\n            legend: '',\n            horizontalBarChartdata: {\n              x: points.chartData![0].horizontalBarChartdata!.total! - datapoint!,\n              total: points.chartData![0].horizontalBarChartdata!.total!,\n            },\n            color: tokens.colorBackgroundOverlay,\n          };\n        }\n\n        // Hide right side text of chart title for absolute-scale variant\n        const chartDataText =\n          props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);\n        const bars = _createBars(points!);\n        const keyVal = _uniqLineText + '_' + index;\n        // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet\n        /*         const classes = useHorizontalBarChartStyles(props.styles!, {\n          width: props.width,\n          showTriangle: !!points!.chartData![0].data,\n          variant: props.variant,\n        }); */\n\n        return (\n          <div key={index}>\n            <div className={classes.items} {...focusAttributes}>\n              <div className={classes.chartTitle}>\n                {points!.chartTitle && (\n                  <FocusableTooltipText\n                    className={classes.chartTitleLeft}\n                    content={points!.chartTitle}\n                    accessibilityData={points!.chartTitleAccessibilityData}\n                  />\n                )}\n                {chartDataText}\n              </div>\n              {points!.chartData![0].data && _createBenchmark(points!)}\n              <svg ref={barChartSvgRef} className={classes.chart} aria-label={points!.chartTitle}>\n                <g\n                  id={keyVal}\n                  key={keyVal}\n                  ref={(e: SVGGElement) => {\n                    _refCallback(e, points!.chartData![0].legend);\n                  }}\n                  // NOTE: points.chartData![0] contains current data value\n                  onClick={() => {\n                    const p = points!.chartData![0];\n                    if (p && p.onClick) {\n                      p.onClick();\n                    }\n                  }}\n                >\n                  {bars}\n                </g>\n              </svg>\n            </div>\n          </div>\n        );\n      })}\n      <ChartPopover\n        xCalloutValue={xCalloutValue}\n        yCalloutValue={yCalloutValue}\n        culture={props.culture ?? 'en-us'}\n        clickPosition={clickPosition}\n        isPopoverOpen={isPopoverOpen}\n        legend={legend!}\n        YValue={hoverValue!}\n        color={lineColor}\n        isCalloutForStack={false}\n        customCallout={{\n          customizedCallout: props.onRenderCalloutPerHorizontalBar\n            ? props.onRenderCalloutPerHorizontalBar(barCalloutProps!)\n            : undefined,\n          customCalloutProps: props.calloutPropsPerDataPoint\n            ? props.calloutPropsPerDataPoint(barCalloutProps!)\n            : undefined,\n        }}\n        isCartesian={false}\n      />\n      {!isSingleBar && (\n        <div ref={(e: HTMLDivElement) => (legendContainer.current = e)} className={classes.legendContainer}>\n          {legendButtons}\n        </div>\n      )}\n    </div>\n  ) : (\n    <div id={_emptyChartId} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />\n  );\n  //TODO validate and fix focus border for issue for popover\n});\nHorizontalBarChart.displayName = 'HorizontalBarChart';\n"],"names":["HorizontalBarChart","React","forwardRef","props","forwardedRef","legendContainer","useRef","_uniqLineText","Math","random","toString","substring","_refArray","_isRTL","useRtl","barChartSvgRef","createRef","_emptyChartId","useId","_barHeight","_calloutAnchorPoint","isSingleBar","hoverValue","setHoverValue","useState","lineColor","setLineColor","legend","setLegend","xCalloutValue","setXCalloutValue","yCalloutValue","setYCalloutValue","barCalloutProps","setBarCalloutProps","barSpacingInPercent","setBarSpacingInPercent","isPopoverOpen","setPopoverOpen","clickPosition","setClickPosition","x","y","selectedLegend","setSelectedLegend","activeLegend","setActiveLegend","_refCallback","element","legendTitle","push","index","refElement","_hoverOn","event","hoverVal","point","_legendHighlighted","_noLegendHighlighted","updatePosition","clientX","clientY","color","xAxisCalloutData","yAxisCalloutData","_hoverOff","_handleChartMouseLeave","_adjustProps","barHeight","_getChartDataText","data","_getDefaultTextData","_createLegends","chartProps","legendItems","forEach","chartData","dataPoint","legendItem","title","action","hoverAction","onMouseOutAction","legends","createElement","Legends","centerLegends","overflowText","legendsOverflowText","legendProps","culture","accessibilityData","getAccessibleDataObject","chartDataAccessibilityData","total","reduce","acc","horizontalBarChartdata","div","className","classes","chartTitleRight","convertToLocaleString","chartDataMode","span","chartDataTextDenominator","dataRatioPercentage","round","_createBenchmark","undefined","Fragment","totalData","benchmarkData","benchmarkRatio","benchmarkStyles","left","benchmarkContainer","triangle","style","_createBars","noOfBars","count","totalMarginPercent","defaultColors","tokens","colorPaletteBlueForeground2","colorPaletteCornflowerForeground2","colorPaletteDarkGreenForeground2","colorPaletteNavyForeground2","colorPaletteDarkOrangeForeground2","startingPoint","prevPosition","value","sumOfPercent","map","pointData","scalingRatio","bars","floor","xValue","placeholderIndex","isLegendSelected","variant","HorizontalBarChartVariant","AbsoluteScale","hideLabels","text","key","barValue","dominantBaseline","transform","barLabel","aria-hidden","formatValueWithSIPrefix","rect","data-is-focusable","width","height","fill","onMouseOver","onFocus","bind","role","aria-label","_getAriaLabel","onBlur","onMouseLeave","barWrapper","opacity","tabIndex","yValue","callOutAccessibilityData","ariaLabel","_isChartEmpty","length","newX","newY","threshold","distance","sqrt","pow","useEffect","svgWidth","current","getBoundingClientRect","MARGIN_WIDTH_IN_PX","currentBarSpacing","barLegend","useHorizontalBarChartStyles","focusAttributes","useFocusableGroup","legendButtons","datapoint","root","points","colorBackgroundOverlay","chartDataText","keyVal","items","chartTitle","FocusableTooltipText","chartTitleLeft","content","chartTitleAccessibilityData","svg","ref","chart","g","id","e","onClick","p","ChartPopover","YValue","isCalloutForStack","customCallout","customizedCallout","onRenderCalloutPerHorizontalBar","customCalloutProps","calloutPropsPerDataPoint","isCartesian","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkBaA;;;eAAAA;;;;iEAlBU;mDACqB;uBACiE;4BACvE;wBACmC;gCACnD;4BACC;8BACW;8BACL;sCACQ;wBACL;AAQzB,MAAMA,qBAAAA,WAAAA,GAAuEC,OAAMC,UAAU,CAGlG,CAACC,OAAOC;IACR,MAAMC,kBAAkBJ,OAAMK,MAAM,CAAwB;IAC5D,MAAMC,gBAAwB,qBAAqBC,KAAKC,MAAM,GAAGC,QAAQ,CAAC,IAAIC,SAAS,CAAC;IACxF,MAAMC,YAA4B,EAAE;IACpC,MAAMC,SAAkBC,IAAAA,cAAAA;IACxB,MAAMC,iBAAAA,WAAAA,GAAiDd,OAAMe,SAAS;IACtE,MAAMC,gBAAwBC,IAAAA,qBAAAA,EAAM;IACpC,IAAIC;IACJ,IAAIC;IACJ,IAAIC,cAAuB;IAE3B,MAAM,CAACC,YAAYC,cAAc,GAAGtB,OAAMuB,QAAQ,CAAgC;IAClF,MAAM,CAACC,WAAWC,aAAa,GAAGzB,OAAMuB,QAAQ,CAAS;IACzD,MAAM,CAACG,QAAQC,UAAU,GAAG3B,OAAMuB,QAAQ,CAAgB;IAC1D,MAAM,CAACK,eAAeC,iBAAiB,GAAG7B,OAAMuB,QAAQ,CAAqB;IAC7E,MAAM,CAACO,eAAeC,iBAAiB,GAAG/B,OAAMuB,QAAQ,CAAqB;IAC7E,MAAM,CAACS,iBAAiBC,mBAAmB,GAAGjC,OAAMuB,QAAQ;IAC5D,MAAM,CAACW,qBAAqBC,uBAAuB,GAAGnC,OAAMuB,QAAQ,CAAS;IAC7E,MAAM,CAACa,eAAeC,eAAe,GAAGrC,OAAMuB,QAAQ,CAAU;IAChE,MAAM,CAACe,eAAeC,iBAAiB,GAAGvC,OAAMuB,QAAQ,CAAC;QAAEiB,GAAG;QAAGC,GAAG;IAAE;IACtE,MAAM,CAACC,gBAAgBC,kBAAkB,GAAG3C,OAAMuB,QAAQ,CAAS;IACnE,MAAM,CAACqB,cAAcC,gBAAgB,GAAG7C,OAAMuB,QAAQ,CAAS;IAE/D,SAASuB,aAAaC,OAAoB,EAAEC,WAA+B;QACzErC,UAAUsC,IAAI,CAAC;YAAEC,OAAOF;YAAaG,YAAYJ;QAAQ;IAC3D;IAEA,SAASK,SACPC,KAAmD,EACnDC,QAAgC,EAChCC,KAAqB;QAErB,IACE,AAAC,CAAA,CAACnB,iBAAiBV,WAAW6B,MAAM7B,MAAM,AAANA,KACpCP,wBAAwBoC,SACvBC,CAAAA,mBAAmBD,MAAM7B,MAAM,KAAK+B,sBAAAA,GACrC;YACAtC,sBAAsBoC;YACtBG,eAAeL,MAAMM,OAAO,EAAEN,MAAMO,OAAO;YAC3CtC,cAAcgC;YACd7B,aAAa8B,MAAMM,KAAK;YACxBlC,UAAU4B,MAAM7B,MAAM;YACtBG,iBAAiB0B,MAAMO,gBAAgB;YACvC/B,iBAAiBwB,MAAMQ,gBAAgB;YACvC9B,mBAAmBsB;QACnB,2EAA2E;QAC7E;IACF;IAEA,SAASS;IACP,cAAc,GAChB;IAEA,MAAMC,yBAAyB;QAC7B9C,sBAAsB;QACtB,IAAIiB,eAAe;YACjBC,eAAe;YACff,cAAc;YACdG,aAAa;YACbE,UAAU;QACZ;IACF;IAEA,MAAMuC,eAAe;QACnBhD,aAAahB,MAAMiE,SAAS,IAAI;IAClC;IAEA,MAAMC,oBAAoB,CAACC;QACzB;;YAEQ,GACR,OAAOC,oBAAoBD;IAC3B,GAAG;IACL;IAEA,SAASE,eAAeC,UAAwB;QAC9C,MAAMC,cAAwB,EAAE;QAChCD,WAAWE,OAAO,CAAC,CAACnB;YAClBA,MAAMoB,SAAS,CAAED,OAAO,CAAC,CAACE;gBACxB,MAAMf,QAAgBe,UAAUf,KAAK;gBACrC,qDAAqD;gBACrD,MAAMgB,aAAqB;oBACzBC,OAAOF,UAAUlD,MAAM;oBACvBmC;oBACAkB,QAAQ;wBACN,IAAIrC,mBAAmBkC,UAAUlD,MAAM,EAAE;4BACvCiB,kBAAkB;wBACpB,OAAO;4BACLA,kBAAkBiC,UAAUlD,MAAM;wBACpC;oBACF;oBACAsD,aAAa;wBACXf;wBACApB,gBAAgB+B,UAAUlD,MAAM;oBAClC;oBACAuD,kBAAkB;wBAChBpC,gBAAgB;oBAClB;gBACF;gBACA4B,YAAYxB,IAAI,CAAC4B;YACnB;QACF;QACA,MAAMK,UAAAA,WAAAA,GACJlF,OAAAmF,aAAA,CAACC,eAAAA,EAAAA;YAAQF,SAAST;YAAaY,eAAAA;YAAcC,cAAcpF,MAAMqF,mBAAmB;YAAG,GAAGrF,MAAMsF,WAAW;;QAE7G,OAAON;IACT;IAEA,SAASZ,oBAAoBD,IAAgB;QAC3C,MAAM,EAAEoB,OAAO,EAAE,GAAGvF;QACpB,MAAMwF,oBAAoBC,IAAAA,+BAAAA,EAAwBtB,KAAKuB,0BAA0B,EAAG,QAAQ;QAC5F,IAAI,CAACxE,aAAa;YAChB,MAAMyE,QAAQxB,KAAKM,SAAS,CAAEmB,MAAM,CAClC,CAACC,KAAaxC,QACZwC,MAAOxC,CAAAA,MAAMyC,sBAAsB,CAAExD,CAAC,GAAGe,MAAMyC,sBAAsB,CAAExD,CAAC,GAAG,CAAA,GAC7E;YAEF,OAAA,WAAA,GACExC,OAAAmF,aAAA,CAACc,OAAAA;gBAAIC,WAAWC,QAAQC,eAAe;gBAAG,GAAGV,iBAAiB;eAC3DW,IAAAA,iCAAAA,EAAsBR,OAAOJ;QAGpC;QACA,MAAMa,gBAAgBpG,MAAMoG,aAAa,IAAI;QAC7C,MAAM3B,YAA4BN,KAAMM,SAAS,CAAE,EAAE;QACrD,MAAMnC,IAAImC,UAAUqB,sBAAsB,CAAExD,CAAC;QAC7C,MAAMC,IAAIkC,UAAUqB,sBAAsB,CAAEH,KAAK;QAEjD,OAAQS;YACN,KAAK;gBACH,OAAA,WAAA,GACEtG,OAAAmF,aAAA,CAACc,OAAAA;oBAAIC,WAAWC,QAAQC,eAAe;oBAAG,GAAGV,iBAAiB;mBAC3DW,IAAAA,iCAAAA,EAAsB7D,GAAGiD;YAGhC,KAAK;gBACH,OAAA,WAAA,GACEzF,OAAAmF,aAAA,CAACc,OAAQP,mBAAAA,WAAAA,GACP1F,OAAAmF,aAAA,CAACoB,QAAAA;oBAAKL,WAAWC,QAAQC,eAAe;mBAAGC,IAAAA,iCAAAA,EAAsB7D,GAAGiD,WAAAA,WAAAA,GACpEzF,OAAAmF,aAAA,CAACoB,QAAAA;oBAAKL,WAAWC,QAAQK,wBAAwB;mBAAG,QAAQH,IAAAA,iCAAAA,EAAsB5D,GAAGgD;YAG3F,KAAK;gBACH,MAAMgB,sBAAsB,CAAC,EAAEJ,IAAAA,iCAAAA,EAAsB9F,KAAKmG,KAAK,CAAClE,IAAKC,IAAK,MAAMgD,SAAS,CAAC,CAAC;gBAC3F,OAAA,WAAA,GACEzF,OAAAmF,aAAA,CAACc,OAAAA;oBAAIC,WAAWC,QAAQC,eAAe;oBAAG,GAAGV,iBAAiB;mBAC3De;QAGT;IACF;IAEA,SAASE,iBAAiBtC,IAAgB;QACxC,IAAIA,KAAKM,SAAS,CAAE,EAAE,CAACqB,sBAAsB,CAAEH,KAAK,KAAKe,WAAW;YAClE,OAAA,WAAA,GAAO5G,OAAAmF,aAAA,CAAAnF,OAAA6G,QAAA,EAAA;QACT;QACA,MAAMC,YAAYzC,KAAKM,SAAS,CAAE,EAAE,CAACqB,sBAAsB,CAAEH,KAAK;QAClE,MAAMkB,gBAAgB1C,KAAKM,SAAS,CAAE,EAAE,CAACN,IAAI;QAC7C,MAAM2C,iBAAiBzG,KAAKmG,KAAK,CAAC,AAAEK,CAAAA,gBAAgBA,gBAAgB,CAAA,IAAKD,YAAa;QAEtF,MAAMG,kBAAkB;YACtBC,MAAM,UAAUF,iBAAiB;QACnC;QAEA,OAAA,WAAA,GACEhH,OAAAmF,aAAA,CAACc,OAAAA;YAAIC,WAAWC,QAAQgB,kBAAkB;yBACxCnH,OAAAmF,aAAA,CAACc,OAAAA;YAAIC,WAAWC,QAAQiB,QAAQ;YAAEC,OAAOJ;;IAG/C;IAEA;;;;;GAKC,GAED,SAASK,YAAYjD,IAAgB;YAEjCA;QADF,MAAMkD,WACJlD,CAAAA,CAAAA,kBAAAA,KAAKM,SAAS,AAATA,MAAS,QAAdN,oBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gBAAgByB,MAAM,CAAC,CAAC0B,OAAejE,QAA2BiE,SAAS,AAACjE,CAAAA,MAAMc,IAAI,IAAI,CAAA,IAAK,IAAI,IAAI,GAAI,EAAA,KAC3G;QACF,MAAMoD,qBAAqBvF,sBAAuBqF,CAAAA,WAAW,CAAA;QAC7D,MAAMG,gBAA0B;YAC9BC,kBAAAA,CAAOC,2BAA2B;YAClCD,kBAAAA,CAAOE,iCAAiC;YACxCF,kBAAAA,CAAOG,gCAAgC;YACvCH,kBAAAA,CAAOI,2BAA2B;YAClCJ,kBAAAA,CAAOK,iCAAiC;SACzC;QACD,wDAAwD;QACxD,MAAMC,gBAA0B,EAAE;QAClC,MAAMpC,QAAQxB,KAAKM,SAAS,CAAEmB,MAAM,CAClC,CAACC,KAAaxC,QACZwC,MAAOxC,CAAAA,MAAMyC,sBAAsB,CAAExD,CAAC,GAAGe,MAAMyC,sBAAsB,CAAExD,CAAC,GAAG,CAAA,GAC7E;QAEF,IAAI0F,eAAe;QACnB,IAAIC,QAAQ;QAEZ,IAAIC,eAAe;QACnB/D,KAAKM,SAAS,CAAE0D,GAAG,CAAC,CAAC9E,OAAuBL;YAC1C,MAAMoF,YAAY/E,MAAMyC,sBAAsB,CAAExD,CAAC,GAAGe,MAAMyC,sBAAsB,CAAExD,CAAC,GAAG;YACtF2F,QAAQG,YAAazC,QAAS;YAC9B,IAAIsC,QAAQ,GAAG;gBACbA,QAAQ;YACV,OAAO,IAAIA,QAAQ,KAAKA,UAAU,GAAG;gBACnCA,QAAQ;YACV;YACAC,gBAAgBD;YAEhB,OAAOC;QACT;QAEA;;;;;;;KAOC,GACD,MAAMG,eAAeH,iBAAiB,IAAI,AAACA,CAAAA,eAAeX,kBAAAA,IAAsB,MAAM;QAEtF,MAAMe,OAAOnE,KAAKM,SAAS,CAAE0D,GAAG,CAAC,CAAC9E,OAAuBL;YACvD,MAAMW,QAAgBN,MAAMM,KAAK,GAAGN,MAAMM,KAAK,GAAG6D,aAAa,CAACnH,KAAKkI,KAAK,CAAClI,KAAKC,MAAM,KAAK,IAAI,GAAG;YAClG,MAAM8H,YAAY/E,MAAMyC,sBAAsB,CAAExD,CAAC,GAAGe,MAAMyC,sBAAsB,CAAExD,CAAC,GAAG;YACtF,IAAIU,QAAQ,GAAG;gBACbgF,gBAAgBC;YAClB;YACAA,QAAQG,YAAazC,QAAS;YAC9B,IAAIsC,QAAQ,GAAG;gBACbA,QAAQ;YACV,OAAO,IAAIA,QAAQ,KAAKA,UAAU,GAAG;gBACnCA,QAAQ,IAAII;YACd,OAAO;gBACLJ,QAAQA,QAAQI;YAClB;YACAN,cAAchF,IAAI,CAACiF;YAEnB,MAAMQ,SAASnF,MAAMyC,sBAAsB,CAAExD,CAAC;YAC9C,MAAMmG,mBAAmB;YACzB,MAAMC,mBAA4BpF,mBAAmBD,MAAM7B,MAAM,KAAK+B;YAEtE,yEAAyE;YACzE,IAAIP,UAAUyF,oBAAoBzI,MAAM2I,OAAO,KAAKC,gCAAAA,CAA0BC,aAAa,EAAE;gBAC3F,IAAI7I,MAAM8I,UAAU,EAAE;oBACpB,OAAA,WAAA,GAAOhJ,OAAAmF,aAAA,CAAC8D,QAAAA;wBAAKC,KAAKhG;;gBACpB;gBAEA,MAAMiG,WAAW9E,KAAKM,SAAS,CAAE,EAAE,CAACqB,sBAAsB,CAAExD,CAAC;gBAE7D,OAAA,WAAA,GACExC,OAAAmF,aAAA,CAAC8D,QAAAA;oBACCC,KAAKhG;oBACLV,GAAG,CAAC,EAAE5B,SAAS,MAAMqH,aAAa,CAAC/E,MAAM,GAAG+E,aAAa,CAAC/E,MAAM,CAAC,CAAC,CAAC;oBACnET,GAAGvB,aAAa;oBAChBkI,kBAAiB;oBACjBC,WAAW,CAAC,UAAU,EAAEzI,SAAS,CAAC,IAAI,EAAE,CAAC,CAAC;oBAC1CsF,WAAWC,QAAQmD,QAAQ;oBAC3BC,eAAa;mBAEZC,IAAAA,+BAAAA,EAAwBL;YAG/B;YAEA,OAAA,WAAA,GACEnJ,OAAAmF,aAAA,CAACsE,QAAAA;gBACCP,KAAKhG;gBACLV,GAAG,CAAC,EACF5B,SACI,MAAMqH,aAAa,CAAC/E,MAAM,GAAGiF,QAAQjF,QAAQhB,sBAC7C+F,aAAa,CAAC/E,MAAM,GAAGA,QAAQhB,oBACpC,CAAC,CAAC;gBACHO,GAAG;gBACHiH,qBAAmBnG,MAAM7B,MAAM,KAAK,KAAK,OAAO;gBAChDiI,OAAOxB,QAAQ;gBACfyB,QAAQ1I;gBACR2I,MAAMhG;gBACNiG,aAAavG,MAAM7B,MAAM,KAAK,KAAK2B,CAAAA,QAASD,SAASC,OAAOqF,QAAQnF,SAASqD;gBAC7EmD,SAASxG,MAAM7B,MAAM,KAAK,KAAK2B,CAAAA,QAASD,SAAS4G,IAAI,CAAC3G,OAAOqF,QAAQnF,SAASqD;gBAC9EqD,MAAK;gBACLC,cAAYC,cAAc5G;gBAC1B6G,QAAQpG;gBACRqG,cAAcrG;gBACdkC,WAAWC,QAAQmE,UAAU;gBAC7BC,SAAS3B,mBAAmB,IAAI;gBAChC4B,UAAUjH,MAAM7B,MAAM,KAAK,KAAK,IAAIkF;;QAG1C;QACA,OAAO4B;IACT;IAEA,MAAM2B,gBAAgB,CAAC5G;YAOdA;QANP,MAAM7B,SAAS6B,MAAMO,gBAAgB,IAAIP,MAAM7B,MAAM;YAIV6B;QAH3C,MAAMkH,SACJlH,MAAMQ,gBAAgB,IACrBR,CAAAA,MAAMyC,sBAAsB,GACzB,CAAC,EAAEzC,MAAMyC,sBAAsB,CAACxD,CAAC,CAAC,CAAC,EAAEe,CAAAA,sCAAAA,MAAMyC,sBAAsB,CAACH,KAAK,AAALA,MAAK,QAAlCtC,wCAAAA,KAAAA,IAAAA,sCAAsC,GAAG,CAAC,GAC/E,CAAA;QACN,OAAOA,CAAAA,CAAAA,kCAAAA,MAAMmH,wBAAwB,AAAxBA,MAAwB,QAA9BnH,oCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,gCAAgCoH,SAAS,AAATA,KAAa,AAACjJ,CAAAA,SAAS,CAAC,EAAEA,OAAO,EAAE,CAAC,GAAG,EAAA,IAAM,CAAC,EAAE+I,OAAO,CAAC,CAAC;IAClG;IAEA,SAASG;QACP,OAAO,CAAE1K,CAAAA,MAAMmE,IAAI,IAAInE,MAAMmE,IAAI,CAACwG,MAAM,GAAG,CAAA;IAC7C;IAEA,SAASnH,eAAeoH,IAAY,EAAEC,IAAY;QAChD,MAAMC,YAAY,GAAG,+BAA+B;QACpD,MAAM,EAAExI,CAAC,EAAEC,CAAC,EAAE,GAAGH;QAEjB,+BAA+B;QAC/B,MAAM2I,WAAW1K,KAAK2K,IAAI,CAAC3K,KAAK4K,GAAG,CAACL,OAAOtI,GAAG,KAAKjC,KAAK4K,GAAG,CAACJ,OAAOtI,GAAG;QACtE,+EAA+E;QAC/E,IAAIwI,WAAWD,WAAW;YACxBzI,iBAAiB;gBAAEC,GAAGsI;gBAAMrI,GAAGsI;YAAK;YACpC1I,eAAe;QACjB;IACF;IAEArC,OAAMoL,SAAS,CAAC;YACGtK;QAAjB,MAAMuK,WAAWvK,CAAAA,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,CAAAA,0BAAAA,eAAgBwK,OAAO,AAAPA,MAAO,QAAvBxK,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAyByK,qBAAqB,GAAG5B,KAAK,AAALA,KAAS;QAC3E,MAAM6B,qBAAqB;QAC3B,IAAIH,UAAU;YACZ,MAAMI,oBAAoBD,qBAAsBH,WAAY;YAC5DlJ,uBAAuBsJ;QACzB;IACF,GAAG;QAAC3K;KAAe;IAEnB,SAAS0C,mBAAmBkI,SAAkB;QAC5C,IAAIA,cAAc9E,WAAW;YAC3B,OAAO;QACT;QACA,OAAOlE,mBAAmBgJ,aAAchJ,mBAAmB,MAAME,iBAAiB8I;IACpF;IAEA;wEACsE,GAEtE,SAASjI;QACP,OAAOf,mBAAmB,MAAME,iBAAiB;IACnD;IAEA,MAAM,EAAEyB,IAAI,EAAE,GAAGnE;IACjBgE;IACA,MAAMiC,UAAUwF,IAAAA,8DAAAA,EAA4BzL;IAC5C,MAAM0L,kBAAkBC,IAAAA,+BAAAA;IACxB,MAAMC,gBAAgBvH,eAAeF;IAErC,IAAI0H,YAAgC;QAyErB7L;IAxEf,OAAO,CAAC0K,kBAAAA,WAAAA,GACN5K,OAAAmF,aAAA,CAACc,OAAAA;QAAIC,WAAWC,QAAQ6F,IAAI;QAAE3B,cAAcpG;OACzCI,KAAMgE,GAAG,CAAC,CAAC4D,QAAoB/I;QAC9B,IAAI+I,OAAOtH,SAAS,IAAIsH,OAAOtH,SAAS,CAAE,EAAE,IAAIsH,OAAOtH,SAAS,CAAE,EAAE,CAACqB,sBAAsB,CAAExD,CAAC,EAAE;YAC9FuJ,YAAYE,OAAOtH,SAAS,CAAE,EAAE,CAACqB,sBAAsB,CAAExD,CAAC;QAC5D,OAAO;YACLuJ,YAAY;QACd;QACA3K,cACE6K,OAAOtH,SAAS,CAAEkG,MAAM,KAAK,KAAMoB,OAAOtH,SAAS,CAAEkG,MAAM,GAAG,KAAKoB,OAAOtH,SAAS,CAAE,EAAE,CAACjD,MAAM,KAAK;QACrG,IAAIN,aAAa;YACf6K,OAAOtH,SAAS,CAAE,EAAE,GAAG;gBACrBjD,QAAQ;gBACRsE,wBAAwB;oBACtBxD,GAAGyJ,OAAOtH,SAAS,CAAE,EAAE,CAACqB,sBAAsB,CAAEH,KAAK,GAAIkG;oBACzDlG,OAAOoG,OAAOtH,SAAS,CAAE,EAAE,CAACqB,sBAAsB,CAAEH,KAAK;gBAC3D;gBACAhC,OAAO8D,kBAAAA,CAAOuE,sBAAsB;YACtC;QACF;QAEA,iEAAiE;QACjE,MAAMC,gBACJjM,MAAM2I,OAAO,KAAKC,gCAAAA,CAA0BC,aAAa,GAAG,OAAO3E,kBAAkB6H;QACvF,MAAMzD,OAAOlB,YAAY2E;QACzB,MAAMG,SAAS9L,gBAAgB,MAAM4C;QACrC,+FAA+F;QAC/F;;;;YAII,GAEJ,OAAA,WAAA,GACElD,OAAAmF,aAAA,CAACc,OAAAA;YAAIiD,KAAKhG;yBACRlD,OAAAmF,aAAA,CAACc,OAAAA;YAAIC,WAAWC,QAAQkG,KAAK;YAAG,GAAGT,eAAe;yBAChD5L,OAAAmF,aAAA,CAACc,OAAAA;YAAIC,WAAWC,QAAQmG,UAAU;WAC/BL,OAAQK,UAAU,IAAA,WAAA,GACjBtM,OAAAmF,aAAA,CAACoH,0CAAAA,EAAAA;YACCrG,WAAWC,QAAQqG,cAAc;YACjCC,SAASR,OAAQK,UAAU;YAC3B5G,mBAAmBuG,OAAQS,2BAA2B;YAGzDP,gBAEFF,OAAQtH,SAAS,CAAE,EAAE,CAACN,IAAI,IAAIsC,iBAAiBsF,SAAAA,WAAAA,GAChDjM,OAAAmF,aAAA,CAACwH,OAAAA;YAAIC,KAAK9L;YAAgBoF,WAAWC,QAAQ0G,KAAK;YAAE3C,cAAY+B,OAAQK,UAAU;yBAChFtM,OAAAmF,aAAA,CAAC2H,KAAAA;YACCC,IAAIX;YACJlD,KAAKkD;YACLQ,KAAK,CAACI;gBACJlK,aAAakK,GAAGf,OAAQtH,SAAS,CAAE,EAAE,CAACjD,MAAM;YAC9C;YACA,yDAAyD;YACzDuL,SAAS;gBACP,MAAMC,IAAIjB,OAAQtH,SAAS,CAAE,EAAE;gBAC/B,IAAIuI,KAAKA,EAAED,OAAO,EAAE;oBAClBC,EAAED,OAAO;gBACX;YACF;WAECzE;IAMb,IAAA,WAAA,GACAxI,OAAAmF,aAAA,CAACgI,0BAAAA,EAAAA;QACCvL,eAAeA;QACfE,eAAeA;QACf2D,SAASvF,CAAAA,iBAAAA,MAAMuF,OAAO,AAAPA,MAAO,QAAbvF,mBAAAA,KAAAA,IAAAA,iBAAiB;QAC1BoC,eAAeA;QACfF,eAAeA;QACfV,QAAQA;QACR0L,QAAQ/L;QACRwC,OAAOrC;QACP6L,mBAAmB;QACnBC,eAAe;YACbC,mBAAmBrN,MAAMsN,+BAA+B,GACpDtN,MAAMsN,+BAA+B,CAACxL,mBACtC4E;YACJ6G,oBAAoBvN,MAAMwN,wBAAwB,GAC9CxN,MAAMwN,wBAAwB,CAAC1L,mBAC/B4E;QACN;QACA+G,aAAa;QAEd,CAACvM,eAAAA,WAAAA,GACApB,OAAAmF,aAAA,CAACc,OAAAA;QAAI2G,KAAK,CAACI,IAAuB5M,gBAAgBkL,OAAO,GAAG0B;QAAI9G,WAAWC,QAAQ/F,eAAe;OAC/F0L,kBAAAA,WAAAA,GAKP9L,OAAAmF,aAAA,CAACc,OAAAA;QAAI8G,IAAI/L;QAAeiJ,MAAM;QAAS5C,OAAO;YAAEkD,SAAS;QAAI;QAAGL,cAAY;;AAE9E,0DAA0D;AAC5D;AACAnK,mBAAmB6N,WAAW,GAAG"}

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.types.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "HorizontalBarChartVariant", {
+    enumerable: true,
+    get: function() {
+        return HorizontalBarChartVariant;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var HorizontalBarChartVariant;
+(function(HorizontalBarChartVariant) {
+    HorizontalBarChartVariant["PartToWhole"] = "part-to-whole";
+    HorizontalBarChartVariant["AbsoluteScale"] = "absolute-scale";
+})(HorizontalBarChartVariant || (HorizontalBarChartVariant = {}));

package/lib-commonjs/components/HorizontalBarChart/HorizontalBarChart.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HorizontalBarChart.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { ChartPopoverProps } from '../CommonComponents/ChartPopover.types';\nimport { ChartDataPoint, ChartProps } from './index';\nimport { LegendsProps } from '../Legends/index';\n\n/**\n * Horizontal Bar Chart properties\n * {@docCategory HorizontalBarChart}\n */\nexport interface HorizontalBarChartProps extends React.RefAttributes<HTMLDivElement> {\n  /**\n   * An array of chart data points for the Horizontal bar chart\n   */\n  data?: ChartProps[];\n\n  /**\n   * Width of bar chart\n   */\n  width?: number;\n\n  /**\n   * Height of bar chart\n   * @default 15\n   */\n  barHeight?: number;\n\n  /**\n   * Additional CSS class(es) to apply to the StackedBarChart.\n   */\n  className?: string;\n\n  /**\n   * This property tells whether to show ratio on top of stacked bar chart or not.\n   */\n  hideRatio?: boolean[];\n\n  /**\n   * Do not show tooltips in chart\n   *\n   * @default false\n   */\n  hideTooltip?: boolean;\n\n  /**\n   * This property tells how to show data text on top right of bar chart.\n   * If barChartCustomData props added, then this props will be overrided.\n   * @default 'default'\n   */\n  chartDataMode?: ChartDataMode;\n\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: HorizontalBarChartStyles;\n\n  /**\n   * Define a custom callout renderer for a horizontal bar\n   */\n  // onRenderCalloutPerHorizontalBar?: IRenderFunction<IChartDataPoint>; ToDo - Need to use slots here.\n\n  /**\n   * props for the callout in the chart\n   */\n  calloutProps?: ChartPopoverProps;\n\n  /**\n   * Custom text to the chart (right side of the chart)\n   * IChartProps will be available as props to the method prop.\n   * If this method not given, default values (IHorizontalDataPoint \\{x,y\\})\n   * will be used to display the data/text based on given chartModeData prop.\n   */\n  // barChartCustomData?: IRenderFunction<IChartProps>; ToDo - Need to use slots here.\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n\n  /**\n   * Prop to define the variant of HorizontalBarChart to render\n   * @default HorizontalBarChartVariant.PartToWhole\n   */\n  variant?: HorizontalBarChartVariant;\n\n  /**\n   * Prop to hide the bar labels\n   * @default false\n   */\n  hideLabels?: boolean;\n\n  /**\n   * line color for callout\n   */\n  color?: string;\n\n  /**\n   * prop to check if benchmark data is provided\n   */\n  showTriangle?: boolean;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  legendsOverflowText?: any;\n\n  /*\n   * props for the legends in the chart\n   */\n  legendProps?: Partial<LegendsProps>;\n\n  /**\n   * prop to render the custom callout\n   */\n  onRenderCalloutPerHorizontalBar?: (props: ChartDataPoint) => JSX.Element | undefined;\n\n  /**\n   * Define a custom callout props override\n   */\n  calloutPropsPerDataPoint?: (dataPointCalloutProps: ChartDataPoint) => ChartPopoverProps;\n}\n\n/**\n * Horizontal Bar Chart styles\n * {@docCategory HorizontalBarChart}\n */\nexport interface HorizontalBarChartStyles {\n  /**\n   * Styling for the root container\n   */\n  root: string;\n\n  /**\n   * Styling for each item in the container\n   */\n  items: string;\n\n  /**\n   * Style for the chart.\n   */\n  chart: string;\n\n  /**\n   * Style for the chart Title.\n   */\n  chartTitle: string;\n\n  /**\n   * Style for the bars.\n   */\n  barWrapper: string;\n\n  /**\n   * Style for left side text of the chart title\n   */\n  chartTitleLeft: string;\n\n  /**\n   * Style for right side text of the chart title\n   */\n  chartTitleRight: string;\n\n  /**\n   * Style for the chart data text denominator.\n   */\n  chartDataTextDenominator: string;\n\n  /**\n   * Style for the benchmark container\n   */\n  benchmarkContainer: string;\n\n  /**\n   * Style for the benchmark triangle\n   */\n  triangle: string;\n\n  /**\n   * Style for the bar labels\n   */\n  barLabel: string;\n\n  /**\n   * Style for the div containing the chart\n   */\n  chartWrapper: string;\n\n  /**\n   * Style for the legend container.\n   */\n  legendContainer: string;\n}\n\n/**\n * Chart data mode for chart data text\n * default: show the datapoint.x value\n * fraction: show the fraction of datapoint.x/datapoint.y\n * percentage: show the percentage of (datapoint.x/datapoint.y)%\n * {@docCategory HorizontalBarChart}\n */\nexport type ChartDataMode = 'default' | 'fraction' | 'percentage';\n\n/**\n * {@docCategory HorizontalBarChart}\n */\nexport enum HorizontalBarChartVariant {\n  PartToWhole = 'part-to-whole',\n  AbsoluteScale = 'absolute-scale',\n}\n"],"names":["HorizontalBarChartVariant"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;iEAAuB;;UA0MXA,yBAAAA;;;GAAAA,6BAAAA,CAAAA,4BAAAA,CAAAA,CAAAA"}

package/lib-commonjs/components/HorizontalBarChart/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./HorizontalBarChart"), exports);
+_export_star._(require("./HorizontalBarChart.types"), exports);
+_export_star._(require("../../types/index"), exports);

package/lib-commonjs/components/HorizontalBarChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './HorizontalBarChart';\nexport * from './HorizontalBarChart.types';\nexport * from '../../types/index';\n"],"names":[],"rangeMappings":";;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA"}