@fluentui/react-charting 5.23.12 → 5.23.14

package/lib/components/DonutChart/Pie/Pie.types.d.ts

@@ -1,106 +0,0 @@
-import { IStyle, ITheme } from '@fluentui/react/lib/Styling';
-import { IChartDataPoint } from '../index';
-export interface IPieProps {
-    /**
-     * Theme
-     */
-    theme: ITheme;
-    /**
-     * Width of the Pie.
-     */
-    width: number;
-    /**
-     * Height of the Pie.
-     */
-    height: number;
-    /**
-     * outerRadius of the Pie.
-     */
-    outerRadius: number;
-    /**
-     * innerRadius of the Pie.
-     */
-    innerRadius: number;
-    /**
-     * Data to render in the Pie.
-     */
-    data: IChartDataPoint[];
-    /**
-     * shape for pie.
-     */
-    pie?: any;
-    /**
-     * 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;
-    /**
-     * Active Arc for chart
-     */
-    activeArc?: string;
-    /**
-     * string for callout id
-     */
-    calloutId?: string;
-    /**
-     * internal prop for href
-     */
-    href?: string;
-    /**
-     * props for inside donut value
-     */
-    valueInsideDonut?: string | number;
-    /**
-     * 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;
-    /**
-     * Prop to enable the gradient in the chart
-     * @default false
-     */
-    enableGradient?: boolean;
-    /**
-     * Prop to enable the round corners in the chart
-     * @default false
-     */
-    roundCorners?: 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

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

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

@@ -1 +0,0 @@
-{"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  /**\n   * Prop to enable the gradient in the chart\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\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/DonutChart/Pie/index.d.ts

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-export * from './DonutChart';
-export * from './DonutChart.types';
-export * from '../../types/index';

package/lib/components/DonutChart/index.js

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

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

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

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

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { IGaugeChartProps, IGaugeChartSegment, GaugeValueFormat, GaugeChartVariant } from './GaugeChart.types';
-import { IYValueHover } from '../../index';
-export declare const ARC_PADDING = 2;
-export declare const BREAKPOINTS: {
-    minRadius: number;
-    arcWidth: number;
-    fontSize: number;
-}[];
-export declare const calcNeedleRotation: (chartValue: number, minValue: number, maxValue: number) => number;
-export declare const getSegmentLabel: (segment: IExtendedSegment, minValue: number, maxValue: number, variant?: GaugeChartVariant, isAriaLabel?: boolean) => string;
-export declare const getChartValueLabel: (chartValue: number, minValue: number, maxValue: number, chartValueFormat?: GaugeValueFormat | ((sweepFraction: [number, number]) => string) | undefined, forCallout?: boolean) => string;
-interface IYValue extends Omit<IYValueHover, 'y'> {
-    y?: string | number;
-}
-export interface IGaugeChartState {
-    hoveredLegend: string;
-    selectedLegend: string;
-    focusedElement?: string;
-    calloutTarget: any;
-    isCalloutVisible: boolean;
-    hoverXValue: string | number;
-    hoverYValues: IYValue[];
-    width: number;
-    height: number;
-}
-export interface IExtendedSegment extends IGaugeChartSegment {
-    start: number;
-    end: number;
-}
-export declare class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChartState> {
-    private _classNames;
-    private _isRTL;
-    private _innerRadius;
-    private _outerRadius;
-    private _minValue;
-    private _maxValue;
-    private _segments;
-    private _calloutAnchor;
-    private _rootElem;
-    private _margins;
-    private _legendsHeight;
-    constructor(props: IGaugeChartProps);
-    componentDidMount(): void;
-    render(): React.ReactNode;
-    private _getMargins;
-    private _getStylesBasedOnBreakpoint;
-    private _processProps;
-    private _renderNeedle;
-    private _renderLegends;
-    /**
-     * This function checks if the given legend is highlighted or not.
-     * A legend can be highlighted in 2 ways:
-     * 1. selection: if the user clicks on it
-     * 2. hovering: if there is no selected legend and the user hovers over it
-     */
-    private _legendHighlighted;
-    /**
-     * This function checks if none of the legends is selected or hovered.
-     */
-    private _noLegendHighlighted;
-    private _handleFocus;
-    private _handleBlur;
-    private _handleMouseOver;
-    private _handleMouseOut;
-    private _handleCalloutDismiss;
-    private _showCallout;
-    private _hideCallout;
-    private _wrapContent;
-    private _multiValueCallout;
-    private _yValueHoverSubCountsExists;
-    private _getCalloutContent;
-    private _getChartTitle;
-}
-export {};

package/lib/components/GaugeChart/GaugeChart.base.js

@@ -1,438 +0,0 @@
-import { __assign, __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 { GaugeValueFormat, GaugeChartVariant, } from './GaugeChart.types';
-import { convertToLocaleString } from '../../utilities/locale-util';
-import { Points, formatValueWithSIPrefix, getAccessibleDataObject, getColorFromToken, getNextColor, getNextGradient, pointTypes, } from '../../utilities/index';
-import { Legends, Shape } from '../Legends/index';
-import { FocusZone, FocusZoneDirection } from '@fluentui/react-focus';
-import { Callout, DirectionalHint } from '@fluentui/react/lib/Callout';
-import { SVGTooltipText } from '../../utilities/SVGTooltipText';
-import { select as d3Select } from 'd3-selection';
-var GAUGE_MARGIN = 16;
-var LABEL_WIDTH = 36;
-var LABEL_HEIGHT = 16;
-var LABEL_OFFSET = 4;
-var TITLE_OFFSET = 11;
-var EXTRA_NEEDLE_LENGTH = 4;
-export var ARC_PADDING = 2;
-export var BREAKPOINTS = [
-    { minRadius: 52, arcWidth: 12, fontSize: 20 },
-    { minRadius: 70, arcWidth: 16, fontSize: 24 },
-    { minRadius: 88, arcWidth: 20, fontSize: 32 },
-    { minRadius: 106, arcWidth: 24, fontSize: 32 },
-    { minRadius: 124, arcWidth: 28, fontSize: 40 },
-    { minRadius: 142, arcWidth: 32, fontSize: 40 },
-];
-var getClassNames = classNamesFunction();
-export var calcNeedleRotation = function (chartValue, minValue, maxValue) {
-    var needleRotation = ((chartValue - minValue) / (maxValue - minValue)) * 180;
-    if (needleRotation < 0) {
-        needleRotation = 0;
-    }
-    else if (needleRotation > 180) {
-        needleRotation = 180;
-    }
-    return needleRotation;
-};
-export var getSegmentLabel = function (segment, minValue, maxValue, variant, isAriaLabel) {
-    if (isAriaLabel === void 0) { isAriaLabel = false; }
-    if (isAriaLabel) {
-        return minValue === 0 && variant === GaugeChartVariant.SingleSegment
-            ? "".concat(segment.legend, ", ").concat(segment.size, " out of ").concat(maxValue, " or ").concat(((segment.size / maxValue) * 100).toFixed(), "%")
-            : "".concat(segment.legend, ", ").concat(segment.start, " to ").concat(segment.end);
-    }
-    return minValue === 0 && variant === GaugeChartVariant.SingleSegment
-        ? "".concat(segment.size, " (").concat(((segment.size / maxValue) * 100).toFixed(), "%)")
-        : "".concat(segment.start, " - ").concat(segment.end);
-};
-export var getChartValueLabel = function (chartValue, minValue, maxValue, chartValueFormat, forCallout) {
-    if (forCallout === void 0) { forCallout = false; }
-    if (forCallout) {
-        // When displaying the chart value as a percentage, use fractions in the callout, and vice versa.
-        // This helps clarify the actual value and avoid repetition.
-        return minValue !== 0
-            ? chartValue.toString()
-            : chartValueFormat === GaugeValueFormat.Fraction
-                ? "".concat(((chartValue / maxValue) * 100).toFixed(), "%")
-                : "".concat(chartValue, "/").concat(maxValue);
-    }
-    return typeof chartValueFormat === 'function'
-        ? chartValueFormat([chartValue - minValue, maxValue - minValue])
-        : minValue !== 0
-            ? chartValue.toString()
-            : chartValueFormat === GaugeValueFormat.Fraction
-                ? "".concat(chartValue, "/").concat(maxValue)
-                : "".concat(((chartValue / maxValue) * 100).toFixed(), "%");
-};
-var GaugeChartBase = /** @class */ (function (_super) {
-    __extends(GaugeChartBase, _super);
-    function GaugeChartBase(props) {
-        var _this = _super.call(this, props) || this;
-        _this._getMargins = function () {
-            var _a = _this.props, hideMinMax = _a.hideMinMax, chartTitle = _a.chartTitle, sublabel = _a.sublabel;
-            return {
-                left: (!hideMinMax ? LABEL_OFFSET + LABEL_WIDTH : 0) + GAUGE_MARGIN,
-                right: (!hideMinMax ? LABEL_OFFSET + LABEL_WIDTH : 0) + GAUGE_MARGIN,
-                top: (chartTitle ? TITLE_OFFSET + LABEL_HEIGHT : EXTRA_NEEDLE_LENGTH / 2) + GAUGE_MARGIN,
-                bottom: (sublabel ? LABEL_OFFSET + LABEL_HEIGHT : 0) + GAUGE_MARGIN,
-            };
-        };
-        _this._getStylesBasedOnBreakpoint = function () {
-            for (var index = BREAKPOINTS.length - 1; index >= 0; index -= 1) {
-                if (_this._outerRadius >= BREAKPOINTS[index].minRadius) {
-                    return {
-                        arcWidth: BREAKPOINTS[index].arcWidth,
-                        chartValueSize: BREAKPOINTS[index].fontSize,
-                    };
-                }
-            }
-            return {
-                arcWidth: BREAKPOINTS[0].arcWidth,
-                chartValueSize: BREAKPOINTS[0].fontSize,
-            };
-        };
-        _this._processProps = function () {
-            var _a = _this.props, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, maxValue = _a.maxValue, theme = _a.theme;
-            var total = minValue;
-            var segments = _this.props.segments.map(function (segment, index) {
-                var _a;
-                var size = Math.max(segment.size, 0);
-                total += size;
-                return {
-                    legend: segment.legend,
-                    size: size,
-                    color: typeof segment.color !== 'undefined'
-                        ? getColorFromToken(segment.color, theme.isInverted)
-                        : getNextColor(index, 0, theme.isInverted),
-                    gradient: (_a = segment.gradient) !== null && _a !== void 0 ? _a : getNextGradient(index, 0, theme.isInverted),
-                    accessibilityData: segment.accessibilityData,
-                    start: total - size,
-                    end: total,
-                };
-            });
-            if (typeof maxValue !== 'undefined' && total < maxValue) {
-                segments.push({
-                    legend: 'Unknown',
-                    size: maxValue - total,
-                    color: theme.palette.neutralLight,
-                    start: total,
-                    end: maxValue,
-                });
-                total = maxValue;
-            }
-            var arcGenerator = d3Arc()
-                .cornerRadius(_this.props.roundCorners ? 3 : 0)
-                .padAngle(ARC_PADDING / _this._outerRadius)
-                .padRadius(_this._outerRadius);
-            var rtlSafeSegments = _this._isRTL ? Array.from(segments).reverse() : segments;
-            var prevAngle = -Math.PI / 2;
-            var arcs = rtlSafeSegments.map(function (segment, index) {
-                var endAngle = prevAngle + (segment.size / (total - minValue)) * Math.PI;
-                var d = arcGenerator({
-                    innerRadius: _this._innerRadius,
-                    outerRadius: _this._outerRadius,
-                    startAngle: prevAngle,
-                    endAngle: endAngle,
-                });
-                prevAngle = endAngle;
-                return {
-                    d: d,
-                    segmentIndex: _this._isRTL ? segments.length - 1 - index : index,
-                    startAngle: prevAngle - (segment.size / (total - minValue)) * Math.PI,
-                    endAngle: endAngle,
-                };
-            });
-            _this._minValue = minValue;
-            _this._maxValue = total;
-            _this._segments = segments;
-            return {
-                arcs: arcs,
-            };
-        };
-        _this._renderNeedle = function () {
-            var needleRotation = calcNeedleRotation(_this.props.chartValue, _this._minValue, _this._maxValue);
-            var rtlSafeNeedleRotation = _this._isRTL ? 180 - needleRotation : needleRotation;
-            var strokeWidth = 2;
-            var halfStrokeWidth = strokeWidth / 2;
-            var needleLength = _this._outerRadius - _this._innerRadius + EXTRA_NEEDLE_LENGTH;
-            return (React.createElement("g", { transform: "rotate(".concat(rtlSafeNeedleRotation, ", 0, 0)") },
-                React.createElement("path", { d: "\n            M 0,".concat(-halfStrokeWidth - 3, "\n            L ").concat(-needleLength, ",").concat(-halfStrokeWidth - 1, "\n            A ").concat(halfStrokeWidth + 1, ",").concat(halfStrokeWidth + 1, ",0,0,0,").concat(-needleLength, ",").concat(halfStrokeWidth + 1, "\n            L 0,").concat(halfStrokeWidth + 3, "\n            A ").concat(halfStrokeWidth + 3, ",").concat(halfStrokeWidth + 3, ",0,0,0,0,").concat(-halfStrokeWidth - 3, "\n          "), strokeWidth: strokeWidth, className: _this._classNames.needle, transform: "translate(".concat(-_this._innerRadius + EXTRA_NEEDLE_LENGTH / 2, ")"), "data-is-focusable": true, onFocus: function (e) { return _this._handleFocus(e, 'Needle'); }, onBlur: _this._handleBlur, onMouseEnter: function (e) { return _this._handleMouseOver(e, 'Needle'); }, onMouseMove: function (e) { return _this._handleMouseOver(e, 'Needle'); }, role: "img", "aria-label": 'Current value: ' +
-                        getChartValueLabel(_this.props.chartValue, _this._minValue, _this._maxValue, _this.props.chartValueFormat) })));
-        };
-        _this._renderLegends = function () {
-            if (_this.props.hideLegend) {
-                return null;
-            }
-            var legends = _this._segments.map(function (segment, index) {
-                var _a;
-                var color = _this.props.enableGradient
-                    ? ((_a = segment.gradient) === null || _a === void 0 ? void 0 : _a[0]) || getNextGradient(index, 0, _this.props.theme.isInverted)[0]
-                    : segment.color || getNextColor(index, 0, _this.props.theme.isInverted);
-                return {
-                    title: segment.legend,
-                    color: color,
-                    action: function () {
-                        if (_this.state.selectedLegend === segment.legend) {
-                            _this.setState({ selectedLegend: '' });
-                        }
-                        else {
-                            _this.setState({ selectedLegend: segment.legend });
-                        }
-                    },
-                    hoverAction: function () {
-                        _this.setState({ hoveredLegend: segment.legend });
-                    },
-                    onMouseOutAction: function () {
-                        _this.setState({ hoveredLegend: '' });
-                    },
-                };
-            });
-            return (React.createElement("div", { className: _this._classNames.legendsContainer },
-                React.createElement(Legends, __assign({ legends: legends, centerLegends: true }, _this.props.legendProps))));
-        };
-        /**
-         * This function checks if the given legend is highlighted or not.
-         * A legend can be highlighted in 2 ways:
-         * 1. selection: if the user clicks on it
-         * 2. hovering: if there is no selected legend and the user hovers over it
-         */
-        _this._legendHighlighted = function (legend) {
-            return (_this.state.selectedLegend === legend || (_this.state.selectedLegend === '' && _this.state.hoveredLegend === legend));
-        };
-        /**
-         * This function checks if none of the legends is selected or hovered.
-         */
-        _this._noLegendHighlighted = function () {
-            return _this.state.selectedLegend === '' && _this.state.hoveredLegend === '';
-        };
-        _this._handleFocus = function (focusEvent, focusedElement) {
-            _this._showCallout(focusEvent.target, focusedElement, true);
-        };
-        _this._handleBlur = function () {
-            _this._hideCallout(true);
-        };
-        _this._handleMouseOver = function (mouseEvent, hoveredElement) {
-            _this._showCallout(mouseEvent.target, hoveredElement, false);
-        };
-        _this._handleMouseOut = function () {
-            _this._hideCallout(false);
-        };
-        _this._handleCalloutDismiss = function () {
-            _this._hideCallout(false);
-        };
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        _this._showCallout = function (target, legend, isFocusEvent) {
-            if (_this._calloutAnchor === legend) {
-                return;
-            }
-            _this._calloutAnchor = legend;
-            var hoverXValue = 'Current value is ' +
-                getChartValueLabel(_this.props.chartValue, _this._minValue, _this._maxValue, _this.props.chartValueFormat, true);
-            var hoverYValues = _this._segments.map(function (segment) {
-                var _a;
-                var yValue = {
-                    legend: segment.legend,
-                    y: getSegmentLabel(segment, _this._minValue, _this._maxValue, _this.props.variant),
-                    color: _this.props.enableGradient ? (_a = segment.gradient) === null || _a === void 0 ? void 0 : _a[0] : segment.color,
-                };
-                return yValue;
-            });
-            _this.setState(__assign({ calloutTarget: target, 
-                /** Show the callout if highlighted arc is hovered/focused and Hide it if unhighlighted arc is hovered/focused */
-                isCalloutVisible: ['Needle', 'Chart value'].includes(legend) ||
-                    _this.state.selectedLegend === '' ||
-                    _this.state.selectedLegend === legend, hoverXValue: hoverXValue, hoverYValues: hoverYValues }, (isFocusEvent ? { focusedElement: legend } : {})));
-        };
-        _this._hideCallout = function (isBlurEvent) {
-            _this._calloutAnchor = '';
-            _this.setState(__assign({ calloutTarget: null, isCalloutVisible: false, hoverXValue: '', hoverYValues: [] }, (isBlurEvent ? { focusedElement: '' } : {})));
-        };
-        _this._wrapContent = function (content, id, maxWidth) {
-            var textElement = d3Select("#".concat(id));
-            textElement.text(content);
-            if (!textElement.node()) {
-                return false;
-            }
-            var isOverflowing = false;
-            var textLength = textElement.node().getComputedTextLength();
-            while (textLength > maxWidth && content.length > 0) {
-                content = content.slice(0, -1);
-                textElement.text(content + '...');
-                isOverflowing = true;
-                textLength = textElement.node().getComputedTextLength();
-            }
-            return isOverflowing;
-        };
-        // TO DO: Write a common functional component for Multi value callout and divide sub count method
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        _this._multiValueCallout = function (calloutProps) {
-            var yValueHoverSubCountsExists = _this._yValueHoverSubCountsExists(calloutProps.YValueHover);
-            return (React.createElement("div", { className: _this._classNames.calloutContentRoot },
-                React.createElement("div", { className: _this._classNames.calloutDateTimeContainer, style: yValueHoverSubCountsExists ? { marginBottom: '11px' } : {} },
-                    React.createElement("div", __assign({ className: _this._classNames.calloutContentX }, getAccessibleDataObject(calloutProps.xAxisCalloutAccessibilityData, 'text', false)), convertToLocaleString(calloutProps.hoverXValue, _this.props.culture))),
-                React.createElement("div", { className: _this._classNames.calloutInfoContainer, style: yValueHoverSubCountsExists ? { display: 'flex' } : {} },
-                    calloutProps.YValueHover &&
-                        calloutProps.YValueHover.map(function (yValue, index, yValues) {
-                            var isLast = index + 1 === yValues.length;
-                            var _a = yValue.shouldDrawBorderBottom, shouldDrawBorderBottom = _a === void 0 ? false : _a;
-                            return (React.createElement("div", __assign({}, getAccessibleDataObject(yValue.callOutAccessibilityData, 'text', false), { key: "callout-content-".concat(index), style: yValueHoverSubCountsExists
-                                    ? __assign({ display: 'inline-block' }, (shouldDrawBorderBottom && {
-                                        borderBottom: "1px solid ".concat(_this.props.theme.semanticColors.menuDivider),
-                                        paddingBottom: '10px',
-                                    })) : __assign({}, (shouldDrawBorderBottom && {
-                                    borderBottom: "1px solid ".concat(_this.props.theme.semanticColors.menuDivider),
-                                    paddingBottom: '10px',
-                                })) }), _this._getCalloutContent(yValue, index, yValueHoverSubCountsExists, isLast)));
-                        }),
-                    !!calloutProps.descriptionMessage && (React.createElement("div", { className: _this._classNames.descriptionMessage }, calloutProps.descriptionMessage)))));
-        };
-        _this._getChartTitle = function () {
-            var chartTitle = _this.props.chartTitle;
-            return (chartTitle ? "".concat(chartTitle, ". ") : '') + "Gauge chart with ".concat(_this._segments.length, " segments. ");
-        };
-        _this._margins = _this._getMargins();
-        _this._legendsHeight = !props.hideLegend ? 24 : 0;
-        _this.state = {
-            hoveredLegend: '',
-            selectedLegend: '',
-            focusedElement: '',
-            calloutTarget: null,
-            isCalloutVisible: false,
-            hoverXValue: '',
-            hoverYValues: [],
-            width: 140 + _this._margins.left + _this._margins.right,
-            height: 70 + _this._margins.top + _this._margins.bottom + _this._legendsHeight,
-        };
-        _this._isRTL = getRTL(props.theme);
-        _this._calloutAnchor = '';
-        return _this;
-    }
-    GaugeChartBase.prototype.componentDidMount = function () {
-        if (this._rootElem) {
-            this.setState({
-                width: this._rootElem.clientWidth,
-                height: this._rootElem.clientHeight,
-            });
-        }
-    };
-    GaugeChartBase.prototype.render = function () {
-        var _this = this;
-        this._margins = this._getMargins();
-        this._legendsHeight = !this.props.hideLegend ? 24 : 0;
-        var width = this.props.width || this.state.width;
-        var height = this.props.height || this.state.height;
-        this._outerRadius = Math.min((width - (this._margins.left + this._margins.right)) / 2, height - (this._margins.top + this._margins.bottom + this._legendsHeight));
-        var _a = this._getStylesBasedOnBreakpoint(), arcWidth = _a.arcWidth, chartValueSize = _a.chartValueSize;
-        this._innerRadius = this._outerRadius - arcWidth;
-        var arcs = this._processProps().arcs;
-        this._classNames = getClassNames(this.props.styles, {
-            theme: this.props.theme,
-            className: this.props.className,
-            chartWidth: width,
-            chartHeight: height - this._legendsHeight,
-            chartValueSize: chartValueSize,
-        });
-        return (React.createElement("div", { className: this._classNames.root, ref: function (el) { return (_this._rootElem = el); } },
-            React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal },
-                React.createElement("svg", { className: this._classNames.chart, role: "region", "aria-label": this._getChartTitle(), onMouseLeave: this._handleMouseOut },
-                    React.createElement("g", { transform: "translate(".concat(width / 2, ", ").concat(height - (this._margins.bottom + this._legendsHeight), ")") },
-                        this.props.chartTitle && (React.createElement("text", { x: 0, y: -(this._outerRadius + TITLE_OFFSET), textAnchor: "middle", className: this._classNames.chartTitle, "aria-hidden": true }, this.props.chartTitle)),
-                        !this.props.hideMinMax && (React.createElement(React.Fragment, null,
-                            React.createElement("text", { x: (this._isRTL ? 1 : -1) * (this._outerRadius + LABEL_OFFSET), y: 0, textAnchor: "end", className: this._classNames.limits, role: "img", "aria-label": "Min value: ".concat(this._minValue) }, formatValueWithSIPrefix(this._minValue)),
-                            React.createElement("text", { x: (this._isRTL ? -1 : 1) * (this._outerRadius + LABEL_OFFSET), y: 0, textAnchor: "start", className: this._classNames.limits, role: "img", "aria-label": "Max value: ".concat(this._maxValue) }, formatValueWithSIPrefix(this._maxValue)))),
-                        arcs.map(function (arc, index) {
-                            var _a, _b;
-                            var segment = _this._segments[arc.segmentIndex];
-                            var clipId = getId('Arc_clip') + "".concat(index, "_").concat(arc.startAngle, "_").concat(arc.endAngle);
-                            var arcClassNames = getClassNames(_this.props.styles, {
-                                theme: _this.props.theme,
-                                solidFill: _this.props.enableGradient ? 'transparent' : segment.color,
-                                gradientFill: "conic-gradient(\n                      from ".concat(arc.startAngle, "rad at 50% 100%,\n                      ").concat((_a = segment.gradient) === null || _a === void 0 ? void 0 : _a[0], ",\n                      ").concat((_b = segment.gradient) === null || _b === void 0 ? void 0 : _b[1], " ").concat(arc.endAngle - arc.startAngle, "rad\n                    )"),
-                                opacity: _this._legendHighlighted(segment.legend) || _this._noLegendHighlighted() ? 1 : 0.1,
-                            });
-                            return (React.createElement(React.Fragment, { key: index },
-                                React.createElement("path", __assign({ d: arc.d, strokeWidth: _this.state.focusedElement === segment.legend ? ARC_PADDING : 0, className: arcClassNames.segment }, getAccessibleDataObject(__assign({ ariaLabel: getSegmentLabel(segment, _this._minValue, _this._maxValue, _this.props.variant, true) }, segment.accessibilityData), 'img', true), { onFocus: function (e) { return _this._handleFocus(e, segment.legend); }, onBlur: _this._handleBlur, onMouseEnter: function (e) { return _this._handleMouseOver(e, segment.legend); }, onMouseMove: function (e) { return _this._handleMouseOver(e, segment.legend); }, "data-is-focusable": _this._legendHighlighted(segment.legend) || _this._noLegendHighlighted() })),
-                                _this.props.enableGradient && (React.createElement(React.Fragment, null,
-                                    React.createElement("clipPath", { id: clipId },
-                                        React.createElement("path", { d: arc.d })),
-                                    React.createElement("foreignObject", { x: "-50%", y: "-100%", width: "100%", height: "100%", clipPath: "url(#".concat(clipId, ")") },
-                                        React.createElement("div", { className: arcClassNames.gradientSegment }))))));
-                        }),
-                        this._renderNeedle(),
-                        React.createElement("g", { onMouseEnter: function (e) { return _this._handleMouseOver(e, 'Chart value'); }, onMouseMove: function (e) { return _this._handleMouseOver(e, 'Chart value'); } },
-                            React.createElement(SVGTooltipText, { content: getChartValueLabel(this.props.chartValue, this._minValue, this._maxValue, this.props.chartValueFormat), textProps: {
-                                    x: 0,
-                                    y: 0,
-                                    textAnchor: 'middle',
-                                    className: this._classNames.chartValue,
-                                    'aria-hidden': 'true',
-                                }, maxWidth: this._innerRadius * 2 - 24, wrapContent: this._wrapContent })),
-                        this.props.sublabel && (React.createElement(SVGTooltipText, { content: this.props.sublabel, textProps: {
-                                x: 0,
-                                y: 4,
-                                textAnchor: 'middle',
-                                dominantBaseline: 'hanging',
-                                className: this._classNames.sublabel,
-                            }, maxWidth: this._innerRadius * 2, wrapContent: this._wrapContent }))))),
-            this._renderLegends(),
-            !this.props.hideTooltip && this.state.isCalloutVisible && (React.createElement(Callout, __assign({ target: this.state.calloutTarget, directionalHint: DirectionalHint.topAutoEdge, gapSpace: 15, isBeakVisible: false, onDismiss: this._handleCalloutDismiss }, this.props.calloutProps), this._multiValueCallout({
-                hoverXValue: this.state.hoverXValue,
-                YValueHover: this.state.hoverYValues,
-            })))));
-    };
-    GaugeChartBase.prototype._yValueHoverSubCountsExists = function (yValueHover) {
-        if (yValueHover) {
-            return yValueHover.some(function (yValue) { return yValue.yAxisCalloutData && typeof yValue.yAxisCalloutData !== 'string'; });
-        }
-        return false;
-    };
-    GaugeChartBase.prototype._getCalloutContent = function (xValue, index, yValueHoverSubCountsExists, isLast) {
-        var marginStyle = isLast ? {} : { marginRight: '16px' };
-        var toDrawShape = xValue.index !== undefined && xValue.index !== -1;
-        var _classNames = getClassNames(this.props.styles, {
-            theme: this.props.theme,
-            lineColor: xValue.color,
-            toDrawShape: toDrawShape,
-        });
-        var culture = this.props.culture;
-        var yValue = convertToLocaleString(xValue.y, culture);
-        if (!xValue.yAxisCalloutData || typeof xValue.yAxisCalloutData === 'string') {
-            return (React.createElement("div", { style: yValueHoverSubCountsExists ? marginStyle : {} },
-                yValueHoverSubCountsExists && (React.createElement("div", { className: "ms-fontWeight-semibold", style: { fontSize: '12pt' } },
-                    xValue.legend,
-                    " (",
-                    yValue,
-                    ")")),
-                React.createElement("div", { id: "".concat(index, "_").concat(xValue.y), className: _classNames.calloutBlockContainer },
-                    toDrawShape && (React.createElement(Shape, { svgProps: {
-                            className: _classNames.shapeStyles,
-                        }, pathProps: { fill: xValue.color }, shape: Points[xValue.index % Object.keys(pointTypes).length] })),
-                    React.createElement("div", null,
-                        React.createElement("div", { className: _classNames.calloutlegendText },
-                            " ",
-                            xValue.legend),
-                        React.createElement("div", { className: _classNames.calloutContentY }, convertToLocaleString(xValue.yAxisCalloutData ? xValue.yAxisCalloutData : xValue.y || xValue.data, culture))))));
-        }
-        else {
-            var subcounts_1 = xValue.yAxisCalloutData;
-            return (React.createElement("div", { style: marginStyle },
-                React.createElement("div", { className: "ms-fontWeight-semibold", style: { fontSize: '12pt' } },
-                    xValue.legend,
-                    " (",
-                    yValue,
-                    ")"),
-                Object.keys(subcounts_1).map(function (subcountName) {
-                    return (React.createElement("div", { key: subcountName, className: _classNames.calloutBlockContainer },
-                        React.createElement("div", { className: _classNames.calloutlegendText },
-                            " ",
-                            convertToLocaleString(subcountName, culture)),
-                        React.createElement("div", { className: _classNames.calloutContentY }, convertToLocaleString(subcounts_1[subcountName], culture))));
-                })));
-        }
-    };
-    return GaugeChartBase;
-}(React.Component));
-export { GaugeChartBase };
-//# sourceMappingURL=GaugeChart.base.js.map