@fluentui/react-charting 5.23.12 → 5.23.14

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { IHeatMapChartProps } from './HeatMapChart.types';
-/**
- * HeatMapchart component.
- * {@docCategory HeatMapChart}
- */
-export declare const HeatMapChart: React.FunctionComponent<IHeatMapChartProps>;

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

@@ -1,11 +0,0 @@
-define(["require", "exports", "@fluentui/react/lib/Utilities", "./HeatMapChart.styles", "./HeatMapChart.base"], function (require, exports, Utilities_1, HeatMapChart_styles_1, HeatMapChart_base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.HeatMapChart = void 0;
-    /**
-     * HeatMapchart component.
-     * {@docCategory HeatMapChart}
-     */
-    exports.HeatMapChart = (0, Utilities_1.styled)(HeatMapChart_base_1.HeatMapChartBase, HeatMapChart_styles_1.getHeatMapChartStyles);
-});
-//# sourceMappingURL=HeatMapChart.js.map

package/lib-amd/components/HeatMapChart/HeatMapChart.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeatMapChart.js","sourceRoot":"../src/","sources":["components/HeatMapChart/HeatMapChart.ts"],"names":[],"mappings":";;;;IAMA;;;OAGG;IACU,QAAA,YAAY,GAAgD,IAAA,kBAAM,EAI7E,oCAAgB,EAAE,2CAAqB,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IHeatMapChartProps, IHeatMapChartStyleProps, IHeatMapChartStyles } from './HeatMapChart.types';\nimport { getHeatMapChartStyles } from './HeatMapChart.styles';\nimport { HeatMapChartBase } from './HeatMapChart.base';\n\n/**\n * HeatMapchart component.\n * {@docCategory HeatMapChart}\n */\nexport const HeatMapChart: React.FunctionComponent<IHeatMapChartProps> = styled<\n  IHeatMapChartProps,\n  IHeatMapChartStyleProps,\n  IHeatMapChartStyles\n>(HeatMapChartBase, getHeatMapChartStyles);\n"]}

package/lib-amd/components/HeatMapChart/HeatMapChart.styles.d.ts

@@ -1,2 +0,0 @@
-import { IHeatMapChartStyleProps, IHeatMapChartStyles } from './HeatMapChart.types';
-export declare const getHeatMapChartStyles: (props: IHeatMapChartStyleProps) => IHeatMapChartStyles;

package/lib-amd/components/HeatMapChart/HeatMapChart.styles.js

@@ -1,29 +0,0 @@
-define(["require", "exports", "@fluentui/react/lib/Styling"], function (require, exports, Styling_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.getHeatMapChartStyles = void 0;
-    var getHeatMapChartStyles = function (props) {
-        var theme = props.theme;
-        return {
-            root: {},
-            text: [
-                theme.fonts.medium,
-                {
-                    pointerEvents: 'none',
-                    fill: theme.palette.white,
-                    fontWeight: Styling_1.FontWeights.semibold,
-                },
-            ],
-            subComponentStyles: {
-                cartesianStyles: {},
-                calloutStyles: {
-                    root: {
-                        maxWidth: '238px',
-                    },
-                },
-            },
-        };
-    };
-    exports.getHeatMapChartStyles = getHeatMapChartStyles;
-});
-//# sourceMappingURL=HeatMapChart.styles.js.map

package/lib-amd/components/HeatMapChart/HeatMapChart.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeatMapChart.styles.js","sourceRoot":"../src/","sources":["components/HeatMapChart/HeatMapChart.styles.ts"],"names":[],"mappings":";;;;IAGO,IAAM,qBAAqB,GAAG,UAAC,KAA8B;QAC1D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QACxB,OAAO;YACL,IAAI,EAAE,EAAE;YACR,IAAI,EAAE;gBACJ,KAAK,CAAC,KAAK,CAAC,MAAM;gBAClB;oBACE,aAAa,EAAE,MAAM;oBACrB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;oBACzB,UAAU,EAAE,qBAAW,CAAC,QAAQ;iBACjC;aACF;YACD,kBAAkB,EAAE;gBAClB,eAAe,EAAE,EAAE;gBACnB,aAAa,EAAE;oBACb,IAAI,EAAE;wBACJ,QAAQ,EAAE,OAAO;qBAClB;iBACF;aACF;SACF,CAAC;IACJ,CAAC,CAAC;IArBW,QAAA,qBAAqB,yBAqBhC","sourcesContent":["import { FontWeights } from '@fluentui/react/lib/Styling';\nimport { IHeatMapChartStyleProps, IHeatMapChartStyles } from './HeatMapChart.types';\n\nexport const getHeatMapChartStyles = (props: IHeatMapChartStyleProps): IHeatMapChartStyles => {\n  const { theme } = props;\n  return {\n    root: {},\n    text: [\n      theme.fonts.medium,\n      {\n        pointerEvents: 'none',\n        fill: theme.palette.white,\n        fontWeight: FontWeights.semibold,\n      },\n    ],\n    subComponentStyles: {\n      cartesianStyles: {},\n      calloutStyles: {\n        root: {\n          maxWidth: '238px',\n        },\n      },\n    },\n  };\n};\n"]}

package/lib-amd/components/HeatMapChart/HeatMapChart.types.d.ts

@@ -1,122 +0,0 @@
-import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';
-import { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';
-import { IStyle } from '@fluentui/react/lib/Styling';
-import { ICartesianChartStyleProps, ICartesianChartProps, ICartesianChartStyles } from '../CommonComponents/CartesianChart.types';
-import { ILegendsProps } from '../Legends/Legends.types';
-import { IHeatMapChartData } from '../../types/IDataPoint';
-/**
- * Heat Map Chart properties
- * {@docCategory HeatMapChart}
- */
-export interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<keyof ICartesianChartProps, 'styles'>> {
-    /**
-     * chart title for the chart
-     */
-    chartTitle?: string;
-    /**
-     * data to provide for Heat Map
-     */
-    data: IHeatMapChartData[];
-    /**
-     * The domain value for the color scale,
-     *
-     */
-    domainValuesForColorScale: number[];
-    /**
-     * The range values for the color scale,
-     * fill the array with colors in hex format
-     * note:- it should contain values exactly as many as values in the array
-     * `domainValuesForColorScale`
-     */
-    rangeValuesForColorScale: string[];
-    /**
-     * date formatter of x axis,
-     * if the x-axis data point are of date type then user can use this
-     * prop to format the date
-     * refer to https://github.com/d3/d3-time-format for string values
-     * @default '%b/%d'
-     */
-    xAxisDateFormatString?: string;
-    /**
-     * date formatter of y axis,
-     * if the y-axis data point are or date type then user can use this
-     * prop to format the date
-     * refer to https://github.com/d3/d3-time-format for string values
-     * @default '%b/%d'
-     */
-    yAxisDateFormatString?: string;
-    /**
-     * number formatter of x axis
-     * if the x-axis data pints are of number type then user can
-     * use this prop to format the number
-     * refer to https://github.com/d3/d3-format for string values
-     * @default '.2~s'
-     */
-    xAxisNumberFormatString?: string;
-    /**
-     * number formatter of y axis
-     * if the y-axis data pints are of number type then user can
-     * use this prop to format the number
-     * refer to https://github.com/d3/d3-format for string values
-     * @default '.2~s'
-     */
-    yAxisNumberFormatString?: string;
-    /**
-     * string formatter for x-axis.
-     * This prop only applies if the x-axis is of string type
-     *
-     * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending
-     * order and then render in the x-axis. this behaviour would force the order of the data points.
-     * to overcome , user can give x-axis point names as p1 p2...etc and map those p1 and p2 to custom name.
-     * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom
-     * name to that point by using this prop, hence giving the us the flexiblity of the order in which
-     * label should render
-     *
-     * see the example file for the usage of the prop
-     */
-    xAxisStringFormatter?: (point: string) => string;
-    /**
-     * string formatter for y-axis.
-     * This prop only applies if the y-axis is of string type
-     *
-     * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending
-     * order and then render in the y-axis. this behaviour would force the order of the data points.
-     * to overcome , user can give y-axis point names as p1 p2...etc and map those p1 and p2 to custom name.
-     * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom
-     * name to that point by using this prop, hence giving the us the flexiblity of the order in which
-     * label should render
-     *
-     * see the exaple file for the usage of the prop
-     */
-    yAxisStringFormatter?: (point: string) => string;
-    /**
-     * custom legend properties
-     */
-    legendProps?: Partial<ILegendsProps>;
-    /**
-     * Call to provide customized styling that will layer on top of the variant rules.
-     */
-    styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;
-    /**
-     * The prop used to define the culture to localized the numbers
-     */
-    culture?: string;
-}
-/**
- * Heat Map Chart style properties
- * {@docCategory HeatMapChart}
- */
-export interface IHeatMapChartStyleProps extends ICartesianChartStyleProps {
-}
-/**
- * Heat Map Chart styles
- * {@docCategory HeatMapChart}
- */
-export interface IHeatMapChartStyles {
-    root?: IStyle;
-    text?: IStyle;
-    subComponentStyles: {
-        cartesianStyles: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;
-        calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;
-    };
-}

package/lib-amd/components/HeatMapChart/HeatMapChart.types.js

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=HeatMapChart.types.js.map

package/lib-amd/components/HeatMapChart/HeatMapChart.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeatMapChart.types.js","sourceRoot":"../src/","sources":["components/HeatMapChart/HeatMapChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react/lib/Callout';\nimport { IStyle } from '@fluentui/react/lib/Styling';\nimport {\n  ICartesianChartStyleProps,\n  ICartesianChartProps,\n  ICartesianChartStyles,\n} from '../CommonComponents/CartesianChart.types';\nimport { ILegendsProps } from '../Legends/Legends.types';\nimport { IHeatMapChartData } from '../../types/IDataPoint';\n\n/**\n * Heat Map Chart properties\n * {@docCategory HeatMapChart}\n */\nexport interface IHeatMapChartProps extends Pick<ICartesianChartProps, Exclude<keyof ICartesianChartProps, 'styles'>> {\n  /**\n   * chart title for the chart\n   */\n  chartTitle?: string;\n  /**\n   * data to provide for Heat Map\n   */\n  data: IHeatMapChartData[];\n  /**\n   * The domain value for the color scale,\n   *\n   */\n  domainValuesForColorScale: number[];\n  /**\n   * The range values for the color scale,\n   * fill the array with colors in hex format\n   * note:- it should contain values exactly as many as values in the array\n   * `domainValuesForColorScale`\n   */\n  rangeValuesForColorScale: string[];\n  /**\n   * date formatter of x axis,\n   * if the x-axis data point are of date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  xAxisDateFormatString?: string;\n  /**\n   * date formatter of y axis,\n   * if the y-axis data point are or date type then user can use this\n   * prop to format the date\n   * refer to https://github.com/d3/d3-time-format for string values\n   * @default '%b/%d'\n   */\n  yAxisDateFormatString?: string;\n  /**\n   * number formatter of x axis\n   * if the x-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  xAxisNumberFormatString?: string;\n  /**\n   * number formatter of y axis\n   * if the y-axis data pints are of number type then user can\n   * use this prop to format the number\n   * refer to https://github.com/d3/d3-format for string values\n   * @default '.2~s'\n   */\n  yAxisNumberFormatString?: string;\n  /**\n   * string formatter for x-axis.\n   * This prop only applies if the x-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the x-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give x-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the example file for the usage of the prop\n   */\n  xAxisStringFormatter?: (point: string) => string;\n\n  /**\n   * string formatter for y-axis.\n   * This prop only applies if the y-axis is of string type\n   *\n   * For the accessiblity reason we sort the x-axis data point given by the consumer in ascending\n   * order and then render in the y-axis. this behaviour would force the order of the data points.\n   * to overcome , user can give y-axis point names as p1 p2...etc and map those p1 and p2 to custom name.\n   * behind the scene the charting will actually sort the p1 and p2 and then we can attach the custom\n   * name to that point by using this prop, hence giving the us the flexiblity of the order in which\n   * label should render\n   *\n   * see the exaple file for the usage of the prop\n   */\n  yAxisStringFormatter?: (point: string) => string;\n  /**\n   * custom legend properties\n   */\n  legendProps?: Partial<ILegendsProps>;\n  /**\n   * Call to provide customized styling that will layer on top of the variant rules.\n   */\n  styles?: IStyleFunctionOrObject<IHeatMapChartStyleProps, IHeatMapChartStyles>;\n\n  /**\n   * The prop used to define the culture to localized the numbers\n   */\n  culture?: string;\n}\n\n/**\n * Heat Map Chart style properties\n * {@docCategory HeatMapChart}\n */\nexport interface IHeatMapChartStyleProps extends ICartesianChartStyleProps {}\n\n/**\n * Heat Map Chart styles\n * {@docCategory HeatMapChart}\n */\nexport interface IHeatMapChartStyles {\n  root?: IStyle;\n  text?: IStyle;\n  subComponentStyles: {\n    cartesianStyles: IStyleFunctionOrObject<ICartesianChartStyleProps, ICartesianChartStyles>;\n    calloutStyles: IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles>;\n  };\n}\n"]}

package/lib-amd/components/HeatMapChart/index.d.ts

@@ -1,2 +0,0 @@
-export * from './HeatMapChart';
-export * from './HeatMapChart.types';

package/lib-amd/components/HeatMapChart/index.js

@@ -1,7 +0,0 @@
-define(["require", "exports", "tslib", "./HeatMapChart", "./HeatMapChart.types"], function (require, exports, tslib_1, HeatMapChart_1, HeatMapChart_types_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(HeatMapChart_1, exports);
-    tslib_1.__exportStar(HeatMapChart_types_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/components/HeatMapChart/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/HeatMapChart/index.ts"],"names":[],"mappings":";;;IAAA,8CAA+B;IAC/B,oDAAqC","sourcesContent":["export * from './HeatMapChart';\nexport * from './HeatMapChart.types';\n"]}

package/lib-amd/components/HorizontalBarChart/HorizontalBarChart.base.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import { IAccessibilityProps, IHorizontalBarChartProps, IChartDataPoint } from './index';
-export interface IHorizontalBarChartState {
-    isCalloutVisible: boolean;
-    refSelected: SVGGElement | null | undefined;
-    color: string;
-    hoverValue: string | number | Date | null;
-    lineColor: string;
-    legend: string | null;
-    xCalloutValue?: string;
-    yCalloutValue?: string;
-    barCalloutProps?: IChartDataPoint;
-    callOutAccessibilityData?: IAccessibilityProps;
-    barSpacingInPercent: number;
-}
-export declare class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {
-    private _barHeight;
-    private _classNames;
-    private _uniqLineText;
-    private _calloutId;
-    private _refArray;
-    private _calloutAnchorPoint;
-    private _isRTL;
-    private barChartSvgRef;
-    private _emptyChartId;
-    constructor(props: IHorizontalBarChartProps);
-    componentDidMount(): void;
-    render(): JSX.Element;
-    private _refCallback;
-    private _hoverOn;
-    private _hoverOff;
-    private _handleChartMouseLeave;
-    private _adjustProps;
-    private _getChartDataText;
-    private _getDefaultTextData;
-    private _createBenchmark;
-    /**
-     * 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
-     */
-    private _createBars;
-    private _closeCallout;
-    private _getAriaLabel;
-    private _isChartEmpty;
-}

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

@@ -1,287 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Utilities", "./index", "@fluentui/react/lib/Callout", "../../utilities/locale-util", "../../utilities/index", "@fluentui/react-focus", "../../utilities/FocusableTooltipText"], function (require, exports, tslib_1, React, Utilities_1, index_1, Callout_1, locale_util_1, index_2, react_focus_1, FocusableTooltipText_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.HorizontalBarChartBase = void 0;
-    var getClassNames = (0, Utilities_1.classNamesFunction)();
-    var HorizontalBarChartBase = /** @class */ (function (_super) {
-        tslib_1.__extends(HorizontalBarChartBase, _super);
-        function HorizontalBarChartBase(props) {
-            var _this = _super.call(this, props) || this;
-            _this._isRTL = (0, Utilities_1.getRTL)();
-            _this._handleChartMouseLeave = function () {
-                _this._calloutAnchorPoint = null;
-                if (_this.state.isCalloutVisible) {
-                    _this.setState({
-                        isCalloutVisible: false,
-                        hoverValue: '',
-                        refSelected: null,
-                        lineColor: '',
-                        legend: '',
-                    });
-                }
-            };
-            _this._adjustProps = function () {
-                _this._barHeight = _this.props.barHeight || 12;
-                _this._classNames = getClassNames(_this.props.styles, {
-                    theme: _this.props.theme,
-                    width: _this.props.width,
-                    className: _this.props.className,
-                    barHeight: _this._barHeight,
-                    color: _this.state.lineColor,
-                    variant: _this.props.variant,
-                    hideLabels: _this.props.hideLabels,
-                });
-            };
-            _this._getChartDataText = function (data) {
-                return _this.props.barChartCustomData ? (React.createElement("div", { role: "text" }, _this.props.barChartCustomData(data))) : (_this._getDefaultTextData(data));
-            };
-            _this._closeCallout = function () {
-                _this.setState({
-                    isCalloutVisible: false,
-                });
-            };
-            _this._getAriaLabel = function (point) {
-                var _a;
-                var legend = point.xAxisCalloutData || point.legend;
-                var benchMark = point.data;
-                var yValue = point.yAxisCalloutData ||
-                    (point.horizontalBarChartdata ? "".concat(point.horizontalBarChartdata.x, "/").concat(point.horizontalBarChartdata.y) : 0);
-                return (((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) ||
-                    (legend ? "".concat(legend, ", ") : '') + "".concat(yValue, ".") + (benchMark ? 'with benchmark at ' + "".concat(benchMark, ", ") : ''));
-            };
-            _this.state = {
-                isCalloutVisible: false,
-                hoverValue: '',
-                lineColor: '',
-                legend: '',
-                refSelected: null,
-                color: '',
-                xCalloutValue: '',
-                yCalloutValue: '',
-                barSpacingInPercent: 0,
-            };
-            _this._refArray = [];
-            _this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);
-            _this._hoverOff = _this._hoverOff.bind(_this);
-            _this._calloutId = (0, Utilities_1.getId)('callout');
-            _this._emptyChartId = (0, Utilities_1.getId)('_HBC_empty');
-            _this.barChartSvgRef = React.createRef();
-            return _this;
-        }
-        HorizontalBarChartBase.prototype.componentDidMount = function () {
-            var _a;
-            var svgWidth = ((_a = this.barChartSvgRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
-            var MARGIN_WIDTH_IN_PX = 3;
-            if (svgWidth) {
-                var currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
-                this.setState({ barSpacingInPercent: currentBarSpacing });
-            }
-        };
-        HorizontalBarChartBase.prototype.render = function () {
-            var _this = this;
-            var _a = this.props, data = _a.data, theme = _a.theme;
-            this._adjustProps();
-            var palette = theme.palette;
-            var datapoint = 0;
-            return !this._isChartEmpty() ? (React.createElement("div", { className: this._classNames.root, onMouseLeave: this._handleChartMouseLeave },
-                data.map(function (points, index) {
-                    if (points.chartData && points.chartData[0] && points.chartData[0].horizontalBarChartdata.x) {
-                        datapoint = points.chartData[0].horizontalBarChartdata.x;
-                    }
-                    else {
-                        datapoint = 0;
-                    }
-                    points.chartData[1] = {
-                        legend: '',
-                        horizontalBarChartdata: {
-                            x: points.chartData[0].horizontalBarChartdata.y - datapoint,
-                            y: points.chartData[0].horizontalBarChartdata.y,
-                        },
-                        color: palette.neutralLight,
-                    };
-                    // Hide right side text of chart title for absolute-scale variant
-                    var chartDataText = _this.props.variant === index_1.HorizontalBarChartVariant.AbsoluteScale ? null : _this._getChartDataText(points);
-                    var bars = _this._createBars(points, palette, index);
-                    var keyVal = _this._uniqLineText + '_' + index;
-                    var classNames = getClassNames(_this.props.styles, {
-                        theme: _this.props.theme,
-                        width: _this.props.width,
-                        showTriangle: !!points.chartData[0].data,
-                        variant: _this.props.variant,
-                    });
-                    return (React.createElement("div", { key: index },
-                        React.createElement("div", { className: classNames.items },
-                            React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
-                                React.createElement("div", { className: _this._classNames.chartTitle },
-                                    points.chartTitle && (React.createElement(FocusableTooltipText_1.FocusableTooltipText, { className: _this._classNames.chartTitleLeft, content: points.chartTitle, accessibilityData: points.chartTitleAccessibilityData })),
-                                    chartDataText)),
-                            points.chartData[0].data && _this._createBenchmark(points),
-                            React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, className: _this._classNames.chartWrapper },
-                                React.createElement("svg", { ref: _this.barChartSvgRef, className: _this._classNames.chart, "aria-label": points.chartTitle },
-                                    React.createElement("g", { id: keyVal, key: keyVal, ref: function (e) {
-                                            _this._refCallback(e, points.chartData[0].legend);
-                                        }, 
-                                        // NOTE: points.chartData![0] contains current data value
-                                        onClick: function () {
-                                            var p = points.chartData[0];
-                                            if (p && p.onClick) {
-                                                p.onClick();
-                                            }
-                                        } }, bars))))));
-                }),
-                React.createElement(Callout_1.Callout, tslib_1.__assign({ target: this.state.refSelected, coverTarget: true, isBeakVisible: false, gapSpace: 30, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps, (0, index_2.getAccessibleDataObject)(this.state.callOutAccessibilityData)),
-                    React.createElement(React.Fragment, null, this.props.onRenderCalloutPerHorizontalBar ? (this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)) : (React.createElement(index_2.ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue, color: this.state.lineColor, culture: this.props.culture })))))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
-        };
-        HorizontalBarChartBase.prototype._refCallback = function (element, legendTitle) {
-            this._refArray.push({ index: legendTitle, refElement: element });
-        };
-        HorizontalBarChartBase.prototype._hoverOn = function (hoverValue, point) {
-            var _a, _b, _c, _d;
-            if ((!this.state.isCalloutVisible || this.state.legend !== point.legend) && this._calloutAnchorPoint !== point) {
-                var currentHoveredElement = (0, Utilities_1.find)(this._refArray, function (currentElement) { return currentElement.index === point.legend; });
-                this._calloutAnchorPoint = point;
-                var color = point.color;
-                if (this.props.enableGradient) {
-                    var pointIndex = Math.max(((_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.map(function (v) { return v.chartData; })) === null || _b === void 0 ? void 0 : _b.findIndex(function (item) { return (item === null || item === void 0 ? void 0 : item[0].data) === point.data && (item === null || item === void 0 ? void 0 : item[0].legend) === point.legend; })) || 0, 0);
-                    color = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[0]) || (0, index_2.getNextGradient)(pointIndex, 0, (_d = this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[0];
-                }
-                this.setState({
-                    isCalloutVisible: true,
-                    hoverValue: hoverValue,
-                    lineColor: color,
-                    legend: point.legend,
-                    refSelected: currentHoveredElement.refElement,
-                    xCalloutValue: point.xAxisCalloutData,
-                    yCalloutValue: point.yAxisCalloutData,
-                    barCalloutProps: point,
-                    callOutAccessibilityData: point.callOutAccessibilityData,
-                });
-            }
-        };
-        HorizontalBarChartBase.prototype._hoverOff = function () {
-            /**/
-        };
-        HorizontalBarChartBase.prototype._getDefaultTextData = function (data) {
-            var culture = this.props.culture;
-            var chartDataMode = this.props.chartDataMode || 'default';
-            var chartData = data.chartData[0];
-            var x = chartData.horizontalBarChartdata.x;
-            var y = chartData.horizontalBarChartdata.y;
-            var accessibilityData = (0, index_2.getAccessibleDataObject)(data.chartDataAccessibilityData, 'text', false);
-            switch (chartDataMode) {
-                case 'default':
-                    return (React.createElement("div", tslib_1.__assign({ className: this._classNames.chartTitleRight }, accessibilityData), (0, locale_util_1.convertToLocaleString)(x, culture)));
-                case 'fraction':
-                    return (React.createElement("div", tslib_1.__assign({}, accessibilityData),
-                        React.createElement("span", { className: this._classNames.chartTitleRight }, (0, locale_util_1.convertToLocaleString)(x, culture)),
-                        React.createElement("span", { className: this._classNames.chartDataTextDenominator }, ' / ' + (0, locale_util_1.convertToLocaleString)(y, culture))));
-                case 'percentage':
-                    var dataRatioPercentage = "".concat((0, locale_util_1.convertToLocaleString)(Math.round((x / y) * 100), culture), "%");
-                    return (React.createElement("div", tslib_1.__assign({ className: this._classNames.chartTitleRight }, accessibilityData), dataRatioPercentage));
-            }
-        };
-        HorizontalBarChartBase.prototype._createBenchmark = function (data) {
-            var totalData = data.chartData[0].horizontalBarChartdata.y;
-            var benchmarkData = data.chartData[0].data;
-            var benchmarkRatio = Math.round(((benchmarkData ? benchmarkData : 0) / totalData) * 100);
-            var benchmarkStyles = {
-                left: 'calc(' + benchmarkRatio + '% - 4px)',
-            };
-            return (React.createElement("div", { className: this._classNames.benchmarkContainer },
-                React.createElement("div", { className: this._classNames.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
-         */
-        HorizontalBarChartBase.prototype._createBars = function (data, palette, dataPointIndex) {
-            var _this = this;
-            var _a;
-            var noOfBars = ((_a = data.chartData) === null || _a === void 0 ? void 0 : _a.reduce(function (count, point) { return (count += (point.data || 0) > 0 ? 1 : 0); }, 0)) ||
-                1;
-            var totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);
-            var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
-            // calculating starting point of each bar and it's range
-            var startingPoint = [];
-            var total = data.chartData.reduce(function (acc, point) {
-                return acc + (point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0);
-            }, 0);
-            var prevPosition = 0;
-            var value = 0;
-            var sumOfPercent = 0;
-            data.chartData.map(function (point, index) {
-                var 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
-             */
-            var scalingRatio = sumOfPercent !== 0 ? (sumOfPercent - totalMarginPercent) / 100 : 1;
-            var bars = data.chartData.map(function (point, index) {
-                var _a, _b, _c, _d;
-                var startColor = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
-                var endColor = startColor;
-                if (_this.props.enableGradient && index !== 1) {
-                    startColor = ((_a = point.gradient) === null || _a === void 0 ? void 0 : _a[0]) || (0, index_2.getNextGradient)(dataPointIndex, 0, (_b = _this.props.theme) === null || _b === void 0 ? void 0 : _b.isInverted)[0];
-                    endColor = ((_c = point.gradient) === null || _c === void 0 ? void 0 : _c[1]) || (0, index_2.getNextGradient)(dataPointIndex, 0, (_d = _this.props.theme) === null || _d === void 0 ? void 0 : _d.isInverted)[1];
-                }
-                var 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);
-                var xValue = point.horizontalBarChartdata.x;
-                var placeholderIndex = 1;
-                // Render bar label instead of placeholder bar for absolute-scale variant
-                if (index === placeholderIndex && _this.props.variant === index_1.HorizontalBarChartVariant.AbsoluteScale) {
-                    if (_this.props.hideLabels) {
-                        return React.createElement("text", { key: index });
-                    }
-                    var barValue = data.chartData[0].horizontalBarChartdata.x;
-                    return (React.createElement("text", { key: index, x: "".concat(_this._isRTL ? 100 - startingPoint[index] : startingPoint[index], "%"), y: _this._barHeight / 2, dominantBaseline: "central", transform: "translate(".concat(_this._isRTL ? -4 : 4, ")"), className: _this._classNames.barLabel, "aria-hidden": true }, (0, index_2.formatValueWithSIPrefix)(barValue)));
-                }
-                var gradientId = (0, Utilities_1.getId)('HBC_Gradient') + "_".concat(dataPointIndex, "_").concat(index);
-                return (React.createElement(React.Fragment, { key: index },
-                    _this.props.enableGradient && (React.createElement("defs", null,
-                        React.createElement("linearGradient", { id: gradientId },
-                            React.createElement("stop", { offset: "0", stopColor: startColor }),
-                            React.createElement("stop", { offset: "100%", stopColor: endColor })))),
-                    React.createElement("rect", { key: index, x: "".concat(_this._isRTL
-                            ? 100 - startingPoint[index] - value - index * _this.state.barSpacingInPercent
-                            : startingPoint[index] + index * _this.state.barSpacingInPercent, "%"), y: 0, rx: _this.props.roundCorners ? 3 : 0, "data-is-focusable": point.legend !== '' ? true : false, width: value + '%', height: _this._barHeight, fill: _this.props.enableGradient ? "url(#".concat(gradientId, ")") : startColor, onMouseOver: point.legend !== '' ? _this._hoverOn.bind(_this, xValue, point) : undefined, onFocus: point.legend !== '' ? _this._hoverOn.bind(_this, xValue, point) : undefined, role: "img", "aria-label": _this._getAriaLabel(point), onBlur: _this._hoverOff, onMouseLeave: _this._hoverOff, className: _this._classNames.barWrapper })));
-            });
-            return bars;
-        };
-        HorizontalBarChartBase.prototype._isChartEmpty = function () {
-            return !(this.props.data && this.props.data.length > 0);
-        };
-        return HorizontalBarChartBase;
-    }(React.Component));
-    exports.HorizontalBarChartBase = HorizontalBarChartBase;
-});
-//# sourceMappingURL=HorizontalBarChart.base.js.map