@fluentui/react-charts 0.0.0-nightly-20260112-0407.1 → 0.0.0-nightly-20260113-0406.1

package/lib/components/PolarChart/PolarChart.js

@@ -0,0 +1,576 @@
+'use client';
+import * as React from 'react';
+import { usePolarChartStyles } from './usePolarChartStyles.styles';
+import { useImageExport } from '../../utilities/hooks';
+import { pointRadial as d3PointRadial, areaRadial as d3AreaRadial, lineRadial as d3LineRadial, curveLinearClosed as d3CurveLinearClosed } from 'd3-shape';
+import { tokens } from '@fluentui/react-theme';
+import { Legends } from '../Legends/index';
+import { createRadialScale, getContinuousScaleDomain, getScaleType, EPSILON, createAngularScale, formatAngle } from './PolarChart.utils';
+import { ChartPopover } from '../CommonComponents/ChartPopover';
+import { getColorFromToken, getCurveFactory, getNextColor, isPlottable, sortAxisCategories } from '../../utilities/index';
+import { extent as d3Extent } from 'd3-array';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { formatToLocaleString } from '@fluentui/chart-utilities';
+import { useFluent_unstable as useFluent } from '@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;
+export 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 } = useImageExport(props.componentRef, props.hideLegend, false);
+    const legendContainerRef = React.useRef(null);
+    const { targetDocument } = useFluent();
+    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 ? getColorFromToken(series.color) : 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 ? 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 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 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 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() : 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 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 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() : 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 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 = 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 = d3PointRadial(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 = d3PointRadial(aScale(a), innerRadius);
+            const radialPoint2 = d3PointRadial(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 = d3PointRadial(radialAxisAngle, innerRadius);
+        const radialAxisEndPoint = d3PointRadial(radialAxisAngle, outerRadius);
+        // (0, pi]
+        const sign = radialAxisAngle > EPSILON && radialAxisAngle - Math.PI < 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] = d3PointRadial(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: // pi/2 or 3pi/2
+                Math.abs(radialAxisAngle - Math.PI / 2) < EPSILON || Math.abs(radialAxisAngle - 3 * Math.PI / 2) < EPSILON ? 'middle' : 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]));
+        })), /*#__PURE__*/ React.createElement("g", null, aTickValues.map((a, aIndex)=>{
+            const angle = aScale(a);
+            const [pointX, pointY] = d3PointRadial(angle, outerRadius + LABEL_OFFSET);
+            return /*#__PURE__*/ 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
+    ]);
+    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 = d3AreaRadial().angle((d)=>aScale(d.theta)).innerRadius(innerRadius)// eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .outerRadius((d)=>rScale(d.r)).curve(getCurveFactory((_series_lineOptions = series.lineOptions) === null || _series_lineOptions === void 0 ? void 0 : _series_lineOptions.curve, d3CurveLinearClosed))// eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .defined((d)=>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 = d3LineRadial().angle((d)=>aScale(d.theta))// eslint-disable-next-line @typescript-eslint/no-explicit-any
+        .radius((d)=>rScale(d.r)).curve(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)=>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(()=>d3Extent(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 : 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 : 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 (!isPlottable(aScale(point.theta), rScale(point.r))) {
+                return null;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const [x, y] = d3PointRadial(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 || formatToLocaleString(point.r, props.culture, props.useUTC);
+            const legend = series.legend;
+            const yValue = point.angularAxisCalloutData || 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 ? 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(Legends, {
+            legends: legends,
+            centerLegends: true,
+            onChange: onLegendSelectionChange,
+            legendRef: legendsRef,
+            ...props.legendProps
+        }));
+    }, [
+        props.hideLegend,
+        props.legendProps,
+        legendsRef,
+        onLegendSelectionChange,
+        classes.legendContainer
+    ]);
+    const focusAttributes = 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,
+        viewBox: `${-svgWidth / 2} ${-svgHeight / 2} ${svgWidth} ${svgHeight}`,
+        role: "region",
+        "aria-label": (props.chartTitle ? `${props.chartTitle}. ` : '') + `Polar chart with ${chartData.length} data series.`
+    }, 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, {
+        isPopoverOpen: isPopoverOpen,
+        positioning: {
+            target: popoverTarget
+        },
+        XValue: popoverXValue,
+        legend: popoverLegend,
+        color: popoverColor,
+        YValue: popoverYValue
+    }));
+});
+PolarChart.displayName = 'PolarChart';