npm - @fluentui/react-charting - Versions diffs - 5.14.37 → 5.14.39 - Mend

@fluentui/react-charting 5.14.37 → 5.14.39

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/components/DonutChart/Arc/Arc.d.ts CHANGED Viewed

@@ -7,14 +7,15 @@ export declare class Arc extends React.Component<IArcProps, IArcState> {
     static defaultProps: Partial<IArcProps>;
     state: {};
     private currentRef;
+    private _isRTL;
     static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> | null;
     updateChart(newProps: IArcProps): void;
     render(): JSX.Element;
-    componentDidUpdate(): void;
     private _onFocus;
     private _hoverOn;
     private _hoverOff;
     private _onBlur;
     private _redirectToUrl;
     private _getAriaLabel;
+    private _renderArcLabel;
 }

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

@@ -1,16 +1,16 @@
 import { __extends } from "tslib";
 import * as React from 'react';
 import * as shape from 'd3-shape';
-import { classNamesFunction } from '@fluentui/react/lib/Utilities';
+import { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';
 import { getStyles } from './Arc.styles';
-import { wrapTextInsideDonut } from '../../../utilities/index';
-var TEXT_PADDING = 5;
+import { format as d3Format, formatPrefix as d3FormatPrefix } from 'd3-format';
 var Arc = /** @class */ (function (_super) {
     __extends(Arc, _super);
     function Arc() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.state = {};
         _this.currentRef = React.createRef();
+        _this._isRTL = getRTL();
         _this._hoverOff = function () {
             _this.props.hoverLeaveCallback();
         };
@@ -24,6 +24,20 @@ var Arc = /** @class */ (function (_super) {
             var yValue = point.yAxisCalloutData || point.data || 0;
             return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? legend + ", " : '') + (yValue + ".");
         };
+        _this._renderArcLabel = function (className) {
+            var _a = _this.props, arc = _a.arc, data = _a.data, innerRadius = _a.innerRadius, outerRadius = _a.outerRadius, showLabelsInPercent = _a.showLabelsInPercent, totalValue = _a.totalValue, hideLabels = _a.hideLabels;
+            if (hideLabels || Math.abs(data.endAngle - data.startAngle) < Math.PI / 12) {
+                return null;
+            }
+            var _b = arc.centroid(data), base = _b[0], perp = _b[1];
+            var hyp = Math.sqrt(base * base + perp * perp);
+            var labelRadius = Math.max(innerRadius, outerRadius) + 2;
+            var angle = (data.startAngle + data.endAngle) / 2;
+            var arcValue = data.value;
+            return (React.createElement("text", { x: (hyp === 0 ? 0 : base / hyp) * labelRadius, y: (hyp === 0 ? 0 : perp / hyp) * labelRadius, textAnchor: angle > Math.PI !== _this._isRTL ? 'end' : 'start', dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto', className: className, "aria-hidden": true }, showLabelsInPercent
+                ? d3Format('.0%')(totalValue === 0 ? 0 : arcValue / totalValue)
+                : d3FormatPrefix(arcValue < 1000 ? '.2~' : '.1', arcValue)(arcValue)));
+        };
         return _this;
     }
     Arc.getDerivedStateFromProps = function (nextProps) {
@@ -47,17 +61,7 @@ var Arc = /** @class */ (function (_super) {
         return (React.createElement("g", { ref: this.currentRef },
             !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc(this.props.focusData), className: classNames.focusRing })),
             React.createElement("path", { id: id, d: arc(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": true, onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, opacity: opacity, onClick: href ? this._redirectToUrl.bind(this, href) : (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
-            React.createElement("text", { textAnchor: 'middle', className: classNames.insideDonutString, y: 5 }, this.props.valueInsideDonut)));
-    };
-    Arc.prototype.componentDidUpdate = function () {
-        var href = this.props.href;
-        var getClassNames = classNamesFunction();
-        var classNames = getClassNames(getStyles, {
-            color: this.props.color,
-            href: href,
-            theme: this.props.theme,
-        });
-        wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
+            this._renderArcLabel(classNames.arcLabel)));
     };
     Arc.prototype._onFocus = function (data, id) {
         this.props.onFocusCallback(data, id, this.currentRef.current);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;~~AACnE~~,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,~~mBAAmB~~,EAAE,~~MAAM~~,~~0BAA0B~~,~~CAAC;AAM/D~~,~~IAAM~~,~~YAAY~~,~~GAAW~~,CAAC~~,CAAC~~;~~AAE~~/B;IAAyB,uBAAqC;IAA9D;QAAA,qEA+FC;~~QA1FQ~~,WAAK,GAAO,EAAE,CAAC;QAEd,gBAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;~~QAsE~~/C,eAAS,GAAG;YAClB,KAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;QACnC,CAAC,CAAC;QAEM,aAAO,GAAG;YAChB,KAAI,CAAC,KAAK,CAAC,cAAe,EAAE,CAAC;QAC/B,CAAC,CAAC;QAMM,mBAAa,GAAG;;YACtB,IAAM,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC;YACpC,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,MAAM,CAAC;YACtD,IAAM,MAAM,GAAG,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;YACzD,OAAO,CAAA,MAAA,KAAK,CAAC,wBAAwB,0CAAE,SAAS,KAAI,CAAC,MAAM,CAAC,CAAC,CAAI,MAAM,OAAI,CAAC,CAAC,CAAC,EAAE,CAAC,IAAM,MAAM,MAAG,CAAA,CAAC;QACnG,CAAC,CAAC;;IACJ,CAAC;~~IAtFe~~,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,yBAAW,GAAlB,UAAmB,QAAmB;QACpC,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC;IAEM,oBAAM,GAAb;;QACQ,IAAA,KAA8B,IAAI,CAAC,KAAK,EAAtC,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,YAAY,kBAAe,CAAC;QAC/C,IAAM,aAAa,GAAG,kBAAkB,EAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,SAAS,EAAE;YAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,IAAI,EAAE,IAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;SACzB,CAAC,CAAC;QACH,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAS,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,IAAI,CAAC;QAChH,IAAM,OAAO,GACX,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACjG,OAAO,CACL,2BAAG,GAAG,EAAE,IAAI,CAAC,UAAU;YACpB,CAAC,CAAC,YAAY,IAAI,YAAY,KAAK,EAAE,IAAI,CACxC,8BAAM,EAAE,EAAE,EAAE,GAAG,WAAW,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,SAAS,GAAI,CAC9F;YACD,8BACE,EAAE,EAAE,EAAE,EACN,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EACvB,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,EAAE,EAAE,CAAC,EAC5D,SAAS,EAAE,UAAU,CAAC,IAAI,uBACP,IAAI,EACvB,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAK,CAAC,IAAI,CAAC,EAC5D,YAAY,EAAE,IAAI,CAAC,SAAS,EAC5B,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,gBACxE,IAAI,CAAC,aAAa,EAAE,EAChC,IAAI,EAAC,KAAK,GACV;~~YACF~~,~~8BAAM~~,~~UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,~~CAAC,~~iBAAiB~~,~~EAAE,~~CAAC,~~EAAE~~,CAAC,~~IACtE~~,~~IAAI,~~CAAC,~~KAAK~~,~~CAAC,gBAAiB,CACxB,~~CACL,~~CACL,~~CAAC;IACJ,CAAC;IAEM,gCAAkB,GAAzB;QACU,IAAA,IAAI,GAAK,IAAI,CAAC,KAAK,KAAf,CAAgB;QAC5B,IAAM,aAAa,GAAG,kBAAkB,EAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,SAAS,EAAE;YAC1C,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YACvB,IAAI,EAAE,IAAK;YACX,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM;SACzB,CAAC,CAAC;QAEH,mBAAmB,CAAC,UAAU,CAAC,iBAAiB,EAAE,IAAI,CAAC,KAAK,CAAC,WAAY,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC;IAChG,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,EAAU;QAChD,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;IACjE,CAAC;IAEO,sBAAQ,GAAhB,UAAiB,IAAqB,EAAE,UAA4C;QAClF,UAAU,CAAC,OAAO,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,CAAC,eAAgB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAChD,CAAC;IAUO,4BAAc,GAAtB,UAAuB,IAAwB;QAC7C,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5C,CAAC;~~IAtFa~~,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;KACjB,CAAC;~~IA4FJ~~,UAAC;CAAA,AA/FD,CAAyB,KAAK,CAAC,SAAS,GA+~~FvC~~;SA/FY,GAAG;~~AAiGhB~~,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 { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { ~~wrapTextInsideDonut~~ } from '~~../../../utilities/index~~';\n\nexport interface IArcState {\n isCalloutVisible?: boolean;\n}\n\~~nconst TEXT_PADDING: number = 5;\n\~~nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n public state: {} = {};\n\n private currentRef = React.createRef<SVGPathElement>();\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> \| null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart(newProps: IArcProps): void {\n _updateChart(newProps);\n }\n\n public render(): JSX.Element {\n const { arc, href, focusedArcId } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, {\n color: this.props.color,\n href: href!,\n theme: this.props.theme!,\n });\n const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n const opacity: number =\n this.props.activeArc === this.props.data!.data.legend \|\| this.props.activeArc === '' ? 1 : 0.1;\n return (\n <g ref={this.currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n )}\n <path\n id={id}\n d={arc(this.props.data)}\n onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n className={classNames.root}\n data-is-focusable={true}\n onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseLeave={this._hoverOff}\n onBlur={this._onBlur}\n opacity={opacity}\n onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n aria-label={this._getAriaLabel()}\n role=\"img\"\n />\n ~~<text textAnchor=~~{~~'middle'} className={classNames.insideDonutString} y={5}>\n {~~this.~~props~~.~~valueInsideDonut!~~}\n ~~</text>\n~~ </g>\n );\n }\n\n public componentDidUpdate(): void {\n const { href } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, {\n color: this.props.color,\n href: href!,\n theme: this.props.theme!,\n });\n\n wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius! * 2 - TEXT_PADDING);\n }\n\n private _onFocus(data: IChartDataPoint, id: string): void {\n this.props.onFocusCallback!(data, id, this.currentRef.current);\n }\n\n private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n this.props.hoverOnCallback!(data, mouseEvent);\n }\n\n private _hoverOff = (): void => {\n this.props.hoverLeaveCallback!();\n };\n\n private _onBlur = (): void => {\n this.props.onBlurCallback!();\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _getAriaLabel = (): string => {\n const point = this.props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\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/DonutChart/Arc/Arc.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyles } from './index';\nimport { format as d3Format, formatPrefix as d3FormatPrefix } from 'd3-format';\n\nexport interface IArcState {\n isCalloutVisible?: boolean;\n}\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n public state: {} = {};\n\n private currentRef = React.createRef<SVGPathElement>();\n private _isRTL: boolean = getRTL();\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): Partial<IArcState> \| null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart(newProps: IArcProps): void {\n _updateChart(newProps);\n }\n\n public render(): JSX.Element {\n const { arc, href, focusedArcId } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, {\n color: this.props.color,\n href: href!,\n theme: this.props.theme!,\n });\n const id = this.props.uniqText! + this.props.data!.data.legend!.replace(/\\s+/, '') + this.props.data!.data.data;\n const opacity: number =\n this.props.activeArc === this.props.data!.data.legend \|\| this.props.activeArc === '' ? 1 : 0.1;\n return (\n <g ref={this.currentRef}>\n {!!focusedArcId && focusedArcId === id && (\n <path id={id + 'focusRing'} d={arc(this.props.focusData)} className={classNames.focusRing} />\n )}\n <path\n id={id}\n d={arc(this.props.data)}\n onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n className={classNames.root}\n data-is-focusable={true}\n onMouseOver={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseMove={this._hoverOn.bind(this, this.props.data!.data)}\n onMouseLeave={this._hoverOff}\n onBlur={this._onBlur}\n opacity={opacity}\n onClick={href ? this._redirectToUrl.bind(this, href) : this.props.data?.data.onClick}\n aria-label={this._getAriaLabel()}\n role=\"img\"\n />\n {this._renderArcLabel(classNames.arcLabel)}\n </g>\n );\n }\n\n private _onFocus(data: IChartDataPoint, id: string): void {\n this.props.onFocusCallback!(data, id, this.currentRef.current);\n }\n\n private _hoverOn(data: IChartDataPoint, mouseEvent: React.MouseEvent<SVGPathElement>): void {\n mouseEvent.persist();\n this.props.hoverOnCallback!(data, mouseEvent);\n }\n\n private _hoverOff = (): void => {\n this.props.hoverLeaveCallback!();\n };\n\n private _onBlur = (): void => {\n this.props.onBlurCallback!();\n };\n\n private _redirectToUrl(href: string \| undefined): void {\n href ? (window.location.href = href) : '';\n }\n\n private _getAriaLabel = (): string => {\n const point = this.props.data!.data;\n const legend = point.xAxisCalloutData \|\| point.legend;\n const yValue = point.yAxisCalloutData \|\| point.data \|\| 0;\n return point.callOutAccessibilityData?.ariaLabel \|\| (legend ? `${legend}, ` : '') + `${yValue}.`;\n };\n\n private _renderArcLabel = (className: string) => {\n const { arc, data, innerRadius, outerRadius, showLabelsInPercent, totalValue, hideLabels } = this.props;\n\n if (hideLabels \|\| Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12) {\n return null;\n }\n\n const [base, perp] = arc.centroid(data);\n const hyp = Math.sqrt(base * base + perp * perp);\n const labelRadius = Math.max(innerRadius!, outerRadius!) + 2;\n const angle = (data!.startAngle + data!.endAngle) / 2;\n const arcValue = data!.value;\n\n return (\n <text\n x={(hyp === 0 ? 0 : base / hyp) * labelRadius}\n y={(hyp === 0 ? 0 : perp / hyp) * labelRadius}\n textAnchor={angle > Math.PI !== this._isRTL ? 'end' : 'start'}\n dominantBaseline={angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto'}\n className={className}\n aria-hidden={true}\n >\n {showLabelsInPercent\n ? d3Format('.0%')(totalValue! === 0 ? 0 : arcValue / totalValue!)\n : d3FormatPrefix(arcValue < 1000 ? '.2~' : '.1', arcValue)(arcValue)}\n </text>\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/DonutChart/Arc/Arc.styles.js CHANGED Viewed

@@ -1,6 +1,5 @@
-import { DefaultPalette, FontSizes, HighContrastSelectorBlack } from '@fluentui/react/lib/Styling';
+import { DefaultPalette, FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
 export var getStyles = function (props) {
-    var _a;
     var color = props.color, href = props.href, theme = props.theme;
     return {
         root: {
@@ -19,14 +18,10 @@ export var getStyles = function (props) {
             strokeWidth: 4,
             fill: 'transparent',
         },
-        insideDonutString: {
-            fontSize: FontSizes.large,
-            fill: theme.semanticColors.bodyText,
-            selectors: (_a = {},
-                _a[HighContrastSelectorBlack] = {
-                    fill: 'rgb(179, 179, 179)',
-                },
-                _a),
+        arcLabel: {
+            fontSize: FontSizes.small,
+            fontWeight: FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
         },
     };
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,~~yBAAyB~~,EAAE,MAAM,6BAA6B,CAAC;~~AAEnG~~,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAgB;;IAChC,IAAA,KAAK,GAAkB,KAAK,MAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACrC,OAAO;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACpC,MAAM,EAAE,cAAc,CAAC,KAAK;YAC5B,OAAO,EAAE,aAAa;YACtB,SAAS,EAAE;gBACT,oBAAoB,EAAE;oBACpB,MAAM,EAAE,GAAG;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;YACxC,WAAW,EAAE,CAAC;YACd,IAAI,EAAE,aAAa;SACpB;QACD,~~iBAAiB~~,EAAE;~~YACjB~~,QAAQ,EAAE,SAAS,CAAC,KAAK;YACzB,~~IAAI~~,EAAE,~~KAAK~~,CAAC,~~cAAc,CAAC,~~QAAQ;~~YACnC~~,~~SAAS;gBACP~~,~~GAAC~~,~~yBAAyB~~,~~IAAG;oBAC3B~~,~~IAAI~~,~~EAAE~~,~~oBAAoB~~;~~iBAC3B~~;~~mBACF;SACF;~~KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, FontSizes, ~~HighContrastSelectorBlack~~ } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IArcProps): IArcStyles => {\n const { color, href, theme } = props;\n return {\n root: {\n fill: color,\n cursor: href ? 'pointer' : 'default',\n stroke: DefaultPalette.white,\n outline: 'transparent',\n selectors: {\n '::-moz-focus-inner': {\n border: '0',\n },\n },\n },\n focusRing: {\n stroke: theme.semanticColors.focusBorder,\n strokeWidth: 4,\n fill: 'transparent',\n },\n ~~insideDonutString~~: {\n fontSize: FontSizes.~~large~~,\n ~~fill~~: ~~theme~~.~~semanticColors.bodyText~~,\n ~~selectors: {\n [HighContrastSelectorBlack]: {\n~~ fill: ~~'rgb(179, 179, 179)'~~,\n ~~},\n },\n~~ },\n };\n};\n"]}
1	+ {"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAErF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAgB;IAChC,IAAA,KAAK,GAAkB,KAAK,MAAvB,EAAE,IAAI,GAAY,KAAK,KAAjB,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;IACrC,OAAO;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,KAAK;YACX,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACpC,MAAM,EAAE,cAAc,CAAC,KAAK;YAC5B,OAAO,EAAE,aAAa;YACtB,SAAS,EAAE;gBACT,oBAAoB,EAAE;oBACpB,MAAM,EAAE,GAAG;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;YACxC,WAAW,EAAE,CAAC;YACd,IAAI,EAAE,aAAa;SACpB;QACD,QAAQ,EAAE;YACR,QAAQ,EAAE,SAAS,CAAC,KAAK;YACzB,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACnC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IArcProps, IArcStyles } from './Arc.types';\nimport { DefaultPalette, FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IArcProps): IArcStyles => {\n const { color, href, theme } = props;\n return {\n root: {\n fill: color,\n cursor: href ? 'pointer' : 'default',\n stroke: DefaultPalette.white,\n outline: 'transparent',\n selectors: {\n '::-moz-focus-inner': {\n border: '0',\n },\n },\n },\n focusRing: {\n stroke: theme.semanticColors.focusBorder,\n strokeWidth: 4,\n fill: 'transparent',\n },\n arcLabel: {\n fontSize: FontSizes.small,\n fontWeight: FontWeights.semibold,\n fill: theme.palette.neutralPrimary,\n },\n };\n};\n"]}

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

@@ -69,6 +69,18 @@ export interface IArcProps {
      * props for inside donut value
      */
     valueInsideDonut?: string | number;
+    /**
+     * Prop to show the arc labels in percentage format
+     */
+    showLabelsInPercent?: boolean;
+    /**
+     * Prop used to define the sum of all arc values
+     */
+    totalValue?: number;
+    /**
+     * Prop to hide the arc labels
+     */
+    hideLabels?: boolean;
 }
 export interface IArcData {
     /**
@@ -101,12 +113,12 @@ export interface IArcStyles {
      * Style set for the card header component root
      */
     root: IStyle;
-    /**
-     * Style set for the inside donut string
-     */
-    insideDonutString: IStyle;
     /**
      * styles for the focus
      */
     focusRing: IStyle;
+    /**
+     * Style for the arc labels
+     */
+    arcLabel: IStyle;
 }

package/lib/components/DonutChart/Arc/Arc.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Data to render in the Arc.\n /\n data?: IArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: IArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius?: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius?: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: 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\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface IArcStyles {\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 /\n ~~styles~~ for the ~~focus~~\n */\n ~~focusRing~~: IStyle;\n}\n"]}
1	+ {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IChartDataPoint } from '../index';\nexport interface IArcProps {\n /*\n Theme\n /\n theme: ITheme;\n /\n Data to render in the Arc.\n /\n data?: IArcData;\n\n /\n Data to render focused Arc\n /\n focusData?: IArcData;\n\n /\n id of the focused arc\n /\n focusedArcId?: string;\n /\n shape for Arc.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n arc?: any;\n\n /\n innerRadius of the Arc.\n /\n innerRadius?: number;\n\n /\n outerRadius of the Arc.\n /\n outerRadius?: number;\n\n /\n Color for the Arc.\n /\n color: string;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n hoverOnCallback?: Function;\n\n /\n Defines the function that is executed upon hovering over the legend\n /\n onFocusCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n onBlurCallback?: Function;\n\n /\n Defines the function that is executed upon hovering Leave the legend\n /\n hoverLeaveCallback?: Function;\n\n /\n Uniq string for chart\n /\n uniqText?: string;\n\n /\n string for callout id\n /\n calloutId?: string;\n\n /\n Active Arc for chart\n /\n activeArc?: 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 Prop to show the arc labels in percentage format\n /\n showLabelsInPercent?: boolean;\n\n /\n Prop used to define the sum of all arc values\n /\n totalValue?: number;\n\n /\n Prop to hide the arc labels\n /\n hideLabels?: boolean;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IChartDataPoint;\n /\n endAngle of the Arc\n /\n endAngle: number;\n /\n index of the Arc\n /\n index: number;\n /\n padAngle of the Arc\n /\n padAngle: number;\n /\n startAngle of the Arc\n /\n startAngle: number;\n /\n value of the Arc\n /\n value: number;\n}\n\nexport interface IArcStyles {\n /\n Style set for the card header component root\n /\n root: IStyle;\n\n /\n styles for the focus\n /\n focusRing: IStyle;\n\n /\n Style for the arc labels\n */\n arcLabel: IStyle;\n}\n"]}

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

@@ -59,8 +59,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: '',
@@ -76,11 +76,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 __assign(__assign({}, widthState), heightState);
     };
     DonutChartBase.prototype.componentDidMount = function () {
         /* 80% Height to the Chart
@@ -97,10 +102,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,
         });
@@ -112,7 +122,7 @@ var DonutChartBase = /** @class */ (function (_super) {
             React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, handleTabKey: 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(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(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, __assign({ target: this._currentHoverElement, alignTargetEdge: true, isBeakVisible: false, directionalHint: 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, getAccessibleDataObject(this.state.callOutAccessibilityData, 'text', false)), this.props.onRenderCalloutPerDataPoint ? (this.props.onRenderCalloutPerDataPoint(this.state.dataPointCalloutProps)) : (React.createElement(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/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/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/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/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/components/DonutChart/Pie/Pie.js CHANGED Viewed

@@ -2,17 +2,29 @@ import { __extends } from "tslib";
 import * as React from 'react';
 import * as shape from 'd3-shape';
 import { Arc } from '../Arc/index';
+import { classNamesFunction } from '@fluentui/react/lib/Utilities';
+import { getStyles } from './Pie.styles';
+import { wrapTextInsideDonut } from '../../../utilities/index';
+var getClassNames = classNamesFunction();
+var TEXT_PADDING = 5;
 var Pie = /** @class */ (function (_super) {
     __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(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(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()
@@ -28,7 +40,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(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(getStyles, {
+            theme: this.props.theme,
+        });
+        wrapTextInsideDonut(classNames.insideDonutString, this.props.innerRadius * 2 - TEXT_PADDING);
     };
     Pie.prototype._hoverCallback = function (data, e) {
         this.props.hoverOnCallback(data, e);

package/lib/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,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,KAAK,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,GAAG,EAAY,MAAM,cAAc,CAAC;~~AAG7C~~;IAAyB,uBAA8B;~~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,GAAG,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~~;~~SApEY~~,GAAG","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/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/components/DonutChart/Pie/Pie.styles.js CHANGED Viewed

@@ -1,6 +1,19 @@
+import { FontSizes, FontWeights, HighContrastSelectorBlack } from '@fluentui/react/lib/Styling';
 export var getStyles = function (props) {
+    var _a;
+    var theme = props.theme;
     return {
         root: {},
+        insideDonutString: {
+            fontSize: FontSizes.xLargePlus,
+            fontWeight: FontWeights.semibold,
+            fill: theme.semanticColors.bodyText,
+            selectors: (_a = {},
+                _a[HighContrastSelectorBlack] = {
+                    fill: 'rgb(179, 179, 179)',
+                },
+                _a),
+        },
     };
 };
 //# sourceMappingURL=Pie.styles.js.map

package/lib/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":"~~AAEA~~,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,~~KAAgB~~;~~IACxC~~,OAAO;QACL,IAAI,EAAE,EAAE;~~KACT~~,CAAC;AACJ,CAAC,CAAC","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,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAEhG,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAqB;;IACrC,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IACxB,OAAO;QACL,IAAI,EAAE,EAAE;QACR,iBAAiB,EAAE;YACjB,QAAQ,EAAE,SAAS,CAAC,UAAU;YAC9B,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ;YACnC,SAAS;gBACP,GAAC,yBAAyB,IAAG;oBAC3B,IAAI,EAAE,oBAAoB;iBAC3B;mBACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","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/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/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/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;