@fluentui/react-charting 5.25.5 → 5.25.7

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

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

package/lib/components/PolarChart/PolarChart.base.js

@@ -0,0 +1,426 @@
+import { __assign } from "tslib";
+import * as React from 'react';
+import { pointRadial as d3PointRadial, areaRadial as d3AreaRadial, lineRadial as d3LineRadial, curveLinearClosed as d3CurveLinearClosed, } from 'd3-shape';
+import { Legends } from '../Legends/index';
+import { createRadialScale, getContinuousScaleDomain, getScaleType, EPSILON, createAngularScale, formatAngle, } from './PolarChart.utils';
+import { Callout, classNamesFunction, DirectionalHint, FocusZone, FocusZoneDirection, getRTL, getWindow, } from '@fluentui/react';
+import { ChartHoverCard, getColorFromToken, getCurveFactory, getNextColor, isPlottable, sortAxisCategories, } from '../../utilities/index';
+import { extent as d3Extent } from 'd3-array';
+import { formatToLocaleString } from '@fluentui/chart-utilities';
+import { exportChartsAsImage } from '../../utilities/image-export-utils';
+var DEFAULT_LEGEND_HEIGHT = 32;
+var LABEL_WIDTH = 36;
+var LABEL_HEIGHT = 16;
+var LABEL_OFFSET = 10;
+var TICK_SIZE = 6;
+var MIN_MARKER_SIZE_PX = 2;
+var MAX_MARKER_SIZE_PX = 16;
+var MIN_MARKER_SIZE_PX_MARKERS_ONLY = 4;
+var getClassNames = classNamesFunction();
+export var PolarChartBase = React.forwardRef(function (props, forwardedRef) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+    var chartContainerRef = React.useRef(null);
+    var legendsRef = React.useRef(null);
+    var legendContainerRef = React.useRef(null);
+    var _z = React.useState(200), containerWidth = _z[0], setContainerWidth = _z[1];
+    var _0 = React.useState(200), containerHeight = _0[0], setContainerHeight = _0[1];
+    var _1 = React.useState(props.hideLegend ? 0 : DEFAULT_LEGEND_HEIGHT), legendContainerHeight = _1[0], setLegendContainerHeight = _1[1];
+    var _2 = React.useState(false), isCalloutVisible = _2[0], setCalloutVisible = _2[1];
+    var _3 = React.useState(null), calloutTarget = _3[0], setCalloutTarget = _3[1];
+    var _4 = React.useState(''), calloutXValue = _4[0], setCalloutXValue = _4[1];
+    var _5 = React.useState(''), calloutLegend = _5[0], setCalloutLegend = _5[1];
+    var _6 = React.useState(''), calloutColor = _6[0], setCalloutColor = _6[1];
+    var _7 = React.useState(''), calloutYValue = _7[0], setCalloutYValue = _7[1];
+    var _8 = React.useState(''), hoveredLegend = _8[0], setHoveredLegend = _8[1];
+    var _9 = React.useState(((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || []), selectedLegends = _9[0], setSelectedLegends = _9[1];
+    var _10 = React.useState(''), activePoint = _10[0], setActivePoint = _10[1];
+    React.useImperativeHandle(props.componentRef, function () { return ({
+        chartContainer: chartContainerRef.current,
+        toImage: function (opts) {
+            var _a;
+            return exportChartsAsImage([{ container: chartContainerRef.current }], props.hideLegend ? undefined : (_a = legendsRef.current) === null || _a === void 0 ? void 0 : _a.toSVG, getRTL(), opts);
+        },
+    }); }, [props.hideLegend]);
+    React.useEffect(function () {
+        if (chartContainerRef.current) {
+            var _a = chartContainerRef.current.getBoundingClientRect(), width = _a.width, height = _a.height;
+            setContainerWidth(width);
+            setContainerHeight(height);
+        }
+    }, [chartContainerRef]);
+    React.useEffect(function () {
+        if (props.hideLegend) {
+            setLegendContainerHeight(0);
+        }
+        else if (legendContainerRef.current) {
+            var height = legendContainerRef.current.getBoundingClientRect().height;
+            var _window = getWindow(legendContainerRef.current);
+            var marginTop = (_window === null || _window === void 0 ? void 0 : _window.getComputedStyle(legendContainerRef.current).marginTop) || '0px';
+            setLegendContainerHeight(Math.max(height, DEFAULT_LEGEND_HEIGHT) + parseFloat(marginTop));
+        }
+    }, [props.hideLegend]);
+    React.useEffect(function () {
+        var _a;
+        setSelectedLegends(((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.selectedLegends) || []);
+    }, [(_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.selectedLegends]);
+    var margins = React.useMemo(function () { return (__assign({ left: LABEL_OFFSET + LABEL_WIDTH, right: LABEL_OFFSET + LABEL_WIDTH, top: LABEL_OFFSET + LABEL_HEIGHT, bottom: LABEL_OFFSET + LABEL_HEIGHT }, props.margins)); }, [props.margins]);
+    var svgWidth = React.useMemo(function () { return props.width || containerWidth; }, [props.width, containerWidth]);
+    var svgHeight = React.useMemo(function () { return (props.height || containerHeight) - legendContainerHeight; }, [props.height, containerHeight, legendContainerHeight]);
+    var outerRadius = React.useMemo(function () { return Math.min(svgWidth - (margins.left + margins.right), svgHeight - (margins.top + margins.bottom)) / 2; }, [svgWidth, svgHeight, margins]);
+    var innerRadius = React.useMemo(function () { return Math.max(0, Math.min(Math.abs(props.hole || 0), 1)) * outerRadius; }, [props.hole, outerRadius]);
+    var legendColorMap = React.useRef({});
+    var chartData = React.useMemo(function () {
+        legendColorMap.current = {};
+        var colorIndex = 0;
+        var renderingOrder = ['areapolar', 'linepolar', 'scatterpolar'];
+        return props.data
+            .map(function (series) {
+            var seriesColor = series.color ? getColorFromToken(series.color) : getNextColor(colorIndex++, 0);
+            if (!(series.legend in legendColorMap.current)) {
+                legendColorMap.current[series.legend] = seriesColor;
+            }
+            return __assign(__assign({}, series), { color: seriesColor, data: series.data.map(function (point) {
+                    return __assign(__assign({}, point), { color: point.color ? getColorFromToken(point.color) : seriesColor });
+                }) });
+        })
+            .sort(function (a, b) {
+            return renderingOrder.indexOf(a.type) - renderingOrder.indexOf(b.type);
+        });
+    }, [props.data]);
+    var mapCategoryToValues = React.useCallback(function (isAngularAxis) {
+        var categoryToValues = {};
+        chartData.forEach(function (series) {
+            series.data.forEach(function (point) {
+                var category = (isAngularAxis ? point.theta : point.r);
+                if (!categoryToValues[category]) {
+                    categoryToValues[category] = [];
+                }
+                var value = isAngularAxis ? point.r : point.theta;
+                if (typeof value === 'number') {
+                    categoryToValues[category].push(value);
+                }
+            });
+        });
+        return categoryToValues;
+    }, [chartData]);
+    var getOrderedRCategories = React.useCallback(function () {
+        var _a;
+        return sortAxisCategories(mapCategoryToValues(), (_a = props.radialAxis) === null || _a === void 0 ? void 0 : _a.categoryOrder);
+    }, [mapCategoryToValues, (_c = props.radialAxis) === null || _c === void 0 ? void 0 : _c.categoryOrder]);
+    var getOrderedACategories = React.useCallback(function () {
+        var _a;
+        return sortAxisCategories(mapCategoryToValues(true), (_a = props.angularAxis) === null || _a === void 0 ? void 0 : _a.categoryOrder);
+    }, [mapCategoryToValues, (_d = props.angularAxis) === null || _d === void 0 ? void 0 : _d.categoryOrder]);
+    var rValues = React.useMemo(function () { return chartData.flatMap(function (series) { return series.data.map(function (point) { return point.r; }); }); }, [chartData]);
+    var rScaleType = React.useMemo(function () {
+        var _a;
+        return getScaleType(rValues, {
+            scaleType: (_a = props.radialAxis) === null || _a === void 0 ? void 0 : _a.scaleType,
+            supportsLog: true,
+        });
+    }, [rValues, (_e = props.radialAxis) === null || _e === void 0 ? void 0 : _e.scaleType]);
+    var rScaleDomain = React.useMemo(function () {
+        var _a, _b;
+        return rScaleType === 'category'
+            ? getOrderedRCategories()
+            : getContinuousScaleDomain(rScaleType, rValues, {
+                rangeStart: (_a = props.radialAxis) === null || _a === void 0 ? void 0 : _a.rangeStart,
+                rangeEnd: (_b = props.radialAxis) === null || _b === void 0 ? void 0 : _b.rangeEnd,
+            });
+    }, [getOrderedRCategories, rScaleType, rValues, (_f = props.radialAxis) === null || _f === void 0 ? void 0 : _f.rangeStart, (_g = props.radialAxis) === null || _g === void 0 ? void 0 : _g.rangeEnd]);
+    var _11 = React.useMemo(function () {
+        var _a, _b, _c, _d, _e, _f;
+        return createRadialScale(rScaleType, rScaleDomain, [innerRadius, outerRadius], {
+            useUTC: props.useUTC,
+            tickCount: (_a = props.radialAxis) === null || _a === void 0 ? void 0 : _a.tickCount,
+            tickValues: (_b = props.radialAxis) === null || _b === void 0 ? void 0 : _b.tickValues,
+            tickText: (_c = props.radialAxis) === null || _c === void 0 ? void 0 : _c.tickText,
+            tickFormat: (_d = props.radialAxis) === null || _d === void 0 ? void 0 : _d.tickFormat,
+            culture: props.culture,
+            tickStep: (_e = props.radialAxis) === null || _e === void 0 ? void 0 : _e.tickStep,
+            tick0: (_f = props.radialAxis) === null || _f === void 0 ? void 0 : _f.tick0,
+            dateLocalizeOptions: props.dateLocalizeOptions,
+        });
+    }, [
+        rScaleType,
+        rScaleDomain,
+        innerRadius,
+        outerRadius,
+        props.culture,
+        props.dateLocalizeOptions,
+        (_h = props.radialAxis) === null || _h === void 0 ? void 0 : _h.tick0,
+        (_j = props.radialAxis) === null || _j === void 0 ? void 0 : _j.tickCount,
+        (_k = props.radialAxis) === null || _k === void 0 ? void 0 : _k.tickFormat,
+        (_l = props.radialAxis) === null || _l === void 0 ? void 0 : _l.tickStep,
+        (_m = props.radialAxis) === null || _m === void 0 ? void 0 : _m.tickText,
+        (_o = props.radialAxis) === null || _o === void 0 ? void 0 : _o.tickValues,
+        props.useUTC,
+    ]), rScale = _11.scale, rTickValues = _11.tickValues, rTickLabels = _11.tickLabels;
+    var aValues = React.useMemo(function () { return chartData.flatMap(function (series) { return series.data.map(function (point) { return point.theta; }); }); }, [chartData]);
+    var aScaleType = React.useMemo(function () {
+        var _a;
+        return getScaleType(aValues, {
+            scaleType: (_a = props.angularAxis) === null || _a === void 0 ? void 0 : _a.scaleType,
+        });
+    }, [aValues, (_p = props.angularAxis) === null || _p === void 0 ? void 0 : _p.scaleType]);
+    var aDomain = React.useMemo(function () {
+        return aScaleType === 'category'
+            ? getOrderedACategories()
+            : getContinuousScaleDomain(aScaleType, aValues);
+    }, [getOrderedACategories, aScaleType, aValues]);
+    var _12 = React.useMemo(function () {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return createAngularScale(aScaleType, aDomain, {
+            tickCount: (_a = props.angularAxis) === null || _a === void 0 ? void 0 : _a.tickCount,
+            tickValues: (_b = props.angularAxis) === null || _b === void 0 ? void 0 : _b.tickValues,
+            tickText: (_c = props.angularAxis) === null || _c === void 0 ? void 0 : _c.tickText,
+            tickFormat: (_d = props.angularAxis) === null || _d === void 0 ? void 0 : _d.tickFormat,
+            culture: props.culture,
+            tickStep: (_e = props.angularAxis) === null || _e === void 0 ? void 0 : _e.tickStep,
+            tick0: (_f = props.angularAxis) === null || _f === void 0 ? void 0 : _f.tick0,
+            direction: props.direction,
+            unit: (_g = props.angularAxis) === null || _g === void 0 ? void 0 : _g.unit,
+        });
+    }, [
+        aScaleType,
+        aDomain,
+        (_q = props.angularAxis) === null || _q === void 0 ? void 0 : _q.tick0,
+        (_r = props.angularAxis) === null || _r === void 0 ? void 0 : _r.tickCount,
+        (_s = props.angularAxis) === null || _s === void 0 ? void 0 : _s.tickFormat,
+        (_t = props.angularAxis) === null || _t === void 0 ? void 0 : _t.tickStep,
+        (_u = props.angularAxis) === null || _u === void 0 ? void 0 : _u.tickText,
+        (_v = props.angularAxis) === null || _v === void 0 ? void 0 : _v.tickValues,
+        (_w = props.angularAxis) === null || _w === void 0 ? void 0 : _w.unit,
+        props.culture,
+        props.direction,
+    ]), aScale = _12.scale, aTickValues = _12.tickValues, aTickLabels = _12.tickLabels;
+    var classes = React.useMemo(function () {
+        return getClassNames(props.styles, {
+            theme: props.theme,
+        });
+    }, [props.styles, props.theme]);
+    var renderPolarGrid = React.useCallback(function () {
+        var extRTickValues = [];
+        var rDomain = rScale.domain();
+        if (innerRadius > 0 && rDomain[0] !== rTickValues[0]) {
+            extRTickValues.push(rDomain[0]);
+        }
+        extRTickValues.push.apply(extRTickValues, rTickValues);
+        if (rDomain[rDomain.length - 1] !== rTickValues[rTickValues.length - 1]) {
+            extRTickValues.push(rDomain[rDomain.length - 1]);
+        }
+        return (React.createElement("g", null,
+            React.createElement("g", null, extRTickValues.map(function (r, rIndex) {
+                var className = rIndex === extRTickValues.length - 1 ? classes.gridLineOuter : classes.gridLineInner;
+                if (props.shape === 'polygon') {
+                    var d_1 = '';
+                    aTickValues.forEach(function (a, aIndex) {
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        var radialPoint = d3PointRadial(aScale(a), rScale(r));
+                        d_1 += (aIndex === 0 ? 'M' : 'L') + radialPoint.join(',') + ' ';
+                    });
+                    d_1 += 'Z';
+                    return React.createElement("path", { key: rIndex, d: d_1, className: className });
+                }
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                return React.createElement("circle", { key: rIndex, cx: 0, cy: 0, r: rScale(r), className: className });
+            })),
+            React.createElement("g", null, aTickValues.map(function (a, aIndex) {
+                var radialPoint1 = d3PointRadial(aScale(a), innerRadius);
+                var radialPoint2 = d3PointRadial(aScale(a), outerRadius);
+                return (React.createElement("path", { key: aIndex, d: "M".concat(radialPoint1.join(','), " L").concat(radialPoint2.join(',')), className: classes.gridLineInner }));
+            }))));
+    }, [
+        innerRadius,
+        outerRadius,
+        rTickValues,
+        aTickValues,
+        rScale,
+        aScale,
+        props.shape,
+        classes.gridLineInner,
+        classes.gridLineOuter,
+    ]);
+    var renderPolarTicks = React.useCallback(function () {
+        var radialAxisAngle = props.direction === 'clockwise' ? 0 : Math.PI / 2;
+        var radialAxisStartPoint = d3PointRadial(radialAxisAngle, innerRadius);
+        var radialAxisEndPoint = d3PointRadial(radialAxisAngle, outerRadius);
+        // (0, pi]
+        var sign = radialAxisAngle > EPSILON && radialAxisAngle - Math.PI < EPSILON ? 1 : -1;
+        return (React.createElement("g", null,
+            React.createElement("g", null,
+                React.createElement("path", { d: "M".concat(radialAxisStartPoint.join(','), " L").concat(radialAxisEndPoint.join(',')), className: classes.gridLineOuter }),
+                rTickValues.map(function (r, rIndex) {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    var _a = d3PointRadial(radialAxisAngle, rScale(r)), pointX = _a[0], pointY = _a[1];
+                    return (React.createElement("g", { key: rIndex },
+                        React.createElement("path", { d: "M".concat(pointX, ",").concat(pointY, " L").concat(pointX + TICK_SIZE * Math.cos(radialAxisAngle) * sign, ",").concat(pointY + TICK_SIZE * Math.sin(radialAxisAngle) * sign), className: classes.gridLineOuter }),
+                        React.createElement("text", { x: pointX + (TICK_SIZE + LABEL_OFFSET) * Math.cos(radialAxisAngle) * sign, y: pointY + (TICK_SIZE + LABEL_OFFSET) * Math.sin(radialAxisAngle) * sign, textAnchor: 
+                            // pi/2 or 3pi/2
+                            Math.abs(radialAxisAngle - Math.PI / 2) < EPSILON ||
+                                Math.abs(radialAxisAngle - (3 * Math.PI) / 2) < EPSILON
+                                ? 'middle'
+                                : // (0, pi/2) or (pi, 3pi/2)
+                                    (radialAxisAngle > EPSILON && radialAxisAngle - Math.PI / 2 < -EPSILON) ||
+                                        (radialAxisAngle - Math.PI > EPSILON && radialAxisAngle - (3 * Math.PI) / 2 < -EPSILON)
+                                        ? 'start'
+                                        : 'end', dominantBaseline: "middle", "aria-hidden": true, className: classes.tickLabel }, rTickLabels[rIndex])));
+                })),
+            React.createElement("g", null, aTickValues.map(function (a, aIndex) {
+                var angle = aScale(a);
+                var _a = d3PointRadial(angle, outerRadius + LABEL_OFFSET), pointX = _a[0], pointY = _a[1];
+                return (React.createElement("text", { key: aIndex, x: pointX, y: pointY, textAnchor: Math.abs(angle) < EPSILON || Math.abs(angle - Math.PI) < EPSILON
+                        ? 'middle'
+                        : angle > Math.PI
+                            ? 'end'
+                            : 'start', dominantBaseline: "middle", "aria-hidden": true, className: classes.tickLabel }, aTickLabels[aIndex]));
+            }))));
+    }, [
+        rTickValues,
+        aTickValues,
+        rScale,
+        aScale,
+        outerRadius,
+        classes.gridLineOuter,
+        classes.tickLabel,
+        aTickLabels,
+        innerRadius,
+        rTickLabels,
+        props.direction,
+    ]);
+    var getActiveLegends = React.useCallback(function () {
+        return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [hoveredLegend] : [];
+    }, [selectedLegends, hoveredLegend]);
+    var legendHighlighted = React.useCallback(function (legendTitle) {
+        var activeLegends = getActiveLegends();
+        return activeLegends.includes(legendTitle) || activeLegends.length === 0;
+    }, [getActiveLegends]);
+    var renderRadialArea = React.useCallback(function (series) {
+        var _a;
+        var radialArea = d3AreaRadial()
+            .angle(function (d) { return aScale(d.theta); })
+            .innerRadius(innerRadius)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .outerRadius(function (d) { return rScale(d.r); })
+            .curve(getCurveFactory((_a = series.lineOptions) === null || _a === void 0 ? void 0 : _a.curve, d3CurveLinearClosed))
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .defined(function (d) { return isPlottable(aScale(d.theta), rScale(d.r)); });
+        var shouldHighlight = legendHighlighted(series.legend);
+        return (React.createElement("path", { d: radialArea(series.data), fill: series.color, fillOpacity: shouldHighlight ? 0.7 : 0.1, pointerEvents: "none" }));
+    }, [innerRadius, rScale, aScale, legendHighlighted]);
+    var renderRadialLine = React.useCallback(function (series) {
+        var _a, _b, _c, _d, _e, _f;
+        var radialLine = d3LineRadial()
+            .angle(function (d) { return aScale(d.theta); })
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .radius(function (d) { return rScale(d.r); })
+            .curve(getCurveFactory((_a = series.lineOptions) === null || _a === void 0 ? void 0 : _a.curve))
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .defined(function (d) { return isPlottable(aScale(d.theta), rScale(d.r)); });
+        return (React.createElement("path", { d: radialLine(series.data), fill: "none", stroke: series.color, strokeOpacity: legendHighlighted(series.legend) ? 1 : 0.1, strokeWidth: (_c = (_b = series.lineOptions) === null || _b === void 0 ? void 0 : _b.strokeWidth) !== null && _c !== void 0 ? _c : 3, strokeDasharray: (_d = series.lineOptions) === null || _d === void 0 ? void 0 : _d.strokeDasharray, strokeDashoffset: (_e = series.lineOptions) === null || _e === void 0 ? void 0 : _e.strokeDashoffset, strokeLinecap: (_f = series.lineOptions) === null || _f === void 0 ? void 0 : _f.strokeLinecap, pointerEvents: "none" }));
+    }, [rScale, aScale, legendHighlighted]);
+    var _13 = React.useMemo(function () { return d3Extent(chartData.flatMap(function (series) { return series.data.map(function (point) { return point.markerSize; }); })); }, [chartData]), minMarkerSize = _13[0], maxMarkerSize = _13[1];
+    var showCallout = React.useCallback(function (event, point, pointId, legend) {
+        var _a, _b, _c;
+        setCalloutTarget(event.currentTarget);
+        setCalloutVisible(legendHighlighted(legend));
+        setCalloutXValue((_a = point.angularAxisCalloutData) !== null && _a !== void 0 ? _a : formatAngle(point.theta, (_b = props.angularAxis) === null || _b === void 0 ? void 0 : _b.unit));
+        setCalloutLegend(legend);
+        setCalloutColor(point.color);
+        setCalloutYValue((_c = point.radialAxisCalloutData) !== null && _c !== void 0 ? _c : formatToLocaleString(point.r, props.culture, props.useUTC));
+        setActivePoint(pointId);
+    }, [legendHighlighted, (_x = props.angularAxis) === null || _x === void 0 ? void 0 : _x.unit, props.culture, props.useUTC]);
+    var hideCallout = React.useCallback(function () {
+        setCalloutVisible(false);
+        setActivePoint('');
+    }, []);
+    var markersOnlyMode = React.useMemo(function () { return chartData.filter(function (s) { return s.type === 'areapolar' || s.type === 'linepolar'; }).length === 0; }, [chartData]);
+    var renderRadialPoints = React.useCallback(function (series, seriesIndex) {
+        var shouldHighlight = legendHighlighted(series.legend);
+        return (React.createElement("g", null, series.data.map(function (point, pointIndex) {
+            var _a, _b;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            if (!isPlottable(aScale(point.theta), rScale(point.r))) {
+                return null;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            var _c = d3PointRadial(aScale(point.theta), rScale(point.r)), x = _c[0], y = _c[1];
+            var id = "".concat(seriesIndex, "-").concat(pointIndex);
+            var isActive = activePoint === id;
+            var minPx = markersOnlyMode ? MIN_MARKER_SIZE_PX_MARKERS_ONLY : MIN_MARKER_SIZE_PX;
+            var radius = minPx;
+            if (typeof point.markerSize !== 'undefined' && minMarkerSize !== maxMarkerSize) {
+                radius =
+                    minPx +
+                        ((point.markerSize - minMarkerSize) / (maxMarkerSize - minMarkerSize)) *
+                            (MAX_MARKER_SIZE_PX - minPx);
+            }
+            var xValue = point.radialAxisCalloutData || formatToLocaleString(point.r, props.culture, props.useUTC);
+            var legend = series.legend;
+            var yValue = point.angularAxisCalloutData || formatAngle(point.theta, (_a = props.angularAxis) === null || _a === void 0 ? void 0 : _a.unit);
+            var ariaLabel = ((_b = point.callOutAccessibilityData) === null || _b === void 0 ? void 0 : _b.ariaLabel) || "".concat(xValue, ". ").concat(legend, ", ").concat(yValue, ".");
+            return (React.createElement("circle", { key: pointIndex, cx: x, cy: y, r: radius, fill: isActive ? props.theme.semanticColors.bodyBackground : point.color, stroke: isActive ? point.color : 'none', strokeWidth: isActive ? 2 : 0, opacity: shouldHighlight ? 1 : 0.1, "data-is-focusable": shouldHighlight ? 0 : -1, onMouseOver: function (e) { return showCallout(e, point, id, series.legend); }, onFocus: function (e) { return showCallout(e, point, id, series.legend); }, role: "img", "aria-label": ariaLabel }));
+        })));
+    }, [
+        legendHighlighted,
+        rScale,
+        aScale,
+        activePoint,
+        showCallout,
+        minMarkerSize,
+        maxMarkerSize,
+        markersOnlyMode,
+        (_y = props.angularAxis) === null || _y === void 0 ? void 0 : _y.unit,
+        props.culture,
+        props.useUTC,
+        props.theme,
+    ]);
+    var onLegendSelectionChange = React.useCallback(function (_selectedLegends, event, currentLegend) {
+        var _a, _b;
+        if ((_a = props.legendProps) === null || _a === void 0 ? void 0 : _a.canSelectMultipleLegends) {
+            setSelectedLegends(_selectedLegends);
+        }
+        else {
+            setSelectedLegends(_selectedLegends.slice(-1));
+        }
+        if ((_b = props.legendProps) === null || _b === void 0 ? void 0 : _b.onChange) {
+            props.legendProps.onChange(_selectedLegends, event, currentLegend);
+        }
+    }, [props.legendProps]);
+    var renderLegends = React.useCallback(function () {
+        if (props.hideLegend) {
+            return null;
+        }
+        var legends = Object.keys(legendColorMap.current).map(function (legendTitle) {
+            return {
+                title: legendTitle,
+                color: legendColorMap.current[legendTitle],
+                hoverAction: function () {
+                    setHoveredLegend(legendTitle);
+                },
+                onMouseOutAction: function () {
+                    setHoveredLegend('');
+                },
+            };
+        });
+        return (React.createElement("div", { ref: legendContainerRef, className: classes.legendContainer },
+            React.createElement(Legends, __assign({ legends: legends, centerLegends: true, onChange: onLegendSelectionChange, ref: legendsRef }, props.legendProps))));
+    }, [props.hideLegend, props.legendProps, legendsRef, onLegendSelectionChange, classes.legendContainer]);
+    return (React.createElement("div", { className: classes.root, ref: chartContainerRef, onMouseLeave: hideCallout, onBlur: hideCallout },
+        React.createElement(FocusZone, { direction: FocusZoneDirection.horizontal, className: classes.chartWrapper },
+            React.createElement("svg", { className: classes.chart, width: svgWidth, height: svgHeight, role: "region", "aria-label": (props.chartTitle ? "".concat(props.chartTitle, ". ") : '') + "Polar chart with ".concat(chartData.length, " data series.") },
+                React.createElement("g", { transform: "translate(".concat(svgWidth / 2, ", ").concat(svgHeight / 2, ")") },
+                    renderPolarGrid(),
+                    React.createElement("g", null, chartData.map(function (series, seriesIndex) {
+                        return (React.createElement("g", { key: seriesIndex, role: "region", "aria-label": "".concat(series.legend, ", series ").concat(seriesIndex + 1, " of ").concat(chartData.length, " with ").concat(series.data.length, " data points.") },
+                            series.type === 'areapolar' && renderRadialArea(series),
+                            (series.type === 'areapolar' || series.type === 'linepolar') && renderRadialLine(series),
+                            renderRadialPoints(series, seriesIndex)));
+                    })),
+                    renderPolarTicks()))),
+        renderLegends(),
+        !props.hideTooltip && (React.createElement(Callout, __assign({ hidden: !isCalloutVisible, target: calloutTarget, directionalHint: DirectionalHint.topAutoEdge, gapSpace: 15, isBeakVisible: false, onDismiss: hideCallout }, props.calloutProps),
+            React.createElement(ChartHoverCard, { XValue: calloutXValue, Legend: calloutLegend, color: calloutColor, YValue: calloutYValue, culture: props.culture })))));
+});
+PolarChartBase.displayName = 'PolarChart';
+//# sourceMappingURL=PolarChart.base.js.map

package/lib/components/PolarChart/PolarChart.base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolarChart.base.js","sourceRoot":"../src/","sources":["components/PolarChart/PolarChart.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { IPolarChartProps, IPolarChartStyleProps, IPolarChartStyles } from './PolarChart.types';\nimport {\n  pointRadial as d3PointRadial,\n  areaRadial as d3AreaRadial,\n  lineRadial as d3LineRadial,\n  curveLinearClosed as d3CurveLinearClosed,\n} from 'd3-shape';\nimport {\n  IAreaPolarSeries,\n  IImageExportOptions,\n  ILinePolarSeries,\n  IPolarDataPoint,\n  IScatterPolarSeries,\n} from '../../types/IDataPoint';\nimport { ILegend, ILegendContainer, Legends } from '../Legends/index';\nimport {\n  createRadialScale,\n  getContinuousScaleDomain,\n  getScaleType,\n  EPSILON,\n  createAngularScale,\n  formatAngle,\n} from './PolarChart.utils';\nimport {\n  Callout,\n  classNamesFunction,\n  DirectionalHint,\n  FocusZone,\n  FocusZoneDirection,\n  getRTL,\n  getWindow,\n} from '@fluentui/react';\nimport {\n  ChartHoverCard,\n  getColorFromToken,\n  getCurveFactory,\n  getNextColor,\n  isPlottable,\n  sortAxisCategories,\n} from '../../utilities/index';\nimport { extent as d3Extent } from 'd3-array';\nimport { formatToLocaleString } from '@fluentui/chart-utilities';\nimport { exportChartsAsImage } from '../../utilities/image-export-utils';\n\nconst DEFAULT_LEGEND_HEIGHT = 32;\nconst LABEL_WIDTH = 36;\nconst LABEL_HEIGHT = 16;\nconst LABEL_OFFSET = 10;\nconst TICK_SIZE = 6;\nconst MIN_MARKER_SIZE_PX = 2;\nconst MAX_MARKER_SIZE_PX = 16;\nconst MIN_MARKER_SIZE_PX_MARKERS_ONLY = 4;\n\nconst getClassNames = classNamesFunction<IPolarChartStyleProps, IPolarChartStyles>();\n\nexport const PolarChartBase: React.FunctionComponent<IPolarChartProps> = React.forwardRef<\n  HTMLDivElement,\n  IPolarChartProps\n>((props, forwardedRef) => {\n  const chartContainerRef = React.useRef<HTMLDivElement>(null);\n  const legendsRef = React.useRef<ILegendContainer>(null);\n  const legendContainerRef = React.useRef<HTMLDivElement>(null);\n\n  const [containerWidth, setContainerWidth] = React.useState<number>(200);\n  const [containerHeight, setContainerHeight] = React.useState<number>(200);\n  const [legendContainerHeight, setLegendContainerHeight] = React.useState<number>(\n    props.hideLegend ? 0 : DEFAULT_LEGEND_HEIGHT,\n  );\n  const [isCalloutVisible, setCalloutVisible] = React.useState<boolean>(false);\n  const [calloutTarget, setCalloutTarget] = React.useState<SVGElement | null>(null);\n  const [calloutXValue, setCalloutXValue] = React.useState<string>('');\n  const [calloutLegend, setCalloutLegend] = React.useState<string>('');\n  const [calloutColor, setCalloutColor] = React.useState<string>('');\n  const [calloutYValue, setCalloutYValue] = React.useState<string>('');\n  const [hoveredLegend, setHoveredLegend] = React.useState<string>('');\n  const [selectedLegends, setSelectedLegends] = React.useState<string[]>(props.legendProps?.selectedLegends || []);\n  const [activePoint, setActivePoint] = React.useState<string>('');\n\n  React.useImperativeHandle(\n    props.componentRef,\n    () => ({\n      chartContainer: chartContainerRef.current,\n      toImage: (opts?: IImageExportOptions): Promise<string> => {\n        return exportChartsAsImage(\n          [{ container: chartContainerRef.current }],\n          props.hideLegend ? undefined : legendsRef.current?.toSVG,\n          getRTL(),\n          opts,\n        );\n      },\n    }),\n    [props.hideLegend],\n  );\n\n  React.useEffect(() => {\n    if (chartContainerRef.current) {\n      const { width, height } = chartContainerRef.current.getBoundingClientRect();\n      setContainerWidth(width);\n      setContainerHeight(height);\n    }\n  }, [chartContainerRef]);\n  React.useEffect(() => {\n    if (props.hideLegend) {\n      setLegendContainerHeight(0);\n    } else if (legendContainerRef.current) {\n      const { height } = legendContainerRef.current.getBoundingClientRect();\n      const _window = getWindow(legendContainerRef.current);\n      const marginTop = _window?.getComputedStyle(legendContainerRef.current).marginTop || '0px';\n      setLegendContainerHeight(Math.max(height, DEFAULT_LEGEND_HEIGHT) + parseFloat(marginTop));\n    }\n  }, [props.hideLegend]);\n\n  React.useEffect(() => {\n    setSelectedLegends(props.legendProps?.selectedLegends || []);\n  }, [props.legendProps?.selectedLegends]);\n\n  const margins = React.useMemo(\n    () => ({\n      left: LABEL_OFFSET + LABEL_WIDTH,\n      right: LABEL_OFFSET + LABEL_WIDTH,\n      top: LABEL_OFFSET + LABEL_HEIGHT,\n      bottom: LABEL_OFFSET + LABEL_HEIGHT,\n      ...props.margins,\n    }),\n    [props.margins],\n  );\n\n  const svgWidth = React.useMemo(() => props.width || containerWidth, [props.width, containerWidth]);\n  const svgHeight = React.useMemo(\n    () => (props.height || containerHeight) - legendContainerHeight,\n    [props.height, containerHeight, legendContainerHeight],\n  );\n  const outerRadius = React.useMemo(\n    () => Math.min(svgWidth - (margins.left + margins.right), svgHeight - (margins.top + margins.bottom)) / 2,\n    [svgWidth, svgHeight, margins],\n  );\n  const innerRadius = React.useMemo(\n    () => Math.max(0, Math.min(Math.abs(props.hole || 0), 1)) * outerRadius,\n    [props.hole, outerRadius],\n  );\n\n  const legendColorMap = React.useRef<Record<string, string>>({});\n  const chartData = React.useMemo(() => {\n    legendColorMap.current = {};\n    let colorIndex = 0;\n    const renderingOrder = ['areapolar', 'linepolar', 'scatterpolar'];\n\n    return props.data\n      .map(series => {\n        const seriesColor = series.color ? getColorFromToken(series.color) : getNextColor(colorIndex++, 0);\n        if (!(series.legend in legendColorMap.current)) {\n          legendColorMap.current[series.legend] = seriesColor;\n        }\n\n        return {\n          ...series,\n          color: seriesColor,\n          data: series.data.map(point => {\n            return {\n              ...point,\n              color: point.color ? getColorFromToken(point.color) : seriesColor,\n            };\n          }),\n        };\n      })\n      .sort((a, b) => {\n        return renderingOrder.indexOf(a.type) - renderingOrder.indexOf(b.type);\n      });\n  }, [props.data]);\n\n  const mapCategoryToValues = React.useCallback(\n    (isAngularAxis?: boolean) => {\n      const categoryToValues: Record<string, number[]> = {};\n      chartData.forEach(series => {\n        series.data.forEach(point => {\n          const category = (isAngularAxis ? point.theta : point.r) as string;\n          if (!categoryToValues[category]) {\n            categoryToValues[category] = [];\n          }\n          const value = isAngularAxis ? point.r : point.theta;\n          if (typeof value === 'number') {\n            categoryToValues[category].push(value);\n          }\n        });\n      });\n      return categoryToValues;\n    },\n    [chartData],\n  );\n\n  const getOrderedRCategories = React.useCallback(() => {\n    return sortAxisCategories(mapCategoryToValues(), props.radialAxis?.categoryOrder);\n  }, [mapCategoryToValues, props.radialAxis?.categoryOrder]);\n\n  const getOrderedACategories = React.useCallback(() => {\n    return sortAxisCategories(mapCategoryToValues(true), props.angularAxis?.categoryOrder);\n  }, [mapCategoryToValues, props.angularAxis?.categoryOrder]);\n\n  const rValues = React.useMemo(() => chartData.flatMap(series => series.data.map(point => point.r)), [chartData]);\n  const rScaleType = React.useMemo(\n    () =>\n      getScaleType(rValues, {\n        scaleType: props.radialAxis?.scaleType,\n        supportsLog: true,\n      }),\n    [rValues, props.radialAxis?.scaleType],\n  );\n  const rScaleDomain = React.useMemo(\n    () =>\n      rScaleType === 'category'\n        ? getOrderedRCategories()\n        : getContinuousScaleDomain(rScaleType, rValues as (number | Date)[], {\n            rangeStart: props.radialAxis?.rangeStart,\n            rangeEnd: props.radialAxis?.rangeEnd,\n          }),\n    [getOrderedRCategories, rScaleType, rValues, props.radialAxis?.rangeStart, props.radialAxis?.rangeEnd],\n  );\n  const {\n    scale: rScale,\n    tickValues: rTickValues,\n    tickLabels: rTickLabels,\n  } = React.useMemo(\n    () =>\n      createRadialScale(rScaleType, rScaleDomain, [innerRadius, outerRadius], {\n        useUTC: props.useUTC,\n        tickCount: props.radialAxis?.tickCount,\n        tickValues: props.radialAxis?.tickValues,\n        tickText: props.radialAxis?.tickText,\n        tickFormat: props.radialAxis?.tickFormat,\n        culture: props.culture,\n        tickStep: props.radialAxis?.tickStep,\n        tick0: props.radialAxis?.tick0,\n        dateLocalizeOptions: props.dateLocalizeOptions,\n      }),\n    [\n      rScaleType,\n      rScaleDomain,\n      innerRadius,\n      outerRadius,\n      props.culture,\n      props.dateLocalizeOptions,\n      props.radialAxis?.tick0,\n      props.radialAxis?.tickCount,\n      props.radialAxis?.tickFormat,\n      props.radialAxis?.tickStep,\n      props.radialAxis?.tickText,\n      props.radialAxis?.tickValues,\n      props.useUTC,\n    ],\n  );\n\n  const aValues = React.useMemo(() => chartData.flatMap(series => series.data.map(point => point.theta)), [chartData]);\n  const aScaleType = React.useMemo(\n    () =>\n      getScaleType(aValues, {\n        scaleType: props.angularAxis?.scaleType,\n      }),\n    [aValues, props.angularAxis?.scaleType],\n  );\n  const aDomain = React.useMemo(\n    () =>\n      aScaleType === 'category'\n        ? getOrderedACategories()\n        : (getContinuousScaleDomain(aScaleType, aValues as number[]) as number[]),\n    [getOrderedACategories, aScaleType, aValues],\n  );\n  const {\n    scale: aScale,\n    tickValues: aTickValues,\n    tickLabels: aTickLabels,\n  } = React.useMemo(\n    () =>\n      createAngularScale(aScaleType, aDomain, {\n        tickCount: props.angularAxis?.tickCount,\n        tickValues: props.angularAxis?.tickValues,\n        tickText: props.angularAxis?.tickText,\n        tickFormat: props.angularAxis?.tickFormat,\n        culture: props.culture,\n        tickStep: props.angularAxis?.tickStep,\n        tick0: props.angularAxis?.tick0,\n        direction: props.direction,\n        unit: props.angularAxis?.unit,\n      }),\n    [\n      aScaleType,\n      aDomain,\n      props.angularAxis?.tick0,\n      props.angularAxis?.tickCount,\n      props.angularAxis?.tickFormat,\n      props.angularAxis?.tickStep,\n      props.angularAxis?.tickText,\n      props.angularAxis?.tickValues,\n      props.angularAxis?.unit,\n      props.culture,\n      props.direction,\n    ],\n  );\n\n  const classes = React.useMemo(\n    () =>\n      getClassNames(props.styles, {\n        theme: props.theme!,\n      }),\n    [props.styles, props.theme],\n  );\n\n  const renderPolarGrid = React.useCallback(() => {\n    const extRTickValues = [];\n    const rDomain = rScale.domain();\n    if (innerRadius > 0 && rDomain[0] !== rTickValues[0]) {\n      extRTickValues.push(rDomain[0]);\n    }\n    extRTickValues.push(...rTickValues);\n    if (rDomain[rDomain.length - 1] !== rTickValues[rTickValues.length - 1]) {\n      extRTickValues.push(rDomain[rDomain.length - 1]);\n    }\n\n    return (\n      <g>\n        <g>\n          {extRTickValues.map((r, rIndex) => {\n            const className = rIndex === extRTickValues.length - 1 ? classes.gridLineOuter : classes.gridLineInner;\n\n            if (props.shape === 'polygon') {\n              let d = '';\n              aTickValues.forEach((a, aIndex) => {\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                const radialPoint = d3PointRadial(aScale(a), rScale(r as any)!);\n                d += (aIndex === 0 ? 'M' : 'L') + radialPoint.join(',') + ' ';\n              });\n              d += 'Z';\n\n              return <path key={rIndex} d={d} className={className} />;\n            }\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            return <circle key={rIndex} cx={0} cy={0} r={rScale(r as any)} className={className} />;\n          })}\n        </g>\n        <g>\n          {aTickValues.map((a, aIndex) => {\n            const radialPoint1 = d3PointRadial(aScale(a), innerRadius);\n            const radialPoint2 = d3PointRadial(aScale(a), outerRadius);\n\n            return (\n              <path\n                key={aIndex}\n                d={`M${radialPoint1.join(',')} L${radialPoint2.join(',')}`}\n                className={classes.gridLineInner}\n              />\n            );\n          })}\n        </g>\n      </g>\n    );\n  }, [\n    innerRadius,\n    outerRadius,\n    rTickValues,\n    aTickValues,\n    rScale,\n    aScale,\n    props.shape,\n    classes.gridLineInner,\n    classes.gridLineOuter,\n  ]);\n\n  const renderPolarTicks = React.useCallback(() => {\n    const radialAxisAngle = props.direction === 'clockwise' ? 0 : Math.PI / 2;\n    const radialAxisStartPoint = d3PointRadial(radialAxisAngle, innerRadius);\n    const radialAxisEndPoint = d3PointRadial(radialAxisAngle, outerRadius);\n    // (0, pi]\n    const sign = radialAxisAngle > EPSILON && radialAxisAngle - Math.PI < EPSILON ? 1 : -1;\n\n    return (\n      <g>\n        <g>\n          <path\n            d={`M${radialAxisStartPoint.join(',')} L${radialAxisEndPoint.join(',')}`}\n            className={classes.gridLineOuter}\n          />\n          {rTickValues.map((r, rIndex) => {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            const [pointX, pointY] = d3PointRadial(radialAxisAngle, rScale(r as any)!);\n            return (\n              <g key={rIndex}>\n                <path\n                  d={`M${pointX},${pointY} L${pointX + TICK_SIZE * Math.cos(radialAxisAngle) * sign},${\n                    pointY + TICK_SIZE * Math.sin(radialAxisAngle) * sign\n                  }`}\n                  className={classes.gridLineOuter}\n                />\n                <text\n                  x={pointX + (TICK_SIZE + LABEL_OFFSET) * Math.cos(radialAxisAngle) * sign}\n                  y={pointY + (TICK_SIZE + LABEL_OFFSET) * Math.sin(radialAxisAngle) * sign}\n                  textAnchor={\n                    // pi/2 or 3pi/2\n                    Math.abs(radialAxisAngle - Math.PI / 2) < EPSILON ||\n                    Math.abs(radialAxisAngle - (3 * Math.PI) / 2) < EPSILON\n                      ? 'middle'\n                      : // (0, pi/2) or (pi, 3pi/2)\n                      (radialAxisAngle > EPSILON && radialAxisAngle - Math.PI / 2 < -EPSILON) ||\n                        (radialAxisAngle - Math.PI > EPSILON && radialAxisAngle - (3 * Math.PI) / 2 < -EPSILON)\n                      ? 'start'\n                      : 'end'\n                  }\n                  dominantBaseline=\"middle\"\n                  aria-hidden={true}\n                  className={classes.tickLabel}\n                >\n                  {rTickLabels[rIndex]}\n                </text>\n              </g>\n            );\n          })}\n        </g>\n        <g>\n          {aTickValues.map((a, aIndex) => {\n            const angle = aScale(a);\n            const [pointX, pointY] = d3PointRadial(angle, outerRadius + LABEL_OFFSET);\n\n            return (\n              <text\n                key={aIndex}\n                x={pointX}\n                y={pointY}\n                textAnchor={\n                  Math.abs(angle) < EPSILON || Math.abs(angle - Math.PI) < EPSILON\n                    ? 'middle'\n                    : angle > Math.PI\n                    ? 'end'\n                    : 'start'\n                }\n                dominantBaseline=\"middle\"\n                aria-hidden={true}\n                className={classes.tickLabel}\n              >\n                {aTickLabels[aIndex]}\n              </text>\n            );\n          })}\n        </g>\n      </g>\n    );\n  }, [\n    rTickValues,\n    aTickValues,\n    rScale,\n    aScale,\n    outerRadius,\n    classes.gridLineOuter,\n    classes.tickLabel,\n    aTickLabels,\n    innerRadius,\n    rTickLabels,\n    props.direction,\n  ]);\n\n  const getActiveLegends = React.useCallback(() => {\n    return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [hoveredLegend] : [];\n  }, [selectedLegends, hoveredLegend]);\n\n  const legendHighlighted = React.useCallback(\n    (legendTitle: string) => {\n      const activeLegends = getActiveLegends();\n      return activeLegends.includes(legendTitle) || activeLegends.length === 0;\n    },\n    [getActiveLegends],\n  );\n\n  const renderRadialArea = React.useCallback(\n    (series: IAreaPolarSeries) => {\n      const radialArea = d3AreaRadial<IPolarDataPoint>()\n        .angle(d => aScale(d.theta))\n        .innerRadius(innerRadius)\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        .outerRadius(d => rScale(d.r as any)!)\n        .curve(getCurveFactory(series.lineOptions?.curve, d3CurveLinearClosed))\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        .defined(d => isPlottable(aScale(d.theta), rScale(d.r as any)));\n      const shouldHighlight = legendHighlighted(series.legend);\n\n      return (\n        <path\n          d={radialArea(series.data)!}\n          fill={series.color}\n          fillOpacity={shouldHighlight ? 0.7 : 0.1}\n          pointerEvents=\"none\"\n        />\n      );\n    },\n    [innerRadius, rScale, aScale, legendHighlighted],\n  );\n\n  const renderRadialLine = React.useCallback(\n    (series: IAreaPolarSeries | ILinePolarSeries) => {\n      const radialLine = d3LineRadial<IPolarDataPoint>()\n        .angle(d => aScale(d.theta))\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        .radius(d => rScale(d.r as any)!)\n        .curve(getCurveFactory(series.lineOptions?.curve))\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        .defined(d => isPlottable(aScale(d.theta), rScale(d.r as any)));\n\n      return (\n        <path\n          d={radialLine(series.data)!}\n          fill=\"none\"\n          stroke={series.color}\n          strokeOpacity={legendHighlighted(series.legend) ? 1 : 0.1}\n          strokeWidth={series.lineOptions?.strokeWidth ?? 3}\n          strokeDasharray={series.lineOptions?.strokeDasharray}\n          strokeDashoffset={series.lineOptions?.strokeDashoffset}\n          strokeLinecap={series.lineOptions?.strokeLinecap}\n          pointerEvents=\"none\"\n        />\n      );\n    },\n    [rScale, aScale, legendHighlighted],\n  );\n\n  const [minMarkerSize, maxMarkerSize] = React.useMemo(\n    () => d3Extent<number>(chartData.flatMap(series => series.data.map(point => point.markerSize as number))),\n    [chartData],\n  );\n\n  const showCallout = React.useCallback(\n    (\n      event: React.MouseEvent<SVGElement> | React.FocusEvent<SVGElement>,\n      point: IPolarDataPoint,\n      pointId: string,\n      legend: string,\n    ) => {\n      setCalloutTarget(event.currentTarget);\n      setCalloutVisible(legendHighlighted(legend));\n      setCalloutXValue(point.angularAxisCalloutData ?? formatAngle(point.theta, props.angularAxis?.unit));\n      setCalloutLegend(legend);\n      setCalloutColor(point.color!);\n      setCalloutYValue(\n        point.radialAxisCalloutData ?? (formatToLocaleString(point.r, props.culture, props.useUTC) as string),\n      );\n      setActivePoint(pointId);\n    },\n    [legendHighlighted, props.angularAxis?.unit, props.culture, props.useUTC],\n  );\n\n  const hideCallout = React.useCallback(() => {\n    setCalloutVisible(false);\n    setActivePoint('');\n  }, []);\n\n  const markersOnlyMode = React.useMemo(\n    () => chartData.filter(s => s.type === 'areapolar' || s.type === 'linepolar').length === 0,\n    [chartData],\n  );\n\n  const renderRadialPoints = React.useCallback(\n    (series: IAreaPolarSeries | ILinePolarSeries | IScatterPolarSeries, seriesIndex: number) => {\n      const shouldHighlight = legendHighlighted(series.legend);\n      return (\n        <g>\n          {series.data.map((point, pointIndex) => {\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            if (!isPlottable(aScale(point.theta), rScale(point.r as any))) {\n              return null;\n            }\n\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any\n            const [x, y] = d3PointRadial(aScale(point.theta), rScale(point.r as any)!);\n            const id = `${seriesIndex}-${pointIndex}`;\n            const isActive = activePoint === id;\n            const minPx = markersOnlyMode ? MIN_MARKER_SIZE_PX_MARKERS_ONLY : MIN_MARKER_SIZE_PX;\n            let radius = minPx;\n            if (typeof point.markerSize !== 'undefined' && minMarkerSize !== maxMarkerSize) {\n              radius =\n                minPx +\n                ((point.markerSize - minMarkerSize!) / (maxMarkerSize! - minMarkerSize!)) *\n                  (MAX_MARKER_SIZE_PX - minPx);\n            }\n\n            const xValue =\n              point.radialAxisCalloutData || (formatToLocaleString(point.r, props.culture, props.useUTC) as string);\n            const legend = series.legend;\n            const yValue = point.angularAxisCalloutData || formatAngle(point.theta, props.angularAxis?.unit);\n            const ariaLabel = point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;\n\n            return (\n              <circle\n                key={pointIndex}\n                cx={x}\n                cy={y}\n                r={radius}\n                fill={isActive ? props.theme!.semanticColors.bodyBackground : point.color}\n                stroke={isActive ? point.color : 'none'}\n                strokeWidth={isActive ? 2 : 0}\n                opacity={shouldHighlight ? 1 : 0.1}\n                data-is-focusable={shouldHighlight ? 0 : -1}\n                onMouseOver={e => showCallout(e, point, id, series.legend)}\n                onFocus={e => showCallout(e, point, id, series.legend)}\n                role=\"img\"\n                aria-label={ariaLabel}\n              />\n            );\n          })}\n        </g>\n      );\n    },\n    [\n      legendHighlighted,\n      rScale,\n      aScale,\n      activePoint,\n      showCallout,\n      minMarkerSize,\n      maxMarkerSize,\n      markersOnlyMode,\n      props.angularAxis?.unit,\n      props.culture,\n      props.useUTC,\n      props.theme,\n    ],\n  );\n\n  const onLegendSelectionChange = React.useCallback(\n    (_selectedLegends: string[], event: React.MouseEvent<HTMLButtonElement>, currentLegend?: ILegend) => {\n      if (props.legendProps?.canSelectMultipleLegends) {\n        setSelectedLegends(_selectedLegends);\n      } else {\n        setSelectedLegends(_selectedLegends.slice(-1));\n      }\n      if (props.legendProps?.onChange) {\n        props.legendProps.onChange(_selectedLegends, event, currentLegend);\n      }\n    },\n    [props.legendProps],\n  );\n\n  const renderLegends = React.useCallback(() => {\n    if (props.hideLegend) {\n      return null;\n    }\n\n    const legends: ILegend[] = Object.keys(legendColorMap.current).map(legendTitle => {\n      return {\n        title: legendTitle,\n        color: legendColorMap.current[legendTitle],\n        hoverAction: () => {\n          setHoveredLegend(legendTitle);\n        },\n        onMouseOutAction: () => {\n          setHoveredLegend('');\n        },\n      };\n    });\n\n    return (\n      <div ref={legendContainerRef} className={classes.legendContainer}>\n        <Legends\n          legends={legends}\n          centerLegends\n          onChange={onLegendSelectionChange}\n          ref={legendsRef}\n          {...props.legendProps}\n        />\n      </div>\n    );\n  }, [props.hideLegend, props.legendProps, legendsRef, onLegendSelectionChange, classes.legendContainer]);\n\n  return (\n    <div className={classes.root} ref={chartContainerRef} onMouseLeave={hideCallout} onBlur={hideCallout}>\n      <FocusZone direction={FocusZoneDirection.horizontal} className={classes.chartWrapper}>\n        <svg\n          className={classes.chart}\n          width={svgWidth}\n          height={svgHeight}\n          role=\"region\"\n          aria-label={\n            (props.chartTitle ? `${props.chartTitle}. ` : '') + `Polar chart with ${chartData.length} data series.`\n          }\n        >\n          <g transform={`translate(${svgWidth / 2}, ${svgHeight / 2})`}>\n            {renderPolarGrid()}\n            <g>\n              {chartData.map((series, seriesIndex) => {\n                return (\n                  <g\n                    key={seriesIndex}\n                    role=\"region\"\n                    aria-label={`${series.legend}, series ${seriesIndex + 1} of ${chartData.length} with ${\n                      series.data.length\n                    } data points.`}\n                  >\n                    {series.type === 'areapolar' && renderRadialArea(series)}\n                    {(series.type === 'areapolar' || series.type === 'linepolar') && renderRadialLine(series)}\n                    {renderRadialPoints(series, seriesIndex)}\n                  </g>\n                );\n              })}\n            </g>\n            {renderPolarTicks()}\n          </g>\n        </svg>\n      </FocusZone>\n      {renderLegends()}\n      {!props.hideTooltip && (\n        <Callout\n          hidden={!isCalloutVisible}\n          target={calloutTarget}\n          directionalHint={DirectionalHint.topAutoEdge}\n          gapSpace={15}\n          isBeakVisible={false}\n          onDismiss={hideCallout}\n          {...props.calloutProps}\n        >\n          <ChartHoverCard\n            XValue={calloutXValue}\n            Legend={calloutLegend}\n            color={calloutColor}\n            YValue={calloutYValue}\n            culture={props.culture}\n          />\n        </Callout>\n      )}\n    </div>\n  );\n});\n\nPolarChartBase.displayName = 'PolarChart';\n"]}

package/lib/components/PolarChart/PolarChart.d.ts

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

package/lib/components/PolarChart/PolarChart.js

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

package/lib/components/PolarChart/PolarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolarChart.js","sourceRoot":"../src/","sources":["components/PolarChart/PolarChart.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAEvD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD;;;GAGG;AACH,MAAM,CAAC,IAAM,UAAU,GAA8C,MAAM,CAIzE,cAAc,EAAE,SAAS,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/react/lib/Utilities';\nimport { IPolarChartProps, IPolarChartStyleProps, IPolarChartStyles } from './PolarChart.types';\nimport { PolarChartBase } from './PolarChart.base';\nimport { getStyles } from './PolarChart.styles';\n\n/**\n * PolarChart component.\n * {@docCategory PolarChart}\n */\nexport const PolarChart: React.FunctionComponent<IPolarChartProps> = styled<\n  IPolarChartProps,\n  IPolarChartStyleProps,\n  IPolarChartStyles\n>(PolarChartBase, getStyles);\n"]}

package/lib/components/PolarChart/PolarChart.styles.d.ts

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

package/lib/components/PolarChart/PolarChart.styles.js

@@ -0,0 +1,39 @@
+import { __assign } from "tslib";
+import { FontSizes, FontWeights } from '@fluentui/react';
+export var getStyles = function (props) {
+    var theme = props.theme;
+    return {
+        root: __assign(__assign({}, theme.fonts.medium), { display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%', height: '100%', textAlign: 'left' }),
+        chart: {
+            display: 'block',
+        },
+        gridLineInner: [
+            {
+                opacity: 0.2,
+            },
+            getGridLineStyle(theme),
+        ],
+        gridLineOuter: [
+            {
+                opacity: 1,
+            },
+            getGridLineStyle(theme),
+        ],
+        tickLabel: {
+            fontSize: FontSizes.mini,
+            fontWeight: FontWeights.semibold,
+            fill: theme.palette.neutralPrimary,
+        },
+        legendContainer: {
+            width: '100%',
+        },
+    };
+};
+var getGridLineStyle = function (theme) {
+    return {
+        fill: 'none',
+        stroke: theme.palette.neutralPrimary,
+        strokeWidth: '1px',
+    };
+};
+//# sourceMappingURL=PolarChart.styles.js.map

package/lib/components/PolarChart/PolarChart.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PolarChart.styles.js","sourceRoot":"../src/","sources":["components/PolarChart/PolarChart.styles.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAkB,MAAM,iBAAiB,CAAC;AAGzE,MAAM,CAAC,IAAM,SAAS,GAAG,UAAC,KAA4B;IAC5C,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;IAExB,OAAO;QACL,IAAI,wBACC,KAAK,CAAC,KAAK,CAAC,MAAM,KACrB,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,QAAQ,EACvB,UAAU,EAAE,QAAQ,EACpB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,MAAM,GAClB;QAED,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;SACjB;QAED,aAAa,EAAE;YACb;gBACE,OAAO,EAAE,GAAG;aACb;YACD,gBAAgB,CAAC,KAAK,CAAC;SACxB;QAED,aAAa,EAAE;YACb;gBACE,OAAO,EAAE,CAAC;aACX;YACD,gBAAgB,CAAC,KAAK,CAAC;SACxB;QAED,SAAS,EAAE;YACT,QAAQ,EAAE,SAAS,CAAC,IAAI;YACxB,UAAU,EAAE,WAAW,CAAC,QAAQ;YAChC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;SACnC;QAED,eAAe,EAAE;YACf,KAAK,EAAE,MAAM;SACd;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAAG,UAAC,KAAa;IACrC,OAAO;QACL,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QACpC,WAAW,EAAE,KAAK;KACnB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FontSizes, FontWeights, IStyle, ITheme } from '@fluentui/react';\nimport { IPolarChartStyleProps, IPolarChartStyles } from './PolarChart.types';\n\nexport const getStyles = (props: IPolarChartStyleProps): IPolarChartStyles => {\n  const { theme } = props;\n\n  return {\n    root: {\n      ...theme.fonts.medium,\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      width: '100%',\n      height: '100%',\n      textAlign: 'left',\n    },\n\n    chart: {\n      display: 'block',\n    },\n\n    gridLineInner: [\n      {\n        opacity: 0.2,\n      },\n      getGridLineStyle(theme),\n    ],\n\n    gridLineOuter: [\n      {\n        opacity: 1,\n      },\n      getGridLineStyle(theme),\n    ],\n\n    tickLabel: {\n      fontSize: FontSizes.mini,\n      fontWeight: FontWeights.semibold,\n      fill: theme.palette.neutralPrimary,\n    },\n\n    legendContainer: {\n      width: '100%',\n    },\n  };\n};\n\nconst getGridLineStyle = (theme: ITheme): IStyle => {\n  return {\n    fill: 'none',\n    stroke: theme.palette.neutralPrimary,\n    strokeWidth: '1px',\n  };\n};\n"]}