@fluentui/react-charting 5.23.12 → 5.23.14

package/lib/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/components/HeatMapChart/HeatMapChart.js

@@ -1,9 +0,0 @@
-import { styled } from '@fluentui/react/lib/Utilities';
-import { getHeatMapChartStyles } from './HeatMapChart.styles';
-import { HeatMapChartBase } from './HeatMapChart.base';
-/**
- * HeatMapchart component.
- * {@docCategory HeatMapChart}
- */
-export var HeatMapChart = styled(HeatMapChartBase, getHeatMapChartStyles);
-//# sourceMappingURL=HeatMapChart.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HeatMapChart.js","sourceRoot":"../src/","sources":["components/HeatMapChart/HeatMapChart.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;GAGG;AACH,MAAM,CAAC,IAAM,YAAY,GAAgD,MAAM,CAI7E,gBAAgB,EAAE,qBAAqB,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/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/components/HeatMapChart/HeatMapChart.styles.js

@@ -1,24 +0,0 @@
-import { FontWeights } from '@fluentui/react/lib/Styling';
-export var getHeatMapChartStyles = function (props) {
-    var theme = props.theme;
-    return {
-        root: {},
-        text: [
-            theme.fonts.medium,
-            {
-                pointerEvents: 'none',
-                fill: theme.palette.white,
-                fontWeight: FontWeights.semibold,
-            },
-        ],
-        subComponentStyles: {
-            cartesianStyles: {},
-            calloutStyles: {
-                root: {
-                    maxWidth: '238px',
-                },
-            },
-        },
-    };
-};
-//# sourceMappingURL=HeatMapChart.styles.js.map

package/lib/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":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG1D,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,KAA8B;IAC1D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IACxB,OAAO;QACL,IAAI,EAAE,EAAE;QACR,IAAI,EAAE;YACJ,KAAK,CAAC,KAAK,CAAC,MAAM;YAClB;gBACE,aAAa,EAAE,MAAM;gBACrB,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;gBACzB,UAAU,EAAE,WAAW,CAAC,QAAQ;aACjC;SACF;QACD,kBAAkB,EAAE;YAClB,eAAe,EAAE,EAAE;YACnB,aAAa,EAAE;gBACb,IAAI,EAAE;oBACJ,QAAQ,EAAE,OAAO;iBAClB;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","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/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/components/HeatMapChart/HeatMapChart.types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=HeatMapChart.types.js.map

package/lib/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/components/HeatMapChart/index.d.ts

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

package/lib/components/HeatMapChart/index.js

@@ -1,3 +0,0 @@
-export * from './HeatMapChart';
-export * from './HeatMapChart.types';
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/HeatMapChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './HeatMapChart';\nexport * from './HeatMapChart.types';\n"]}

package/lib/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/components/HorizontalBarChart/HorizontalBarChart.base.js

@@ -1,291 +0,0 @@
-import { __assign, __extends } from "tslib";
-import * as React from 'react';
-import { classNamesFunction, find, getId, getRTL } from '@fluentui/react/lib/Utilities';
-import { HorizontalBarChartVariant, } from './index';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { convertToLocaleString } from '../../utilities/locale-util';
-import { ChartHoverCard, formatValueWithSIPrefix, getAccessibleDataObject, getNextGradient, } from '../../utilities/index';
-import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
-import { FocusableTooltipText } from '../../utilities/FocusableTooltipText';
-var getClassNames = classNamesFunction();
-var HorizontalBarChartBase = /** @class */ (function (_super) {
-    __extends(HorizontalBarChartBase, _super);
-    function HorizontalBarChartBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this._isRTL = 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 = getId('callout');
-        _this._emptyChartId = 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 === 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(FocusZone, { direction: FocusZoneDirection.horizontal },
-                            React.createElement("div", { className: _this._classNames.chartTitle },
-                                points.chartTitle && (React.createElement(FocusableTooltipText, { className: _this._classNames.chartTitleLeft, content: points.chartTitle, accessibilityData: points.chartTitleAccessibilityData })),
-                                chartDataText)),
-                        points.chartData[0].data && _this._createBenchmark(points),
-                        React.createElement(FocusZone, { direction: 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, __assign({ target: this.state.refSelected, coverTarget: true, isBeakVisible: false, gapSpace: 30, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: DirectionalHint.topAutoEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps, getAccessibleDataObject(this.state.callOutAccessibilityData)),
-                React.createElement(React.Fragment, null, this.props.onRenderCalloutPerHorizontalBar ? (this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)) : (React.createElement(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 = 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]) || 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 = getAccessibleDataObject(data.chartDataAccessibilityData, 'text', false);
-        switch (chartDataMode) {
-            case 'default':
-                return (React.createElement("div", __assign({ className: this._classNames.chartTitleRight }, accessibilityData), convertToLocaleString(x, culture)));
-            case 'fraction':
-                return (React.createElement("div", __assign({}, accessibilityData),
-                    React.createElement("span", { className: this._classNames.chartTitleRight }, convertToLocaleString(x, culture)),
-                    React.createElement("span", { className: this._classNames.chartDataTextDenominator }, ' / ' + convertToLocaleString(y, culture))));
-            case 'percentage':
-                var dataRatioPercentage = "".concat(convertToLocaleString(Math.round((x / y) * 100), culture), "%");
-                return (React.createElement("div", __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]) || 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]) || 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 === 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 }, formatValueWithSIPrefix(barValue)));
-            }
-            var gradientId = 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));
-export { HorizontalBarChartBase };
-//# sourceMappingURL=HorizontalBarChart.base.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, find, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport {\n  IAccessibilityProps,\n  IChartProps,\n  IHorizontalBarChartProps,\n  IHorizontalBarChartStyleProps,\n  IHorizontalBarChartStyles,\n  IChartDataPoint,\n  IRefArrayData,\n  HorizontalBarChartVariant,\n} from './index';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { convertToLocaleString } from '../../utilities/locale-util';\nimport {\n  ChartHoverCard,\n  formatValueWithSIPrefix,\n  getAccessibleDataObject,\n  getNextGradient,\n} from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { FocusableTooltipText } from '../../utilities/FocusableTooltipText';\n\nconst getClassNames = classNamesFunction<IHorizontalBarChartStyleProps, IHorizontalBarChartStyles>();\n\nexport interface IHorizontalBarChartState {\n  isCalloutVisible: boolean;\n  refSelected: SVGGElement | null | undefined;\n  color: string;\n  hoverValue: string | number | Date | null;\n  lineColor: string;\n  legend: string | null;\n  xCalloutValue?: string;\n  yCalloutValue?: string;\n  barCalloutProps?: IChartDataPoint;\n  callOutAccessibilityData?: IAccessibilityProps;\n  barSpacingInPercent: number;\n}\n\nexport class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {\n  private _barHeight: number;\n  private _classNames: IProcessedStyleSet<IHorizontalBarChartStyles>;\n  private _uniqLineText: string;\n  private _calloutId: string;\n  private _refArray: IRefArrayData[];\n  private _calloutAnchorPoint: IChartDataPoint | null;\n  private _isRTL: boolean = getRTL();\n  private barChartSvgRef: React.RefObject<SVGSVGElement>;\n  private _emptyChartId: string;\n\n  constructor(props: IHorizontalBarChartProps) {\n    super(props);\n    this.state = {\n      isCalloutVisible: false,\n      hoverValue: '',\n      lineColor: '',\n      legend: '',\n      refSelected: null,\n      color: '',\n      xCalloutValue: '',\n      yCalloutValue: '',\n      barSpacingInPercent: 0,\n    };\n    this._refArray = [];\n    this._uniqLineText = '_HorizontalLine_' + Math.random().toString(36).substring(7);\n    this._hoverOff = this._hoverOff.bind(this);\n    this._calloutId = getId('callout');\n    this._emptyChartId = getId('_HBC_empty');\n    this.barChartSvgRef = React.createRef<SVGSVGElement>();\n  }\n\n  public componentDidMount(): void {\n    const svgWidth = this.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      this.setState({ barSpacingInPercent: currentBarSpacing });\n    }\n  }\n\n  public render(): JSX.Element {\n    const { data, theme } = this.props;\n    this._adjustProps();\n    const { palette } = theme!;\n    let datapoint: number | undefined = 0;\n\n    return !this._isChartEmpty() ? (\n      <div className={this._classNames.root} onMouseLeave={this._handleChartMouseLeave}>\n        {data!.map((points: IChartProps, 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          points.chartData![1] = {\n            legend: '',\n            horizontalBarChartdata: {\n              x: points.chartData![0].horizontalBarChartdata!.y - datapoint!,\n              y: points.chartData![0].horizontalBarChartdata!.y,\n            },\n            color: palette.neutralLight,\n          };\n\n          // Hide right side text of chart title for absolute-scale variant\n          const chartDataText =\n            this.props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : this._getChartDataText(points!);\n          const bars = this._createBars(points!, palette, index);\n          const keyVal = this._uniqLineText + '_' + index;\n          const classNames = getClassNames(this.props.styles!, {\n            theme: this.props.theme!,\n            width: this.props.width,\n            showTriangle: !!points!.chartData![0].data,\n            variant: this.props.variant,\n          });\n\n          return (\n            <div key={index}>\n              <div className={classNames.items}>\n                <FocusZone direction={FocusZoneDirection.horizontal}>\n                  <div className={this._classNames.chartTitle}>\n                    {points!.chartTitle && (\n                      <FocusableTooltipText\n                        className={this._classNames.chartTitleLeft}\n                        content={points!.chartTitle}\n                        accessibilityData={points!.chartTitleAccessibilityData}\n                      />\n                    )}\n                    {chartDataText}\n                  </div>\n                </FocusZone>\n                {points!.chartData![0].data && this._createBenchmark(points!)}\n                <FocusZone direction={FocusZoneDirection.horizontal} className={this._classNames.chartWrapper}>\n                  <svg ref={this.barChartSvgRef} className={this._classNames.chart} aria-label={points!.chartTitle}>\n                    <g\n                      id={keyVal}\n                      key={keyVal}\n                      ref={(e: SVGGElement) => {\n                        this._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                </FocusZone>\n              </div>\n            </div>\n          );\n        })}\n        <Callout\n          target={this.state.refSelected}\n          coverTarget={true}\n          isBeakVisible={false}\n          gapSpace={30}\n          hidden={!(!this.props.hideTooltip && this.state.isCalloutVisible)}\n          directionalHint={DirectionalHint.topAutoEdge}\n          id={this._calloutId}\n          onDismiss={this._closeCallout}\n          preventDismissOnLostFocus={true}\n          {...this.props.calloutProps!}\n          {...getAccessibleDataObject(this.state.callOutAccessibilityData)}\n        >\n          <>\n            {this.props.onRenderCalloutPerHorizontalBar ? (\n              this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)\n            ) : (\n              <ChartHoverCard\n                Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend!}\n                YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue!}\n                color={this.state.lineColor}\n                culture={this.props.culture}\n              />\n            )}\n          </>\n        </Callout>\n      </div>\n    ) : (\n      <div\n        id={this._emptyChartId}\n        role={'alert'}\n        style={{ opacity: '0' }}\n        aria-label={'Graph has no data to display'}\n      />\n    );\n  }\n\n  private _refCallback(element: SVGGElement, legendTitle: string | undefined): void {\n    this._refArray.push({ index: legendTitle, refElement: element });\n  }\n\n  private _hoverOn(hoverValue: string | number | Date | null, point: IChartDataPoint): void {\n    if ((!this.state.isCalloutVisible || this.state.legend !== point.legend!) && this._calloutAnchorPoint !== point) {\n      const currentHoveredElement = find(\n        this._refArray,\n        (currentElement: IRefArrayData) => currentElement.index === point.legend,\n      );\n      this._calloutAnchorPoint = point;\n      let color = point.color!;\n\n      if (this.props.enableGradient) {\n        const pointIndex = Math.max(\n          this.props.data\n            ?.map(v => v.chartData)\n            ?.findIndex(item => item?.[0].data === point.data && item?.[0].legend === point.legend) || 0,\n          0,\n        );\n        color = point.gradient?.[0] || getNextGradient(pointIndex, 0, this.props.theme?.isInverted)[0];\n      }\n\n      this.setState({\n        isCalloutVisible: true,\n        hoverValue,\n        lineColor: color,\n        legend: point.legend!,\n        refSelected: currentHoveredElement!.refElement,\n        xCalloutValue: point.xAxisCalloutData!,\n        yCalloutValue: point.yAxisCalloutData!,\n        barCalloutProps: point,\n        callOutAccessibilityData: point.callOutAccessibilityData,\n      });\n    }\n  }\n\n  private _hoverOff(): void {\n    /**/\n  }\n\n  private _handleChartMouseLeave = () => {\n    this._calloutAnchorPoint = null;\n    if (this.state.isCalloutVisible) {\n      this.setState({\n        isCalloutVisible: false,\n        hoverValue: '',\n        refSelected: null,\n        lineColor: '',\n        legend: '',\n      });\n    }\n  };\n\n  private _adjustProps = (): void => {\n    this._barHeight = this.props.barHeight || 12;\n    this._classNames = getClassNames(this.props.styles!, {\n      theme: this.props.theme!,\n      width: this.props.width,\n      className: this.props.className,\n      barHeight: this._barHeight,\n      color: this.state.lineColor,\n      variant: this.props.variant,\n      hideLabels: this.props.hideLabels,\n    });\n  };\n\n  private _getChartDataText = (data: IChartProps) => {\n    return this.props.barChartCustomData ? (\n      <div role=\"text\">{this.props.barChartCustomData(data)}</div>\n    ) : (\n      this._getDefaultTextData(data)\n    );\n  };\n\n  private _getDefaultTextData(data: IChartProps): JSX.Element {\n    const { culture } = this.props;\n    const chartDataMode = this.props.chartDataMode || 'default';\n    const chartData: IChartDataPoint = data!.chartData![0];\n    const x = chartData.horizontalBarChartdata!.x;\n    const y = chartData.horizontalBarChartdata!.y;\n\n    const accessibilityData = getAccessibleDataObject(data.chartDataAccessibilityData!, 'text', false);\n    switch (chartDataMode) {\n      case 'default':\n        return (\n          <div className={this._classNames.chartTitleRight} {...accessibilityData}>\n            {convertToLocaleString(x, culture)}\n          </div>\n        );\n      case 'fraction':\n        return (\n          <div {...accessibilityData}>\n            <span className={this._classNames.chartTitleRight}>{convertToLocaleString(x, culture)}</span>\n            <span className={this._classNames.chartDataTextDenominator}>\n              {' / ' + convertToLocaleString(y, culture)}\n            </span>\n          </div>\n        );\n      case 'percentage':\n        const dataRatioPercentage = `${convertToLocaleString(Math.round((x / y) * 100), culture)}%`;\n        return (\n          <div className={this._classNames.chartTitleRight} {...accessibilityData}>\n            {dataRatioPercentage}\n          </div>\n        );\n    }\n  }\n\n  private _createBenchmark(data: IChartProps): JSX.Element {\n    const totalData = data.chartData![0].horizontalBarChartdata!.y;\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={this._classNames.benchmarkContainer}>\n        <div className={this._classNames.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  private _createBars(data: IChartProps, palette: IPalette, dataPointIndex: number): JSX.Element[] {\n    const noOfBars =\n      data.chartData?.reduce((count: number, point: IChartDataPoint) => (count += (point.data || 0) > 0 ? 1 : 0), 0) ||\n      1;\n    const totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);\n    const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\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: IChartDataPoint) =>\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: IChartDataPoint, 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: IChartDataPoint, index: number) => {\n      let startColor: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];\n      let endColor = startColor;\n\n      if (this.props.enableGradient && index !== 1) {\n        startColor = point.gradient?.[0] || getNextGradient(dataPointIndex, 0, this.props.theme?.isInverted)[0];\n        endColor = point.gradient?.[1] || getNextGradient(dataPointIndex, 0, this.props.theme?.isInverted)[1];\n      }\n\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\n      // Render bar label instead of placeholder bar for absolute-scale variant\n      if (index === placeholderIndex && this.props.variant === HorizontalBarChartVariant.AbsoluteScale) {\n        if (this.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={`${this._isRTL ? 100 - startingPoint[index] : startingPoint[index]}%`}\n            y={this._barHeight / 2}\n            dominantBaseline=\"central\"\n            transform={`translate(${this._isRTL ? -4 : 4})`}\n            className={this._classNames.barLabel}\n            aria-hidden={true}\n          >\n            {formatValueWithSIPrefix(barValue)}\n          </text>\n        );\n      }\n\n      const gradientId = getId('HBC_Gradient') + `_${dataPointIndex}_${index}`;\n\n      return (\n        <React.Fragment key={index}>\n          {this.props.enableGradient && (\n            <defs>\n              <linearGradient id={gradientId}>\n                <stop offset=\"0\" stopColor={startColor} />\n                <stop offset=\"100%\" stopColor={endColor} />\n              </linearGradient>\n            </defs>\n          )}\n          <rect\n            key={index}\n            x={`${\n              this._isRTL\n                ? 100 - startingPoint[index] - value - index * this.state.barSpacingInPercent\n                : startingPoint[index] + index * this.state.barSpacingInPercent\n            }%`}\n            y={0}\n            rx={this.props.roundCorners ? 3 : 0}\n            data-is-focusable={point.legend !== '' ? true : false}\n            width={value + '%'}\n            height={this._barHeight}\n            fill={this.props.enableGradient ? `url(#${gradientId})` : startColor}\n            onMouseOver={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n            onFocus={point.legend !== '' ? this._hoverOn.bind(this, xValue, point) : undefined}\n            role=\"img\"\n            aria-label={this._getAriaLabel(point)}\n            onBlur={this._hoverOff}\n            onMouseLeave={this._hoverOff}\n            className={this._classNames.barWrapper}\n          />\n        </React.Fragment>\n      );\n    });\n    return bars;\n  }\n\n  private _closeCallout = () => {\n    this.setState({\n      isCalloutVisible: false,\n    });\n  };\n\n  private _getAriaLabel = (point: IChartDataPoint): string => {\n    const legend = point.xAxisCalloutData || point.legend;\n    const benchMark = point.data;\n    const yValue =\n      point.yAxisCalloutData ||\n      (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);\n    return (\n      point.callOutAccessibilityData?.ariaLabel ||\n      (legend ? `${legend}, ` : '') + `${yValue}.` + (benchMark ? 'with benchmark at ' + `${benchMark}, ` : '')\n    );\n  };\n\n  private _isChartEmpty(): boolean {\n    return !(this.props.data && this.props.data.length > 0);\n  }\n}\n"]}

package/lib/components/HorizontalBarChart/HorizontalBarChart.d.ts

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