"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.GaugeChartBase = exports.getChartValueLabel = exports.getSegmentLabel = exports.calcNeedleRotation = exports.BREAKPOINTS = exports.ARC_PADDING = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var d3_shape_1 = require("d3-shape");
var Utilities_1 = require("@fluentui/react/lib/Utilities");
var GaugeChart_types_1 = require("./GaugeChart.types");
var locale_util_1 = require("../../utilities/locale-util");
var index_1 = require("../../utilities/index");
var index_2 = require("../Legends/index");
var react_focus_1 = require("@fluentui/react-focus");
var Callout_1 = require("@fluentui/react/lib/Callout");
var SVGTooltipText_1 = require("../../utilities/SVGTooltipText");
var d3_selection_1 = require("d3-selection");
var image_export_utils_1 = require("../../utilities/image-export-utils");
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;
exports.ARC_PADDING = 2;
exports.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 = (0, Utilities_1.classNamesFunction)();
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;
};
exports.calcNeedleRotation = calcNeedleRotation;
var getSegmentLabel = function (segment, minValue, maxValue, variant, isAriaLabel) {
    if (isAriaLabel === void 0) { isAriaLabel = false; }
    if (isAriaLabel) {
        return minValue === 0 && variant === GaugeChart_types_1.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 === GaugeChart_types_1.GaugeChartVariant.SingleSegment
        ? "".concat(segment.size, " (").concat(((segment.size / maxValue) * 100).toFixed(), "%)")
        : "".concat(segment.start, " - ").concat(segment.end);
};
exports.getSegmentLabel = getSegmentLabel;
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 === GaugeChart_types_1.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 === GaugeChart_types_1.GaugeValueFormat.Fraction
                ? "".concat(chartValue, "/").concat(maxValue)
                : "".concat(((chartValue / maxValue) * 100).toFixed(), "%");
};
exports.getChartValueLabel = getChartValueLabel;
var GaugeChartBase = /** @class */ (function (_super) {
    tslib_1.__extends(GaugeChartBase, _super);
    function GaugeChartBase(props) {
        var _a;
        var _this = _super.call(this, props) || this;
        _this.toImage = function (opts) {
            var _a;
            return (0, image_export_utils_1.toImage)(_this._rootElem, (_a = _this._legendsRef.current) === null || _a === void 0 ? void 0 : _a.toSVG, _this._isRTL, opts);
        };
        _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 = exports.BREAKPOINTS.length - 1; index >= 0; index -= 1) {
                if (_this._outerRadius >= exports.BREAKPOINTS[index].minRadius) {
                    return {
                        arcWidth: exports.BREAKPOINTS[index].arcWidth,
                        chartValueSize: exports.BREAKPOINTS[index].fontSize,
                    };
                }
            }
            return {
                arcWidth: exports.BREAKPOINTS[0].arcWidth,
                chartValueSize: exports.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'
                        ? (0, index_1.getColorFromToken)(segment.color, theme.isInverted)
                        : (0, index_1.getNextColor)(index, 0, theme.isInverted),
                    gradient: (_a = segment.gradient) !== null && _a !== void 0 ? _a : (0, index_1.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 = (0, d3_shape_1.arc)()
                .cornerRadius(_this.props.roundCorners ? 3 : 0)
                .padAngle(exports.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 = (0, exports.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: ' +
                        (0, exports.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]) || (0, index_1.getNextGradient)(index, 0, _this.props.theme.isInverted)[0]
                    : segment.color || (0, index_1.getNextColor)(index, 0, _this.props.theme.isInverted);
                return {
                    title: segment.legend,
                    color: color,
                    hoverAction: function () {
                        _this.setState({ hoveredLegend: segment.legend });
                    },
                    onMouseOutAction: function () {
                        _this.setState({ hoveredLegend: '' });
                    },
                };
            });
            return (React.createElement("div", { className: _this._classNames.legendsContainer },
                React.createElement(index_2.Legends, tslib_1.__assign({ legends: legends, centerLegends: true }, _this.props.legendProps, { 
                    // eslint-disable-next-line react/jsx-no-bind
                    onChange: _this._onLegendSelectionChange.bind(_this), ref: _this._legendsRef }))));
        };
        /**
         * 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._getHighlightedLegend().includes(legend);
        };
        /**
         * This function checks if none of the legends is selected or hovered.
         */
        _this._noLegendHighlighted = function () {
            return _this._getHighlightedLegend().length === 0;
        };
        _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 ' +
                (0, exports.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: (0, exports.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(tslib_1.__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._noLegendHighlighted() || _this._legendHighlighted(legend), hoverXValue: hoverXValue, hoverYValues: hoverYValues }, (isFocusEvent ? { focusedElement: legend } : {})));
        };
        _this._hideCallout = function (isBlurEvent) {
            _this._calloutAnchor = '';
            _this.setState(tslib_1.__assign({ calloutTarget: null, isCalloutVisible: false, hoverXValue: '', hoverYValues: [] }, (isBlurEvent ? { focusedElement: '' } : {})));
        };
        _this._wrapContent = function (content, id, maxWidth) {
            var textElement = (0, d3_selection_1.select)("#".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", tslib_1.__assign({ className: _this._classNames.calloutContentX }, (0, index_1.getAccessibleDataObject)(calloutProps.xAxisCalloutAccessibilityData, 'text', false)), (0, locale_util_1.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", tslib_1.__assign({}, (0, index_1.getAccessibleDataObject)(yValue.callOutAccessibilityData, 'text', false), { key: "callout-content-".concat(index), style: yValueHoverSubCountsExists
                                    ? tslib_1.__assign({ display: 'inline-block' }, (shouldDrawBorderBottom && {
                                        borderBottom: "1px solid ".concat(_this.props.theme.semanticColors.menuDivider),
                                        paddingBottom: '10px',
                                    })) : tslib_1.__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. ");
        };
        (0, Utilities_1.initializeComponentRef)(_this);
        _this._margins = _this._getMargins();
        _this._legendsHeight = !props.hideLegend ? 24 : 0;
        _this.state = {
            hoveredLegend: '',
            selectedLegends: ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || [],
            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 = (0, Utilities_1.getRTL)(props.theme);
        _this._calloutAnchor = '';
        _this._legendsRef = React.createRef();
        return _this;
    }
    GaugeChartBase.prototype.componentDidMount = function () {
        if (this._rootElem) {
            this.setState({
                width: this._rootElem.clientWidth,
                height: this._rootElem.clientHeight,
            });
        }
    };
    GaugeChartBase.prototype.componentDidUpdate = function (prevProps) {
        var _a, _b, _c;
        if (!(0, index_1.areArraysEqual)((_a = prevProps.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends, (_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends)) {
            this.setState({
                selectedLegends: ((_c = this.props.legendProps) === null || _c === void 0 ? void 0 : _c.selectedLegends) || [],
            });
        }
    };
    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(react_focus_1.FocusZone, { direction: react_focus_1.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) }, (0, index_1.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) }, (0, index_1.formatValueWithSIPrefix)(this._maxValue)))),
                        arcs.map(function (arc, index) {
                            var _a, _b;
                            var segment = _this._segments[arc.segmentIndex];
                            var clipId = (0, Utilities_1.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", tslib_1.__assign({ d: arc.d, strokeWidth: _this.state.focusedElement === segment.legend ? exports.ARC_PADDING : 0, className: arcClassNames.segment }, (0, index_1.getAccessibleDataObject)(tslib_1.__assign({ ariaLabel: (0, exports.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_1.SVGTooltipText, { content: (0, exports.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_1.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_1.Callout, tslib_1.__assign({ target: this.state.calloutTarget, directionalHint: Callout_1.DirectionalHint.topAutoEdge, gapSpace: 15, isBeakVisible: false, onDismiss: this._handleCalloutDismiss }, this.props.calloutProps), this._multiValueCallout({
                hoverXValue: this.state.hoverXValue,
                YValueHover: this.state.hoverYValues,
            })))));
    };
    Object.defineProperty(GaugeChartBase.prototype, "chartContainer", {
        get: function () {
            return this._rootElem;
        },
        enumerable: false,
        configurable: true
    });
    GaugeChartBase.prototype._onLegendSelectionChange = function (selectedLegends, event, currentLegend) {
        var _a, _b;
        if ((_a = this.props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
            this.setState({ selectedLegends: selectedLegends });
        }
        else {
            this.setState({ selectedLegends: selectedLegends.slice(-1) });
        }
        if ((_b = this.props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
            this.props.legendProps.onChange(selectedLegends, event, currentLegend);
        }
    };
    GaugeChartBase.prototype._getHighlightedLegend = function () {
        return this.state.selectedLegends.length > 0
            ? this.state.selectedLegends
            : this.state.hoveredLegend
                ? [this.state.hoveredLegend]
                : [];
    };
    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 = (0, locale_util_1.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(index_2.Shape, { svgProps: {
                            className: _classNames.shapeStyles,
                        }, pathProps: { fill: xValue.color }, shape: index_1.Points[xValue.index % Object.keys(index_1.pointTypes).length] })),
                    React.createElement("div", null,
                        React.createElement("div", { className: _classNames.calloutlegendText },
                            " ",
                            xValue.legend),
                        React.createElement("div", { className: _classNames.calloutContentY }, (0, locale_util_1.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 },
                            " ",
                            (0, locale_util_1.convertToLocaleString)(subcountName, culture)),
                        React.createElement("div", { className: _classNames.calloutContentY }, (0, locale_util_1.convertToLocaleString)(subcounts_1[subcountName], culture))));
                })));
        }
    };
    return GaugeChartBase;
}(React.Component));
exports.GaugeChartBase = GaugeChartBase;
//# sourceMappingURL=GaugeChart.base.js.map