npm - @fluentui/react-charting - Versions diffs - 5.17.2 → 5.17.3 - Mend

@fluentui/react-charting 5.17.2 → 5.17.3

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

Files changed (110) hide show

package/docs/TestPlans/VerticalStackedBarChart/ComponentTests.md ADDED Viewed

@@ -0,0 +1,73 @@
+**Vertical Stacked Bar Chart – Component test plan**
+**Sub-components: Bar, Line, Legends, Callout, Labels**
+1. **Bar: Bar data, Bar color (single/multiple), bar label**
+1. **Line: show/hide line, highlight data points on line and show callout**
+1. **Legends: show/hide legends, highlight the corresponding bar/line on legend hover**
+1. **Callout: Default/custom callout**
+1. **Labels: x-Axis labels default/rotated**
+|                                   **Test steps**                                    |                                              **Validation**                                               | **Tool used** |
+| :---------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------: | :-----------: |
+|                             Test 1: [Snapshot testing]                              |                                                                                                           |               |
+|                  - With only data prop, numerical data on x-axis.                   |                                Renders VerticalStackedBar chart correctly                                 |      RTL      |
+|                        - With HideLegend prop set to “true”                         |                                            Should hide legends                                            |    Enzyme     |
+|                        - With HideTooltip prop set to “true”                        |                                     Should hide the tooltip in chart                                      |    Enzyme     |
+|                    - With EnabledLegendsWrapLines set to “true”                     | Should enable the legends to wrap lines if there is not enough space to show all legends on a single line |    Enzyme     |
+|                     - With ShowXAxisLablesTooltip set to “true”                     |                      Should truncate x axis labels and show tooltip on x axis labels                      |    Enzyme     |
+|                        - With WrapXAxisLables set to “true”                         |                                      Should wrap x axis label values                                      |    Enzyme     |
+|                       - With isCalloutForStack set to “true”                        |                                 Should render callout for stack properly                                  |    Enzyme     |
+|                         - With yAxisTickFormat set to “%d”                          |                   <p>Should render the y-axis ticks in the format specified</p><p></p>                    |    Enzyme     |
+|                           - With hideLabels set to “true”                           |                                          Should hide bar labels                                           |    Enzyme     |
+|                             Test 2: Basic props testing                             |                                                                                                           |               |
+|                           - HideLegend prop set to “true”                           |                              Should not mount legend when hideLegend is true                              |    Enzyme     |
+|                          - HideLegend prop set to “false”                           |                               Should mount legend when hideLegend is false                                |    Enzyme     |
+|                          - HideTooltip prop set to “true”                           |                             Should not mount callout when hideTootip is true                              |    Enzyme     |
+|                          - HideTooltip prop set to “false”                          |                               Should mount callout when hideTootip is false                               |    Enzyme     |
+|                     - onRenderCalloutPerStack prop is not given                     |                                 Should not render onRenderCalloutPerStack                                 |    Enzyme     |
+|                       - onRenderCalloutPerDataPoint is given                        |                                 Should render onRenderCalloutPerDataPoint                                 |    Enzyme     |
+|                     - onRenderCalloutPerDataPoint is not given                      |                               Should not render onRenderCalloutPerDataPoint                               |    Enzyme     |
+|                       - onRenderCalloutPerDataPoint is given                        |                                 Should render onRenderCalloutPerDataPoint                                 |    Enzyme     |
+|                   Test 3: Render calling with respective to props                   |                                                                                                           |               |
+| - No prop changes: Mount VerticalStackedBar chart and then set the same props again |                               Render function should have been called twice                               |    Enzyme     |
+|     - Prop changes: Mount VerticalStackedBar chart and then set some other prop     |                               Render function should have been called twice                               |    Enzyme     |
+|                                Test 4: Mouse events                                 |                                                                                                           |               |
+|                                - Mouse over on a bar                                |                               Should render callout correctly on mouseover                                |    Enzyme     |
+|                       - Mouse move from one bar to other bar                        |                               Should render callout correctly on mouse move                               |    Enzyme     |
+|                    - Mouse over on a bar with customized callout                    |                               Should render customized callout on mouseover                               |    Enzyme     |
+|                    - Customized callout per stack on mouse over                     |                     Should render customized callout per stack correctly on mouseover                     |    Enzyme     |
+|               - Customized callout on a bar from one bar to other bar               |                          Should render customized callout for stack on mouseover                          |    Enzyme     |
+|                            Test 5: [Sub-Component]: Line                            |                                                                                                           |               |
+|                                 - Specify line data                                 |                                 Should render line with the data provided                                 |      RTL      |
+|                            Test 6: [Sub-Component]: Bar                             |                                                                                                           |               |
+|                                 - Specify bar color                                 |                                Should render bar with the specified color                                 |      RTL      |
+|                       - Specify separate bars in a single bar                       |                               Should render stacked bar with specified data                               |      RTL      |
+|                            - setMinimumBarHeight to “x”                             |           Should render bars properly, bars below this height will be displayed at this height            |      RTL      |
+|                                - set barWidth to “x”                                |                                Should render bars with specified bar width                                |      RTL      |
+|                               - set barGapMax to “x”                                |                                 Should render bars with specified bar gap                                 |      RTL      |
+|                                - set barCornerRadius                                |                          Should render top bar with specified bar corner radius                           |      RTL      |
+|                          Test 7: [Sub-Component]: Legends                           |                                                                                                           |               |
+|                                   - Hide legends                                    |                                   Should not show any rendered legends                                    |      RTL      |
+|                           - Hover mouse over line legends                           |                             Should reduce the opacity of the other lines/bars                             |      RTL      |
+|                           - Hover mouse over bar legends                            |                             Should reduce the opacity of the other lines/bars                             |      RTL      |
+|                   - Mouse move from one Legend to another Legend                    |                     Should reset the opacity of the lines on mouse leave a bar legend                     |      RTL      |
+|                         - Single mouse click on bar legends                         |                      Should select legend on single mouse click on respective legend                      |      RTL      |
+|                         - Double mouse click on bar legends                         |                     Should deselect legend on double mouse click on respective legend                     |      RTL      |
+|                        - Single mouse click on line legends                         |                      Should select legend on single mouse click on respective legend                      |      RTL      |
+|                        - Double mouse click on line legends                         |                     Should deselect legend on double mouse click on respective legend                     |      RTL      |
+|                          Test 8: [Sub-Component]: Callout                           |                                                                                                           |               |
+|                              - Hover mouse over a bar                               |                                 Should call the handler on mouse over bar                                 |      RTL      |
+|                     - Hover mouse over a bar to display callout                     |                               Should show the default callout over that bar                               |      RTL      |
+|                          - Hover mouse over a stacked bar                           |                                 Should show the default stacked call out                                  |      RTL      |
+|                             - Hover mouse over the line                             |                              Should show the default callout over that line                               |      RTL      |
+|                 - Specify custom callout and hover mouse over a bar                 |                               Should show the custom callout over that bar                                |      RTL      |
+|               - Specify custom callout and hover mouse over the line                |                               Should show the custom callout over that line                               |      RTL      |
+|                                - Mouse click on bar                                 |                             Should call the handler on mouse click on the bar                             |      RTL      |
+|                       Test 9: [Sub-Component]: x-axis labels                        |                                                                                                           |               |
+|                              - Truncate x-axis labels                               |                            Should show the x-axis labels tooltip when hovered                             |      RTL      |
+|                               - Rotate x-axis labels                                |                               Should rotate the x-axis labels by 45 degrees                               |      RTL      |
+|                     Test 10: [Sub-Component]: Screen resolution                     |                                                                                                           |               |
+|                     - Increase the screen resolution (zoom in)                      |                                    Should remain unchanged on zoom in                                     |      RTL      |
+|                     - Decrease the screen resolution (zoom out)                     |                                    Should remain unchanged on zoom out                                    |      RTL      |
+|                        Test 11: Theme changed to Dark Theme                         |                                        Should reflect theme change                                        |      RTL      |

package/lib/components/HorizontalBarChart/HorizontalBarChart.base.d.ts CHANGED Viewed

@@ -11,6 +11,7 @@ export interface IHorizontalBarChartState {
     yCalloutValue?: string;
     barCalloutProps?: IChartDataPoint;
     callOutAccessibilityData?: IAccessibilityProps;
+    barSpacingInPercent: number;
 }
 export declare class HorizontalBarChartBase extends React.Component<IHorizontalBarChartProps, IHorizontalBarChartState> {
     private _barHeight;
@@ -20,8 +21,10 @@ export declare class HorizontalBarChartBase extends React.Component<IHorizontalB
     private _refArray;
     private _calloutAnchorPoint;
     private _isRTL;
+    private barChartSvgRef;
     private _emptyChartId;
     constructor(props: IHorizontalBarChartProps);
+    componentDidMount(): void;
     render(): JSX.Element;
     private _refCallback;
     private _hoverOn;
@@ -31,6 +34,12 @@ export declare class HorizontalBarChartBase extends React.Component<IHorizontalB
     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;

package/lib/components/HorizontalBarChart/HorizontalBarChart.base.js CHANGED Viewed

@@ -62,14 +62,25 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
             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;
@@ -110,7 +121,7 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                                 chartDataText)),
                         points.chartData[0].data && _this._createBenchmark(points),
                         React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, className: _this._classNames.chartWrapper },
-                            React.createElement("svg", { className: _this._classNames.chart, "aria-label": points.chartTitle },
+                            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);
                                     },
@@ -177,8 +188,18 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
         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) {
         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 = [];
@@ -200,7 +221,15 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
             sumOfPercent += value;
             return sumOfPercent;
         });
-        var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+        /**
+         * 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 color = point.color ? point.color : defaultPalette[Math.floor(Math.random() * 4 + 1)];
             var pointData = point.horizontalBarChartdata.x ? point.horizontalBarChartdata.x : 0;
@@ -228,7 +257,9 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                 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 }, d3FormatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)));
             }
-            return (React.createElement("rect", { key: index, x: "".concat(_this._isRTL ? 100 - startingPoint[index] - value : startingPoint[index], "%"), y: 0, "data-is-focusable": point.legend !== '' ? true : false, width: value + '%', height: _this._barHeight, fill: color, 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 (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, "data-is-focusable": point.legend !== '' ? true : false, width: value + '%', height: _this._barHeight, fill: color, 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;
     };

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

	@@ -1 +1 @@
1	- {"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 { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { formatPrefix as d3FormatPrefix } from 'd3-format';\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}\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 _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 // eslint-disable-next-line react/no-unused-state\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\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 }\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 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);\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 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 this.setState({\n isCalloutVisible: true,\n hoverValue: hoverValue,\n lineColor: point.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 private _createBars(data: IChartProps, palette: IPalette): JSX.Element[] {\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 const scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;\n\n const bars = data.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultPalette[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\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 {d3FormatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)}\n </text>\n );\n }\n\n return (\n <rect\n key={index}\n x={`${this._isRTL ? 100 - startingPoint[index] - value : startingPoint[index]}%`}\n y={0}\n data-is-focusable={point.legend !== '' ? true : false}\n width={value + '%'}\n height={this._barHeight}\n fill={color}\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 );\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 yValue =\n point.yAxisCalloutData \|\|\n (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0);\n }\n}\n"]}
1	+ {"version":3,"file":"HorizontalBarChart.base.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.base.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAExF,OAAO,EAQL,yBAAyB,GAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACvG,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,YAAY,IAAI,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAE5E,IAAM,aAAa,GAAG,kBAAkB,EAA4D,CAAC;AAgBrG;IAA4C,0CAAmE;IAW7G,gCAAY,KAA+B;QAA3C,YACE,kBAAM,KAAK,CAAC,SAmBb;QAxBO,YAAM,GAAY,MAAM,EAAE,CAAC;QA+K3B,4BAAsB,GAAG;YAC/B,KAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;YAChC,IAAI,KAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;gBAC/B,KAAI,CAAC,QAAQ,CAAC;oBACZ,gBAAgB,EAAE,KAAK;oBACvB,UAAU,EAAE,EAAE;oBACd,WAAW,EAAE,IAAI;oBACjB,SAAS,EAAE,EAAE;oBACb,MAAM,EAAE,EAAE;iBACX,CAAC,CAAC;aACJ;QACH,CAAC,CAAC;QAEM,kBAAY,GAAG;YACrB,KAAI,CAAC,UAAU,GAAG,KAAI,CAAC,KAAK,CAAC,SAAS,IAAI,EAAE,CAAC;YAC7C,KAAI,CAAC,WAAW,GAAG,aAAa,CAAC,KAAI,CAAC,KAAK,CAAC,MAAO,EAAE;gBACnD,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM;gBACxB,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK;gBACvB,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS;gBAC/B,SAAS,EAAE,KAAI,CAAC,UAAU;gBAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS;gBAC3B,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO;gBAC3B,UAAU,EAAE,KAAI,CAAC,KAAK,CAAC,UAAU;aAClC,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,uBAAiB,GAAG,UAAC,IAAiB;YAC5C,OAAO,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACrC,6BAAK,IAAI,EAAC,MAAM,IAAE,KAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAO,CAC7D,CAAC,CAAC,CAAC,CACF,KAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAC/B,CAAC;QACJ,CAAC,CAAC;QAuKM,mBAAa,GAAG;YACtB,KAAI,CAAC,QAAQ,CAAC;gBACZ,gBAAgB,EAAE,KAAK;aACxB,CAAC,CAAC;QACL,CAAC,CAAC;QAEM,mBAAa,GAAG,UAAC,KAAsB;;YAC7C,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,CAAC;YACtD,IAAM,MAAM,GACV,KAAK,CAAC,gBAAgB;gBACtB,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAC,UAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC,cAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC,CAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC7G,OAAO,CAAA,MAAA,KAAK,CAAC,wBAAwB,0CAAE,SAAS,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,UAAG,MAAM,OAAI,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,UAAG,MAAM,MAAG,CAAC;QACnG,CAAC,CAAC;QA5XA,KAAI,CAAC,KAAK,GAAG;YACX,gBAAgB,EAAE,KAAK;YACvB,UAAU,EAAE,EAAE;YACd,SAAS,EAAE,EAAE;YACb,MAAM,EAAE,EAAE;YACV,WAAW,EAAE,IAAI;YACjB,iDAAiD;YACjD,KAAK,EAAE,EAAE;YACT,aAAa,EAAE,EAAE;YACjB,aAAa,EAAE,EAAE;YACjB,mBAAmB,EAAE,CAAC;SACvB,CAAC;QACF,KAAI,CAAC,SAAS,GAAG,EAAE,CAAC;QACpB,KAAI,CAAC,aAAa,GAAG,kBAAkB,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;QAClF,KAAI,CAAC,SAAS,GAAG,KAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QAC3C,KAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;QACnC,KAAI,CAAC,aAAa,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;QACzC,KAAI,CAAC,cAAc,GAAG,KAAK,CAAC,SAAS,EAAiB,CAAC;;IACzD,CAAC;IAEM,kDAAiB,GAAxB;;QACE,IAAM,QAAQ,GAAG,CAAA,MAAA,IAAI,CAAC,cAAc,CAAC,OAAO,0CAAE,qBAAqB,GAAG,KAAK,KAAI,CAAC,CAAC;QACjF,IAAM,kBAAkB,GAAG,CAAC,CAAC;QAC7B,IAAI,QAAQ,EAAE;YACZ,IAAM,iBAAiB,GAAG,CAAC,kBAAkB,GAAG,QAAQ,CAAC,GAAG,GAAG,CAAC;YAChE,IAAI,CAAC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,CAAC,CAAC;SAC3D;IACH,CAAC;IAEM,uCAAM,GAAb;QAAA,iBA6GC;QA5GO,IAAA,KAAkB,IAAI,CAAC,KAAK,EAA1B,IAAI,UAAA,EAAE,KAAK,WAAe,CAAC;QACnC,IAAI,CAAC,YAAY,EAAE,CAAC;QACZ,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;QAC3B,IAAI,SAAS,GAAuB,CAAC,CAAC;QACtC,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,YAAY,EAAE,IAAI,CAAC,sBAAsB;YAC7E,IAAK,CAAC,GAAG,CAAC,UAAC,MAAmB,EAAE,KAAa;gBAC5C,IAAI,MAAM,CAAC,SAAS,IAAI,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,EAAE;oBAC9F,SAAS,GAAG,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,CAAC;iBAC5D;qBAAM;oBACL,SAAS,GAAG,CAAC,CAAC;iBACf;gBACD,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,GAAG;oBACrB,MAAM,EAAE,EAAE;oBACV,sBAAsB,EAAE;wBACtB,CAAC,EAAE,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,GAAG,SAAU;wBAC9D,CAAC,EAAE,MAAM,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC;qBAClD;oBACD,KAAK,EAAE,OAAO,CAAC,YAAY;iBAC5B,CAAC;gBAEF,iEAAiE;gBACjE,IAAM,aAAa,GACjB,KAAI,CAAC,KAAK,CAAC,OAAO,KAAK,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,CAAC;gBAC1G,IAAM,IAAI,GAAG,KAAI,CAAC,WAAW,CAAC,MAAO,EAAE,OAAO,CAAC,CAAC;gBAChD,IAAM,MAAM,GAAG,KAAI,CAAC,aAAa,GAAG,GAAG,GAAG,KAAK,CAAC;gBAChD,IAAM,UAAU,GAAG,aAAa,CAAC,KAAI,CAAC,KAAK,CAAC,MAAO,EAAE;oBACnD,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM;oBACxB,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK;oBACvB,YAAY,EAAE,CAAC,CAAC,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,IAAI;oBAC1C,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO;iBAC5B,CAAC,CAAC;gBAEH,OAAO,CACL,6BAAK,GAAG,EAAE,KAAK;oBACb,6BAAK,SAAS,EAAE,UAAU,CAAC,KAAK;wBAC9B,oBAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU;4BACjD,6BAAK,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,UAAU;gCACxC,MAAO,CAAC,UAAU,IAAI,CACrB,oBAAC,oBAAoB,IACnB,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,cAAc,EAC1C,OAAO,EAAE,MAAO,CAAC,UAAU,EAC3B,iBAAiB,EAAE,MAAO,CAAC,2BAA2B,GACtD,CACH;gCACA,aAAa,CACV,CACI;wBACX,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,KAAI,CAAC,gBAAgB,CAAC,MAAO,CAAC;wBAC7D,oBAAC,SAAS,IAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,EAAE,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,YAAY;4BAC3F,6BAAK,GAAG,EAAE,KAAI,CAAC,cAAc,EAAE,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,KAAK,gBAAc,MAAO,CAAC,UAAU;gCAC9F,2BACE,EAAE,EAAE,MAAM,EACV,GAAG,EAAE,MAAM,EACX,GAAG,EAAE,UAAC,CAAc;wCAClB,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;oCACrD,CAAC;oCACD,yDAAyD;oCACzD,OAAO,EAAE;wCACP,IAAM,CAAC,GAAG,MAAO,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC;wCAChC,IAAI,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE;4CAClB,CAAC,CAAC,OAAO,EAAE,CAAC;yCACb;oCACH,CAAC,IAEA,IAAI,CACH,CACA,CACI,CACR,CACF,CACP,CAAC;YACJ,CAAC,CAAC;YACF,oBAAC,OAAO,aACN,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,WAAW,EAC9B,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,EAAE,EACZ,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,IAAI,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,EACjE,eAAe,EAAE,eAAe,CAAC,WAAW,EAC5C,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,yBAAyB,EAAE,IAAI,IAC3B,IAAI,CAAC,KAAK,CAAC,YAAa,EACxB,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC;gBAEhE,0CACG,IAAI,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC,CAAC,CAC5C,IAAI,CAAC,KAAK,CAAC,+BAA+B,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CACvE,CAAC,CAAC,CAAC,CACF,oBAAC,cAAc,IACb,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAO,EAChF,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAW,EACpF,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAC3B,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAC3B,CACH,CACA,CACK,CACN,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;IACJ,CAAC;IAEO,6CAAY,GAApB,UAAqB,OAAoB,EAAE,WAA+B;QACxE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC;IACnE,CAAC;IAEO,yCAAQ,GAAhB,UAAiB,UAAyC,EAAE,KAAsB;QAChF,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,MAAO,CAAC,IAAI,IAAI,CAAC,mBAAmB,KAAK,KAAK,EAAE;YAC/G,IAAM,qBAAqB,GAAG,IAAI,CAChC,IAAI,CAAC,SAAS,EACd,UAAC,cAA6B,IAAK,OAAA,cAAc,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,EAArC,CAAqC,CACzE,CAAC;YACF,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC;gBACZ,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,UAAU;gBACtB,SAAS,EAAE,KAAK,CAAC,KAAM;gBACvB,MAAM,EAAE,KAAK,CAAC,MAAO;gBACrB,WAAW,EAAE,qBAAsB,CAAC,UAAU;gBAC9C,aAAa,EAAE,KAAK,CAAC,gBAAiB;gBACtC,aAAa,EAAE,KAAK,CAAC,gBAAiB;gBACtC,eAAe,EAAE,KAAK;gBACtB,wBAAwB,EAAE,KAAK,CAAC,wBAAwB;aACzD,CAAC,CAAC;SACJ;IACH,CAAC;IAEO,0CAAS,GAAjB;QACE,IAAI;IACN,CAAC;IAoCO,oDAAmB,GAA3B,UAA4B,IAAiB;QACnC,IAAA,OAAO,GAAK,IAAI,CAAC,KAAK,QAAf,CAAgB;QAC/B,IAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,SAAS,CAAC;QAC5D,IAAM,SAAS,GAAoB,IAAK,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC;QACvD,IAAM,CAAC,GAAG,SAAS,CAAC,sBAAuB,CAAC,CAAC,CAAC;QAC9C,IAAM,CAAC,GAAG,SAAS,CAAC,sBAAuB,CAAC,CAAC,CAAC;QAE9C,IAAM,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,CAAC,0BAA2B,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;QACnG,QAAQ,aAAa,EAAE;YACrB,KAAK,SAAS;gBACZ,OAAO,CACL,sCAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAM,iBAAiB,GACpE,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAC9B,CACP,CAAC;YACJ,KAAK,UAAU;gBACb,OAAO,CACL,wCAAS,iBAAiB;oBACxB,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAG,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CAAQ;oBAC7F,8BAAM,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,wBAAwB,IACvD,KAAK,GAAG,qBAAqB,CAAC,CAAC,EAAE,OAAO,CAAC,CACrC,CACH,CACP,CAAC;YACJ,KAAK,YAAY;gBACf,IAAM,mBAAmB,GAAG,UAAG,qBAAqB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,EAAE,OAAO,CAAC,MAAG,CAAC;gBAC5F,OAAO,CACL,sCAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,eAAe,IAAM,iBAAiB,GACpE,mBAAmB,CAChB,CACP,CAAC;SACL;IACH,CAAC;IAEO,iDAAgB,GAAxB,UAAyB,IAAiB;QACxC,IAAM,SAAS,GAAG,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,CAAC;QAC/D,IAAM,aAAa,GAAG,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC9C,IAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,GAAG,GAAG,CAAC,CAAC;QAE3F,IAAM,eAAe,GAAG;YACtB,IAAI,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU;SAC5C,CAAC;QAEF,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,kBAAkB;YACjD,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAI,CACjE,CACP,CAAC;IACJ,CAAC;IAED;;;;;OAKG;IAEK,4CAAW,GAAnB,UAAoB,IAAiB,EAAE,OAAiB;QAAxD,iBA0GC;;QAzGC,IAAM,QAAQ,GACZ,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAC,UAAC,KAAa,EAAE,KAAsB,IAAK,OAAA,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAxC,CAAwC,EAAE,CAAC,CAAC;YAC9G,CAAC,CAAC;QACJ,IAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;QAC3E,IAAM,cAAc,GAAa,CAAC,OAAO,CAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAChH,wDAAwD;QACxD,IAAM,aAAa,GAAa,EAAE,CAAC;QACnC,IAAM,KAAK,GAAG,IAAI,CAAC,SAAU,CAAC,MAAM,CAClC,UAAC,GAAW,EAAE,KAAsB;YAClC,OAAA,GAAG,GAAG,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAA7E,CAA6E,EAC/E,CAAC,CACF,CAAC;QACF,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,IAAI,KAAK,GAAG,CAAC,CAAC;QAEd,IAAI,YAAY,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,SAAU,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;YACxD,IAAM,SAAS,GAAG,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxF,KAAK,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;YAClC,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,KAAK,GAAG,CAAC,CAAC;aACX;iBAAM,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;gBACnC,KAAK,GAAG,CAAC,CAAC;aACX;YACD,YAAY,IAAI,KAAK,CAAC;YAEtB,OAAO,YAAY,CAAC;QACtB,CAAC,CAAC,CAAC;QAEH;;;;;;;WAOG;QACH,IAAM,YAAY,GAAG,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,GAAG,kBAAkB,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAExF,IAAM,IAAI,GAAG,IAAI,CAAC,SAAU,CAAC,GAAG,CAAC,UAAC,KAAsB,EAAE,KAAa;YACrE,IAAM,KAAK,GAAW,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YACpG,IAAM,SAAS,GAAG,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxF,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,YAAY,IAAI,KAAK,CAAC;aACvB;YACD,KAAK,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC;YAClC,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,KAAK,GAAG,CAAC,CAAC;aACX;iBAAM,IAAI,KAAK,GAAG,CAAC,IAAI,KAAK,KAAK,CAAC,EAAE;gBACnC,KAAK,GAAG,CAAC,GAAG,YAAY,CAAC;aAC1B;iBAAM;gBACL,KAAK,GAAG,KAAK,GAAG,YAAY,CAAC;aAC9B;YACD,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAEjC,IAAM,MAAM,GAAG,KAAK,CAAC,sBAAuB,CAAC,CAAC,CAAC;YAC/C,IAAM,gBAAgB,GAAG,CAAC,CAAC;YAE3B,yEAAyE;YACzE,IAAI,KAAK,KAAK,gBAAgB,IAAI,KAAI,CAAC,KAAK,CAAC,OAAO,KAAK,yBAAyB,CAAC,aAAa,EAAE;gBAChG,IAAI,KAAI,CAAC,KAAK,CAAC,UAAU,EAAE;oBACzB,OAAO,8BAAM,GAAG,EAAE,KAAK,GAAI,CAAC;iBAC7B;gBAED,IAAM,QAAQ,GAAG,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,CAAC,sBAAuB,CAAC,CAAC,CAAC;gBAE9D,OAAO,CACL,8BACE,GAAG,EAAE,KAAK,EACV,CAAC,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,MAAG,EACxE,CAAC,EAAE,KAAI,CAAC,UAAU,GAAG,CAAC,EACtB,gBAAgB,EAAC,SAAS,EAC1B,SAAS,EAAE,oBAAa,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAG,EAC/C,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,QAAQ,iBACvB,IAAI,IAEhB,cAAc,CAAC,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAC9D,CACR,CAAC;aACH;YAED,OAAO,CACL,8BACE,GAAG,EAAE,KAAK,EACV,CAAC,EAAE,UACD,KAAI,CAAC,MAAM;oBACT,CAAC,CAAC,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,mBAAmB;oBAC7E,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,mBAAmB,MAChE,EACH,CAAC,EAAE,CAAC,uBACe,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACrD,KAAK,EAAE,KAAK,GAAG,GAAG,EAClB,MAAM,EAAE,KAAI,CAAC,UAAU,EACvB,IAAI,EAAE,KAAK,EACX,WAAW,EAAE,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EACtF,OAAO,EAAE,KAAK,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,KAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAI,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAClF,IAAI,EAAC,KAAK,gBACE,KAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EACrC,MAAM,EAAE,KAAI,CAAC,SAAS,EACtB,YAAY,EAAE,KAAI,CAAC,SAAS,EAC5B,SAAS,EAAE,KAAI,CAAC,WAAW,CAAC,UAAU,GACtC,CACH,CAAC;QACJ,CAAC,CAAC,CAAC;QACH,OAAO,IAAI,CAAC;IACd,CAAC;IAgBO,8CAAa,GAArB;QACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC1D,CAAC;IACH,6BAAC;AAAD,CAAC,AA9YD,CAA4C,KAAK,CAAC,SAAS,GA8Y1D","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 { ChartHoverCard, convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { formatPrefix as d3FormatPrefix } from 'd3-format';\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 // eslint-disable-next-line react/no-unused-state\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 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);\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 this.setState({\n isCalloutVisible: true,\n hoverValue: hoverValue,\n lineColor: point.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): 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 const color: string = point.color ? point.color : defaultPalette[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\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 {d3FormatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)}\n </text>\n );\n }\n\n return (\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 data-is-focusable={point.legend !== '' ? true : false}\n width={value + '%'}\n height={this._barHeight}\n fill={color}\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 );\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 yValue =\n point.yAxisCalloutData \|\|\n (point.horizontalBarChartdata ? `${point.horizontalBarChartdata.x}/${point.horizontalBarChartdata.y}` : 0);\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0);\n }\n}\n"]}

package/lib/components/HorizontalBarChart/HorizontalBarChart.styles.js CHANGED Viewed

@@ -22,10 +22,7 @@ export var getHorizontalBarChartStyles = function (props) {
             display: 'block',
             overflow: 'visible',
         },
-        barWrapper: {
-            stroke: theme.palette.white,
-            strokeWidth: 2,
-        },
+        barWrapper: {},
         chartTitle: __assign(__assign({}, theme.fonts.small), { display: 'flex', justifyContent: 'space-between' }),
         chartTitleLeft: {
             textOverflow: 'ellipsis',

package/lib/components/HorizontalBarChart/HorizontalBarChart.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HorizontalBarChart.styles.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EACL,yBAAyB,GAG1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAC,KAAoC;IACtE,IAAA,SAAS,GAAiE,KAAK,UAAtE,EAAE,KAAK,GAA0D,KAAK,MAA/D,EAAE,KAAK,GAAmD,KAAK,MAAxD,EAAE,SAAS,GAAwC,KAAK,UAA7C,EAAE,YAAY,GAA0B,KAAK,aAA/B,EAAE,OAAO,GAAiB,KAAK,QAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;IAChF,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;IAE3B,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,YAAY,EAAE,YAAY,IAAI,OAAO,KAAK,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACpG;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAClC,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,SAAS;SACpB;QACD,UAAU,EAAE~~;YACV~~,~~MAAM,~~EAAE~~,KAAK,CAAC,OAAO,CAAC,KAAK~~;~~YAC3B~~,~~WAAW,EAAE,CAAC;SACf;QACD,~~UAAU,wBACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,GAChC;QACD,cAAc,EAAE;YACd,YAAY,EAAE,UAAU;YACxB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YACnC,YAAY,EAAE,OAAO,KAAK,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;SAClF;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,wBAAwB,EAAE;YACxB,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,kBAAkB,EAAE;YAClB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,MAAM;YACjB,YAAY,EAAE,MAAM;SACrB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,UAAU,EAAE,uBAAuB;YACnC,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,WAAW;YACtB,cAAc,EAAE,OAAO,CAAC,IAAI;YAC5B,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;SACrB;QACD,QAAQ,wBACH,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,WAAW,CAAC,QAAQ,EAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,GACnC;QACD,YAAY,EAAE;YACZ,YAAY,EAAE,OAAO,KAAK,yBAAyB,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAC1F;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport {\n HorizontalBarChartVariant,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n} from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n const { className, theme, width, barHeight, showTriangle, variant, hideLabels } = props;\n const { palette } = theme!;\n\n return {\n root: [\n {\n display: 'flex',\n flexDirection: 'column',\n width: width ? width : '100%',\n },\n className,\n ],\n items: {\n marginBottom: showTriangle \|\| variant === HorizontalBarChartVariant.AbsoluteScale ? '16px' : '10px',\n },\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n overflow: 'visible',\n },\n barWrapper: {~~\n stroke: theme.palette.white,\n strokeWidth: 2,\n~~ },\n chartTitle: {\n ...theme.fonts.small,\n display: 'flex',\n justifyContent: 'space-between',\n },\n chartTitleLeft: {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\n color: theme.palette.neutralPrimary,\n marginBottom: variant === HorizontalBarChartVariant.AbsoluteScale ? '4px' : '5px',\n },\n chartTitleRight: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n chartDataTextDenominator: {\n fontSize: FontSizes.medium,\n color: theme.palette.neutralPrimary,\n },\n benchmarkContainer: {\n position: 'relative',\n height: '7px',\n marginTop: '-3px',\n marginBottom: '-1px',\n },\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: palette.blue,\n marginBottom: '4px',\n position: 'absolute',\n },\n barLabel: {\n ...theme.fonts.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n chartWrapper: {\n paddingRight: variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,\n },\n };\n};\n"]}
1	+ {"version":3,"file":"HorizontalBarChart.styles.js","sourceRoot":"../src/","sources":["components/HorizontalBarChart/HorizontalBarChart.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EACL,yBAAyB,GAG1B,MAAM,4BAA4B,CAAC;AAEpC,MAAM,CAAC,IAAM,2BAA2B,GAAG,UAAC,KAAoC;IACtE,IAAA,SAAS,GAAiE,KAAK,UAAtE,EAAE,KAAK,GAA0D,KAAK,MAA/D,EAAE,KAAK,GAAmD,KAAK,MAAxD,EAAE,SAAS,GAAwC,KAAK,UAA7C,EAAE,YAAY,GAA0B,KAAK,aAA/B,EAAE,OAAO,GAAiB,KAAK,QAAtB,EAAE,UAAU,GAAK,KAAK,WAAV,CAAW;IAChF,IAAA,OAAO,GAAK,KAAM,QAAX,CAAY;IAE3B,OAAO;QACL,IAAI,EAAE;YACJ;gBACE,OAAO,EAAE,MAAM;gBACf,aAAa,EAAE,QAAQ;gBACvB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;aAC9B;YACD,SAAS;SACV;QACD,KAAK,EAAE;YACL,YAAY,EAAE,YAAY,IAAI,OAAO,KAAK,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;SACpG;QACD,KAAK,EAAE;YACL,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAClC,OAAO,EAAE,OAAO;YAChB,QAAQ,EAAE,SAAS;SACpB;QACD,UAAU,EAAE,EAAE;QACd,UAAU,wBACL,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,OAAO,EAAE,MAAM,EACf,cAAc,EAAE,eAAe,GAChC;QACD,cAAc,EAAE;YACd,YAAY,EAAE,UAAU;YACxB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,QAAQ;YACpB,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;YACnC,YAAY,EAAE,OAAO,KAAK,yBAAyB,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;SAClF;QACD,eAAe,EAAE;YACf,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,wBAAwB,EAAE;YACxB,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC1B,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACpC;QACD,kBAAkB,EAAE;YAClB,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,MAAM;YACjB,YAAY,EAAE,MAAM;SACrB;QACD,QAAQ,EAAE;YACR,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;YACX,UAAU,EAAE,uBAAuB;YACnC,WAAW,EAAE,uBAAuB;YACpC,SAAS,EAAE,WAAW;YACtB,cAAc,EAAE,OAAO,CAAC,IAAI;YAC5B,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,UAAU;SACrB;QACD,QAAQ,wBACH,KAAK,CAAC,KAAK,CAAC,KAAK,KACpB,UAAU,EAAE,WAAW,CAAC,QAAQ,EAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc,GACnC;QACD,YAAY,EAAE;YACZ,YAAY,EAAE,OAAO,KAAK,yBAAyB,CAAC,aAAa,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;SAC1F;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\nimport {\n HorizontalBarChartVariant,\n IHorizontalBarChartStyleProps,\n IHorizontalBarChartStyles,\n} from './HorizontalBarChart.types';\n\nexport const getHorizontalBarChartStyles = (props: IHorizontalBarChartStyleProps): IHorizontalBarChartStyles => {\n const { className, theme, width, barHeight, showTriangle, variant, hideLabels } = props;\n const { palette } = theme!;\n\n return {\n root: [\n {\n display: 'flex',\n flexDirection: 'column',\n width: width ? width : '100%',\n },\n className,\n ],\n items: {\n marginBottom: showTriangle \|\| variant === HorizontalBarChartVariant.AbsoluteScale ? '16px' : '10px',\n },\n chart: {\n width: '100%',\n height: barHeight ? barHeight : 12,\n display: 'block',\n overflow: 'visible',\n },\n barWrapper: {},\n chartTitle: {\n ...theme.fonts.small,\n display: 'flex',\n justifyContent: 'space-between',\n },\n chartTitleLeft: {\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n display: 'block',\n color: theme.palette.neutralPrimary,\n marginBottom: variant === HorizontalBarChartVariant.AbsoluteScale ? '4px' : '5px',\n },\n chartTitleRight: {\n fontSize: FontSizes.medium,\n fontWeight: FontWeights.semibold,\n color: theme.palette.neutralPrimary,\n },\n chartDataTextDenominator: {\n fontSize: FontSizes.medium,\n color: theme.palette.neutralPrimary,\n },\n benchmarkContainer: {\n position: 'relative',\n height: '7px',\n marginTop: '-3px',\n marginBottom: '-1px',\n },\n triangle: {\n width: '0',\n height: '0',\n borderLeft: '4px solid transparent',\n borderRight: '4px solid transparent',\n borderTop: '7px solid',\n borderTopColor: palette.blue,\n marginBottom: '4px',\n position: 'absolute',\n },\n barLabel: {\n ...theme.fonts.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n chartWrapper: {\n paddingRight: variant === HorizontalBarChartVariant.AbsoluteScale && !hideLabels ? 40 : 0,\n },\n };\n};\n"]}

package/lib/components/PieChart/Arc/Arc.d.ts CHANGED Viewed

@@ -1,12 +1,17 @@
 import * as React from 'react';
-import { IArcProps } from './Arc.types';
-export declare class Arc extends React.Component<IArcProps, {}> {
+import { IArcProps, IArcState } from './Arc.types';
+export declare class Arc extends React.Component<IArcProps, IArcState> {
     static defaultProps: Partial<IArcProps>;
-    state: {};
+    protected _arcId: string;
     static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null;
+    constructor(props: IArcProps);
     updateChart: (newProps: IArcProps) => void;
     render(): JSX.Element;
+    protected _onFocus: () => void;
+    protected _onBlur: () => void;
 }
 export declare class LabeledArc extends Arc {
+    private _isRTL;
+    constructor(props: IArcProps);
     render(): JSX.Element;
 }

package/lib/components/PieChart/Arc/Arc.js CHANGED Viewed

@@ -1,17 +1,27 @@
-import { __extends } from "tslib";
+import { __assign, __extends } from "tslib";
 import * as React from 'react';
 import * as shape from 'd3-shape';
-import { classNamesFunction } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
 import { getStyles } from './Arc.styles';
-import { convertToLocaleString } from '../../../utilities/utilities';
+import { wrapContent, convertToLocaleString } from '../../../utilities/utilities';
+import { SVGTooltipText } from '../../../utilities/SVGTooltipText';
 var Arc = /** @class */ (function (_super) {
     __extends(Arc, _super);
-    function Arc() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {};
+    function Arc(props) {
+        var _this = _super.call(this, props) || this;
         _this.updateChart = function (newProps) {
             _updateChart(newProps);
         };
+        _this._onFocus = function () {
+            _this.setState({ isArcFocused: true });
+        };
+        _this._onBlur = function () {
+            _this.setState({ isArcFocused: false });
+        };
+        _this.state = {
+            isArcFocused: false,
+        };
+        _this._arcId = getId('piechart_arc');
         return _this;
     }
     Arc.getDerivedStateFromProps = function (nextProps) {
@@ -19,11 +29,12 @@ var Arc = /** @class */ (function (_super) {
         return null;
     };
     Arc.prototype.render = function () {
+        var _this = this;
         var _a;
-        var _b = this.props, color = _b.color, arc = _b.arc;
+        var arc = this.props.arc;
         var getClassNames = classNamesFunction();
-        var classNames = getClassNames(getStyles, { color: color });
-        return React.createElement("path", { d: arc(this.props.data), className: classNames.root, onClick: (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick });
+        var classNames = getClassNames(function (props) { return getStyles(props, _this.props.theme); }, __assign({}, this.props));
+        return (React.createElement("path", { d: arc(this.props.data), className: "".concat(this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot), onClick: (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick }));
     };
     Arc.defaultProps = {
         arc: shape.arc(),
@@ -33,19 +44,39 @@ var Arc = /** @class */ (function (_super) {
 export { Arc };
 var LabeledArc = /** @class */ (function (_super) {
     __extends(LabeledArc, _super);
-    function LabeledArc() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    function LabeledArc(props) {
+        var _this = _super.call(this, props) || this;
+        _this._isRTL = getRTL();
+        _this._arcId = getId('piechart_arc');
+        return _this;
     }
     LabeledArc.prototype.render = function () {
-        var _a = this.props, data = _a.data, arc = _a.arc, culture = _a.culture;
-        var _b = arc.centroid(data), labelX = _b[0], labelY = _b[1];
-        var labelTranslate = "translate(".concat(labelX, ", ").concat(labelY, ")");
-        return (React.createElement("g", { className: "arc" },
+        var _this = this;
+        var _a, _b;
+        var _c = this.props, data = _c.data, culture = _c.culture;
+        var gap = 4;
+        // placing the labels on the outside arc
+        var _d = shape.arc().centroid({
+            endAngle: (data === null || data === void 0 ? void 0 : data.endAngle) || 0,
+            startAngle: (data === null || data === void 0 ? void 0 : data.startAngle) || 0,
+            padAngle: data === null || data === void 0 ? void 0 : data.padAngle,
+            innerRadius: ((_a = this.props) === null || _a === void 0 ? void 0 : _a.outerRadius) || 0,
+            outerRadius: ((_b = this.props) === null || _b === void 0 ? void 0 : _b.outerRadius) || 0 + gap,
+        }), labelX = _d[0], labelY = _d[1];
+        var getClassNames = classNamesFunction();
+        var classNames = getClassNames(function (props) { return getStyles(props, _this.props.theme); });
+        var angle = (((data === null || data === void 0 ? void 0 : data.startAngle) || 0) + ((data === null || data === void 0 ? void 0 : data.endAngle) || 0)) / 2;
+        var content = "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat(convertToLocaleString(data === null || data === void 0 ? void 0 : data.data.y, culture));
+        return (React.createElement("g", { className: "".concat(classNames.arc, " arc"), "data-is-focusable": true, id: this._arcId, onFocus: this._onFocus, onBlur: this._onBlur, "aria-label": content, role: "img" },
             _super.prototype.render.call(this),
-            React.createElement("text", { transform: labelTranslate, textAnchor: "middle" },
-                data.data.x,
-                "-",
-                convertToLocaleString(data.data.y, culture))));
+            React.createElement(SVGTooltipText, { content: content, textProps: {
+                    x: labelX,
+                    y: labelY,
+                    dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',
+                    textAnchor: (!this._isRTL && angle > Math.PI) || (this._isRTL && angle < Math.PI) ? 'end' : 'start',
+                    'aria-label': "".concat(data === null || data === void 0 ? void 0 : data.data.x, "-").concat(convertToLocaleString(data === null || data === void 0 ? void 0 : data.data.y, culture)),
+                    className: classNames.arcText,
+                }, isTooltipVisibleProp: this.state.isArcFocused, shouldReceiveFocus: false, maxWidth: 40, wrapContent: wrapContent })));
     };
     return LabeledArc;
 }(Arc));

package/lib/components/PieChart/Arc/Arc.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;~~AACnE~~,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;~~AAErE~~;IAAyB,~~uBAA8B~~;~~IAAvD;QAAA~~,~~qEAsBC~~;~~QAjBQ~~,~~WAAK~~,~~GAAO~~,~~EAAE~~,CAAC;~~QAOf~~,iBAAW,GAAG,UAAC,QAAmB;YACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;;~~IAQJ~~,CAAC;~~IAfe~~,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;~~IAMM~~,oBAAM,GAAb;;~~QACQ~~,IAAA,~~KAAiB~~,IAAI,CAAC,KAAK,~~EAAzB~~,~~KAAK,WAAA,EAAE,GAAG,SAAe,CAAC~~;~~QAClC~~,IAAM,aAAa,GAAG,kBAAkB,EAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,SAAS,~~EAAE~~,EAAE,KAAK,~~OAAA~~,~~EAAE~~,CAAC,CAAC;~~QACvD~~,OAAO,~~8BAAM~~,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,~~EAAE~~,SAAS,EAAE,UAAU,CAAC,~~IAAI~~,~~EAAE~~,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,~~GAAI~~,CAAC;~~IAC/G~~,CAAC;~~IApBa~~,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;KACjB,CAAC;~~IAmBJ~~,UAAC;CAAA,~~AAtBD~~,CAAyB,KAAK,CAAC,SAAS,~~GAsBvC~~;~~SAtBY~~,GAAG;~~AAwBhB~~;IAAgC,8BAAG;~~IAAnC~~;;~~IAeA~~,CAAC;~~IAdQ~~,2BAAM,GAAb;~~QACQ~~,IAAA,~~KAAyB~~,IAAI,CAAC,KAAK,~~EAAjC~~,IAAI,UAAA,EAAE,~~GAAG~~,~~SAAA~~,~~EAAE~~,~~OAAO~~,~~aAAe~~,CAAC;~~QACpC~~,IAAA,KAAmB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,~~EAApC~~,MAAM,QAAA,EAAE,MAAM,~~QAAsB~~,CAAC;~~QAC5C~~,IAAM,~~cAAc~~,GAAG,~~oBAAa~~,~~MAAM~~,~~eAAK~~,~~MAAM~~,~~MAAG~~,CAAC;~~QAEzD~~,OAAO,CACL,~~2BAAG~~,SAAS,EAAC,KAAK;~~YACf~~,iBAAM,MAAM,WAAE;YACf,~~8BAAM~~,SAAS,EAAE,~~cAAc~~,EAAE,~~UAAU~~,~~EAAC~~,~~QAAQ~~;~~gBACjD~~,~~IAAK~~,CAAC,~~IAAK~~,CAAC,CAAC~~;;gBAAG~~,~~qBAAqB~~,CAAC,~~IAAK~~,CAAC,~~IAAK~~,CAAC,CAAC,EAAE,OAAO,CAAC,~~CACzD~~,~~CACL~~,CACL,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,~~AAfD~~,CAAgC,GAAG,~~GAelC~~;;AAED,SAAS,YAAY,CAAC,QAAmB;IACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IArcProps, IArcStyles } from './Arc.types';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { convertToLocaleString } from '../../../utilities/utilities';\n\nexport class Arc extends React.Component<IArcProps, {}> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n ~~public~~ ~~state~~: ~~{} = {}~~;\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart = (newProps: IArcProps) => {\n _updateChart(newProps);\n };\n\n public render(): JSX.Element {\n const { ~~color,~~ arc } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, { ~~color~~ });\n return <path d={arc(this.props.data)} className={classNames.~~root~~} onClick={this.props.data?.data.onClick} ~~/>;\~~n }\n}\n\nexport class LabeledArc extends Arc {\n public render(): JSX.Element {\n const { data, ~~arc,~~ culture } = this.props;\n const [labelX, labelY] = arc.centroid(data);\n const ~~labelTranslate~~ = ~~`translate~~(${~~labelX~~}, ~~${labelY~~})`;\n\n return (\n <g ~~className~~=\"~~arc~~\">\n {super.render()}\n <~~text transform~~={~~labelTranslate~~} ~~textAnchor=\"middle~~\~~">\~~n {data!.data!.x}-{convertToLocaleString(data!.data!.y, culture)}\n ~~</text>\~~n </g>\n );\n }\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}
1	+ {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IArcProps, IArcState, IArcStyles } from './Arc.types';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { wrapContent, convertToLocaleString } from '../../../utilities/utilities';\nimport { SVGTooltipText } from '../../../utilities/SVGTooltipText';\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n protected _arcId: string;\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n _updateChart(nextProps);\n return null;\n }\n\n public constructor(props: IArcProps) {\n super(props);\n this.state = {\n isArcFocused: false,\n };\n\n this._arcId = getId('piechart_arc');\n }\n\n public updateChart = (newProps: IArcProps) => {\n _updateChart(newProps);\n };\n\n public render(): JSX.Element {\n const { arc } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(props => getStyles(props, this.props.theme), { ...this.props });\n\n return (\n <path\n d={arc(this.props.data)}\n className={`${this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot}`}\n onClick={this.props.data?.data.onClick}\n />\n );\n }\n\n protected _onFocus = () => {\n this.setState({ isArcFocused: true });\n };\n\n protected _onBlur = () => {\n this.setState({ isArcFocused: false });\n };\n}\n\nexport class LabeledArc extends Arc {\n private _isRTL = getRTL();\n\n public constructor(props: IArcProps) {\n super(props);\n this._arcId = getId('piechart_arc');\n }\n\n public render(): JSX.Element {\n const { data, culture } = this.props;\n const gap = 4;\n // placing the labels on the outside arc\n const [labelX, labelY] = shape.arc().centroid({\n endAngle: data?.endAngle \|\| 0,\n startAngle: data?.startAngle \|\| 0,\n padAngle: data?.padAngle,\n innerRadius: this.props?.outerRadius \|\| 0,\n outerRadius: this.props?.outerRadius \|\| 0 + gap,\n });\n\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(props => getStyles(props, this.props.theme));\n\n const angle = ((data?.startAngle \|\| 0) + (data?.endAngle \|\| 0)) / 2;\n\n const content = `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`;\n\n return (\n <g\n className={`${classNames.arc} arc`}\n data-is-focusable={true}\n id={this._arcId}\n onFocus={this._onFocus}\n onBlur={this._onBlur}\n aria-label={content}\n role=\"img\"\n >\n {super.render()}\n <SVGTooltipText\n content={content}\n textProps={{\n x: labelX,\n y: labelY,\n dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',\n textAnchor: (!this._isRTL && angle > Math.PI) \|\| (this._isRTL && angle < Math.PI) ? 'end' : 'start',\n 'aria-label': `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`,\n className: classNames.arcText,\n }}\n isTooltipVisibleProp={this.state.isArcFocused}\n shouldReceiveFocus={false}\n maxWidth={40}\n wrapContent={wrapContent}\n />\n </g>\n );\n }\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}

package/lib/components/PieChart/Arc/Arc.styles.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 import { IArcProps, IArcStyles } from './Arc.types';
-export declare const getStyles: (props: IArcProps) => IArcStyles;
+import { ITheme } from '@fluentui/react/lib/Styling';
+export declare const getStyles: (props: IArcProps, theme: ITheme | undefined) => IArcStyles;

package/lib/components/PieChart/Arc/Arc.styles.js CHANGED Viewed

@@ -1,8 +1,11 @@
 import { DefaultPalette } from '@fluentui/react/lib/Styling';
-export var getStyles = function (props) {
+export var getStyles = function (props, theme) {
     var color = props.color;
     return {
-        root: { fill: color, stroke: DefaultPalette.white, strokeWidth: 2 },
+        arcRoot: { fill: color },
+        arcRootFocussed: { fill: color, stroke: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || DefaultPalette.black, strokeWidth: 2 },
+        arc: { outline: 'none' },
+        arcText: { fill: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || DefaultPalette.black, outline: 'none' },
     };
 };
 //# sourceMappingURL=Arc.styles.js.map

package/lib/components/PieChart/Arc/Arc.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,~~EAAE~~,MAAM,6BAA6B,CAAC;~~AAC7D~~,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAgB;~~IAChC~~,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IACxB,OAAO;QACL,IAAI,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;~~KACpE~~,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette } from '@fluentui/react/lib/Styling';\nexport const getStyles = (props: IArcProps): IArcStyles => {\n const { color } = props;\n return {\n ~~root~~: { fill: color, stroke: DefaultPalette.~~white~~, strokeWidth: 2 },\n };\n};\n"]}
1	+ {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAU,MAAM,6BAA6B,CAAC;AACrE,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAgB,EAAE,KAAyB;IAC3D,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IACxB,OAAO;QACL,OAAO,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;QACxB,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,cAAc,CAAC,KAAK,EAAE,WAAW,EAAE,CAAC,EAAE;QACtG,GAAG,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QACxB,OAAO,EAAE,EAAE,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,KAAI,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE;KACjF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, ITheme } from '@fluentui/react/lib/Styling';\nexport const getStyles = (props: IArcProps, theme: ITheme \| undefined): IArcStyles => {\n const { color } = props;\n return {\n arcRoot: { fill: color },\n arcRootFocussed: { fill: color, stroke: theme?.palette.black \|\| DefaultPalette.black, strokeWidth: 2 },\n arc: { outline: 'none' },\n arcText: { fill: theme?.palette.black \|\| DefaultPalette.black, outline: 'none' },\n };\n};\n"]}

package/lib/components/PieChart/Arc/Arc.types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { IStyle } from '@fluentui/react/lib/Styling';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IDataPoint } from '../PieChart.types';
 export interface IArcProps {
     /**
@@ -25,6 +25,16 @@ export interface IArcProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    /**
+     * to pass the theme
+     */
+    theme?: ITheme;
+}
+export interface IArcState {
+    /**
+     * The state controls, whether the arc needs to be focused or not
+     */
+    isArcFocused?: boolean;
 }
 export interface IArcData {
     /**
@@ -56,5 +66,8 @@ export interface IArcStyles {
     /**
      * Style set for the card header component root
      */
-    root: IStyle;
+    arcRoot: IStyle;
+    arc: IStyle;
+    arcRootFocussed: IStyle;
+    arcText: IStyle;
 }