@fluentui/react-charting 5.23.14 → 5.23.16

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

@@ -0,0 +1,100 @@
+import { __extends } from "tslib";
+import * as React from 'react';
+import { arc as d3Arc } from 'd3-shape';
+import { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';
+import { getStyles } from './Arc.styles';
+import { format as d3Format } from 'd3-format';
+import { formatValueWithSIPrefix } from '../../../utilities/index';
+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();
+        };
+        _this._onBlur = function () {
+            _this.props.onBlurCallback();
+        };
+        _this._getAriaLabel = function () {
+            var _a;
+            var point = _this.props.data.data;
+            var legend = point.xAxisCalloutData || point.legend;
+            var yValue = point.yAxisCalloutData || point.data || 0;
+            return ((_a = point.callOutAccessibilityData) === null || _a === void 0 ? void 0 : _a.ariaLabel) || (legend ? "".concat(legend, ", ") : '') + "".concat(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, activeArc = _a.activeArc;
+            if (hideLabels ||
+                Math.abs(data.endAngle - data.startAngle) < Math.PI / 12 ||
+                (activeArc !== data.data.legend && activeArc !== '')) {
+                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)
+                : formatValueWithSIPrefix(arcValue)));
+        };
+        return _this;
+    }
+    Arc.getDerivedStateFromProps = function (nextProps) {
+        _updateChart(nextProps);
+        return null;
+    };
+    Arc.prototype.updateChart = function (newProps) {
+        _updateChart(newProps);
+    };
+    Arc.prototype.render = function () {
+        var _a, _b, _c, _d, _e;
+        var _f = this.props, arc = _f.arc, href = _f.href, focusedArcId = _f.focusedArcId;
+        var getClassNames = classNamesFunction();
+        var id = this.props.uniqText + this.props.data.data.legend.replace(/\s+/, '') + this.props.data.data.data;
+        var opacity = this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '' ? 1 : 0.1;
+        var startAngle = (_b = (_a = this.props.data) === null || _a === void 0 ? void 0 : _a.startAngle) !== null && _b !== void 0 ? _b : 0;
+        var endAngle = ((_d = (_c = this.props.data) === null || _c === void 0 ? void 0 : _c.endAngle) !== null && _d !== void 0 ? _d : 0) - startAngle;
+        var cornerRadius = this.props.roundCorners ? 3 : 0;
+        var classNames = getClassNames(getStyles, {
+            solidFill: this.props.enableGradient ? 'transparent' : this.props.color,
+            gradientFill: "conic-gradient(\n          from ".concat(startAngle, "rad,\n          ").concat(this.props.color, ",\n          ").concat(this.props.nextColor, " ").concat(endAngle, "rad\n        )"),
+            href: href,
+            theme: this.props.theme,
+            opacity: opacity,
+        });
+        var clipId = getId('Arc_clip') + "".concat(this.props.color, "_").concat(this.props.nextColor);
+        return (React.createElement("g", { ref: this.currentRef },
+            !!focusedArcId && focusedArcId === id && (React.createElement("path", { id: id + 'focusRing', d: arc.cornerRadius(cornerRadius)(this.props.focusData), className: classNames.focusRing })),
+            React.createElement("path", { id: id, d: arc.cornerRadius(cornerRadius)(this.props.data), onFocus: this._onFocus.bind(this, this.props.data.data, id), className: classNames.root, "data-is-focusable": this.props.activeArc === this.props.data.data.legend || this.props.activeArc === '', onMouseOver: this._hoverOn.bind(this, this.props.data.data), onMouseMove: this._hoverOn.bind(this, this.props.data.data), onMouseLeave: this._hoverOff, onBlur: this._onBlur, onClick: href ? this._redirectToUrl.bind(this, href) : (_e = this.props.data) === null || _e === void 0 ? void 0 : _e.data.onClick, "aria-label": this._getAriaLabel(), role: "img" }),
+            this._renderArcLabel(classNames.arcLabel),
+            this.props.enableGradient && (React.createElement(React.Fragment, null,
+                React.createElement("clipPath", { id: clipId },
+                    React.createElement("path", { d: arc.cornerRadius(cornerRadius)(this.props.data) })),
+                React.createElement("foreignObject", { x: "-50%", y: "-50%", width: "100%", height: "100%", clipPath: "url(#".concat(clipId, ")") },
+                    React.createElement("div", { className: classNames.gradientArc }))))));
+    };
+    Arc.prototype._onFocus = function (data, id) {
+        this.props.onFocusCallback(data, id, this.currentRef.current);
+    };
+    Arc.prototype._hoverOn = function (data, mouseEvent) {
+        mouseEvent.persist();
+        this.props.hoverOnCallback(data, mouseEvent);
+    };
+    Arc.prototype._redirectToUrl = function (href) {
+        href ? (window.location.href = href) : '';
+    };
+    Arc.defaultProps = {
+        arc: d3Arc(),
+    };
+    return Arc;
+}(React.Component));
+export { Arc };
+function _updateChart(newProps) {
+    newProps.arc.innerRadius(newProps.innerRadius);
+    newProps.arc.outerRadius(newProps.outerRadius);
+}
+//# sourceMappingURL=Arc.js.map

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

@@ -0,0 +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 { arc as d3Arc } from 'd3-shape';\nimport { classNamesFunction, getId, getRTL } from '@fluentui/react/lib/Utilities';\nimport { getStyles } from './Arc.styles';\nimport { IChartDataPoint } from '../index';\nimport { IArcProps, IArcStyleProps, IArcStyles } from './index';\nimport { format as d3Format } from 'd3-format';\nimport { formatValueWithSIPrefix } from '../../../utilities/index';\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: d3Arc(),\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<IArcStyleProps, IArcStyles>();\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\n    const startAngle = this.props.data?.startAngle ?? 0;\n    const endAngle = (this.props.data?.endAngle ?? 0) - startAngle;\n    const cornerRadius = this.props.roundCorners ? 3 : 0;\n\n    const classNames = getClassNames(getStyles, {\n      solidFill: this.props.enableGradient ? 'transparent' : this.props.color,\n      gradientFill: `conic-gradient(\n          from ${startAngle}rad,\n          ${this.props.color},\n          ${this.props.nextColor} ${endAngle}rad\n        )`,\n      href: href!,\n      theme: this.props.theme!,\n      opacity,\n    });\n\n    const clipId = getId('Arc_clip') + `${this.props.color}_${this.props.nextColor}`;\n\n    return (\n      <g ref={this.currentRef}>\n        {!!focusedArcId && focusedArcId === id && (\n          <path\n            id={id + 'focusRing'}\n            d={arc.cornerRadius(cornerRadius)(this.props.focusData)}\n            className={classNames.focusRing}\n          />\n        )}\n\n        <path\n          id={id}\n          d={arc.cornerRadius(cornerRadius)(this.props.data)}\n          onFocus={this._onFocus.bind(this, this.props.data!.data, id)}\n          className={classNames.root}\n          data-is-focusable={this.props.activeArc === this.props.data!.data.legend || this.props.activeArc === ''}\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          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\n        {this.props.enableGradient && (\n          <>\n            <clipPath id={clipId}>\n              <path d={arc.cornerRadius(cornerRadius)(this.props.data)} />\n            </clipPath>\n            <foreignObject x=\"-50%\" y=\"-50%\" width=\"100%\" height=\"100%\" clipPath={`url(#${clipId})`}>\n              <div className={classNames.gradientArc} />\n            </foreignObject>\n          </>\n        )}\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, activeArc } = this.props;\n\n    if (\n      hideLabels ||\n      Math.abs(data!.endAngle - data!.startAngle) < Math.PI / 12 ||\n      (activeArc !== data!.data.legend && activeArc !== '')\n    ) {\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          : formatValueWithSIPrefix(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.d.ts

@@ -0,0 +1,2 @@
+import { IArcStyleProps, IArcStyles } from './Arc.types';
+export declare const getStyles: (props: IArcStyleProps) => IArcStyles;

package/lib/components/DonutChart/Arc/Arc.styles.js

@@ -0,0 +1,35 @@
+import { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';
+export var getStyles = function (props) {
+    var solidFill = props.solidFill, gradientFill = props.gradientFill, href = props.href, theme = props.theme, opacity = props.opacity;
+    return {
+        root: {
+            fill: solidFill,
+            cursor: href ? 'pointer' : 'default',
+            stroke: theme.semanticColors.bodyBackground,
+            outline: 'transparent',
+            selectors: {
+                '::-moz-focus-inner': {
+                    border: '0',
+                },
+            },
+            opacity: opacity,
+        },
+        gradientArc: {
+            width: '100%',
+            height: '100%',
+            background: gradientFill,
+            opacity: opacity,
+        },
+        focusRing: {
+            stroke: theme.semanticColors.focusBorder,
+            strokeWidth: 4,
+            fill: 'transparent',
+        },
+        arcLabel: {
+            fontSize: FontSizes.small,
+            fontWeight: FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+    };
+};
+//# sourceMappingURL=Arc.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Arc.styles.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/Arc.styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAErE,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAAqB;IACrC,IAAA,SAAS,GAAyC,KAAK,UAA9C,EAAE,YAAY,GAA2B,KAAK,aAAhC,EAAE,IAAI,GAAqB,KAAK,KAA1B,EAAE,KAAK,GAAc,KAAK,MAAnB,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;IAChE,OAAO;QACL,IAAI,EAAE;YACJ,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACpC,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc;YAC3C,OAAO,EAAE,aAAa;YACtB,SAAS,EAAE;gBACT,oBAAoB,EAAE;oBACpB,MAAM,EAAE,GAAG;iBACZ;aACF;YACD,OAAO,SAAA;SACR;QACD,WAAW,EAAE;YACX,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,UAAU,EAAE,YAAY;YACxB,OAAO,SAAA;SACR;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 { IArcStyleProps, IArcStyles } from './Arc.types';\nimport { FontSizes, FontWeights } from '@fluentui/react/lib/Styling';\n\nexport const getStyles = (props: IArcStyleProps): IArcStyles => {\n  const { solidFill, gradientFill, href, theme, opacity } = props;\n  return {\n    root: {\n      fill: solidFill,\n      cursor: href ? 'pointer' : 'default',\n      stroke: theme.semanticColors.bodyBackground,\n      outline: 'transparent',\n      selectors: {\n        '::-moz-focus-inner': {\n          border: '0',\n        },\n      },\n      opacity,\n    },\n    gradientArc: {\n      width: '100%',\n      height: '100%',\n      background: gradientFill,\n      opacity,\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

@@ -0,0 +1,165 @@
+import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
+import { IChartDataPoint } from '../index';
+export interface IArcProps {
+    /**
+     * Theme
+     */
+    theme: ITheme;
+    /**
+     * Data to render in the Arc.
+     */
+    data?: IArcData;
+    /**
+     * Data to render focused Arc
+     */
+    focusData?: IArcData;
+    /**
+     * id of the focused arc
+     */
+    focusedArcId?: string;
+    /**
+     * shape for  Arc.
+     */
+    arc?: any;
+    /**
+     * innerRadius of the Arc.
+     */
+    innerRadius?: number;
+    /**
+     * outerRadius of the Arc.
+     */
+    outerRadius?: number;
+    /**
+     * Color for the Arc.
+     */
+    color: string;
+    /**
+     * Defines the function that is executed upon hovering over the legend
+     */
+    hoverOnCallback?: Function;
+    /**
+     * Defines the function that is executed upon hovering over the legend
+     */
+    onFocusCallback?: Function;
+    /**
+     * Defines the function that is executed upon hovering Leave the legend
+     */
+    onBlurCallback?: Function;
+    /**
+     * Defines the function that is executed upon hovering Leave the legend
+     */
+    hoverLeaveCallback?: Function;
+    /**
+     * Uniq string for chart
+     */
+    uniqText?: string;
+    /**
+     * string for callout id
+     */
+    calloutId?: string;
+    /**
+     * Active Arc for chart
+     */
+    activeArc?: string;
+    /**
+     * internal prop for href
+     */
+    href?: string;
+    /**
+     * 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;
+    /**
+     * Prop to enable the gradient in the arc
+     * @default false
+     */
+    enableGradient?: boolean;
+    /**
+     * Prop to enable the round corners in the chart
+     * @default false
+     */
+    roundCorners?: boolean;
+    /**
+     * Next color stop for the gradient
+     * [Only used when enableGradient is True].
+     */
+    nextColor: string;
+}
+export interface IArcData {
+    /**
+     * Data to render in the chart for individual arc.
+     */
+    data: IChartDataPoint;
+    /**
+     * endAngle of the Arc
+     */
+    endAngle: number;
+    /**
+     * index of the Arc
+     */
+    index: number;
+    /**
+     * padAngle of the Arc
+     */
+    padAngle: number;
+    /**
+     * startAngle of the Arc
+     */
+    startAngle: number;
+    /**
+     * value of the Arc
+     */
+    value: number;
+}
+export interface IArcStyleProps {
+    /**
+     * Theme
+     */
+    theme: ITheme;
+    /**
+     * internal prop for href
+     */
+    href: string;
+    /**
+     * solid color for the arc (when enableGradient is false)
+     */
+    solidFill: string;
+    /**
+     * gradient for the arc (when enableGradient is true)
+     */
+    gradientFill: string;
+    /**
+     * wether gradients are enabled for the arc
+     */
+    opacity: number;
+}
+export interface IArcStyles {
+    /**
+     * Style set for the card header component root
+     */
+    root: IStyle;
+    /**
+     * Style set for the gradient arc
+     */
+    gradientArc: IStyle;
+    /**
+     * styles for the focus
+     */
+    focusRing: IStyle;
+    /**
+     * Style for the arc labels
+     */
+    arcLabel: IStyle;
+}

package/lib/components/DonutChart/Arc/Arc.types.js

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

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

@@ -0,0 +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  /**\n   * Prop to enable the gradient in the arc\n   * @default false\n   */\n  enableGradient?: boolean;\n\n  /**\n   * Prop to enable the round corners in the chart\n   * @default false\n   */\n  roundCorners?: boolean;\n\n  /**\n   * Next color stop for the gradient\n   * [Only used when enableGradient is True].\n   */\n  nextColor: string;\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 IArcStyleProps {\n  /**\n   * Theme\n   */\n  theme: ITheme;\n\n  /**\n   * internal prop for href\n   */\n  href: string;\n\n  /**\n   * solid color for the arc (when enableGradient is false)\n   */\n  solidFill: string;\n\n  /**\n   * gradient for the arc (when enableGradient is true)\n   */\n  gradientFill: string;\n\n  /**\n   * wether gradients are enabled for the arc\n   */\n  opacity: 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 gradient arc\n   */\n  gradientArc: 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/Arc/index.d.ts

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

package/lib/components/DonutChart/Arc/index.js

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

package/lib/components/DonutChart/Arc/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/DonutChart/Arc/index.ts"],"names":[],"mappings":"AAAA,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC","sourcesContent":["export * from './Arc';\nexport * from './Arc.types';\n"]}

package/lib/components/DonutChart/DonutChart.base.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { ScaleOrdinal } from 'd3-scale';
+import { IAccessibilityProps } from '../../index';
+import { IChartDataPoint, IDonutChartProps } from './index';
+export interface IDonutChartState {
+    showHover?: boolean;
+    value?: string | undefined;
+    legend?: string | undefined;
+    _width?: number | undefined;
+    _height?: number | undefined;
+    activeLegend?: string;
+    color?: string | undefined;
+    xCalloutValue?: string;
+    yCalloutValue?: string;
+    focusedArcId?: string;
+    selectedLegend: string;
+    dataPointCalloutProps?: IChartDataPoint;
+    callOutAccessibilityData?: IAccessibilityProps;
+}
+export declare class DonutChartBase extends React.Component<IDonutChartProps, IDonutChartState> {
+    static defaultProps: Partial<IDonutChartProps>;
+    _colors: ScaleOrdinal<string, {}>;
+    private _classNames;
+    private _rootElem;
+    private _uniqText;
+    private _currentHoverElement;
+    private _calloutId;
+    private _calloutAnchorPoint;
+    private _emptyChartId;
+    static getDerivedStateFromProps(nextProps: Readonly<IDonutChartProps>, prevState: Readonly<IDonutChartState>): Partial<IDonutChartState> | null;
+    constructor(props: IDonutChartProps);
+    componentDidMount(): void;
+    render(): JSX.Element;
+    private _closeCallout;
+    private _elevateToMinimums;
+    private _setViewBox;
+    private _createLegends;
+    private _focusCallback;
+    private _hoverCallback;
+    private _onBlur;
+    private _hoverLeave;
+    private _handleChartMouseLeave;
+    private _valueInsideDonut;
+    private _toLocaleString;
+    /**
+     * This function returns
+     * the selected legend if there is one
+     * or the hovered legend if none of the legends is selected.
+     * Note: This won't work in case of multiple legends selection.
+     */
+    private _getHighlightedLegend;
+    private _isChartEmpty;
+    private _addDefaultColors;
+}