UNPKG

@mui/x-charts

Version:

The community edition of MUI X Charts components.

122 lines (121 loc) 4.29 kB
'use client'; import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; const _excluded = ["classes", "color", "dataIndex", "id", "isFaded", "isHighlighted", "onClick", "cornerRadius", "startAngle", "endAngle", "innerRadius", "outerRadius", "paddingAngle", "skipAnimation"]; import * as React from 'react'; import PropTypes from 'prop-types'; import composeClasses from '@mui/utils/composeClasses'; import generateUtilityClass from '@mui/utils/generateUtilityClass'; import { styled } from '@mui/material/styles'; import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; import { useAnimatePieArc } from "../hooks/index.js"; import { ANIMATION_DURATION_MS, ANIMATION_TIMING_FUNCTION } from "../internals/animation/animation.js"; import { useInteractionItemProps } from "../hooks/useInteractionItemProps.js"; import { jsx as _jsx } from "react/jsx-runtime"; export function getPieArcUtilityClass(slot) { return generateUtilityClass('MuiPieArc', slot); } export const pieArcClasses = generateUtilityClasses('MuiPieArc', ['root', 'highlighted', 'faded', 'series']); const useUtilityClasses = ownerState => { const { classes, id, isFaded, isHighlighted, dataIndex } = ownerState; const slots = { root: ['root', `series-${id}`, `data-index-${dataIndex}`, isHighlighted && 'highlighted', isFaded && 'faded'] }; return composeClasses(slots, getPieArcUtilityClass, classes); }; const PieArcRoot = styled('path', { name: 'MuiPieArc', slot: 'Root', overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot })(({ theme }) => ({ // Got to move stroke to an element prop instead of style. stroke: (theme.vars || theme).palette.background.paper, transitionProperty: 'opacity, fill, filter', transitionDuration: `${ANIMATION_DURATION_MS}ms`, transitionTimingFunction: ANIMATION_TIMING_FUNCTION })); const PieArc = /*#__PURE__*/React.forwardRef(function PieArc(props, ref) { const { classes: innerClasses, color, dataIndex, id, isFaded, isHighlighted, onClick, cornerRadius, startAngle, endAngle, innerRadius, outerRadius, paddingAngle, skipAnimation } = props, other = _objectWithoutPropertiesLoose(props, _excluded); const ownerState = { id, dataIndex, classes: innerClasses, color, isFaded, isHighlighted }; const classes = useUtilityClasses(ownerState); const interactionProps = useInteractionItemProps({ type: 'pie', seriesId: id, dataIndex }); const animatedProps = useAnimatePieArc({ cornerRadius, startAngle, endAngle, innerRadius, outerRadius, paddingAngle, skipAnimation, ref }); return /*#__PURE__*/_jsx(PieArcRoot, _extends({ onClick: onClick, cursor: onClick ? 'pointer' : 'unset', ownerState: ownerState, className: classes.root, fill: ownerState.color, opacity: ownerState.isFaded ? 0.3 : 1, filter: ownerState.isHighlighted ? 'brightness(120%)' : 'none', strokeWidth: 1, strokeLinejoin: "round" }, other, interactionProps, animatedProps)); }); if (process.env.NODE_ENV !== "production") PieArc.displayName = "PieArc"; process.env.NODE_ENV !== "production" ? PieArc.propTypes = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | // | To update them edit the TypeScript types and run "pnpm proptypes" | // ---------------------------------------------------------------------- classes: PropTypes.object, cornerRadius: PropTypes.number.isRequired, dataIndex: PropTypes.number.isRequired, endAngle: PropTypes.number.isRequired, id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, innerRadius: PropTypes.number.isRequired, isFaded: PropTypes.bool.isRequired, isHighlighted: PropTypes.bool.isRequired, outerRadius: PropTypes.number.isRequired, paddingAngle: PropTypes.number.isRequired, /** * @default false */ skipAnimation: PropTypes.bool.isRequired, startAngle: PropTypes.number.isRequired } : void 0; export { PieArc };