@awsui/components-react/pie-chart/segments.js

AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A

import React, { useEffect, useMemo, useRef } from 'react';
import { arc } from 'd3-shape';
import { nodeContains } from '../internal/utils/dom';
import { dimensionsBySize } from './utils';
import Segment from './segment';
export default function Segments(_a) {
    var pieData = _a.pieData, highlightedSegment = _a.highlightedSegment, size = _a.size, variant = _a.variant, containerRef = _a.containerRef, focusOutlineRef = _a.focusOutlineRef, segmentAriaRoleDescription = _a.segmentAriaRoleDescription, onClick = _a.onClick, onMouseOver = _a.onMouseOver, onMouseOut = _a.onMouseOut, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus;
    var _b = useMemo(function () {
        var dimensions = dimensionsBySize[size];
        var radius = dimensions.outerRadius;
        var innerRadius = variant === 'pie' ? 0 : dimensions.innerRadius;
        var arcFactory = arc().innerRadius(innerRadius).outerRadius(radius);
        var highlightedArcFactory = arc()
            .innerRadius(radius + 4)
            .outerRadius(radius + 6);
        return {
            arcFactory: arcFactory,
            highlightedArcFactory: highlightedArcFactory
        };
    }, [size, variant]), arcFactory = _b.arcFactory, highlightedArcFactory = _b.highlightedArcFactory;
    var focusedSegmentRef = useRef(null);
    useEffect(function () {
        if (containerRef.current &&
            focusedSegmentRef.current &&
            nodeContains(containerRef.current, document.activeElement)) {
            var target = focusedSegmentRef.current;
            if (target.focus) {
                target.focus();
            }
            else {
                window.HTMLElement.prototype.focus.call(target);
            }
            if (focusOutlineRef.current) {
                var PADDING = 2;
                var box = focusedSegmentRef.current.getBoundingClientRect();
                var parentBox = containerRef.current.getBoundingClientRect();
                var rect = focusOutlineRef.current;
                rect.setAttribute('x', "" + (box.left - parentBox.left - parentBox.width / 2 - PADDING));
                rect.setAttribute('y', "" + (box.top - parentBox.top - parentBox.height / 2 - PADDING));
                rect.setAttribute('width', "" + (box.width + 2 * PADDING));
                rect.setAttribute('height', "" + (box.height + 2 * PADDING));
            }
        }
    }, [containerRef, focusOutlineRef, highlightedSegment]);
    return (React.createElement("g", null, pieData.map(function (datum, index) {
        var isHighlighted = highlightedSegment === datum.data.datum;
        var isDimmed = highlightedSegment !== null && !isHighlighted;
        return (React.createElement(Segment, { key: index, pieArcDatum: datum, arcFactory: arcFactory, highlightedArcFactory: highlightedArcFactory, containerRef: containerRef, focusedSegmentRef: focusedSegmentRef, focusOutlineRef: focusOutlineRef, isHighlighted: isHighlighted, isDimmed: isDimmed, tabIndex: isHighlighted || (highlightedSegment === null && index === 0) ? 0 : -1, ariaRole: segmentAriaRoleDescription, onClick: onClick.bind(null, datum.data), onMouseOver: onMouseOver.bind(null, datum.data), onMouseOut: onMouseOut, onKeyDown: onKeyDown.bind(null, index), onFocus: onFocus.bind(null, datum.data) }));
    })));
}