npm - @fluentui/react-charting - Versions diffs - 5.14.36 → 5.14.38 - Mend

@fluentui/react-charting 5.14.36 → 5.14.38

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 (121) hide show

package/lib-commonjs/components/DonutChart/DonutChart.base.js CHANGED Viewed

@@ -62,8 +62,8 @@ var DonutChartBase = /** @class */ (function (_super) {
             showHover: false,
             value: '',
             legend: '',
-            _width: _this.props.width || 200,
-            _height: _this.props.height || 200,
+            _width: _this.props.width || 160,
+            _height: _this.props.height || 160,
             activeLegend: '',
             color: '',
             xCalloutValue: '',
@@ -79,11 +79,16 @@ var DonutChartBase = /** @class */ (function (_super) {
         return _this;
     }
     DonutChartBase.getDerivedStateFromProps = function (nextProps, prevState) {
-        if (nextProps.height && nextProps.height !== prevState._height && nextProps.width !== prevState._width) {
+        var widthState;
+        if (nextProps.width && nextProps.width !== prevState._width) {
+            widthState = { _width: nextProps.width };
+        }
+        var heightState;
+        if (nextProps.height && nextProps.height !== prevState._height) {
             var reducedHeight = nextProps.height / 5;
-            return { _width: nextProps.width, _height: nextProps.height - reducedHeight };
+            heightState = { _height: nextProps.height - reducedHeight };
         }
-        return null;
+        return tslib_1.__assign(tslib_1.__assign({}, widthState), heightState);
     };
     DonutChartBase.prototype.componentDidMount = function () {
         /* 80% Height to the Chart
@@ -100,10 +105,15 @@ var DonutChartBase = /** @class */ (function (_super) {
         var _a;
         var _b = this.props, data = _b.data, _c = _b.hideLegend, hideLegend = _c === void 0 ? false : _c;
         var palette = this.props.theme.palette;
+        /**
+         * Resize SVG box to prevent overflow of arc labels
+         */
+        var adjustedWidth = Math.min(this._rootElem ? this._rootElem.offsetWidth : Infinity, this.state._width + 80);
+        var adjustedHeight = this.state._height + 40;
         this._classNames = getClassNames(this.props.styles, {
             theme: this.props.theme,
-            width: this.state._width,
-            height: this.state._height,
+            width: adjustedWidth,
+            height: adjustedHeight,
             color: this.state.color,
             className: this.props.className,
         });
@@ -115,7 +125,7 @@ var DonutChartBase = /** @class */ (function (_super) {
             React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, handleTabKey: react_focus_1.FocusZoneTabbableElements.all },
                 React.createElement("div", null,
                     React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle, ref: function (node) { return _this._setViewBox(node); } },
-                        React.createElement(index_2.Pie, { width: this.state._width, height: this.state._height, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme })))),
+                        React.createElement(index_2.Pie, { width: adjustedWidth, height: adjustedHeight, outerRadius: outerRadius, innerRadius: this.props.innerRadius, data: chartData, onFocusCallback: this._focusCallback, hoverOnCallback: this._hoverCallback, hoverLeaveCallback: this._hoverLeave, uniqText: this._uniqText, onBlurCallback: this._onBlur, activeArc: this._getHighlightedLegend(), focusedArcId: this.state.focusedArcId || '', href: this.props.href, calloutId: this._calloutId, valueInsideDonut: this._toLocaleString(valueInsideDonut), theme: this.props.theme, showLabelsInPercent: this.props.showLabelsInPercent, hideLabels: this.props.hideLabels })))),
             React.createElement(Callout_1.Callout, tslib_1.__assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: Callout_1.DirectionalHint.topAutoEdge, gapSpace: 15, hidden: !(!this.props.hideTooltip && this.state.showHover), id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true,
                 /** Keep the callout updated with details of focused/hovered arc */
                 shouldUpdateWhenHidden: true }, this.props.calloutProps, index_3.getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(index_1.ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value, color: this.state.color, culture: this.props.culture }))),

package/lib-commonjs/components/DonutChart/DonutChart.base.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport * as scale from 'd3-scale';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IChartProps, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string \| undefined;\n legend?: string \| undefined;\n _width?: number \| undefined;\n _height?: number \| undefined;\n activeLegend?: string;\n color?: string \| undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n selectedLegend: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n };\n public _colors: scale.ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement \| null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any /\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> \| null {\n if (nextProps.height && nextProps.height !== prevState._height && nextProps.width !== prevState._width) {\n const reducedHeight = nextProps.height / 5;\n return { _width: nextProps.width, _height: nextProps.height - reducedHeight };\n }\n return null;\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width \|\| 200,\n _height: this.props.height \|\| 200,\n activeLegend: '',\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n selectedLegend: '',\n focusedArcId: '',\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n }\n public componentDidMount(): void {\n / 80% Height to the Chart\n 20% Height to the Legends\n /\n const reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;\n this.setState({\n _width: (this._rootElem && this._rootElem!.offsetWidth)!,\n _height: (this._rootElem && this._rootElem!.offsetHeight - reducedHeight!)!,\n });\n }\n\n public render(): JSX.Element {\n const { data, hideLegend = false } = this.props;\n const { palette } = this.props.theme!;\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: this.state._width!,\n height: this.state._height!,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(data!, palette);\n const outerRadius = Math.min(this.state._width!, this.state._height!) / 2;\n const chartData = data && data.chartData?.filter((d: IChartDataPoint) => d.data! > 0);\n const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n return (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement \| null) => (this._rootElem = rootElem)}\n onMouseLeave={this._handleChartMouseLeave}\n >\n <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>\n <div>\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement \| null) => this._setViewBox(node)}\n >\n <Pie\n width={this.state._width!}\n height={this.state._height!}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId \|\| ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n />\n </svg>\n </div>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /* Keep the callout updated with details of focused/hovered arc /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\n </div>\n );\n }\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _setViewBox(node: SVGElement \| null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n private _createLegends(data: IChartProps, palette: IPalette): JSX.Element {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const legendDataItems =\n data &&\n data!.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() 4 + 1)];\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action: () => {\n if (this.state.selectedLegend === point.legend) {\n this.setState({ selectedLegend: '' });\n } else {\n this.setState({ selectedLegend: point.legend! });\n }\n },\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: '' });\n },\n };\n return legend;\n });\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n />\n );\n return legends;\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused /\n showHover: this.state.selectedLegend === '' \|\| this.state.selectedLegend === data.legend,\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n this.setState({\n /* Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered /\n showHover: this.state.selectedLegend === '' \|\| this.state.selectedLegend === data.legend,\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: IChartDataPoint[]) {\n const highlightedLegend = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && highlightedLegend !== '' && !this.state.showHover) {\n let legendValue = valueInsideDonut;\n data!.map((point: IChartDataPoint, index: number) => {\n if (point.legend === highlightedLegend) {\n legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n }\n return;\n });\n return legendValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string \| number \| undefined) {\n const localeString = convertToLocaleString(data, this.props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n * Note: This won't work in case of multiple legends selection.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegend \|\| this.state.activeLegend;\n }\n}\n"]}
1	+ {"version":3,"file":"DonutChart.base.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport * as scale from 'd3-scale';\nimport { IProcessedStyleSet, IPalette } from '@fluentui/react/lib/Styling';\nimport { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '@fluentui/react-focus';\nimport { IAccessibilityProps, ChartHoverCard, ILegend, Legends } from '../../index';\nimport { Pie } from './Pie/index';\nimport { IChartDataPoint, IChartProps, IDonutChartProps, IDonutChartStyleProps, IDonutChartStyles } from './index';\nimport { convertToLocaleString, getAccessibleDataObject } from '../../utilities/index';\nconst getClassNames = classNamesFunction<IDonutChartStyleProps, IDonutChartStyles>();\n\nexport interface IDonutChartState {\n showHover?: boolean;\n value?: string \| undefined;\n legend?: string \| undefined;\n _width?: number \| undefined;\n _height?: number \| undefined;\n activeLegend?: string;\n color?: string \| undefined;\n xCalloutValue?: string;\n yCalloutValue?: string;\n focusedArcId?: string;\n selectedLegend: string;\n dataPointCalloutProps?: IChartDataPoint;\n callOutAccessibilityData?: IAccessibilityProps;\n}\n\nexport class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {\n public static defaultProps: Partial<IDonutChartProps> = {\n innerRadius: 0,\n };\n public _colors: scale.ScaleOrdinal<string, {}>;\n private _classNames: IProcessedStyleSet<IDonutChartStyles>;\n private _rootElem: HTMLElement \| null;\n private _uniqText: string;\n /* eslint-disable @typescript-eslint/no-explicit-any /\n private _currentHoverElement: any;\n private _calloutId: string;\n private _calloutAnchorPoint: IChartDataPoint \| null;\n\n public static getDerivedStateFromProps(\n nextProps: Readonly<IDonutChartProps>,\n prevState: Readonly<IDonutChartState>,\n ): Partial<IDonutChartState> \| null {\n let widthState: { _width: number } \| undefined;\n if (nextProps.width && nextProps.width !== prevState._width) {\n widthState = { _width: nextProps.width };\n }\n\n let heightState: { _height: number } \| undefined;\n if (nextProps.height && nextProps.height !== prevState._height) {\n const reducedHeight = nextProps.height / 5;\n heightState = { _height: nextProps.height - reducedHeight };\n }\n\n return { ...widthState, ...heightState };\n }\n\n constructor(props: IDonutChartProps) {\n super(props);\n this.state = {\n showHover: false,\n value: '',\n legend: '',\n _width: this.props.width \|\| 160,\n _height: this.props.height \|\| 160,\n activeLegend: '',\n color: '',\n xCalloutValue: '',\n yCalloutValue: '',\n selectedLegend: '',\n focusedArcId: '',\n };\n this._hoverCallback = this._hoverCallback.bind(this);\n this._focusCallback = this._focusCallback.bind(this);\n this._hoverLeave = this._hoverLeave.bind(this);\n this._calloutId = getId('callout');\n this._uniqText = getId('_Pie_');\n }\n public componentDidMount(): void {\n / 80% Height to the Chart\n 20% Height to the Legends\n /\n const reducedHeight = this._rootElem && this._rootElem.offsetHeight / 5;\n this.setState({\n _width: (this._rootElem && this._rootElem!.offsetWidth)!,\n _height: (this._rootElem && this._rootElem!.offsetHeight - reducedHeight!)!,\n });\n }\n\n public render(): JSX.Element {\n const { data, hideLegend = false } = this.props;\n const { palette } = this.props.theme!;\n\n /\n Resize SVG box to prevent overflow of arc labels\n /\n const adjustedWidth = Math.min(this._rootElem ? this._rootElem.offsetWidth : Infinity, this.state._width! + 80);\n const adjustedHeight = this.state._height! + 40;\n\n this._classNames = getClassNames(this.props.styles!, {\n theme: this.props.theme!,\n width: adjustedWidth,\n height: adjustedHeight,\n color: this.state.color!,\n className: this.props.className!,\n });\n\n const legendBars = this._createLegends(data!, palette);\n const outerRadius = Math.min(this.state._width!, this.state._height!) / 2;\n const chartData = data && data.chartData?.filter((d: IChartDataPoint) => d.data! > 0);\n const valueInsideDonut = this._valueInsideDonut(this.props.valueInsideDonut!, chartData!);\n return (\n <div\n className={this._classNames.root}\n ref={(rootElem: HTMLElement \| null) => (this._rootElem = rootElem)}\n onMouseLeave={this._handleChartMouseLeave}\n >\n <FocusZone direction={FocusZoneDirection.horizontal} handleTabKey={FocusZoneTabbableElements.all}>\n <div>\n <svg\n className={this._classNames.chart}\n aria-label={data?.chartTitle}\n ref={(node: SVGElement \| null) => this._setViewBox(node)}\n >\n <Pie\n width={adjustedWidth}\n height={adjustedHeight}\n outerRadius={outerRadius}\n innerRadius={this.props.innerRadius!}\n data={chartData!}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n hoverLeaveCallback={this._hoverLeave}\n uniqText={this._uniqText}\n onBlurCallback={this._onBlur}\n activeArc={this._getHighlightedLegend()}\n focusedArcId={this.state.focusedArcId \|\| ''}\n href={this.props.href!}\n calloutId={this._calloutId}\n valueInsideDonut={this._toLocaleString(valueInsideDonut)}\n theme={this.props.theme!}\n showLabelsInPercent={this.props.showLabelsInPercent}\n hideLabels={this.props.hideLabels}\n />\n </svg>\n </div>\n </FocusZone>\n <Callout\n target={this._currentHoverElement}\n alignTargetEdge={true}\n isBeakVisible={false}\n directionalHint={DirectionalHint.topAutoEdge}\n gapSpace={15}\n hidden={!(!this.props.hideTooltip && this.state.showHover)}\n id={this._calloutId}\n onDismiss={this._closeCallout}\n preventDismissOnLostFocus={true}\n /* Keep the callout updated with details of focused/hovered arc /\n shouldUpdateWhenHidden={true}\n {...this.props.calloutProps!}\n {...getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)}\n >\n {this.props.onRenderCalloutPerDataPoint ? (\n this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps!)\n ) : (\n <ChartHoverCard\n Legend={this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend}\n YValue={this.state.yCalloutValue ? this.state.yCalloutValue : this.state.value}\n color={this.state.color}\n culture={this.props.culture}\n />\n )}\n </Callout>\n {!hideLegend && <div className={this._classNames.legendContainer}>{legendBars}</div>}\n </div>\n );\n }\n\n private _closeCallout = () => {\n this.setState({\n showHover: false,\n });\n };\n\n private _setViewBox(node: SVGElement \| null): void {\n if (node === null) {\n return;\n }\n\n const widthVal = node.parentElement ? node.parentElement.clientWidth : this.state._width;\n\n const heightVal =\n node.parentElement && node.parentElement?.offsetHeight > this.state._height!\n ? node.parentElement?.offsetHeight\n : this.state._height;\n const viewbox = `0 0 ${widthVal!} ${heightVal!}`;\n node.setAttribute('viewBox', viewbox);\n }\n private _createLegends(data: IChartProps, palette: IPalette): JSX.Element {\n const defaultPalette: string[] = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];\n const legendDataItems =\n data &&\n data!.chartData!.map((point: IChartDataPoint, index: number) => {\n const color: string = point.color ? point.color : defaultPalette[Math.floor(Math.random() 4 + 1)];\n // mapping data to the format Legends component needs\n const legend: ILegend = {\n title: point.legend!,\n color: color,\n action: () => {\n if (this.state.selectedLegend === point.legend) {\n this.setState({ selectedLegend: '' });\n } else {\n this.setState({ selectedLegend: point.legend! });\n }\n },\n hoverAction: () => {\n this._handleChartMouseLeave();\n this.setState({ activeLegend: point.legend! });\n },\n onMouseOutAction: () => {\n this.setState({ activeLegend: '' });\n },\n };\n return legend;\n });\n const legends = (\n <Legends\n legends={legendDataItems}\n centerLegends\n overflowProps={this.props.legendsOverflowProps}\n focusZonePropsInHoverCard={this.props.focusZonePropsForLegendsInHoverCard}\n overflowText={this.props.legendsOverflowText}\n {...this.props.legendProps}\n />\n );\n return legends;\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, element: SVGPathElement): void => {\n this._currentHoverElement = element;\n this.setState({\n /** Show the callout if highlighted arc is focused and Hide it if unhighlighted arc is focused /\n showHover: this.state.selectedLegend === '' \|\| this.state.selectedLegend === data.legend,\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n focusedArcId: id,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n };\n\n private _hoverCallback = (data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void => {\n if (this._calloutAnchorPoint !== data) {\n this._calloutAnchorPoint = data;\n this._currentHoverElement = e;\n this.setState({\n /* Show the callout if highlighted arc is hovered and Hide it if unhighlighted arc is hovered /\n showHover: this.state.selectedLegend === '' \|\| this.state.selectedLegend === data.legend,\n value: data.data!.toString(),\n legend: data.legend,\n color: data.color!,\n xCalloutValue: data.xAxisCalloutData!,\n yCalloutValue: data.yAxisCalloutData!,\n dataPointCalloutProps: data,\n callOutAccessibilityData: data.callOutAccessibilityData!,\n });\n }\n };\n private _onBlur = (): void => {\n this.setState({ focusedArcId: '' });\n };\n\n private _hoverLeave(): void {\n //\n }\n\n private _handleChartMouseLeave = () => {\n this._calloutAnchorPoint = null;\n this.setState({ showHover: false });\n };\n\n private _valueInsideDonut(valueInsideDonut: string \| number \| undefined, data: IChartDataPoint[]) {\n const highlightedLegend = this._getHighlightedLegend();\n if (valueInsideDonut !== undefined && highlightedLegend !== '' && !this.state.showHover) {\n let legendValue = valueInsideDonut;\n data!.map((point: IChartDataPoint, index: number) => {\n if (point.legend === highlightedLegend) {\n legendValue = point.yAxisCalloutData ? point.yAxisCalloutData : point.data!;\n }\n return;\n });\n return legendValue;\n } else {\n return valueInsideDonut;\n }\n }\n\n private _toLocaleString(data: string \| number \| undefined) {\n const localeString = convertToLocaleString(data, this.props.culture);\n if (!localeString) {\n return data;\n }\n return localeString?.toString();\n }\n\n /\n This function returns\n * the selected legend if there is one\n * or the hovered legend if none of the legends is selected.\n * Note: This won't work in case of multiple legends selection.\n */\n private _getHighlightedLegend() {\n return this.state.selectedLegend \|\| this.state.activeLegend;\n }\n}\n"]}

package/lib-commonjs/components/DonutChart/DonutChart.types.d.ts CHANGED Viewed

@@ -34,6 +34,16 @@ export interface IDonutChartProps extends ICartesianChartProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    /**
+     * Prop to show the arc labels in percentage format
+     * @default false
+     */
+    showLabelsInPercent?: boolean;
+    /**
+     * Prop to hide the arc labels
+     * @default false
+     */
+    hideLabels?: boolean;
 }
 export interface IDonutChartStyleProps extends ICartesianChartStyleProps {
 }

package/lib-commonjs/components/DonutChart/DonutChart.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IDonutChart {}\n\nexport interface IDonutChartProps extends ICartesianChartProps {\n /*\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n}\n\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n */\n legendContainer: IStyle;\n}\n"]}
1	+ {"version":3,"file":"DonutChart.types.js","sourceRoot":"../src/","sources":["components/DonutChart/DonutChart.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IRenderFunction, IStyleFunctionOrObject } from '@fluentui/react/lib/Utilities';\nimport { ICartesianChartProps, ICartesianChartStyleProps } from '../CommonComponents/index';\nimport { ICalloutProps } from '@fluentui/react/lib/Callout';\nimport { IChartProps, IChartDataPoint } from './index';\n\nexport interface IDonutChart {}\n\nexport interface IDonutChartProps extends ICartesianChartProps {\n /*\n Data to render in the chart.\n /\n data?: IChartProps;\n\n /\n inner radius for donut size\n /\n innerRadius?: number;\n\n /\n Call to provide customized styling that will layer on top of the variant rules.\n /\n styles?: IStyleFunctionOrObject<IDonutChartStyleProps, IDonutChartStyles>;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n Define a custom callout renderer for a data point\n /\n onRenderCalloutPerDataPoint?: IRenderFunction<IChartDataPoint>;\n\n /\n props for the callout in the chart\n /\n calloutProps?: Partial<ICalloutProps>;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n /\n Prop to show the arc labels in percentage format\n * @default false\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n * @default false\n /\n hideLabels?: boolean;\n}\n\nexport interface IDonutChartStyleProps extends ICartesianChartStyleProps {}\n\nexport interface IDonutChartStyles {\n /\n Style for the root element.\n /\n root?: IStyle;\n\n /\n Style for the chart.\n /\n chart?: IStyle;\n /\n Style for the legend container.\n */\n legendContainer: IStyle;\n}\n"]}

package/lib-commonjs/components/DonutChart/Pie/Pie.d.ts CHANGED Viewed

@@ -4,9 +4,12 @@ import { IArcData } from '../Arc/index';
 export declare class Pie extends React.Component<IPieProps, {}> {
     static defaultProps: Partial<IPieProps>;
     private _pieForFocusRing;
+    private _totalValue;
     constructor(props: IPieProps);
     arcGenerator: (d: IArcData, i: number, focusData: IArcData, href?: string | undefined) => JSX.Element;
     render(): JSX.Element;
+    componentDidUpdate(): void;
     private _focusCallback;
     private _hoverCallback;
+    private _computeTotalValue;
 }

package/lib-commonjs/components/DonutChart/Pie/Pie.js CHANGED Viewed

@@ -5,17 +5,29 @@ var tslib_1 = require("tslib");
 var React = require("react");
 var shape = require("d3-shape");
 var index_1 = require("../Arc/index");
+var Utilities_1 = require("@fluentui/react/lib/Utilities");
+var Pie_styles_1 = require("./Pie.styles");
+var index_2 = require("../../../utilities/index");
+var getClassNames = Utilities_1.classNamesFunction();
+var TEXT_PADDING = 5;
 var Pie = /** @class */ (function (_super) {
     tslib_1.__extends(Pie, _super);
     function Pie(props) {
         var _this = _super.call(this, props) || this;
         _this.arcGenerator = function (d, i, focusData, href) {
             var color = d && d.data && d.data.color;
-            return (React.createElement(index_1.Arc, { key: i, data: d, focusData: focusData, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: color, onFocusCallback: _this._focusCallback, hoverOnCallback: _this._hoverCallback, onBlurCallback: _this.props.onBlurCallback, hoverLeaveCallback: _this.props.hoverLeaveCallback, uniqText: _this.props.uniqText, activeArc: _this.props.activeArc, href: href, calloutId: _this.props.calloutId, valueInsideDonut: _this.props.valueInsideDonut, theme: _this.props.theme, focusedArcId: _this.props.focusedArcId }));
+            return (React.createElement(index_1.Arc, { key: i, data: d, focusData: focusData, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: color, onFocusCallback: _this._focusCallback, hoverOnCallback: _this._hoverCallback, onBlurCallback: _this.props.onBlurCallback, hoverLeaveCallback: _this.props.hoverLeaveCallback, uniqText: _this.props.uniqText, activeArc: _this.props.activeArc, href: href, calloutId: _this.props.calloutId, valueInsideDonut: _this.props.valueInsideDonut, theme: _this.props.theme, focusedArcId: _this.props.focusedArcId, showLabelsInPercent: _this.props.showLabelsInPercent, totalValue: _this._totalValue, hideLabels: _this.props.hideLabels }));
         };
         _this._focusCallback = function (data, id, e) {
             _this.props.onFocusCallback(data, id, e);
         };
+        _this._computeTotalValue = function () {
+            var totalValue = 0;
+            _this.props.data.forEach(function (arc) {
+                totalValue += arc.data;
+            });
+            return totalValue;
+        };
         _this._hoverCallback = _this._hoverCallback.bind(_this);
         _this._pieForFocusRing = shape
             .pie()
@@ -31,7 +43,19 @@ var Pie = /** @class */ (function (_super) {
         var focusData = this._pieForFocusRing(data);
         var piechart = pie(data);
         var translate = "translate(" + this.props.width / 2 + ", " + this.props.height / 2 + ")";
-        return (React.createElement("g", { transform: translate }, piechart.map(function (d, i) { return _this.arcGenerator(d, i, focusData[i], _this.props.href); })));
+        var classNames = getClassNames(Pie_styles_1.getStyles, {
+            theme: this.props.theme,
+        });
+        this._totalValue = this._computeTotalValue();
+        return (React.createElement("g", { transform: translate },
+            piechart.map(function (d, i) { return _this.arcGenerator(d, i, focusData[i], _this.props.href); }),
+            this.props.valueInsideDonut && (React.createElement("text", { y: 5, textAnchor: "middle", dominantBaseline: "middle", className: classNames.insideDonutString, "data-is-focusable": true }, this.props.valueInsideDonut))));
+    };
+    Pie.prototype.componentDidUpdate = function () {
+        var classNames = getClassNames(Pie_styles_1.getStyles, {
+            theme: this.props.theme,
+        });
+        index_2.wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
     };
     Pie.prototype._hoverCallback = function (data, e) {
         this.props.hoverOnCallback(data, e);

package/lib-commonjs/components/DonutChart/Pie/Pie.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAElC,sCAA6C;~~AAG7C~~;IAAyB,+BAA8B;~~IAarD~~,aAAY,KAAgB;QAA5B,YACE,kBAAM,KAAK,CAAC,SAQb;QAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS,EAAE,SAAmB,EAAE,IAAa;YAC/E,IAAM,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;YAC1C,OAAO,CACL,oBAAC,WAAG,IACF,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,KAAM,EACb,eAAe,EAAE,KAAI,CAAC,cAAc,EACpC,eAAe,EAAE,KAAI,CAAC,cAAc,EACpC,cAAc,EAAE,KAAI,CAAC,KAAK,CAAC,cAAc,EACzC,kBAAkB,EAAE,KAAI,CAAC,KAAK,CAAC,kBAAkB,EACjD,QAAQ,EAAE,KAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,KAAI,CAAC,KAAK,CAAC,SAAS,EAC/B,gBAAgB,EAAE,KAAI,CAAC,KAAK,CAAC,gBAAgB,EAC7C,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAM,EACxB,YAAY,EAAE,KAAI,CAAC,KAAK,CAAC,YAAY,~~GACrC~~,CACH,CAAC;QACJ,CAAC,CAAC;~~QAcM~~,oBAAc,GAAG,UAAC,IAAqB,EAAE,EAAU,EAAE,CAAiB;YAC5E,KAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC;QAC3C,CAAC,CAAC;~~QAhDA~~,KAAI,CAAC,cAAc,GAAG,KAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACrD,KAAI,CAAC,gBAAgB,GAAG,KAAK;aAC1B,GAAG,EAAE;aACL,IAAI,CAAC,IAAI,CAAC;YACX,8DAA8D;aAC7D,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,IAAI,EAAN,CAAM,CAAC;aACzB,QAAQ,CAAC,CAAC,CAAC,CAAC;;IACjB,CAAC;~~IA2BM~~,oBAAM,GAAb;QAAA,~~iBAUC~~;~~QATO~~,IAAA,KAAgB,IAAI,CAAC,KAAK,EAAxB,GAAG,SAAA,EAAE,IAAI,UAAe,CAAC;QACjC,IAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QAC9C,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAM,SAAS,GAAG,eAAa,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,UAAK,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,MAAG,CAAC;QACjF,OAAO,CACL,2BAAG,SAAS,EAAE,SAAS,~~IACpB,~~QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,KAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAtD,CAAsD,CAAC,~~CAC/F~~,CACL,CAAC;IACJ,CAAC;IAMO,4BAAc,GAAtB,UAAuB,IAAqB,EAAE,CAAmC;QAC/E,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACvC,CAAC;~~IAlEa~~,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK;aACP,GAAG,EAAE;aACL,IAAI,CAAC,IAAI,CAAC;YACX,8DAA8D;aAC7D,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,IAAI,EAAN,CAAM,CAAC;aACzB,QAAQ,CAAC,IAAI,CAAC;KAClB,CAAC;~~IA4DJ~~,UAAC;CAAA,~~AApED~~,CAAyB,KAAK,CAAC,SAAS,~~GAoEvC~~;~~AApEY~~,kBAAG","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IPieProps } from './index';\nimport { Arc, IArcData } from '../Arc/index';\nimport { IChartDataPoint } from '../index';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n public static defaultProps: Partial<IPieProps> = {\n pie: shape\n .pie()\n .sort(null)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .value((d: any) => d.data)\n .padAngle(0.02),\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _pieForFocusRing: any;\n\n constructor(props: IPieProps) {\n super(props);\n this._hoverCallback = this._hoverCallback.bind(this);\n this._pieForFocusRing = shape\n .pie()\n .sort(null)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .value((d: any) => d.data)\n .padAngle(0);\n }\n\n public arcGenerator = (d: IArcData, i: number, focusData: IArcData, href?: string): JSX.Element => {\n const color = d && d.data && d.data.color;\n return (\n <Arc\n key={i}\n data={d}\n focusData={focusData}\n innerRadius={this.props.innerRadius}\n outerRadius={this.props.outerRadius}\n color={color!}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n onBlurCallback={this.props.onBlurCallback}\n hoverLeaveCallback={this.props.hoverLeaveCallback}\n uniqText={this.props.uniqText}\n activeArc={this.props.activeArc}\n href={href}\n calloutId={this.props.calloutId}\n valueInsideDonut={this.props.valueInsideDonut}\n theme={this.props.theme!}\n focusedArcId={this.props.focusedArcId}\n />\n );\n };\n\n public render(): JSX.Element {\n const { pie, data } = this.props;\n const focusData = this._pieForFocusRing(data);\n const piechart = pie(data);\n const translate = `translate(${this.props.width / 2}, ${this.props.height / 2})`;\n return (\n <g transform={translate}>\n {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i, focusData[i], this.props.href))}\n </g>\n );\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, e: SVGPathElement): void => {\n this.props.onFocusCallback!(data, id, e);\n };\n\n private _hoverCallback(data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n this.props.hoverOnCallback!(data, e);\n }\n}\n"]}
1	+ {"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IPieProps, IPieStyleProps, IPieStyles } from './index';\nimport { Arc, IArcData } from '../Arc/index';\nimport { IChartDataPoint } from '../index';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Pie.styles';\nimport { wrapTextInsideDonut } from '../../../utilities/index';\n\nconst getClassNames = classNamesFunction<IPieStyleProps, IPieStyles>();\nconst TEXT_PADDING: number = 5;\n\nexport class Pie extends React.Component<IPieProps, {}> {\n public static defaultProps: Partial<IPieProps> = {\n pie: shape\n .pie()\n .sort(null)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .value((d: any) => d.data)\n .padAngle(0.02),\n };\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n private _pieForFocusRing: any;\n private _totalValue: number;\n\n constructor(props: IPieProps) {\n super(props);\n this._hoverCallback = this._hoverCallback.bind(this);\n this._pieForFocusRing = shape\n .pie()\n .sort(null)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .value((d: any) => d.data)\n .padAngle(0);\n }\n\n public arcGenerator = (d: IArcData, i: number, focusData: IArcData, href?: string): JSX.Element => {\n const color = d && d.data && d.data.color;\n return (\n <Arc\n key={i}\n data={d}\n focusData={focusData}\n innerRadius={this.props.innerRadius}\n outerRadius={this.props.outerRadius}\n color={color!}\n onFocusCallback={this._focusCallback}\n hoverOnCallback={this._hoverCallback}\n onBlurCallback={this.props.onBlurCallback}\n hoverLeaveCallback={this.props.hoverLeaveCallback}\n uniqText={this.props.uniqText}\n activeArc={this.props.activeArc}\n href={href}\n calloutId={this.props.calloutId}\n valueInsideDonut={this.props.valueInsideDonut}\n theme={this.props.theme!}\n focusedArcId={this.props.focusedArcId}\n showLabelsInPercent={this.props.showLabelsInPercent}\n totalValue={this._totalValue}\n hideLabels={this.props.hideLabels}\n />\n );\n };\n\n public render(): JSX.Element {\n const { pie, data } = this.props;\n const focusData = this._pieForFocusRing(data);\n const piechart = pie(data);\n const translate = `translate(${this.props.width / 2}, ${this.props.height / 2})`;\n const classNames = getClassNames(getStyles, {\n theme: this.props.theme!,\n });\n\n this._totalValue = this._computeTotalValue();\n\n return (\n <g transform={translate}>\n {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i, focusData[i], this.props.href))}\n {this.props.valueInsideDonut && (\n <text\n y={5}\n textAnchor=\"middle\"\n dominantBaseline=\"middle\"\n className={classNames.insideDonutString}\n data-is-focusable={true}\n >\n {this.props.valueInsideDonut}\n </text>\n )}\n </g>\n );\n }\n\n public componentDidUpdate(): void {\n const classNames = getClassNames(getStyles, {\n theme: this.props.theme!,\n });\n\n wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius! * 2 - TEXT_PADDING);\n }\n\n private _focusCallback = (data: IChartDataPoint, id: string, e: SVGPathElement): void => {\n this.props.onFocusCallback!(data, id, e);\n };\n\n private _hoverCallback(data: IChartDataPoint, e: React.MouseEvent<SVGPathElement>): void {\n this.props.hoverOnCallback!(data, e);\n }\n\n private _computeTotalValue = () => {\n let totalValue = 0;\n this.props.data.forEach((arc: IChartDataPoint) => {\n totalValue += arc.data!;\n });\n return totalValue;\n };\n}\n"]}

package/lib-commonjs/components/DonutChart/Pie/Pie.styles.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { IPieProps, IPieStyles } from './Pie.types';
-export declare const getStyles: (props: IPieProps) => IPieStyles;
+import { IPieStyleProps, IPieStyles } from './Pie.types';
+export declare const getStyles: (props: IPieStyleProps) => IPieStyles;

package/lib-commonjs/components/DonutChart/Pie/Pie.styles.js CHANGED Viewed

@@ -1,9 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
+var Styling_1 = require("@fluentui/react/lib/Styling");
 var getStyles = function (props) {
+    var _a;
+    var theme = props.theme;
     return {
         root: {},
+        insideDonutString: {
+            fontSize: Styling_1.FontSizes.xLargePlus,
+            fontWeight: Styling_1.FontWeights.semibold,
+            fill: theme.semanticColors.bodyText,
+            selectors: (_a = {},
+                _a[Styling_1.HighContrastSelectorBlack] = {
+                    fill: 'rgb(179, 179, 179)',
+                },
+                _a),
+        },
     };
 };
 exports.getStyles = getStyles;

package/lib-commonjs/components/DonutChart/Pie/Pie.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pie.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.styles.ts"],"names":[],"mappings":";;;~~AAEO~~,IAAM,SAAS,GAAG,UAAC,~~KAAgB~~;~~IACxC~~,OAAO;QACL,IAAI,EAAE,EAAE;~~KACT~~,CAAC;AACJ,CAAC,CAAC;~~AAJW~~,QAAA,SAAS,~~aAIpB~~","sourcesContent":["import { ~~IPieProps~~, IPieStyles } from './Pie.types';\n\nexport const getStyles = (props: ~~IPieProps~~): IPieStyles => {\n return {\n root: {},\n };\n};\n"]}
1	+ {"version":3,"file":"Pie.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.styles.ts"],"names":[],"mappings":";;;AACA,uDAAgG;AAEzF,IAAM,SAAS,GAAG,UAAC,KAAqB;;IACrC,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IACxB,OAAO;QACL,IAAI,EAAE,EAAE;QACR,iBAAiB,EAAE;YACjB,QAAQ,EAAE,mBAAS,CAAC,UAAU;YAC9B,UAAU,EAAE,qBAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;YACnC,SAAS;gBACP,GAAC,mCAAyB,IAAG;oBAC3B,IAAI,EAAE,oBAAoB;iBAC3B;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,SAAS,aAepB","sourcesContent":["import { IPieStyleProps, IPieStyles } from './Pie.types';\nimport { FontSizes, FontWeights, HighContrastSelectorBlack } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IPieStyleProps): IPieStyles => {\n const { theme } = props;\n return {\n root: {},\n insideDonutString: {\n fontSize: FontSizes.xLargePlus,\n fontWeight: FontWeights.semibold,\n fill: theme.semanticColors.bodyText,\n selectors: {\n [HighContrastSelectorBlack]: {\n fill: 'rgb(179, 179, 179)',\n },\n },\n },\n };\n};\n"]}

package/lib-commonjs/components/DonutChart/Pie/Pie.types.d.ts CHANGED Viewed

@@ -69,10 +69,28 @@ export interface IPieProps {
      * id of the focused arc
      */
     focusedArcId?: string;
+    /**
+     * Prop to show the arc labels in percentage format
+     */
+    showLabelsInPercent?: boolean;
+    /**
+     * Prop to hide the arc labels
+     */
+    hideLabels?: boolean;
 }
 export interface IPieStyles {
     /**
      * Style set for the card header component root
      */
     root: IStyle;
+    /**
+     * Style set for the inside donut string
+     */
+    insideDonutString: IStyle;
+}
+export interface IPieStyleProps {
+    /**
+     * Theme (provided through customization.)
+     */
+    theme: ITheme;
 }

package/lib-commonjs/components/DonutChart/Pie/Pie.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\n\nexport interface IPieProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Width of the Pie.\n /\n width: number;\n /\n Height of the Pie.\n /\n height: number;\n /\n outerRadius of the Pie.\n /\n outerRadius: number;\n /\n innerRadius of the Pie.\n /\n innerRadius: number;\n /\n Data to render in the Pie.\n /\n data: IChartDataPoint[];\n /\n shape for pie.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n pie?: any;\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n /\n Uniq string for chart\n /\n uniqText?: string;\n /\n Active Arc for chart\n /\n activeArc?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n}\n\nexport interface IPieStyles {\n /\n Style set for the card header component root\n */\n root: IStyle;\n}\n"]}
1	+ {"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\n\nexport interface IPieProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Width of the Pie.\n /\n width: number;\n /\n Height of the Pie.\n /\n height: number;\n /\n outerRadius of the Pie.\n /\n outerRadius: number;\n /\n innerRadius of the Pie.\n /\n innerRadius: number;\n /\n Data to render in the Pie.\n /\n data: IChartDataPoint[];\n /\n shape for pie.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n pie?: any;\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n /\n Uniq string for chart\n /\n uniqText?: string;\n /\n Active Arc for chart\n /\n activeArc?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n internal prop for href\n /\n href?: string;\n\n /\n props for inside donut value\n /\n valueInsideDonut?: string \| number;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n\n /\n Prop to show the arc labels in percentage format\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop to hide the arc labels\n /\n hideLabels?: boolean;\n}\n\nexport interface IPieStyles {\n /\n Style set for the card header component root\n /\n root: IStyle;\n\n /\n Style set for the inside donut string\n /\n insideDonutString: IStyle;\n}\n\nexport interface IPieStyleProps {\n /\n Theme (provided through customization.)\n */\n theme: ITheme;\n}\n"]}

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

@@ -19,6 +19,7 @@ export declare class HorizontalBarChartBase extends React.Component<IHorizontalB
     private _calloutId;
     private _refArray;
     private _calloutAnchorPoint;
+    private _isRTL;
     constructor(props: IHorizontalBarChartProps);
     render(): JSX.Element;
     private _refCallback;

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

@@ -4,15 +4,18 @@ exports.HorizontalBarChartBase = void 0;
 var tslib_1 = require("tslib");
 var React = require("react");
 var Utilities_1 = require("@fluentui/react/lib/Utilities");
+var index_1 = require("./index");
 var Callout_1 = require("@fluentui/react/lib/Callout");
-var index_1 = require("../../utilities/index");
+var index_2 = require("../../utilities/index");
 var react_focus_1 = require("@fluentui/react-focus");
 var react_1 = require("@fluentui/react");
+var d3_format_1 = require("d3-format");
 var getClassNames = Utilities_1.classNamesFunction();
 var HorizontalBarChartBase = /** @class */ (function (_super) {
     tslib_1.__extends(HorizontalBarChartBase, _super);
     function HorizontalBarChartBase(props) {
         var _this = _super.call(this, props) || this;
+        _this._isRTL = Utilities_1.getRTL();
         _this._handleChartMouseLeave = function () {
             _this._calloutAnchorPoint = null;
             if (_this.state.isCalloutVisible) {
@@ -33,6 +36,8 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                 className: _this.props.className,
                 barHeight: _this._barHeight,
                 color: _this.state.lineColor,
+                variant: _this.props.variant,
+                hideLabels: _this.props.hideLabels,
             });
         };
         _this._getChartDataText = function (data) {
@@ -89,23 +94,25 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                     },
                     color: palette.neutralLight,
                 };
-                var chartDataText = _this._getChartDataText(points);
+                // Hide right side text of chart title for absolute-scale variant
+                var chartDataText = _this.props.variant === index_1.HorizontalBarChartVariant.AbsoluteScale ? null : _this._getChartDataText(points);
                 var bars = _this._createBars(points, palette);
                 var keyVal = _this._uniqLineText + '_' + index;
                 var classNames = getClassNames(_this.props.styles, {
                     theme: _this.props.theme,
                     width: _this.props.width,
                     showTriangle: !!points.chartData[0].data,
+                    variant: _this.props.variant,
                 });
                 return (React.createElement("div", { key: index },
                     React.createElement("div", { className: classNames.items },
                         React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
                             React.createElement("div", { className: _this._classNames.chartTitle },
                                 points.chartTitle && (React.createElement(react_1.TooltipHost, { overflowMode: react_1.TooltipOverflowMode.Self, hostClassName: _this._classNames.chartTitleLeft, content: points.chartTitle },
-                                    React.createElement("span", tslib_1.__assign({}, index_1.getAccessibleDataObject(points.chartTitleAccessibilityData)), points.chartTitle))),
+                                    React.createElement("span", tslib_1.__assign({}, index_2.getAccessibleDataObject(points.chartTitleAccessibilityData)), points.chartTitle))),
                                 chartDataText)),
                         points.chartData[0].data && _this._createBenchmark(points),
-                        React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
+                        React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal, className: _this._classNames.chartWrapper },
                             React.createElement("svg", { 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);
@@ -116,10 +123,10 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
                                         if (p && p.onClick) {
                                             p.onClick();
                                         }
-                                    }, className: _this._classNames.barWrapper }, bars))))));
+                                    } }, bars))))));
             }),
-            React.createElement(Callout_1.Callout, tslib_1.__assign({ target: this.state.refSelected, coverTarget: true, isBeakVisible: false, gapSpace: 30, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps, index_1.getAccessibleDataObject(this.state.callOutAccessibilityData)),
-                React.createElement(React.Fragment, null, this.props.onRenderCalloutPerHorizontalBar ? (this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)) : (React.createElement(index_1.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(Callout_1.Callout, tslib_1.__assign({ target: this.state.refSelected, coverTarget: true, isBeakVisible: false, gapSpace: 30, hidden: !(!this.props.hideTooltip && this.state.isCalloutVisible), directionalHint: Callout_1.DirectionalHint.topAutoEdge, id: this._calloutId, onDismiss: this._closeCallout, preventDismissOnLostFocus: true }, this.props.calloutProps, index_2.getAccessibleDataObject(this.state.callOutAccessibilityData)),
+                React.createElement(React.Fragment, null, this.props.onRenderCalloutPerHorizontalBar ? (this.props.onRenderCalloutPerHorizontalBar(this.state.barCalloutProps)) : (React.createElement(index_2.ChartHoverCard, { Legend: this.state.xCalloutValue ? this.state.xCalloutValue : this.state.legend, YValue: this.state.yCalloutValue ? this.state.yCalloutValue : this.state.hoverValue, color: this.state.lineColor, culture: this.props.culture }))))));
     };
     HorizontalBarChartBase.prototype._refCallback = function (element, legendTitle) {
         this._refArray.push({ index: legendTitle, refElement: element });
@@ -150,16 +157,16 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
         var chartData = data.chartData[0];
         var x = chartData.horizontalBarChartdata.x;
         var y = chartData.horizontalBarChartdata.y;
-        var accessibilityData = index_1.getAccessibleDataObject(data.chartDataAccessibilityData);
+        var accessibilityData = index_2.getAccessibleDataObject(data.chartDataAccessibilityData);
         switch (chartDataMode) {
             case 'default':
-                return (React.createElement("div", tslib_1.__assign({ className: this._classNames.chartTitleRight }, accessibilityData), index_1.convertToLocaleString(x, culture)));
+                return (React.createElement("div", tslib_1.__assign({ className: this._classNames.chartTitleRight }, accessibilityData), index_2.convertToLocaleString(x, culture)));
             case 'fraction':
                 return (React.createElement("div", tslib_1.__assign({}, accessibilityData),
-                    React.createElement("span", { className: this._classNames.chartTitleRight }, index_1.convertToLocaleString(x, culture)),
-                    React.createElement("span", { className: this._classNames.chartDataTextDenominator }, ' / ' + index_1.convertToLocaleString(y, culture))));
+                    React.createElement("span", { className: this._classNames.chartTitleRight }, index_2.convertToLocaleString(x, culture)),
+                    React.createElement("span", { className: this._classNames.chartDataTextDenominator }, ' / ' + index_2.convertToLocaleString(y, culture))));
             case 'percentage':
-                var dataRatioPercentage = index_1.convertToLocaleString(Math.round((x / y) * 100), culture) + "%";
+                var dataRatioPercentage = index_2.convertToLocaleString(Math.round((x / y) * 100), culture) + "%";
                 return (React.createElement("div", tslib_1.__assign({ className: this._classNames.chartTitleRight }, accessibilityData), dataRatioPercentage));
         }
     };
@@ -215,7 +222,16 @@ var HorizontalBarChartBase = /** @class */ (function (_super) {
             }
             startingPoint.push(prevPosition);
             var xValue = point.horizontalBarChartdata.x;
-            return (React.createElement("rect", { key: index, x: 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 }));
+            var placeholderIndex = 1;
+            // Render bar label instead of placeholder bar for absolute-scale variant
+            if (index === placeholderIndex && _this.props.variant === index_1.HorizontalBarChartVariant.AbsoluteScale) {
+                if (_this.props.hideLabels) {
+                    return React.createElement("text", { key: index });
+                }
+                var barValue = data.chartData[0].horizontalBarChartdata.x;
+                return (React.createElement("text", { key: index, x: (_this._isRTL ? 100 - startingPoint[index] : startingPoint[index]) + "%", y: _this._barHeight / 2, dominantBaseline: "central", transform: "translate(" + (_this._isRTL ? -4 : 4) + ")", className: _this._classNames.barLabel, "aria-hidden": true }, d3_format_1.formatPrefix(barValue < 1000 ? '.2~' : '.1', barValue)(barValue)));
+            }
+            return (React.createElement("rect", { key: index, x: (_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 bars;
     };