@fluentui/react-charting 5.23.14 → 5.23.16

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

@@ -0,0 +1,106 @@
+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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"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

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

package/lib/components/DonutChart/index.js

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,438 @@
+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