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

@fluentui/react-charting 5.17.2 → 5.17.4

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

Files changed (110) hide show

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAElC,~~2DAAmE~~;~~AACnE~~,2CAAyC;AACzC,~~0DAAqE~~;~~AAErE~~;IAAyB,+~~BAA8B~~;~~IAAvD;QAAA~~,~~qEAsBC~~;~~QAjBQ~~,~~WAAK~~,~~GAAO~~,~~EAAE~~,CAAC;~~QAOf~~,iBAAW,GAAG,UAAC,QAAmB;YACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;;~~IAQJ~~,CAAC;~~IAfe~~,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;~~IAMM~~,oBAAM,GAAb;;~~QACQ~~,IAAA,~~KAAiB~~,IAAI,CAAC,KAAK,~~EAAzB~~,~~KAAK,WAAA,EAAE,GAAG,SAAe,CAAC~~;~~QAClC~~,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,sBAAS,~~EAAE~~,EAAE,KAAK,~~OAAA~~,~~EAAE~~,CAAC,CAAC;~~QACvD~~,OAAO,~~8BAAM~~,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,~~EAAE~~,SAAS,EAAE,UAAU,CAAC,~~IAAI~~,~~EAAE~~,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,~~GAAI~~,CAAC;~~IAC/G~~,CAAC;~~IApBa~~,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;KACjB,CAAC;~~IAmBJ~~,UAAC;CAAA,~~AAtBD~~,CAAyB,KAAK,CAAC,SAAS,~~GAsBvC~~;~~AAtBY~~,kBAAG;~~AAwBhB~~;IAAgC,sCAAG;~~IAAnC~~;;~~IAeA~~,CAAC;~~IAdQ~~,2BAAM,GAAb;~~QACQ~~,IAAA,~~KAAyB~~,IAAI,CAAC,KAAK,~~EAAjC~~,IAAI,UAAA,EAAE,~~GAAG~~,~~SAAA~~,~~EAAE~~,~~OAAO~~,~~aAAe~~,CAAC;~~QACpC~~,IAAA,KAAmB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,~~EAApC~~,MAAM,QAAA,EAAE,MAAM,~~QAAsB~~,CAAC;~~QAC5C~~,IAAM,~~cAAc~~,GAAG,~~oBAAa~~,~~MAAM~~,~~eAAK~~,~~MAAM~~,~~MAAG~~,CAAC;~~QAEzD~~,OAAO,CACL,~~2BAAG~~,SAAS,EAAC,KAAK;~~YACf~~,iBAAM,MAAM,WAAE;YACf,~~8BAAM~~,SAAS,EAAE,~~cAAc~~,EAAE,~~UAAU~~,~~EAAC~~,~~QAAQ~~;~~gBACjD~~,~~IAAK~~,CAAC,~~IAAK~~,CAAC,CAAC~~;;gBAAG~~,IAAA,iCAAqB,EAAC,~~IAAK~~,~~CAAC~~,~~IAAK~~,CAAC,CAAC,EAAE,OAAO,CAAC,~~CACzD~~,~~CACL~~,CACL,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,~~AAfD~~,CAAgC,GAAG,~~GAelC~~;~~AAfY~~,gCAAU;~~AAiBvB~~,SAAS,YAAY,CAAC,QAAmB;IACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IArcProps, IArcStyles } from './Arc.types';\nimport { classNamesFunction } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { convertToLocaleString } from '../../../utilities/utilities';\n\nexport class Arc extends React.Component<IArcProps, {}> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n ~~public~~ ~~state~~: ~~{} = {}~~;\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n _updateChart(nextProps);\n return null;\n }\n\n public updateChart = (newProps: IArcProps) => {\n _updateChart(newProps);\n };\n\n public render(): JSX.Element {\n const { ~~color,~~ arc } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(getStyles, { ~~color~~ });\n return <path d={arc(this.props.data)} className={classNames.~~root~~} onClick={this.props.data?.data.onClick} ~~/>;\~~n }\n}\n\nexport class LabeledArc extends Arc {\n public render(): JSX.Element {\n const { data, ~~arc,~~ culture } = this.props;\n const [labelX, labelY] = arc.centroid(data);\n const ~~labelTranslate~~ = ~~`translate~~(${~~labelX~~}, ~~${labelY~~})`;\n\n return (\n <g ~~className~~=\"~~arc~~\">\n {super.render()}\n <~~text transform~~={~~labelTranslate~~} ~~textAnchor=\"middle~~\~~">\~~n {data!.data!.x}-{convertToLocaleString(data!.data!.y, culture)}\n ~~</text>\~~n </g>\n );\n }\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}
1	+ {"version":3,"file":"Arc.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAElC,2DAAkF;AAClF,2CAAyC;AACzC,0DAAkF;AAClF,oEAAmE;AAEnE;IAAyB,+BAAqC;IAY5D,aAAmB,KAAgB;QAAnC,YACE,kBAAM,KAAK,CAAC,SAMb;QAEM,iBAAW,GAAG,UAAC,QAAmB;YACvC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACzB,CAAC,CAAC;QAgBQ,cAAQ,GAAG;YACnB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC;QACxC,CAAC,CAAC;QAEQ,aAAO,GAAG;YAClB,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,CAAC,CAAC;QA/BA,KAAI,CAAC,KAAK,GAAG;YACX,YAAY,EAAE,KAAK;SACpB,CAAC;QAEF,KAAI,CAAC,MAAM,GAAG,IAAA,iBAAK,EAAC,cAAc,CAAC,CAAC;;IACtC,CAAC;IAZa,4BAAwB,GAAtC,UAAuC,SAA8B;QACnE,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,OAAO,IAAI,CAAC;IACd,CAAC;IAeM,oBAAM,GAAb;QAAA,iBAYC;;QAXS,IAAA,GAAG,GAAK,IAAI,CAAC,KAAK,IAAf,CAAgB;QAC3B,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,sBAAS,EAAC,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAlC,CAAkC,uBAAO,IAAI,CAAC,KAAK,EAAG,CAAC;QAEjG,OAAO,CACL,8BACE,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EACvB,SAAS,EAAE,UAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAE,EACzF,OAAO,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,IAAI,0CAAE,IAAI,CAAC,OAAO,GACtC,CACH,CAAC;IACJ,CAAC;IApCa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK,CAAC,GAAG,EAAE;KACjB,CAAC;IA2CJ,UAAC;CAAA,AA9CD,CAAyB,KAAK,CAAC,SAAS,GA8CvC;AA9CY,kBAAG;AAgDhB;IAAgC,sCAAG;IAGjC,oBAAmB,KAAgB;QAAnC,YACE,kBAAM,KAAK,CAAC,SAEb;QALO,YAAM,GAAG,IAAA,kBAAM,GAAE,CAAC;QAIxB,KAAI,CAAC,MAAM,GAAG,IAAA,iBAAK,EAAC,cAAc,CAAC,CAAC;;IACtC,CAAC;IAEM,2BAAM,GAAb;QAAA,iBA+CC;;QA9CO,IAAA,KAAoB,IAAI,CAAC,KAAK,EAA5B,IAAI,UAAA,EAAE,OAAO,aAAe,CAAC;QACrC,IAAM,GAAG,GAAG,CAAC,CAAC;QACd,wCAAwC;QAClC,IAAA,KAAmB,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC;YAC5C,QAAQ,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,KAAI,CAAC;YAC7B,UAAU,EAAE,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,CAAC;YACjC,QAAQ,EAAE,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ;YACxB,WAAW,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,KAAI,CAAC;YACzC,WAAW,EAAE,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW,KAAI,CAAC,GAAG,GAAG;SAChD,CAAC,EANK,MAAM,QAAA,EAAE,MAAM,QAMnB,CAAC;QAEH,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAyB,CAAC;QAClE,IAAM,UAAU,GAAG,aAAa,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,sBAAS,EAAC,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,EAAlC,CAAkC,CAAC,CAAC;QAE9E,IAAM,KAAK,GAAG,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,KAAI,CAAC,CAAC,GAAG,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,KAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;QAEpE,IAAM,OAAO,GAAG,UAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,cAAI,IAAA,iCAAqB,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAE,CAAC;QAElF,OAAO,CACL,2BACE,SAAS,EAAE,UAAG,UAAU,CAAC,GAAG,SAAM,uBACf,IAAI,EACvB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,MAAM,EAAE,IAAI,CAAC,OAAO,gBACR,OAAO,EACnB,IAAI,EAAC,KAAK;YAET,iBAAM,MAAM,WAAE;YACf,oBAAC,+BAAc,IACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE;oBACT,CAAC,EAAE,MAAM;oBACT,CAAC,EAAE,MAAM;oBACT,gBAAgB,EAAE,KAAK,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;oBACvF,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO;oBACnG,YAAY,EAAE,UAAG,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,cAAI,IAAA,iCAAqB,EAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,CAAE;oBAC/E,SAAS,EAAE,UAAU,CAAC,OAAO;iBAC9B,EACD,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,EAC7C,kBAAkB,EAAE,KAAK,EACzB,QAAQ,EAAE,EAAE,EACZ,WAAW,EAAE,uBAAW,GACxB,CACA,CACL,CAAC;IACJ,CAAC;IACH,iBAAC;AAAD,CAAC,AAxDD,CAAgC,GAAG,GAwDlC;AAxDY,gCAAU;AA0DvB,SAAS,YAAY,CAAC,QAAmB;IACvC,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,CAAC,GAAG,CAAC,WAAW,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;AACjD,CAAC","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport { IArcProps, IArcState, IArcStyles } from './Arc.types';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { wrapContent, convertToLocaleString } from '../../../utilities/utilities';\nimport { SVGTooltipText } from '../../../utilities/SVGTooltipText';\n\nexport class Arc extends React.Component<IArcProps, IArcState> {\n public static defaultProps: Partial<IArcProps> = {\n arc: shape.arc(),\n };\n\n protected _arcId: string;\n\n public static getDerivedStateFromProps(nextProps: Readonly<IArcProps>): null {\n _updateChart(nextProps);\n return null;\n }\n\n public constructor(props: IArcProps) {\n super(props);\n this.state = {\n isArcFocused: false,\n };\n\n this._arcId = getId('piechart_arc');\n }\n\n public updateChart = (newProps: IArcProps) => {\n _updateChart(newProps);\n };\n\n public render(): JSX.Element {\n const { arc } = this.props;\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(props => getStyles(props, this.props.theme), { ...this.props });\n\n return (\n <path\n d={arc(this.props.data)}\n className={`${this.state.isArcFocused ? classNames.arcRootFocussed : classNames.arcRoot}`}\n onClick={this.props.data?.data.onClick}\n />\n );\n }\n\n protected _onFocus = () => {\n this.setState({ isArcFocused: true });\n };\n\n protected _onBlur = () => {\n this.setState({ isArcFocused: false });\n };\n}\n\nexport class LabeledArc extends Arc {\n private _isRTL = getRTL();\n\n public constructor(props: IArcProps) {\n super(props);\n this._arcId = getId('piechart_arc');\n }\n\n public render(): JSX.Element {\n const { data, culture } = this.props;\n const gap = 4;\n // placing the labels on the outside arc\n const [labelX, labelY] = shape.arc().centroid({\n endAngle: data?.endAngle \|\| 0,\n startAngle: data?.startAngle \|\| 0,\n padAngle: data?.padAngle,\n innerRadius: this.props?.outerRadius \|\| 0,\n outerRadius: this.props?.outerRadius \|\| 0 + gap,\n });\n\n const getClassNames = classNamesFunction<IArcProps, IArcStyles>();\n const classNames = getClassNames(props => getStyles(props, this.props.theme));\n\n const angle = ((data?.startAngle \|\| 0) + (data?.endAngle \|\| 0)) / 2;\n\n const content = `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`;\n\n return (\n <g\n className={`${classNames.arc} arc`}\n data-is-focusable={true}\n id={this._arcId}\n onFocus={this._onFocus}\n onBlur={this._onBlur}\n aria-label={content}\n role=\"img\"\n >\n {super.render()}\n <SVGTooltipText\n content={content}\n textProps={{\n x: labelX,\n y: labelY,\n dominantBaseline: angle > Math.PI / 2 && angle < (3 * Math.PI) / 2 ? 'hanging' : 'auto',\n textAnchor: (!this._isRTL && angle > Math.PI) \|\| (this._isRTL && angle < Math.PI) ? 'end' : 'start',\n 'aria-label': `${data?.data.x}-${convertToLocaleString(data?.data.y, culture)}`,\n className: classNames.arcText,\n }}\n isTooltipVisibleProp={this.state.isArcFocused}\n shouldReceiveFocus={false}\n maxWidth={40}\n wrapContent={wrapContent}\n />\n </g>\n );\n }\n}\n\nfunction _updateChart(newProps: IArcProps): void {\n newProps.arc.innerRadius(newProps.innerRadius);\n newProps.arc.outerRadius(newProps.outerRadius);\n}\n"]}

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

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

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

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getStyles = void 0;
 var Styling_1 = require("@fluentui/react/lib/Styling");
-var getStyles = function (props) {
+var getStyles = function (props, theme) {
     var color = props.color;
     return {
-        root: { fill: color, stroke: Styling_1.DefaultPalette.white, strokeWidth: 2 },
+        arcRoot: { fill: color },
+        arcRootFocussed: { fill: color, stroke: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || Styling_1.DefaultPalette.black, strokeWidth: 2 },
+        arc: { outline: 'none' },
+        arcText: { fill: (theme === null || theme === void 0 ? void 0 : theme.palette.black) || Styling_1.DefaultPalette.black, outline: 'none' },
     };
 };
 exports.getStyles = getStyles;

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IArcProps {\n /*\n Data to render in the Arc.\n /\n data?: IArcData;\n\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 outerRadius of the Arc.\n /\n outerRadius?: number;\n /\n Color for the Arc.\n /\n color: string;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IDataPoint;\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"]}
1	+ {"version":3,"file":"Arc.types.js","sourceRoot":"../src/","sources":["components/PieChart/Arc/Arc.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IArcProps {\n /*\n Data to render in the Arc.\n /\n data?: IArcData;\n\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 outerRadius of the Arc.\n /\n outerRadius?: number;\n /\n Color for the Arc.\n /\n color: string;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n /\n to pass the theme\n /\n theme?: ITheme;\n}\n\nexport interface IArcState {\n /\n The state controls, whether the arc needs to be focused or not\n /\n isArcFocused?: boolean;\n}\n\nexport interface IArcData {\n /\n Data to render in the chart for individual arc.\n /\n data: IDataPoint;\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 arcRoot: IStyle;\n\n arc: IStyle;\n\n arcRootFocussed: IStyle;\n\n arcText: IStyle;\n}\n"]}

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

@@ -6,28 +6,39 @@ var React = require("react");
 var shape = require("d3-shape");
 var scale = require("d3-scale");
 var Arc_1 = require("../Arc/Arc");
+var react_focus_1 = require("@fluentui/react-focus");
+var colors_1 = require("../../../utilities/colors");
 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) {
-            return (React.createElement(Arc_1.LabeledArc, { culture: _this.props.culture, key: i, data: d, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: "".concat(_this.colors(i)) }));
+            return (React.createElement(Arc_1.LabeledArc, { culture: _this.props.culture, key: i, data: d, innerRadius: _this.props.innerRadius, outerRadius: _this.props.outerRadius, color: "".concat(_this.colors(i)), theme: _this.props.theme }));
         };
         return _this;
     }
     Pie.prototype.render = function () {
         var _this = this;
         // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();
-        var _a = this.props, pie = _a.pie, colors = _a.colors, data = _a.data, width = _a.width, height = _a.height, chartTitle = _a.chartTitle;
-        this.colors = scale.scaleOrdinal().range(colors);
+        var _a = this.props, pie = _a.pie, data = _a.data, width = _a.width, height = _a.height, chartTitle = _a.chartTitle, theme = _a.theme;
+        var defaultColors = [];
+        if (data && !this.props.colors) {
+            for (var i = 0; i < data.length; i++) {
+                defaultColors.push((0, colors_1.getNextColor)(i, 0, theme === null || theme === void 0 ? void 0 : theme.isInverted));
+            }
+        }
+        var _b = this.props.colors, colors = _b === void 0 ? defaultColors : _b;
+        this.colors = scale.scaleOrdinal().range(colors.map(function (color) { return (0, colors_1.getColorFromToken)(color); }));
         var piechart = pie(data);
         var translate = "translate(".concat(width / 2, ", ").concat(height / 2, ")");
-        return (React.createElement("svg", { width: width, height: height, "aria-label": chartTitle },
-            React.createElement("g", { transform: translate }, piechart.map(function (d, i) { return _this.arcGenerator(d, i); }))));
+        return (React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.domOrder },
+            React.createElement("svg", { width: width, height: height, "aria-label": chartTitle },
+                React.createElement("g", { className: "pie", transform: translate }, piechart.map(function (d, i) { return _this.arcGenerator(d, i); })))));
     };
     Pie.defaultProps = {
         pie: shape
             .pie()
+            .padAngle(0.01)
             .sort(null)
             /* eslint-disable @typescript-eslint/no-explicit-any */
             .value(function (d) { return d.y; }),

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAClC,gCAAkC;AAElC,kCAAwC;~~AAGxC~~;IAAyB,+BAA8B;~~IAUrD~~,aAAY,KAAgB;QAA5B,YACE,kBAAM,KAAK,CAAC,SACb;QAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;YAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,~~GAC1B~~,CACH,CAAC;QACJ,CAAC,CAAC;;~~IAbF~~,CAAC;~~IAeM~~,oBAAM,GAAb;QAAA,~~iBAcC~~;~~QAbC~~,qEAAqE;QAC/D,IAAA,~~KAAmD~~,IAAI,CAAC,KAAK,~~EAA3D~~,GAAG,SAAA,EAAE,MAAM,YAAA,EAAE,IAAI,~~UAAA~~,EAAE,KAAK,~~WAAA~~,EAAE,MAAM,~~YAAA~~,EAAE,UAAU,~~gBAAe~~,CAAC;~~QAEpE~~,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,~~MAAO~~,CAAC,CAAC;~~QAElD~~,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;QAE3D,OAAO,CACL,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;~~YACvD~~,2BAAG,SAAS,EAAE,SAAS,~~IAAG~~,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,~~CAAK~~,~~CAC5F~~,~~CACP~~,CAAC;IACJ,CAAC;~~IAxCa~~,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK;aACP,GAAG,EAAE;aACL,IAAI,CAAC,IAAI,CAAC;YACX,uDAAuD;aACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;KAC1B,CAAC;~~IAmCJ~~,UAAC;CAAA,~~AA1CD~~,CAAyB,KAAK,CAAC,SAAS,~~GA0CvC~~;~~AA1CY~~,kBAAG","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport * as scale from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\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 @typescript-eslint/no-explicit-any */\n .value((d: any) => d.y),\n };\n private colors: scale.ScaleOrdinal<string \| number, any>;\n\n constructor(props: IPieProps) {\n super(props);\n }\n\n public arcGenerator = (d: IArcData, i: number): JSX.Element => {\n return (\n <LabeledArc\n culture={this.props.culture}\n key={i}\n data={d}\n innerRadius={this.props.innerRadius}\n outerRadius={this.props.outerRadius}\n color={`${this.colors(i)}`}\n />\n );\n };\n\n public render(): JSX.Element {\n // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n const { pie, ~~colors,~~ data, width, height, chartTitle } = this.props;\n\n this.colors = scale.scaleOrdinal().range(colors!);\n\n const piechart = pie(data);\n const translate = `translate(${width / 2}, ${height / 2})`;\n\n return (\n <svg width={width} height={height} aria-label={chartTitle}>\n <g transform={translate}>{piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}</g>\n </svg>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"Pie.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,gCAAkC;AAClC,gCAAkC;AAElC,kCAAwC;AAExC,qDAAsE;AACtE,oDAA4E;AAE5E;IAAyB,+BAA8B;IAWrD,aAAY,KAAgB;QAA5B,YACE,kBAAM,KAAK,CAAC,SACb;QAEM,kBAAY,GAAG,UAAC,CAAW,EAAE,CAAS;YAC3C,OAAO,CACL,oBAAC,gBAAU,IACT,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,OAAO,EAC3B,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,WAAW,EAAE,KAAI,CAAC,KAAK,CAAC,WAAW,EACnC,KAAK,EAAE,UAAG,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAE,EAC1B,KAAK,EAAE,KAAI,CAAC,KAAK,CAAC,KAAK,GACvB,CACH,CAAC;QACJ,CAAC,CAAC;;IAdF,CAAC;IAgBM,oBAAM,GAAb;QAAA,iBA0BC;QAzBC,qEAAqE;QAC/D,IAAA,KAAkD,IAAI,CAAC,KAAK,EAA1D,GAAG,SAAA,EAAE,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAA,EAAE,KAAK,WAAe,CAAC;QAEnE,IAAM,aAAa,GAAkB,EAAE,CAAC;QACxC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAC9B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;gBACpC,aAAa,CAAC,IAAI,CAAC,IAAA,qBAAY,EAAC,CAAC,EAAE,CAAC,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,UAAU,CAAC,CAAC,CAAC;aAC3D;SACF;QACO,IAAA,KAA2B,IAAI,CAAC,KAAK,OAAf,EAAtB,MAAM,mBAAG,aAAa,KAAA,CAAgB;QAE9C,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,IAAA,0BAAiB,EAAC,KAAK,CAAC,EAAxB,CAAwB,CAAC,CAAC,CAAC;QAExF,IAAM,QAAQ,GAAG,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAM,SAAS,GAAG,oBAAa,KAAK,GAAG,CAAC,eAAK,MAAM,GAAG,CAAC,MAAG,CAAC;QAE3D,OAAO,CACL,oBAAC,uBAAS,IAAC,SAAS,EAAE,gCAAkB,CAAC,QAAQ;YAC/C,6BAAK,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAc,UAAU;gBACvD,2BAAG,SAAS,EAAC,KAAK,EAAC,SAAS,EAAE,SAAS,IACpC,QAAQ,CAAC,GAAG,CAAC,UAAC,CAAW,EAAE,CAAS,IAAK,OAAA,KAAI,CAAC,YAAY,CAAC,CAAC,EAAE,CAAC,CAAC,EAAvB,CAAuB,CAAC,CAChE,CACA,CACI,CACb,CAAC;IACJ,CAAC;IAtDa,gBAAY,GAAuB;QAC/C,GAAG,EAAE,KAAK;aACP,GAAG,EAAE;aACL,QAAQ,CAAC,IAAI,CAAC;aACd,IAAI,CAAC,IAAI,CAAC;YACX,uDAAuD;aACtD,KAAK,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC;KAC1B,CAAC;IAgDJ,UAAC;CAAA,AAxDD,CAAyB,KAAK,CAAC,SAAS,GAwDvC;AAxDY,kBAAG","sourcesContent":["import * as React from 'react';\nimport * as shape from 'd3-shape';\nimport * as scale from 'd3-scale';\nimport { IPieProps } from './Pie.types';\nimport { LabeledArc } from '../Arc/Arc';\nimport { IArcData } from '../Arc/Arc.types';\nimport { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';\nimport { getColorFromToken, getNextColor } from '../../../utilities/colors';\n\nexport class Pie extends React.Component<IPieProps, {}> {\n public static defaultProps: Partial<IPieProps> = {\n pie: shape\n .pie()\n .padAngle(0.01)\n .sort(null)\n /* eslint-disable @typescript-eslint/no-explicit-any */\n .value((d: any) => d.y),\n };\n private colors: scale.ScaleOrdinal<string \| number, any>;\n\n constructor(props: IPieProps) {\n super(props);\n }\n\n public arcGenerator = (d: IArcData, i: number): JSX.Element => {\n return (\n <LabeledArc\n culture={this.props.culture}\n key={i}\n data={d}\n innerRadius={this.props.innerRadius}\n outerRadius={this.props.outerRadius}\n color={`${this.colors(i)}`}\n theme={this.props.theme}\n />\n );\n };\n\n public render(): JSX.Element {\n // const getClassNames = classNamesFunction<IPieProps, IPieStyles>();\n const { pie, data, width, height, chartTitle, theme } = this.props;\n\n const defaultColors: Array<string> = [];\n if (data && !this.props.colors) {\n for (let i = 0; i < data.length; i++) {\n defaultColors.push(getNextColor(i, 0, theme?.isInverted));\n }\n }\n const { colors = defaultColors } = this.props;\n\n this.colors = scale.scaleOrdinal().range(colors.map(color => getColorFromToken(color)));\n\n const piechart = pie(data);\n const translate = `translate(${width / 2}, ${height / 2})`;\n\n return (\n <FocusZone direction={FocusZoneDirection.domOrder}>\n <svg width={width} height={height} aria-label={chartTitle}>\n <g className=\"pie\" transform={translate}>\n {piechart.map((d: IArcData, i: number) => this.arcGenerator(d, i))}\n </g>\n </svg>\n </FocusZone>\n );\n }\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { IStyle } from '@fluentui/react/lib/Styling';
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
 import { IDataPoint } from '../PieChart.types';
 export interface IPieProps {
     /**
@@ -37,6 +37,7 @@ export interface IPieProps {
      * The prop used to define the culture to localized the numbers
      */
     culture?: string;
+    theme?: ITheme;
 }
 export interface IPieStyles {
     /**

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pie.types.js","sourceRoot":"../src/","sources":["components/PieChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IPieProps {\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: IDataPoint[];\n /\n colors to render in the Pie.\n /\n colors?: string[];\n /\n Title to apply to the whole chart.\n /\n chartTitle?: string;\n /\n shape for pie.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n pie?: any;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: 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/PieChart/Pie/Pie.types.ts"],"names":[],"mappings":"","sourcesContent":["import { IStyle, ITheme } from '@fluentui/react/lib/Styling';\nimport { IDataPoint } from '../PieChart.types';\n\nexport interface IPieProps {\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: IDataPoint[];\n /\n colors to render in the Pie.\n /\n colors?: string[];\n /\n Title to apply to the whole chart.\n /\n chartTitle?: string;\n /\n shape for pie.\n /\n / eslint-disable @typescript-eslint/no-explicit-any /\n pie?: any;\n\n /\n The prop used to define the culture to localized the numbers\n /\n culture?: string;\n\n theme?: ITheme;\n}\n\nexport interface IPieStyles {\n /\n Style set for the card header component root\n */\n root: IStyle;\n}\n"]}

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

@@ -22,11 +22,17 @@ var PieChartBase = /** @class */ (function (_super) {
             height: height,
             className: className,
         });
-        var radius = Math.min(width, height) / 2;
-        var outerRadius = radius - 10;
+        var TEXT_MAX_WIDTH = 40;
+        var TEXT_LINE_HEIGHT = 16;
+        /**
+         * The radius for the pie chart is computed based on the space available inside the svg
+         * after subtracting the max amount of space that can be used by the text in pie chart
+         */
+        var radius = Math.min(width - 2 * TEXT_MAX_WIDTH, height - 2 * TEXT_LINE_HEIGHT) / 2;
+        var outerRadius = radius;
         return !this._isChartEmpty() ? (React.createElement("div", { className: this._classNames.root },
             this.props.chartTitle && React.createElement("p", { className: this._classNames.chartTitle }, this.props.chartTitle),
-            React.createElement(Pie_1.Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 0, data: data, colors: colors, chartTitle: chartTitle }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
+            React.createElement(Pie_1.Pie, { culture: culture, width: width, height: height, outerRadius: outerRadius, innerRadius: 1, data: data, colors: colors, chartTitle: chartTitle, theme: theme }))) : (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
     };
     PieChartBase.prototype._isChartEmpty = function () {
         return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(function (item) { return item.y > 0; }).length > 0);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,2DAA0E;AAE1E,iCAAgC;AAGhC,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;AAEjF;IAAkC,wCAAmC;IASnE,sBAAmB,KAAqB;QAAxC,YACE,kBAAM,KAAK,CAAC,SAEb;QADC,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,iBAAiB,CAAC,CAAC;;IAChD,CAAC;IAEM,6BAAM,GAAb;QACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;QACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,KAAK,EAAE,KAAM;YACb,MAAM,EAAE,MAAO;YACf,SAAS,WAAA;SACV,CAAC,CAAC;~~QACH~~,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,EAAE,MAAO,CAAC,GAAG,CAAC,CAAC;~~QAC7C~~,IAAM,WAAW,GAAG,MAAM,~~GAAG,EAAE,~~CAAC;~~QAEhC~~,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;YAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;YAChG,oBAAC,SAAG,IACF,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAM,EACb,MAAM,EAAE,MAAO,EACf,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,~~GACvB~~,CACE,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;IACJ,CAAC;IAEO,oCAAa,GAArB;QACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACnH,CAAC;~~IApDa~~,yBAAY,GAA4B;QACpD,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ,CAAC;~~IAiDJ~~,mBAAC;CAAA,~~AAtDD~~,CAAkC,KAAK,CAAC,SAAS,~~GAsDhD~~;~~AAtDY~~,oCAAY","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { Pie } from './Pie/Pie';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\n\nconst getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();\n\nexport class PieChartBase extends React.Component<IPieChartProps, {}> {\n public static defaultProps: Partial<IPieChartProps> = {\n data: [],\n width: 600,\n height: 350,\n };\n private _classNames: IProcessedStyleSet<IPieChartStyles>;\n private _emptyChartId: string;\n\n public constructor(props: IPieChartProps) {\n super(props);\n this._emptyChartId = getId('_PieChart_empty');\n }\n\n public render(): JSX.Element {\n const { data, width, height, colors, chartTitle } = this.props;\n\n const { theme, className, styles, culture } = this.props;\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n width: width!,\n height: height!,\n className,\n });\n const radius = Math.min(width!, height!) / 2;\n const outerRadius = radius ~~- 10~~;\n\n return !this._isChartEmpty() ? (\n <div className={this._classNames.root}>\n {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}\n <Pie\n culture={culture}\n width={width!}\n height={height!}\n outerRadius={outerRadius}\n innerRadius={0}\n data={data!}\n colors={colors!}\n chartTitle={chartTitle!}\n />\n </div>\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);\n }\n}\n"]}
1	+ {"version":3,"file":"PieChart.base.js","sourceRoot":"../src/","sources":["components/PieChart/PieChart.base.tsx"],"names":[],"mappings":";;;;AAAA,6BAA+B;AAC/B,2DAA0E;AAE1E,iCAAgC;AAGhC,IAAM,aAAa,GAAG,IAAA,8BAAkB,GAAwC,CAAC;AAEjF;IAAkC,wCAAmC;IASnE,sBAAmB,KAAqB;QAAxC,YACE,kBAAM,KAAK,CAAC,SAEb;QADC,KAAI,CAAC,aAAa,GAAG,IAAA,iBAAK,EAAC,iBAAiB,CAAC,CAAC;;IAChD,CAAC;IAEM,6BAAM,GAAb;QACQ,IAAA,KAA8C,IAAI,CAAC,KAAK,EAAtD,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA,EAAE,UAAU,gBAAe,CAAC;QAEzD,IAAA,KAAwC,IAAI,CAAC,KAAK,EAAhD,KAAK,WAAA,EAAE,SAAS,eAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAe,CAAC;QACzD,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC,MAAO,EAAE;YACxC,KAAK,EAAE,KAAM;YACb,KAAK,EAAE,KAAM;YACb,MAAM,EAAE,MAAO;YACf,SAAS,WAAA;SACV,CAAC,CAAC;QAEH,IAAM,cAAc,GAAG,EAAE,CAAC;QAC1B,IAAM,gBAAgB,GAAG,EAAE,CAAC;QAE5B;;;WAGG;QAEH,IAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,KAAM,GAAG,CAAC,GAAG,cAAc,EAAE,MAAO,GAAG,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,CAAC;QACzF,IAAM,WAAW,GAAG,MAAM,CAAC;QAE3B,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC,CAAC,CAC7B,6BAAK,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI;YAClC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,2BAAG,SAAS,EAAE,IAAI,CAAC,WAAW,CAAC,UAAU,IAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAK;YAChG,oBAAC,SAAG,IACF,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAM,EACb,MAAM,EAAE,MAAO,EACf,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,IAAK,EACX,MAAM,EAAE,MAAO,EACf,UAAU,EAAE,UAAW,EACvB,KAAK,EAAE,KAAK,GACZ,CACE,CACP,CAAC,CAAC,CAAC,CACF,6BACE,EAAE,EAAE,IAAI,CAAC,aAAa,EACtB,IAAI,EAAE,OAAO,EACb,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,gBACX,8BAA8B,GAC1C,CACH,CAAC;IACJ,CAAC;IAEO,oCAAa,GAArB;QACE,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,CAAC,CAAC,GAAG,CAAC,EAAV,CAAU,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IACnH,CAAC;IA9Da,yBAAY,GAA4B;QACpD,IAAI,EAAE,EAAE;QACR,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;KACZ,CAAC;IA2DJ,mBAAC;CAAA,AAhED,CAAkC,KAAK,CAAC,SAAS,GAgEhD;AAhEY,oCAAY","sourcesContent":["import * as React from 'react';\nimport { classNamesFunction, getId } from '@fluentui/react/lib/Utilities';\nimport { IPieChartProps, IPieChartStyleProps, IPieChartStyles } from './PieChart.types';\nimport { Pie } from './Pie/Pie';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\n\nconst getClassNames = classNamesFunction<IPieChartStyleProps, IPieChartStyles>();\n\nexport class PieChartBase extends React.Component<IPieChartProps, {}> {\n public static defaultProps: Partial<IPieChartProps> = {\n data: [],\n width: 600,\n height: 350,\n };\n private _classNames: IProcessedStyleSet<IPieChartStyles>;\n private _emptyChartId: string;\n\n public constructor(props: IPieChartProps) {\n super(props);\n this._emptyChartId = getId('_PieChart_empty');\n }\n\n public render(): JSX.Element {\n const { data, width, height, colors, chartTitle } = this.props;\n\n const { theme, className, styles, culture } = this.props;\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n width: width!,\n height: height!,\n className,\n });\n\n const TEXT_MAX_WIDTH = 40;\n const TEXT_LINE_HEIGHT = 16;\n\n /*\n The radius for the pie chart is computed based on the space available inside the svg\n * after subtracting the max amount of space that can be used by the text in pie chart\n /\n\n const radius = Math.min(width! - 2 TEXT_MAX_WIDTH, height! - 2 * TEXT_LINE_HEIGHT) / 2;\n const outerRadius = radius;\n\n return !this._isChartEmpty() ? (\n <div className={this._classNames.root}>\n {this.props.chartTitle && <p className={this._classNames.chartTitle}>{this.props.chartTitle}</p>}\n <Pie\n culture={culture}\n width={width!}\n height={height!}\n outerRadius={outerRadius}\n innerRadius={1}\n data={data!}\n colors={colors!}\n chartTitle={chartTitle!}\n theme={theme}\n />\n </div>\n ) : (\n <div\n id={this._emptyChartId}\n role={'alert'}\n style={{ opacity: '0' }}\n aria-label={'Graph has no data to display'}\n />\n );\n }\n\n private _isChartEmpty(): boolean {\n return !(this.props.data && this.props.data.length > 0 && this.props.data.filter(item => item.y > 0).length > 0);\n }\n}\n"]}

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

@@ -17,6 +17,7 @@ export interface IMultiStackedBarChartState {
     dataPointCalloutProps?: IChartDataPoint;
     callOutAccessibilityData?: IAccessibilityProps;
     calloutLegend: string;
+    barSpacingInPercent: number;
 }
 export declare class MultiStackedBarChartBase extends React.Component<IMultiStackedBarChartProps, IMultiStackedBarChartState> {
     static defaultProps: Partial<IMultiStackedBarChartProps>;
@@ -25,12 +26,20 @@ export declare class MultiStackedBarChartBase extends React.Component<IMultiStac
     private _calloutAnchorPoint;
     private _longestBarTotalValue;
     private _isRTL;
+    private barChartSvgRef;
     private _emptyChartId;
     private _barId;
     private _barIdPlaceholderPartToWhole;
     private _barIdEmpty;
     constructor(props: IMultiStackedBarChartProps);
+    componentDidMount(): void;
     render(): JSX.Element;
+    /**
+     * The Create bar functions returns an array of <rect> elements, which form the bars
+     * For each bar an x value, and a width needs to be specified
+     * The computations are done based on percentages
+     * Extra margin is also provided, in the x value to provide some spacing
+     */
     private _createBarsAndLegends;
     private _onBarFocus;
     private _refCallback;

package/lib-commonjs/components/StackedBarChart/MultiStackedBarChart.base.js CHANGED Viewed

@@ -139,16 +139,27 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
             xCalloutValue: '',
             yCalloutValue: '',
             calloutLegend: '',
+            barSpacingInPercent: 0,
         };
         _this._onLeave = _this._onLeave.bind(_this);
         _this._onBarLeave = _this._onBarLeave.bind(_this);
         _this._calloutId = (0, Utilities_1.getId)('callout');
+        _this.barChartSvgRef = React.createRef();
         _this._emptyChartId = (0, Utilities_1.getId)('_MSBC_empty');
         _this._barId = (0, Utilities_1.getId)('_MSBC_rect_');
         _this._barIdPlaceholderPartToWhole = (0, Utilities_1.getId)('_MSBC_rect_partToWhole_');
         _this._barIdEmpty = (0, Utilities_1.getId)('_MSBC_rect_empty');
         return _this;
     }
+    MultiStackedBarChartBase.prototype.componentDidMount = function () {
+        var _a;
+        var svgWidth = ((_a = this.barChartSvgRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width) || 0;
+        var MARGIN_WIDTH_IN_PX = 3;
+        if (svgWidth) {
+            var currentBarSpacing = (MARGIN_WIDTH_IN_PX / svgWidth) * 100;
+            this.setState({ barSpacingInPercent: currentBarSpacing });
+        }
+    };
     MultiStackedBarChartBase.prototype.render = function () {
         var _this = this;
         if (!this._isChartEmpty()) {
@@ -180,8 +191,18 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
         }
         return (React.createElement("div", { id: this._emptyChartId, role: 'alert', style: { opacity: '0' }, "aria-label": 'Graph has no data to display' }));
     };
+    /**
+     * The Create bar functions returns an array of <rect> elements, which form the bars
+     * For each bar an x value, and a width needs to be specified
+     * The computations are done based on percentages
+     * Extra margin is also provided, in the x value to provide some spacing
+     */
     MultiStackedBarChartBase.prototype._createBarsAndLegends = function (data, barHeight, palette, hideRatio, hideDenominator, href) {
         var _this = this;
+        var _a;
+        var noOfBars = ((_a = data.chartData) === null || _a === void 0 ? void 0 : _a.reduce(function (count, point) { return (count += (point.data || 0) > 0 ? 1 : 0); }, 0)) ||
+            1;
+        var totalMarginPercent = this.state.barSpacingInPercent * (noOfBars - 1);
         var culture = this.props.culture;
         var defaultPalette = [palette.blueLight, palette.blue, palette.blueMid, palette.red, palette.black];
         // calculating starting point of each bar and it's range
@@ -191,7 +212,8 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
         var sumOfPercent = 0;
         data.chartData.map(function (point, index) {
             var pointData = point.data ? point.data : 0;
-            var value = (pointData / total) * 100 ? (pointData / total) * 100 : 0;
+            var currValue = (pointData / total) * 100;
+            var value = currValue ? currValue : 0;
             if (value < 1 && value !== 0) {
                 value = 1;
             }
@@ -214,7 +236,15 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
             }
             sumOfPercent += value_1;
         }
-        var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / 100 : 1;
+        /**
+         * The %age of the space occupied by the margin needs to subtracted
+         * while computing the scaling ratio, since the margins are not being
+         * scaled down, only the data is being scaled down from a higher percentage to lower percentage
+         * Eg: 95% of the space is taken by the bars, 5% by the margins
+         * Now if the sumOfPercent is 120% -> This needs to be scaled down to 95%, not 100%
+         * since that's only space available to the bars
+         */
+        var scalingRatio = sumOfPercent !== 0 ? sumOfPercent / (100 - totalMarginPercent) : 1;
         var prevPosition = 0;
         var value = 0;
         var bars = data.chartData.map(function (point, index) {
@@ -250,13 +280,15 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
             return (React.createElement("g", { key: index, className: point.placeHolder ? _this._classNames.placeHolderOnHover : _this._classNames.opacityChangeOnHover, ref: function (e) {
                     _this._refCallback(e, point.legend);
                 }, "data-is-focusable": !_this.props.hideTooltip, onFocus: _this._onBarFocus.bind(_this, pointData, color, point), onBlur: _this._onBarLeave, role: "img", "aria-label": _this._getAriaLabel(point), onMouseOver: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseMove: point.placeHolder ? undefined : _this._onBarHover.bind(_this, pointData, color, point), onMouseLeave: point.placeHolder ? undefined : _this._onBarLeave, onClick: href ? (point.placeHolder ? undefined : _this._redirectToUrl.bind(_this, href)) : point.onClick },
-                React.createElement("rect", { key: index, id: "".concat(_this._barId, "-").concat(index), x: "".concat(_this._isRTL ? 100 - startingPoint[index] - value : startingPoint[index], "%"), y: 0, width: value + '%', height: barHeight, fill: color })));
+                React.createElement("rect", { key: index, id: "".concat(_this._barId, "-").concat(index), x: "".concat(_this._isRTL
+                        ? 100 - startingPoint[index] - value - _this.state.barSpacingInPercent * index
+                        : startingPoint[index] + _this.state.barSpacingInPercent * index, "%"), y: 0, width: value + '%', height: barHeight, fill: color })));
         });
         if (this.props.variant === index_2.MultiStackedBarChartVariant.AbsoluteScale) {
             if (!this.props.hideLabels) {
                 bars.push(React.createElement("text", { key: "text", x: "".concat(this._isRTL
-                        ? 100 - (startingPoint[startingPoint.length - 1] || 0) - value
-                        : (startingPoint[startingPoint.length - 1] || 0) + value, "%"), y: barHeight / 2, dominantBaseline: "central", transform: "translate(".concat(this._isRTL ? -4 : 4, ")"), className: this._classNames.barLabel, "aria-label": "Total: ".concat(barTotalValue), role: "img" }, (0, d3_format_1.formatPrefix)(barTotalValue < 1000 ? '.2~' : '.1', barTotalValue)(barTotalValue)));
+                        ? 100 - (startingPoint[startingPoint.length - 1] || 0) - value - totalMarginPercent
+                        : (startingPoint[startingPoint.length - 1] || 0) + value + totalMarginPercent, "%"), textAnchor: this._isRTL ? 'end' : 'start', y: barHeight / 2, dominantBaseline: "central", transform: "translate(".concat(this._isRTL ? -4 : 4, ")"), className: this._classNames.barLabel, "aria-label": "Total: ".concat(barTotalValue), role: "img" }, (0, d3_format_1.formatPrefix)(barTotalValue < 1000 ? '.2~' : '.1', barTotalValue)(barTotalValue)));
             }
         }
         else {
@@ -285,7 +317,7 @@ var MultiStackedBarChartBase = /** @class */ (function (_super) {
                     showNumber && (React.createElement("div", tslib_1.__assign({ className: this._classNames.ratioNumerator }, (0, index_3.getAccessibleDataObject)(data.chartDataAccessibilityData, 'text', false)), getChartData())))),
             React.createElement(react_focus_1.FocusZone, { direction: react_focus_1.FocusZoneDirection.horizontal },
                 React.createElement("div", { className: this._classNames.chartWrapper },
-                    React.createElement("svg", { className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle }, bars)))));
+                    React.createElement("svg", { ref: this.barChartSvgRef, className: this._classNames.chart, "aria-label": data === null || data === void 0 ? void 0 : data.chartTitle }, bars)))));
     };
     MultiStackedBarChartBase.prototype._onBarFocus = function (pointData, color, point) {
         var _this = this;