Function ArcLabelsLayer

packages/arcs/src/arc_labels/ArcLabelsLayer.tsx:27–82

({
    center,
    data,
    transitionMode,
    label: labelAccessor,
    radiusOffset,
    skipAngle,
    skipRadius,
    textColor,
    component = ArcLabel,
}: ArcLabelsLayerProps<Datum>)

}

export const ArcLabelsLayer = <Datum extends DatumWithArcAndColor>({
    center,
    data,
    transitionMode,
    label: labelAccessor,
    radiusOffset,
    skipAngle,
    skipRadius,
    textColor,
    component = ArcLabel,
}: ArcLabelsLayerProps<Datum>) => {
    const getLabel = usePropertyAccessor<Datum, string>(labelAccessor)
    const theme = useTheme()
    const getTextColor = useInheritedColor<Datum>(textColor, theme)

    const filteredData = useMemo(
        () =>
            data.filter(datum => {
                const angle = Math.abs(radiansToDegrees(datum.arc.endAngle - datum.arc.startAngle))
                const radius = Math.abs(datum.arc.outerRadius - datum.arc.innerRadius)

                return angle >= skipAngle && radius >= skipRadius
            }),
        [data, skipAngle, skipRadius]
    )

    const { transition, interpolate } = useArcCentersTransition<Datum>(
        filteredData,
        radiusOffset,
        transitionMode
    )

    const Label: ArcLabelComponent<Datum> = component

    return (
        <g transform={`translate(${center[0]},${center[1]})`}>
            {transition((transitionProps, datum) => {
                return createElement(Label, {
                    key: datum.id,
                    datum,
                    label: getLabel(datum),
                    style: {
                        progress: transitionProps.progress,
                        transform: interpolate(
                            transitionProps.startAngle,
                            transitionProps.endAngle,
                            transitionProps.innerRadius,
                            transitionProps.outerRadius
                        ),
                        textColor: getTextColor(datum),
                    },
                })
            })}
        </g>
    )
}