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

package/lib/components/PolarChart/PolarChart.js

@@ -1,577 +0,0 @@
-'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,
-        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, {
-        isPopoverOpen: isPopoverOpen,
-        positioning: {
-            target: popoverTarget
-        },
-        XValue: popoverXValue,
-        legend: popoverLegend,
-        color: popoverColor,
-        YValue: popoverYValue
-    }));
-});
-PolarChart.displayName = 'PolarChart';