npm - @fluentui/react-charting - Versions diffs - 5.16.43 → 5.16.45 - Mend

@fluentui/react-charting 5.16.43 → 5.16.45

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 (150) hide show

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

@@ -0,0 +1,370 @@
+define(["require", "exports", "tslib", "react", "d3-shape", "@fluentui/react/lib/Utilities", "./GaugeChart.types", "../../utilities/index", "../Legends/index", "@fluentui/react-focus", "@fluentui/react/lib/Callout", "../../utilities/SVGTooltipText", "d3-selection"], function (require, exports, tslib_1, React, shape, Utilities_1, GaugeChart_types_1, index_1, index_2, react_focus_1, Callout_1, SVGTooltipText_1, d3_selection_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GaugeChartBase = exports.BREAKPOINTS = exports.ARC_PADDING = void 0;
+    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 GaugeChartBase = /** @class */ (function (_super) {
+        tslib_1.__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 = 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._initProps = function () {
+                var _a = _this.props, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, maxValue = _a.maxValue, theme = _a.theme;
+                var segments = Array.from(_this.props.segments);
+                var total = minValue;
+                segments.forEach(function (segment, index) {
+                    total += segment.size;
+                    segment.color =
+                        typeof segment.color !== 'undefined'
+                            ? (0, index_1.getColorFromToken)(segment.color, theme.isInverted)
+                            : (0, index_1.getNextColor)(index, 0, theme.isInverted);
+                });
+                if (typeof maxValue !== 'undefined' && total < maxValue) {
+                    segments.push({
+                        legend: 'Unknown',
+                        size: maxValue - total,
+                        color: theme.palette.neutralLight,
+                    });
+                    total = maxValue;
+                }
+                var arcGenerator = shape
+                    .arc()
+                    .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,
+                    };
+                });
+                return {
+                    minValue: minValue,
+                    maxValue: total,
+                    segments: segments,
+                    arcs: arcs,
+                };
+            };
+            _this._renderNeedle = function () {
+                var needleRotation = (_this._sweepFraction[0] / _this._sweepFraction[1]) * 180;
+                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'); } })));
+            };
+            _this._renderLegends = function () {
+                if (_this.props.hideLegend) {
+                    return null;
+                }
+                var legends = _this._segments.map(function (segment) {
+                    return {
+                        title: segment.legend,
+                        color: segment.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(index_2.Legends, tslib_1.__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 ' +
+                    (_this.props.chartValueFormat === GaugeChart_types_1.GaugeValueFormat.Fraction
+                        ? "".concat(((_this._sweepFraction[0] / _this._sweepFraction[1]) * 100).toFixed(), "%")
+                        : "".concat(_this._sweepFraction[0], "/").concat(_this._sweepFraction[1]));
+                var total = _this._minValue;
+                var hoverYValues = _this._segments.map(function (segment, index) {
+                    var yValue = {
+                        legend: segment.legend,
+                        y: "".concat(total + (index > 0 ? 1 : 0), " - ").concat(total + segment.size),
+                        color: segment.color,
+                    };
+                    total += segment.size;
+                    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.state.selectedLegend === '' ||
+                        _this.state.selectedLegend === 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, index_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._margins = _this._getMargins();
+            _this._legendsHeight = !_this.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 = (0, Utilities_1.getRTL)();
+            _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 _b = this._initProps(), minValue = _b.minValue, maxValue = _b.maxValue, segments = _b.segments, arcs = _b.arcs;
+            this._minValue = minValue;
+            this._segments = segments;
+            this._sweepFraction = [this.props.chartValue - this._minValue, maxValue - this._minValue];
+            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: "presentation", "aria-label": "This is a gauge chart with ".concat(this._segments.length, " section represented."), 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 }, 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(maxValue) }, (0, index_1.formatValueWithSIPrefix)(maxValue)))),
+                            arcs.map(function (arc, index) { return (React.createElement("path", tslib_1.__assign({ key: index, d: arc.d, fill: _this._segments[arc.segmentIndex].color, fillOpacity: _this._legendHighlighted(_this._segments[arc.segmentIndex].legend) || _this._noLegendHighlighted()
+                                    ? 1
+                                    : 0.1, strokeWidth: _this.state.focusedElement === _this._segments[arc.segmentIndex].legend ? exports.ARC_PADDING : 0, className: _this._classNames.segment }, (0, index_1.getAccessibleDataObject)(tslib_1.__assign({ ariaLabel: "".concat(_this._segments[arc.segmentIndex].legend, ", ").concat(_this._segments[arc.segmentIndex].size, " out of ").concat(maxValue - _this._minValue, " or ").concat(((_this._segments[arc.segmentIndex].size / (maxValue - _this._minValue)) *
+                                    100).toFixed(), "%") }, _this._segments[arc.segmentIndex].accessibilityData), 'img', true), { onFocus: function (e) { return _this._handleFocus(e, _this._segments[arc.segmentIndex].legend); }, onBlur: _this._handleBlur, onMouseEnter: function (e) { return _this._handleMouseOver(e, _this._segments[arc.segmentIndex].legend); }, onMouseMove: function (e) { return _this._handleMouseOver(e, _this._segments[arc.segmentIndex].legend); } }))); }),
+                            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: typeof this.props.chartValueFormat === 'function'
+                                        ? this.props.chartValueFormat(this._sweepFraction)
+                                        : this.props.chartValueFormat === GaugeChart_types_1.GaugeValueFormat.Fraction
+                                            ? "".concat(this._sweepFraction[0], "/").concat(this._sweepFraction[1])
+                                            : "".concat(((this._sweepFraction[0] / this._sweepFraction[1]) * 100).toFixed(), "%"), textProps: {
+                                        x: 0,
+                                        y: 0,
+                                        textAnchor: 'middle',
+                                        className: this._classNames.chartValue,
+                                        role: 'img',
+                                        'aria-label': "Current value: ".concat(this._sweepFraction[0], " out of ").concat(this._sweepFraction[1], ", or ").concat(((this._sweepFraction[0] / this._sweepFraction[1]) *
+                                            100).toFixed(), "%"),
+                                    }, 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,
+                                    role: 'img',
+                                    'aria-label': this.props.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,
+                })))));
+        };
+        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, index_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, index_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, index_1.convertToLocaleString)(subcountName, culture)),
+                            React.createElement("div", { className: _classNames.calloutContentY }, (0, index_1.convertToLocaleString)(subcounts_1[subcountName], culture))));
+                    })));
+            }
+        };
+        return GaugeChartBase;
+    }(React.Component));
+    exports.GaugeChartBase = GaugeChartBase;
+});
+//# sourceMappingURL=GaugeChart.base.js.map

package/lib-amd/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 * as shape from 'd3-shape';\nimport { classNamesFunction, getRTL } from '@fluentui/react/lib/Utilities';\nimport {\n IGaugeChartProps,\n IGaugeChartSegment,\n IGaugeChartStyleProps,\n IGaugeChartStyles,\n GaugeValueFormat,\n} from './GaugeChart.types';\nimport { IProcessedStyleSet } from '@fluentui/react/lib/Styling';\nimport {\n Points,\n convertToLocaleString,\n formatValueWithSIPrefix,\n getAccessibleDataObject,\n getColorFromToken,\n getNextColor,\n pointTypes,\n} from '../../utilities/index';\nimport { ILegend, 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';\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\ninterface IYValue extends Omit<IYValueHover, 'y'> {\n y?: string | number;\n}\nexport interface IGaugeChartState {\n hoveredLegend: string;\n selectedLegend: 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}\n\nexport class GaugeChartBase extends React.Component<IGaugeChartProps, IGaugeChartState> {\n private _classNames: IProcessedStyleSet<IGaugeChartStyles>;\n private _isRTL: boolean;\n private _innerRadius: number;\n private _outerRadius: number;\n private _minValue: number;\n private _segments: IGaugeChartSegment[];\n private _sweepFraction: number[];\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\n constructor(props: IGaugeChartProps) {\n super(props);\n\n this._margins = this._getMargins();\n this._legendsHeight = !this.props.hideLegend ? 24 : 0;\n\n this.state = {\n hoveredLegend: '',\n selectedLegend: '',\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();\n this._calloutAnchor = '';\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 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 { minValue, maxValue, segments, arcs } = this._initProps();\n this._minValue = minValue;\n this._segments = segments;\n this._sweepFraction = [this.props.chartValue - this._minValue, maxValue - this._minValue];\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=\"presentation\"\n aria-label={`This is a gauge chart with ${this._segments.length} section represented.`}\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 >\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: ${maxValue}`}\n >\n {formatValueWithSIPrefix(maxValue)}\n </text>\n </>\n )}\n {arcs.map((arc, index) => (\n <path\n key={index}\n d={arc.d}\n fill={this._segments[arc.segmentIndex].color}\n fillOpacity={\n this._legendHighlighted(this._segments[arc.segmentIndex].legend) || this._noLegendHighlighted()\n ? 1\n : 0.1\n }\n strokeWidth={this.state.focusedElement === this._segments[arc.segmentIndex].legend ? ARC_PADDING : 0}\n className={this._classNames.segment}\n {...getAccessibleDataObject(\n {\n ariaLabel: `${this._segments[arc.segmentIndex].legend}, ${\n this._segments[arc.segmentIndex].size\n } out of ${maxValue - this._minValue} or ${(\n (this._segments[arc.segmentIndex].size / (maxValue - this._minValue)) *\n 100\n ).toFixed()}%`,\n ...this._segments[arc.segmentIndex].accessibilityData,\n },\n 'img',\n true,\n )}\n onFocus={e => this._handleFocus(e, this._segments[arc.segmentIndex].legend)}\n onBlur={this._handleBlur}\n onMouseEnter={e => this._handleMouseOver(e, this._segments[arc.segmentIndex].legend)}\n onMouseMove={e => this._handleMouseOver(e, this._segments[arc.segmentIndex].legend)}\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={\n typeof this.props.chartValueFormat === 'function'\n ? this.props.chartValueFormat(this._sweepFraction)\n : this.props.chartValueFormat === GaugeValueFormat.Fraction\n ? `${this._sweepFraction[0]}/${this._sweepFraction[1]}`\n : `${((this._sweepFraction[0] / this._sweepFraction[1]) * 100).toFixed()}%`\n }\n textProps={{\n x: 0,\n y: 0,\n textAnchor: 'middle',\n className: this._classNames.chartValue,\n role: 'img',\n 'aria-label': `Current value: ${this._sweepFraction[0]} out of ${this._sweepFraction[1]}, or ${(\n (this._sweepFraction[0] / this._sweepFraction[1]) *\n 100\n ).toFixed()}%`,\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 role: 'img',\n 'aria-label': this.props.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 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 _initProps = () => {\n const { minValue = 0, maxValue, theme } = this.props;\n const segments = Array.from(this.props.segments);\n\n let total = minValue;\n segments.forEach((segment, index) => {\n total += segment.size;\n segment.color =\n typeof segment.color !== 'undefined'\n ? getColorFromToken(segment.color, theme!.isInverted)\n : getNextColor(index, 0, theme!.isInverted);\n });\n if (typeof maxValue !== 'undefined' && total < maxValue) {\n segments.push({\n legend: 'Unknown',\n size: maxValue - total,\n color: theme!.palette.neutralLight,\n });\n total = maxValue;\n }\n\n const arcGenerator = shape\n .arc()\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 };\n });\n\n return {\n minValue,\n maxValue: total,\n segments,\n arcs,\n };\n };\n\n private _renderNeedle = () => {\n const needleRotation = (this._sweepFraction[0] / this._sweepFraction[1]) * 180;\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 />\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 => {\n return {\n title: segment.legend,\n color: segment.color!,\n action: () => {\n if (this.state.selectedLegend === segment.legend) {\n this.setState({ selectedLegend: '' });\n } else {\n this.setState({ selectedLegend: segment.legend });\n }\n },\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 legends={legends} centerLegends {...this.props.legendProps} />\n </div>\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 (\n this.state.selectedLegend === legend || (this.state.selectedLegend === '' && this.state.hoveredLegend === legend)\n );\n };\n\n /**\n * This function checks if none of the legends is selected or hovered.\n */\n private _noLegendHighlighted = () => {\n return this.state.selectedLegend === '' && this.state.hoveredLegend === '';\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 (this.props.chartValueFormat === GaugeValueFormat.Fraction\n ? `${((this._sweepFraction[0] / this._sweepFraction[1]) * 100).toFixed()}%`\n : `${this._sweepFraction[0]}/${this._sweepFraction[1]}`);\n let total = this._minValue;\n const hoverYValues: IYValue[] = this._segments.map((segment, index) => {\n const yValue: IYValue = {\n legend: segment.legend,\n y: `${total + (index > 0 ? 1 : 0)} - ${total + segment.size}`,\n color: segment.color,\n };\n total += segment.size;\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) ||\n this.state.selectedLegend === '' ||\n this.state.selectedLegend === 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"]}

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

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

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

@@ -0,0 +1,7 @@
+define(["require", "exports", "@fluentui/react", "./GaugeChart.base", "./GaugeChart.styles"], function (require, exports, react_1, GaugeChart_base_1, GaugeChart_styles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.GaugeChart = void 0;
+    exports.GaugeChart = (0, react_1.styled)(GaugeChart_base_1.GaugeChartBase, GaugeChart_styles_1.getStyles);
+});
+//# sourceMappingURL=GaugeChart.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"GaugeChart.js","sourceRoot":"../src/","sources":["components/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";;;;IAMa,QAAA,UAAU,GAA8C,IAAA,cAAM,EAIzE,gCAAc,EAAE,6BAAS,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\nexport const GaugeChart: React.FunctionComponent<IGaugeChartProps> = styled<\n IGaugeChartProps,\n IGaugeChartStyleProps,\n IGaugeChartStyles\n>(GaugeChartBase, getStyles);\n"]}

package/lib-amd/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;

package/lib-amd/components/GaugeChart/GaugeChart.styles.js ADDED Viewed

@@ -0,0 +1,122 @@
+define(["require", "exports", "tslib", "@fluentui/react"], function (require, exports, tslib_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getStyles = void 0;
+    var getStyles = function (props) {
+        var _a, _b, _c, _d;
+        var theme = props.theme, chartValueSize = props.chartValueSize, chartWidth = props.chartWidth, chartHeight = props.chartHeight, className = props.className, lineColor = props.lineColor, toDrawShape = props.toDrawShape;
+        return {
+            root: [
+                theme.fonts.medium,
+                'ms-GaugeChart',
+                {
+                    width: '100%',
+                    height: '100%',
+                },
+                className,
+            ],
+            chart: {
+                display: 'block',
+                width: chartWidth,
+                height: chartHeight,
+            },
+            limits: {
+                fontSize: react_1.FontSizes.small,
+                fontWeight: react_1.FontWeights.semibold,
+                fill: theme.palette.neutralPrimary,
+            },
+            chartValue: {
+                fontSize: chartValueSize,
+                fontWeight: react_1.FontWeights.semibold,
+                fill: theme.palette.neutralPrimary,
+            },
+            sublabel: {
+                fontSize: react_1.FontSizes.small,
+                fontWeight: react_1.FontWeights.semibold,
+                fill: theme.palette.neutralPrimary,
+            },
+            needle: {
+                fill: theme.palette.black,
+                stroke: theme.palette.white,
+            },
+            chartTitle: {
+                fontSize: react_1.FontSizes.small,
+                fill: theme.palette.neutralPrimary,
+            },
+            segment: {
+                outline: 'none',
+                stroke: theme.semanticColors.focusBorder,
+            },
+            legendsContainer: {
+                width: chartWidth,
+            },
+            calloutContentRoot: [
+                {
+                    display: 'grid',
+                    overflow: 'hidden',
+                    padding: '11px 16px 10px 16px',
+                    backgroundColor: theme.semanticColors.bodyBackground,
+                    backgroundBlendMode: 'normal, luminosity',
+                },
+            ],
+            calloutDateTimeContainer: {
+                display: 'flex',
+                flexDirection: 'row',
+                justifyContent: 'space-between',
+            },
+            calloutContentX: [
+                tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { lineHeight: '16px', opacity: '0.8', color: theme.semanticColors.bodySubtext }),
+            ],
+            calloutBlockContainer: [
+                theme.fonts.mediumPlus,
+                {
+                    marginTop: '13px',
+                    color: theme.semanticColors.bodyText,
+                },
+                !toDrawShape && {
+                    selectors: (_a = {},
+                        _a[react_1.HighContrastSelector] = {
+                            forcedColorAdjust: 'none',
+                        },
+                        _a),
+                    borderLeft: "4px solid ".concat(lineColor),
+                    paddingLeft: '8px',
+                },
+                toDrawShape && {
+                    display: 'flex',
+                },
+            ],
+            shapeStyles: {
+                marginRight: '8px',
+            },
+            calloutlegendText: tslib_1.__assign(tslib_1.__assign({}, theme.fonts.small), { lineHeight: '16px', selectors: (_b = {},
+                    _b[react_1.HighContrastSelectorBlack] = {
+                        color: 'rgb(255, 255, 255)',
+                    },
+                    _b), color: theme.semanticColors.bodySubtext }),
+            calloutContentY: [
+                tslib_1.__assign(tslib_1.__assign({}, theme.fonts.mediumPlus), { fontWeight: 'bold', lineHeight: '22px', selectors: (_c = {},
+                        _c[react_1.HighContrastSelectorBlack] = {
+                            color: 'rgb(255, 255, 255)',
+                        },
+                        _c) }),
+            ],
+            descriptionMessage: [
+                theme.fonts.small,
+                {
+                    selectors: (_d = {},
+                        _d[react_1.HighContrastSelectorBlack] = {
+                            color: 'rgb(255, 255, 255)',
+                        },
+                        _d),
+                    color: theme.semanticColors.bodyText,
+                    marginTop: '10px',
+                    paddingTop: '10px',
+                    borderTop: "1px solid ".concat(theme.semanticColors.menuDivider),
+                },
+            ],
+        };
+    };
+    exports.getStyles = getStyles;
+});
+//# sourceMappingURL=GaugeChart.styles.js.map