@fluentui/react-charts 9.3.21 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

package/lib-commonjs/components/PolarChart/PolarChart.js

@@ -1,587 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "PolarChart", {
-    enumerable: true,
-    get: function() {
-        return PolarChart;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _usePolarChartStylesstyles = require("./usePolarChartStyles.styles");
-const _hooks = require("../../utilities/hooks");
-const _d3shape = require("d3-shape");
-const _reacttheme = require("@fluentui/react-theme");
-const _index = require("../Legends/index");
-const _PolarChartutils = require("./PolarChart.utils");
-const _ChartPopover = require("../CommonComponents/ChartPopover");
-const _index1 = require("../../utilities/index");
-const _d3array = require("d3-array");
-const _reacttabster = require("@fluentui/react-tabster");
-const _chartutilities = require("@fluentui/chart-utilities");
-const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
-const DEFAULT_LEGEND_HEIGHT = 32;
-const LABEL_WIDTH = 36;
-const LABEL_HEIGHT = 16;
-const LABEL_OFFSET = 10;
-const TICK_SIZE = 6;
-const MIN_MARKER_SIZE_PX = 2;
-const MAX_MARKER_SIZE_PX = 16;
-const MIN_MARKER_SIZE_PX_MARKERS_ONLY = 4;
-const PolarChart = /*#__PURE__*/ _react.forwardRef((props, forwardedRef)=>{
-    var _props_legendProps, _props_legendProps1, _props_radialAxis, _props_angularAxis, _props_radialAxis1, _props_radialAxis2, _props_radialAxis3, _props_radialAxis4, _props_radialAxis5, _props_radialAxis6, _props_radialAxis7, _props_radialAxis8, _props_radialAxis9, _props_angularAxis1, _props_angularAxis2, _props_angularAxis3, _props_angularAxis4, _props_angularAxis5, _props_angularAxis6, _props_angularAxis7, _props_angularAxis8, _props_angularAxis9, _props_angularAxis10;
-    const { chartContainerRef, legendsRef } = (0, _hooks.useImageExport)(props.componentRef, props.hideLegend, false);
-    const legendContainerRef = _react.useRef(null);
-    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
-    const _window = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
-    const [containerWidth, setContainerWidth] = _react.useState(200);
-    const [containerHeight, setContainerHeight] = _react.useState(200);
-    const [legendContainerHeight, setLegendContainerHeight] = _react.useState(props.hideLegend ? 0 : DEFAULT_LEGEND_HEIGHT);
-    const [isPopoverOpen, setPopoverOpen] = _react.useState(false);
-    const [popoverTarget, setPopoverTarget] = _react.useState(null);
-    const [popoverXValue, setPopoverXValue] = _react.useState('');
-    const [popoverLegend, setPopoverLegend] = _react.useState('');
-    const [popoverColor, setPopoverColor] = _react.useState('');
-    const [popoverYValue, setPopoverYValue] = _react.useState('');
-    const [hoveredLegend, setHoveredLegend] = _react.useState('');
-    const [selectedLegends, setSelectedLegends] = _react.useState(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
-    const [activePoint, setActivePoint] = _react.useState('');
-    _react.useEffect(()=>{
-        if (chartContainerRef.current) {
-            const { width, height } = chartContainerRef.current.getBoundingClientRect();
-            setContainerWidth(width);
-            setContainerHeight(height);
-        }
-    }, [
-        chartContainerRef
-    ]);
-    _react.useEffect(()=>{
-        if (props.hideLegend) {
-            setLegendContainerHeight(0);
-        } else if (legendContainerRef.current) {
-            const { height } = legendContainerRef.current.getBoundingClientRect();
-            const 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,
-        _window
-    ]);
-    _react.useEffect(()=>{
-        var _props_legendProps;
-        setSelectedLegends(((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.selectedLegends) || []);
-    }, [
-        (_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.selectedLegends
-    ]);
-    const margins = _react.useMemo(()=>({
-            left: LABEL_OFFSET + LABEL_WIDTH,
-            right: LABEL_OFFSET + LABEL_WIDTH,
-            top: LABEL_OFFSET + LABEL_HEIGHT,
-            bottom: LABEL_OFFSET + LABEL_HEIGHT,
-            ...props.margins
-        }), [
-        props.margins
-    ]);
-    const svgWidth = _react.useMemo(()=>props.width || containerWidth, [
-        props.width,
-        containerWidth
-    ]);
-    const svgHeight = _react.useMemo(()=>(props.height || containerHeight) - legendContainerHeight, [
-        props.height,
-        containerHeight,
-        legendContainerHeight
-    ]);
-    const outerRadius = _react.useMemo(()=>Math.min(svgWidth - (margins.left + margins.right), svgHeight - (margins.top + margins.bottom)) / 2, [
-        svgWidth,
-        svgHeight,
-        margins
-    ]);
-    const innerRadius = _react.useMemo(()=>Math.max(0, Math.min(Math.abs(props.hole || 0), 1)) * outerRadius, [
-        props.hole,
-        outerRadius
-    ]);
-    const legendColorMap = _react.useRef({});
-    const chartData = _react.useMemo(()=>{
-        legendColorMap.current = {};
-        let colorIndex = 0;
-        const renderingOrder = [
-            'areapolar',
-            'linepolar',
-            'scatterpolar'
-        ];
-        return props.data.map((series)=>{
-            const seriesColor = series.color ? (0, _index1.getColorFromToken)(series.color) : (0, _index1.getNextColor)(colorIndex++, 0);
-            if (!(series.legend in legendColorMap.current)) {
-                legendColorMap.current[series.legend] = seriesColor;
-            }
-            return {
-                ...series,
-                color: seriesColor,
-                data: series.data.map((point)=>{
-                    return {
-                        ...point,
-                        color: point.color ? (0, _index1.getColorFromToken)(point.color) : seriesColor
-                    };
-                })
-            };
-        }).sort((a, b)=>{
-            return renderingOrder.indexOf(a.type) - renderingOrder.indexOf(b.type);
-        });
-    }, [
-        props.data
-    ]);
-    const mapCategoryToValues = _react.useCallback((isAngularAxis)=>{
-        const categoryToValues = {};
-        chartData.forEach((series)=>{
-            series.data.forEach((point)=>{
-                const category = isAngularAxis ? point.theta : point.r;
-                if (!categoryToValues[category]) {
-                    categoryToValues[category] = [];
-                }
-                const value = isAngularAxis ? point.r : point.theta;
-                if (typeof value === 'number') {
-                    categoryToValues[category].push(value);
-                }
-            });
-        });
-        return categoryToValues;
-    }, [
-        chartData
-    ]);
-    const getOrderedRCategories = _react.useCallback(()=>{
-        var _props_radialAxis;
-        return (0, _index1.sortAxisCategories)(mapCategoryToValues(), (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.categoryOrder);
-    }, [
-        mapCategoryToValues,
-        (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.categoryOrder
-    ]);
-    const getOrderedACategories = _react.useCallback(()=>{
-        var _props_angularAxis;
-        return (0, _index1.sortAxisCategories)(mapCategoryToValues(true), (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.categoryOrder);
-    }, [
-        mapCategoryToValues,
-        (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.categoryOrder
-    ]);
-    const rValues = _react.useMemo(()=>chartData.flatMap((series)=>series.data.map((point)=>point.r)), [
-        chartData
-    ]);
-    const rScaleType = _react.useMemo(()=>{
-        var _props_radialAxis;
-        return (0, _PolarChartutils.getScaleType)(rValues, {
-            scaleType: (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.scaleType,
-            supportsLog: true
-        });
-    }, [
-        rValues,
-        (_props_radialAxis1 = props.radialAxis) === null || _props_radialAxis1 === void 0 ? void 0 : _props_radialAxis1.scaleType
-    ]);
-    const rScaleDomain = _react.useMemo(()=>{
-        var _props_radialAxis, _props_radialAxis1;
-        return rScaleType === 'category' ? getOrderedRCategories() : (0, _PolarChartutils.getContinuousScaleDomain)(rScaleType, rValues, {
-            rangeStart: (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.rangeStart,
-            rangeEnd: (_props_radialAxis1 = props.radialAxis) === null || _props_radialAxis1 === void 0 ? void 0 : _props_radialAxis1.rangeEnd
-        });
-    }, [
-        getOrderedRCategories,
-        rScaleType,
-        rValues,
-        (_props_radialAxis2 = props.radialAxis) === null || _props_radialAxis2 === void 0 ? void 0 : _props_radialAxis2.rangeStart,
-        (_props_radialAxis3 = props.radialAxis) === null || _props_radialAxis3 === void 0 ? void 0 : _props_radialAxis3.rangeEnd
-    ]);
-    const { scale: rScale, tickValues: rTickValues, tickLabels: rTickLabels } = _react.useMemo(()=>{
-        var _props_radialAxis, _props_radialAxis1, _props_radialAxis2, _props_radialAxis3, _props_radialAxis4, _props_radialAxis5;
-        return (0, _PolarChartutils.createRadialScale)(rScaleType, rScaleDomain, [
-            innerRadius,
-            outerRadius
-        ], {
-            useUTC: props.useUTC,
-            tickCount: (_props_radialAxis = props.radialAxis) === null || _props_radialAxis === void 0 ? void 0 : _props_radialAxis.tickCount,
-            tickValues: (_props_radialAxis1 = props.radialAxis) === null || _props_radialAxis1 === void 0 ? void 0 : _props_radialAxis1.tickValues,
-            tickText: (_props_radialAxis2 = props.radialAxis) === null || _props_radialAxis2 === void 0 ? void 0 : _props_radialAxis2.tickText,
-            tickFormat: (_props_radialAxis3 = props.radialAxis) === null || _props_radialAxis3 === void 0 ? void 0 : _props_radialAxis3.tickFormat,
-            culture: props.culture,
-            tickStep: (_props_radialAxis4 = props.radialAxis) === null || _props_radialAxis4 === void 0 ? void 0 : _props_radialAxis4.tickStep,
-            tick0: (_props_radialAxis5 = props.radialAxis) === null || _props_radialAxis5 === void 0 ? void 0 : _props_radialAxis5.tick0,
-            dateLocalizeOptions: props.dateLocalizeOptions
-        });
-    }, [
-        rScaleType,
-        rScaleDomain,
-        innerRadius,
-        outerRadius,
-        props.culture,
-        props.dateLocalizeOptions,
-        (_props_radialAxis4 = props.radialAxis) === null || _props_radialAxis4 === void 0 ? void 0 : _props_radialAxis4.tick0,
-        (_props_radialAxis5 = props.radialAxis) === null || _props_radialAxis5 === void 0 ? void 0 : _props_radialAxis5.tickCount,
-        (_props_radialAxis6 = props.radialAxis) === null || _props_radialAxis6 === void 0 ? void 0 : _props_radialAxis6.tickFormat,
-        (_props_radialAxis7 = props.radialAxis) === null || _props_radialAxis7 === void 0 ? void 0 : _props_radialAxis7.tickStep,
-        (_props_radialAxis8 = props.radialAxis) === null || _props_radialAxis8 === void 0 ? void 0 : _props_radialAxis8.tickText,
-        (_props_radialAxis9 = props.radialAxis) === null || _props_radialAxis9 === void 0 ? void 0 : _props_radialAxis9.tickValues,
-        props.useUTC
-    ]);
-    const aValues = _react.useMemo(()=>chartData.flatMap((series)=>series.data.map((point)=>point.theta)), [
-        chartData
-    ]);
-    const aScaleType = _react.useMemo(()=>{
-        var _props_angularAxis;
-        return (0, _PolarChartutils.getScaleType)(aValues, {
-            scaleType: (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.scaleType
-        });
-    }, [
-        aValues,
-        (_props_angularAxis1 = props.angularAxis) === null || _props_angularAxis1 === void 0 ? void 0 : _props_angularAxis1.scaleType
-    ]);
-    const aDomain = _react.useMemo(()=>aScaleType === 'category' ? getOrderedACategories() : (0, _PolarChartutils.getContinuousScaleDomain)(aScaleType, aValues), [
-        getOrderedACategories,
-        aScaleType,
-        aValues
-    ]);
-    const { scale: aScale, tickValues: aTickValues, tickLabels: aTickLabels } = _react.useMemo(()=>{
-        var _props_angularAxis, _props_angularAxis1, _props_angularAxis2, _props_angularAxis3, _props_angularAxis4, _props_angularAxis5, _props_angularAxis6;
-        return (0, _PolarChartutils.createAngularScale)(aScaleType, aDomain, {
-            tickCount: (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.tickCount,
-            tickValues: (_props_angularAxis1 = props.angularAxis) === null || _props_angularAxis1 === void 0 ? void 0 : _props_angularAxis1.tickValues,
-            tickText: (_props_angularAxis2 = props.angularAxis) === null || _props_angularAxis2 === void 0 ? void 0 : _props_angularAxis2.tickText,
-            tickFormat: (_props_angularAxis3 = props.angularAxis) === null || _props_angularAxis3 === void 0 ? void 0 : _props_angularAxis3.tickFormat,
-            culture: props.culture,
-            tickStep: (_props_angularAxis4 = props.angularAxis) === null || _props_angularAxis4 === void 0 ? void 0 : _props_angularAxis4.tickStep,
-            tick0: (_props_angularAxis5 = props.angularAxis) === null || _props_angularAxis5 === void 0 ? void 0 : _props_angularAxis5.tick0,
-            direction: props.direction,
-            unit: (_props_angularAxis6 = props.angularAxis) === null || _props_angularAxis6 === void 0 ? void 0 : _props_angularAxis6.unit
-        });
-    }, [
-        aScaleType,
-        aDomain,
-        (_props_angularAxis2 = props.angularAxis) === null || _props_angularAxis2 === void 0 ? void 0 : _props_angularAxis2.tick0,
-        (_props_angularAxis3 = props.angularAxis) === null || _props_angularAxis3 === void 0 ? void 0 : _props_angularAxis3.tickCount,
-        (_props_angularAxis4 = props.angularAxis) === null || _props_angularAxis4 === void 0 ? void 0 : _props_angularAxis4.tickFormat,
-        (_props_angularAxis5 = props.angularAxis) === null || _props_angularAxis5 === void 0 ? void 0 : _props_angularAxis5.tickStep,
-        (_props_angularAxis6 = props.angularAxis) === null || _props_angularAxis6 === void 0 ? void 0 : _props_angularAxis6.tickText,
-        (_props_angularAxis7 = props.angularAxis) === null || _props_angularAxis7 === void 0 ? void 0 : _props_angularAxis7.tickValues,
-        (_props_angularAxis8 = props.angularAxis) === null || _props_angularAxis8 === void 0 ? void 0 : _props_angularAxis8.unit,
-        props.culture,
-        props.direction
-    ]);
-    const classes = (0, _usePolarChartStylesstyles.usePolarChartStyles)(props);
-    const renderPolarGrid = _react.useCallback(()=>{
-        const extRTickValues = [];
-        const rDomain = rScale.domain();
-        if (innerRadius > 0 && rDomain[0] !== rTickValues[0]) {
-            extRTickValues.push(rDomain[0]);
-        }
-        extRTickValues.push(...rTickValues);
-        if (rDomain[rDomain.length - 1] !== rTickValues[rTickValues.length - 1]) {
-            extRTickValues.push(rDomain[rDomain.length - 1]);
-        }
-        return /*#__PURE__*/ _react.createElement("g", null, /*#__PURE__*/ _react.createElement("g", null, extRTickValues.map((r, rIndex)=>{
-            const className = rIndex === extRTickValues.length - 1 ? classes.gridLineOuter : classes.gridLineInner;
-            if (props.shape === 'polygon') {
-                let d = '';
-                aTickValues.forEach((a, aIndex)=>{
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    const radialPoint = (0, _d3shape.pointRadial)(aScale(a), rScale(r));
-                    d += (aIndex === 0 ? 'M' : 'L') + radialPoint.join(',') + ' ';
-                });
-                d += 'Z';
-                return /*#__PURE__*/ _react.createElement("path", {
-                    key: rIndex,
-                    d: d,
-                    className: className
-                });
-            }
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            return /*#__PURE__*/ _react.createElement("circle", {
-                key: rIndex,
-                cx: 0,
-                cy: 0,
-                r: rScale(r),
-                className: className
-            });
-        })), /*#__PURE__*/ _react.createElement("g", null, aTickValues.map((a, aIndex)=>{
-            const radialPoint1 = (0, _d3shape.pointRadial)(aScale(a), innerRadius);
-            const radialPoint2 = (0, _d3shape.pointRadial)(aScale(a), outerRadius);
-            return /*#__PURE__*/ _react.createElement("path", {
-                key: aIndex,
-                d: `M${radialPoint1.join(',')} L${radialPoint2.join(',')}`,
-                className: classes.gridLineInner
-            });
-        })));
-    }, [
-        innerRadius,
-        outerRadius,
-        rTickValues,
-        aTickValues,
-        rScale,
-        aScale,
-        props.shape,
-        classes.gridLineInner,
-        classes.gridLineOuter
-    ]);
-    const renderPolarTicks = _react.useCallback(()=>{
-        const radialAxisAngle = props.direction === 'clockwise' ? 0 : Math.PI / 2;
-        const radialAxisStartPoint = (0, _d3shape.pointRadial)(radialAxisAngle, innerRadius);
-        const radialAxisEndPoint = (0, _d3shape.pointRadial)(radialAxisAngle, outerRadius);
-        // (0, pi]
-        const sign = radialAxisAngle > _PolarChartutils.EPSILON && radialAxisAngle - Math.PI < _PolarChartutils.EPSILON ? 1 : -1;
-        return /*#__PURE__*/ _react.createElement("g", null, /*#__PURE__*/ _react.createElement("g", null, /*#__PURE__*/ _react.createElement("path", {
-            d: `M${radialAxisStartPoint.join(',')} L${radialAxisEndPoint.join(',')}`,
-            className: classes.gridLineOuter
-        }), rTickValues.map((r, rIndex)=>{
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const [pointX, pointY] = (0, _d3shape.pointRadial)(radialAxisAngle, rScale(r));
-            return /*#__PURE__*/ _react.createElement("g", {
-                key: rIndex
-            }, /*#__PURE__*/ _react.createElement("path", {
-                d: `M${pointX},${pointY} L${pointX + TICK_SIZE * Math.cos(radialAxisAngle) * sign},${pointY + TICK_SIZE * Math.sin(radialAxisAngle) * sign}`,
-                className: classes.gridLineOuter
-            }), /*#__PURE__*/ _react.createElement("text", {
-                x: pointX + (TICK_SIZE + LABEL_OFFSET) * Math.cos(radialAxisAngle) * sign,
-                y: pointY + (TICK_SIZE + LABEL_OFFSET) * Math.sin(radialAxisAngle) * sign,
-                textAnchor: Math.abs(radialAxisAngle - Math.PI / 2) < _PolarChartutils.EPSILON || Math.abs(radialAxisAngle - 3 * Math.PI / 2) < _PolarChartutils.EPSILON ? 'middle' : radialAxisAngle > _PolarChartutils.EPSILON && radialAxisAngle - Math.PI / 2 < -_PolarChartutils.EPSILON || radialAxisAngle - Math.PI > _PolarChartutils.EPSILON && radialAxisAngle - 3 * Math.PI / 2 < -_PolarChartutils.EPSILON ? 'start' : 'end',
-                dominantBaseline: "middle",
-                "aria-hidden": true,
-                className: classes.tickLabel
-            }, rTickLabels[rIndex]));
-        })), /*#__PURE__*/ _react.createElement("g", null, aTickValues.map((a, aIndex)=>{
-            const angle = aScale(a);
-            const [pointX, pointY] = (0, _d3shape.pointRadial)(angle, outerRadius + LABEL_OFFSET);
-            return /*#__PURE__*/ _react.createElement("text", {
-                key: aIndex,
-                x: pointX,
-                y: pointY,
-                textAnchor: Math.abs(angle) < _PolarChartutils.EPSILON || Math.abs(angle - Math.PI) < _PolarChartutils.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
-    ]);
-    const getActiveLegends = _react.useCallback(()=>{
-        return selectedLegends.length > 0 ? selectedLegends : hoveredLegend ? [
-            hoveredLegend
-        ] : [];
-    }, [
-        selectedLegends,
-        hoveredLegend
-    ]);
-    const legendHighlighted = _react.useCallback((legendTitle)=>{
-        const activeLegends = getActiveLegends();
-        return activeLegends.includes(legendTitle) || activeLegends.length === 0;
-    }, [
-        getActiveLegends
-    ]);
-    const renderRadialArea = _react.useCallback((series)=>{
-        var _series_lineOptions;
-        const radialArea = (0, _d3shape.areaRadial)().angle((d)=>aScale(d.theta)).innerRadius(innerRadius) // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .outerRadius((d)=>rScale(d.r)).curve((0, _index1.getCurveFactory)((_series_lineOptions = series.lineOptions) === null || _series_lineOptions === void 0 ? void 0 : _series_lineOptions.curve, _d3shape.curveLinearClosed)) // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .defined((d)=>(0, _index1.isPlottable)(aScale(d.theta), rScale(d.r)));
-        const shouldHighlight = legendHighlighted(series.legend);
-        return /*#__PURE__*/ _react.createElement("path", {
-            d: radialArea(series.data),
-            fill: series.color,
-            fillOpacity: shouldHighlight ? 0.7 : 0.1,
-            pointerEvents: "none"
-        });
-    }, [
-        innerRadius,
-        rScale,
-        aScale,
-        legendHighlighted
-    ]);
-    const renderRadialLine = _react.useCallback((series)=>{
-        var _series_lineOptions, _series_lineOptions1, _series_lineOptions2, _series_lineOptions3, _series_lineOptions4;
-        const radialLine = (0, _d3shape.lineRadial)().angle((d)=>aScale(d.theta)) // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .radius((d)=>rScale(d.r)).curve((0, _index1.getCurveFactory)((_series_lineOptions = series.lineOptions) === null || _series_lineOptions === void 0 ? void 0 : _series_lineOptions.curve)) // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .defined((d)=>(0, _index1.isPlottable)(aScale(d.theta), rScale(d.r)));
-        var _series_lineOptions_strokeWidth;
-        return /*#__PURE__*/ _react.createElement("path", {
-            d: radialLine(series.data),
-            fill: "none",
-            stroke: series.color,
-            strokeOpacity: legendHighlighted(series.legend) ? 1 : 0.1,
-            strokeWidth: (_series_lineOptions_strokeWidth = (_series_lineOptions1 = series.lineOptions) === null || _series_lineOptions1 === void 0 ? void 0 : _series_lineOptions1.strokeWidth) !== null && _series_lineOptions_strokeWidth !== void 0 ? _series_lineOptions_strokeWidth : 3,
-            strokeDasharray: (_series_lineOptions2 = series.lineOptions) === null || _series_lineOptions2 === void 0 ? void 0 : _series_lineOptions2.strokeDasharray,
-            strokeDashoffset: (_series_lineOptions3 = series.lineOptions) === null || _series_lineOptions3 === void 0 ? void 0 : _series_lineOptions3.strokeDashoffset,
-            strokeLinecap: (_series_lineOptions4 = series.lineOptions) === null || _series_lineOptions4 === void 0 ? void 0 : _series_lineOptions4.strokeLinecap,
-            pointerEvents: "none"
-        });
-    }, [
-        rScale,
-        aScale,
-        legendHighlighted
-    ]);
-    const [minMarkerSize, maxMarkerSize] = _react.useMemo(()=>(0, _d3array.extent)(chartData.flatMap((series)=>series.data.map((point)=>point.markerSize))), [
-        chartData
-    ]);
-    const showPopover = _react.useCallback((event, point, pointId, legend)=>{
-        var _props_angularAxis;
-        setPopoverTarget(event.currentTarget);
-        setPopoverOpen(legendHighlighted(legend));
-        var _point_angularAxisCalloutData;
-        setPopoverXValue((_point_angularAxisCalloutData = point.angularAxisCalloutData) !== null && _point_angularAxisCalloutData !== void 0 ? _point_angularAxisCalloutData : (0, _PolarChartutils.formatAngle)(point.theta, (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.unit));
-        setPopoverLegend(legend);
-        setPopoverColor(point.color);
-        var _point_radialAxisCalloutData;
-        setPopoverYValue((_point_radialAxisCalloutData = point.radialAxisCalloutData) !== null && _point_radialAxisCalloutData !== void 0 ? _point_radialAxisCalloutData : (0, _chartutilities.formatToLocaleString)(point.r, props.culture, props.useUTC));
-        setActivePoint(pointId);
-    }, [
-        legendHighlighted,
-        (_props_angularAxis9 = props.angularAxis) === null || _props_angularAxis9 === void 0 ? void 0 : _props_angularAxis9.unit,
-        props.culture,
-        props.useUTC
-    ]);
-    const hidePopover = _react.useCallback(()=>{
-        setPopoverOpen(false);
-        setActivePoint('');
-    }, []);
-    const markersOnlyMode = _react.useMemo(()=>chartData.filter((s)=>s.type === 'areapolar' || s.type === 'linepolar').length === 0, [
-        chartData
-    ]);
-    const renderRadialPoints = _react.useCallback((series, seriesIndex)=>{
-        const shouldHighlight = legendHighlighted(series.legend);
-        return /*#__PURE__*/ _react.createElement("g", null, series.data.map((point, pointIndex)=>{
-            var _props_angularAxis, _point_callOutAccessibilityData;
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            if (!(0, _index1.isPlottable)(aScale(point.theta), rScale(point.r))) {
-                return null;
-            }
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            const [x, y] = (0, _d3shape.pointRadial)(aScale(point.theta), rScale(point.r));
-            const id = `${seriesIndex}-${pointIndex}`;
-            const isActive = activePoint === id;
-            const minPx = markersOnlyMode ? MIN_MARKER_SIZE_PX_MARKERS_ONLY : MIN_MARKER_SIZE_PX;
-            let radius = minPx;
-            if (typeof point.markerSize !== 'undefined' && minMarkerSize !== maxMarkerSize) {
-                radius = minPx + (point.markerSize - minMarkerSize) / (maxMarkerSize - minMarkerSize) * (MAX_MARKER_SIZE_PX - minPx);
-            }
-            const xValue = point.radialAxisCalloutData || (0, _chartutilities.formatToLocaleString)(point.r, props.culture, props.useUTC);
-            const legend = series.legend;
-            const yValue = point.angularAxisCalloutData || (0, _PolarChartutils.formatAngle)(point.theta, (_props_angularAxis = props.angularAxis) === null || _props_angularAxis === void 0 ? void 0 : _props_angularAxis.unit);
-            const ariaLabel = ((_point_callOutAccessibilityData = point.callOutAccessibilityData) === null || _point_callOutAccessibilityData === void 0 ? void 0 : _point_callOutAccessibilityData.ariaLabel) || `${xValue}. ${legend}, ${yValue}.`;
-            return /*#__PURE__*/ _react.createElement("circle", {
-                key: pointIndex,
-                cx: x,
-                cy: y,
-                r: radius,
-                fill: isActive ? _reacttheme.tokens.colorNeutralBackground1 : point.color,
-                stroke: isActive ? point.color : 'none',
-                strokeWidth: isActive ? 2 : 0,
-                opacity: shouldHighlight ? 1 : 0.1,
-                tabIndex: shouldHighlight ? 0 : -1,
-                onMouseOver: (e)=>showPopover(e, point, id, series.legend),
-                onFocus: (e)=>showPopover(e, point, id, series.legend),
-                role: "img",
-                "aria-label": ariaLabel
-            });
-        }));
-    }, [
-        legendHighlighted,
-        rScale,
-        aScale,
-        activePoint,
-        showPopover,
-        minMarkerSize,
-        maxMarkerSize,
-        markersOnlyMode,
-        (_props_angularAxis10 = props.angularAxis) === null || _props_angularAxis10 === void 0 ? void 0 : _props_angularAxis10.unit,
-        props.culture,
-        props.useUTC
-    ]);
-    const onLegendSelectionChange = _react.useCallback((_selectedLegends, event, currentLegend)=>{
-        var _props_legendProps, _props_legendProps1;
-        if ((_props_legendProps = props.legendProps) === null || _props_legendProps === void 0 ? void 0 : _props_legendProps.canSelectMultipleLegends) {
-            setSelectedLegends(_selectedLegends);
-        } else {
-            setSelectedLegends(_selectedLegends.slice(-1));
-        }
-        if ((_props_legendProps1 = props.legendProps) === null || _props_legendProps1 === void 0 ? void 0 : _props_legendProps1.onChange) {
-            props.legendProps.onChange(_selectedLegends, event, currentLegend);
-        }
-    }, [
-        props.legendProps
-    ]);
-    const renderLegends = _react.useCallback(()=>{
-        if (props.hideLegend) {
-            return null;
-        }
-        const legends = Object.keys(legendColorMap.current).map((legendTitle)=>{
-            return {
-                title: legendTitle,
-                color: legendColorMap.current[legendTitle],
-                hoverAction: ()=>{
-                    setHoveredLegend(legendTitle);
-                },
-                onMouseOutAction: ()=>{
-                    setHoveredLegend('');
-                }
-            };
-        });
-        return /*#__PURE__*/ _react.createElement("div", {
-            ref: legendContainerRef,
-            className: classes.legendContainer
-        }, /*#__PURE__*/ _react.createElement(_index.Legends, {
-            legends: legends,
-            centerLegends: true,
-            onChange: onLegendSelectionChange,
-            legendRef: legendsRef,
-            ...props.legendProps
-        }));
-    }, [
-        props.hideLegend,
-        props.legendProps,
-        legendsRef,
-        onLegendSelectionChange,
-        classes.legendContainer
-    ]);
-    const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
-        axis: 'horizontal'
-    });
-    return /*#__PURE__*/ _react.createElement("div", {
-        className: classes.root,
-        ref: chartContainerRef,
-        onMouseLeave: hidePopover,
-        onBlur: hidePopover
-    }, /*#__PURE__*/ _react.createElement("div", {
-        className: classes.chartWrapper,
-        ...focusAttributes
-    }, /*#__PURE__*/ _react.createElement("svg", {
-        className: classes.chart,
-        width: svgWidth,
-        height: svgHeight,
-        role: "region",
-        "aria-label": (props.chartTitle ? `${props.chartTitle}. ` : '') + `Polar chart with ${chartData.length} data series.`
-    }, /*#__PURE__*/ _react.createElement("g", {
-        transform: `translate(${svgWidth / 2}, ${svgHeight / 2})`
-    }, renderPolarGrid(), /*#__PURE__*/ _react.createElement("g", null, chartData.map((series, seriesIndex)=>{
-        return /*#__PURE__*/ _react.createElement("g", {
-            key: seriesIndex,
-            role: "region",
-            "aria-label": `${series.legend}, series ${seriesIndex + 1} of ${chartData.length} with ${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 && /*#__PURE__*/ _react.createElement(_ChartPopover.ChartPopover, {
-        isPopoverOpen: isPopoverOpen,
-        positioning: {
-            target: popoverTarget
-        },
-        XValue: popoverXValue,
-        legend: popoverLegend,
-        color: popoverColor,
-        YValue: popoverYValue
-    }));
-});
-PolarChart.displayName = 'PolarChart';