npm - @fluentui/react-charting - Versions diffs - 5.23.63 → 5.23.64 - Mend

@fluentui/react-charting 5.23.63 → 5.23.64

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

Files changed (1428) hide show

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

@@ -0,0 +1,472 @@
+import { __assign, __extends } from "tslib";
+import * as React from 'react';
+import { arc as d3Arc } from 'd3-shape';
+import { classNamesFunction, getId, getRTL, initializeComponentRef } from '@fluentui/react/lib/Utilities';
+import { GaugeValueFormat, GaugeChartVariant, } from './GaugeChart.types';
+import { convertToLocaleString } from '../../utilities/locale-util';
+import { Points, areArraysEqual, 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';
+import { toImage } from '../../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;
+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 _a;
+        var _this = _super.call(this, props) || this;
+        _this.toImage = function (opts) {
+            var _a;
+            return 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 = 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,
+                    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, {
+                    // 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 ' +
+                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._noLegendHighlighted() || _this._legendHighlighted(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. ");
+        };
+        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 = 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 (!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(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,
+            })))));
+    };
+    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 = 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

package/lib/components/GaugeChart/GaugeChart.base.js.map ADDED Viewed

@@ -0,0 +1 @@

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

package/lib/components/GaugeChart/GaugeChart.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { IGaugeChartProps } from './GaugeChart.types';
+/**
+ * Gaugechart component.
+ * {@docCategory GaugeChart}
+ */
+export declare const GaugeChart: React.FunctionComponent<IGaugeChartProps>;

package/lib/components/GaugeChart/GaugeChart.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { styled } from '@fluentui/react';
+import { GaugeChartBase } from './GaugeChart.base';
+import { getStyles } from './GaugeChart.styles';
+/**
+ * Gaugechart component.
+ * {@docCategory GaugeChart}
+ */
+export var GaugeChart = styled(GaugeChartBase, getStyles);
+//# sourceMappingURL=GaugeChart.js.map

package/lib/components/GaugeChart/GaugeChart.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"GaugeChart.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAGhD;;;GAGG;AACH,MAAM,CAAC,IAAM,UAAU,GAA8C,MAAM,CAIzE,cAAc,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import { styled } from '@fluentui/react';\nimport * as React from 'react';\nimport { GaugeChartBase } from './GaugeChart.base';\nimport { getStyles } from './GaugeChart.styles';\nimport { IGaugeChartProps, IGaugeChartStyleProps, IGaugeChartStyles } from './GaugeChart.types';\n\n/**\n * Gaugechart component.\n * {@docCategory GaugeChart}\n */\nexport const GaugeChart: React.FunctionComponent<IGaugeChartProps> = styled<\n IGaugeChartProps,\n IGaugeChartStyleProps,\n IGaugeChartStyles\n>(GaugeChartBase, getStyles);\n"]}

package/lib/components/GaugeChart/GaugeChart.styles.d.ts ADDED Viewed

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